[SwitchBase] Prepare v5 removal of the second argument of onChange

docs/pages/api-docs/radio.md

@@ -39,7 +39,7 @@ The `MuiRadio` name can be used for providing [default props](/customization/glo
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> |  | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. |
 | <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> |  | Pass a ref to the `input` element. |
 | <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | Name attribute of the `input` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback.<br>*checked:* The new checked state after the change.  You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the radio. `small` is equivalent to the dense radio styling. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the component. The DOM API casts this to a string. |

docs/pages/api-docs/switch.md

@@ -39,7 +39,7 @@ The `MuiSwitch` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | The id of the `input` element. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> |  | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. |
 | <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> |  | Pass a ref to the `input` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback.<br>*checked:* The new checked state after the change.  You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the switch. `small` is equivalent to the dense switch styling. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. |

docs/src/pages/components/tables/EnhancedTable.tsx

@@ -104,7 +104,7 @@ interface EnhancedTableProps {
   classes: ReturnType<typeof useStyles>;
   numSelected: number;
   onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
-  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
   order: Order;
   orderBy: string;
   rowCount: number;

docs/src/pages/customization/color/ColorTool.js

@@ -113,9 +113,7 @@ function ColorTool(props) {
   };
 
   const handleChangeHue = (name) => (event) => {
-    const {
-      target: { value: hue },
-    } = event;
+    const hue = event.target.value;
     const color = colors[hue][shades[state[`${name}Shade`]]];
 
     setState({

packages/material-ui/src/Radio/Radio.js

@@ -157,8 +157,6 @@ Radio.propTypes = {
    * Callback fired when the state is changed.
    *
    * @param {object} event The event source of the callback.
-   * @param {boolean} checked The new checked state after the change.
-   *
    * You can pull out the new value by accessing `event.target.value` (string).
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */

packages/material-ui/src/Switch/Switch.js

@@ -253,8 +253,6 @@ Switch.propTypes = {
    * Callback fired when the state is changed.
    *
    * @param {object} event The event source of the callback.
-   * @param {boolean} checked The new checked state after the change.
-   *
    * You can pull out the new value by accessing `event.target.value` (string).
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */

packages/material-ui/src/internal/SwitchBase.d.ts

@@ -41,8 +41,6 @@ export interface SwitchBaseProps
    * Callback fired when the state is changed.
    *
    * @param {object} event The event source of the callback.
-   * @param {boolean} checked The new checked state after the change.
-   *
    * You can pull out the new value by accessing `event.target.value` (string).
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */

packages/material-ui/src/internal/SwitchBase.js

@@ -89,6 +89,7 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) {
     setCheckedState(newChecked);
 
     if (onChange) {
+      // TODO v5: remove the second argument.
       onChange(event, newChecked);
     }
   };

packages/material-ui/test/typescript/components.spec.tsx

@@ -655,20 +655,30 @@ const SelectionControlTest = () => {
     checkedF: true,
   };
 
-  const handleChange = (name: string) => (event: React.SyntheticEvent<any>, checked: boolean) =>
-    log({ [name]: checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    log({ [event.target.name]: event.target.checked });
 
   return (
     <FormGroup row>
       <FormControlLabel
         control={
-          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
+          <Checkbox
+            checked={state.checkedA}
+            onChange={handleChange}
+            name="checkedA"
+            value="checkedA"
+          />
         }
         label="Option A"
       />
       <FormControlLabel
         control={
-          <Checkbox checked={state.checkedB} onChange={handleChange('checkedB')} value="checkedB" />
+          <Checkbox
+            checked={state.checkedB}
+            onChange={handleChange}
+            name="checkedB"
+            value="checkedB"
+          />
         }
         label="Option B"
       />
@@ -681,7 +691,9 @@ const SelectionControlTest = () => {
         label="Indeterminate"
       />
       <FormControlLabel
-        control={<Checkbox checked={true} onChange={handleChange('checkedF')} value="checkedF" />}
+        control={
+          <Checkbox checked={true} onChange={handleChange} name="checkedF" value="checkedF" />
+        }
         label="Custom color"
       />
     </FormGroup>
@@ -694,16 +706,32 @@ const SwitchTest = () => {
     checkedB: false,
     checkedE: true,
   };
-  const handleChange = (name: string) => (event: React.SyntheticEvent<any>, checked: boolean) =>
-    log({ [name]: checked });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    log({ [event.target.name]: event.target.checked });
 
   return (
     <div>
-      <Switch checked={state.checkedA} onChange={handleChange('checkedA')} aria-label="checkedA" />
-      <Switch checked={state.checkedB} onChange={handleChange('checkedB')} aria-label="checkedB" />
+      <Switch
+        checked={state.checkedA}
+        onChange={handleChange}
+        name="checkedA"
+        aria-label="checkedA"
+      />
+      <Switch
+        checked={state.checkedB}
+        onChange={handleChange}
+        name="checkedB"
+        aria-label="checkedB"
+      />
       <Switch checked={false} aria-label="checkedC" disabled />
       <Switch checked aria-label="checkedD" disabled />
-      <Switch checked={state.checkedE} onChange={handleChange('checkedE')} aria-label="checkedD" />
+      <Switch
+        checked={state.checkedE}
+        onChange={handleChange}
+        name="checkedE"
+        aria-label="checkedD"
+      />
     </div>
   );
 };