@dbcdk/react-components 0.0.196 → 0.0.197

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 (7) hide show
  1. package/dist/hooks/useColorScheme.cjs +15 -15
  2. package/dist/hooks/useColorScheme.d.ts +1 -0
  3. package/dist/hooks/useColorScheme.js +15 -15
  4. package/dist/hooks/useTheme.cjs +15 -15
  5. package/dist/hooks/useTheme.d.ts +3 -1
  6. package/dist/hooks/useTheme.js +15 -15
  7. package/package.json +1 -1
package/dist/hooks/useColorScheme.cjs CHANGED
@@ -6,9 +6,9 @@ var colorScheme_constants = require('../utils/color-scheme.constants');
6
6
  var cookie_utils = require('../utils/cookie.utils');
7
7
  var localStorage_utils = require('../utils/localStorage.utils');
8
8
 
9
- function persistColorScheme(storageKey, id) {
10
- localStorage_utils.writeLocalStorage(storageKey, id);
11
- cookie_utils.writeCookie(storageKey, id);
9
+ function persistColorScheme(storageKey, id, persistence) {
10
+ if (persistence !== "cookie") localStorage_utils.writeLocalStorage(storageKey, id);
11
+ if (persistence !== "localStorage") cookie_utils.writeCookie(storageKey, id);
12
12
  }
13
13
  function getDomColorScheme() {
14
14
  return document.documentElement.dataset.theme;
@@ -34,43 +34,43 @@ function getSnapshot() {
34
34
  function getServerSnapshot() {
35
35
  return null;
36
36
  }
37
- function resolveInitialColorScheme(storageKey, initialColorScheme) {
37
+ function resolveInitialColorScheme(storageKey, initialColorScheme, persistence) {
38
38
  const fromDomAttribute = getDomColorScheme();
39
39
  let resolvedColorScheme = colorScheme_constants.isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
40
- const fromCookie = cookie_utils.readCookie(storageKey);
40
+ const fromCookie = persistence !== "localStorage" ? cookie_utils.readCookie(storageKey) : void 0;
41
41
  if (colorScheme_constants.isColorScheme(fromCookie)) {
42
42
  resolvedColorScheme = fromCookie;
43
- } else {
43
+ } else if (persistence !== "cookie") {
44
44
  const fromStorage = localStorage_utils.readLocalStorage(storageKey);
45
45
  if (colorScheme_constants.isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
46
46
  }
47
47
  return resolvedColorScheme;
48
48
  }
49
- function ensureResolved(initialColorScheme, storageKey) {
49
+ function ensureResolved(initialColorScheme, storageKey, persistence) {
50
50
  if (resolved) return;
51
51
  resolved = true;
52
- const value = resolveInitialColorScheme(storageKey, initialColorScheme);
52
+ const value = resolveInitialColorScheme(storageKey, initialColorScheme, persistence);
53
53
  applyColorScheme(value);
54
- persistColorScheme(storageKey, value);
54
+ persistColorScheme(storageKey, value, persistence);
55
55
  currentColorScheme = value;
56
56
  notify();
57
57
  }
58
- function switchColorSchemeInternal(storageKey, id) {
58
+ function switchColorSchemeInternal(storageKey, id, persistence) {
59
59
  applyColorScheme(id);
60
- persistColorScheme(storageKey, id);
60
+ persistColorScheme(storageKey, id, persistence);
61
61
  currentColorScheme = id;
62
62
  resolved = true;
63
63
  notify();
64
64
  return id;
65
65
  }
66
66
  function useColorScheme(initialColorScheme = "system", options = {}) {
67
- const { storageKey = colorScheme_constants.COLOR_SCHEME_STORAGE_KEY } = options;
67
+ const { storageKey = colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, persistence = "both" } = options;
68
68
  react.useEffect(() => {
69
- ensureResolved(initialColorScheme, storageKey);
70
- }, [initialColorScheme, storageKey]);
69
+ ensureResolved(initialColorScheme, storageKey, persistence);
70
+ }, [initialColorScheme, storageKey, persistence]);
71
71
  const colorScheme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
72
72
  function switchColorScheme(id) {
73
- return switchColorSchemeInternal(storageKey, id);
73
+ return switchColorSchemeInternal(storageKey, id, persistence);
74
74
  }
75
75
  return { colorScheme, switchColorScheme };
76
76
  }
package/dist/hooks/useColorScheme.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface UseColorSchemeOptions {
9
9
  * scheme.
10
10
  */
11
11
  storageKey?: string;
12
+ persistence?: 'both' | 'cookie' | 'localStorage';
12
13
  }
13
14
  export declare function useColorScheme(initialColorScheme?: ColorScheme, options?: UseColorSchemeOptions): {
14
15
  colorScheme: ColorScheme | null;
package/dist/hooks/useColorScheme.js CHANGED
@@ -4,9 +4,9 @@ import { COLOR_SCHEME_STORAGE_KEY, isColorScheme } from '../utils/color-scheme.c
4
4
  import { readCookie, writeCookie } from '../utils/cookie.utils';
5
5
  import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
6
6
 
7
- function persistColorScheme(storageKey, id) {
8
- writeLocalStorage(storageKey, id);
9
- writeCookie(storageKey, id);
7
+ function persistColorScheme(storageKey, id, persistence) {
8
+ if (persistence !== "cookie") writeLocalStorage(storageKey, id);
9
+ if (persistence !== "localStorage") writeCookie(storageKey, id);
10
10
  }
11
11
  function getDomColorScheme() {
12
12
  return document.documentElement.dataset.theme;
@@ -32,43 +32,43 @@ function getSnapshot() {
32
32
  function getServerSnapshot() {
33
33
  return null;
34
34
  }
35
- function resolveInitialColorScheme(storageKey, initialColorScheme) {
35
+ function resolveInitialColorScheme(storageKey, initialColorScheme, persistence) {
36
36
  const fromDomAttribute = getDomColorScheme();
37
37
  let resolvedColorScheme = isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
38
- const fromCookie = readCookie(storageKey);
38
+ const fromCookie = persistence !== "localStorage" ? readCookie(storageKey) : void 0;
39
39
  if (isColorScheme(fromCookie)) {
40
40
  resolvedColorScheme = fromCookie;
41
- } else {
41
+ } else if (persistence !== "cookie") {
42
42
  const fromStorage = readLocalStorage(storageKey);
43
43
  if (isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
44
44
  }
45
45
  return resolvedColorScheme;
46
46
  }
47
- function ensureResolved(initialColorScheme, storageKey) {
47
+ function ensureResolved(initialColorScheme, storageKey, persistence) {
48
48
  if (resolved) return;
49
49
  resolved = true;
50
- const value = resolveInitialColorScheme(storageKey, initialColorScheme);
50
+ const value = resolveInitialColorScheme(storageKey, initialColorScheme, persistence);
51
51
  applyColorScheme(value);
52
- persistColorScheme(storageKey, value);
52
+ persistColorScheme(storageKey, value, persistence);
53
53
  currentColorScheme = value;
54
54
  notify();
55
55
  }
56
- function switchColorSchemeInternal(storageKey, id) {
56
+ function switchColorSchemeInternal(storageKey, id, persistence) {
57
57
  applyColorScheme(id);
58
- persistColorScheme(storageKey, id);
58
+ persistColorScheme(storageKey, id, persistence);
59
59
  currentColorScheme = id;
60
60
  resolved = true;
61
61
  notify();
62
62
  return id;
63
63
  }
64
64
  function useColorScheme(initialColorScheme = "system", options = {}) {
65
- const { storageKey = COLOR_SCHEME_STORAGE_KEY } = options;
65
+ const { storageKey = COLOR_SCHEME_STORAGE_KEY, persistence = "both" } = options;
66
66
  useEffect(() => {
67
- ensureResolved(initialColorScheme, storageKey);
68
- }, [initialColorScheme, storageKey]);
67
+ ensureResolved(initialColorScheme, storageKey, persistence);
68
+ }, [initialColorScheme, storageKey, persistence]);
69
69
  const colorScheme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
70
70
  function switchColorScheme(id) {
71
- return switchColorSchemeInternal(storageKey, id);
71
+ return switchColorSchemeInternal(storageKey, id, persistence);
72
72
  }
73
73
  return { colorScheme, switchColorScheme };
74
74
  }
package/dist/hooks/useTheme.cjs CHANGED
@@ -7,9 +7,9 @@ var cookie_utils = require('../utils/cookie.utils');
7
7
  var localStorage_utils = require('../utils/localStorage.utils');
8
8
  var theme_constants = require('../utils/theme.constants');
9
9
 
10
- function persistTheme(storageKey, id) {
11
- localStorage_utils.writeLocalStorage(storageKey, id);
12
- cookie_utils.writeCookie(storageKey, id);
10
+ function persistTheme(storageKey, id, persistence) {
11
+ if (persistence !== "cookie") localStorage_utils.writeLocalStorage(storageKey, id);
12
+ if (persistence !== "localStorage") cookie_utils.writeCookie(storageKey, id);
13
13
  }
14
14
  function getDomTheme() {
15
15
  return document.documentElement.dataset.productTheme;
@@ -40,23 +40,23 @@ function getSnapshot() {
40
40
  function getServerSnapshot() {
41
41
  return null;
42
42
  }
43
- function resolveInitialTheme(storageKey, defaultTheme) {
43
+ function resolveInitialTheme(storageKey, defaultTheme, persistence) {
44
44
  const fromDom = getDomTheme();
45
45
  if (fromDom) return fromDom;
46
- const fromCookie = cookie_utils.readCookie(storageKey);
46
+ const fromCookie = persistence !== "localStorage" ? cookie_utils.readCookie(storageKey) : void 0;
47
47
  if (fromCookie) return fromCookie;
48
- const fromStorage = localStorage_utils.readLocalStorage(storageKey);
48
+ const fromStorage = persistence !== "cookie" ? localStorage_utils.readLocalStorage(storageKey) : void 0;
49
49
  if (fromStorage) return fromStorage;
50
50
  return defaultTheme != null ? defaultTheme : null;
51
51
  }
52
- function ensureResolved(defaultTheme, storageKey) {
52
+ function ensureResolved(defaultTheme, storageKey, persistence) {
53
53
  if (resolved) return;
54
54
  resolved = true;
55
- const value = resolveInitialTheme(storageKey, defaultTheme);
55
+ const value = resolveInitialTheme(storageKey, defaultTheme, persistence);
56
56
  currentTheme = value;
57
57
  if (value) {
58
58
  applyTheme(value);
59
- persistTheme(storageKey, value);
59
+ persistTheme(storageKey, value, persistence);
60
60
  }
61
61
  notify();
62
62
  }
@@ -72,22 +72,22 @@ function ensureColorSchemeObserver() {
72
72
  attributeFilter: ["data-theme"]
73
73
  });
74
74
  }
75
- function switchThemeInternal(storageKey, id) {
75
+ function switchThemeInternal(storageKey, id, persistence) {
76
76
  applyTheme(id);
77
- persistTheme(storageKey, id);
77
+ persistTheme(storageKey, id, persistence);
78
78
  currentTheme = id;
79
79
  resolved = true;
80
80
  notify();
81
81
  }
82
82
  function useTheme(options = {}) {
83
- const { defaultTheme, storageKey = theme_constants.THEME_STORAGE_KEY } = options;
83
+ const { defaultTheme, storageKey = theme_constants.THEME_STORAGE_KEY, persistence = "both" } = options;
84
84
  react.useEffect(() => {
85
85
  ensureColorSchemeObserver();
86
- ensureResolved(defaultTheme, storageKey);
87
- }, [defaultTheme, storageKey]);
86
+ ensureResolved(defaultTheme, storageKey, persistence);
87
+ }, [defaultTheme, storageKey, persistence]);
88
88
  const theme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
89
89
  function switchTheme(id) {
90
- switchThemeInternal(storageKey, id);
90
+ switchThemeInternal(storageKey, id, persistence);
91
91
  }
92
92
  return { theme, switchTheme };
93
93
  }
package/dist/hooks/useTheme.d.ts CHANGED
@@ -4,12 +4,14 @@ export interface UseThemeOptions {
4
4
  /** The theme the app should fall back to when nothing is stored yet. */
5
5
  defaultTheme?: ThemeId;
6
6
  /**
7
- * Storage key used for the cookie + localStorage entry. Defaults to a
7
+ * Storage key used for the selected persistence store(s). Defaults to a
8
8
  * shared key, so apps that run on the same origin (e.g. multiple products
9
9
  * under one domain) should each pass their own value here — otherwise
10
10
  * they'll unintentionally read and overwrite each other's persisted theme.
11
11
  */
12
12
  storageKey?: string;
13
+ /** Where to read and persist the theme. Defaults to both stores. */
14
+ persistence?: 'both' | 'cookie' | 'localStorage';
13
15
  }
14
16
  export declare function useTheme(options?: UseThemeOptions): {
15
17
  theme: ThemeId | null;
package/dist/hooks/useTheme.js CHANGED
@@ -5,9 +5,9 @@ import { readCookie, writeCookie } from '../utils/cookie.utils';
5
5
  import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
6
6
  import { THEME_STORAGE_KEY } from '../utils/theme.constants';
7
7
 
8
- function persistTheme(storageKey, id) {
9
- writeLocalStorage(storageKey, id);
10
- writeCookie(storageKey, id);
8
+ function persistTheme(storageKey, id, persistence) {
9
+ if (persistence !== "cookie") writeLocalStorage(storageKey, id);
10
+ if (persistence !== "localStorage") writeCookie(storageKey, id);
11
11
  }
12
12
  function getDomTheme() {
13
13
  return document.documentElement.dataset.productTheme;
@@ -38,23 +38,23 @@ function getSnapshot() {
38
38
  function getServerSnapshot() {
39
39
  return null;
40
40
  }
41
- function resolveInitialTheme(storageKey, defaultTheme) {
41
+ function resolveInitialTheme(storageKey, defaultTheme, persistence) {
42
42
  const fromDom = getDomTheme();
43
43
  if (fromDom) return fromDom;
44
- const fromCookie = readCookie(storageKey);
44
+ const fromCookie = persistence !== "localStorage" ? readCookie(storageKey) : void 0;
45
45
  if (fromCookie) return fromCookie;
46
- const fromStorage = readLocalStorage(storageKey);
46
+ const fromStorage = persistence !== "cookie" ? readLocalStorage(storageKey) : void 0;
47
47
  if (fromStorage) return fromStorage;
48
48
  return defaultTheme != null ? defaultTheme : null;
49
49
  }
50
- function ensureResolved(defaultTheme, storageKey) {
50
+ function ensureResolved(defaultTheme, storageKey, persistence) {
51
51
  if (resolved) return;
52
52
  resolved = true;
53
- const value = resolveInitialTheme(storageKey, defaultTheme);
53
+ const value = resolveInitialTheme(storageKey, defaultTheme, persistence);
54
54
  currentTheme = value;
55
55
  if (value) {
56
56
  applyTheme(value);
57
- persistTheme(storageKey, value);
57
+ persistTheme(storageKey, value, persistence);
58
58
  }
59
59
  notify();
60
60
  }
@@ -70,22 +70,22 @@ function ensureColorSchemeObserver() {
70
70
  attributeFilter: ["data-theme"]
71
71
  });
72
72
  }
73
- function switchThemeInternal(storageKey, id) {
73
+ function switchThemeInternal(storageKey, id, persistence) {
74
74
  applyTheme(id);
75
- persistTheme(storageKey, id);
75
+ persistTheme(storageKey, id, persistence);
76
76
  currentTheme = id;
77
77
  resolved = true;
78
78
  notify();
79
79
  }
80
80
  function useTheme(options = {}) {
81
- const { defaultTheme, storageKey = THEME_STORAGE_KEY } = options;
81
+ const { defaultTheme, storageKey = THEME_STORAGE_KEY, persistence = "both" } = options;
82
82
  useEffect(() => {
83
83
  ensureColorSchemeObserver();
84
- ensureResolved(defaultTheme, storageKey);
85
- }, [defaultTheme, storageKey]);
84
+ ensureResolved(defaultTheme, storageKey, persistence);
85
+ }, [defaultTheme, storageKey, persistence]);
86
86
  const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
87
87
  function switchTheme(id) {
88
- switchThemeInternal(storageKey, id);
88
+ switchThemeInternal(storageKey, id, persistence);
89
89
  }
90
90
  return { theme, switchTheme };
91
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.196",
3
+ "version": "0.0.197",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",