@mui/system 5.10.0 → 5.10.3

package/esm/cssVars/useCurrentColorScheme.js

@@ -41,7 +41,7 @@ export function getColorScheme(state) {
   });
 }
 
-function resolveValue(key, defaultValue) {
+function initializeValue(key, defaultValue) {
   if (typeof window === 'undefined') {
     return undefined;
   }
@@ -50,6 +50,11 @@ function resolveValue(key, defaultValue) {
 
   try {
     value = localStorage.getItem(key) || undefined;
+
+    if (!value) {
+      // the first time that user enters the site.
+      localStorage.setItem(key, defaultValue);
+    }
   } catch (e) {// Unsupported
   }
 
@@ -68,25 +73,29 @@ export default function useCurrentColorScheme(options) {
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const [state, setState] = React.useState(() => {
-    const initialMode = resolveValue(modeStorageKey, defaultMode);
+    const initialMode = initializeValue(modeStorageKey, defaultMode);
+    const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+    const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
-      lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
-      darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+      lightColorScheme,
+      darkColorScheme
     };
   });
   const colorScheme = getColorScheme(state);
   const setMode = React.useCallback(mode => {
     setState(currentState => {
-      const newMode = !mode ? defaultMode : mode;
-
       if (mode === currentState.mode) {
+        // do nothing if mode does not change
         return currentState;
       }
 
-      if (typeof localStorage !== 'undefined') {
+      const newMode = !mode ? defaultMode : mode;
+
+      try {
         localStorage.setItem(modeStorageKey, newMode);
+      } catch (e) {// Unsupported
       }
 
       return _extends({}, currentState, {
@@ -96,22 +105,31 @@ export default function useCurrentColorScheme(options) {
     });
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
-    if (!value || typeof value === 'string') {
+    if (!value) {
+      setState(currentState => {
+        try {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+        } catch (e) {// Unsupported
+        }
+
+        return _extends({}, currentState, {
+          lightColorScheme: defaultLightColorScheme,
+          darkColorScheme: defaultDarkColorScheme
+        });
+      });
+    } else if (typeof value === 'string') {
       if (value && !joinedColorSchemes.includes(value)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
           const newState = _extends({}, currentState);
 
-          if (!value) {
-            // reset to default color scheme
-            newState.lightColorScheme = defaultLightColorScheme;
-            newState.darkColorScheme = defaultDarkColorScheme;
-            return newState;
-          }
-
           processState(currentState, mode => {
-            localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            } catch (e) {// Unsupported
+            }
 
             if (mode === 'light') {
               newState.lightColorScheme = value;
@@ -124,30 +142,41 @@ export default function useCurrentColorScheme(options) {
           return newState;
         });
       }
-    } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
-      console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
     } else {
       setState(currentState => {
         const newState = _extends({}, currentState);
 
-        if (value.light || value.light === null) {
-          newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
+
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark || value.dark === null) {
-          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
+
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
         return newState;
       });
-
-      if (value.light) {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
-      }
-
-      if (value.dark) {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-      }
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
@@ -169,23 +198,7 @@ export default function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return () => media.removeListener(handler);
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(() => {
-    if (state.mode) {
-      localStorage.setItem(modeStorageKey, state.mode);
-    }
-
-    processState(state, mode => {
-      if (mode === 'light') {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
-      }
-
-      if (mode === 'dark') {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
-      }
-    });
-  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+  }, []); // Handle when localStorage has changed
 
   React.useEffect(() => {
     const handleStorage = event => {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.0
+/** @license MUI v5.10.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/legacy/cssVars/useCurrentColorScheme.js

@@ -41,7 +41,7 @@ export function getColorScheme(state) {
   });
 }
 
-function resolveValue(key, defaultValue) {
+function initializeValue(key, defaultValue) {
   if (typeof window === 'undefined') {
     return undefined;
   }
@@ -50,6 +50,11 @@ function resolveValue(key, defaultValue) {
 
   try {
     value = localStorage.getItem(key) || undefined;
+
+    if (!value) {
+      // the first time that user enters the site.
+      localStorage.setItem(key, defaultValue);
+    }
   } catch (e) {// Unsupported
   }
 
@@ -72,12 +77,14 @@ export default function useCurrentColorScheme(options) {
   var joinedColorSchemes = supportedColorSchemes.join(',');
 
   var _React$useState = React.useState(function () {
-    var initialMode = resolveValue(modeStorageKey, defaultMode);
+    var initialMode = initializeValue(modeStorageKey, defaultMode);
+    var lightColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
+    var darkColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
-      lightColorScheme: resolveValue("".concat(colorSchemeStorageKey, "-light")) || defaultLightColorScheme,
-      darkColorScheme: resolveValue("".concat(colorSchemeStorageKey, "-dark")) || defaultDarkColorScheme
+      lightColorScheme: lightColorScheme,
+      darkColorScheme: darkColorScheme
     };
   }),
       state = _React$useState[0],
@@ -86,14 +93,16 @@ export default function useCurrentColorScheme(options) {
   var colorScheme = getColorScheme(state);
   var setMode = React.useCallback(function (mode) {
     setState(function (currentState) {
-      var newMode = !mode ? defaultMode : mode;
-
       if (mode === currentState.mode) {
+        // do nothing if mode does not change
         return currentState;
       }
 
-      if (typeof localStorage !== 'undefined') {
+      var newMode = !mode ? defaultMode : mode;
+
+      try {
         localStorage.setItem(modeStorageKey, newMode);
+      } catch (e) {// Unsupported
       }
 
       return _extends({}, currentState, {
@@ -103,22 +112,31 @@ export default function useCurrentColorScheme(options) {
     });
   }, [modeStorageKey, defaultMode]);
   var setColorScheme = React.useCallback(function (value) {
-    if (!value || typeof value === 'string') {
+    if (!value) {
+      setState(function (currentState) {
+        try {
+          localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
+          localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
+        } catch (e) {// Unsupported
+        }
+
+        return _extends({}, currentState, {
+          lightColorScheme: defaultLightColorScheme,
+          darkColorScheme: defaultDarkColorScheme
+        });
+      });
+    } else if (typeof value === 'string') {
       if (value && !joinedColorSchemes.includes(value)) {
         console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
       } else {
         setState(function (currentState) {
           var newState = _extends({}, currentState);
 
-          if (!value) {
-            // reset to default color scheme
-            newState.lightColorScheme = defaultLightColorScheme;
-            newState.darkColorScheme = defaultDarkColorScheme;
-            return newState;
-          }
-
           processState(currentState, function (mode) {
-            localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
+            try {
+              localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
+            } catch (e) {// Unsupported
+            }
 
             if (mode === 'light') {
               newState.lightColorScheme = value;
@@ -131,30 +149,41 @@ export default function useCurrentColorScheme(options) {
           return newState;
         });
       }
-    } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
-      console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
     } else {
       setState(function (currentState) {
         var newState = _extends({}, currentState);
 
-        if (value.light || value.light === null) {
-          newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        var newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        var newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error("`".concat(newLightColorScheme, "` does not exist in `theme.colorSchemes`."));
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
+
+            try {
+              localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), newLightColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark || value.dark === null) {
-          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error("`".concat(newDarkColorScheme, "` does not exist in `theme.colorSchemes`."));
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
+
+            try {
+              localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
         return newState;
       });
-
-      if (value.light) {
-        localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), value.light);
-      }
-
-      if (value.dark) {
-        localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), value.dark);
-      }
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   var handleMediaQuery = React.useCallback(function (e) {
@@ -182,23 +211,7 @@ export default function useCurrentColorScheme(options) {
     return function () {
       return media.removeListener(handler);
     };
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(function () {
-    if (state.mode) {
-      localStorage.setItem(modeStorageKey, state.mode);
-    }
-
-    processState(state, function (mode) {
-      if (mode === 'light') {
-        localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), state.lightColorScheme);
-      }
-
-      if (mode === 'dark') {
-        localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), state.darkColorScheme);
-      }
-    });
-  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+  }, []); // Handle when localStorage has changed
 
   React.useEffect(function () {
     var handleStorage = function handleStorage(event) {

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.0
+/** @license MUI v5.10.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/cssVars/useCurrentColorScheme.js

@@ -41,7 +41,7 @@ export function getColorScheme(state) {
   });
 }
 
-function resolveValue(key, defaultValue) {
+function initializeValue(key, defaultValue) {
   if (typeof window === 'undefined') {
     return undefined;
   }
@@ -50,6 +50,11 @@ function resolveValue(key, defaultValue) {
 
   try {
     value = localStorage.getItem(key) || undefined;
+
+    if (!value) {
+      // the first time that user enters the site.
+      localStorage.setItem(key, defaultValue);
+    }
   } catch (e) {// Unsupported
   }
 
@@ -68,25 +73,29 @@ export default function useCurrentColorScheme(options) {
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const [state, setState] = React.useState(() => {
-    const initialMode = resolveValue(modeStorageKey, defaultMode);
+    const initialMode = initializeValue(modeStorageKey, defaultMode);
+    const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+    const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
-      lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
-      darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+      lightColorScheme,
+      darkColorScheme
     };
   });
   const colorScheme = getColorScheme(state);
   const setMode = React.useCallback(mode => {
     setState(currentState => {
-      const newMode = !mode ? defaultMode : mode;
-
       if (mode === currentState.mode) {
+        // do nothing if mode does not change
         return currentState;
       }
 
-      if (typeof localStorage !== 'undefined') {
+      const newMode = !mode ? defaultMode : mode;
+
+      try {
         localStorage.setItem(modeStorageKey, newMode);
+      } catch (e) {// Unsupported
       }
 
       return _extends({}, currentState, {
@@ -96,22 +105,31 @@ export default function useCurrentColorScheme(options) {
     });
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
-    if (!value || typeof value === 'string') {
+    if (!value) {
+      setState(currentState => {
+        try {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+        } catch (e) {// Unsupported
+        }
+
+        return _extends({}, currentState, {
+          lightColorScheme: defaultLightColorScheme,
+          darkColorScheme: defaultDarkColorScheme
+        });
+      });
+    } else if (typeof value === 'string') {
       if (value && !joinedColorSchemes.includes(value)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
           const newState = _extends({}, currentState);
 
-          if (!value) {
-            // reset to default color scheme
-            newState.lightColorScheme = defaultLightColorScheme;
-            newState.darkColorScheme = defaultDarkColorScheme;
-            return newState;
-          }
-
           processState(currentState, mode => {
-            localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            } catch (e) {// Unsupported
+            }
 
             if (mode === 'light') {
               newState.lightColorScheme = value;
@@ -124,30 +142,41 @@ export default function useCurrentColorScheme(options) {
           return newState;
         });
       }
-    } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
-      console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
     } else {
       setState(currentState => {
         const newState = _extends({}, currentState);
 
-        if (value.light || value.light === null) {
-          newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
+
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark || value.dark === null) {
-          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
+
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
         return newState;
       });
-
-      if (value.light) {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
-      }
-
-      if (value.dark) {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-      }
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
@@ -169,23 +198,7 @@ export default function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return () => media.removeListener(handler);
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(() => {
-    if (state.mode) {
-      localStorage.setItem(modeStorageKey, state.mode);
-    }
-
-    processState(state, mode => {
-      if (mode === 'light') {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
-      }
-
-      if (mode === 'dark') {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
-      }
-    });
-  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+  }, []); // Handle when localStorage has changed
 
   React.useEffect(() => {
     const handleStorage = event => {

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.0
+/** @license MUI v5.10.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.10.0",
+  "version": "5.10.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
-    "@mui/private-theming": "^5.9.3",
-    "@mui/styled-engine": "^5.10.0",
-    "@mui/types": "^7.1.5",
-    "@mui/utils": "^5.9.3",
+    "@babel/runtime": "^7.18.9",
+    "@mui/private-theming": "^5.10.3",
+    "@mui/styled-engine": "^5.10.3",
+    "@mui/types": "^7.2.0",
+    "@mui/utils": "^5.10.3",
     "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1"

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};