@mui/material 5.14.7 → 5.14.9

package/Tabs/Tabs.d.ts

@@ -3,7 +3,6 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
-import ButtonBase from '../ButtonBase';
 import { TabScrollButtonProps } from '../TabScrollButton';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TabsClasses } from './tabsClasses';
@@ -24,158 +23,162 @@ export interface TabsOwnerState extends TabsProps {
   scrollButtonsHideMobile: boolean;
 }
 
-export interface TabsTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = typeof ButtonBase,
-> {
-  props: AdditionalProps & {
-    /**
-     * Callback fired when the component mounts.
-     * This is useful when you want to trigger an action programmatically.
-     * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
-     *
-     * @param {object} actions This object contains all possible actions
-     * that can be triggered programmatically.
-     */
-    action?: React.Ref<TabsActions>;
-    /**
-     * If `true`, the scroll buttons aren't forced hidden on mobile.
-     * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
-     * @default false
-     */
-    allowScrollButtonsMobile?: boolean;
-    /**
-     * The label for the Tabs as a string.
-     */
-    'aria-label'?: string;
-    /**
-     * An id or list of ids separated by a space that label the Tabs.
-     */
-    'aria-labelledby'?: string;
-    /**
-     * If `true`, the tabs are centered.
-     * This prop is intended for large views.
-     * @default false
-     */
-    centered?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TabsClasses>;
-    /**
-     * The components used for each slot inside.
-     * @default {}
-     */
-    slots?: {
-      StartScrollButtonIcon?: React.ElementType;
-      EndScrollButtonIcon?: React.ElementType;
-    };
-    /**
-     * The extra props for the slot components.
-     * You can override the existing props or add new ones.
-     * @default {}
-     */
-    slotProps?: {
-      startScrollButtonIcon?: SlotComponentProps<
-        typeof SvgIcon,
-        TabsStartScrollButtonIconSlotPropsOverrides,
-        TabsOwnerState
-      >;
-      endScrollButtonIcon?: SlotComponentProps<
-        typeof SvgIcon,
-        TabsEndScrollButtonIconSlotPropsOverrides,
-        TabsOwnerState
-      >;
-    };
-    /**
-     * Determines the color of the indicator.
-     * @default 'primary'
-     */
-    indicatorColor?: OverridableStringUnion<
-      'secondary' | 'primary',
-      TabsPropsIndicatorColorOverrides
+export interface TabsOwnProps {
+  /**
+   * Callback fired when the component mounts.
+   * This is useful when you want to trigger an action programmatically.
+   * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
+   *
+   * @param {object} actions This object contains all possible actions
+   * that can be triggered programmatically.
+   */
+  action?: React.Ref<TabsActions>;
+  /**
+   * If `true`, the scroll buttons aren't forced hidden on mobile.
+   * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
+   * @default false
+   */
+  allowScrollButtonsMobile?: boolean;
+  /**
+   * The label for the Tabs as a string.
+   */
+  'aria-label'?: string;
+  /**
+   * An id or list of ids separated by a space that label the Tabs.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * If `true`, the tabs are centered.
+   * This prop is intended for large views.
+   * @default false
+   */
+  centered?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabsClasses>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: {
+    StartScrollButtonIcon?: React.ElementType;
+    EndScrollButtonIcon?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps?: {
+    startScrollButtonIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      TabsStartScrollButtonIconSlotPropsOverrides,
+      TabsOwnerState
+    >;
+    endScrollButtonIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      TabsEndScrollButtonIconSlotPropsOverrides,
+      TabsOwnerState
     >;
-    /**
-     * Callback fired when the value changes.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {any} value We default to the index of the child (number)
-     */
-    onChange?: (event: React.SyntheticEvent, value: any) => void;
-    /**
-     * The component orientation (layout flow direction).
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The component used to render the scroll buttons.
-     * @default TabScrollButton
-     */
-    ScrollButtonComponent?: React.ElementType;
-    /**
-     * Determine behavior of scroll buttons when tabs are set to scroll:
-     *
-     * - `auto` will only present them when not all the items are visible.
-     * - `true` will always present them.
-     * - `false` will never present them.
-     *
-     * By default the scroll buttons are hidden on mobile.
-     * This behavior can be disabled with `allowScrollButtonsMobile`.
-     * @default 'auto'
-     */
-    scrollButtons?: 'auto' | true | false;
-    /**
-     * If `true` the selected tab changes on focus. Otherwise it only
-     * changes on activation.
-     */
-    selectionFollowsFocus?: boolean;
-    /**
-     * Props applied to the tab indicator element.
-     * @default  {}
-     */
-    TabIndicatorProps?: React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
-    /**
-     * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
-     * @default {}
-     */
-    TabScrollButtonProps?: Partial<TabScrollButtonProps>;
-    /**
-     * Determines the color of the `Tab`.
-     * @default 'primary'
-     */
-    textColor?: 'secondary' | 'primary' | 'inherit';
-    /**
-     * The value of the currently selected `Tab`.
-     * If you don't want any selected `Tab`, you can set this prop to `false`.
-     */
-    value?: any;
-    /**
-     *  Determines additional display behavior of the tabs:
-     *
-     *  - `scrollable` will invoke scrolling properties and allow for horizontally
-     *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
-     *  which should be used for small views, like on mobile.
-     *  - `standard` will render the default state.
-     * @default 'standard'
-     */
-    variant?: 'standard' | 'scrollable' | 'fullWidth';
-    /**
-     * If `true`, the scrollbar is visible. It can be useful when displaying
-     * a long vertical list of tabs.
-     * @default false
-     */
-    visibleScrollbar?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
+  };
+  /**
+   * Determines the color of the indicator.
+   * @default 'primary'
+   */
+  indicatorColor?: OverridableStringUnion<
+    'secondary' | 'primary',
+    TabsPropsIndicatorColorOverrides
+  >;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {any} value We default to the index of the child (number)
+   */
+  onChange?: (event: React.SyntheticEvent, value: any) => void;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The component used to render the scroll buttons.
+   * @default TabScrollButton
+   */
+  ScrollButtonComponent?: React.ElementType;
+  /**
+   * Determine behavior of scroll buttons when tabs are set to scroll:
+   *
+   * - `auto` will only present them when not all the items are visible.
+   * - `true` will always present them.
+   * - `false` will never present them.
+   *
+   * By default the scroll buttons are hidden on mobile.
+   * This behavior can be disabled with `allowScrollButtonsMobile`.
+   * @default 'auto'
+   */
+  scrollButtons?: 'auto' | true | false;
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus?: boolean;
+  /**
+   * Props applied to the tab indicator element.
+   * @default  {}
+   */
+  TabIndicatorProps?: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
   };
-  defaultComponent: DefaultComponent;
+  /**
+   * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
+   * @default {}
+   */
+  TabScrollButtonProps?: Partial<TabScrollButtonProps>;
+  /**
+   * Determines the color of the `Tab`.
+   * @default 'primary'
+   */
+  textColor?: 'secondary' | 'primary' | 'inherit';
+  /**
+   * The value of the currently selected `Tab`.
+   * If you don't want any selected `Tab`, you can set this prop to `false`.
+   */
+  value?: any;
+  /**
+   *  Determines additional display behavior of the tabs:
+   *
+   *  - `scrollable` will invoke scrolling properties and allow for horizontally
+   *  scrolling (or swiping) of the tab bar.
+   *  -`fullWidth` will make the tabs grow to use all the available space,
+   *  which should be used for small views, like on mobile.
+   *  - `standard` will render the default state.
+   * @default 'standard'
+   */
+  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  /**
+   * If `true`, the scrollbar is visible. It can be useful when displaying
+   * a long vertical list of tabs.
+   * @default false
+   */
+  visibleScrollbar?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface TabsTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & TabsOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/Tabs/Tabs.js

@@ -190,10 +190,7 @@ const TabsIndicator = styled('span', {
   width: 2,
   right: 0
 }));
-const TabsScrollbarSize = styled(ScrollbarSize, {
-  name: 'MuiTabs',
-  slot: 'ScrollbarSize'
-})({
+const TabsScrollbarSize = styled(ScrollbarSize)({
   overflowX: 'auto',
   overflowY: 'hidden',
   // Hide dimensionless scrollbar on macOS

package/ToggleButton/ToggleButton.d.ts

@@ -10,79 +10,81 @@ export interface ToggleButtonPropsSizeOverrides {}
 
 export interface ToggleButtonPropsColorOverrides {}
 
+export interface ToggleButtonOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ToggleButtonClasses>;
+  /**
+   * The color of the button when it is in an active state.
+   * 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 'standard'
+   */
+  color?: OverridableStringUnion<
+    'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    ToggleButtonPropsColorOverrides
+  >;
+  /**
+   * 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 button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Callback fired when the state changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
+   */
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * Callback fired when the button is clicked.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * If `true`, the button is rendered in an active state.
+   */
+  selected?: boolean;
+  /**
+   * The size of the component.
+   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The value to associate with the button when selected in a
+   * ToggleButtonGroup.
+   */
+  value: NonNullable<unknown>;
+}
+
 export type ToggleButtonTypeMap<
   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<ToggleButtonClasses>;
-    /**
-     * The color of the button when it is in an active state.
-     * 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 'standard'
-     */
-    color?: OverridableStringUnion<
-      'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      ToggleButtonPropsColorOverrides
-    >;
-    /**
-     * 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 button will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Callback fired when the state changes.
-     *
-     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
-     * @param {any} value of the selected button.
-     */
-    onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
-    /**
-     * Callback fired when the button is clicked.
-     *
-     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
-     * @param {any} value of the selected button.
-     */
-    onClick?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
-    /**
-     * If `true`, the button is rendered in an active state.
-     */
-    selected?: boolean;
-    /**
-     * The size of the component.
-     * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The value to associate with the button when selected in a
-     * ToggleButtonGroup.
-     */
-    value: NonNullable<unknown>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ToggleButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**

package/Toolbar/Toolbar.d.ts

@@ -7,36 +7,38 @@ import { ToolbarClasses } from './toolbarClasses';
 
 export interface ToolbarPropsVariantOverrides {}
 
+export interface ToolbarOwnProps {
+  /**
+   * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
+   * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ToolbarClasses>;
+  /**
+   * If `true`, disables gutter padding.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * The variant to use.
+   * @default 'regular'
+   */
+  variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ToolbarTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
-     * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ToolbarClasses>;
-    /**
-     * If `true`, disables gutter padding.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * The variant to use.
-     * @default 'regular'
-     */
-    variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ToolbarOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/Typography/Typography.d.ts

@@ -75,10 +75,10 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
 
 export interface TypographyTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > {
   props: AdditionalProps & TypographyOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.7
+ * @mui/material v5.14.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -215,6 +216,7 @@ var ButtonEndIcon = styled('span', {
 var Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   var contextProps = React.useContext(ButtonGroupContext);
+  var buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
   var resolvedProps = resolveProps(contextProps, inProps);
   var props = useThemeProps({
     props: resolvedProps,
@@ -265,9 +267,10 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     ownerState: ownerState,
     children: endIconProp
   });
+  var 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,