@mui/material 5.10.8 → 5.10.9

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.8
+/** @license MUI v5.10.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5268,22 +5268,23 @@
     (0, ref.current)(...args), []);
   }
 
-  function useForkRef(refA, refB) {
+  function useForkRef(...refs) {
     /**
-     * This will create a new function if the ref props change and are defined.
+     * This will create a new function if the refs passed to this hook change and are all defined.
      * This means react will call the old forkRef with `null` and the new forkRef
      * with the ref. Cleanup naturally emerges from this behavior.
      */
     return React__namespace.useMemo(() => {
-      if (refA == null && refB == null) {
+      if (refs.every(ref => ref == null)) {
         return null;
       }
 
-      return refValue => {
-        setRef(refA, refValue);
-        setRef(refB, refValue);
-      };
-    }, [refA, refB]);
+      return instance => {
+        refs.forEach(ref => {
+          setRef(ref, instance);
+        });
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
   }
 
   // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
@@ -7769,7 +7770,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const DEFAULT_ATTRIBUTE = 'data-color-scheme';
   function getInitColorSchemeScript$1(options) {
     const {
-      enableColorScheme = true,
       defaultMode = 'light',
       defaultLightColorScheme = 'light',
       defaultDarkColorScheme = 'dark',
@@ -7805,9 +7805,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
-        if (${enableColorScheme} && !!cssColorScheme) {
-          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
-        }
       } catch (e) {} })();`
       }
     });
@@ -8059,10 +8056,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
       modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
       colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-      defaultMode: desisgnSystemMode = 'light',
+      defaultMode: designSystemMode = 'light',
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
-      enableColorScheme: designSystemEnableColorScheme = true,
       shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
       resolveTheme,
       excludeVariablesFromRoot
@@ -8090,10 +8086,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       attribute = defaultAttribute,
-      defaultMode = desisgnSystemMode,
+      defaultMode = designSystemMode,
       defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
-      enableColorScheme = designSystemEnableColorScheme,
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -8111,7 +8106,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-      const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+      const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+
       const {
         mode,
         setMode,
@@ -8130,36 +8126,54 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         storageWindow
       });
 
-      const resolvedColorScheme = (() => {
+      const calculatedMode = (() => {
+        if (!mode) {
+          // This scope occurs on the server
+          if (defaultMode === 'system') {
+            return designSystemMode;
+          }
+
+          return defaultMode;
+        }
+
+        return mode;
+      })();
+
+      const calculatedColorScheme = (() => {
         if (!colorScheme) {
           // This scope occurs on the server
-          if (defaultMode === 'dark') {
+          if (calculatedMode === 'dark') {
             return defaultDarkColorScheme;
-          } // use light color scheme, if default mode is 'light' | 'auto'
+          } // use light color scheme, if default mode is 'light' | 'system'
 
 
           return defaultLightColorScheme;
         }
 
         return colorScheme;
-      })();
+      })(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
+
 
-      let theme = restThemeProp;
       const {
         css: rootCss,
         vars: rootVars,
         parsedTheme
-      } = cssVarsParser(theme, {
+      } = cssVarsParser(restThemeProp, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
-      });
-      theme = _extends({}, parsedTheme, {
+      }); // 3. Start composing the theme object
+
+      let theme = _extends({}, parsedTheme, {
         components,
         colorSchemes,
         cssVarPrefix,
         vars: rootVars,
         getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-      });
+      }); // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
+      //    The default color scheme stylesheet is constructed to have the least CSS specificity.
+      //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
+
+
       const defaultColorSchemeStyleSheet = {};
       const otherColorSchemesStyleSheet = {};
       Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -8173,13 +8187,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         });
         theme.vars = deepmerge(theme.vars, vars);
 
-        if (key === resolvedColorScheme) {
+        if (key === calculatedColorScheme) {
+          // 4.1 Merge the selected color scheme to the theme
           theme = _extends({}, theme, parsedScheme);
 
           if (theme.palette) {
-            // assign runtime mode & colorScheme
-            theme.palette.mode = mode;
-            theme.palette.colorScheme = resolvedColorScheme;
+            theme.palette.colorScheme = key;
           }
         }
 
@@ -8209,35 +8222,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         } else {
           otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
         }
-      });
+      }); // 5. Declaring effects
+      // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+
       React__namespace.useEffect(() => {
         if (colorScheme && colorSchemeNode) {
           // attaches attribute to <html> because the css variables are attached to :root (html)
           colorSchemeNode.setAttribute(attribute, colorScheme);
         }
-      }, [colorScheme, attribute, colorSchemeNode]);
-      useEnhancedEffect$1(() => {
-        if (!mode || !enableColorScheme || !colorSchemeNode) {
-          return undefined;
-        }
-
-        const priorColorScheme = colorSchemeNode.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
-
-        if (mode === 'system') {
-          colorSchemeNode.style.setProperty('color-scheme', systemMode);
-        } else {
-          colorSchemeNode.style.setProperty('color-scheme', mode);
-        }
+      }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+      // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
 
-        return () => {
-          colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
-        };
-      }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
       React__namespace.useEffect(() => {
         let timer;
 
         if (disableTransitionOnChange && hasMounted.current && documentNode) {
-          // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
           const css = documentNode.createElement('style');
           css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
           documentNode.head.appendChild(css); // Force browser repaint
@@ -8262,6 +8261,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return /*#__PURE__*/jsxRuntime_2(ColorSchemeContext.Provider, {
         value: {
           mode,
+          systemMode,
           setMode,
           lightColorScheme,
           darkColorScheme,
@@ -8330,11 +8330,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        */
       documentNode: PropTypes.any,
 
-      /**
-       * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-       */
-      enableColorScheme: PropTypes.bool,
-
       /**
        * The key in the local storage used to store current color scheme.
        */
@@ -8356,12 +8351,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        */
       theme: PropTypes.object
     } ;
+    const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
+    const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
 
     const getInitColorSchemeScript = params => getInitColorSchemeScript$1(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
-      modeStorageKey: defaultModeStorageKey,
-      enableColorScheme: designSystemEnableColorScheme
+      defaultMode: designSystemMode,
+      defaultLightColorScheme,
+      defaultDarkColorScheme,
+      modeStorageKey: defaultModeStorageKey
     }, params));
 
     return {
@@ -8775,6 +8774,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     return [];
   };
+  const generateDirectionClasses = direction => {
+    if (direction === undefined) {
+      return [];
+    }
+
+    if (typeof direction === 'object') {
+      return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
+    }
+
+    return [`direction-xs-${String(direction)}`];
+  };
 
   const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
   const defaultTheme$4 = createTheme$1(); // widening Theme to any so that the consumer can own the theme structure.
@@ -8812,7 +8822,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         gridSize
       } = ownerState;
       const slots = {
-        root: ['root', container && 'container', direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
+        root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
       };
       return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
     };
@@ -9202,7 +9212,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     } = mergeSlotProps(_extends({}, rest, {
       externalSlotProps: resolvedComponentsProps
     }));
-    const ref = useForkRef(internalRef, useForkRef(resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref));
+    const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
     const props = appendOwnerState(elementType, _extends({}, mergedProps, {
       ref
     }), ownerState);
@@ -14874,7 +14884,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$29 = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
   const Identity = x => x;
 
@@ -14914,6 +14924,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
       'aria-label': ariaLabel,
       'aria-valuetext': ariaValuetext,
+      'aria-labelledby': ariaLabelledby,
       className,
       component,
       classes: classesProp,
@@ -15091,6 +15102,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
                 "data-index": index,
                 "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
                 "aria-valuenow": scale(value),
+                "aria-labelledby": ariaLabelledby,
                 "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
                 value: values[index]
               }, inputProps))
@@ -19791,8 +19803,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
 
-    const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
-    const handleRef = useForkRef(ref, handleOwnRef);
+    const handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -22415,9 +22426,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       }
     }, []);
-    const handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
-    const handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
-    const handleInputRef = useForkRef(inputRef, handleInputRefProp);
+    const handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
     const [focused, setFocused] = React__namespace.useState(false);
     const muiFormControl = useFormControl();
 
@@ -24511,8 +24520,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1K);
     const nodeRef = React__namespace.useRef(null);
-    const foreignRef = useForkRef(children.ref, ref);
-    const handleRef = useForkRef(nodeRef, foreignRef);
+    const handleRef = useForkRef(nodeRef, children.ref, ref);
 
     const normalizedTransitionCallback = callback => maybeIsAppearing => {
       if (callback) {
@@ -28200,7 +28208,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     boxSizing: 'border-box',
     // Fix font resize problem in iOS
     WebkitTextSizeAdjust: '100%'
-  }, enableColorScheme && {
+  }, enableColorScheme && !theme.vars && {
     colorScheme: theme.palette.mode
   });
   const body = theme => _extends({
@@ -28215,7 +28223,19 @@ 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;
 
-    let defaultStyles = {
+    const colorSchemeStyles = {};
+
+    if (enableColorScheme && theme.colorSchemes) {
+      Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+        var _scheme$palette;
+
+        colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
+          colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+        };
+      });
+    }
+
+    let defaultStyles = _extends({
       html: html(theme, enableColorScheme),
       '*, *::before, *::after': {
         boxSizing: 'inherit'
@@ -28232,7 +28252,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           backgroundColor: (theme.vars || theme).palette.background.default
         }
       })
-    };
+    }, colorSchemeStyles);
+
     const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;
 
     if (themeOverrides) {
@@ -29768,8 +29789,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1m);
 
     const childrenRef = React__namespace.useRef(null);
-    const handleRefIntermediary = useForkRef(children.ref, childrenRef);
-    const handleRef = useForkRef(handleRefIntermediary, ref);
+    const handleRef = useForkRef(children.ref, childrenRef, ref);
 
     const normalizedTransitionCallback = callback => isAppearing => {
       if (callback) {
@@ -32764,8 +32784,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const autoTimeout = React__namespace.useRef();
     const theme = useTheme();
     const nodeRef = React__namespace.useRef(null);
-    const foreignRef = useForkRef(children.ref, ref);
-    const handleRef = useForkRef(nodeRef, foreignRef);
+    const handleRef = useForkRef(nodeRef, children.ref, ref);
 
     const normalizedTransitionCallback = callback => maybeIsAppearing => {
       if (callback) {
@@ -41066,8 +41085,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = useIsFocusVisible();
     const [focusVisible, setFocusVisible] = React__namespace.useState(false);
     const rootRef = React__namespace.useRef();
-    const handleFocusRef = useForkRef(focusVisibleRef, rootRef);
-    const handleRef = useForkRef(handleFocusRef, ref);
+    const handleRef = useForkRef(focusVisibleRef, rootRef, ref);
 
     const handleMouseMove = event => {
       if (onMouseMove) {
@@ -41461,6 +41479,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
+    const colorSchemeStyles = {};
+
+    if (ownerState.enableColorScheme && theme.colorSchemes) {
+      Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+        var _scheme$palette;
+
+        colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
+          colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+        };
+      });
+    }
+
     return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
       '& *, & *::before, & *::after': {
         boxSizing: 'inherit'
@@ -41468,7 +41498,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       '& strong, & b': {
         fontWeight: theme.typography.fontWeightBold
       }
-    });
+    }, colorSchemeStyles);
   });
   const ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
     const props = useThemeProps({
@@ -44156,8 +44186,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$y);
 
     const nodeRef = React__namespace.useRef(null);
-    const foreignRef = useForkRef(children.ref, ref);
-    const handleRef = useForkRef(nodeRef, foreignRef);
+    const handleRef = useForkRef(nodeRef, children.ref, ref);
 
     const normalizedTransitionCallback = callback => maybeIsAppearing => {
       if (callback) {
@@ -45325,9 +45354,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         document.removeEventListener('keydown', handleKeyDown);
       };
     }, [handleClose, open]);
-    const handleUseRef = useForkRef(setChildNode, ref);
-    const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
-    const handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
+    const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
     if (typeof title !== 'number' && !title) {
       open = false;