[Grid] Support customized breakpoints

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

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { ResponsiveStyleValue, SxProps, SystemProps } from '@mui/system';
+import {
+  ResponsiveStyleValue,
+  SxProps,
+  SystemProps,
+  Breakpoint,
+  BreakpointOverrides,
+} from '@mui/system';
+import { IfEquals } from '@mui/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { GridClasses } from './gridClasses';
@@ -12,6 +19,70 @@ export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
 export type GridSize = 'auto' | number;
 
+interface RegularBreakpoints {
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  lg?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  md?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  sm?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  xl?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for all the screen sizes with the lowest priority.
+   * @default false
+   */
+  xs?: boolean | GridSize;
+}
+
+type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize>>;
+
+interface BreakpointOverridesEmpty {}
+
+type Breakpoints = IfEquals<
+  BreakpointOverrides,
+  BreakpointOverridesEmpty,
+  RegularBreakpoints,
+  CustomBreakpoints
+>;
+
 export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
     SystemProps<Theme> & {
@@ -51,41 +122,11 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * @default false
        */
       item?: boolean;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      lg?: boolean | GridSize;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `md` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      md?: boolean | GridSize;
       /**
        * Defines the vertical space between the type `item` components.
        * It overrides the value of the `spacing` prop.
        */
       rowSpacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      sm?: boolean | GridSize;
       /**
        * Defines the space between the type `item` components.
        * It can only be used on a type `container` component.
@@ -102,33 +143,13 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * @default 'wrap'
        */
       wrap?: GridWrap;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      xl?: boolean | GridSize;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for all the screen sizes with the lowest priority.
-       * @default false
-       */
-      xs?: boolean | GridSize;
       /**
        * If `true`, it sets `min-width: 0` on the item.
        * Refer to the limitations section of the documentation to better understand the use case.
        * @default false
        */
       zeroMinWidth?: boolean;
-    };
+    } & Breakpoints;
   defaultComponent: D;
 }