[typescript] Introduce *OwnProps interfaces for components (mui#36798)

mnajdova · Sep 8, 2023 · 9b39a55 · 9b39a55
1 parent 25059fe
commit 9b39a55
Show file tree

Hide file tree

Showing 73 changed files with 3,539 additions and 3,405 deletions.
diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts
@@ -3,55 +3,57 @@ import { OverrideProps } from '@mui/material/OverridableComponent';
 import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 
+export interface LoadingButtonOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonClasses> & {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `loading={true}`. */
+    loading?: string;
+    /** Styles applied to the loadingIndicator element. */
+    loadingIndicator?: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
+    loadingIndicatorCenter?: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
+    loadingIndicatorStart?: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
+    loadingIndicatorEnd?: string;
+    /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
+    endIconLoadingEnd?: string;
+    /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
+    startIconLoadingStart?: string;
+  };
+  /**
+   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator?: React.ReactNode;
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition?: 'start' | 'end' | 'center';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type LoadingButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'button',
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonTypeMap<{
-  props: P & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ButtonClasses> & {
-      /** Styles applied to the root element. */
-      root?: string;
-      /** Styles applied to the root element if `loading={true}`. */
-      loading?: string;
-      /** Styles applied to the loadingIndicator element. */
-      loadingIndicator?: string;
-      /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
-      loadingIndicatorCenter?: string;
-      /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
-      loadingIndicatorStart?: string;
-      /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
-      loadingIndicatorEnd?: string;
-      /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
-      endIconLoadingEnd?: string;
-      /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
-      startIconLoadingStart?: string;
-    };
-    /**
-     * If `true`, the loading indicator is shown and the button becomes disabled.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Element placed before the children if the button is in loading state.
-     * The node should contain an element with `role="progressbar"` with an accessible name.
-     * By default we render a `CircularProgress` that is labelled by the button itself.
-     * @default <CircularProgress color="inherit" size={16} />
-     */
-    loadingIndicator?: React.ReactNode;
-    /**
-     * The loading indicator can be positioned on the start, end, or the center of the button.
-     * @default 'center'
-     */
-    loadingPosition?: 'start' | 'end' | 'center';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: D;
+  props: AdditionalProps & LoadingButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
@@ -68,8 +70,8 @@ export type LoadingButtonTypeMap<
 declare const LoadingButton: ExtendButton<LoadingButtonTypeMap>;
 
 export type LoadingButtonProps<
-  D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<LoadingButtonTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<LoadingButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 
 export default LoadingButton;
diff --git a/packages/mui-lab/src/Masonry/Masonry.d.ts b/packages/mui-lab/src/Masonry/Masonry.d.ts
@@ -3,44 +3,49 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo
 import { Theme } from '@mui/material/styles';
 import { MasonryClasses } from './masonryClasses';
 
-export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * The content of the component.
-     */
-    children: NonNullable<React.ReactNode>;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<MasonryClasses>;
-    /**
-     * Number of columns.
-     * @default 4
-     */
-    columns?: ResponsiveStyleValue<number | string>;
-    /**
-     * The default number of columns of the component. This is provided for server-side rendering.
-     */
-    defaultColumns?: number;
-    /**
-     * The default height of the component in px. This is provided for server-side rendering.
-     */
-    defaultHeight?: number;
-    /**
-     * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
-     */
-    defaultSpacing?: number;
-    /**
-     * Defines the space between children. It is a factor of the theme's spacing.
-     * @default 1
-     */
-    spacing?: ResponsiveStyleValue<number | string>;
-    /**
-     * Allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: D;
+export interface MasonryOwnProps {
+  /**
+   * The content of the component.
+   */
+  children: NonNullable<React.ReactNode>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MasonryClasses>;
+  /**
+   * Number of columns.
+   * @default 4
+   */
+  columns?: ResponsiveStyleValue<number | string>;
+  /**
+   * The default number of columns of the component. This is provided for server-side rendering.
+   */
+  defaultColumns?: number;
+  /**
+   * The default height of the component in px. This is provided for server-side rendering.
+   */
+  defaultHeight?: number;
+  /**
+   * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
+   */
+  defaultSpacing?: number;
+  /**
+   * Defines the space between children. It is a factor of the theme's spacing.
+   * @default 1
+   */
+  spacing?: ResponsiveStyleValue<number | string>;
+  /**
+   * Allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface MasonryTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & MasonryOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
@@ -55,8 +60,8 @@ export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
 declare const Masonry: OverridableComponent<MasonryTypeMap>;
 
 export type MasonryProps<
-  D extends React.ElementType = MasonryTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<MasonryTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = MasonryTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<MasonryTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 
 export default Masonry;
diff --git a/packages/mui-lab/src/TabList/TabList.d.ts b/packages/mui-lab/src/TabList/TabList.d.ts
@@ -3,17 +3,19 @@ import { TabsTypeMap } from '@mui/material/Tabs';
 import { DistributiveOmit } from '@mui/types';
 import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 
+interface TabListOwnProps extends DistributiveOmit<TabsTypeMap['props'], 'children' | 'value'> {
+  /**
+   * A list of `<Tab />` elements.
+   */
+  children?: React.ReactNode;
+}
+
 export interface TabListTypeMap<
-  P = {},
-  D extends React.ElementType = TabsTypeMap['defaultComponent'],
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = TabsTypeMap['defaultComponent'],
 > {
-  props: P & {
-    /**
-     * A list of `<Tab />` elements.
-     */
-    children?: React.ReactNode;
-  } & DistributiveOmit<TabsTypeMap['props'], 'children' | 'value'>;
-  defaultComponent: D;
+  props: AdditionalProps & TabListOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
@@ -32,8 +34,8 @@ declare const TabList: OverridableComponent<TabListTypeMap>;
 export type TabListClassKey = keyof NonNullable<TabListTypeMap['props']['classes']>;
 
 export type TabListProps<
-  D extends React.ElementType = TabListTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<TabListTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = TabListTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<TabListTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 
 export default TabList;
diff --git a/packages/mui-material-next/src/Chip/Chip.d.ts b/packages/mui-material-next/src/Chip/Chip.d.ts
@@ -12,7 +12,7 @@ export interface ChipPropsColorOverrides {}
 
 export interface ChipTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
   props: AdditionalProps & {
     /**
@@ -94,7 +94,7 @@ export interface ChipTypeMap<
      */
     variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>;
   };
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**

diff --git a/packages/mui-material-next/src/Input/Input.d.ts b/packages/mui-material-next/src/Input/Input.d.ts
@@ -203,10 +203,10 @@ export interface InputOwnProps {
 
 export interface InputTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
   props: AdditionalProps & InputOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 export type InputProps<