@mui/material 5.14.7 → 5.14.9

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -12,77 +12,79 @@ export interface BreadcrumbsOwnerState extends BreadcrumbsProps {
   expanded: boolean;
 }
 
-export interface BreadcrumbsTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'nav',
-> {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<BreadcrumbsClasses>;
-    /**
-     * The components used for each slot inside the Breadcumb.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots?: {
-      CollapsedIcon?: React.ElementType;
-    };
+export interface BreadcrumbsOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<BreadcrumbsClasses>;
+  /**
+   * The components used for each slot inside the Breadcumb.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: {
+    CollapsedIcon?: React.ElementType;
+  };
+  /**
+   * The props used for each slot inside the Breadcumb.
+   * @default {}
+   */
+  slotProps?: {
     /**
-     * The props used for each slot inside the Breadcumb.
+     * Props applied to the CollapsedIcon slot.
      * @default {}
      */
-    slotProps?: {
-      /**
-       * Props applied to the CollapsedIcon slot.
-       * @default {}
-       */
-      collapsedIcon?: SlotComponentProps<
-        typeof SvgIcon,
-        BreadcrumbsCollapsedIconSlotPropsOverrides,
-        BreadcrumbsOwnerState
-      >;
-    };
-    /**
-     * Override the default label for the expand button.
-     *
-     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-     * @default 'Show path'
-     */
-    expandText?: string;
-    /**
-     * If max items is exceeded, the number of items to show after the ellipsis.
-     * @default 1
-     */
-    itemsAfterCollapse?: number;
-    /**
-     * If max items is exceeded, the number of items to show before the ellipsis.
-     * @default 1
-     */
-    itemsBeforeCollapse?: number;
-    /**
-     * Specifies the maximum number of breadcrumbs to display. When there are more
-     * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
-     * will be shown, with an ellipsis in between.
-     * @default 8
-     */
-    maxItems?: number;
-    /**
-     * Custom separator node.
-     * @default '/'
-     */
-    separator?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
+    collapsedIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      BreadcrumbsCollapsedIconSlotPropsOverrides,
+      BreadcrumbsOwnerState
+    >;
   };
-  defaultComponent: DefaultComponent;
+  /**
+   * Override the default label for the expand button.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default 'Show path'
+   */
+  expandText?: string;
+  /**
+   * If max items is exceeded, the number of items to show after the ellipsis.
+   * @default 1
+   */
+  itemsAfterCollapse?: number;
+  /**
+   * If max items is exceeded, the number of items to show before the ellipsis.
+   * @default 1
+   */
+  itemsBeforeCollapse?: number;
+  /**
+   * Specifies the maximum number of breadcrumbs to display. When there are more
+   * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
+   * will be shown, with an ellipsis in between.
+   * @default 8
+   */
+  maxItems?: number;
+  /**
+   * Custom separator node.
+   * @default '/'
+   */
+  separator?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface BreadcrumbsTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'nav',
+> {
+  props: AdditionalProps & BreadcrumbsOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
@@ -94,6 +96,7 @@ export interface BreadcrumbsTypeMap<
  * API:
  *
  * - [Breadcrumbs API](https://mui.com/material-ui/api/breadcrumbs/)
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
  */
 declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
 

package/Button/Button.d.ts

@@ -12,82 +12,81 @@ export interface ButtonPropsColorOverrides {}
 
 export interface ButtonPropsSizeOverrides {}
 
+export interface ButtonOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonClasses>;
+  /**
+   * 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<
+    'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
+    ButtonPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * Element placed after the children.
+   */
+  endIcon?: React.ReactNode;
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: 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 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
+  /**
+   * Element placed before the children.
+   */
+  startIcon?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides>;
+}
+
 export type ButtonTypeMap<
   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<ButtonClasses>;
-    /**
-     * 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<
-      'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
-      ButtonPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, no elevation is used.
-     * @default false
-     */
-    disableElevation?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * Element placed after the children.
-     */
-    endIcon?: React.ReactNode;
-    /**
-     * If `true`, the button will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: 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 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
-    /**
-     * Element placed before the children.
-     */
-    startIcon?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'text'
-     */
-    variant?: OverridableStringUnion<
-      'text' | 'outlined' | 'contained',
-      ButtonPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**

package/Button/Button.js

@@ -15,6 +15,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
+import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -221,6 +222,7 @@ const ButtonEndIcon = styled('span', {
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const contextProps = React.useContext(ButtonGroupContext);
+  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
   const resolvedProps = resolveProps(contextProps, inProps);
   const props = useThemeProps({
     props: resolvedProps,
@@ -265,9 +267,10 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     ownerState: ownerState,
     children: endIconProp
   });
+  const positionClassName = buttonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
-    className: clsx(contextProps.className, classes.root, className),
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,

package/ButtonBase/ButtonBase.d.ts

@@ -5,90 +5,92 @@ import { TouchRippleActions, TouchRippleProps } from './TouchRipple';
 import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 import { ButtonBaseClasses } from './buttonBaseClasses';
 
+export interface ButtonBaseOwnProps {
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action?: React.Ref<ButtonBaseActions>;
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonBaseClasses>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple?: boolean;
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple?: boolean;
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName?: string;
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent?: React.ElementType;
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible?: React.FocusEventHandler<any>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * @default 0
+   */
+  tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps?: Partial<TouchRippleProps>;
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef?: React.Ref<TouchRippleActions>;
+}
+
 export interface ButtonBaseTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > {
-  props: AdditionalProps & {
-    /**
-     * A ref for imperative actions.
-     * It currently only supports `focusVisible()` action.
-     */
-    action?: React.Ref<ButtonBaseActions>;
-    /**
-     * If `true`, the ripples are centered.
-     * They won't start at the cursor interaction position.
-     * @default false
-     */
-    centerRipple?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ButtonBaseClasses>;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the ripple effect is disabled.
-     *
-     * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-     * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-     * @default false
-     */
-    disableRipple?: boolean;
-    /**
-     * If `true`, the touch ripple effect is disabled.
-     * @default false
-     */
-    disableTouchRipple?: boolean;
-    /**
-     * If `true`, the base button will have a keyboard focus ripple.
-     * @default false
-     */
-    focusRipple?: boolean;
-    /**
-     * This prop can help identify which element has keyboard focus.
-     * The class name will be applied when the element gains the focus through keyboard interaction.
-     * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-     * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-     * if needed.
-     */
-    focusVisibleClassName?: string;
-    /**
-     * The component used to render a link when the `href` prop is provided.
-     * @default 'a'
-     */
-    LinkComponent?: React.ElementType;
-    /**
-     * Callback fired when the component is focused with a keyboard.
-     * We trigger a `onFocus` callback too.
-     */
-    onFocusVisible?: React.FocusEventHandler<any>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * @default 0
-     */
-    tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
-    /**
-     * Props applied to the `TouchRipple` element.
-     */
-    TouchRippleProps?: Partial<TouchRippleProps>;
-    /**
-     * A ref that points to the `TouchRipple` element.
-     */
-    touchRippleRef?: React.Ref<TouchRippleActions>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ButtonBaseOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/ButtonGroup/ButtonGroup.d.ts

@@ -9,79 +9,81 @@ export interface ButtonGroupPropsColorOverrides {}
 export interface ButtonGroupPropsVariantOverrides {}
 export interface ButtonGroupPropsSizeOverrides {}
 
+export interface ButtonGroupOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonGroupClasses>;
+  /**
+   * 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<
+    'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    ButtonGroupPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation?: boolean;
+  /**
+   * If `true`, the button keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If `true`, the button ripple effect is disabled.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * If `true`, the buttons will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonGroupPropsSizeOverrides>;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: OverridableStringUnion<
+    'text' | 'outlined' | 'contained',
+    ButtonGroupPropsVariantOverrides
+  >;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ButtonGroupTypeMap<
   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<ButtonGroupClasses>;
-    /**
-     * 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<
-      'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      ButtonGroupPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, no elevation is used.
-     * @default false
-     */
-    disableElevation?: boolean;
-    /**
-     * If `true`, the button keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If `true`, the button ripple effect is disabled.
-     * @default false
-     */
-    disableRipple?: boolean;
-    /**
-     * If `true`, the buttons will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * The component orientation (layout flow direction).
-     * @default 'horizontal'
-     */
-    orientation?: 'vertical' | 'horizontal';
-    /**
-     * The size of the component.
-     * `small` is equivalent to the dense button styling.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonGroupPropsSizeOverrides>;
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    variant?: OverridableStringUnion<
-      'text' | 'outlined' | 'contained',
-      ButtonGroupPropsVariantOverrides
-    >;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ButtonGroupOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**