[material-next][Switch] Change files to TypeScript

packages/mui-material-next/src/Switch/Switch.test.js → packages/mui-material-next/src/Switch/Switch.test.tsx

@@ -38,8 +38,8 @@ describe('<Switch />', () => {
       container: { firstChild: root },
     } = render(<Switch />);
 
-    expect(root.childNodes[1]).to.have.property('tagName', 'SPAN');
-    expect(root.childNodes[1]).to.have.class(classes.track);
+    expect(root?.childNodes[1]).to.have.property('tagName', 'SPAN');
+    expect(root?.childNodes[1]).to.have.class(classes.track);
   });
 
   it('renders a `role="checkbox"` with the Unchecked state by default', () => {

packages/mui-material-next/src/Switch/Switch.js → packages/mui-material-next/src/Switch/Switch.tsx

@@ -7,11 +7,13 @@ import { refType, unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { alpha, darken, lighten } from '@mui/system';
 import SwitchBase from '@mui/material/internal/SwitchBase';
+import { OverridableComponent } from '@mui/types';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
+import { SwitchOwnerState, SwitchProps, SwitchTypeMap } from './Switch.types';
 
-const useUtilityClasses = (ownerState) => {
+const useUtilityClasses = (ownerState: SwitchOwnerState) => {
   const { classes, edge, size, color, checked, disabled } = ownerState;
 
   const slots = {
@@ -47,7 +49,7 @@ const SwitchRoot = styled('span', {
       styles[`size${capitalize(ownerState.size)}`],
     ];
   },
-})(({ ownerState }) => ({
+})<{ ownerState: SwitchOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
   width: 34 + 12 * 2,
   height: 14 + 12 * 2,
@@ -96,7 +98,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
       ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
     ];
   },
-})(
+})<{ ownerState: SwitchOwnerState }>(
   ({ theme }) => ({
     position: 'absolute',
     top: 0,
@@ -173,7 +175,7 @@ const SwitchTrack = styled('span', {
   name: 'MuiSwitch',
   slot: 'Track',
   overridesResolver: (props, styles) => styles.track,
-})(({ theme }) => ({
+})<{ ownerState: SwitchOwnerState }>(({ theme }) => ({
   height: '100%',
   width: '100%',
   borderRadius: 14 / 2,
@@ -193,15 +195,29 @@ const SwitchThumb = styled('span', {
   name: 'MuiSwitch',
   slot: 'Thumb',
   overridesResolver: (props, styles) => styles.thumb,
-})(({ theme }) => ({
+})<{ ownerState: SwitchOwnerState }>(({ theme }) => ({
   boxShadow: (theme.vars || theme).shadows[1],
   backgroundColor: 'currentColor',
   width: 20,
   height: 20,
   borderRadius: '50%',
 }));
 
-const Switch = React.forwardRef(function Switch(inProps, ref) {
+/**
+ *
+ * Demos:
+ *
+ * - [Switch](https://mui.com/material-ui/react-switch/)
+ * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [Switch API](https://mui.com/material-ui/api/switch/)
+ * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
+ */
+const Switch = React.forwardRef(function Switch<
+  BaseComponentType extends React.ElementType = SwitchTypeMap['defaultComponent'],
+>(inProps: SwitchProps<BaseComponentType>, ref: React.ForwardedRef<HTMLSpanElement>) {
   const props = useThemeProps({ props: inProps, name: 'MuiSwitch' });
   const { className, color = 'primary', edge = false, size = 'medium', sx, ...other } = props;
 
@@ -232,12 +248,12 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
       <SwitchTrack className={classes.track} ownerState={ownerState} />
     </SwitchRoot>
   );
-});
+}) as OverridableComponent<SwitchTypeMap>;
 
 Switch.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * If `true`, the component is checked.
@@ -247,6 +263,10 @@ Switch.propTypes /* remove-proptypes */ = {
    * The icon to display when the component is checked.
    */
   checkedIcon: PropTypes.node,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -337,6 +357,6 @@ Switch.propTypes /* remove-proptypes */ = {
    * The browser uses "on" as the default value.
    */
   value: PropTypes.any,
-};
+} as any;
 
 export default Switch;

packages/mui-material-next/src/Switch/Switch.d.ts → packages/mui-material-next/src/Switch/Switch.types.ts

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { OverridableStringUnion } from '@mui/types';
-import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
+import { OverridableStringUnion, OverrideProps, PartiallyRequired } from '@mui/types';
+import { Theme } from '@mui/material/styles';
 // eslint-disable-next-line no-restricted-imports
+import { InternalStandardProps as StandardProps } from '@mui/material';
 import type { SwitchBaseProps } from '@mui/material/internal/SwitchBase';
 import { SwitchClasses } from './switchClasses';
 
 export interface SwitchPropsSizeOverrides {}
 
 export interface SwitchPropsColorOverrides {}
 
-export interface SwitchProps
+export interface SwitchOwnProps
   extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon'> {
   /**
    * The icon to display when the component is checked.
@@ -55,16 +56,17 @@ export interface SwitchProps
   value?: unknown;
 }
 
-/**
- *
- * Demos:
- *
- * - [Switch](https://mui.com/material-ui/react-switch/)
- * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
- *
- * API:
- *
- * - [Switch API](https://mui.com/material-ui/api/switch/)
- * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
- */
-export default function Switch(props: SwitchProps): JSX.Element;
+export interface SwitchTypeMap<
+  AdditionalProps = {},
+  RootComponentType extends React.ElementType = 'span',
+> {
+  props: SwitchOwnProps & AdditionalProps;
+  defaultComponent: RootComponentType;
+}
+
+export type SwitchProps<
+  RootComponentType extends React.ElementType = SwitchTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<SwitchTypeMap<AdditionalProps, RootComponentType>, RootComponentType>;
+
+export interface SwitchOwnerState extends PartiallyRequired<SwitchProps, 'color' | 'size'> {}