[Tabs] Type onChange as a generic react event

Author: eps1lon

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

@@ -29,7 +29,7 @@ export type OverrideProps<
   C extends React.ElementType
 > = (
   & BaseProps<M>
-  & Omit<React.ComponentPropsWithRef<C>, keyof CommonProps<M>>
+  & Omit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
 );
 
 /**

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

@@ -8,7 +8,7 @@ export type TabTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendButt
     fullWidth?: boolean;
     icon?: string | React.ReactElement;
     label?: React.ReactNode;
-    onChange?: (event: React.ChangeEvent<{ checked: boolean }>, value: any) => void;
+    onChange?: (event: React.SyntheticEvent, value: any) => void;
     onClick?: React.EventHandler<any>;
     selected?: boolean;
     style?: React.CSSProperties;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import ButtonBase from '../ButtonBase';
 import { TabScrollButtonProps } from '../TabScrollButton';
+import { TabProps } from '../Tab';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof ButtonBase> {
@@ -41,7 +42,7 @@ export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof Button
      * @param {object} event The event source of the callback
      * @param {any} value We default to the index of the child (number)
      */
-    onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
+    onChange?: TabProps['onChange'];
     /**
      * The tabs orientation (layout flow direction).
      */

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Tabs from '@material-ui/core/Tabs';
+
+function testOnChange() {
+  function handleTabsChange(event: React.SyntheticEvent, tabsValue: unknown) {}
+  <Tabs onChange={handleTabsChange} />;
+
+  function handleChange(event: React.ChangeEvent) {}
+  // @ts-expect-error internally it's either FocusEvent or ClickEvent
+  <Tabs onChange={handleChange} />;
+}

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

@@ -133,7 +133,8 @@ declare const Foo: OverridableComponent<{
   numberProp={3}
 />;
 
-// @ts-expect-error
+// inconsistent typing of base vs override prop
+// but the assumption is that `Foo` intercepts `inconsistentProp` and doesn't forward it
 <Foo
   component={MyIncompatibleComponent1} // inconsistent typing of base vs override prop
   numberProp={3}