James' review

docs/pages/base-ui/api/switch.json

@@ -4,6 +4,7 @@
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "onChange": {
       "type": { "name": "func" },
       "signature": {

docs/pages/base-ui/api/use-switch.json

@@ -21,7 +21,6 @@
   },
   "returnValue": {
     "checked": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
-    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "getButtonProps": {
       "type": {
         "name": "(externalProps?: React.HTMLAttributes<HTMLButtonElement>) => UseSwitchButtonSlotProps",
@@ -35,8 +34,7 @@
         "description": "(externalProps?: React.HTMLAttributes<HTMLInputElement>) => UseSwitchInputSlotProps"
       },
       "required": true
-    },
-    "readOnly": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
+    }
   },
   "name": "useSwitch",
   "filename": "/packages/mui-base/src/useSwitch/useSwitch.ts",

docs/src/components/productBaseUI/BaseUICustomization.tsx

@@ -177,11 +177,11 @@ const StyledSwitchThumb = styled('span')`
 `;
 
 function SwitchFromHook(props: UseSwitchParameters) {
-  const { getInputProps, getButtonProps, checked, disabled } = useSwitch(props);
+  const { getInputProps, getButtonProps, checked } = useSwitch(props);
 
   const stateAttributes = {
     'data-state': checked ? 'checked' : 'unchecked',
-    'data-disabled': disabled || undefined,
+    'data-disabled': props.disabled || undefined,
   };
 
   return (

docs/translations/api-docs-base/switch/switch.json

@@ -9,6 +9,7 @@
       "description": "The default checked state. Use when the component is not controlled."
     },
     "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "inputRef": { "description": "Ref to the underlying input element." },
     "onChange": {
       "description": "Callback fired when the state is changed.",
       "typeDescriptions": {

docs/translations/api-docs/use-switch/use-switch.json

@@ -16,8 +16,6 @@
   },
   "returnValueDescriptions": {
     "checked": { "description": "If <code>true</code>, the component will be checked." },
-    "disabled": { "description": "If <code>true</code>, the component will be disabled." },
-    "getInputProps": { "description": "Resolver for the input slot&#39;s props." },
-    "readOnly": { "description": "If <code>true</code>, the component will be read only." }
+    "getInputProps": { "description": "Resolver for the input slot&#39;s props." }
   }
 }

packages/mui-base/src/Switch/Switch.test.tsx

@@ -15,9 +15,10 @@ describe('<Switch />', () => {
   }));
 
   describe('extra props', () => {
-    it('should not override the built-in attributes', () => {
+    it('should override the built-in attributes', () => {
       const { container } = render(<Switch data-state="checked" role="checkbox" />);
-      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch');
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
     });
   });
 
@@ -127,6 +128,16 @@ describe('<Switch />', () => {
     });
   });
 
+  describe('prop: inputRef', () => {
+    it('should be able to access the native input', () => {
+      const inputRef = React.createRef<HTMLInputElement>();
+      const { container } = render(<Switch inputRef={inputRef} />);
+      const internalInput = container.querySelector('input[type="checkbox"]')!;
+
+      expect(inputRef.current).to.equal(internalInput);
+    });
+  });
+
   it('should update its state if the underlying input is toggled', () => {
     const { getByRole, container } = render(<Switch />);
     const switchElement = getByRole('switch');

packages/mui-base/src/Switch/Switch.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import refType from '@mui/utils/refType';
 import { useSwitch } from '../useSwitch';
 import { SwitchProps, SwitchOwnerState } from './Switch.types';
 import { resolveClassName } from '../utils/resolveClassName';
@@ -31,15 +32,16 @@ const Switch = React.forwardRef(function Switch(
     checked: checkedProp,
     className: classNameProp,
     defaultChecked,
-    disabled: disabledProp,
+    disabled = false,
+    inputRef,
     onChange,
-    readOnly: readOnlyProp,
+    readOnly = false,
     required = false,
     render = defaultRender,
     ...other
   } = props;
 
-  const { getInputProps, getButtonProps, checked, disabled, readOnly } = useSwitch(props);
+  const { getInputProps, getButtonProps, checked } = useSwitch(props);
 
   const ownerState: SwitchOwnerState = React.useMemo(
     () => ({
@@ -98,9 +100,9 @@ Switch.propTypes /* remove-proptypes */ = {
    */
   disabled: PropTypes.bool,
   /**
-   * @ignore
+   * Ref to the underlying input element.
    */
-  id: PropTypes.string,
+  inputRef: refType,
   /**
    * @ignore
    */
@@ -129,14 +131,6 @@ Switch.propTypes /* remove-proptypes */ = {
    * @default false
    */
   required: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.number,
-    PropTypes.string,
-  ]),
 } as any;
 
 export { Switch };

packages/mui-base/src/Switch/Switch.types.ts

@@ -24,6 +24,10 @@ export interface SwitchProps
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Ref to the underlying input element.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
   /**
    * Callback fired when the state is changed.
    *

packages/mui-base/src/useSwitch/useSwitch.ts

@@ -63,12 +63,12 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
     };
 
   const getButtonProps: UseSwitchReturnValue['getButtonProps'] = (otherProps = {}) => ({
-    ...otherProps,
     type: 'button',
     role: 'switch',
     'aria-checked': checked,
     'aria-disabled': disabled,
     'aria-readonly': readOnly,
+    ...otherProps,
     onClick: createHandleClick(otherProps),
   });
 
@@ -88,9 +88,7 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
 
   return {
     checked,
-    disabled: Boolean(disabled),
     getButtonProps,
     getInputProps,
-    readOnly: Boolean(readOnly),
   };
 }

packages/mui-base/src/useSwitch/useSwitch.types.ts

@@ -56,8 +56,8 @@ export type UseSwitchInputSlotProps<TOther = {}> = Omit<TOther, keyof UseSwitchI
 
 interface UseSwitchButtonSlotOwnProps {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
-  type: 'button';
-  role: 'switch';
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  role: React.AriaRole;
   'aria-disabled': React.AriaAttributes['aria-disabled'];
   'aria-checked': React.AriaAttributes['aria-checked'];
   'aria-readonly': React.AriaAttributes['aria-readonly'];
@@ -74,10 +74,6 @@ export interface UseSwitchReturnValue {
    * If `true`, the component will be checked.
    */
   checked: boolean;
-  /**
-   * If `true`, the component will be disabled.
-   */
-  disabled: boolean;
   /**
    * Resolver for the input slot's props.
    * @param externalProps props for the input slot
@@ -89,8 +85,4 @@ export interface UseSwitchReturnValue {
   getButtonProps: (
     externalProps?: React.HTMLAttributes<HTMLButtonElement>,
   ) => UseSwitchButtonSlotProps;
-  /**
-   * If `true`, the component will be read only.
-   */
-  readOnly: boolean;
 }

scripts/generateProptypes.ts

@@ -71,19 +71,6 @@ const useExternalDocumentation: Record<string, '*' | readonly string[]> = {
   Checkbox: ['defaultChecked'],
   Container: ['component'],
   Stack: ['component'],
-  Switch: [
-    'checked',
-    'defaultChecked',
-    'disabled',
-    'disableRipple',
-    'edge',
-    'id',
-    'inputProps',
-    'inputRef',
-    'onChange',
-    'required',
-    'value',
-  ],
   SwipeableDrawer: [
     'anchor',
     'hideBackdrop',