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

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

CHANGELOG.md

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

dist/cjs/color-mode-provider.js

@@ -46,6 +46,2 @@ "use strict";
 
-var setRootProperty = function setRootProperty(mode) {
-  var root = document.documentElement;
-  root.style.setProperty("--chakra-ui-color-mode", mode);
-};
 /**
@@ -55,4 +51,2 @@ * Provides context for the color mode based on config in `theme`
  */
-
-
 function ColorModeProvider(props) {
@@ -66,25 +60,10 @@ var value = props.value,
       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 partially invalid visuals.
+   *
+   * Else fallback safely to `theme.config.initialColormode` (default light)
+   */
 
-  var _React$useState = React.useState(function () {
-    /**
-     * Only attempt to retrieve if we're on the server. Else this will result
-     * in a hydration mismatch warning and partially invalid visuals
-     */
-    if (colorModeManager.type === "cookie") {
-      // use `initialColorMode` here to be theme-aware
-      return colorModeManager.get(initialColorMode);
-    }
-
-    if (_utils.isBrowser && useSystemColorMode) {
-      return (0, _colorMode.getColorScheme)();
-    }
-    /**
-     * fallback safely to:
-     * - custom theme.config.initialColorMode
-     * - undefined, will be taken care of in useEffect
-     */
-
-
-    return initialColorMode;
-  }),
+  var _React$useState = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(initialColorMode) : initialColorMode),
       colorMode = _React$useState[0],
@@ -97,16 +76,23 @@ rawSetColorMode = _React$useState[1];
      * reasons, do so after hydration.
+     *
+     * Priority:
+     * - system color mode
+     * - defined value on <ColorModeScript />, if present
+     * - previously stored value
      */
-    if (colorModeManager.type === "localStorage") {
-      var root = document.documentElement;
-      var mode = root.style.getPropertyValue("--chakra-ui-color-mode");
-      rawSetColorMode(mode);
+    if (_utils.isBrowser && colorModeManager.type === "localStorage") {
+      var mode = useSystemColorMode ? (0, _colorMode.getColorScheme)(initialColorMode) : _colorMode.root.get() || colorModeManager.get();
+
+      if (mode) {
+        rawSetColorMode(mode);
+      }
     }
-  }, [colorModeManager.type]);
+  }, [colorModeManager, useSystemColorMode, initialColorMode]);
   React.useEffect(function () {
     var isDark = colorMode === "dark";
     (0, _colorMode.syncBodyClassName)(isDark);
-    setRootProperty(isDark ? "dark" : "light");
+
+    _colorMode.root.set(isDark ? "dark" : "light");
   }, [colorMode]);
   var setColorMode = React.useCallback(function (value) {
-    setRootProperty(value);
     colorModeManager.set(value);
@@ -119,5 +105,13 @@ rawSetColorMode(value);
   React.useEffect(function () {
+    var removeListener;
+
     if (useSystemColorMode) {
-      return (0, _colorMode.addListener)(setColorMode);
+      removeListener = (0, _colorMode.addListener)(setColorMode);
     }
+
+    return function () {
+      if (removeListener && useSystemColorMode) {
+        removeListener();
+      }
+    };
   }, [setColorMode, useSystemColorMode]); // presence of `value` indicates a controlled context
@@ -124,0 +118,0 @@

dist/cjs/color-mode-script.js

@@ -45,8 +45,6 @@ "use strict";
       initialColorMode = _props$initialColorMo === void 0 ? "light" : _props$initialColorMo;
-
-  var __html = "(" + String(setScript) + ")('" + initialColorMode + "')";
-
+  var html = "(" + String(setScript) + ")('" + initialColorMode + "')";
   return /*#__PURE__*/React.createElement("script", {
     dangerouslySetInnerHTML: {
-      __html: __html
+      __html: html
     }
@@ -53,0 +51,0 @@ });

dist/cjs/color-mode.utils.js

@@ -7,3 +7,3 @@ "use strict";
 exports.addListener = addListener;
-exports.darkQuery = exports.lightQuery = exports.queries = exports.body = void 0;
+exports.root = exports.darkQuery = exports.lightQuery = exports.queries = void 0;
 
@@ -26,3 +26,6 @@ var _utils = require("@chakra-ui/utils");
 };
-var body = _utils.isBrowser ? document.body : mockBody;
+
+var getBody = function getBody() {
+  return _utils.isBrowser ? document.body : mockBody;
+};
 /**
@@ -32,5 +35,5 @@ * Function to add/remove class from `body` based on color mode
 
-exports.body = body;
 
 function syncBodyClassName(isDark) {
+  var body = getBody();
   body.classList.add(isDark ? classNames.dark : classNames.light);
@@ -46,4 +49,8 @@ body.classList.remove(isDark ? classNames.light : classNames.dark);
   var mediaQueryList = window.matchMedia == null ? void 0 : window.matchMedia(query);
-  var matches = !!mediaQueryList.media === mediaQueryList.matches;
-  return matches;
+
+  if (!mediaQueryList) {
+    return undefined;
+  }
+
+  return !!mediaQueryList.media === mediaQueryList.matches;
 }
@@ -61,4 +68,6 @@
 
-function getColorScheme() {
-  var isDark = getMediaQuery(queries.dark);
+function getColorScheme(fallback) {
+  var _getMediaQuery;
+
+  var isDark = (_getMediaQuery = getMediaQuery(queries.dark)) != null ? _getMediaQuery : fallback === "dark";
   return isDark ? "dark" : "light";
@@ -80,3 +89,3 @@ }
   var listener = function listener() {
-    fn(!!mediaQueryList.matches ? "dark" : "light");
+    fn(mediaQueryList.matches ? "dark" : "light");
   };
@@ -90,2 +99,14 @@
 }
+
+var root = {
+  get: function get() {
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+  },
+  set: function set(mode) {
+    if (_utils.isBrowser) {
+      document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+    }
+  }
+};
+exports.root = root;
 //# sourceMappingURL=color-mode.utils.js.map

dist/cjs/index.js

@@ -9,2 +9,3 @@ "use strict";
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorModeProvider[key]) return;
   exports[key] = _colorModeProvider[key];
@@ -17,2 +18,3 @@ });
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _storageManager[key]) return;
   exports[key] = _storageManager[key];
@@ -25,4 +27,5 @@ });
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorModeScript[key]) return;
   exports[key] = _colorModeScript[key];
 });
 //# sourceMappingURL=index.js.map

dist/esm/color-mode-provider.js

@@ -5,3 +5,3 @@ 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); }
 import * as React from "react";
-import { addListener, ColorMode, getColorScheme, syncBodyClassName } from "./color-mode.utils";
+import { addListener, getColorScheme, syncBodyClassName, root } from "./color-mode.utils";
 import { localStorageManager } from "./storage-manager";
@@ -29,6 +29,2 @@ export var ColorModeContext = /*#__PURE__*/React.createContext({});
 
-var setRootProperty = mode => {
-  var root = document.documentElement;
-  root.style.setProperty("--chakra-ui-color-mode", mode);
-};
 /**
@@ -38,4 +34,2 @@ * Provides context for the color mode based on config in `theme`
  */
-
-
 export function ColorModeProvider(props) {
@@ -51,24 +45,10 @@ var {
   } = props;
-  var [colorMode, rawSetColorMode] = React.useState(() => {
-    /**
-     * Only attempt to retrieve if we're on the server. Else this will result
-     * in a hydration mismatch warning and partially invalid visuals
-     */
-    if (colorModeManager.type === "cookie") {
-      // use `initialColorMode` here to be theme-aware
-      return colorModeManager.get(initialColorMode);
-    }
+  /**
+   * Only attempt to retrieve if we're on the server. Else this will result
+   * in a hydration mismatch warning and partially invalid visuals.
+   *
+   * Else fallback safely to `theme.config.initialColormode` (default light)
+   */
 
-    if (isBrowser && useSystemColorMode) {
-      return getColorScheme();
-    }
-    /**
-     * fallback safely to:
-     * - custom theme.config.initialColorMode
-     * - undefined, will be taken care of in useEffect
-     */
-
-
-    return initialColorMode;
-  });
+  var [colorMode, rawSetColorMode] = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(initialColorMode) : initialColorMode);
   React.useEffect(() => {
@@ -78,16 +58,22 @@ /**
      * reasons, do so after hydration.
+     *
+     * Priority:
+     * - system color mode
+     * - defined value on <ColorModeScript />, if present
+     * - previously stored value
      */
-    if (colorModeManager.type === "localStorage") {
-      var root = document.documentElement;
-      var mode = root.style.getPropertyValue("--chakra-ui-color-mode");
-      rawSetColorMode(mode);
+    if (isBrowser && colorModeManager.type === "localStorage") {
+      var mode = useSystemColorMode ? getColorScheme(initialColorMode) : root.get() || colorModeManager.get();
+
+      if (mode) {
+        rawSetColorMode(mode);
+      }
     }
-  }, [colorModeManager.type]);
+  }, [colorModeManager, useSystemColorMode, initialColorMode]);
   React.useEffect(() => {
     var isDark = colorMode === "dark";
     syncBodyClassName(isDark);
-    setRootProperty(isDark ? "dark" : "light");
+    root.set(isDark ? "dark" : "light");
   }, [colorMode]);
   var setColorMode = React.useCallback(value => {
-    setRootProperty(value);
     colorModeManager.set(value);
@@ -100,5 +86,13 @@ rawSetColorMode(value);
   React.useEffect(() => {
+    var removeListener;
+
     if (useSystemColorMode) {
-      return addListener(setColorMode);
+      removeListener = addListener(setColorMode);
     }
+
+    return () => {
+      if (removeListener && useSystemColorMode) {
+        removeListener();
+      }
+    };
   }, [setColorMode, useSystemColorMode]); // presence of `value` indicates a controlled context
@@ -105,0 +99,0 @@

dist/esm/color-mode-script.js

@@ -37,8 +37,6 @@ import * as React from "react";
   } = props;
-
-  var __html = "(" + String(setScript) + ")('" + initialColorMode + "')";
-
+  var html = "(" + String(setScript) + ")('" + initialColorMode + "')";
   return /*#__PURE__*/React.createElement("script", {
     dangerouslySetInnerHTML: {
-      __html
+      __html: html
     }
@@ -45,0 +43,0 @@ });

dist/esm/color-mode.utils.js

@@ -16,3 +16,6 @@ import { isBrowser, noop } from "@chakra-ui/utils";
 };
-export var body = isBrowser ? document.body : mockBody;
+
+var getBody = () => {
+  return isBrowser ? document.body : mockBody;
+};
 /**
@@ -22,3 +25,5 @@ * Function to add/remove class from `body` based on color mode
 
+
 export function syncBodyClassName(isDark) {
+  var body = getBody();
   body.classList.add(isDark ? classNames.dark : classNames.light);
@@ -33,4 +38,8 @@ body.classList.remove(isDark ? classNames.light : classNames.dark);
   var mediaQueryList = window.matchMedia == null ? void 0 : window.matchMedia(query);
-  var matches = !!mediaQueryList.media === mediaQueryList.matches;
-  return matches;
+
+  if (!mediaQueryList) {
+    return undefined;
+  }
+
+  return !!mediaQueryList.media === mediaQueryList.matches;
 }
@@ -44,4 +53,6 @@
 export var darkQuery = queries.dark;
-export function getColorScheme() {
-  var isDark = getMediaQuery(queries.dark);
+export function getColorScheme(fallback) {
+  var _getMediaQuery;
+
+  var isDark = (_getMediaQuery = getMediaQuery(queries.dark)) != null ? _getMediaQuery : fallback === "dark";
   return isDark ? "dark" : "light";
@@ -62,3 +73,3 @@ }
   var listener = () => {
-    fn(!!mediaQueryList.matches ? "dark" : "light");
+    fn(mediaQueryList.matches ? "dark" : "light");
   };
@@ -72,2 +83,10 @@
 }
+export var root = {
+  get: () => document.documentElement.style.getPropertyValue("--chakra-ui-color-mode"),
+  set: mode => {
+    if (isBrowser) {
+      document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+    }
+  }
+};
 //# sourceMappingURL=color-mode.utils.js.map

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

 export declare type ColorMode = "light" | "dark";
-export declare const body: {
-    classList: {
-        add: () => void;
-        remove: () => void;
-    };
-} | HTMLElement;
 /**
@@ -18,3 +12,3 @@ * Function to add/remove class from `body` based on color mode
 export declare const darkQuery: string;
-export declare function getColorScheme(): "dark" | "light";
+export declare function getColorScheme(fallback?: ColorMode): "light" | "dark";
 /**
@@ -25,1 +19,5 @@ * Adds system os color mode listener, and run the callback
 export declare function addListener(fn: Function): () => void;
+export declare const root: {
+    get: () => ColorMode;
+    set: (mode: ColorMode) => void;
+};

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.6",
   "description": "React component and hooks for handling light and dark mode.",
@@ -26,2 +26,8 @@ "keywords": [
   "typings": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
   "files": [
@@ -55,9 +61,9 @@ "dist"
   "dependencies": {
-    "@chakra-ui/hooks": "1.0.0-rc.5",
-    "@chakra-ui/utils": "1.0.0-rc.5"
+    "@chakra-ui/hooks": "1.0.0-rc.6",
+    "@chakra-ui/utils": "1.0.0-rc.6"
   },
   "peerDependencies": {
-    "react": "16.x"
+    "react": "16.x || 17.x"
   },
-  "gitHead": "b5c8482b778b19f27ea1d6c8ab6d5ed39c664afa"
+  "gitHead": "e55b45840d1edc821ad0bb45632535333be5bb86"
 }

No alert changes

Improved metrics

Total package byte prevSize

74886

increased by3.89%

Lines of code

745

increased by2.9%

Dependency changes

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

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

• + Addedreact@17.0.2(transitive)

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

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

• - Removed@types/lodash.merge@4.6.6(transitive)

• - Removedlodash.merge@4.6.2(transitive)

• - Removedmemoize-one@5.1.1(transitive)

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

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