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

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

CHANGELOG.md

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

dist/cjs/color-mode-provider.js

 "use strict";
 
 exports.__esModule = true;
+exports.ColorModeProvider = ColorModeProvider;
 exports.useColorModeValue = useColorModeValue;
-exports.LightMode = exports.DarkMode = exports.ColorModeProvider = exports.useColorMode = exports.ColorModeContext = void 0;
+exports.LightMode = exports.DarkMode = exports.useColorMode = exports.ColorModeContext = void 0;
 
@@ -11,5 +12,5 @@ var _utils = require("@chakra-ui/utils");
 
-var _hooks = require("@chakra-ui/hooks");
+var _colorMode = require("./color-mode.utils");
 
-var _document;
+var _storageManager = require("./storage-manager");
 
@@ -20,2 +21,4 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+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 ColorModeContext = /*#__PURE__*/React.createContext({});
@@ -27,90 +30,99 @@ exports.ColorModeContext = ColorModeContext;
 }
+/**
+ * React hook that reads from `ColorModeProvider` context
+ * Returns the color mode and function to toggle it
+ */
 
-var classNames = {
-  light: "chakra-ui-light",
-  dark: "chakra-ui-dark"
-};
 
 var useColorMode = function useColorMode() {
-  return React.useContext(ColorModeContext);
-};
+  var context = React.useContext(ColorModeContext);
 
-exports.useColorMode = useColorMode;
-var ssrBody = {
-  classList: {
-    add: function add() {},
-    remove: function remove() {}
+  if (context === undefined) {
+    throw new Error("useColorMode must be used within a ColorModeProvider");
   }
+
+  return context;
 };
-var body = _utils.isBrowser ? (_document = document) == null ? void 0 : _document.body : ssrBody;
 
-var ColorModeProvider = function ColorModeProvider(props) {
-  var children = props.children;
+exports.useColorMode = useColorMode;
 
-  var _React$useState = React.useState(),
+/**
+ * Provides context for the color mode based on config in `theme`
+ * Returns the color mode and function to toggle the color mode
+ */
+function ColorModeProvider(props) {
+  var value = props.value,
+      children = props.children,
+      useSystemColorMode = props.useSystemColorMode,
+      _props$colorModeManag = props.colorModeManager,
+      colorModeManager = _props$colorModeManag === void 0 ? _storageManager.localStorageManager : _props$colorModeManag;
+
+  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 result in partially invalid visuals
+     */
+    var stored = colorModeManager.type === "cookie" ? colorModeManager.get() : undefined;
+    if (stored) return stored;
+
+    if (_utils.isBrowser && useSystemColorMode) {
+      return (0, _colorMode.getColorScheme)();
+    }
+
+    return undefined;
+  }),
       colorMode = _React$useState[0],
       rawSetColorMode = _React$useState[1];
 
-  (0, _hooks.useSafeLayoutEffect)(function () {
-    var root = document.documentElement;
-    var mode = root.style.getPropertyValue("--chakra-ui-color-mode");
-    rawSetColorMode(mode);
-  }, []);
-  (0, _hooks.useSafeLayoutEffect)(function () {
-    var dark = colorMode === "dark";
-    body.classList.add(dark ? classNames.dark : classNames.light);
-    body.classList.remove(dark ? classNames.light : classNames.dark);
-  }, [colorMode]);
-  var ctx = React.useMemo(function () {
-    var setColorMode = function setColorMode(mode) {
+  React.useEffect(function () {
+    /**
+     * Since we cannot initially retrieve localStorage to due above mentioned
+     * reasons, do so after hydration
+     */
+    if (colorModeManager.type === "localStorage") {
       var root = document.documentElement;
-      root.style.setProperty("--chakra-ui-color-mode", mode);
-      localStorage.setItem("chakra-ui-color-mode", mode);
+      var mode = root.style.getPropertyValue("--chakra-ui-color-mode");
       rawSetColorMode(mode);
-    };
+    } // omitted to prevent infinite render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    var toggleColorMode = function toggleColorMode() {
-      setColorMode(colorMode === "light" ? "dark" : "light");
-    };
-
-    return {
-      colorMode: colorMode,
-      setColorMode: setColorMode,
-      toggleColorMode: toggleColorMode
-    };
-  }, [colorMode, rawSetColorMode]);
-  var mounted = React.useRef(false);
+  }, []);
   React.useEffect(function () {
-    if (!window.hasOwnProperty("matchMedia")) return;
-    var mq = window.matchMedia("(prefers-color-scheme: dark)");
+    (0, _colorMode.syncBodyClassName)(colorMode === "dark");
+  }, [colorMode]);
+  var setColorMode = React.useCallback(function (value) {
+    var root = document.documentElement;
+    root.style.setProperty("--chakra-ui-color-mode", value);
+    colorModeManager.set(value);
+    rawSetColorMode(value);
+  }, [colorModeManager]);
+  var toggleColorMode = React.useCallback(function () {
+    setColorMode(colorMode === "light" ? "dark" : "light");
+  }, [colorMode, setColorMode]);
+  React.useEffect(function () {
+    if (useSystemColorMode) {
+      return (0, _colorMode.addListener)(setColorMode);
+    }
+  }, [setColorMode, useSystemColorMode]); // presence of `value` indicates a controlled context
 
-    var listener = function listener() {
-      if (mounted.current) {
-        ctx.setColorMode(!!mq.matches ? "dark" : "light");
-      }
-
-      mounted.current = true;
-    };
-
-    listener();
-    mq.addListener(listener);
-    return function () {
-      mq.removeListener(listener);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  var context = {
+    colorMode: value != null ? value : colorMode,
+    toggleColorMode: value ? _utils.noop : toggleColorMode,
+    setColorMode: value ? _utils.noop : setColorMode
+  };
   return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
-    value: ctx,
-    children: children
-  });
-};
+    value: context
+  }, children);
+}
 
-exports.ColorModeProvider = ColorModeProvider;
-
 if (_utils.__DEV__) {
   ColorModeProvider.displayName = "ColorModeProvider";
 }
+/**
+ * Locks the color mode to `dark`, without any way to change it.
+ */
 
-var DarkMode = function DarkMode(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+
+var DarkMode = function DarkMode(props) {
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
     value: {
@@ -120,5 +132,4 @@ colorMode: "dark",
       setColorMode: _utils.noop
-    },
-    children: children
-  });
+    }
+  }, props));
 };
@@ -131,6 +142,9 @@
 }
+/**
+ * Locks the color mode to `light` without any way to change it.
+ */
 
-var LightMode = function LightMode(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+
+var LightMode = function LightMode(props) {
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
     value: {
@@ -140,5 +154,4 @@ colorMode: "light",
       setColorMode: _utils.noop
-    },
-    children: children
-  });
+    }
+  }, props));
 };
@@ -169,4 +182,4 @@
 
-  return colorMode === "dark" ? dark : light;
+  return colorMode === "light" ? light : dark;
 }
 //# sourceMappingURL=color-mode-provider.js.map

dist/cjs/color-mode-script.js

@@ -12,3 +12,3 @@ "use strict";
 
-function setColorModeVar(initialValue) {
+function setScript(initialValue) {
   var mql = window.matchMedia("(prefers-color-scheme: dark)");
@@ -40,6 +40,4 @@ var systemPreference = mql.matches ? "dark" : "light";
 /**
- * Script to add to the root of your application to help prevent
- * flash of color mode that can happen during page load.
- *
- * This is particular useful for SSR in Gatsby or Next.js
+ * Script to add to the root of your application when using localStorage,
+ * to help prevent flash of color mode that can happen during page load.
  */
@@ -50,3 +48,3 @@ var ColorModeScript = function ColorModeScript(props) {
 
-  var __html = "(" + String(setColorModeVar) + ")(\"" + defaultColorMode + "\")";
+  var __html = "(" + String(setScript) + ")(\"" + defaultColorMode + "\")";
 
@@ -53,0 +51,0 @@ return /*#__PURE__*/React.createElement("script", {

dist/cjs/index.js

@@ -12,2 +12,9 @@ "use strict";
 
+var _storageManager = require("./storage-manager");
+
+Object.keys(_storageManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  exports[key] = _storageManager[key];
+});
+
 var _colorModeScript = require("./color-mode-script");
@@ -14,0 +21,0 @@

dist/esm/color-mode-provider.js

@@ -1,6 +0,7 @@
-var _document;
+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 { noop, __DEV__, isBrowser } from "@chakra-ui/utils";
+import { isBrowser, noop, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
-import { useSafeLayoutEffect } from "@chakra-ui/hooks";
+import { addListener, ColorMode, getColorScheme, syncBodyClassName } from "./color-mode.utils";
+import { localStorageManager } from "./storage-manager";
 export var ColorModeContext = /*#__PURE__*/React.createContext({});
@@ -11,72 +12,83 @@
 }
+/**
+ * React hook that reads from `ColorModeProvider` context
+ * Returns the color mode and function to toggle it
+ */
 
-var classNames = {
-  light: "chakra-ui-light",
-  dark: "chakra-ui-dark"
-};
-export var useColorMode = () => React.useContext(ColorModeContext);
-var ssrBody = {
-  classList: {
-    add: () => {},
-    remove: () => {}
+
+export var useColorMode = () => {
+  var context = React.useContext(ColorModeContext);
+
+  if (context === undefined) {
+    throw new Error("useColorMode must be used within a ColorModeProvider");
   }
+
+  return context;
 };
-var body = isBrowser ? (_document = document) == null ? void 0 : _document.body : ssrBody;
-export var ColorModeProvider = props => {
+
+/**
+ * Provides context for the color mode based on config in `theme`
+ * Returns the color mode and function to toggle the color mode
+ */
+export function ColorModeProvider(props) {
   var {
-    children
+    value,
+    children,
+    useSystemColorMode,
+    colorModeManager = localStorageManager
   } = props;
-  var [colorMode, rawSetColorMode] = React.useState();
-  useSafeLayoutEffect(() => {
-    var root = document.documentElement;
-    var mode = root.style.getPropertyValue("--chakra-ui-color-mode");
-    rawSetColorMode(mode);
-  }, []);
-  useSafeLayoutEffect(() => {
-    var dark = colorMode === "dark";
-    body.classList.add(dark ? classNames.dark : classNames.light);
-    body.classList.remove(dark ? classNames.light : classNames.dark);
-  }, [colorMode]);
-  var ctx = React.useMemo(() => {
-    var setColorMode = mode => {
+  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 result in partially invalid visuals
+     */
+    var stored = colorModeManager.type === "cookie" ? colorModeManager.get() : undefined;
+    if (stored) return stored;
+
+    if (isBrowser && useSystemColorMode) {
+      return getColorScheme();
+    }
+
+    return undefined;
+  });
+  React.useEffect(() => {
+    /**
+     * Since we cannot initially retrieve localStorage to due above mentioned
+     * reasons, do so after hydration
+     */
+    if (colorModeManager.type === "localStorage") {
       var root = document.documentElement;
-      root.style.setProperty("--chakra-ui-color-mode", mode);
-      localStorage.setItem("chakra-ui-color-mode", mode);
+      var mode = root.style.getPropertyValue("--chakra-ui-color-mode");
       rawSetColorMode(mode);
-    };
+    } // omitted to prevent infinite render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    var toggleColorMode = () => {
-      setColorMode(colorMode === "light" ? "dark" : "light");
-    };
-
-    return {
-      colorMode: colorMode,
-      setColorMode,
-      toggleColorMode
-    };
-  }, [colorMode, rawSetColorMode]);
-  var mounted = React.useRef(false);
+  }, []);
   React.useEffect(() => {
-    if (!window.hasOwnProperty("matchMedia")) return;
-    var mq = window.matchMedia("(prefers-color-scheme: dark)");
+    syncBodyClassName(colorMode === "dark");
+  }, [colorMode]);
+  var setColorMode = React.useCallback(value => {
+    var root = document.documentElement;
+    root.style.setProperty("--chakra-ui-color-mode", value);
+    colorModeManager.set(value);
+    rawSetColorMode(value);
+  }, [colorModeManager]);
+  var toggleColorMode = React.useCallback(() => {
+    setColorMode(colorMode === "light" ? "dark" : "light");
+  }, [colorMode, setColorMode]);
+  React.useEffect(() => {
+    if (useSystemColorMode) {
+      return addListener(setColorMode);
+    }
+  }, [setColorMode, useSystemColorMode]); // presence of `value` indicates a controlled context
 
-    var listener = () => {
-      if (mounted.current) {
-        ctx.setColorMode(!!mq.matches ? "dark" : "light");
-      }
-
-      mounted.current = true;
-    };
-
-    listener();
-    mq.addListener(listener);
-    return () => {
-      mq.removeListener(listener);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  var context = {
+    colorMode: value != null ? value : colorMode,
+    toggleColorMode: value ? noop : toggleColorMode,
+    setColorMode: value ? noop : setColorMode
+  };
   return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
-    value: ctx,
-    children: children
-  });
-};
+    value: context
+  }, children);
+}
 
@@ -86,35 +98,31 @@ if (__DEV__) {
 }
+/**
+ * Locks the color mode to `dark`, without any way to change it.
+ */
 
-export var DarkMode = (_ref) => {
-  var {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
-    value: {
-      colorMode: "dark",
-      toggleColorMode: noop,
-      setColorMode: noop
-    },
-    children: children
-  });
-};
 
+export var DarkMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
+  value: {
+    colorMode: "dark",
+    toggleColorMode: noop,
+    setColorMode: noop
+  }
+}, props));
+
 if (__DEV__) {
   DarkMode.displayName = "DarkMode";
 }
+/**
+ * Locks the color mode to `light` without any way to change it.
+ */
 
-export var LightMode = (_ref2) => {
-  var {
-    children
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
-    value: {
-      colorMode: "light",
-      toggleColorMode: noop,
-      setColorMode: noop
-    },
-    children: children
-  });
-};
 
+export var LightMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
+  value: {
+    colorMode: "light",
+    toggleColorMode: noop,
+    setColorMode: noop
+  }
+}, props));
+
 if (__DEV__) {
@@ -141,4 +149,4 @@ LightMode.displayName = "LightMode";
   } = useColorMode();
-  return colorMode === "dark" ? dark : light;
+  return colorMode === "light" ? light : dark;
 }
 //# sourceMappingURL=color-mode-provider.js.map

dist/esm/color-mode-script.js

 import * as React from "react";
 
-function setColorModeVar(initialValue) {
+function setScript(initialValue) {
   var mql = window.matchMedia("(prefers-color-scheme: dark)");
@@ -30,6 +30,4 @@ var systemPreference = mql.matches ? "dark" : "light";
 /**
- * Script to add to the root of your application to help prevent
- * flash of color mode that can happen during page load.
- *
- * This is particular useful for SSR in Gatsby or Next.js
+ * Script to add to the root of your application when using localStorage,
+ * to help prevent flash of color mode that can happen during page load.
  */
@@ -41,3 +39,3 @@ export var ColorModeScript = props => {
 
-  var __html = "(" + String(setColorModeVar) + ")(\"" + defaultColorMode + "\")";
+  var __html = "(" + String(setScript) + ")(\"" + defaultColorMode + "\")";
 
@@ -44,0 +42,0 @@ return /*#__PURE__*/React.createElement("script", {

dist/esm/index.js

 export * from "./color-mode-provider";
+export * from "./storage-manager";
 export * from "./color-mode-script";
 //# sourceMappingURL=index.js.map

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

 import * as React from "react";
-export declare type ColorMode = "light" | "dark";
-export declare const ColorModeContext: React.Context<ColorModeContextType>;
+import { ColorMode } from "./color-mode.utils";
+import { StorageManager } from "./storage-manager";
+export type { ColorMode };
+export interface ColorModeOptions {
+    initialColorMode?: ColorMode;
+    useSystemColorMode?: boolean;
+}
 interface ColorModeContextType {
     colorMode: ColorMode;
     toggleColorMode: () => void;
-    setColorMode: (value: ColorMode) => void;
+    setColorMode: (value: any) => void;
 }
+export declare const ColorModeContext: React.Context<ColorModeContextType>;
+/**
+ * React hook that reads from `ColorModeProvider` context
+ * Returns the color mode and function to toggle it
+ */
 export declare const useColorMode: () => ColorModeContextType;
-export declare const ColorModeProvider: React.FC;
+export interface ColorModeProviderProps {
+    value?: ColorMode;
+    children?: React.ReactNode;
+    useSystemColorMode?: boolean;
+    colorModeManager?: StorageManager;
+}
+/**
+ * Provides context for the color mode based on config in `theme`
+ * Returns the color mode and function to toggle the color mode
+ */
+export declare function ColorModeProvider(props: ColorModeProviderProps): JSX.Element;
+export declare namespace ColorModeProvider {
+    var displayName: string;
+}
+/**
+ * Locks the color mode to `dark`, without any way to change it.
+ */
 export declare const DarkMode: React.FC;
+/**
+ * Locks the color mode to `light` without any way to change it.
+ */
 export declare const LightMode: React.FC;
@@ -25,3 +54,2 @@ /**
  */
-export declare function useColorModeValue(light: any, dark: any): any;
-export {};
+export declare function useColorModeValue<TLight = unknown, TDark = unknown>(light: TLight, dark: TDark): TLight | TDark;

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

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { ColorMode } from "./color-mode-provider";
@@ -6,8 +7,6 @@ interface ColorModeScriptProps {
 /**
- * Script to add to the root of your application to help prevent
- * flash of color mode that can happen during page load.
- *
- * This is particular useful for SSR in Gatsby or Next.js
+ * Script to add to the root of your application when using localStorage,
+ * to help prevent flash of color mode that can happen during page load.
  */
 export declare const ColorModeScript: (props: ColorModeScriptProps) => JSX.Element;
 export {};

dist/types/index.d.ts

 export * from "./color-mode-provider";
+export * from "./storage-manager";
 export * from "./color-mode-script";

package.json

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

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

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

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

70431

increased by54.6%

Number of package files

29

increased by52.63%

Lines of code

696

increased by74.44%

Dependency changes

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

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

• + Added@types/lodash.mergewith@4.6.6(transitive)

• + Added@types/object-assign@4.0.30(transitive)

• + Addedlodash.mergewith@4.6.2(transitive)

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

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

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

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