@mui/material 5.14.13 → 5.14.14

package/node/AvatarGroup/AvatarGroup.js

@@ -19,7 +19,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Avatar = _interopRequireWildcard(require("../Avatar"));
 var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const SPACINGS = {
@@ -82,6 +82,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       component = 'div',
       componentsProps = {},
       max = 5,
+      renderSurplus,
       slotProps = {},
       spacing = 'medium',
       total,
@@ -111,6 +112,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__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, (0, _extends2.default)({
@@ -119,7 +121,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupAvatar, (0, _extends2.default)({
+    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupAvatar, (0, _extends2.default)({
       ownerState: ownerState,
       variant: variant
     }, additionalAvatarSlotProps, {
@@ -127,7 +129,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       style: (0, _extends2.default)({
         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: (0, _clsx.default)(child.props.className, classes.avatar),
@@ -185,6 +187,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.default.func,
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/node/Pagination/Pagination.js

@@ -177,7 +177,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/node/Tabs/Tabs.js

@@ -508,23 +508,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 = (0, _ownerWindow.default)(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/node/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.13",
+  "version": "5.14.14",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -28,9 +28,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/base": "5.0.0-beta.19",
-    "@mui/core-downloads-tracker": "^5.14.13",
-    "@mui/system": "^5.14.13",
+    "@mui/base": "5.0.0-beta.20",
+    "@mui/core-downloads-tracker": "^5.14.14",
+    "@mui/system": "^5.14.14",
     "@mui/types": "^7.2.6",
     "@mui/utils": "^5.14.13",
     "@types/react-transition-group": "^4.4.7",

package/umd/material-ui.development.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
@@ -6542,11 +6542,6 @@
     } else {
       value = getPath(themeMapping, propValueFinal) || userValue;
     }
-    if (typeof value === 'object') {
-      {
-        console.warn(`MUI: The value found in theme for prop: "${propValueFinal}" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".`);
-      }
-    }
     if (transform) {
       value = transform(value, userValue, themeMapping);
     }
@@ -15193,7 +15188,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   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']);
   var appBarClasses$1 = appBarClasses;
 
   const _excluded$1V = ["className", "color", "enableColorOnDark", "position"];
@@ -15341,7 +15336,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * [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
@@ -23701,7 +23696,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
   const SPACINGS$2 = {
     small: -16,
     medium: null
@@ -23762,6 +23757,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         component = 'div',
         componentsProps = {},
         max = 5,
+        renderSurplus,
         slotProps = {},
         spacing = 'medium',
         total,
@@ -23791,6 +23787,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
     const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
@@ -23799,7 +23796,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className: clsx(classes.root, className),
       ref: ref
     }, other, {
-      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_2(AvatarGroupAvatar, _extends({
+      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_1(AvatarGroupAvatar, _extends({
         ownerState: ownerState,
         variant: variant
       }, additionalAvatarSlotProps, {
@@ -23807,7 +23804,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         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__namespace.cloneElement(child, {
           className: clsx(child.props.className, classes.avatar),
@@ -23865,6 +23862,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
       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.
@@ -38656,7 +38659,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * 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}
@@ -48711,23 +48714,48 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           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