@mui/material 5.14.13 → 5.14.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.13",
+  "version": "5.14.15",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -27,12 +27,12 @@
     "url": "https://opencollective.com/mui"
   },
   "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/types": "^7.2.6",
-    "@mui/utils": "^5.14.13",
+    "@babel/runtime": "^7.23.2",
+    "@mui/base": "5.0.0-beta.21",
+    "@mui/core-downloads-tracker": "^5.14.15",
+    "@mui/system": "^5.14.15",
+    "@mui/types": "^7.2.7",
+    "@mui/utils": "^5.14.15",
     "@types/react-transition-group": "^4.4.7",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.13
+ * @mui/material v5.14.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2138,10 +2138,10 @@
     useEnhancedEffect$1(() => {
       ref.current = fn;
     });
-    return React__namespace.useCallback((...args) =>
+    return React__namespace.useRef((...args) =>
     // @ts-expect-error hide `this`
     // tslint:disable-next-line:ban-comma-operator
-    (0, ref.current)(...args), []);
+    (0, ref.current)(...args)).current;
   }
 
   function useForkRef(...refs) {
@@ -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
@@ -20038,25 +20033,33 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, [value, multiple, focusedTag, focusTag]);
     function validOptionIndex(index, direction) {
-      if (!listboxRef.current || index === -1) {
+      if (!listboxRef.current || index < 0 || index >= filteredOptions.length) {
         return -1;
       }
       let nextFocus = index;
       while (true) {
-        // Out of range
-        if (direction === 'next' && nextFocus === filteredOptions.length || direction === 'previous' && nextFocus === -1) {
-          return -1;
-        }
         const option = listboxRef.current.querySelector(`[data-option-index="${nextFocus}"]`);
 
         // Same logic as MenuList.js
         const nextFocusDisabled = disabledItemsFocusable ? false : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';
-        if (option && !option.hasAttribute('tabindex') || nextFocusDisabled) {
-          // Move to the next element.
-          nextFocus += direction === 'next' ? 1 : -1;
-        } else {
+        if (option && option.hasAttribute('tabindex') && !nextFocusDisabled) {
+          // The next option is available
           return nextFocus;
         }
+
+        // The next option is disabled, move to the next element.
+        // with looped index
+        if (direction === 'next') {
+          nextFocus = (nextFocus + 1) % filteredOptions.length;
+        } else {
+          nextFocus = (nextFocus - 1 + filteredOptions.length) % filteredOptions.length;
+        }
+
+        // We end up with initial index, that means we don't have available options.
+        // All of them are disabled
+        if (nextFocus === index) {
+          return -1;
+        }
       }
     }
     const setHighlightedIndex = useEventCallback(({
@@ -23701,7 +23704,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 +23765,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 +23795,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 +23804,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 +23812,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 +23870,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.
@@ -26906,7 +26917,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const {
         ownerState
       } = props;
-      return [styles.root, ownerState.indeterminate && styles.indeterminate, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
+      return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${capitalize(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
     }
   })(({
     theme,
@@ -33777,7 +33788,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props;
       return [{
         [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
-      }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
+      }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
     }
   })(({
     theme,
@@ -33860,7 +33871,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const fcs = formControlState({
       props,
       muiFormControl,
-      states: ['size', 'variant', 'required']
+      states: ['size', 'variant', 'required', 'focused']
     });
     const ownerState = _extends({}, props, {
       disableAnimation,
@@ -33868,7 +33879,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       shrink,
       size: fcs.size,
       variant: fcs.variant,
-      required: fcs.required
+      required: fcs.required,
+      focused: fcs.focused
     });
     const classes = useUtilityClasses$T(ownerState);
     return /*#__PURE__*/jsxRuntime_1(InputLabelRoot, _extends({
@@ -38656,7 +38668,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}
@@ -38844,7 +38856,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const {
         ownerState
       } = props;
-      return [styles.root, styles[`color${capitalize(ownerState.color)}`]];
+      return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`]];
     }
   })(({
     theme,
@@ -48711,23 +48723,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
@@ -49385,7 +49422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getToggleButtonUtilityClass(slot) {
     return generateUtilityClass('MuiToggleButton', slot);
   }
-  const toggleButtonClasses = generateUtilityClasses('MuiToggleButton', ['root', 'disabled', 'selected', 'standard', 'primary', 'secondary', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+  const toggleButtonClasses = generateUtilityClasses('MuiToggleButton', ['root', 'disabled', 'selected', 'standard', 'primary', 'secondary', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'fullWidth']);
   var toggleButtonClasses$1 = toggleButtonClasses;
 
   const _excluded$2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
@@ -49611,7 +49648,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getToggleButtonGroupUtilityClass(slot) {
     return generateUtilityClass('MuiToggleButtonGroup', slot);
   }
-  const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical']);
+  const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth']);
   var toggleButtonGroupClasses$1 = toggleButtonGroupClasses;
 
   const _excluded$1 = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];