@mui/material 5.14.13 → 5.14.14

package/AppBar/AppBar.d.ts

@@ -19,7 +19,10 @@ export interface AppBarOwnProps {
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color?: OverridableStringUnion<PropTypes.Color | 'transparent', AppBarPropsColorOverrides>;
+  color?: OverridableStringUnion<
+    PropTypes.Color | 'transparent' | 'error' | 'info' | 'success' | 'warning',
+    AppBarPropsColorOverrides
+  >;
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false

package/AppBar/AppBar.js

@@ -157,7 +157,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), PropTypes.string]),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false

package/AppBar/appBarClasses.d.ts

@@ -21,6 +21,14 @@ export interface AppBarClasses {
     colorInherit: string;
     /** Styles applied to the root element if `color="transparent"`. */
     colorTransparent: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning: string;
 }
 export type AppBarClassKey = keyof AppBarClasses;
 export declare function getAppBarUtilityClass(slot: string): string;

package/AppBar/appBarClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getAppBarUtilityClass(slot) {
   return generateUtilityClass('MuiAppBar', slot);
 }
-const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
 export default appBarClasses;

package/AvatarGroup/AvatarGroup.d.ts

@@ -40,6 +40,12 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * @default 5
    */
   max?: number;
+  /**
+   * custom renderer of extraAvatars
+   * @param {number} surplus number of extra avatars
+   * @returns {React.ReactNode} custom element to display
+   */
+  renderSurplus?: (surplus: number) => React.ReactNode;
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/AvatarGroup/AvatarGroup.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -13,6 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SPACINGS = {
   small: -16,
@@ -74,6 +75,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       component = 'div',
       componentsProps = {},
       max = 5,
+      renderSurplus,
       slotProps = {},
       spacing = 'medium',
       total,
@@ -103,6 +105,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   clampedMax = Math.min(totalAvatars + 1, clampedMax);
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
+  const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
@@ -111,7 +114,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
+    children: [extraAvatars ? /*#__PURE__*/_jsx(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
       variant: variant
     }, additionalAvatarSlotProps, {
@@ -119,7 +122,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       style: _extends({
         marginLeft
       }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
-      children: ["+", extraAvatars]
+      children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
@@ -177,6 +180,12 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
     }
     return null;
   }),
+  /**
+   * custom renderer of extraAvatars
+   * @param {number} surplus number of extra avatars
+   * @returns {React.ReactNode} custom element to display
+   */
+  renderSurplus: PropTypes.func,
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.14
+
+<!-- generated comparing v5.14.13..master -->
+
+_Oct 17, 2023_
+
+A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.14.14`
+
+- &#8203;<!-- 29 -->[material-ui][AppBar] Support all default palette colors in TypeScript (#39389) @BreakBB
+- &#8203;<!-- 28 -->[material-ui][AvatarGroup] Add `renderSurplus` prop (#39283) @uuxxx
+- &#8203;<!-- 25 -->[material-ui][Box] Fix system properties has incorrect `Theme` interface when applied directly (#39404) @Semigradsky
+- &#8203;<!-- 04 -->[material-ui][Pagination] Update `type` parameter of `getItemAriaLabel` prop (#39390) @Simer13
+- &#8203;<!-- 06 -->[material][tab] Show/hide scroll buttons for dynamically added children (#39415) @brijeshb42
+
+### `@mui/base@5.0.0-beta.20`
+
+- &#8203;<!-- 26 -->[base-ui][Menu] Do not reopen the menu after clicking on a trigger in Safari (#39393) @michaldudak
+
+### `@mui/material-next@6.0.0-alpha.106`
+
+- &#8203;<!-- 23 -->[Divider][material-next] Add Divider component (#39179) @Best-Sardar
+
+### `@mui/joy@5.0.0-beta.11`
+
+- &#8203;<!-- 08 -->[joy-ui][List] Add the `marker` prop (#39313) @siriwatknp
+- &#8203;<!-- 07 -->[joy-ui][Skeleton] Fix semi-transparent scenario when with surface components and color inversion (#39400) @TheNatkat
+- &#8203;<!-- 06 -->[joy-ui][Textarea] Fix focus ring for error state (#39391) @vineetjk
+
+### `@mui/icons-material@5.14.14`
+
+- &#8203;<!-- 09 -->[icons] Fix VoiceChatOutlined showing the wrong icon (#39418) @devuser200
+
+### `@mui/system@5.14.14`
+
+- &#8203;<!-- 03 -->[mui-system][style] bug fix for style value check color in nullable object (#39457) @DarhkVoyd
+
+### `@mui/styled-engine-sc@6.0.0-alpha.2`
+
+- &#8203;<!-- 05 -->[styled-engine-sc] Fix TS issues because of missing types (#39395) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 27 -->[docs][base-ui] Renaming demos to BaseXxx (#39104) @christophermorin
+- &#8203;<!-- 26 -->[docs] Accessibility in Base UI (#39264) @michaldudak
+- &#8203;<!-- 22 -->[docs] Fix 301 redirection @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Improve Base UI table of contents for APIs (#39412) @ZeeshanTamboli
+- &#8203;<!-- 20 -->[docs] Adjust design kits-related content (#39367) @danilo-leal
+- &#8203;<!-- 19 -->[docs] Revise the Contributing Guide (#39190) @samuelsycamore
+- &#8203;<!-- 12 -->[docs][joy-ui] Fix row hover prop name in the Table page (#39431) @adrienbrault
+- &#8203;<!-- 11 -->[docs][joy-ui] Fix color inversion demos (#39403) @danilo-leal
+- &#8203;<!-- 10 -->[docs][material-ui] Remove irrelevant TODO from Snackbar demo (#39396) @ZeeshanTamboli
+- &#8203;<!-- 06 -->[docs][material-ui][Table] Bug in "Sorting & Selecting" demo (#39426) @codewithrabeeh
+- &#8203;<!-- 05 -->[docs][joy-ui][typography] Update docs after lineHeight changes (#39366) @zanivan
+
+### Core
+
+- &#8203;<!-- 24 -->[core] Fix multiple typos across the repo (#39422) @parikshitadhikari
+- &#8203;<!-- 18 -->[docs-infra] Add refinements to the API content design (#39425) @danilo-leal
+- &#8203;<!-- 17 -->[docs-infra] Add a min height to the layout component (#39416) @danilo-leal
+- &#8203;<!-- 16 -->[docs-infra] Prevent horizontal scroll in the TOC (#39417) @danilo-leal
+- &#8203;<!-- 15 -->[docs-infra] Add a collapsible list & table views to the API content display (#38265) @alexfauquette
+- &#8203;<!-- 14 -->[docs-infra] Adjust the `kbd` tag styles (#39397) @danilo-leal
+- &#8203;<!-- 13 -->[docs-infra] Fix strong style regression (#39384) @oliviertassinari
+- &#8203;<!-- 04 -->[website] Add the LinkedIn profile to the contributors section on the About page (#39455) @chhawinder
+- &#8203;<!-- 03 -->[website] Update new role template (#39386) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Add stray design fine-tunning to the Pricing page (#39472) @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix career anchor link to perks & benefits @oliviertassinari
+
+All contributors of this release in alphabetical order: @adrienbrault, @alexfauquette, @Best-Sardar, @BreakBB, @brijeshb42, @chhawinder, @christophermorin, @codewithrabeeh, @danilo-leal, @DarhkVoyd, @devuser200, @michaldudak, @mnajdova, @oliviertassinari, @parikshitadhikari, @samuelsycamore, @Semigradsky, @Simer13, @siriwatknp, @TheNatkat, @uuxxx, @vineetjk, @zanivan, @ZeeshanTamboli
+
 ## 5.14.13
 
 <!-- generated comparing v5.14.12..master -->

package/Pagination/Pagination.d.ts

@@ -41,16 +41,13 @@ export interface PaginationProps
    * This is important for screen reader users.
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
    * @param {number} page The page number to format.
    * @param {bool} selected If true, the current page is selected.
    * @returns {string}
    */
-  getItemAriaLabel?: (
-    type: 'page' | 'first' | 'last' | 'next' | 'previous',
-    page: number,
-    selected: boolean,
-  ) => string;
+  getItemAriaLabel?: (type: UsePaginationItem['type'], page: number, selected: boolean) => string;
+
   /**
    * Render the item.
    * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.

package/Pagination/Pagination.js

@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    * This is important for screen reader users.
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
    * @param {number} page The page number to format.
    * @param {bool} selected If true, the current page is selected.
    * @returns {string}

package/Tabs/Tabs.js

@@ -501,23 +501,48 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         updateIndicatorState();
       }
     });
+    let resizeObserver;
+
+    /**
+     * @type {MutationCallback}
+     */
+    const handleMutation = records => {
+      records.forEach(record => {
+        record.removedNodes.forEach(item => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+        });
+        record.addedNodes.forEach(item => {
+          var _resizeObserver2;
+          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+        });
+      });
+      handleResize();
+      updateScrollButtonState();
+    };
     const win = ownerWindow(tabsRef.current);
     win.addEventListener('resize', handleResize);
-    let resizeObserver;
+    let mutationObserver;
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(handleResize);
       Array.from(tabListRef.current.children).forEach(child => {
         resizeObserver.observe(child);
       });
     }
+    if (typeof MutationObserver !== 'undefined') {
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabListRef.current, {
+        childList: true
+      });
+    }
     return () => {
+      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
+      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
+      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
     };
-  }, [updateIndicatorState]);
+  }, [updateIndicatorState, updateScrollButtonState]);
 
   /**
    * Toggle visibility of start and end scroll buttons

package/index.js

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

package/legacy/AppBar/AppBar.js

@@ -154,7 +154,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), PropTypes.string]),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false

package/legacy/AppBar/appBarClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getAppBarUtilityClass(slot) {
   return generateUtilityClass('MuiAppBar', slot);
 }
-var appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+var appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
 export default appBarClasses;

package/legacy/AvatarGroup/AvatarGroup.js

@@ -13,6 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SPACINGS = {
   small: -16,
@@ -75,6 +76,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
     _props$max = props.max,
     max = _props$max === void 0 ? 5 : _props$max,
+    renderSurplus = props.renderSurplus,
     _props$slotProps = props.slotProps,
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     _props$spacing = props.spacing,
@@ -82,7 +84,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     total = props.total,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'circular' : _props$variant,
-    other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"]);
+    other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"]);
   var clampedMax = max < 2 ? 2 : max;
   var ownerState = _extends({}, props, {
     max: max,
@@ -106,6 +108,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
   clampedMax = Math.min(totalAvatars + 1, clampedMax);
   var maxAvatars = Math.min(children.length, clampedMax - 1);
   var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
+  var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
   var marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
@@ -114,7 +117,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
+    children: [extraAvatars ? /*#__PURE__*/_jsx(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
       variant: variant
     }, additionalAvatarSlotProps, {
@@ -122,7 +125,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
       style: _extends({
         marginLeft: marginLeft
       }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
-      children: ["+", extraAvatars]
+      children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
@@ -180,6 +183,12 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
     }
     return null;
   }),
+  /**
+   * custom renderer of extraAvatars
+   * @param {number} surplus number of extra avatars
+   * @returns {React.ReactNode} custom element to display
+   */
+  renderSurplus: PropTypes.func,
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/legacy/Pagination/Pagination.js

@@ -184,7 +184,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    * This is important for screen reader users.
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
    * @param {number} page The page number to format.
    * @param {bool} selected If true, the current page is selected.
    * @returns {string}

package/legacy/Tabs/Tabs.js

@@ -511,23 +511,48 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         updateIndicatorState();
       }
     });
+    var resizeObserver;
+
+    /**
+     * @type {MutationCallback}
+     */
+    var handleMutation = function handleMutation(records) {
+      records.forEach(function (record) {
+        record.removedNodes.forEach(function (item) {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+        });
+        record.addedNodes.forEach(function (item) {
+          var _resizeObserver2;
+          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+        });
+      });
+      handleResize();
+      updateScrollButtonState();
+    };
     var win = ownerWindow(tabsRef.current);
     win.addEventListener('resize', handleResize);
-    var resizeObserver;
+    var mutationObserver;
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(handleResize);
       Array.from(tabListRef.current.children).forEach(function (child) {
         resizeObserver.observe(child);
       });
     }
+    if (typeof MutationObserver !== 'undefined') {
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabListRef.current, {
+        childList: true
+      });
+    }
     return function () {
+      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
+      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
+      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
     };
-  }, [updateIndicatorState]);
+  }, [updateIndicatorState, updateScrollButtonState]);
 
   /**
    * Toggle visibility of start and end scroll buttons

package/legacy/index.js

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

package/modern/AppBar/AppBar.js

@@ -157,7 +157,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), PropTypes.string]),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false

package/modern/AppBar/appBarClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getAppBarUtilityClass(slot) {
   return generateUtilityClass('MuiAppBar', slot);
 }
-const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
 export default appBarClasses;

package/modern/AvatarGroup/AvatarGroup.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -13,6 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SPACINGS = {
   small: -16,
@@ -73,6 +74,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       component = 'div',
       componentsProps = {},
       max = 5,
+      renderSurplus,
       slotProps = {},
       spacing = 'medium',
       total,
@@ -102,6 +104,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   clampedMax = Math.min(totalAvatars + 1, clampedMax);
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
+  const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
@@ -110,7 +113,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
+    children: [extraAvatars ? /*#__PURE__*/_jsx(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
       variant: variant
     }, additionalAvatarSlotProps, {
@@ -118,7 +121,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       style: _extends({
         marginLeft
       }, additionalAvatarSlotProps?.style),
-      children: ["+", extraAvatars]
+      children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
@@ -176,6 +179,12 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
     }
     return null;
   }),
+  /**
+   * custom renderer of extraAvatars
+   * @param {number} surplus number of extra avatars
+   * @returns {React.ReactNode} custom element to display
+   */
+  renderSurplus: PropTypes.func,
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/modern/Pagination/Pagination.js

@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    * This is important for screen reader users.
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
    * @param {number} page The page number to format.
    * @param {bool} selected If true, the current page is selected.
    * @returns {string}

package/modern/Tabs/Tabs.js

@@ -501,23 +501,45 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         updateIndicatorState();
       }
     });
+    let resizeObserver;
+
+    /**
+     * @type {MutationCallback}
+     */
+    const handleMutation = records => {
+      records.forEach(record => {
+        record.removedNodes.forEach(item => {
+          resizeObserver?.unobserve(item);
+        });
+        record.addedNodes.forEach(item => {
+          resizeObserver?.observe(item);
+        });
+      });
+      handleResize();
+      updateScrollButtonState();
+    };
     const win = ownerWindow(tabsRef.current);
     win.addEventListener('resize', handleResize);
-    let resizeObserver;
+    let mutationObserver;
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(handleResize);
       Array.from(tabListRef.current.children).forEach(child => {
         resizeObserver.observe(child);
       });
     }
+    if (typeof MutationObserver !== 'undefined') {
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabListRef.current, {
+        childList: true
+      });
+    }
     return () => {
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
     };
-  }, [updateIndicatorState]);
+  }, [updateIndicatorState, updateScrollButtonState]);
 
   /**
    * Toggle visibility of start and end scroll buttons

package/modern/index.js

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

package/node/AppBar/AppBar.js

@@ -165,7 +165,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), _propTypes.default.string]),
+  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false

package/node/AppBar/appBarClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityCl
 function getAppBarUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAppBar', slot);
 }
-const appBarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+const appBarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
 var _default = exports.default = appBarClasses;