[core] Replace ChangeEvent<{}> with SyntheticEvent (#22716)

docs/src/pages/components/autocomplete/GitHubLabel.tsx

@@ -142,7 +142,7 @@ export default function GitHubLabel() {
   };
 
   const handleClose = (
-    event: React.ChangeEvent<{}>,
+    event: React.SyntheticEvent,
     reason: AutocompleteCloseReason,
   ) => {
     if (reason === 'toggleInput') {

docs/src/pages/components/tree-view/ControlledTreeView.tsx

@@ -24,11 +24,11 @@ export default function ControlledTreeView() {
   const [expanded, setExpanded] = React.useState<string[]>([]);
   const [selected, setSelected] = React.useState<string[]>([]);
 
-  const handleToggle = (event: React.ChangeEvent<{}>, nodeIds: string[]) => {
+  const handleToggle = (event: React.SyntheticEvent, nodeIds: string[]) => {
     setExpanded(nodeIds);
   };
 
-  const handleSelect = (event: React.ChangeEvent<{}>, nodeIds: string[]) => {
+  const handleSelect = (event: React.SyntheticEvent, nodeIds: string[]) => {
     setSelected(nodeIds);
   };
 

framer/Material-UI.framerfx/code/Tabs.tsx

@@ -25,7 +25,7 @@ export function Tabs(props: Props): JSX.Element {
 
   const [value, setValue] = React.useState(0);
 
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 

framer/scripts/templates/tabs.txt

@@ -15,7 +15,7 @@ const { appBarColor, labels, icons, width, height, ...other } = props
 
   const [value, setValue] = React.useState(0);
 
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 

packages/material-ui-lab/src/Rating/Rating.d.ts

@@ -107,14 +107,14 @@ export interface RatingProps
    * @param {object} event The event source of the callback.
    * @param {number} value The new value.
    */
-  onChange?: (event: React.ChangeEvent<{}>, value: number | null) => void;
+  onChange?: (event: React.SyntheticEvent, value: number | null) => void;
   /**
    * Callback function that is fired when the hover state changes.
    *
    * @param {object} event The event source of the callback.
    * @param {number} value The new value.
    */
-  onChangeActive?: (event: React.ChangeEvent<{}>, value: number) => void;
+  onChangeActive?: (event: React.SyntheticEvent, value: number) => void;
   /**
    * The minimum increment value change allowed.
    * @default 1

packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx

@@ -8,9 +8,4 @@ function testOnChange() {
   function handleElementChange(event: React.ChangeEvent) {}
   // @ts-expect-error internally it's whatever even lead to a change in value
   <Slider onChange={handleElementChange} onChangeCommitted={handleElementChange} />;
-
-  // this is structurally equal to `React.SyntheticEvent`
-  // It works but we don't recommend it since it has some non-structural implications: changeEvent.target === changeEvent.currentTarget
-  function handleChange(event: React.ChangeEvent<{}>) {}
-  <Slider onChange={handleChange} />;
 }

packages/material-ui-lab/src/TreeView/TreeView.d.ts

@@ -61,14 +61,14 @@ export interface TreeViewPropsBase extends StandardProps<React.HTMLAttributes<HT
    * @param {object} event The event source of the callback
    * @param {string} value of the focused node.
    */
-  onNodeFocus?: (event: React.ChangeEvent<{}>, nodeId: string) => void;
+  onNodeFocus?: (event: React.SyntheticEvent, nodeId: string) => void;
   /**
    * Callback fired when tree items are expanded/collapsed.
    *
    * @param {object} event The event source of the callback.
    * @param {array} nodeIds The ids of the expanded nodes.
    */
-  onNodeToggle?: (event: React.ChangeEvent<{}>, nodeIds: string[]) => void;
+  onNodeToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
 }
 
 export interface MultiSelectTreeViewProps extends TreeViewPropsBase {
@@ -95,7 +95,7 @@ export interface MultiSelectTreeViewProps extends TreeViewPropsBase {
    * @param {(array|string)} value of the selected nodes. When `multiSelect` is true
    * this is an array of strings; when false (default) a string.
    */
-  onNodeSelect?: (event: React.ChangeEvent<{}>, nodeIds: string[]) => void;
+  onNodeSelect?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
 }
 
 export interface SingleSelectTreeViewProps extends TreeViewPropsBase {
@@ -122,7 +122,7 @@ export interface SingleSelectTreeViewProps extends TreeViewPropsBase {
    * @param {(array|string)} value of the selected nodes. When `multiSelect` is true
    * this is an array of strings; when false (default) a string.
    */
-  onNodeSelect?: (event: React.ChangeEvent<{}>, nodeIds: string) => void;
+  onNodeSelect?: (event: React.SyntheticEvent, nodeIds: string) => void;
 }
 
 export type TreeViewProps = SingleSelectTreeViewProps | MultiSelectTreeViewProps;

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts

@@ -183,7 +183,7 @@ export interface UseAutocompleteProps<
    * @param {object} event The event source of the callback.
    * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"remove-option"`, `"blur"`.
    */
-  onClose?: (event: React.ChangeEvent<{}>, reason: AutocompleteCloseReason) => void;
+  onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
   /**
    * Callback fired when the input value changes.
    *
@@ -192,7 +192,7 @@ export interface UseAutocompleteProps<
    * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
   onInputChange?: (
-    event: React.ChangeEvent<{}>,
+    event: React.SyntheticEvent,
     value: string,
     reason: AutocompleteInputChangeReason
   ) => void;
@@ -202,7 +202,7 @@ export interface UseAutocompleteProps<
    *
    * @param {object} event The event source of the callback.
    */
-  onOpen?: (event: React.ChangeEvent<{}>) => void;
+  onOpen?: (event: React.SyntheticEvent) => void;
   /**
    * Callback fired when the highlight option changes.
    *
@@ -211,7 +211,7 @@ export interface UseAutocompleteProps<
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
    */
   onHighlightChange?: (
-    event: React.ChangeEvent<{}>,
+    event: React.SyntheticEvent,
     option: T | null,
     reason: AutocompleteHighlightChangeReason
   ) => void;
@@ -259,7 +259,7 @@ export interface UseAutocompleteProps<
    * @param {string} reason One of "create-option", "select-option", "remove-option", "blur" or "clear".
    */
   onChange?: (
-    event: React.ChangeEvent<{}>,
+    event: React.SyntheticEvent,
     value: Value<T, Multiple, DisableClearable, FreeSolo>,
     reason: AutocompleteChangeReason,
     details?: AutocompleteChangeDetails<T>

packages/material-ui/src/Accordion/Accordion.spec.tsx

@@ -14,11 +14,4 @@ function testOnChange() {
   >
     <div />
   </Accordion>;
-
-  // this is structurally equal to `React.SyntheticEvent`
-  // It works but we don't recommend it since it has some non-structural implications: changeEvent.target === changeEvent.currentTarget
-  function handleChange(event: React.ChangeEvent<{}>) {}
-  <Accordion onChange={handleChange}>
-    <div />
-  </Accordion>;
 }

packages/material-ui/src/BottomNavigation/BottomNavigation.spec.tsx

@@ -11,9 +11,4 @@ function testOnChange() {
     // @ts-expect-error internally it's whatever even lead to a change in value
     onChange={handleElementChange}
   />;
-
-  // this is structurally equal to `React.SyntheticEvent`
-  // It works but we don't recommend it since it has some non-structural implications: changeEvent.target === changeEvent.currentTarget
-  function handleChange(event: React.ChangeEvent<{}>) {}
-  <BottomNavigation onChange={handleChange} />;
 }

packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts

@@ -52,7 +52,7 @@ export interface FormControlLabelProps
    * @param {object} event The event source of the callback.
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onChange?: (event: React.ChangeEvent<{}>, checked: boolean) => void;
+  onChange?: (event: React.SyntheticEvent, checked: boolean) => void;
   /**
    * The value of the component.
    */

packages/material-ui/src/Select/Select.d.ts

@@ -122,14 +122,14 @@ export interface SelectProps
    *
    * @param {object} event The event source of the callback.
    */
-  onClose?: (event: React.ChangeEvent<{}>) => void;
+  onClose?: (event: React.SyntheticEvent) => void;
   /**
    * Callback fired when the component requests to be opened.
    * Use in controlled mode (see open).
    *
    * @param {object} event The event source of the callback.
    */
-  onOpen?: (event: React.ChangeEvent<{}>) => void;
+  onOpen?: (event: React.SyntheticEvent) => void;
   /**
    * Control `select` open state.
    * You can only use it when the `native` prop is `false` (default).

packages/material-ui/src/Select/SelectInput.d.ts

@@ -18,9 +18,9 @@ export interface SelectInputProps {
     event: React.ChangeEvent<{ name?: string; value: unknown }>,
     child: React.ReactNode
   ) => void;
-  onClose?: (event: React.ChangeEvent<{}>) => void;
+  onClose?: (event: React.SyntheticEvent) => void;
   onFocus?: React.FocusEventHandler<any>;
-  onOpen?: (event: React.ChangeEvent<{}>) => void;
+  onOpen?: (event: React.SyntheticEvent) => void;
   open?: boolean;
   readOnly?: boolean;
   renderValue?: (value: SelectInputProps['value']) => React.ReactNode;

packages/material-ui/src/Slider/Slider.spec.tsx

@@ -8,9 +8,4 @@ function testOnChange() {
   function handleElementChange(event: React.ChangeEvent) {}
   // @ts-expect-error internally it's whatever even lead to a change in value
   <Slider onChange={handleElementChange} onChangeCommitted={handleElementChange} />;
-
-  // this is structurally equal to `React.SyntheticEvent`
-  // It works but we don't recommend it since it has some non-structural implications: changeEvent.target === changeEvent.currentTarget
-  function handleChange(event: React.ChangeEvent<{}>) {}
-  <Slider onChange={handleChange} />;
 }

packages/material-ui/src/Tabs/Tabs.spec.tsx

@@ -10,9 +10,4 @@ function testOnChange() {
     // @ts-expect-error internally it's either FocusEvent or ClickEvent
     onChange={handleElementChange}
   />;
-
-  // this is structurally equal to `React.SyntheticEvent`
-  // It works but we don't recommend it since it has some non-structural implications: changeEvent.target === changeEvent.currentTarget
-  function handleChange(event: React.ChangeEvent<{}>) {}
-  <Tabs onChange={handleChange} />;
 }