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

Comparing version 1.0.0-next.2 to 1.0.0-next.3

CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# 1.0.0-next.2 (2020-06-22)
+# 1.0.0-next.3 (2020-06-28)
 
-
 ### Bug Fixes
 
-* [#891](https://github.com/chakra-ui/chakra-ui/issues/891) ([e107acc](https://github.com/chakra-ui/chakra-ui/commit/e107acc8487898a965b0d695c1da71f46fc56d5e))
-* case sensitivity issues in packages ([b423cd8](https://github.com/chakra-ui/chakra-ui/commit/b423cd88f0ede7e37b9a9eaec63cacfc1e9e5221))
-* ts issue with sx prop ([d3b1340](https://github.com/chakra-ui/chakra-ui/commit/d3b1340cb255937927b4d4c56ce218141570b951))
-* **color-mode:** sync value prop with state for controlled modes ([00881d4](https://github.com/chakra-ui/chakra-ui/commit/00881d4c592374e2015639acefdd7153cc5f872a))
+- [#891](https://github.com/chakra-ui/chakra-ui/issues/891)
+  ([e107acc](https://github.com/chakra-ui/chakra-ui/commit/e107acc8487898a965b0d695c1da71f46fc56d5e))
+- case sensitivity issues in packages
+  ([b423cd8](https://github.com/chakra-ui/chakra-ui/commit/b423cd88f0ede7e37b9a9eaec63cacfc1e9e5221))
+- ts issue with sx prop
+  ([d3b1340](https://github.com/chakra-ui/chakra-ui/commit/d3b1340cb255937927b4d4c56ce218141570b951))
+- **color-mode:** sync value prop with state for controlled modes
+  ([00881d4](https://github.com/chakra-ui/chakra-ui/commit/00881d4c592374e2015639acefdd7153cc5f872a))
 
+### Reverts
 
+- color mode script till we figure out a better soln
+  ([26f821f](https://github.com/chakra-ui/chakra-ui/commit/26f821f4ff2565f7edcf5f809b799b9b97c1effb))
 
-
-
 # Change Log
@@ -25,3 +29,3 @@
 
-# 1.0.0-next.1 (2020-06-21)
+# 1.0.0-next.2 (2020-06-21)
 
@@ -28,0 +32,0 @@ ### Bug Fixes

dist/cjs/color-mode.js

 "use strict";
 
 exports.__esModule = true;
+exports.useColorMode = useColorMode;
+exports.ColorModeProvider = ColorModeProvider;
 exports.getColorModeValue = getColorModeValue;
 exports.useColorModeValue = useColorModeValue;
-exports.LightMode = exports.DarkMode = exports.ColorModeProvider = exports.useColorMode = exports.ColorModeContext = void 0;
+exports.LightMode = exports.DarkMode = exports.ColorModeContext = void 0;
 
-var _core = require("@emotion/core");
-
 var _utils = require("@chakra-ui/utils");
@@ -24,3 +24,6 @@
 
-var ColorModeContext = /*#__PURE__*/React.createContext(["light", _utils.noop]);
+var ColorModeContext = /*#__PURE__*/React.createContext({
+  colorMode: "light",
+  toggleColorMode: _utils.noop
+});
 exports.ColorModeContext = ColorModeContext;
@@ -37,8 +40,6 @@
 
-var useColorMode = function useColorMode() {
+function useColorMode() {
   return React.useContext(ColorModeContext);
-};
+}
 
-exports.useColorMode = useColorMode;
-
 /**
@@ -48,11 +49,13 @@ * Provides context for the color mode based on config in `theme`
  */
-var ColorModeProvider = function ColorModeProvider(props) {
-  var _theme$config;
-
-  var theme = React.useContext(_core.ThemeContext);
-  var fallbackConfig = {
-    useSystemColorMode: false,
-    initialColorMode: "light"
+function ColorModeProvider(props) {
+  var value = props.value,
+      children = props.children,
+      _props$useSystemColor = props.useSystemColorMode,
+      useSystemColorMode = _props$useSystemColor === void 0 ? false : _props$useSystemColor,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? "light" : _props$defaultValue;
+  var config = {
+    useSystemColorMode: useSystemColorMode,
+    initialColorMode: defaultValue
   };
-  var config = (0, _utils.merge)(fallbackConfig, (_theme$config = theme.config) != null ? _theme$config : {});
 
@@ -63,14 +66,19 @@ var _useColorModeState = (0, _useColorModeState2["default"])(config),
 
-  var toggle = function toggle() {
+  var toggleColorMode = function toggleColorMode() {
     return setColorMode(colorMode === "light" ? "dark" : "light");
   };
 
-  var context = [colorMode, toggle];
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-    value: context
-  }, props));
-};
+  var context = {
+    colorMode: colorMode,
+    toggleColorMode: toggleColorMode
+  };
+  var controlledContext = {
+    colorMode: value,
+    toggleColorMode: _utils.noop
+  };
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: value ? controlledContext : context
+  }, children);
+}
 
-exports.ColorModeProvider = ColorModeProvider;
-
 if (_utils.__DEV__) {
@@ -86,3 +94,6 @@ ColorModeProvider.displayName = "ColorModeProvider";
   return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-    value: ["dark", _utils.noop]
+    value: {
+      colorMode: "dark",
+      toggleColorMode: _utils.noop
+    }
   }, props));
@@ -103,3 +114,6 @@ };
   return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-    value: ["light", _utils.noop]
+    value: {
+      colorMode: "light",
+      toggleColorMode: _utils.noop
+    }
   }, props));
@@ -142,3 +156,3 @@ };
   var _useColorMode = useColorMode(),
-      colorMode = _useColorMode[0];
+      colorMode = _useColorMode.colorMode;
 
@@ -145,0 +159,0 @@ return getColorModeValue(light, dark)(colorMode);

dist/cjs/color-mode.utils.js

@@ -7,3 +7,3 @@ "use strict";
 exports.addListener = addListener;
-exports.darkQuery = exports.lightQuery = exports.body = exports.storage = exports.classNameDark = exports.classNameLight = exports.storageKey = void 0;
+exports.darkQuery = exports.lightQuery = exports.queries = exports.body = exports.storage = exports.storageKey = void 0;
 
@@ -15,6 +15,6 @@ var _utils = require("@chakra-ui/utils");
 exports.storageKey = storageKey;
-var classNameLight = "chakra-ui-light";
-exports.classNameLight = classNameLight;
-var classNameDark = "chakra-ui-dark";
-exports.classNameDark = classNameDark;
+var classNames = {
+  light: "chakra-ui-light",
+  dark: "chakra-ui-dark"
+};
 
@@ -26,5 +26,4 @@ /**
   get: function get(init) {
-    var _isStorageSupported = isStorageSupported && !!window.localStorage.getItem(storageKey);
-
-    var value = _isStorageSupported ? window.localStorage.getItem(storageKey) : init;
+    var exist = isStorageSupported && !!window.localStorage.getItem(storageKey);
+    var value = exist ? window.localStorage.getItem(storageKey) : init;
     return value;
@@ -52,3 +51,2 @@ },
  * Function to add/remove class from `body` based on color mode
- * @param isDark whether color mode is `dark`
  */
@@ -59,4 +57,4 @@
 function syncBodyClassName(isDark) {
-  body.classList.add(isDark ? classNameDark : classNameLight);
-  body.classList.remove(isDark ? classNameLight : classNameDark);
+  body.classList.add(isDark ? classNames.dark : classNames.light);
+  body.classList.remove(isDark ? classNames.light : classNames.dark);
 }
@@ -74,2 +72,7 @@ /**
 
+var queries = {
+  light: "(prefers-color-scheme: light)",
+  dark: "(prefers-color-scheme: dark)"
+};
+exports.queries = queries;
 var lightQuery = "(prefers-color-scheme: light)";
@@ -81,7 +84,4 @@ exports.lightQuery = lightQuery;
 function getColorScheme() {
-  var isDark = getMediaQuery(darkQuery);
-  if (isDark) return "dark";
-  var isLight = getMediaQuery(lightQuery);
-  if (isLight) return "light";
-  return "light";
+  var isDark = getMediaQuery(queries.dark);
+  return isDark ? "dark" : "light";
 }
@@ -91,8 +91,6 @@ /**
  * once preference changes
- *
- * @param callback function to run
  */
 
 
-function addListener(callback) {
+function addListener(fn) {
   if (!window.hasOwnProperty("matchMedia")) {
@@ -102,6 +100,6 @@ return undefined;
 
-  var mediaQueryList = window.matchMedia(darkQuery);
+  var mediaQueryList = window.matchMedia(queries.dark);
 
   var listener = function listener() {
-    callback(!!mediaQueryList.matches ? "dark" : "light");
+    fn(!!mediaQueryList.matches ? "dark" : "light");
   };
@@ -108,0 +106,0 @@

dist/esm/color-mode.js

 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 { ThemeContext } from "@emotion/core";
-import { merge, noop, __DEV__ } from "@chakra-ui/utils";
+import { noop, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
 import useColorModeState from "./use-color-mode-state";
-export var ColorModeContext = /*#__PURE__*/React.createContext(["light", noop]);
+export var ColorModeContext = /*#__PURE__*/React.createContext({
+  colorMode: "light",
+  toggleColorMode: noop
+});
 
@@ -18,3 +20,5 @@ if (__DEV__) {
 
-export var useColorMode = () => React.useContext(ColorModeContext);
+export function useColorMode() {
+  return React.useContext(ColorModeContext);
+}
 
@@ -25,20 +29,29 @@ /**
  */
-export var ColorModeProvider = props => {
-  var _theme$config;
-
-  var theme = React.useContext(ThemeContext);
-  var fallbackConfig = {
-    useSystemColorMode: false,
-    initialColorMode: "light"
+export function ColorModeProvider(props) {
+  var {
+    value,
+    children,
+    useSystemColorMode = false,
+    defaultValue = "light"
+  } = props;
+  var config = {
+    useSystemColorMode,
+    initialColorMode: defaultValue
   };
-  var config = merge(fallbackConfig, (_theme$config = theme.config) != null ? _theme$config : {});
   var [colorMode, setColorMode] = useColorModeState(config);
 
-  var toggle = () => setColorMode(colorMode === "light" ? "dark" : "light");
+  var toggleColorMode = () => setColorMode(colorMode === "light" ? "dark" : "light");
 
-  var context = [colorMode, toggle];
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-    value: context
-  }, props));
-};
+  var context = {
+    colorMode,
+    toggleColorMode
+  };
+  var controlledContext = {
+    colorMode: value,
+    toggleColorMode: noop
+  };
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: value ? controlledContext : context
+  }, children);
+}
 
@@ -54,3 +67,6 @@ if (__DEV__) {
 export var DarkMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-  value: ["dark", noop]
+  value: {
+    colorMode: "dark",
+    toggleColorMode: noop
+  }
 }, props));
@@ -67,3 +83,6 @@
 export var LightMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-  value: ["light", noop]
+  value: {
+    colorMode: "light",
+    toggleColorMode: noop
+  }
 }, props));
@@ -99,5 +118,7 @@
 export function useColorModeValue(light, dark) {
-  var [colorMode] = useColorMode();
+  var {
+    colorMode
+  } = useColorMode();
   return getColorModeValue(light, dark)(colorMode);
 }
 //# sourceMappingURL=color-mode.js.map

dist/esm/color-mode.utils.js

 import { isBrowser, noop } from "@chakra-ui/utils";
 var isStorageSupported = typeof Storage !== "undefined";
 export var storageKey = "chakra-ui-color-mode";
-export var classNameLight = "chakra-ui-light";
-export var classNameDark = "chakra-ui-dark";
+var classNames = {
+  light: "chakra-ui-light",
+  dark: "chakra-ui-dark"
+};
 
@@ -12,5 +14,4 @@ /**
   get(init) {
-    var _isStorageSupported = isStorageSupported && !!window.localStorage.getItem(storageKey);
-
-    var value = _isStorageSupported ? window.localStorage.getItem(storageKey) : init;
+    var exist = isStorageSupported && !!window.localStorage.getItem(storageKey);
+    var value = exist ? window.localStorage.getItem(storageKey) : init;
     return value;
@@ -39,8 +40,7 @@ },
  * Function to add/remove class from `body` based on color mode
- * @param isDark whether color mode is `dark`
  */
 
 export function syncBodyClassName(isDark) {
-  body.classList.add(isDark ? classNameDark : classNameLight);
-  body.classList.remove(isDark ? classNameLight : classNameDark);
+  body.classList.add(isDark ? classNames.dark : classNames.light);
+  body.classList.remove(isDark ? classNames.light : classNames.dark);
 }
@@ -57,10 +57,11 @@ /**
 
+export var queries = {
+  light: "(prefers-color-scheme: light)",
+  dark: "(prefers-color-scheme: dark)"
+};
 export var lightQuery = "(prefers-color-scheme: light)";
 export var darkQuery = "(prefers-color-scheme: dark)";
 export function getColorScheme() {
-  var isDark = getMediaQuery(darkQuery);
-  if (isDark) return "dark";
-  var isLight = getMediaQuery(lightQuery);
-  if (isLight) return "light";
-  return "light";
+  var isDark = getMediaQuery(queries.dark);
+  return isDark ? "dark" : "light";
 }
@@ -70,7 +71,5 @@ /**
  * once preference changes
- *
- * @param callback function to run
  */
 
-export function addListener(callback) {
+export function addListener(fn) {
   if (!window.hasOwnProperty("matchMedia")) {
@@ -80,6 +79,6 @@ return undefined;
 
-  var mediaQueryList = window.matchMedia(darkQuery);
+  var mediaQueryList = window.matchMedia(queries.dark);
 
   var listener = () => {
-    callback(!!mediaQueryList.matches ? "dark" : "light");
+    fn(!!mediaQueryList.matches ? "dark" : "light");
   };
@@ -86,0 +85,0 @@

dist/types/color-mode.d.ts

 import * as React from "react";
 import type { ColorMode } from "./color-mode.utils";
 export type { ColorMode };
-declare type ColorModeContext = [ColorMode, () => void];
-export declare const ColorModeContext: React.Context<ColorModeContext>;
+interface ColorModeContextType {
+    colorMode: ColorMode;
+    toggleColorMode: () => void;
+}
+export declare const ColorModeContext: React.Context<ColorModeContextType>;
 /**
@@ -10,6 +13,8 @@ * React hook that reads from `ColorModeProvider` context
  */
-export declare const useColorMode: () => ColorModeContext;
+export declare function useColorMode(): ColorModeContextType;
 export interface ColorModeProviderProps {
     value?: ColorMode;
     children?: React.ReactNode;
+    useSystemColorMode?: boolean;
+    defaultValue?: ColorMode;
 }
@@ -20,3 +25,6 @@ /**
  */
-export declare const ColorModeProvider: React.FC;
+export declare function ColorModeProvider(props: ColorModeProviderProps): JSX.Element;
+export declare namespace ColorModeProvider {
+    var displayName: string;
+}
 /**
@@ -23,0 +31,0 @@ * Locks the color mode to `dark`, without any way to change it.

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

 export declare const storageKey = "chakra-ui-color-mode";
-export declare const classNameLight = "chakra-ui-light";
-export declare const classNameDark = "chakra-ui-dark";
 export declare type ColorMode = "light" | "dark";
@@ -20,5 +18,8 @@ /**
  * Function to add/remove class from `body` based on color mode
- * @param isDark whether color mode is `dark`
  */
 export declare function syncBodyClassName(isDark: boolean): void;
+export declare const queries: {
+    light: string;
+    dark: string;
+};
 export declare const lightQuery = "(prefers-color-scheme: light)";
@@ -30,6 +31,4 @@ export declare const darkQuery = "(prefers-color-scheme: dark)";
  * once preference changes
- *
- * @param callback function to run
  */
-export declare function addListener(callback: Function): (() => void) | undefined;
+export declare function addListener(fn: Function): (() => void) | undefined;
 //# sourceMappingURL=color-mode.utils.d.ts.map

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.3",
   "description": "React component and hooks for handling light and dark mode.",
@@ -18,2 +18,3 @@ "keywords": [
   ],
+  "sideEffects": false,
   "author": "Segun Adebayo <[e-mail]>",
@@ -27,3 +28,4 @@ "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -55,10 +57,9 @@ "publishConfig": {
   "dependencies": {
-    "@chakra-ui/hooks": "^1.0.0-next.2",
-    "@chakra-ui/utils": "^1.0.0-next.2"
+    "@chakra-ui/hooks": "^1.0.0-next.3",
+    "@chakra-ui/utils": "^1.0.0-next.3"
   },
   "peerDependencies": {
-    "@emotion/core": "10.0.28",
     "react": "16.x"
   },
-  "gitHead": "c5b51e43e9dff400f8bba7da7ffd135f5d33628b"
+  "gitHead": "d31ba9c35993985f49da4885dd47ab8dab49cdd1"
 }

README.md

@@ -39,3 +39,3 @@ # Color Mode
 function Example() {
-  const [colorMode, toggleColorMode] = useColorMode()
+  const { colorMode, toggleColorMode } = useColorMode()
   return (
@@ -42,0 +42,0 @@ <header>

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

70951

increased by15.02%

Dependency count

3

decreased by-25%

Number of package files

39

increased by14.71%

Lines of code

952

increased by50.63%

Dependency changes

• + Added@types/lodash@4.17.10(transitive)

• - Removed@babel/code-frame@7.24.7(transitive)

• - Removed@babel/generator@7.25.6(transitive)

• - Removed@babel/helper-module-imports@7.24.7(transitive)

• - Removed@babel/helper-string-parser@7.24.8(transitive)

• - Removed@babel/helper-validator-identifier@7.24.7(transitive)

• - Removed@babel/highlight@7.24.7(transitive)

• - Removed@babel/parser@7.25.6(transitive)

• - Removed@babel/runtime@7.25.6(transitive)

• - Removed@babel/template@7.25.0(transitive)

• - Removed@babel/traverse@7.25.6(transitive)

• - Removed@babel/types@7.25.6(transitive)

• - Removed@emotion/cache@10.0.29(transitive)

• - Removed@emotion/core@10.0.28(transitive)

• - Removed@emotion/css@10.0.27(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@emotion/serialize@0.11.16(transitive)

• - Removed@emotion/sheet@0.9.4(transitive)

• - Removed@emotion/stylis@0.8.5(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@emotion/utils@0.11.3(transitive)

• - Removed@emotion/weak-memoize@0.2.5(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@types/lodash@4.17.9(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedbabel-plugin-emotion@10.2.2(transitive)

• - Removedbabel-plugin-macros@2.8.0(transitive)

• - Removedbabel-plugin-syntax-jsx@6.18.0(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@6.0.0(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.15.1(transitive)

• - Removedjsesc@2.5.2(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedms@2.1.3(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedpicocolors@1.1.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedresolve@1.22.8(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedsupports-color@5.5.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedto-fast-properties@2.0.0(transitive)

• - Removedyaml@1.10.2(transitive)

• Updated@chakra-ui/hooks@^1.0.0-next.3

• Updated@chakra-ui/utils@^1.0.0-next.3