@mui/material 5.14.7 → 5.14.9

package/Divider/Divider.d.ts

@@ -7,59 +7,58 @@ import { DividerClasses } from './dividerClasses';
 
 export interface DividerPropsVariantOverrides {}
 
+export interface DividerOwnProps {
+  /**
+   * Absolutely position the element.
+   * @default false
+   */
+  absolute?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DividerClasses>;
+  /**
+   * If `true`, a vertical divider will have the correct height when used in flex container.
+   * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
+   * @default false
+   */
+  flexItem?: boolean;
+  /**
+   * If `true`, the divider will have a lighter color.
+   * @default false
+   */
+  light?: boolean;
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The text alignment.
+   * @default 'center'
+   */
+  textAlign?: 'center' | 'right' | 'left';
+  /**
+   * The variant to use.
+   * @default 'fullWidth'
+   */
+  variant?: OverridableStringUnion<'fullWidth' | 'inset' | 'middle', DividerPropsVariantOverrides>;
+}
+
 export interface DividerTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'hr',
+  RootComponent extends React.ElementType = 'hr',
 > {
-  props: AdditionalProps & {
-    /**
-     * Absolutely position the element.
-     * @default false
-     */
-    absolute?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<DividerClasses>;
-    /**
-     * If `true`, a vertical divider will have the correct height when used in flex container.
-     * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
-     * @default false
-     */
-    flexItem?: boolean;
-    /**
-     * If `true`, the divider will have a lighter color.
-     * @default false
-     */
-    light?: boolean;
-    /**
-     * The component orientation.
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The text alignment.
-     * @default 'center'
-     */
-    textAlign?: 'center' | 'right' | 'left';
-    /**
-     * The variant to use.
-     * @default 'fullWidth'
-     */
-    variant?: OverridableStringUnion<
-      'fullWidth' | 'inset' | 'middle',
-      DividerPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & DividerOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/Fab/Fab.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { PropTypes, Theme } from '..';
@@ -11,65 +12,67 @@ export interface FabPropsSizeOverrides {}
 
 export interface FabPropsColorOverrides {}
 
+export interface FabOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FabClasses>;
+  /**
+   * 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 'default'
+   */
+  color?: OverridableStringUnion<
+    PropTypes.Color | 'success' | 'error' | 'info' | 'warning',
+    FabPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If `true`, the ripple effect is disabled.
+   */
+  disableRipple?: boolean;
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href?: string;
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'large'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>;
+  /**
+   * The variant to use.
+   * @default 'circular'
+   */
+  variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type FabTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<FabClasses>;
-    /**
-     * 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 'default'
-     */
-    color?: OverridableStringUnion<
-      PropTypes.Color | 'success' | 'error' | 'info' | 'warning',
-      FabPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If `true`, the ripple effect is disabled.
-     */
-    disableRipple?: boolean;
-    /**
-     * The URL to link to when the button is clicked.
-     * If defined, an `a` element will be used as the root node.
-     */
-    href?: string;
-    /**
-     * The size of the component.
-     * `small` is equivalent to the dense button styling.
-     * @default 'large'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>;
-    /**
-     * The variant to use.
-     * @default 'circular'
-     */
-    variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & FabOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**

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;
 }
 
 /**