@mui/system - npm Package Compare versions

Comparing version 5.2.1 to 5.2.2

cssVars/createCssVarsProvider.d.ts

 import * as React from 'react';
-import { Result, Mode } from './useCurrentColorScheme';
+import { Mode, Result } from './useCurrentColorScheme';
 
@@ -74,2 +74,12 @@ type RequiredDeep<T> = {
   /**
+   * Disable CSS transitions when switching between modes or color schemes
+   * @default false
+   */
+  disableTransitionOnChange?: boolean;
+  /**
+   * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+   * @default true
+   */
+  enableColorScheme?: boolean;
+  /**
    * CSS variable prefix
@@ -76,0 +86,0 @@ * @default ''

cssVars/createCssVarsProvider.js

@@ -8,2 +8,3 @@ "use strict";
 });
+exports.DISABLE_CSS_TRANSITION = void 0;
 exports.default = createCssVarsProvider;
@@ -34,3 +35,4 @@
 const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"];
+      _excluded2 = ["colorSchemes"],
+      _excluded3 = ["components"];
 
@@ -41,2 +43,5 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
+const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
+exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
+
 function createCssVarsProvider(options) {
@@ -47,2 +52,4 @@ const {
     defaultColorScheme: designSystemColorScheme,
+    disableTransitionOnChange = false,
+    enableColorScheme = true,
     prefix: designSystemPrefix = '',
@@ -85,3 +92,10 @@ shouldSkipGeneratingVar
           restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded2);
-    let mergedTheme = (0, _utils.deepmerge)(restBaseTheme, restThemeProp);
+    const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+
+    let _deepmerge = (0, _utils.deepmerge)(restBaseTheme, restThemeProp),
+        {
+      components = {}
+    } = _deepmerge,
+        mergedTheme = (0, _objectWithoutPropertiesLoose2.default)(_deepmerge, _excluded3);
+
     const colorSchemes = (0, _utils.deepmerge)(baseColorSchemes, colorSchemesProp);
@@ -94,2 +108,3 @@ const allColorSchemes = Object.keys(colorSchemes);
       setMode,
+      systemMode,
       lightColorScheme,
@@ -130,2 +145,3 @@ darkColorScheme,
     mergedTheme = (0, _extends2.default)({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      components,
       colorSchemes,
@@ -169,2 +185,42 @@ vars: rootVars
     }, [colorScheme, attribute]);
+    React.useEffect(() => {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return () => {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(() => {
+      let timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        const css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (() => window.getComputedStyle(document.body))();
+
+        timer = setTimeout(() => {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(() => {
+      hasMounted.current = true;
+    }, []);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ColorSchemeContext.Provider, {
@@ -200,3 +256,3 @@ value: {
     /**
-     * Your component tree.
+     * The component tree.
      */
@@ -221,3 +277,3 @@ children: _propTypes.default.node,
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
@@ -224,0 +280,0 @@ prefix: _propTypes.default.string,

cssVars/cssVarsParser.js

@@ -83,3 +83,3 @@ "use strict";
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
@@ -86,0 +86,0 @@ }

esm/cssVars/createCssVarsProvider.js

@@ -5,3 +5,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"];
+      _excluded2 = ["colorSchemes"],
+      _excluded3 = ["components"];
 import * as React from 'react';
@@ -17,2 +18,3 @@ import PropTypes from 'prop-types';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
@@ -23,2 +25,4 @@ const {
     defaultColorScheme: designSystemColorScheme,
+    disableTransitionOnChange = false,
+    enableColorScheme = true,
     prefix: designSystemPrefix = '',
@@ -63,3 +67,10 @@ shouldSkipGeneratingVar
 
-    let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+
+    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+        {
+      components = {}
+    } = _deepmerge,
+        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
+
     const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
@@ -72,2 +83,3 @@ const allColorSchemes = Object.keys(colorSchemes);
       setMode,
+      systemMode,
       lightColorScheme,
@@ -108,2 +120,3 @@ darkColorScheme,
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      components,
       colorSchemes,
@@ -147,2 +160,42 @@ vars: rootVars
     }, [colorScheme, attribute]);
+    React.useEffect(() => {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return () => {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(() => {
+      let timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        const css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (() => window.getComputedStyle(document.body))();
+
+        timer = setTimeout(() => {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(() => {
+      hasMounted.current = true;
+    }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
@@ -178,3 +231,3 @@ value: {
     /**
-     * Your component tree.
+     * The component tree.
      */
@@ -199,3 +252,3 @@ children: PropTypes.node,
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
@@ -202,0 +255,0 @@ prefix: PropTypes.string,

esm/cssVars/cssVarsParser.js

@@ -67,3 +67,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
@@ -70,0 +70,0 @@ }

index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.2.1
+/** @license MUI v5.2.2
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

legacy/cssVars/createCssVarsProvider.js

@@ -16,2 +16,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
@@ -23,2 +24,6 @@ var _options$theme = options.theme,
       designSystemColorScheme = options.defaultColorScheme,
+      _options$disableTrans = options.disableTransitionOnChange,
+      disableTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
+      _options$enableColorS = options.enableColorScheme,
+      enableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
       _options$prefix = options.prefix,
@@ -67,3 +72,9 @@ designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
 
-    var mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    var hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+
+    var _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+        _deepmerge$components = _deepmerge.components,
+        components = _deepmerge$components === void 0 ? {} : _deepmerge$components,
+        mergedTheme = _objectWithoutProperties(_deepmerge, ["components"]);
+
     var colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
@@ -83,2 +94,3 @@ var allColorSchemes = Object.keys(colorSchemes);
         setMode = _useCurrentColorSchem.setMode,
+        systemMode = _useCurrentColorSchem.systemMode,
         lightColorScheme = _useCurrentColorSchem.lightColorScheme,
@@ -112,2 +124,3 @@ darkColorScheme = _useCurrentColorSchem.darkColorScheme,
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      components: components,
       colorSchemes: colorSchemes,
@@ -155,2 +168,44 @@ vars: rootVars
     }, [colorScheme, attribute]);
+    React.useEffect(function () {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      var priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return function () {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(function () {
+      var timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        var css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (function () {
+          return window.getComputedStyle(document.body);
+        })();
+
+        timer = setTimeout(function () {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return function () {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(function () {
+      hasMounted.current = true;
+    }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
@@ -186,3 +241,3 @@ value: {
     /**
-     * Your component tree.
+     * The component tree.
      */
@@ -207,3 +262,3 @@ children: PropTypes.node,
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
@@ -210,0 +265,0 @@ prefix: PropTypes.string,

legacy/cssVars/cssVarsParser.js

@@ -78,3 +78,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     })) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
@@ -81,0 +81,0 @@ }

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.2.1
+/** @license MUI v5.2.2
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/cssVars/createCssVarsProvider.js

@@ -5,3 +5,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"];
+      _excluded2 = ["colorSchemes"],
+      _excluded3 = ["components"];
 import * as React from 'react';
@@ -17,2 +18,3 @@ import PropTypes from 'prop-types';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
@@ -23,2 +25,4 @@ const {
     defaultColorScheme: designSystemColorScheme,
+    disableTransitionOnChange = false,
+    enableColorScheme = true,
     prefix: designSystemPrefix = '',
@@ -63,3 +67,10 @@ shouldSkipGeneratingVar
 
-    let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+
+    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+        {
+      components = {}
+    } = _deepmerge,
+        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
+
     const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
@@ -72,2 +83,3 @@ const allColorSchemes = Object.keys(colorSchemes);
       setMode,
+      systemMode,
       lightColorScheme,
@@ -108,2 +120,3 @@ darkColorScheme,
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      components,
       colorSchemes,
@@ -147,2 +160,42 @@ vars: rootVars
     }, [colorScheme, attribute]);
+    React.useEffect(() => {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return () => {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(() => {
+      let timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        const css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (() => window.getComputedStyle(document.body))();
+
+        timer = setTimeout(() => {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(() => {
+      hasMounted.current = true;
+    }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
@@ -178,3 +231,3 @@ value: {
     /**
-     * Your component tree.
+     * The component tree.
      */
@@ -199,3 +252,3 @@ children: PropTypes.node,
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
@@ -202,0 +255,0 @@ prefix: PropTypes.string,

modern/cssVars/cssVarsParser.js

@@ -67,3 +67,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
@@ -70,0 +70,0 @@ }

modern/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.2.1
+/** @license MUI v5.2.2
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

package.json

 {
   "name": "@mui/system",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "private": false,
@@ -47,6 +47,6 @@ "author": "MUI Team",
     "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.2.1",
+    "@mui/private-theming": "^5.2.2",
     "@mui/styled-engine": "^5.2.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.1",
+    "@mui/utils": "^5.2.2",
     "clsx": "^1.1.1",
@@ -53,0 +53,0 @@ "csstype": "^3.0.10",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

759607

increased by1.58%

Lines of code

11095

increased by1.74%

Dependency changes

• Updated@mui/private-theming@^5.2.2

• Updated@mui/utils@^5.2.2