@mui/material 5.14.11 → 5.14.12

package/node/utils/createChainedFunction.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_createChainedFunction;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_createChainedFunction;

package/node/utils/debounce.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_debounce;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_debounce;

package/node/utils/deprecatedPropType.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_deprecatedPropType;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_deprecatedPropType;

package/node/utils/getScrollbarSize.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_getScrollbarSize;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_getScrollbarSize;

package/node/utils/index.js

@@ -128,12 +128,11 @@ var _useForkRef = _interopRequireDefault(require("./useForkRef"));
 var _useIsFocusVisible = _interopRequireDefault(require("./useIsFocusVisible"));
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const unstable_ClassNameGenerator = {
+const unstable_ClassNameGenerator = exports.unstable_ClassNameGenerator = {
   configure: generator => {
     if (process.env.NODE_ENV !== 'production') {
       console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
     }
     _ClassNameGenerator.unstable_ClassNameGenerator.configure(generator);
   }
-};
-exports.unstable_ClassNameGenerator = unstable_ClassNameGenerator;
+};

package/node/utils/isMuiElement.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_isMuiElement;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_isMuiElement;

package/node/utils/ownerDocument.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_ownerDocument;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_ownerDocument;

package/node/utils/ownerWindow.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_ownerWindow;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_ownerWindow;

package/node/utils/requirePropFactory.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_requirePropFactory;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_requirePropFactory;

package/node/utils/setRef.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_setRef;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_setRef;

package/node/utils/shouldSpreadAdditionalProps.js

@@ -8,5 +8,4 @@ var _base = require("@mui/base");
 const shouldSpreadAdditionalProps = Slot => {
   return !Slot || !(0, _base.isHostComponent)(Slot);
 };
-var _default = shouldSpreadAdditionalProps;
-exports.default = _default;
+var _default = exports.default = shouldSpreadAdditionalProps;

package/node/utils/unsupportedProp.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_unsupportedProp;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_unsupportedProp;

package/node/utils/useControlled.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_useControlled;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_useControlled;

package/node/utils/useEnhancedEffect.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_useEnhancedEffect;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_useEnhancedEffect;

package/node/utils/useEventCallback.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_useEventCallback;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_useEventCallback;

package/node/utils/useForkRef.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_useForkRef;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_useForkRef;

package/node/utils/useId.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_useId;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_useId;

package/node/utils/useIsFocusVisible.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@mui/utils");
-var _default = _utils.unstable_useIsFocusVisible;
-exports.default = _default;
+var _default = exports.default = _utils.unstable_useIsFocusVisible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "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.22.15",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/core-downloads-tracker": "^5.14.11",
-    "@mui/system": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@babel/runtime": "^7.23.1",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/core-downloads-tracker": "^5.14.12",
+    "@mui/system": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "@types/react-transition-group": "^4.4.6",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.11
+ * @mui/material v5.14.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2404,6 +2404,16 @@
   };
   var usePreviousProps$1 = usePreviousProps;
 
+  /**
+   * Gets only the valid children of a component,
+   * and ignores any nullish or falsy child.
+   *
+   * @param children the children
+   */
+  function getValidReactChildren(children) {
+    return React__namespace.Children.toArray(children).filter(child => /*#__PURE__*/React__namespace.isValidElement(child));
+  }
+
   const visuallyHidden = {
     border: 0,
     clip: 'rect(0 0 0 0)',
@@ -7615,40 +7625,48 @@
     }
     return null;
   };
+  const transformVariants = variants => {
+    const variantsStyles = {};
+    if (variants) {
+      variants.forEach(definition => {
+        const key = propsToClassKey(definition.props);
+        variantsStyles[key] = definition.style;
+      });
+    }
+    return variantsStyles;
+  };
   const getVariantStyles = (name, theme) => {
     let variants = [];
     if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
       variants = theme.components[name].variants;
     }
-    const variantsStyles = {};
-    variants.forEach(definition => {
-      const key = propsToClassKey(definition.props);
-      variantsStyles[key] = definition.style;
-    });
-    return variantsStyles;
+    return transformVariants(variants);
   };
-  const variantsResolver = (props, styles, theme, name) => {
-    var _theme$components;
+  const variantsResolver = (props, styles, variants) => {
     const {
       ownerState = {}
     } = props;
     const variantsStyles = [];
-    const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
-    if (themeVariants) {
-      themeVariants.forEach(themeVariant => {
+    if (variants) {
+      variants.forEach(variant => {
         let isMatch = true;
-        Object.keys(themeVariant.props).forEach(key => {
-          if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
             isMatch = false;
           }
         });
         if (isMatch) {
-          variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+          variantsStyles.push(styles[propsToClassKey(variant.props)]);
         }
       });
     }
     return variantsStyles;
   };
+  const themeVariantsResolver = (props, styles, theme, name) => {
+    var _theme$components;
+    const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
+    return variantsResolver(props, styles, themeVariants);
+  };
 
   // Update /system/styled/#api in case if this changes
   function shouldForwardProp(prop) {
@@ -7674,6 +7692,29 @@
     }
     return (props, styles) => styles[slot];
   }
+  const muiStyledFunctionResolver = ({
+    styledArg,
+    props,
+    defaultTheme,
+    themeId
+  }) => {
+    const resolvedStyles = styledArg(_extends({}, props, {
+      theme: resolveTheme(_extends({}, props, {
+        defaultTheme,
+        themeId
+      }))
+    }));
+    let optionalVariants;
+    if (resolvedStyles && resolvedStyles.variants) {
+      optionalVariants = resolvedStyles.variants;
+      delete resolvedStyles.variants;
+    }
+    if (optionalVariants) {
+      const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+      return [resolvedStyles, ...variantsStyles];
+    }
+    return resolvedStyles;
+  };
   function createStyled(input = {}) {
     const {
       themeId,
@@ -7740,16 +7781,61 @@
           // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
-          return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-            return stylesArg(_extends({}, props, {
-              theme: resolveTheme(_extends({}, props, {
-                defaultTheme,
-                themeId
-              }))
-            }));
-          } : stylesArg;
+          if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
+            return props => muiStyledFunctionResolver({
+              styledArg: stylesArg,
+              props,
+              defaultTheme,
+              themeId
+            });
+          }
+          if (isPlainObject(stylesArg)) {
+            let transformedStylesArg = stylesArg;
+            let styledArgVariants;
+            if (stylesArg && stylesArg.variants) {
+              styledArgVariants = stylesArg.variants;
+              delete transformedStylesArg.variants;
+              transformedStylesArg = props => {
+                let result = stylesArg;
+                const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+                variantStyles.forEach(variantStyle => {
+                  result = deepmerge(result, variantStyle);
+                });
+                return result;
+              };
+            }
+            return transformedStylesArg;
+          }
+          return stylesArg;
         }) : [];
         let transformedStyleArg = styleArg;
+        if (isPlainObject(styleArg)) {
+          let styledArgVariants;
+          if (styleArg && styleArg.variants) {
+            styledArgVariants = styleArg.variants;
+            delete transformedStyleArg.variants;
+            transformedStyleArg = props => {
+              let result = styleArg;
+              const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+              variantStyles.forEach(variantStyle => {
+                result = deepmerge(result, variantStyle);
+              });
+              return result;
+            };
+          }
+        } else if (typeof styleArg === 'function' &&
+        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+        // component stays as a function. This condition makes sure that we do not interpolate functions
+        // which are basically components used as a selectors.
+        styleArg.__emotion_real !== styleArg) {
+          // If the type is function, we need to define the default theme.
+          transformedStyleArg = props => muiStyledFunctionResolver({
+            styledArg: styleArg,
+            props,
+            defaultTheme,
+            themeId
+          });
+        }
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(props => {
             const theme = resolveTheme(_extends({}, props, {
@@ -7775,7 +7861,7 @@
               defaultTheme,
               themeId
             }));
-            return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+            return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
           });
         }
         if (!skipSx) {
@@ -7787,18 +7873,6 @@
           // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
           transformedStyleArg = [...styleArg, ...placeholders];
           transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-        } else if (typeof styleArg === 'function' &&
-        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-        // component stays as a function. This condition makes sure that we do not interpolate functions
-        // which are basically components used as a selectors.
-        styleArg.__emotion_real !== styleArg) {
-          // If the type is function, we need to define the default theme.
-          transformedStyleArg = props => styleArg(_extends({}, props, {
-            theme: resolveTheme(_extends({}, props, {
-              defaultTheme,
-              themeId
-            }))
-          }));
         }
         const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
         {
@@ -19271,12 +19345,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     const trackOffset = valueToPercent(range ? values[0] : min, min, max);
     const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
-    const getRootProps = (otherHandlers = {}) => {
+    const getRootProps = (externalProps = {}) => {
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onMouseDown: createHandleMouseDown(otherHandlers || {})
+        onMouseDown: createHandleMouseDown(externalHandlers || {})
       };
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-      return _extends({
+      const mergedEventHandlers = _extends({}, externalHandlers, ownEventHandlers);
+      return _extends({}, externalProps, {
         ref: handleRef
       }, mergedEventHandlers);
     };
@@ -19291,12 +19366,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       (_otherHandlers$onMous3 = otherHandlers.onMouseLeave) == null || _otherHandlers$onMous3.call(otherHandlers, event);
       setOpen(-1);
     };
-    const getThumbProps = (otherHandlers = {}) => {
+    const getThumbProps = (externalProps = {}) => {
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onMouseOver: createHandleMouseOver(otherHandlers || {}),
-        onMouseLeave: createHandleMouseLeave(otherHandlers || {})
+        onMouseOver: createHandleMouseOver(externalHandlers || {}),
+        onMouseLeave: createHandleMouseLeave(externalHandlers || {})
       };
-      return _extends({}, otherHandlers, ownEventHandlers);
+      return _extends({}, externalProps, externalHandlers, ownEventHandlers);
     };
     const getThumbStyle = index => {
       return {
@@ -19304,14 +19380,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         pointerEvents: active !== -1 && active !== index ? 'none' : undefined
       };
     };
-    const getHiddenInputProps = (otherHandlers = {}) => {
+    const getHiddenInputProps = (externalProps = {}) => {
       var _parameters$step;
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onChange: createHandleHiddenInputChange(otherHandlers || {}),
-        onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
-        onBlur: createHandleHiddenInputBlur(otherHandlers || {})
+        onChange: createHandleHiddenInputChange(externalHandlers || {}),
+        onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
+        onBlur: createHandleHiddenInputBlur(externalHandlers || {})
       };
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
+      const mergedEventHandlers = _extends({}, externalHandlers, ownEventHandlers);
       return _extends({
         tabIndex,
         'aria-labelledby': ariaLabelledby,
@@ -19324,7 +19401,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         max: parameters.max,
         step: parameters.step === null && parameters.marks ? 'any' : (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
         disabled
-      }, mergedEventHandlers, {
+      }, externalProps, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
           direction: isRtl ? 'rtl' : 'ltr',
           // So that VoiceOver's focus indicator matches the thumb's dimensions
@@ -25726,9 +25803,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
-    const getButtonPositionClassName = (index, childrenParam) => {
+    const validChildren = getValidReactChildren(children);
+    const childrenCount = validChildren.length;
+    const getButtonPositionClassName = index => {
       const isFirstButton = index === 0;
-      const isLastButton = index === React__namespace.Children.count(childrenParam) - 1;
+      const isLastButton = index === childrenCount - 1;
       if (isFirstButton && isLastButton) {
         return '';
       }
@@ -25749,14 +25828,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(ButtonGroupContext$1.Provider, {
         value: context,
-        children: React__namespace.Children.map(children, (child, index) => {
-          if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
-            return child;
-          }
+        children: validChildren.map((child, index) => {
           return /*#__PURE__*/jsxRuntime_1(ButtonGroupButtonContext$1.Provider, {
-            value: getButtonPositionClassName(index, children),
+            value: getButtonPositionClassName(index),
             children: child
-          });
+          }, index);
         })
       })
     }));
@@ -28216,7 +28292,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     justifyContent: 'flex-end',
     flex: '0 0 auto'
   }, !ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8
     }
   }));
@@ -40178,11 +40254,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$x(ownerState);
     const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
+    const listboxId = useId();
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(SelectSelect, _extends({
         ref: handleDisplayRef,
         tabIndex: tabIndex,
-        role: "button",
+        role: "combobox",
+        "aria-controls": listboxId,
         "aria-disabled": disabled ? 'true' : undefined,
         "aria-expanded": open ? 'true' : 'false',
         "aria-haspopup": "listbox",
@@ -40238,15 +40316,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           'aria-labelledby': labelId,
           role: 'listbox',
           'aria-multiselectable': multiple ? 'true' : undefined,
-          disableListWrap: true
+          disableListWrap: true,
+          id: listboxId
         }, MenuProps.MenuListProps),
-        slotProps: {
+        slotProps: _extends({}, MenuProps.slotProps, {
           paper: _extends({}, paperProps, {
             style: _extends({
               minWidth: menuMinWidth
             }, paperProps != null ? paperProps.style : null)
           })
-        },
+        }),
         children: items
       }))]
     });