@mui/material 5.14.6 → 5.14.8

package/FormControl/FormControl.d.ts

@@ -8,81 +8,83 @@ import { FormControlClasses } from './formControlClasses';
 export interface FormControlPropsSizeOverrides {}
 export interface FormControlPropsColorOverrides {}
 
+export interface FormControlOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormControlClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    FormControlPropsColorOverrides
+  >;
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused?: boolean;
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel?: boolean;
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin?: 'dense' | 'normal' | 'none';
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
 export interface FormControlTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<FormControlClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<
-      'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      FormControlPropsColorOverrides
-    >;
-    /**
-     * If `true`, the label, input and helper text should be displayed in a disabled state.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the label is displayed in an error state.
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * If `true`, the component will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * If `true`, the component is displayed in focused state.
-     */
-    focused?: boolean;
-    /**
-     * If `true`, the label is hidden.
-     * This is used to increase density for a `FilledInput`.
-     * Be sure to add `aria-label` to the `input` element.
-     * @default false
-     */
-    hiddenLabel?: boolean;
-    /**
-     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
-     * @default 'none'
-     */
-    margin?: 'dense' | 'normal' | 'none';
-    /**
-     * If `true`, the label will indicate that the `input` is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The size of the component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    variant?: 'standard' | 'outlined' | 'filled';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & FormControlOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/FormHelperText/FormHelperText.d.ts

@@ -7,59 +7,61 @@ import { FormHelperTextClasses } from './formHelperTextClasses';
 
 export interface FormHelperTextPropsVariantOverrides {}
 
+export interface FormHelperTextOwnProps {
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormHelperTextClasses>;
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled?: boolean;
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused?: boolean;
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense';
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: OverridableStringUnion<
+    'standard' | 'outlined' | 'filled',
+    FormHelperTextPropsVariantOverrides
+  >;
+}
+
 export interface FormHelperTextTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'p',
+  RootComponent extends React.ElementType = 'p',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     *
-     * If `' '` is provided, the component reserves one line height for displaying a future message.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<FormHelperTextClasses>;
-    /**
-     * If `true`, the helper text should be displayed in a disabled state.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, helper text should be displayed in an error state.
-     */
-    error?: boolean;
-    /**
-     * If `true`, the helper text should use filled classes key.
-     */
-    filled?: boolean;
-    /**
-     * If `true`, the helper text should use focused classes key.
-     */
-    focused?: boolean;
-    /**
-     * If `dense`, will adjust vertical spacing. This is normally obtained via context from
-     * FormControl.
-     */
-    margin?: 'dense';
-    /**
-     * If `true`, the helper text should use required classes key.
-     */
-    required?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     */
-    variant?: OverridableStringUnion<
-      'standard' | 'outlined' | 'filled',
-      FormHelperTextPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & FormHelperTextOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/FormLabel/FormLabel.d.ts

@@ -7,6 +7,11 @@ import { FormLabelClasses } from './formLabelClasses';
 
 export interface FormLabelPropsColorOverrides {}
 
+/**
+ * This type is kept for compatibility. Use `FormLabelOwnProps` instead.
+ */
+export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+
 export interface FormLabelOwnProps {
   /**
    * The content of the component.
@@ -53,10 +58,10 @@ export interface FormLabelOwnProps {
 
 export interface FormLabelTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'label',
+  RootComponent extends React.ElementType = 'label',
 > {
   props: AdditionalProps & FormLabelBaseProps & FormLabelOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**
@@ -73,8 +78,6 @@ export interface FormLabelTypeMap<
  */
 declare const FormLabel: OverridableComponent<FormLabelTypeMap>;
 
-export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
-
 export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
   props: TypeMap['props'] & Pick<FormLabelOwnProps, 'filled' | 'color'>;
   defaultComponent: TypeMap['defaultComponent'];

package/Grid/Grid.d.ts

@@ -83,77 +83,78 @@ type Breakpoints = IfEquals<
   CustomBreakpoints
 >;
 
+export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<GridClasses>;
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns?: ResponsiveStyleValue<number>;
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container?: boolean;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction?: ResponsiveStyleValue<GridDirection>;
+  /**
+   * If `true`, the component will have the flex *item* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  item?: boolean;
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap?: GridWrap;
+  /**
+   * 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;
+}
+
 export interface GridTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    SystemProps<Theme> & {
-      /**
-       * The content of the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<GridClasses>;
-      /**
-       * The number of columns.
-       * @default 12
-       */
-      columns?: ResponsiveStyleValue<number>;
-      /**
-       * Defines the horizontal space between the type `item` components.
-       * It overrides the value of the `spacing` prop.
-       */
-      columnSpacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * If `true`, the component will have the flex *container* behavior.
-       * You should be wrapping *items* with a *container*.
-       * @default false
-       */
-      container?: boolean;
-      /**
-       * Defines the `flex-direction` style property.
-       * It is applied for all screen sizes.
-       * @default 'row'
-       */
-      direction?: ResponsiveStyleValue<GridDirection>;
-      /**
-       * If `true`, the component will have the flex *item* behavior.
-       * You should be wrapping *items* with a *container*.
-       * @default false
-       */
-      item?: boolean;
-      /**
-       * Defines the vertical space between the type `item` components.
-       * It overrides the value of the `spacing` prop.
-       */
-      rowSpacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * Defines the space between the type `item` components.
-       * It can only be used on a type `container` component.
-       * @default 0
-       */
-      spacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-      /**
-       * Defines the `flex-wrap` style property.
-       * It's applied for all screen sizes.
-       * @default 'wrap'
-       */
-      wrap?: GridWrap;
-      /**
-       * 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: DefaultComponent;
+  props: AdditionalProps & GridOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/Hidden/Hidden.d.ts

@@ -25,22 +25,22 @@ export interface HiddenProps {
    */
   initialWidth?: Breakpoint;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   lgDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   lgUp?: boolean;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   mdDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   mdUp?: boolean;
@@ -49,32 +49,32 @@ export interface HiddenProps {
    */
   only?: Breakpoint | Breakpoint[];
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   smDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   smUp?: boolean;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xlDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xlUp?: boolean;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xsDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xsUp?: boolean;

package/Icon/Icon.d.ts

@@ -9,57 +9,59 @@ export interface IconPropsSizeOverrides {}
 
 export interface IconPropsColorOverrides {}
 
+export interface IconOwnProps {
+  /**
+   * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
+   * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+   * @default 'material-icons'
+   */
+  baseClassName?: string;
+  /**
+   * The name of the icon font ligature.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<IconClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'inherit'
+   */
+  color?: OverridableStringUnion<
+    | 'inherit'
+    | 'action'
+    | 'disabled'
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning',
+    IconPropsColorOverrides
+  >;
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize?: OverridableStringUnion<
+    'inherit' | 'large' | 'medium' | 'small',
+    IconPropsSizeOverrides
+  >;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface IconTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > {
-  props: AdditionalProps & {
-    /**
-     * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-     * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
-     * @default 'material-icons'
-     */
-    baseClassName?: string;
-    /**
-     * The name of the icon font ligature.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<IconClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'inherit'
-     */
-    color?: OverridableStringUnion<
-      | 'inherit'
-      | 'action'
-      | 'disabled'
-      | 'primary'
-      | 'secondary'
-      | 'error'
-      | 'info'
-      | 'success'
-      | 'warning',
-      IconPropsColorOverrides
-    >;
-    /**
-     * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-     * @default 'medium'
-     */
-    fontSize?: OverridableStringUnion<
-      'inherit' | 'large' | 'medium' | 'small',
-      IconPropsSizeOverrides
-    >;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & IconOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *