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

Comparing version 2.1.6 to 2.1.7

dist/index.cjs.js

@@ -46,13 +46,9 @@ "use strict";
 // src/color-mode-provider.tsx
-var import_hooks = require("@chakra-ui/hooks");
-var import_utils4 = require("@chakra-ui/utils");
+var import_react_use_safe_layout_effect = require("@chakra-ui/react-use-safe-layout-effect");
 var import_react3 = require("react");
 
 // src/color-mode-context.ts
-var import_utils = require("@chakra-ui/utils");
 var import_react2 = require("react");
 var ColorModeContext = (0, import_react2.createContext)({});
-if (import_utils.__DEV__) {
-  ColorModeContext.displayName = "ColorModeContext";
-}
+ColorModeContext.displayName = "ColorModeContext";
 function useColorMode() {
@@ -71,3 +67,2 @@ const context = (0, import_react2.useContext)(ColorModeContext);
 // src/color-mode.utils.ts
-var import_utils2 = require("@chakra-ui/utils");
 var classNames = {
@@ -102,3 +97,3 @@ light: "chakra-ui-light",
       };
-      if ((0, import_utils2.isFunction)(mql.addListener))
+      if (typeof mql.addListener === "function")
         mql.addListener(listener);
@@ -108,3 +103,3 @@ else
       return () => {
-        if ((0, import_utils2.isFunction)(mql.removeListener))
+        if (typeof mql.removeListener === "function")
           mql.removeListener(listener);
@@ -134,3 +129,2 @@ else
 // src/storage-manager.ts
-var import_utils3 = require("@chakra-ui/utils");
 var STORAGE_KEY = "chakra-ui-color-mode";
@@ -142,3 +136,3 @@ function createLocalStorageManager(key) {
     get(init) {
-      if (!import_utils3.isBrowser)
+      if (!(globalThis == null ? void 0 : globalThis.document))
         return init;
@@ -172,3 +166,3 @@ let value;
         return parseCookie(cookie, key);
-      if (!import_utils3.isBrowser)
+      if (!(globalThis == null ? void 0 : globalThis.document))
         return init;
@@ -186,2 +180,4 @@ return parseCookie(document.cookie, key) || init;
 // src/color-mode-provider.tsx
+var noop = () => {
+};
 function getTheme(manager, fallback) {
@@ -213,3 +209,3 @@ return manager.type === "cookie" && manager.ssr ? manager.get(fallback) : fallback;
   }, [colorModeManager, getSystemTheme, setClassName, setDataset]);
-  (0, import_hooks.useSafeLayoutEffect)(() => {
+  (0, import_react_use_safe_layout_effect.useSafeLayoutEffect)(() => {
     if (initialColorMode === "system") {
@@ -241,4 +237,4 @@ setResolvedColorMode(getSystemTheme());
     colorMode: value ?? resolvedValue,
-    toggleColorMode: value ? import_utils4.noop : toggleColorMode,
-    setColorMode: value ? import_utils4.noop : setColorMode
+    toggleColorMode: value ? noop : toggleColorMode,
+    setColorMode: value ? noop : setColorMode
   }), [resolvedValue, toggleColorMode, setColorMode, value]);
@@ -249,10 +245,8 @@ return /* @__PURE__ */ import_react.default.createElement(ColorModeContext.Provider, {
 }
-if (import_utils4.__DEV__) {
-  ColorModeProvider.displayName = "ColorModeProvider";
-}
+ColorModeProvider.displayName = "ColorModeProvider";
 function DarkMode(props) {
   const context = (0, import_react3.useMemo)(() => ({
     colorMode: "dark",
-    toggleColorMode: import_utils4.noop,
-    setColorMode: import_utils4.noop
+    toggleColorMode: noop,
+    setColorMode: noop
   }), []);
@@ -264,10 +258,8 @@ return /* @__PURE__ */ import_react.default.createElement(ColorModeContext.Provider, {
 }
-if (import_utils4.__DEV__) {
-  DarkMode.displayName = "DarkMode";
-}
+DarkMode.displayName = "DarkMode";
 function LightMode(props) {
   const context = (0, import_react3.useMemo)(() => ({
     colorMode: "light",
-    toggleColorMode: import_utils4.noop,
-    setColorMode: import_utils4.noop
+    toggleColorMode: noop,
+    setColorMode: noop
   }), []);
@@ -279,5 +271,3 @@ return /* @__PURE__ */ import_react.default.createElement(ColorModeContext.Provider, {
 }
-if (import_utils4.__DEV__) {
-  LightMode.displayName = "LightMode";
-}
+LightMode.displayName = "LightMode";
 
@@ -284,0 +274,0 @@ // src/color-mode-script.tsx

dist/index.esm.js

@@ -5,13 +5,9 @@ // ../../react-shim.js
 // src/color-mode-provider.tsx
-import { useSafeLayoutEffect } from "@chakra-ui/hooks";
-import { noop, __DEV__ as __DEV__2 } from "@chakra-ui/utils";
+import { useSafeLayoutEffect } from "@chakra-ui/react-use-safe-layout-effect";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 // src/color-mode-context.ts
-import { __DEV__ } from "@chakra-ui/utils";
 import { createContext, useContext } from "react";
 var ColorModeContext = createContext({});
-if (__DEV__) {
-  ColorModeContext.displayName = "ColorModeContext";
-}
+ColorModeContext.displayName = "ColorModeContext";
 function useColorMode() {
@@ -30,3 +26,2 @@ const context = useContext(ColorModeContext);
 // src/color-mode.utils.ts
-import { isFunction } from "@chakra-ui/utils";
 var classNames = {
@@ -61,3 +56,3 @@ light: "chakra-ui-light",
       };
-      if (isFunction(mql.addListener))
+      if (typeof mql.addListener === "function")
         mql.addListener(listener);
@@ -67,3 +62,3 @@ else
       return () => {
-        if (isFunction(mql.removeListener))
+        if (typeof mql.removeListener === "function")
           mql.removeListener(listener);
@@ -93,3 +88,2 @@ else
 // src/storage-manager.ts
-import { isBrowser } from "@chakra-ui/utils";
 var STORAGE_KEY = "chakra-ui-color-mode";
@@ -101,3 +95,3 @@ function createLocalStorageManager(key) {
     get(init) {
-      if (!isBrowser)
+      if (!(globalThis == null ? void 0 : globalThis.document))
         return init;
@@ -131,3 +125,3 @@ let value;
         return parseCookie(cookie, key);
-      if (!isBrowser)
+      if (!(globalThis == null ? void 0 : globalThis.document))
         return init;
@@ -145,2 +139,4 @@ return parseCookie(document.cookie, key) || init;
 // src/color-mode-provider.tsx
+var noop = () => {
+};
 function getTheme(manager, fallback) {
@@ -206,5 +202,3 @@ return manager.type === "cookie" && manager.ssr ? manager.get(fallback) : fallback;
 }
-if (__DEV__2) {
-  ColorModeProvider.displayName = "ColorModeProvider";
-}
+ColorModeProvider.displayName = "ColorModeProvider";
 function DarkMode(props) {
@@ -221,5 +215,3 @@ const context = useMemo(() => ({
 }
-if (__DEV__2) {
-  DarkMode.displayName = "DarkMode";
-}
+DarkMode.displayName = "DarkMode";
 function LightMode(props) {
@@ -236,5 +228,3 @@ const context = useMemo(() => ({
 }
-if (__DEV__2) {
-  LightMode.displayName = "LightMode";
-}
+LightMode.displayName = "LightMode";
 
@@ -241,0 +231,0 @@ // src/color-mode-script.tsx

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "React component and hooks for handling light and dark mode.",
@@ -40,4 +40,3 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "2.0.8",
-    "@chakra-ui/utils": "2.0.8"
+    "@chakra-ui/react-use-safe-layout-effect": "2.0.1"
   },
@@ -48,2 +47,3 @@ "peerDependencies": {
   "devDependencies": {
+    "@chakra-ui/utils": "2.0.9",
     "react": "^18.0.0"
@@ -57,4 +57,3 @@ },
     "build:fast": "JSX=1 tsup src/index.ts"
-  },
-  "readme": "# Color Mode\n\nReact component that adds support for light mode and dark mode using\n`localStorage` and `matchMedia`.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/color-mode\n\n# or\n\nnpm i @chakra-ui/color-mode\n```\n\n## Import component\n\nTo enable this behavior within your apps, wrap your application in a\n`ColorModeProvider` below the `ThemeProvider`\n\n```jsx live=false\nimport * as React from \"react\"\nimport { ColorModeProvider } from \"@chakra-ui/color-mode\"\nimport theme from \"./theme\"\n\nfunction App({ children }) {\n  return (\n    <ThemeProvider theme={theme}>\n      <ColorModeProvider>{children}</ColorModeProvider>\n    </ThemeProvider>\n  )\n}\n```\n\nThen you can use the hook `useColorMode` within your application.\n\n```jsx\nfunction Example() {\n  const { colorMode, toggleColorMode } = useColorMode()\n  return (\n    <header>\n      <Button onClick={toggleColorMode}>\n        Toggle {colorMode === \"light\" ? \"Dark\" : \"Light\"}\n      </Button>\n    </header>\n  )\n}\n```\n"
+  }
 }

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

Dependency count

2

decreased by-33.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

27130

decreased by-4.98%

Dev dependency count

2

increased by100%

Lines of code

645

decreased by-3.01%

Dependency changes

• + Added@chakra-ui/react-use-safe-layout-effect@2.0.1

• + Added@chakra-ui/react-use-safe-layout-effect@2.0.1(transitive)

• - Removed@chakra-ui/hooks@2.0.8

• - Removed@chakra-ui/utils@2.0.8

• - Removed@chakra-ui/hooks@2.0.8(transitive)

• - Removed@chakra-ui/react-utils@2.0.5(transitive)

• - Removed@chakra-ui/utils@2.0.8(transitive)

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

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

• - Removedcompute-scroll-into-view@1.0.14(transitive)

• - Removedcopy-to-clipboard@3.3.1(transitive)

• - Removedcss-box-model@1.2.1(transitive)

• - Removedframesync@5.3.0(transitive)

• - Removedlodash.mergewith@4.6.2(transitive)

• - Removedtiny-invariant@1.3.3(transitive)

• - Removedtoggle-selection@1.0.6(transitive)

• - Removedtslib@2.8.1(transitive)