[core] Type custom onChange implementations with a generic react event (#21552)

Author: eps1lon

docs/pages/api-docs/accordion.md

@@ -33,7 +33,7 @@ The `MuiAccordion` name can be used for providing [default props](/customization
 | <span class="prop-name">defaultExpanded</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, expands the accordion by default. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the accordion will be displayed in a disabled state. |
 | <span class="prop-name">expanded</span> | <span class="prop-type">bool</span> |  | If `true`, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the expand/collapse state is changed.<br><br>**Signature:**<br>`function(event: object, expanded: boolean) => void`<br>*event:* The event source of the callback.<br>*expanded:* The `expanded` state of the accordion. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the expand/collapse state is changed.<br><br>**Signature:**<br>`function(event: object, expanded: boolean) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*expanded:* The `expanded` state of the accordion. |
 | <span class="prop-name">square</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, rounded corners are disabled. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

docs/pages/api-docs/bottom-navigation.md

@@ -31,7 +31,7 @@ The `MuiBottomNavigation` name can be used for providing [default props](/custom
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback.<br>*value:* We default to the index of the child. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* We default to the index of the child. |
 | <span class="prop-name">showLabels</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the currently selected `BottomNavigationAction`. |
 

docs/pages/api-docs/slider.md

@@ -42,8 +42,8 @@ The `MuiSlider` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">100</span> | The maximum allowed value of the slider. Should not be equal to min. |
 | <span class="prop-name">min</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The minimum allowed value of the slider. Should not be equal to max. |
 | <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | Name attribute of the hidden `input` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the slider's value changed.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
-| <span class="prop-name">onChangeCommitted</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the `mouseup` is triggered.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the slider's value changed.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* The new value. |
+| <span class="prop-name">onChangeCommitted</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the `mouseup` is triggered.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* The new value. |
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
 | <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |

docs/pages/api-docs/tabs.md

@@ -36,7 +36,7 @@ The `MuiTabs` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">indicatorColor</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'secondary'</span> | Determines the color of the indicator. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child (number) |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* We default to the index of the child (number) |
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The tabs orientation (layout flow direction). |
 | <span class="prop-name">ScrollButtonComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TabScrollButton</span> | The component used to render the scroll buttons. |
 | <span class="prop-name">scrollButtons</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'desktop'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> | <span class="prop-default">'auto'</span> | Determine behavior of scroll buttons when tabs are set to scroll:<br>- `auto` will only present them when not all the items are visible. - `desktop` will only present them on medium and larger viewports. - `on` will always present them. - `off` will never present them. |

docs/src/pages/components/accordion/ControlledAccordions.tsx

@@ -28,7 +28,7 @@ export default function ControlledAccordions() {
   const [expanded, setExpanded] = React.useState<string | false>(false);
 
   const handleChange = (panel: string) => (
-    event: React.ChangeEvent<{}>,
+    event: React.SyntheticEvent,
     isExpanded: boolean,
   ) => {
     setExpanded(isExpanded ? panel : false);

docs/src/pages/components/accordion/CustomizedAccordions.tsx

@@ -50,7 +50,7 @@ export default function CustomizedAccordions() {
   const [expanded, setExpanded] = React.useState<string | false>('panel1');
 
   const handleChange = (panel: string) => (
-    event: React.ChangeEvent<{}>,
+    event: React.SyntheticEvent,
     newExpanded: boolean,
   ) => {
     setExpanded(newExpanded ? panel : false);

docs/src/pages/components/bottom-navigation/LabelBottomNavigation.tsx

@@ -17,7 +17,7 @@ export default function LabelBottomNavigation() {
   const classes = useStyles();
   const [value, setValue] = React.useState('recents');
 
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: string) => {
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 

docs/src/pages/components/slider/ContinuousSlider.tsx

@@ -16,7 +16,10 @@ export default function ContinuousSlider() {
   const classes = useStyles();
   const [value, setValue] = React.useState<number>(30);
 
-  const handleChange = (event: any, newValue: number | number[]) => {
+  const handleChange = (
+    event: React.SyntheticEvent,
+    newValue: number | number[],
+  ) => {
     setValue(newValue as number);
   };
 

docs/src/pages/components/slider/InputSlider.tsx

@@ -21,7 +21,10 @@ export default function InputSlider() {
     number | string | Array<number | string>
   >(30);
 
-  const handleSliderChange = (event: any, newValue: number | number[]) => {
+  const handleSliderChange = (
+    event: React.SyntheticEvent,
+    newValue: number | number[],
+  ) => {
     setValue(newValue);
   };
 

docs/src/pages/components/slider/NonLinearSlider.tsx

@@ -13,7 +13,10 @@ function valueLabelFormat(value: number) {
 export default function NonLinearSlider() {
   const [value, setValue] = React.useState<number | number[]>(1);
 
-  const handleChange = (event: any, newValue: number | number[]) => {
+  const handleChange = (
+    event: React.SyntheticEvent,
+    newValue: number | number[],
+  ) => {
     setValue(newValue);
   };