@wise/components-theming 1.10.2 → 1.10.3
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.
- package/dist/ThemeProvider.d.ts.map +1 -1
- package/dist/ThemeProvider.js +3 -0
- package/dist/ThemeProvider.js.map +1 -1
- package/dist/ThemeProvider.mjs +3 -0
- package/dist/ThemeProvider.mjs.map +1 -1
- package/dist/helpers.d.ts.map +1 -1
- package/dist/helpers.js +1 -0
- package/dist/helpers.js.map +1 -1
- package/dist/helpers.mjs +1 -0
- package/dist/helpers.mjs.map +1 -1
- package/package.json +17 -13
- package/src/ThemeProvider.tsx +3 -0
- package/src/helpers.ts +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAKrF,eAAO,MAAM,aAAa,GAAI,0GAM3B,kBAAkB,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAKrF,eAAO,MAAM,aAAa,GAAI,0GAM3B,kBAAkB,gCA0CpB,CAAC"}
|
package/dist/ThemeProvider.js
CHANGED
|
@@ -19,10 +19,13 @@ const ThemeProvider = ({
|
|
|
19
19
|
const [theme, setTheme] = react.useState(helpers.normalizeTheme(initialTheme));
|
|
20
20
|
const [screenMode, setScreenMode] = react.useState(initialScreenMode);
|
|
21
21
|
// Update state when props change (for controlled usage)
|
|
22
|
+
// This component supports both controlled (via props) and uncontrolled (via context setters) usage.
|
|
22
23
|
react.useEffect(() => {
|
|
24
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior
|
|
23
25
|
setTheme(helpers.normalizeTheme(initialTheme));
|
|
24
26
|
}, [initialTheme]);
|
|
25
27
|
react.useEffect(() => {
|
|
28
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior
|
|
26
29
|
setScreenMode(initialScreenMode);
|
|
27
30
|
}, [initialScreenMode]);
|
|
28
31
|
// useEffect hook used to apply the theme class to the HTML element
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n isNotRootProvider: isLocal = false,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n useEffect(() => {\n setTheme(normalizeTheme(initialTheme));\n }, [initialTheme]);\n\n useEffect(() => {\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (!isLocal && isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isLocal, isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","isLocal","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,yBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,0BAAmB;EACnDC,iBAAiB,EAAEC,OAAO,GAAG,KAAK;EAClCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACV,KAAK,EAAEc,QAAQ,CAAC,GAAGC,cAAQ,CAACC,sBAAc,CAACf,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEc,aAAa,CAAC,GAAGF,cAAQ,CAACX,iBAAiB,CAAC;AAE/D;AACAc,EAAAA,eAAS,CAAC,MAAK;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n isNotRootProvider: isLocal = false,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n // This component supports both controlled (via props) and uncontrolled (via context setters) usage.\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior\n setTheme(normalizeTheme(initialTheme));\n }, [initialTheme]);\n\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (!isLocal && isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isLocal, isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","isLocal","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,yBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,0BAAmB;EACnDC,iBAAiB,EAAEC,OAAO,GAAG,KAAK;EAClCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACV,KAAK,EAAEc,QAAQ,CAAC,GAAGC,cAAQ,CAACC,sBAAc,CAACf,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEc,aAAa,CAAC,GAAGF,cAAQ,CAACX,iBAAiB,CAAC;AAE/D;AACA;AACAc,EAAAA,eAAS,CAAC,MAAK;AACb;AACAJ,IAAAA,QAAQ,CAACE,sBAAc,CAACf,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBiB,EAAAA,eAAS,CAAC,MAAK;AACb;IACAD,aAAa,CAACb,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAc,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACX,OAAO,IAAII,aAAa,EAAE;AAC7B;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACvB,UAAU,CAAC,EAAEwB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAAC1B,KAAK,EAAEG,UAAU,CAAC,CACjCwB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAAChB,OAAO,EAAEI,aAAa,EAAEX,KAAK,EAAEG,UAAU,CAAC,CAAC;AAE/C,EAAA,MAAM0B,YAAY,GAAGC,aAAO,CAC1B,OAAO;IAAE9B,KAAK;IAAEG,UAAU;IAAEW,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACjB,KAAK,EAAEG,UAAU,EAAEW,QAAQ,EAAEG,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,cAAA,CAAClB,iCAAY,CAACmB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAArB,QAAA,eACzCuB,cAAA,CAACG,6BAAc,EAAA;AAACzB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
|
package/dist/ThemeProvider.mjs
CHANGED
|
@@ -17,10 +17,13 @@ const ThemeProvider = ({
|
|
|
17
17
|
const [theme, setTheme] = useState(normalizeTheme(initialTheme));
|
|
18
18
|
const [screenMode, setScreenMode] = useState(initialScreenMode);
|
|
19
19
|
// Update state when props change (for controlled usage)
|
|
20
|
+
// This component supports both controlled (via props) and uncontrolled (via context setters) usage.
|
|
20
21
|
useEffect(() => {
|
|
22
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior
|
|
21
23
|
setTheme(normalizeTheme(initialTheme));
|
|
22
24
|
}, [initialTheme]);
|
|
23
25
|
useEffect(() => {
|
|
26
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior
|
|
24
27
|
setScreenMode(initialScreenMode);
|
|
25
28
|
}, [initialScreenMode]);
|
|
26
29
|
// useEffect hook used to apply the theme class to the HTML element
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n isNotRootProvider: isLocal = false,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n useEffect(() => {\n setTheme(normalizeTheme(initialTheme));\n }, [initialTheme]);\n\n useEffect(() => {\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (!isLocal && isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isLocal, isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","isLocal","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,kBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,mBAAmB;EACnDC,iBAAiB,EAAEC,OAAO,GAAG,KAAK;EAClCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACV,KAAK,EAAEc,QAAQ,CAAC,GAAGC,QAAQ,CAACC,cAAc,CAACf,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEc,aAAa,CAAC,GAAGF,QAAQ,CAACX,iBAAiB,CAAC;AAE/D;AACAc,EAAAA,SAAS,CAAC,MAAK;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n isNotRootProvider: isLocal = false,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n // This component supports both controlled (via props) and uncontrolled (via context setters) usage.\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior\n setTheme(normalizeTheme(initialTheme));\n }, [initialTheme]);\n\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (!isLocal && isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isLocal, isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","isLocal","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,kBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,mBAAmB;EACnDC,iBAAiB,EAAEC,OAAO,GAAG,KAAK;EAClCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACV,KAAK,EAAEc,QAAQ,CAAC,GAAGC,QAAQ,CAACC,cAAc,CAACf,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEc,aAAa,CAAC,GAAGF,QAAQ,CAACX,iBAAiB,CAAC;AAE/D;AACA;AACAc,EAAAA,SAAS,CAAC,MAAK;AACb;AACAJ,IAAAA,QAAQ,CAACE,cAAc,CAACf,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBiB,EAAAA,SAAS,CAAC,MAAK;AACb;IACAD,aAAa,CAACb,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAc,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACX,OAAO,IAAII,aAAa,EAAE;AAC7B;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACvB,UAAU,CAAC,EAAEwB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAAC1B,KAAK,EAAEG,UAAU,CAAC,CACjCwB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAAChB,OAAO,EAAEI,aAAa,EAAEX,KAAK,EAAEG,UAAU,CAAC,CAAC;AAE/C,EAAA,MAAM0B,YAAY,GAAGC,OAAO,CAC1B,OAAO;IAAE9B,KAAK;IAAEG,UAAU;IAAEW,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACjB,KAAK,EAAEG,UAAU,EAAEW,QAAQ,EAAEG,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,GAAA,CAAClB,YAAY,CAACmB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAArB,QAAA,eACzCuB,GAAA,CAACG,cAAc,EAAA;AAACzB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
|
package/dist/helpers.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB;;GAEG;
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB;;GAEG;AAEH,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WAAmB,CAAC;AAElG,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cAA+C,CAAC;AAEjE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAmC7F,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAA6C,CAAC"}
|
package/dist/helpers.js
CHANGED
|
@@ -5,6 +5,7 @@ var _const = require('./const.js');
|
|
|
5
5
|
/**
|
|
6
6
|
* @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
|
|
7
7
|
*/
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Parameter required for type predicate signature
|
|
8
9
|
const isThemeModern = theme => true;
|
|
9
10
|
const isExtraTheme = theme => _const.extraThemes.includes(theme);
|
|
10
11
|
const isForestGreenTheme = theme => theme === _const.extraThemes[0];
|
package/dist/helpers.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Parameter required for type predicate signature\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n theme: NonNullable<Theming['theme']>,\n screenMode: ScreenMode,\n): screenMode is ScreenModeDark => screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n // Personal light is always there by default\n const themeClasses = ['np-theme-personal'];\n\n /* eslint-disable functional/immutable-data */\n // Personal dark theme\n if (theme === 'personal' && screenMode === 'dark') {\n themeClasses.push(`np-theme-personal--${screenMode}`);\n }\n\n // Personal forest-green and bright-green themes\n else if (['forest-green', 'bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-personal--${theme}`);\n }\n\n // Business light\n else if (theme === 'business') {\n themeClasses.push(`np-theme-business`);\n // Business dark theme\n if (screenMode === 'dark') {\n themeClasses.push(`np-theme-business--${screenMode}`);\n }\n }\n\n // Business forest-green and bright-green themes\n else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-${theme}`);\n }\n\n // Platform themes\n else if (theme.startsWith('platform')) {\n themeClasses.push(`np-theme-${theme}`);\n }\n /* eslint-enable functional/immutable-data */\n return themeClasses.join(' ');\n};\n\nexport const normalizeTheme = (\n theme: NonNullable<Theming['theme']>,\n): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);\n"],"names":["isThemeModern","theme","isExtraTheme","extraThemes","includes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join","normalizeTheme"],"mappings":";;;;AAUA;;AAEG;AACH;AACO,MAAMA,aAAa,GAAIC,KAAoC,IAA2B;AAEtF,MAAMC,YAAY,GAAID,KAAoC,IAC/DE,kBAAW,CAACC,QAAQ,CAACH,KAAmB;AAEnC,MAAMI,kBAAkB,GAC7BJ,KAAoC,IACNA,KAAK,KAAKE,kBAAW,CAAC,CAAC;AAEhD,MAAMG,gBAAgB,GAAGA,CAC9BL,KAAoC,EACpCM,UAAsB,KACWC,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAEzCE,iBAAiB,GAAGA,CAACR,KAAoC,EAAEM,UAAsB,KAAI;AAChG;AACA,EAAA,MAAMG,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIT,KAAK,KAAK,UAAU,IAAIM,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AACzDS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBV,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AAC7ES,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACW,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOS,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;AAEO,MAAMC,cAAc,GACzBb,KAAoC,IACDA,KAAK,KAAK,OAAO,GAAG,UAAU,GAAGA;;;;;;;;;"}
|
package/dist/helpers.mjs
CHANGED
|
@@ -3,6 +3,7 @@ import { extraThemes, screenModes } from './const.mjs';
|
|
|
3
3
|
/**
|
|
4
4
|
* @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
|
|
5
5
|
*/
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Parameter required for type predicate signature
|
|
6
7
|
const isThemeModern = theme => true;
|
|
7
8
|
const isExtraTheme = theme => extraThemes.includes(theme);
|
|
8
9
|
const isForestGreenTheme = theme => theme === extraThemes[0];
|
package/dist/helpers.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes
|
|
1
|
+
{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Parameter required for type predicate signature\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n theme: NonNullable<Theming['theme']>,\n screenMode: ScreenMode,\n): screenMode is ScreenModeDark => screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n // Personal light is always there by default\n const themeClasses = ['np-theme-personal'];\n\n /* eslint-disable functional/immutable-data */\n // Personal dark theme\n if (theme === 'personal' && screenMode === 'dark') {\n themeClasses.push(`np-theme-personal--${screenMode}`);\n }\n\n // Personal forest-green and bright-green themes\n else if (['forest-green', 'bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-personal--${theme}`);\n }\n\n // Business light\n else if (theme === 'business') {\n themeClasses.push(`np-theme-business`);\n // Business dark theme\n if (screenMode === 'dark') {\n themeClasses.push(`np-theme-business--${screenMode}`);\n }\n }\n\n // Business forest-green and bright-green themes\n else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-${theme}`);\n }\n\n // Platform themes\n else if (theme.startsWith('platform')) {\n themeClasses.push(`np-theme-${theme}`);\n }\n /* eslint-enable functional/immutable-data */\n return themeClasses.join(' ');\n};\n\nexport const normalizeTheme = (\n theme: NonNullable<Theming['theme']>,\n): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);\n"],"names":["isThemeModern","theme","isExtraTheme","extraThemes","includes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join","normalizeTheme"],"mappings":";;AAUA;;AAEG;AACH;AACO,MAAMA,aAAa,GAAIC,KAAoC,IAA2B;AAEtF,MAAMC,YAAY,GAAID,KAAoC,IAC/DE,WAAW,CAACC,QAAQ,CAACH,KAAmB;AAEnC,MAAMI,kBAAkB,GAC7BJ,KAAoC,IACNA,KAAK,KAAKE,WAAW,CAAC,CAAC;AAEhD,MAAMG,gBAAgB,GAAGA,CAC9BL,KAAoC,EACpCM,UAAsB,KACWC,WAAW,CAAC,CAAC,CAAC,KAAKD;MAEzCE,iBAAiB,GAAGA,CAACR,KAAoC,EAAEM,UAAsB,KAAI;AAChG;AACA,EAAA,MAAMG,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIT,KAAK,KAAK,UAAU,IAAIM,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AACzDS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBV,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AAC7ES,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACW,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOS,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;AAEO,MAAMC,cAAc,GACzBb,KAAoC,IACDA,KAAK,KAAK,OAAO,GAAG,UAAU,GAAGA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/components-theming",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.3",
|
|
4
4
|
"description": "Provides theming support for the Wise Design system components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": [
|
|
@@ -12,30 +12,30 @@
|
|
|
12
12
|
"url": "git+https://github.com/transferwise/neptune-web.git"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@babel/runtime": "^7.29.
|
|
15
|
+
"@babel/runtime": "^7.29.7",
|
|
16
16
|
"clsx": "^2.1.1"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@babel/core": "^7.29.
|
|
20
|
-
"@babel/plugin-transform-runtime": "^7.29.
|
|
21
|
-
"@babel/preset-env": "^7.29.
|
|
22
|
-
"@babel/preset-react": "^7.
|
|
23
|
-
"@babel/preset-typescript": "^7.
|
|
24
|
-
"@rollup/plugin-babel": "^7.
|
|
19
|
+
"@babel/core": "^7.29.7",
|
|
20
|
+
"@babel/plugin-transform-runtime": "^7.29.7",
|
|
21
|
+
"@babel/preset-env": "^7.29.7",
|
|
22
|
+
"@babel/preset-react": "^7.29.7",
|
|
23
|
+
"@babel/preset-typescript": "^7.29.7",
|
|
24
|
+
"@rollup/plugin-babel": "^7.1.0",
|
|
25
25
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
26
26
|
"@testing-library/dom": "^10.4.1",
|
|
27
27
|
"@testing-library/jest-dom": "^6.9.1",
|
|
28
28
|
"@testing-library/react": "^16.3.2",
|
|
29
29
|
"@tsconfig/recommended": "^1.0.13",
|
|
30
30
|
"@types/babel__core": "^7.20.5",
|
|
31
|
-
"@types/jest": "^
|
|
32
|
-
"@types/react": "^18.3.
|
|
31
|
+
"@types/jest": "^29.5.14",
|
|
32
|
+
"@types/react": "^18.3.31",
|
|
33
33
|
"@types/react-dom": "^18.3.7",
|
|
34
|
-
"@wise/eslint-config": "^
|
|
34
|
+
"@wise/eslint-config": "^14.2.1",
|
|
35
35
|
"eslint": "^9.39.4",
|
|
36
|
-
"jest": "^
|
|
36
|
+
"jest": "^29.7.0",
|
|
37
37
|
"jest-environment-jsdom": "^29.7.0",
|
|
38
|
-
"rollup": "^4.
|
|
38
|
+
"rollup": "^4.61.1",
|
|
39
39
|
"rollup-preserve-directives": "^1.1.3",
|
|
40
40
|
"@wise/wds-configs": "0.0.0"
|
|
41
41
|
},
|
|
@@ -65,6 +65,10 @@
|
|
|
65
65
|
"access": "public",
|
|
66
66
|
"registry": "https://registry.npmjs.org/"
|
|
67
67
|
},
|
|
68
|
+
"wise": {
|
|
69
|
+
"platform": "wise-library",
|
|
70
|
+
"strict": true
|
|
71
|
+
},
|
|
68
72
|
"scripts": {
|
|
69
73
|
"build": "rollup --config --sourcemap",
|
|
70
74
|
"test": "jest",
|
package/src/ThemeProvider.tsx
CHANGED
|
@@ -23,11 +23,14 @@ export const ThemeProvider = ({
|
|
|
23
23
|
const [screenMode, setScreenMode] = useState(initialScreenMode);
|
|
24
24
|
|
|
25
25
|
// Update state when props change (for controlled usage)
|
|
26
|
+
// This component supports both controlled (via props) and uncontrolled (via context setters) usage.
|
|
26
27
|
useEffect(() => {
|
|
28
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior
|
|
27
29
|
setTheme(normalizeTheme(initialTheme));
|
|
28
30
|
}, [initialTheme]);
|
|
29
31
|
|
|
30
32
|
useEffect(() => {
|
|
33
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Required for semi-controlled component behavior
|
|
31
34
|
setScreenMode(initialScreenMode);
|
|
32
35
|
}, [initialScreenMode]);
|
|
33
36
|
|
package/src/helpers.ts
CHANGED
|
@@ -6,11 +6,12 @@ import type {
|
|
|
6
6
|
ScreenModeDark,
|
|
7
7
|
Theming,
|
|
8
8
|
} from './const';
|
|
9
|
-
import { extraThemes, screenModes
|
|
9
|
+
import { extraThemes, screenModes } from './const';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
|
|
13
13
|
*/
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Parameter required for type predicate signature
|
|
14
15
|
export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;
|
|
15
16
|
|
|
16
17
|
export const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>
|