[core] Try alternative to OverrideComponent type (ver 2)

docs/src/modules/components/Link.tsx

@@ -106,10 +106,12 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
   const nextjsProps = { to: href, linkAs, replace, scroll, shallow, prefetch, locale };
 
   if (noLinkStyle) {
+    // @ts-ignore TODO: this needs to be resolved
     return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />;
   }
 
   return (
+    // @ts-ignore TODO: this needs to be resolved
     <MuiLink
       component={NextLinkComposed}
       className={className}

packages/mui-material/src/Link/Link.spec.tsx

@@ -12,9 +12,8 @@ import { expectType } from '@mui/types';
 
 <Link
   component="button"
-  // @ts-expect-error Implicit any
   ref={(elem) => {
-    expectType<any, typeof elem>(elem);
+    expectType<HTMLButtonElement | null, typeof elem>(elem);
   }}
 >
   Home

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DistributiveOmit } from '@mui/types';
+import { Merge } from '@mui/types';
 import { StyledComponentProps } from './styles';
 
 /**
@@ -13,13 +13,15 @@ export interface OverridableComponent<M extends OverridableTypeMap> {
   // Also, there are types in MUI Base that have a similar shape to this interface
   // (e.g. SelectUnstyledType, OptionUnstyledType, etc.).
   <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;
-    } & OverrideProps<M, C>,
+    props: C extends ''
+      ? { component: keyof JSX.IntrinsicElements }
+      : C extends React.ComponentClass<infer P>
+      ? Merge<P, BaseProps<M> & { component: C; ref?: React.Ref<InstanceType<C>> }>
+      : C extends React.ComponentType<infer P>
+      ? Merge<P, BaseProps<M> & { component: C }>
+      : C extends keyof JSX.IntrinsicElements
+      ? Merge<JSX.IntrinsicElements[C], BaseProps<M> & { component: C }>
+      : never,
   ): JSX.Element;
   (props: DefaultComponentProps<M>): JSX.Element;
 }
@@ -33,16 +35,17 @@ export type OverrideProps<
   C extends React.ElementType
 > = (
   & BaseProps<M>
-  & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
+  & Omit<React.ComponentProps<C>, keyof BaseProps<M>>
 );
 
 /**
  * Props if `component={Component}` is NOT used.
  */
 // prettier-ignore
-export type DefaultComponentProps<M extends OverridableTypeMap> =
+export type DefaultComponentProps<M extends OverridableTypeMap> = (
   & BaseProps<M>
-  & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
+  & Omit<React.ComponentProps<M['defaultComponent']>, keyof BaseProps<M>>
+);
 
 /**
  * Props defined on the component (+ common material-ui props).

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

@@ -7,7 +7,7 @@ interface MyOverrideProps {
   myString?: string;
   myCallback?(n: number): void;
 }
-declare const MyOverrideComponent: React.ComponentType<MyOverrideProps>;
+declare const MyOverrideComponent: React.FunctionComponent<MyOverrideProps>;
 class MyOverrideClassComponent extends React.Component<MyOverrideProps> {
   render() {
     return null;
@@ -16,7 +16,7 @@ class MyOverrideClassComponent extends React.Component<MyOverrideProps> {
 const MyOverrideRefForwardingComponent = React.forwardRef<HTMLLegendElement>((props, ref) => (
   <div ref={ref} />
 ));
-declare const MyIncompatibleComponent1: React.ComponentType<{ inconsistentProp?: number }>;
+declare const MyIncompatibleComponent1: React.FunctionComponent<{ inconsistentProp?: number }>;
 
 declare const Foo: OverridableComponent<{
   props: {

packages/mui-types/index.d.ts

@@ -86,6 +86,11 @@ export type IfEquals<T, U, Y = unknown, N = never> = (<G>() => G extends T ? 1 :
  */
 export function expectType<Expected, Actual>(actual: IfEquals<Actual, Expected, Actual>): void;
 
+/* -------------------------------------------------------------------------------------------------
+ * Utility types
+ * -----------------------------------------------------------------------------------------------*/
+export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+
 /**
  * A component whose root component can be controlled via a `component` prop.
  *
@@ -97,18 +102,21 @@ export interface OverridableComponent<M extends OverridableTypeMap> {
   // Also, there are types in MUI Base that have a similar shape to this interface
   // (e.g. SelectUnstyledType, OptionUnstyledType, etc.).
   <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;
-    } & OverrideProps<M, C>,
+    props: C extends ''
+      ? { component: keyof JSX.IntrinsicElements }
+      : C extends React.ComponentClass<infer P>
+      ? Merge<P, BaseProps<M> & { component: C; ref?: React.Ref<InstanceType<C>> }>
+      : C extends React.ComponentType<infer P>
+      ? Merge<P, BaseProps<M> & { component: C }>
+      : C extends keyof JSX.IntrinsicElements
+      ? Merge<JSX.IntrinsicElements[C], BaseProps<M> & { component: C }>
+      : never,
   ): JSX.Element;
   (props: DefaultComponentProps<M>): JSX.Element;
   propTypes?: any;
 }
 
+// TODO: Update the OverrideProps type
 /**
  * Props of the component if `component={Component}` is used.
  */