@mui/system 5.10.2 → 5.10.5

package/Box/Box.d.ts

@@ -18,7 +18,7 @@ export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<
 > & { filterProps: string[] };
 
 // borders.js
-export const borders: SimpleStyleFunction<
+export declare const borders: SimpleStyleFunction<
   | 'border'
   | 'borderTop'
   | 'borderRight'
@@ -28,11 +28,11 @@ export const borders: SimpleStyleFunction<
   | 'borderRadius'
 >;
 
-export const display: SimpleStyleFunction<
+export declare const display: SimpleStyleFunction<
   'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'
 >;
 
-export const flexbox: SimpleStyleFunction<
+export declare const flexbox: SimpleStyleFunction<
   | 'flexBasis'
   | 'flexDirection'
   | 'flexWrap'
@@ -48,7 +48,7 @@ export const flexbox: SimpleStyleFunction<
   | 'justifySelf'
 >;
 
-export const grid: SimpleStyleFunction<
+export declare const grid: SimpleStyleFunction<
   | 'gap'
   | 'columnGap'
   | 'rowGap'
@@ -63,15 +63,15 @@ export const grid: SimpleStyleFunction<
   | 'gridArea'
 >;
 
-export const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
+export declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
 
-export const positions: SimpleStyleFunction<
+export declare const positions: SimpleStyleFunction<
   'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'
 >;
 
-export const shadows: SimpleStyleFunction<'boxShadow'>;
+export declare const shadows: SimpleStyleFunction<'boxShadow'>;
 
-export const sizing: SimpleStyleFunction<
+export declare const sizing: SimpleStyleFunction<
   | 'width'
   | 'maxWidth'
   | 'minWidth'
@@ -83,7 +83,7 @@ export const sizing: SimpleStyleFunction<
   | 'boxSizing'
 >;
 
-export const spacing: SimpleStyleFunction<
+export declare const spacing: SimpleStyleFunction<
   | 'm'
   | 'mt'
   | 'mr'
@@ -114,7 +114,7 @@ export const spacing: SimpleStyleFunction<
   | 'paddingY'
 >;
 
-export const typography: SimpleStyleFunction<
+export declare const typography: SimpleStyleFunction<
   | 'typography'
   | 'fontFamily'
   | 'fontSize'

package/CHANGELOG.md

@@ -1,5 +1,164 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.5
+
+<!-- generated comparing v5.10.4..master -->
+
+_Sep 12, 2022_
+
+A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 [Blog post](https://mui.com/blog/introducing-mui-base/) for announcing the release of the MUI Base package is out thanks to @michaldudak.
+- 🚀 Added [`Alert`](https://mui.com/joy-ui/react-alert/), [`Modal`](https://mui.com/joy-ui/react-modal/), [`ListSubheader`](https://mui.com/joy-ui/react-list-subheader/), [`FormControl`](https://mui.com/joy-ui/react-form-control/), [`CircularProgress`](https://mui.com/joy-ui/react-circular-progress/) components to Joy UI (#33859) @hbjORbj @siriwatknp
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.10.5`
+
+- &#8203;<!-- 05 -->[ListItemText] Fix variant mapping in `primaryTypography` (#33880) @iamxukai
+- &#8203;<!-- 03 -->[Timeline] Add left and right aligned timeline demos in docs (#34156) @ZeeshanTamboli
+
+### `@mui/joy@5.0.0-alpha.45`
+
+- &#8203;<!-- 20 -->[Joy UI] Add `CircularProgress` component (#33869) @hbjORbj
+- &#8203;<!-- 19 -->[Joy UI] Add `FormControl` component (#34187) @siriwatknp
+- &#8203;<!-- 18 -->[Joy UI] Add `ListSubheader` component (#34191) @siriwatknp
+- &#8203;<!-- 17 -->[Joy UI] Add `Modal` component (#34043) @siriwatknp
+- &#8203;<!-- 10 -->[Joy] Fix list value of false or 0 (zero) text is incorrectly grey (#34255) @kushagra010
+- &#8203;<!-- 09 -->[Joy] Adjust typography decorator margin (#34257) @siriwatknp
+- &#8203;<!-- 08 -->[Joy] Miscellaneous fixes (#34193) @siriwatknp
+- &#8203;<!-- 07 -->[Radio][joy] Integrate with form control (#34277) @siriwatknp
+- &#8203;<!-- 06 -->[Joy][textarea] Pass `textarea` props from `componentsProps` (#34223) @HexM7
+
+### Docs
+
+- &#8203;<!-- 16 -->[blog] Introducing MUI Base (#33778) @michaldudak
+- &#8203;<!-- 13 -->[docs] Fix spelling error (#34209) @ChrystianDeMatos
+- &#8203;<!-- 12 -->[docs] Improve link to the security policy (#34219) @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Fix typo in Joy UI's `Usage` docs (#34200) @zillion504
+- &#8203;<!-- 02 -->[website] Add Lukas to the about page (#34284) @LukasTy
+- &#8203;<!-- 01 -->[website] Update diamond sponsor URL (#34256) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 04 -->[test] Replace argos-cli with @argos-ci/core (#34178) @michaldudak
+- &#8203;<!-- 15 -->[core] Create a script to generate codeowners (#34175) @michaldudak
+- &#8203;<!-- 14 -->[core] Add RFC GH issue template (#33871) @bytasv
+
+All contributors of this release in alphabetical order: @bytasv, @ChrystianDeMatos, @hbjORbj, @HexM7, @iamxukai, @kushagra010, @LukasTy, @michaldudak, @oliviertassinari, @siriwatknp, @ZeeshanTamboli, @zillion504
+
+## 5.10.4
+
+<!-- generated comparing v5.10.3..master -->
+
+_Sep 5, 2022_
+
+A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added [`Alert`](https://mui.com/joy-ui/react-alert/) component to Joy UI (#33859) @hbjORbj
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.4`
+
+- &#8203;<!-- 22 -->[Avatar] Use structured / semantic markup for avatars and avatar groups (#33994) @paulschreiber
+- &#8203;<!-- 05 -->[Steps] Use structured / semantic markup for steps and steppers (#34138) @paulschreiber
+
+### `@mui/joy@5.0.0-alpha.44`
+
+- &#8203;<!-- 23 -->[Alert][joy] Add `Alert` component (#33859) @hbjORbj
+- &#8203;<!-- 08 -->[Joy] Make the description of `componentsProps` generic (#34140) @hbjORbj
+- &#8203;<!-- 07 -->[Joy] Add tests / classes for `Breadcrumbs` component (#33860) @hbjORbj
+- &#8203;<!-- 06 -->[Select][joy] Fix forwarding listbox `component` prop (#34172) @siriwatknp
+
+### `@mui/base@5.0.0-alpha.96`
+
+- &#8203;<!-- 21 -->[Select][base] Fix type issues that appeared with TS 4.8 (#34132) @michaldudak
+
+### Docs
+
+- &#8203;<!-- 15 -->[docs] Add `mui-color-input`, `mui-chips-input` and `mui-tel-input` into the related projects page (#34123) @viclafouch
+- &#8203;<!-- 14 -->[docs] Update sponsors (#34157) @hbjORbj
+- &#8203;<!-- 13 -->[docs] Move 5 component names to Title Case (#34118) @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Fix the color contrast on optional API methods (#34127) @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Fix crash due to using wrong variable (#34171) @siriwatknp
+- &#8203;<!-- 10 -->[docs] Fix a few Base typos (#33986) @ropereraLK
+- &#8203;<!-- 09 -->[docs] Revise Joy UI "Overview" page copy (#34087) @samuelsycamore
+- &#8203;<!-- 20 -->[blog] Fix social cards (#34160) @oliviertassinari
+- &#8203;<!-- 03 -->[website] Allow deep linking to sponsors @oliviertassinari
+- &#8203;<!-- 02 -->[website] Update job descriptions (#34134) @DanailH
+- &#8203;<!-- 01 -->[website] Link Toolpad landing page @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 19 -->[core] Move renovate config to the repository root (#34180) @oliviertassinari
+- &#8203;<!-- 18 -->[core] Reinstate react/no-unused-prop-types eslint rule (#34125) @Janpot
+- &#8203;<!-- 17 -->[core] Do not append `types` field to packages without index.d.ts (#33952) @michaldudak
+- &#8203;<!-- 16 -->[core] Sanitize input in icon synonyms update script (#33989) @michaldudak
+- &#8203;<!-- 04 -->[test] Allow to pass options to `mousePress` function (#34124) @cherniavskii
+
+All contributors of this release in alphabetical order: @cherniavskii, @DanailH, @hbjORbj, @Janpot, @michaldudak, @oliviertassinari, @paulschreiber, @ropereraLK, @samuelsycamore, @siriwatknp, @viclafouch
+
+## 5.10.3
+
+<!-- generated comparing v5.10.2..master -->
+
+_Aug 29, 2022_
+
+A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ @mnajdova implemented an alternative to OverridableComponent to achieve better dev-time performance (#32735)
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.3`
+
+- [Autocomplete][material] Fix value overflow when `disableClearable` is used (#34053) @mnajdova
+- [Autocomplete] Update unstyled demo to not import Material UI (#34060) @oliviertassinari
+- [Slider] Remove SliderInput export from d.ts (#34055) @pieetrus
+- [TablePagination] Fix select variant not working (#33974) @ZeeshanTamboli
+
+### `@mui/system@5.10.3`
+
+- [system] Fix mode blink when open multiple sessions (#33877) @siriwatknp
+
+### `@mui/base@5.0.0-alpha.95`
+
+- [Button][base] Prevent too many ref updates (#33882) @michaldudak
+- [Select][base] Fix typo in listbox blur event handler (#34120) @ZeeshanTamboli
+- [TrapFocus] Improve tab test and simplify demo (#34008) @EthanStandel
+
+### `@mui/joy@5.0.0-alpha.43`
+
+- [Joy] Fix `role` proptypes (#34119) @siriwatknp
+- [Joy] Refine `componentsProps` for all components (#34077) @siriwatknp
+- [Radio][joy] support `componentsProps` as a function (#34022) @siriwatknp
+- [Select][joy] Improve the a11y on the select field demo (#34073) @mnajdova
+- [Textarea][joy] Add `Textarea` component (#33975) @siriwatknp
+
+### Docs
+
+- [blog] Add Grid v2 announcement (#33926) @siriwatknp
+- [blog] Making customizable components (#33183) @alexfauquette
+- [blog] Improve SEO metadata (#33954) @oliviertassinari
+- [docs] Add introduction Base component demos & general uplift (#33896) @danilo-leal
+- [docs] Fix Gatsby sample config in CSS variables (#34024) @bicstone
+- [docs] Fix 404 link from Joy to React Router (#34115) @oliviertassinari
+- [docs] Fix typo in `Select` component (#34091) @HexM7
+- [docs] Fix 301 links to tss's docs @oliviertassinari
+- [docs] Fixing Joy UI usage snippet (#34049) @JonathanAsbury-SPS
+- [docs] Fix missing JSX closing tag in Tooltip docs (#34064) @hoangph271
+- [website] Add Toolpad to Navigation (#33937) @bharatkashyap
+- [website] Improve SEO meta description for MUI X @oliviertassinari
+- [website] Improve visual look of code demos (#34070) @oliviertassinari
+- [website] Fix `DatePicker` component demo on the home page (#34054) @NaveenPantra
+
+### Core
+
+- [core] Offer alternative to `OverridableComponent` via module augmentation for better performance (#32735) @mnajdova
+- [core] Fix prop-type warning in regression tests (#34086) @oliviertassinari
+- [core] Specify code owners (#33995) @michaldudak
+- [core] Fix scroll restoration (#34037) @oliviertassinari
+
+All contributors of this release in alphabetical order: @alexfauquette, @bharatkashyap, @bicstone, @danilo-leal, @EthanStandel, @HexM7, @hoangph271, @JonathanAsbury-SPS, @michaldudak, @mnajdova, @NaveenPantra, @oliviertassinari, @pieetrus, @renovate[bot], @siriwatknp, @ZeeshanTamboli
+
 ## 5.10.2
 
 <!-- generated comparing v5.10.1..master -->

package/Stack/Stack.d.ts

@@ -3,6 +3,7 @@
  * Demos:
  *
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
  * API:
  *

package/Stack/Stack.js

@@ -16,6 +16,7 @@ var _createStack = _interopRequireDefault(require("./createStack"));
  * Demos:
  *
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
  * API:
  *

package/Stack/createStack.d.ts

@@ -11,7 +11,7 @@ interface StyleFunctionProps {
     ownerState: StackOwnerState;
 }
 declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
-declare function useThemePropsDefault<T>(props: T): T & {};
+declare function useThemePropsDefault<T extends {}>(props: T): T & {};
 export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
 export default function createStack(options?: {
     createStyledComponent?: typeof defaultCreateStyledComponent;

package/Unstable_Grid/createGrid.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { OverridableComponent } from '@mui/types';
 import { GridTypeMap } from './GridProps';
 declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
-declare function useThemePropsDefault<T>(props: T): T & {};
+declare function useThemePropsDefault<T extends {}>(props: T): T & {};
 export default function createGrid(options?: {
     createStyledComponent?: typeof defaultCreateStyledComponent;
     useThemeProps?: typeof useThemePropsDefault;

package/cssVars/cssVarsParser.d.ts

@@ -18,7 +18,7 @@ declare type NestedRecord<V = any> = {
  * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
  * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
  */
-export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
+export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
 /**
  *
  * @param {Object} obj : source object

package/cssVars/useCurrentColorScheme.js

@@ -59,7 +59,7 @@ function getColorScheme(state) {
   });
 }
 
-function resolveValue(key, defaultValue) {
+function initializeValue(key, defaultValue) {
   if (typeof window === 'undefined') {
     return undefined;
   }
@@ -68,6 +68,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
   }
 
@@ -86,23 +91,26 @@ 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;
       }
 
+      const newMode = !mode ? defaultMode : mode;
+
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {// Unsupported
@@ -115,20 +123,25 @@ 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 (0, _extends2.default)({}, 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 = (0, _extends2.default)({}, currentState);
-
-          if (!value) {
-            // reset to default color scheme
-            newState.lightColorScheme = defaultLightColorScheme;
-            newState.darkColorScheme = defaultDarkColorScheme;
-            return newState;
-          }
-
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -146,33 +159,40 @@ 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 = (0, _extends2.default)({}, currentState);
+        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
 
-        if (value.light || value.light === null) {
-          newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
-        }
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
 
-        if (value.dark || value.dark === null) {
-          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        return newState;
-      });
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
 
-      try {
-        if (value.light) {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark) {
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-        }
-      } catch (e) {// Unsupported
-      }
+        return newState;
+      });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
@@ -194,26 +214,7 @@ function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return () => media.removeListener(handler);
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(() => {
-    try {
-      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);
-        }
-      });
-    } catch (e) {// Unsupported
-    }
-  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+  }, []); // Handle when localStorage has changed
 
   React.useEffect(() => {
     const handleStorage = event => {

package/esm/Stack/Stack.js

@@ -5,6 +5,7 @@ import createStack from './createStack';
  * Demos:
  *
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
  * API:
  *

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,23 +73,26 @@ 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;
       }
 
+      const newMode = !mode ? defaultMode : mode;
+
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {// Unsupported
@@ -97,20 +105,26 @@ 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 => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -128,33 +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;
 
-        if (value.dark || value.dark === null) {
-          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        return newState;
-      });
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
 
-      try {
-        if (value.light) {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark) {
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-        }
-      } catch (e) {// Unsupported
-      }
+        return newState;
+      });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
@@ -176,26 +198,7 @@ export default function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return () => media.removeListener(handler);
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(() => {
-    try {
-      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);
-        }
-      });
-    } catch (e) {// Unsupported
-    }
-  }, [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.2
+/** @license MUI v5.10.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/Stack/Stack.js

@@ -5,6 +5,7 @@ import createStack from './createStack';
  * Demos:
  *
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
  * API:
  *

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,12 +93,13 @@ 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;
       }
 
+      var newMode = !mode ? defaultMode : mode;
+
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {// Unsupported
@@ -104,20 +112,26 @@ 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) {
             try {
               localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
@@ -135,33 +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 (value.dark || value.dark === null) {
-          newState.darkColorScheme = 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
+            }
+          }
         }
 
-        return newState;
-      });
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error("`".concat(newDarkColorScheme, "` does not exist in `theme.colorSchemes`."));
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
 
-      try {
-        if (value.light) {
-          localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), value.light);
+            try {
+              localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark) {
-          localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), value.dark);
-        }
-      } catch (e) {// Unsupported
-      }
+        return newState;
+      });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   var handleMediaQuery = React.useCallback(function (e) {
@@ -189,26 +211,7 @@ export default function useCurrentColorScheme(options) {
     return function () {
       return media.removeListener(handler);
     };
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(function () {
-    try {
-      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);
-        }
-      });
-    } catch (e) {// Unsupported
-    }
-  }, [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.2
+/** @license MUI v5.10.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/Stack/Stack.js

@@ -5,6 +5,7 @@ import createStack from './createStack';
  * Demos:
  *
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
  * API:
  *

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,23 +73,26 @@ 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;
       }
 
+      const newMode = !mode ? defaultMode : mode;
+
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {// Unsupported
@@ -97,20 +105,26 @@ 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 => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -128,33 +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;
 
-        if (value.dark || value.dark === null) {
-          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        return newState;
-      });
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
 
-      try {
-        if (value.light) {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark) {
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-        }
-      } catch (e) {// Unsupported
-      }
+        return newState;
+      });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
@@ -176,26 +198,7 @@ export default function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return () => media.removeListener(handler);
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(() => {
-    try {
-      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);
-        }
-      });
-    } catch (e) {// Unsupported
-    }
-  }, [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.2
+/** @license MUI v5.10.5
  *
  * 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.2",
+  "version": "5.10.5",
   "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.2",
-    "@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.5",
+    "@mui/types": "^7.2.0",
+    "@mui/utils": "^5.10.3",
     "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1"

package/useThemeProps/getThemeProps.d.ts

@@ -10,8 +10,8 @@ type ThemedProps<Theme, Name extends keyof any> = Theme extends {
   ? Props
   : {};
 
-export default function getThemeProps<
-  Theme extends ThemeWithProps<any>,
-  Props,
-  Name extends keyof any,
->(params: { props: Props; name: Name; theme?: Theme }): Props & ThemedProps<Theme, Name>;
+export default function getThemeProps<Theme, Props, Name extends keyof any>(params: {
+  props: Props;
+  name: Name;
+  theme?: Theme;
+}): Props & ThemedProps<Theme, Name>;