@mui/material 5.14.6 → 5.14.8

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/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.6
+ * @mui/material v5.14.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/CircularProgress/CircularProgress.js

@@ -192,7 +192,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, e.g '3rem'.
+   * If using a string, you need to provide the CSS unit, e.g. '3rem'.
    * @default 40
    */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/legacy/ImageListItem/ImageListItem.js

@@ -101,7 +101,8 @@ var ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inProps
       height: height,
       gridColumnEnd: variant !== 'masonry' ? "span ".concat(cols) : undefined,
       gridRowEnd: variant !== 'masonry' ? "span ".concat(rows) : undefined,
-      marginBottom: variant === 'masonry' ? gap : undefined
+      marginBottom: variant === 'masonry' ? gap : undefined,
+      breakInside: variant === 'masonry' ? 'avoid' : undefined
     }, style),
     ownerState: ownerState
   }, other, {

package/legacy/InputBase/InputBase.js

@@ -46,7 +46,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     startAdornment = ownerState.startAdornment,
     type = ownerState.type;
   var slots = {
-    root: ['root', "color".concat(capitalize(color)), disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+    root: ['root', "color".concat(capitalize(color)), disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size && size !== 'medium' && "size".concat(capitalize(size)), multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
     input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
   };
   return composeClasses(slots, getInputBaseUtilityClass, classes);

package/legacy/InputLabel/InputLabel.js

@@ -11,6 +11,7 @@ import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
 import useThemeProps from '../styles/useThemeProps';
+import capitalize from '../utils/capitalize';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { getInputLabelUtilityClasses } from './inputLabelClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,7 +24,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     variant = ownerState.variant,
     required = ownerState.required;
   var slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && "size".concat(capitalize(size)), variant],
     asterisk: [required && 'asterisk']
   };
   var composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);