@mui/material 5.14.6 → 5.14.8

package/Snackbar/Snackbar.d.ts

@@ -56,10 +56,10 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    */
   disableWindowBlurListener?: boolean;
   /**
-   * When displaying multiple consecutive Snackbars from a parent rendering a single
-   * <Snackbar/>, add the key prop to ensure independent treatment of each message.
-   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
-   * features such as autoHideDuration may be canceled.
+   * When displaying multiple consecutive snackbars using a single parent-rendered
+   * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
+   * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
+   * in place, and features like `autoHideDuration` could be affected.
    */
   key?: any;
   /**

package/Snackbar/Snackbar.js

@@ -227,10 +227,10 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
    */
   disableWindowBlurListener: PropTypes.bool,
   /**
-   * When displaying multiple consecutive Snackbars from a parent rendering a single
-   * <Snackbar/>, add the key prop to ensure independent treatment of each message.
-   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
-   * features such as autoHideDuration may be canceled.
+   * When displaying multiple consecutive snackbars using a single parent-rendered
+   * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
+   * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
+   * in place, and features like `autoHideDuration` could be affected.
    */
   key: () => null,
   /**

package/Stack/Stack.d.ts

@@ -3,47 +3,48 @@ import { ResponsiveStyleValue, SxProps, SystemProps } from '@mui/system';
 import { OverrideProps, OverridableComponent } from '../OverridableComponent';
 import { Theme } from '../styles/createTheme';
 
+export interface StackOwnProps extends SystemProps<Theme> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<number | string>;
+  /**
+   * Add an element between each child.
+   */
+  divider?: React.ReactNode;
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap?: boolean;
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface StackTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    SystemProps<Theme> & {
-      /**
-       * The content of the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Defines the `flex-direction` style property.
-       * It is applied for all screen sizes.
-       * @default 'column'
-       */
-      direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
-      /**
-       * Defines the space between immediate children.
-       * @default 0
-       */
-      spacing?: ResponsiveStyleValue<number | string>;
-      /**
-       * Add an element between each child.
-       */
-      divider?: React.ReactNode;
-      /**
-       * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
-       *
-       * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
-       * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
-       *
-       * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
-       * @default false
-       */
-      useFlexGap?: boolean;
-      /**
-       * The system prop, which allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StackOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/Step/Step.d.ts

@@ -4,53 +4,55 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
 import { StepClasses } from './stepClasses';
 
+export interface StepOwnProps {
+  /**
+   * Sets the step as active. Is passed to child components.
+   */
+  active?: boolean;
+  /**
+   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepClasses>;
+  /**
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed?: boolean;
+  /**
+   * If `true`, the step is disabled, will also disable the button if
+   * `StepButton` is a child of `Step`. Is passed to child components.
+   */
+  disabled?: boolean;
+  /**
+   * Expand the step.
+   * @default false
+   */
+  expanded?: boolean;
+  /**
+   * The position of the step.
+   * The prop defaults to the value inherited from the parent Stepper component.
+   */
+  index?: number;
+  /**
+   * If `true`, the Step is displayed as rendered last.
+   * The prop defaults to the value inherited from the parent Stepper component.
+   */
+  last?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface StepTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * Sets the step as active. Is passed to child components.
-     */
-    active?: boolean;
-    /**
-     * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<StepClasses>;
-    /**
-     * Mark the step as completed. Is passed to child components.
-     */
-    completed?: boolean;
-    /**
-     * If `true`, the step is disabled, will also disable the button if
-     * `StepButton` is a child of `Step`. Is passed to child components.
-     */
-    disabled?: boolean;
-    /**
-     * Expand the step.
-     * @default false
-     */
-    expanded?: boolean;
-    /**
-     * The position of the step.
-     * The prop defaults to the value inherited from the parent Stepper component.
-     */
-    index?: number;
-    /**
-     * If `true`, the Step is displayed as rendered last.
-     * The prop defaults to the value inherited from the parent Stepper component.
-     */
-    last?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StepOwnProps;
+  defaultComponent: RootComponent;
 }
 
 export type StepProps<

package/StepButton/StepButton.d.ts

@@ -6,37 +6,39 @@ import { Theme } from '../styles';
 import { StepButtonClasses } from './stepButtonClasses';
 
 /**
- * @deprecated use `StepButtonProps['icon']` instead
+ * @deprecated use `StepButtonProps['icon']` instead.
  */
 export type StepButtonIcon = React.ReactNode;
 
+export interface StepButtonOwnProps {
+  /**
+   * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepButtonClasses>;
+  /**
+   * The icon displayed by the step label.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The optional node to display.
+   */
+  optional?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type StepButtonTypeMap<
   AdditionalProps,
-  DefaultComponent extends React.ElementType,
+  RootComponent extends React.ElementType,
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<StepButtonClasses>;
-    /**
-     * The icon displayed by the step label.
-     */
-    icon?: React.ReactNode;
-    /**
-     * The optional node to display.
-     */
-    optional?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StepButtonOwnProps;
+  defaultComponent: RootComponent;
 
   ignoredProps: 'disabled';
 }>;

package/Stepper/Stepper.d.ts

@@ -7,53 +7,54 @@ import { StepperClasses } from './stepperClasses';
 
 export type Orientation = 'horizontal' | 'vertical';
 
+export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square' | 'variant'> {
+  /**
+   * Set the active step (zero based index).
+   * Set to -1 to disable all the steps.
+   * @default 0
+   */
+  activeStep?: number;
+  /**
+   * If set to 'true' and orientation is horizontal,
+   * then the step label will be positioned under the icon.
+   * @default false
+   */
+  alternativeLabel?: boolean;
+  /**
+   * Two or more `<Step />` components.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepperClasses>;
+  /**
+   * An element to be placed between each step.
+   * @default <StepConnector />
+   */
+  connector?: React.ReactElement<any, any> | null;
+  /**
+   * If set the `Stepper` will not assist in controlling steps for linear flow.
+   * @default false
+   */
+  nonLinear?: boolean;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface StepperTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    Pick<PaperProps, 'elevation' | 'square' | 'variant'> & {
-      /**
-       * Set the active step (zero based index).
-       * Set to -1 to disable all the steps.
-       * @default 0
-       */
-      activeStep?: number;
-      /**
-       * If set to 'true' and orientation is horizontal,
-       * then the step label will be positioned under the icon.
-       * @default false
-       */
-      alternativeLabel?: boolean;
-      /**
-       * Two or more `<Step />` components.
-       */
-      children?: React.ReactNode;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<StepperClasses>;
-      /**
-       * An element to be placed between each step.
-       * @default <StepConnector />
-       */
-      connector?: React.ReactElement<any, any> | null;
-      /**
-       * If set the `Stepper` will not assist in controlling steps for linear flow.
-       * @default false
-       */
-      nonLinear?: boolean;
-      /**
-       * The component orientation (layout flow direction).
-       * @default 'horizontal'
-       */
-      orientation?: Orientation;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StepperOwnProps;
+  defaultComponent: RootComponent;
 }
 
 export type StepperProps<

package/SvgIcon/SvgIcon.d.ts

@@ -9,84 +9,86 @@ export interface SvgIconPropsSizeOverrides {}
 
 export interface SvgIconPropsColorOverrides {}
 
+export interface SvgIconOwnProps {
+  /**
+   * Node passed into the SVG element.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SvgIconClasses>;
+  /**
+   * 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).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color?: OverridableStringUnion<
+    | 'inherit'
+    | 'action'
+    | 'disabled'
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning',
+    SvgIconPropsColorOverrides
+  >;
+  /**
+   * 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',
+    SvgIconPropsSizeOverrides
+  >;
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor?: string;
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox?: boolean;
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess?: string;
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox?: string;
+}
+
 export interface SvgIconTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'svg',
+  RootComponent extends React.ElementType = 'svg',
 > {
-  props: AdditionalProps & {
-    /**
-     * Node passed into the SVG element.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<SvgIconClasses>;
-    /**
-     * 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).
-     * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
-     * @default 'inherit'
-     */
-    color?: OverridableStringUnion<
-      | 'inherit'
-      | 'action'
-      | 'disabled'
-      | 'primary'
-      | 'secondary'
-      | 'error'
-      | 'info'
-      | 'success'
-      | 'warning',
-      SvgIconPropsColorOverrides
-    >;
-    /**
-     * 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',
-      SvgIconPropsSizeOverrides
-    >;
-    /**
-     * Applies a color attribute to the SVG element.
-     */
-    htmlColor?: string;
-    /**
-     * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
-     * prop will be ignored.
-     * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
-     * `component`'s viewBox to the root node.
-     * @default false
-     */
-    inheritViewBox?: boolean;
-    /**
-     * The shape-rendering attribute. The behavior of the different options is described on the
-     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
-     * If you are having issues with blurry icons you should investigate this prop.
-     */
-    shapeRendering?: string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * Provides a human-readable title for the element that contains it.
-     * https://www.w3.org/TR/SVG-access/#Equivalent
-     */
-    titleAccess?: string;
-    /**
-     * Allows you to redefine what the coordinates without units mean inside an SVG element.
-     * For example, if the SVG element is 500 (width) by 200 (height),
-     * and you pass viewBox="0 0 50 20",
-     * this means that the coordinates inside the SVG will go from the top left corner (0,0)
-     * to bottom right (50,20) and each unit will be worth 10px.
-     * @default '0 0 24 24'
-     */
-    viewBox?: string;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & SvgIconOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/SwipeableDrawer/SwipeableDrawer.js

@@ -502,7 +502,7 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    *
    * @default false
    */
-  allowSwipeInChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  allowSwipeInChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /**
    * @ignore
    */
@@ -557,20 +557,20 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
   /**
    * Callback fired when the component requests to be closed.
    *
-   * @param {object} event The event source of the callback.
+   * @param {React.SyntheticEvent<{}>} event The event source of the callback.
    */
   onClose: PropTypes.func.isRequired,
   /**
    * Callback fired when the component requests to be opened.
    *
-   * @param {object} event The event source of the callback.
+   * @param {React.SyntheticEvent<{}>} event The event source of the callback.
    */
   onOpen: PropTypes.func.isRequired,
   /**
    * If `true`, the component is shown.
    * @default false
    */
-  open: PropTypes.bool.isRequired,
+  open: PropTypes.bool,
   /**
    * @ignore
    */

package/Tab/Tab.d.ts

@@ -5,59 +5,61 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { TabClasses } from './tabClasses';
 
+export interface TabOwnProps {
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children?: null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabClasses>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * The icon to display.
+   */
+  icon?: string | React.ReactElement;
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition?: 'top' | 'bottom' | 'start' | 'end';
+  /**
+   * The label element.
+   */
+  label?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value?: any;
+  /**
+   * Tab labels appear in a single row.
+   * They can use a second line if needed.
+   * @default false
+   */
+  wrapped?: boolean;
+}
+
 export type TabTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * This prop isn't supported.
-     * Use the `component` prop if you need to change the children structure.
-     */
-    children?: null;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TabClasses>;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * The icon to display.
-     */
-    icon?: string | React.ReactElement;
-    /**
-     * The position of the icon relative to the label.
-     * @default 'top'
-     */
-    iconPosition?: 'top' | 'bottom' | 'start' | 'end';
-    /**
-     * The label element.
-     */
-    label?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * You can provide your own value. Otherwise, we fallback to the child position index.
-     */
-    value?: any;
-    /**
-     * Tab labels appear in a single row.
-     * They can use a second line if needed.
-     * @default false
-     */
-    wrapped?: boolean;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TabOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**