[core] Offer alternative to OverridableComponent via module augment…

…ation for better performance (#32735)

packages/mui-material/src/OverridableComponentAugmentation.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+
+declare module '@mui/material/OverridableComponent' {
+  /**
+   * A component whose root component can be controlled via a `component` prop.
+   *
+   * Adjusts valid props based on the type of `component`.
+   */
+  interface OverridableComponent<M extends OverridableTypeMap> {
+    <C extends React.ElementType>(
+      props: {
+        /**
+         * The component used for the root node.
+         * Either a string to use a HTML element or a component.
+         */
+        component: C;
+      } & OverridePropsVer2<M, C>,
+    ): JSX.Element;
+    (props: DefaultComponentPropsVer2<M>): JSX.Element;
+  }
+
+  /**
+   * Props of the component if `component={Component}` is used.
+   */
+  // prettier-ignore
+  type OverridePropsVer2<
+    M extends OverridableTypeMap,
+    C extends React.ElementType,
+  > = (
+    & BaseProps<M>
+    & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>>
+    & { ref?: React.Ref<Element> }
+  );
+
+  /**
+   * Props if `component={Component}` is NOT used.
+   */
+  // prettier-ignore
+  type DefaultComponentPropsVer2<M extends OverridableTypeMap> = 
+    & BaseProps<M>
+    & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>>
+    & { ref?: React.Ref<Element> };
+}

packages/mui-material/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../tsconfig",
   "include": ["src/**/*", "test/**/*"],
-  "exclude": ["test/typescript/moduleAugmentation"]
+  "exclude": ["test/typescript/moduleAugmentation", "src/OverridableComponentAugmentation.ts"]
 }

packages/mui-types/OverridableComponentAugmentation.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+declare module '@mui/types' {
+  /**
+   * A component whose root component can be controlled via a `component` prop.
+   *
+   * Adjusts valid props based on the type of `component`.
+   */
+  interface OverridableComponent<M extends OverridableTypeMap> {
+    <C extends React.ElementType>(
+      props: {
+        /**
+         * The component used for the root node.
+         * Either a string to use a HTML element or a component.
+         */
+        component: C;
+      } & OverridePropsVer2<M, C>,
+    ): JSX.Element;
+    (props: DefaultComponentPropsVer2<M>): JSX.Element;
+    propTypes?: any;
+  }
+
+  /**
+   * Props of the component if `component={Component}` is used.
+   */
+  // prettier-ignore
+  type OverridePropsVer2<
+    M extends OverridableTypeMap,
+    C extends React.ElementType
+  > = (
+    & BaseProps<M>
+    & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>>
+    & { ref?: React.Ref<Element> }
+  );
+
+  /**
+   * Props if `component={Component}` is NOT used.
+   */
+  // prettier-ignore
+  type DefaultComponentPropsVer2<M extends OverridableTypeMap> =
+    & BaseProps<M>
+    & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>>
+    & { ref?: React.Ref<Element> };
+}

packages/mui-types/package.json

@@ -6,7 +6,8 @@
   "description": "Utility types for MUI.",
   "types": "./index.d.ts",
   "files": [
-    "index.d.ts"
+    "index.d.ts",
+    "OverridableComponentAugmentation.ts"
   ],
   "keywords": [
     "react",
@@ -25,7 +26,7 @@
   },
   "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-types",
   "scripts": {
-    "build": "mkdir build && cpy index.d.ts build/ && yarn build:copy-files",
+    "build": "mkdir build && cpy index.d.ts build/ && cpy OverridableComponentAugmentation.ts build/ && yarn build:copy-files",
     "build:copy-files": "node ../../scripts/copy-files.js",
     "prebuild": "rimraf build",
     "release": "yarn build && npm publish build",

packages/mui-types/tsconfig.json

@@ -1,3 +1,4 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "exclude": ["OverridableComponentAugmentation.ts"]
 }