@mui/system 5.15.12 → 5.15.14

package/legacy/cssVars/useCurrentColorScheme.js

@@ -83,7 +83,7 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      var newMode = !mode ? defaultMode : mode;
+      var newMode = mode != null ? mode : defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -164,11 +164,17 @@ export default function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  var handleMediaQuery = React.useCallback(function (e) {
+  var handleMediaQuery = React.useCallback(function (event) {
     if (state.mode === 'system') {
       setState(function (currentState) {
+        var systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
         return _extends({}, currentState, {
-          systemMode: e != null && e.matches ? 'dark' : 'light'
+          systemMode: systemMode
         });
       });
     }
@@ -189,36 +195,36 @@ export default function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return function () {
-      return media.removeListener(handler);
+      media.removeListener(handler);
     };
   }, []);
 
   // Handle when localStorage has changed
   React.useEffect(function () {
-    var handleStorage = function handleStorage(event) {
-      var value = event.newValue;
-      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-        // If the key is deleted, value will be null then reset color scheme to the default one.
-        if (event.key.endsWith('light')) {
-          setColorScheme({
-            light: value
-          });
+    if (storageWindow) {
+      var handleStorage = function handleStorage(event) {
+        var value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
         }
-        if (event.key.endsWith('dark')) {
-          setColorScheme({
-            dark: value
-          });
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
         }
-      }
-      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-        setMode(value || defaultMode);
-      }
-    };
-    if (storageWindow) {
+      };
       // For syncing color-scheme changes between iframes
       storageWindow.addEventListener('storage', handleStorage);
       return function () {
-        return storageWindow.removeEventListener('storage', handleStorage);
+        storageWindow.removeEventListener('storage', handleStorage);
       };
     }
     return undefined;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.12
+ * @mui/system v5.15.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -58,6 +58,8 @@ export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
 export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
 export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
 export { default as responsivePropType } from './responsivePropType';
+export { default as RtlProvider } from './RtlProvider';
+export * from './RtlProvider';
 
 /** ----------------- */
 /** Layout components */

package/modern/RtlProvider/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["value"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const RtlContext = /*#__PURE__*/React.createContext();
+function RtlProvider(_ref) {
+  let {
+      value
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
+    value: value ?? true
+  }, props));
+}
+process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
+  children: PropTypes.node,
+  value: PropTypes.bool
+} : void 0;
+export const useRtl = () => {
+  const value = React.useContext(RtlContext);
+  return value ?? false;
+};
+export default RtlProvider;

package/modern/ThemeProvider/ThemeProvider.js

@@ -7,6 +7,7 @@ import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '
 import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
+import RtlProvider from '../RtlProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
@@ -52,11 +53,15 @@ function ThemeProvider(props) {
   }
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  const rtlValue = engineTheme.direction === 'rtl';
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
-      children: children
+      children: /*#__PURE__*/_jsx(RtlProvider, {
+        value: rtlValue,
+        children: children
+      })
     })
   });
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -46,22 +46,23 @@ export default function createCssVarsProvider(options) {
     }
     return value;
   };
-  function CssVarsProvider({
-    children,
-    theme: themeProp = defaultTheme,
-    modeStorageKey = defaultModeStorageKey,
-    colorSchemeStorageKey = defaultColorSchemeStorageKey,
-    attribute = defaultAttribute,
-    defaultMode = designSystemMode,
-    defaultColorScheme = designSystemColorScheme,
-    disableTransitionOnChange = designSystemTransitionOnChange,
-    storageWindow = typeof window === 'undefined' ? undefined : window,
-    documentNode = typeof document === 'undefined' ? undefined : document,
-    colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root',
-    disableNestedContext = false,
-    disableStyleSheetGeneration = false
-  }) {
+  function CssVarsProvider(props) {
+    const {
+      children,
+      theme: themeProp = defaultTheme,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
+      defaultMode = designSystemMode,
+      defaultColorScheme = designSystemColorScheme,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      colorSchemeSelector = ':root',
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false
+    } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
@@ -228,14 +229,14 @@ export default function createCssVarsProvider(options) {
       };
     }, []);
     const contextValue = React.useMemo(() => ({
-      mode,
-      systemMode,
-      setMode,
-      lightColorScheme,
-      darkColorScheme,
+      allColorSchemes,
       colorScheme,
+      darkColorScheme,
+      lightColorScheme,
+      mode,
       setColorScheme,
-      allColorSchemes
+      setMode,
+      systemMode
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {

package/modern/cssVars/useCurrentColorScheme.js

@@ -78,7 +78,7 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = !mode ? defaultMode : mode;
+      const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -159,11 +159,19 @@ export default function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(e => {
+  const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
-      setState(currentState => _extends({}, currentState, {
-        systemMode: e?.matches ? 'dark' : 'light'
-      }));
+      setState(currentState => {
+        const systemMode = event?.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return _extends({}, currentState, {
+          systemMode
+        });
+      });
     }
   }, [state.mode]);
 
@@ -179,34 +187,38 @@ export default function useCurrentColorScheme(options) {
     // Intentionally use deprecated listener methods to support iOS & old browsers
     media.addListener(handler);
     handler(media);
-    return () => media.removeListener(handler);
+    return () => {
+      media.removeListener(handler);
+    };
   }, []);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    const handleStorage = event => {
-      const value = event.newValue;
-      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-        // If the key is deleted, value will be null then reset color scheme to the default one.
-        if (event.key.endsWith('light')) {
-          setColorScheme({
-            light: value
-          });
+    if (storageWindow) {
+      const handleStorage = event => {
+        const value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
         }
-        if (event.key.endsWith('dark')) {
-          setColorScheme({
-            dark: value
-          });
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
         }
-      }
-      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-        setMode(value || defaultMode);
-      }
-    };
-    if (storageWindow) {
+      };
       // For syncing color-scheme changes between iframes
       storageWindow.addEventListener('storage', handleStorage);
-      return () => storageWindow.removeEventListener('storage', handleStorage);
+      return () => {
+        storageWindow.removeEventListener('storage', handleStorage);
+      };
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.12
+ * @mui/system v5.15.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -58,6 +58,8 @@ export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
 export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
 export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
 export { default as responsivePropType } from './responsivePropType';
+export { default as RtlProvider } from './RtlProvider';
+export * from './RtlProvider';
 
 /** ----------------- */
 /** Layout components */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.15.12",
+  "version": "5.15.14",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/utils": "^5.15.12",
-    "@mui/private-theming": "^5.15.12",
-    "@mui/types": "^7.2.13",
-    "@mui/styled-engine": "^5.15.11"
+    "@mui/private-theming": "^5.15.14",
+    "@mui/types": "^7.2.14",
+    "@mui/utils": "^5.15.14",
+    "@mui/styled-engine": "^5.15.14"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",