[Paper] Uses Overridable Component for Type

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

@@ -1,78 +1,75 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@material-ui/types';
-import { InternalStandardProps as StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface PaperPropsVariantOverrides {}
 export type PaperVariantDefaults = Record<'elevation' | 'outlined', true>;
 
-export interface PaperProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element unless `square={true}`. */
-    rounded?: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined?: string;
-    /** Styles applied to the root element if `variant="elevation"`. */
-    elevation?: string;
-    elevation0?: string;
-    elevation1?: string;
-    elevation2?: string;
-    elevation3?: string;
-    elevation4?: string;
-    elevation5?: string;
-    elevation6?: string;
-    elevation7?: string;
-    elevation8?: string;
-    elevation9?: string;
-    elevation10?: string;
-    elevation11?: string;
-    elevation12?: string;
-    elevation13?: string;
-    elevation14?: string;
-    elevation15?: string;
-    elevation16?: string;
-    elevation17?: string;
-    elevation18?: string;
-    elevation19?: string;
-    elevation20?: string;
-    elevation21?: string;
-    elevation22?: string;
-    elevation23?: string;
-    elevation24?: string;
+export interface PaperTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: {
+      /** Styles applied to the root element. */
+      root?: string;
+      /** Styles applied to the root element unless `square={true}`. */
+      rounded?: string;
+      /** Styles applied to the root element if `variant="outlined"`. */
+      outlined?: string;
+      /** Styles applied to the root element if `variant="elevation"`. */
+      elevation?: string;
+      elevation0?: string;
+      elevation1?: string;
+      elevation2?: string;
+      elevation3?: string;
+      elevation4?: string;
+      elevation5?: string;
+      elevation6?: string;
+      elevation7?: string;
+      elevation8?: string;
+      elevation9?: string;
+      elevation10?: string;
+      elevation11?: string;
+      elevation12?: string;
+      elevation13?: string;
+      elevation14?: string;
+      elevation15?: string;
+      elevation16?: string;
+      elevation17?: string;
+      elevation18?: string;
+      elevation19?: string;
+      elevation20?: string;
+      elevation21?: string;
+      elevation22?: string;
+      elevation23?: string;
+      elevation24?: string;
+    };
+    /**
+     * Shadow depth, corresponds to `dp` in the spec.
+     * It accepts values between 0 and 24 inclusive.
+     * @default 1
+     */
+    elevation?: number;
+    /**
+     * If `true`, rounded corners are disabled.
+     * @default false
+     */
+    square?: boolean;
+    /**
+     * The variant to use.
+     * @default 'elevation'
+     */
+    variant?: OverridableStringUnion<PaperVariantDefaults, PaperPropsVariantOverrides>;
   };
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
-  /**
-   * Shadow depth, corresponds to `dp` in the spec.
-   * It accepts values between 0 and 24 inclusive.
-   * @default 1
-   */
-  elevation?: number;
-  /**
-   * If `true`, rounded corners are disabled.
-   * @default false
-   */
-  square?: boolean;
-  /**
-   * The variant to use.
-   * @default 'elevation'
-   */
-  variant?: OverridableStringUnion<PaperVariantDefaults, PaperPropsVariantOverrides>;
+  defaultComponent: D;
+  classKey: PaperClassKey;
 }
 
-export type PaperClassKey = keyof NonNullable<PaperProps['classes']>;
-
 /**
  *
  * Demos:
@@ -84,4 +81,12 @@ export type PaperClassKey = keyof NonNullable<PaperProps['classes']>;
  *
  * - [Paper API](https://material-ui.com/api/paper/)
  */
-export default function Paper(props: PaperProps): JSX.Element;
+declare const Paper: OverridableComponent<PaperTypeMap>;
+
+export type PaperClassKey = keyof NonNullable<PaperTypeMap['props']['classes']>;
+export type PaperProps<
+  D extends React.ElementType = PaperTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<PaperTypeMap<P, D>, D>;
+
+export default Paper;

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

@@ -626,14 +626,29 @@ const MenuTest = () => {
 };
 
 const PaperTest = () => (
-  <Paper elevation={4}>
-    <Typography variant="h5" component="h3">
-      This is a sheet of paper.
-    </Typography>
-    <Typography variant="body1" component="p">
-      Paper can be used to build surface or other elements for your application.
-    </Typography>
-  </Paper>
+  <div>
+    <Paper elevation={4}>
+      <Typography variant="h5" component="h3">
+        This is a sheet of paper.
+      </Typography>
+      <Typography variant="body1" component="p">
+        Paper can be used to build surface or other elements for your application.
+      </Typography>
+    </Paper>
+    <Paper component="span" />
+    <Paper component={TestOverride} />
+    {/* @ts-expect-error */}
+    <Paper component={TestOverride} x="4" />
+    <Paper component={TestOverride} x={4} elevation={4} />
+    <Paper component="span" ref={(elem: HTMLSpanElement) => {}} />
+    <Paper<typeof TestOverride>
+      component={TestOverride}
+      ref={(elem) => {
+        expectType<HTMLDivElement | null, typeof elem>(elem);
+      }}
+      x={3}
+    />
+  </div>
 );
 
 const CircularProgressTest = () => (
@@ -1065,11 +1080,9 @@ const LinkTest = () => {
 
 const refTest = () => {
   // for a detailed explanation of refs in react see https://github.com/mui-org/material-ui/pull/15199
-  const genericRef = React.createRef<Element>();
   const divRef = React.createRef<HTMLDivElement>();
   const inputRef = React.createRef<HTMLInputElement>();
 
-  <Paper ref={genericRef} />;
   <Paper ref={divRef} />;
   // undesired: throws when assuming inputRef.current.value !== undefined
   <Paper ref={inputRef} />;