@auth0/quantum-product 1.5.5 → 1.5.7

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/esm/quantum-provider/quantum-provider.js +16 -9
  2. package/package.json +2 -2
  3. package/quantum-provider/index.d.ts +1 -1
  4. package/quantum-provider/quantum-provider.d.ts +1 -1
  5. package/quantum-provider/quantum-provider.js +16 -9
package/esm/quantum-provider/quantum-provider.js CHANGED
@@ -21,12 +21,13 @@ import { useMediaQuery } from '../use-media-query';
21
21
  import { DEFAULT_COLOR_MODE, QuantumContext } from './quantum-context';
22
22
  var DEFAULT_COLOR_MODE_STORAGE_KEY = 'quantum:color-mode';
23
23
  export var PREFERS_DARK_MODE_QUERY = '(prefers-color-scheme: dark)';
24
- export var getCurrentColorModeFromStorage = function (defaultColorMode) {
24
+ var validColorModes = new Set(['light', 'dark', 'system']);
25
+ export var getCurrentColorModeFromStorage = function () {
25
26
  try {
26
- return window.localStorage.getItem(DEFAULT_COLOR_MODE_STORAGE_KEY);
27
+ return window.localStorage.getItem(DEFAULT_COLOR_MODE_STORAGE_KEY) || DEFAULT_COLOR_MODE;
27
28
  }
28
29
  catch (_err) {
29
- return defaultColorMode;
30
+ return DEFAULT_COLOR_MODE;
30
31
  }
31
32
  };
32
33
  var setCurrentColorModeInStorage = function (mode) {
@@ -40,13 +41,19 @@ var setCurrentColorModeInStorage = function (mode) {
40
41
  var computePaletteMode = function (currentColorMode, prefersDarkMode) {
41
42
  return currentColorMode === 'system' ? (prefersDarkMode ? 'dark' : 'light') : currentColorMode;
42
43
  };
44
+ var isValidColorMode = function (colorMode) {
45
+ return validColorModes.has(colorMode);
46
+ };
47
+ var computeValidColorMode = function (colorMode) {
48
+ return isValidColorMode(colorMode) ? colorMode : DEFAULT_COLOR_MODE;
49
+ };
43
50
  export var QuantumProvider = function (_a) {
44
- var _b = _a.theme, theme = _b === void 0 ? defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, _c = _a.defaultColorMode, defaultColorMode = _c === void 0 ? DEFAULT_COLOR_MODE : _c;
45
- var _d = __read(React.useState(function () {
46
- return propColorMode || getCurrentColorModeFromStorage(defaultColorMode);
47
- }), 2), colorMode = _d[0], setColorMode = _d[1];
51
+ var _b = _a.theme, theme = _b === void 0 ? defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, defaultColorMode = _a.defaultColorMode;
52
+ var _c = __read(React.useState(function () {
53
+ return propColorMode || defaultColorMode || getCurrentColorModeFromStorage();
54
+ }), 2), colorMode = _c[0], setColorMode = _c[1];
48
55
  var prefersDarkMode = useMediaQuery(PREFERS_DARK_MODE_QUERY);
49
- var currentColorMode = propColorMode || colorMode;
56
+ var currentColorMode = computeValidColorMode(propColorMode || colorMode);
50
57
  React.useEffect(function () {
51
58
  var _a;
52
59
  var mode = computePaletteMode(currentColorMode, prefersDarkMode);
@@ -54,7 +61,7 @@ export var QuantumProvider = function (_a) {
54
61
  }, [currentColorMode, prefersDarkMode]);
55
62
  var activeTheme = React.useMemo(function () {
56
63
  var mode = computePaletteMode(currentColorMode, prefersDarkMode);
57
- return theme[mode];
64
+ return theme[mode] || theme[DEFAULT_COLOR_MODE];
58
65
  }, [prefersDarkMode, currentColorMode, theme]);
59
66
  var handleSetColorMode = React.useCallback(function (mode) {
60
67
  setColorMode(mode);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "1.5.5",
3
+ "version": "1.5.7",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
@@ -16,7 +16,7 @@
16
16
  "main": "./index.js",
17
17
  "types": "./index.d.ts",
18
18
  "dependencies": {
19
- "@auth0/quantum-tokens": "^1.1.3",
19
+ "@auth0/quantum-tokens": "^1.1.4",
20
20
  "@mui/material": "5.8.7",
21
21
  "@mui/styles": "5.8.7",
22
22
  "@mui/system": "5.8.7",
package/quantum-provider/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { QuantumProvider } from './quantum-provider';
2
2
  export type { IQuantumProviderProps } from './quantum-provider';
3
3
  export { QuantumContext, useQuantumContext } from './quantum-context';
4
- export type { IQuantumContextValue } from './quantum-context';
4
+ export type { IQuantumContextValue, ThemeColorMode } from './quantum-context';
package/quantum-provider/quantum-provider.d.ts CHANGED
@@ -9,5 +9,5 @@ export interface IQuantumProviderProps {
9
9
  onColorModeChange?(colorMode: ThemeColorMode): void;
10
10
  children?: React.ReactNode | ((ctx: IQuantumContextValue) => React.ReactNode);
11
11
  }
12
- export declare const getCurrentColorModeFromStorage: (defaultColorMode: ThemeColorMode) => ThemeColorMode;
12
+ export declare const getCurrentColorModeFromStorage: () => ThemeColorMode;
13
13
  export declare const QuantumProvider: React.FC<IQuantumProviderProps>;
package/quantum-provider/quantum-provider.js CHANGED
@@ -47,12 +47,13 @@ var use_media_query_1 = require("../use-media-query");
47
47
  var quantum_context_1 = require("./quantum-context");
48
48
  var DEFAULT_COLOR_MODE_STORAGE_KEY = 'quantum:color-mode';
49
49
  exports.PREFERS_DARK_MODE_QUERY = '(prefers-color-scheme: dark)';
50
- var getCurrentColorModeFromStorage = function (defaultColorMode) {
50
+ var validColorModes = new Set(['light', 'dark', 'system']);
51
+ var getCurrentColorModeFromStorage = function () {
51
52
  try {
52
- return window.localStorage.getItem(DEFAULT_COLOR_MODE_STORAGE_KEY);
53
+ return window.localStorage.getItem(DEFAULT_COLOR_MODE_STORAGE_KEY) || quantum_context_1.DEFAULT_COLOR_MODE;
53
54
  }
54
55
  catch (_err) {
55
- return defaultColorMode;
56
+ return quantum_context_1.DEFAULT_COLOR_MODE;
56
57
  }
57
58
  };
58
59
  exports.getCurrentColorModeFromStorage = getCurrentColorModeFromStorage;
@@ -67,13 +68,19 @@ var setCurrentColorModeInStorage = function (mode) {
67
68
  var computePaletteMode = function (currentColorMode, prefersDarkMode) {
68
69
  return currentColorMode === 'system' ? (prefersDarkMode ? 'dark' : 'light') : currentColorMode;
69
70
  };
71
+ var isValidColorMode = function (colorMode) {
72
+ return validColorModes.has(colorMode);
73
+ };
74
+ var computeValidColorMode = function (colorMode) {
75
+ return isValidColorMode(colorMode) ? colorMode : quantum_context_1.DEFAULT_COLOR_MODE;
76
+ };
70
77
  var QuantumProvider = function (_a) {
71
- var _b = _a.theme, theme = _b === void 0 ? default_theme_1.defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, _c = _a.defaultColorMode, defaultColorMode = _c === void 0 ? quantum_context_1.DEFAULT_COLOR_MODE : _c;
72
- var _d = __read(React.useState(function () {
73
- return propColorMode || (0, exports.getCurrentColorModeFromStorage)(defaultColorMode);
74
- }), 2), colorMode = _d[0], setColorMode = _d[1];
78
+ var _b = _a.theme, theme = _b === void 0 ? default_theme_1.defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, defaultColorMode = _a.defaultColorMode;
79
+ var _c = __read(React.useState(function () {
80
+ return propColorMode || defaultColorMode || (0, exports.getCurrentColorModeFromStorage)();
81
+ }), 2), colorMode = _c[0], setColorMode = _c[1];
75
82
  var prefersDarkMode = (0, use_media_query_1.useMediaQuery)(exports.PREFERS_DARK_MODE_QUERY);
76
- var currentColorMode = propColorMode || colorMode;
83
+ var currentColorMode = computeValidColorMode(propColorMode || colorMode);
77
84
  React.useEffect(function () {
78
85
  var _a;
79
86
  var mode = computePaletteMode(currentColorMode, prefersDarkMode);
@@ -81,7 +88,7 @@ var QuantumProvider = function (_a) {
81
88
  }, [currentColorMode, prefersDarkMode]);
82
89
  var activeTheme = React.useMemo(function () {
83
90
  var mode = computePaletteMode(currentColorMode, prefersDarkMode);
84
- return theme[mode];
91
+ return theme[mode] || theme[quantum_context_1.DEFAULT_COLOR_MODE];
85
92
  }, [prefersDarkMode, currentColorMode, theme]);
86
93
  var handleSetColorMode = React.useCallback(function (mode) {
87
94
  setColorMode(mode);