@chakra-ui/color-mode - npm Package Compare versions

Comparing version 1.0.0-rc.4 to 1.0.0-rc.5

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# 1.0.0-rc.5 (2020-09-27)
+
+**Note:** Version bump only for package @chakra-ui/color-mode
+
+
+
+
+
 # 1.0.0-rc.4 (2020-09-25)
@@ -8,0 +16,0 @@

dist/cjs/color-mode-provider.js

@@ -46,2 +46,6 @@ "use strict";
 
+var setRootProperty = function setRootProperty(mode) {
+  var root = document.documentElement;
+  root.style.setProperty("--chakra-ui-color-mode", mode);
+};
 /**
@@ -51,6 +55,10 @@ * Provides context for the color mode based on config in `theme`
  */
+
+
 function ColorModeProvider(props) {
   var value = props.value,
       children = props.children,
-      useSystemColorMode = props.useSystemColorMode,
+      _props$options = props.options,
+      useSystemColorMode = _props$options.useSystemColorMode,
+      initialColorMode = _props$options.initialColorMode,
       _props$colorModeManag = props.colorModeManager,
@@ -61,7 +69,9 @@ colorModeManager = _props$colorModeManag === void 0 ? _storageManager.localStorageManager : _props$colorModeManag;
     /**
-     * Only attempt to retrieve if we're on the server. else this will
-     * result in a hydration mismatch warning and result in partially invalid visuals
+     * Only attempt to retrieve if we're on the server. Else this will result
+     * in a hydration mismatch warning and partially invalid visuals
      */
-    var stored = colorModeManager.type === "cookie" ? colorModeManager.get() : undefined;
-    if (stored) return stored;
+    if (colorModeManager.type === "cookie") {
+      // use `initialColorMode` here to be theme-aware
+      return colorModeManager.get(initialColorMode);
+    }
 
@@ -71,4 +81,10 @@ if (_utils.isBrowser && useSystemColorMode) {
     }
+    /**
+     * fallback safely to:
+     * - custom theme.config.initialColorMode
+     * - undefined, will be taken care of in useEffect
+     */
 
-    return undefined;
+
+    return initialColorMode;
   }),
@@ -81,3 +97,3 @@ colorMode = _React$useState[0],
      * Since we cannot initially retrieve localStorage to due above mentioned
-     * reasons, do so after hydration
+     * reasons, do so after hydration.
      */
@@ -88,12 +104,11 @@ if (colorModeManager.type === "localStorage") {
       rawSetColorMode(mode);
-    } // omitted to prevent infinite render
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
+    }
+  }, [colorModeManager.type]);
   React.useEffect(function () {
-    (0, _colorMode.syncBodyClassName)(colorMode === "dark");
+    var isDark = colorMode === "dark";
+    (0, _colorMode.syncBodyClassName)(isDark);
+    setRootProperty(isDark ? "dark" : "light");
   }, [colorMode]);
   var setColorMode = React.useCallback(function (value) {
-    var root = document.documentElement;
-    root.style.setProperty("--chakra-ui-color-mode", value);
+    setRootProperty(value);
     colorModeManager.set(value);
@@ -100,0 +115,0 @@ rawSetColorMode(value);

dist/cjs/color-mode-script.js

@@ -43,6 +43,6 @@ "use strict";
 var ColorModeScript = function ColorModeScript(props) {
-  var _props$defaultColorMo = props.defaultColorMode,
-      defaultColorMode = _props$defaultColorMo === void 0 ? "light" : _props$defaultColorMo;
+  var _props$initialColorMo = props.initialColorMode,
+      initialColorMode = _props$initialColorMo === void 0 ? "light" : _props$initialColorMo;
 
-  var __html = "(" + String(setScript) + ")(\"" + defaultColorMode + "\")";
+  var __html = "(" + String(setScript) + ")('" + initialColorMode + "')";
 
@@ -49,0 +49,0 @@ return /*#__PURE__*/React.createElement("script", {

dist/cjs/color-mode.utils.js

@@ -79,7 +79,7 @@ "use strict";
   listener();
-  mediaQueryList.addEventListener("change", listener);
+  mediaQueryList.addListener(listener);
   return function () {
-    mediaQueryList.removeEventListener("change", listener);
+    mediaQueryList.removeListener(listener);
   };
 }
 //# sourceMappingURL=color-mode.utils.js.map

dist/esm/color-mode-provider.js

@@ -28,2 +28,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+var setRootProperty = mode => {
+  var root = document.documentElement;
+  root.style.setProperty("--chakra-ui-color-mode", mode);
+};
 /**
@@ -33,2 +37,4 @@ * Provides context for the color mode based on config in `theme`
  */
+
+
 export function ColorModeProvider(props) {
@@ -38,3 +44,6 @@ var {
     children,
-    useSystemColorMode,
+    options: {
+      useSystemColorMode,
+      initialColorMode
+    },
     colorModeManager = localStorageManager
@@ -44,7 +53,9 @@ } = props;
     /**
-     * Only attempt to retrieve if we're on the server. else this will
-     * result in a hydration mismatch warning and result in partially invalid visuals
+     * Only attempt to retrieve if we're on the server. Else this will result
+     * in a hydration mismatch warning and partially invalid visuals
      */
-    var stored = colorModeManager.type === "cookie" ? colorModeManager.get() : undefined;
-    if (stored) return stored;
+    if (colorModeManager.type === "cookie") {
+      // use `initialColorMode` here to be theme-aware
+      return colorModeManager.get(initialColorMode);
+    }
 
@@ -54,4 +65,10 @@ if (isBrowser && useSystemColorMode) {
     }
+    /**
+     * fallback safely to:
+     * - custom theme.config.initialColorMode
+     * - undefined, will be taken care of in useEffect
+     */
 
-    return undefined;
+
+    return initialColorMode;
   });
@@ -61,3 +78,3 @@ React.useEffect(() => {
      * Since we cannot initially retrieve localStorage to due above mentioned
-     * reasons, do so after hydration
+     * reasons, do so after hydration.
      */
@@ -68,12 +85,11 @@ if (colorModeManager.type === "localStorage") {
       rawSetColorMode(mode);
-    } // omitted to prevent infinite render
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
+    }
+  }, [colorModeManager.type]);
   React.useEffect(() => {
-    syncBodyClassName(colorMode === "dark");
+    var isDark = colorMode === "dark";
+    syncBodyClassName(isDark);
+    setRootProperty(isDark ? "dark" : "light");
   }, [colorMode]);
   var setColorMode = React.useCallback(value => {
-    var root = document.documentElement;
-    root.style.setProperty("--chakra-ui-color-mode", value);
+    setRootProperty(value);
     colorModeManager.set(value);
@@ -80,0 +96,0 @@ rawSetColorMode(value);

dist/esm/color-mode-script.js

@@ -35,6 +35,6 @@ import * as React from "react";
   var {
-    defaultColorMode = "light"
+    initialColorMode = "light"
   } = props;
 
-  var __html = "(" + String(setScript) + ")(\"" + defaultColorMode + "\")";
+  var __html = "(" + String(setScript) + ")('" + initialColorMode + "')";
 
@@ -41,0 +41,0 @@ return /*#__PURE__*/React.createElement("script", {

dist/esm/color-mode.utils.js

@@ -62,7 +62,7 @@ import { isBrowser, noop } from "@chakra-ui/utils";
   listener();
-  mediaQueryList.addEventListener("change", listener);
+  mediaQueryList.addListener(listener);
   return () => {
-    mediaQueryList.removeEventListener("change", listener);
+    mediaQueryList.removeListener(listener);
   };
 }
 //# sourceMappingURL=color-mode.utils.js.map

dist/types/color-mode-provider.d.ts

@@ -23,3 +23,3 @@ import * as React from "react";
     children?: React.ReactNode;
-    useSystemColorMode?: boolean;
+    options: ColorModeOptions;
     colorModeManager?: StorageManager;
@@ -26,0 +26,0 @@ }

dist/types/color-mode-script.d.ts

 /// <reference types="react" />
 import { ColorMode } from "./color-mode-provider";
+declare type Mode = ColorMode | "system" | undefined;
 interface ColorModeScriptProps {
-    defaultColorMode?: ColorMode;
+    initialColorMode?: Mode;
 }
@@ -6,0 +7,0 @@ /**

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.5",
   "description": "React component and hooks for handling light and dark mode.",
@@ -54,4 +54,4 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "1.0.0-rc.4",
-    "@chakra-ui/utils": "1.0.0-rc.4"
+    "@chakra-ui/hooks": "1.0.0-rc.5",
+    "@chakra-ui/utils": "1.0.0-rc.5"
   },
@@ -61,3 +61,3 @@ "peerDependencies": {
   },
-  "gitHead": "830b8587c572a4c20d6b56b256accd6686255819"
+  "gitHead": "b5c8482b778b19f27ea1d6c8ab6d5ed39c664afa"
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72080

increased by2.34%

Lines of code

724

increased by4.02%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@chakra-ui/hooks@1.0.0-rc.5(transitive)

• + Added@chakra-ui/utils@1.0.0-rc.5(transitive)

• - Removed@chakra-ui/hooks@1.0.0-rc.4(transitive)

• - Removed@chakra-ui/utils@1.0.0-rc.4(transitive)

• Updated@chakra-ui/hooks@1.0.0-rc.5

• Updated@chakra-ui/utils@1.0.0-rc.5