@mui/material 5.14.0 → 5.14.1

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.0
+ * @mui/material v5.14.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2131,6 +2131,7 @@
   /**
    * https://github.com/facebook/react/issues/14099#issuecomment-440013892
    */
+
   function useEventCallback(fn) {
     const ref = React__namespace.useRef(fn);
     useEnhancedEffect$1(() => {
@@ -6957,8 +6958,8 @@
   const maxWidth = props => {
     if (props.maxWidth !== undefined && props.maxWidth !== null) {
       const styleFromPropValue = propValue => {
-        var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
-        const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$1[propValue];
+        var _props$theme;
+        const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
         return {
           maxWidth: breakpoint || sizingTransform(propValue)
         };
@@ -7484,7 +7485,7 @@
       systemProps: {},
       otherProps: {}
     };
-    const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
+    const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
     Object.keys(props).forEach(prop => {
       if (config[prop]) {
         result.systemProps[prop] = props[prop];
@@ -7611,12 +7612,12 @@
     return variantsStyles;
   };
   const variantsResolver = (props, styles, theme, name) => {
-    var _theme$components, _theme$components$nam;
+    var _theme$components;
     const {
       ownerState = {}
     } = props;
     const variantsStyles = [];
-    const themeVariants = theme == null ? void 0 : (_theme$components = theme.components) == null ? void 0 : (_theme$components$nam = _theme$components[name]) == null ? void 0 : _theme$components$nam.variants;
+    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 => {
         let isMatch = true;
@@ -14805,7 +14806,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) {
     var _sliderRef$current, _doc$activeElement;
     const doc = ownerDocument(sliderRef.current);
-    if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null ? void 0 : (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
+    if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null || (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
       var _sliderRef$current2;
       (_sliderRef$current2 = sliderRef.current) == null ? void 0 : _sliderRef$current2.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
     }
@@ -14956,7 +14957,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(index);
       }
       setOpen(index);
-      otherHandlers == null ? void 0 : (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
     };
     const createHandleHiddenInputBlur = otherHandlers => event => {
       var _otherHandlers$onBlur;
@@ -14965,7 +14966,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(-1);
       }
       setOpen(-1);
-      otherHandlers == null ? void 0 : (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
     };
     useEnhancedEffect$1(() => {
       if (disabled && sliderRef.current.contains(document.activeElement)) {
@@ -16021,10 +16022,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       // Scroll active descendant into view.
       // Logic copied from https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/combobox/examples/js/select-only.js
-      //
+      // In case of mouse clicks and touch (in mobile devices) we avoid scrolling the element and keep both behaviors same.
       // Consider this API instead once it has a better browser support:
       // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-      if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
+      if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse' && reason !== 'touch') {
         const element = option;
         const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
         const elementBottom = element.offsetTop + element.offsetHeight;
@@ -16736,7 +16737,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
+    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
     return {
       userSelect: 'none',
       width: '1em',
@@ -16746,19 +16747,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // e.g. heroicons uses fill="none" and stroke="currentColor"
       fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
       flexShrink: 0,
-      transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-        duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
+      transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+        duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
       }),
       fontSize: {
         inherit: 'inherit',
-        small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-        medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-        large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+        small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+        medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+        large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
       }[ownerState.fontSize],
       // TODO v5 deprecate, v6 remove for sx
-      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
-        action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
-        disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
+      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
+        action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
+        disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
         inherit: undefined
       }[ownerState.color]
     };
@@ -25611,7 +25612,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -27416,7 +27417,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   });
   const styles$3 = (theme, enableColorScheme = false) => {
-    var _theme$components, _theme$components$Mui;
+    var _theme$components;
     const colorSchemeStyles = {};
     if (enableColorScheme && theme.colorSchemes) {
       Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
@@ -27444,7 +27445,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       })
     }, colorSchemeStyles);
-    const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;
+    const themeOverrides = (_theme$components = theme.components) == null || (_theme$components = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components.styleOverrides;
     if (themeOverrides) {
       defaultStyles = [defaultStyles, themeOverrides];
     }
@@ -29568,7 +29569,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -30305,6 +30306,66 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var FormControl$1 = FormControl;
 
+  const Stack = createStack({
+    createStyledComponent: styled$1('div', {
+      name: 'MuiStack',
+      slot: 'Root',
+      overridesResolver: (props, styles) => styles.root
+    }),
+    useThemeProps: inProps => useThemeProps({
+      props: inProps,
+      name: 'MuiStack'
+    })
+  });
+  Stack.propTypes /* remove-proptypes */ = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'column'
+     */
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    /**
+     * Add an element between each child.
+     */
+    divider: PropTypes.node,
+    /**
+     * Defines the space between immediate children.
+     * @default 0
+     */
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    /**
+     * The system prop, which allows defining system overrides as well as additional CSS styles.
+     */
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    /**
+     * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+     *
+     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+     * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+     *
+     * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+     * @default false
+     */
+    useFlexGap: PropTypes.bool
+  } ;
+  var Stack$1 = Stack;
+
+  const stackClasses = generateUtilityClasses('MuiStack', ['root']);
+  var stackClasses$1 = stackClasses;
+
   function getFormControlLabelUtilityClasses(slot) {
     return generateUtilityClass('MuiFormControlLabel', slot);
   }
@@ -30445,12 +30506,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       ref: ref
     }, other, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label, required && /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
-        ownerState: ownerState,
-        "aria-hidden": true,
-        className: classes.asterisk,
-        children: ["\u2009", '*']
-      })]
+      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), required ? /*#__PURE__*/jsxRuntime_2(Stack$1, {
+        direction: "row",
+        alignItems: "center",
+        children: [label, /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
+          ownerState: ownerState,
+          "aria-hidden": true,
+          className: classes.asterisk,
+          children: ["\u2009", '*']
+        })]
+      }) : label]
     }));
   });
   FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -34704,7 +34769,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent List component.
@@ -35130,7 +35195,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * The components used for each slot inside.
      *
@@ -36792,7 +36857,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent Menu component.
@@ -43979,66 +44044,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   SpeedDialIcon.muiName = 'SpeedDialIcon';
   var SpeedDialIcon$1 = SpeedDialIcon;
 
-  const Stack = createStack({
-    createStyledComponent: styled$1('div', {
-      name: 'MuiStack',
-      slot: 'Root',
-      overridesResolver: (props, styles) => styles.root
-    }),
-    useThemeProps: inProps => useThemeProps({
-      props: inProps,
-      name: 'MuiStack'
-    })
-  });
-  Stack.propTypes /* remove-proptypes */ = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-    /**
-     * The content of the component.
-     */
-    children: PropTypes.node,
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-    /**
-     * Defines the `flex-direction` style property.
-     * It is applied for all screen sizes.
-     * @default 'column'
-     */
-    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-    /**
-     * Add an element between each child.
-     */
-    divider: PropTypes.node,
-    /**
-     * Defines the space between immediate children.
-     * @default 0
-     */
-    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-    /**
-     * The system prop, which allows defining system overrides as well as additional CSS styles.
-     */
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    /**
-     * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
-     *
-     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
-     * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
-     *
-     * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
-     * @default false
-     */
-    useFlexGap: PropTypes.bool
-  } ;
-  var Stack$1 = Stack;
-
-  const stackClasses = generateUtilityClasses('MuiStack', ['root']);
-  var stackClasses$1 = stackClasses;
-
   /**
    * Provides information about the current step in Stepper.
    */