@broxus/react-uikit 0.19.2 → 0.19.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/Inverse/index.d.ts +2 -1
  2. package/dist/cjs/components/Inverse/index.js +6 -6
  3. package/dist/esm/components/Inverse/index.d.ts +2 -1
  4. package/dist/esm/components/Inverse/index.js +6 -6
  5. package/package.json +3 -3
package/dist/cjs/components/Inverse/index.d.ts CHANGED
@@ -14,9 +14,10 @@ export interface InverseProviderProps {
14
14
  globalLightClassName?: string;
15
15
  primaryColorDark?: string;
16
16
  primaryColorLight?: string;
17
+ storageKey?: string;
17
18
  }
18
19
  export declare const lib: Record<ColorMode, () => React.JSX.Element>;
19
20
  export declare const InverseContext: React.Context<InverseConfig | null>;
20
21
  export declare function useInverse(): InverseConfig;
21
22
  export declare const INVERSE_STORAGE_KEY = "colorMode";
22
- export declare const InverseProvider: React.MemoExoticComponent<({ children, defaultColorMode, globalDarkClassName, globalLightClassName, primaryColorDark, primaryColorLight, }: React.PropsWithChildren<InverseProviderProps>) => React.JSX.Element>;
23
+ export declare const InverseProvider: React.MemoExoticComponent<({ children, defaultColorMode, globalDarkClassName, globalLightClassName, primaryColorDark, primaryColorLight, storageKey, }: React.PropsWithChildren<InverseProviderProps>) => React.JSX.Element>;
package/dist/cjs/components/Inverse/index.js CHANGED
@@ -56,9 +56,9 @@ function useInverse() {
56
56
  return (0, hooks_1.useContext)(exports.InverseContext);
57
57
  }
58
58
  exports.INVERSE_STORAGE_KEY = 'colorMode';
59
- exports.InverseProvider = React.memo(({ children, defaultColorMode = ColorMode.Dark, globalDarkClassName = 'tm-dark', globalLightClassName = 'tm-light', primaryColorDark, primaryColorLight, }) => {
59
+ exports.InverseProvider = React.memo(({ children, defaultColorMode = ColorMode.Dark, globalDarkClassName = 'tm-dark', globalLightClassName = 'tm-light', primaryColorDark, primaryColorLight, storageKey = exports.INVERSE_STORAGE_KEY, }) => {
60
60
  const [colorMode, setColorMode] = React.useState(() => {
61
- const stored = js_utils_1.storage.get(exports.INVERSE_STORAGE_KEY);
61
+ const stored = js_utils_1.storage.get(storageKey);
62
62
  return stored ? stored : defaultColorMode ?? ColorMode.Dark;
63
63
  });
64
64
  const context = React.useMemo(() => ({
@@ -66,14 +66,14 @@ exports.InverseProvider = React.memo(({ children, defaultColorMode = ColorMode.D
66
66
  logoColor: colorMode === ColorMode.Dark ? primaryColorLight : primaryColorDark,
67
67
  setColorMode: (value) => {
68
68
  setColorMode(value);
69
- js_utils_1.storage.set(exports.INVERSE_STORAGE_KEY, value);
69
+ js_utils_1.storage.set(storageKey, value);
70
70
  },
71
- }), [colorMode, primaryColorDark, primaryColorLight]);
71
+ }), [colorMode, primaryColorDark, primaryColorLight, storageKey]);
72
72
  const onChangeStorageValue = React.useCallback((event) => {
73
- if (event.key === exports.INVERSE_STORAGE_KEY && event.newValue != null) {
73
+ if (event.key === storageKey && event.newValue != null) {
74
74
  setColorMode(event.newValue);
75
75
  }
76
- }, []);
76
+ }, [storageKey]);
77
77
  React.useEffect(() => {
78
78
  (0, js_utils_1.removeClass)(document.documentElement, globalLightClassName, globalDarkClassName);
79
79
  (0, js_utils_1.addClass)(document.documentElement, colorMode === ColorMode.Dark ? globalLightClassName : globalDarkClassName);
package/dist/esm/components/Inverse/index.d.ts CHANGED
@@ -14,9 +14,10 @@ export interface InverseProviderProps {
14
14
  globalLightClassName?: string;
15
15
  primaryColorDark?: string;
16
16
  primaryColorLight?: string;
17
+ storageKey?: string;
17
18
  }
18
19
  export declare const lib: Record<ColorMode, () => React.JSX.Element>;
19
20
  export declare const InverseContext: React.Context<InverseConfig | null>;
20
21
  export declare function useInverse(): InverseConfig;
21
22
  export declare const INVERSE_STORAGE_KEY = "colorMode";
22
- export declare const InverseProvider: React.MemoExoticComponent<({ children, defaultColorMode, globalDarkClassName, globalLightClassName, primaryColorDark, primaryColorLight, }: React.PropsWithChildren<InverseProviderProps>) => React.JSX.Element>;
23
+ export declare const InverseProvider: React.MemoExoticComponent<({ children, defaultColorMode, globalDarkClassName, globalLightClassName, primaryColorDark, primaryColorLight, storageKey, }: React.PropsWithChildren<InverseProviderProps>) => React.JSX.Element>;
package/dist/esm/components/Inverse/index.js CHANGED
@@ -19,9 +19,9 @@ export function useInverse() {
19
19
  return useContext(InverseContext);
20
20
  }
21
21
  export const INVERSE_STORAGE_KEY = 'colorMode';
22
- export const InverseProvider = React.memo(({ children, defaultColorMode = ColorMode.Dark, globalDarkClassName = 'tm-dark', globalLightClassName = 'tm-light', primaryColorDark, primaryColorLight, }) => {
22
+ export const InverseProvider = React.memo(({ children, defaultColorMode = ColorMode.Dark, globalDarkClassName = 'tm-dark', globalLightClassName = 'tm-light', primaryColorDark, primaryColorLight, storageKey = INVERSE_STORAGE_KEY, }) => {
23
23
  const [colorMode, setColorMode] = React.useState(() => {
24
- const stored = storage.get(INVERSE_STORAGE_KEY);
24
+ const stored = storage.get(storageKey);
25
25
  return stored ? stored : defaultColorMode ?? ColorMode.Dark;
26
26
  });
27
27
  const context = React.useMemo(() => ({
@@ -29,14 +29,14 @@ export const InverseProvider = React.memo(({ children, defaultColorMode = ColorM
29
29
  logoColor: colorMode === ColorMode.Dark ? primaryColorLight : primaryColorDark,
30
30
  setColorMode: (value) => {
31
31
  setColorMode(value);
32
- storage.set(INVERSE_STORAGE_KEY, value);
32
+ storage.set(storageKey, value);
33
33
  },
34
- }), [colorMode, primaryColorDark, primaryColorLight]);
34
+ }), [colorMode, primaryColorDark, primaryColorLight, storageKey]);
35
35
  const onChangeStorageValue = React.useCallback((event) => {
36
- if (event.key === INVERSE_STORAGE_KEY && event.newValue != null) {
36
+ if (event.key === storageKey && event.newValue != null) {
37
37
  setColorMode(event.newValue);
38
38
  }
39
- }, []);
39
+ }, [storageKey]);
40
40
  React.useEffect(() => {
41
41
  removeClass(document.documentElement, globalLightClassName, globalDarkClassName);
42
42
  addClass(document.documentElement, colorMode === ColorMode.Dark ? globalLightClassName : globalDarkClassName);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@broxus/react-uikit",
3
- "version": "0.19.2",
3
+ "version": "0.19.4",
4
4
  "description": "React-based UIkit library",
5
5
  "license": "AGPL-3.0",
6
6
  "keywords": [
@@ -57,7 +57,7 @@
57
57
  "prepare": "npx yarn cleanup && npx yarn build"
58
58
  },
59
59
  "dependencies": {
60
- "@broxus/js-utils": "^1.3.16",
60
+ "@broxus/js-utils": "^1.4.0",
61
61
  "@rc-component/collapse": "^1.0.1",
62
62
  "@rc-component/dialog": "^1.2.0",
63
63
  "@rc-component/drawer": "^1.0.0",
@@ -86,5 +86,5 @@
86
86
  "react": "^16.8.0 || ^17.x || ^18.x || ^19.x",
87
87
  "react-dom": "^16.8.0 || ^17.x || ^18.x || ^19.x"
88
88
  },
89
- "gitHead": "d6a9cf57bc7a032f8afff930e16e018b09d250b1"
89
+ "gitHead": "f1ca3b544d9863cb384184acf6a2fa1df3f5c20a"
90
90
  }