@wise/components-theming 1.10.1 → 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.
@@ -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,gCAuCpB,CAAC"}
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"}
@@ -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;AACbJ,IAAAA,QAAQ,CAACE,sBAAc,CAACf,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBiB,EAAAA,eAAS,CAAC,MAAK;IACbD,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;;;;"}
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;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { useContext, useState, useEffect, useMemo } from 'react';
2
2
  import { ThemedChildren } from './ThemedChildren.mjs';
3
- import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
3
+ import { DEFAULT_SCREEN_MODE, DEFAULT_BASE_THEME } from './const.mjs';
4
4
  import { normalizeTheme, getThemeClassName } from './helpers.mjs';
5
5
  import { ThemeContext } from './ThemeProviderContext.mjs';
6
6
  import { jsx } from 'react/jsx-runtime';
@@ -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;AACbJ,IAAAA,QAAQ,CAACE,cAAc,CAACf,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBiB,EAAAA,SAAS,CAAC,MAAK;IACbD,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;;;;"}
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;;;;"}
@@ -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;AACH,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"}
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];
@@ -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, modernThemes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\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;AACI,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;;;;;;;;;"}
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];
@@ -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, modernThemes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\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;AACI,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;;;;"}
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.1",
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.28.4",
15
+ "@babel/runtime": "^7.29.7",
16
16
  "clsx": "^2.1.1"
17
17
  },
18
18
  "devDependencies": {
19
- "@babel/core": "^7.28.5",
20
- "@babel/plugin-transform-runtime": "^7.28.5",
21
- "@babel/preset-env": "^7.28.5",
22
- "@babel/preset-react": "^7.28.5",
23
- "@babel/preset-typescript": "^7.28.5",
24
- "@rollup/plugin-babel": "^6.1.0",
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
- "@testing-library/react": "^16.3.1",
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": "^30.0.0",
32
- "@types/react": "^18.3.23",
31
+ "@types/jest": "^29.5.14",
32
+ "@types/react": "^18.3.31",
33
33
  "@types/react-dom": "^18.3.7",
34
- "@wise/eslint-config": "^13.3.0",
35
- "eslint": "^9.39.2",
36
- "jest": "^30.2.0",
34
+ "@wise/eslint-config": "^14.2.1",
35
+ "eslint": "^9.39.4",
36
+ "jest": "^29.7.0",
37
37
  "jest-environment-jsdom": "^29.7.0",
38
- "rollup": "^4.54.0",
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",
@@ -1,4 +1,4 @@
1
- import { render, screen, waitFor } from '@testing-library/react';
1
+ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
2
2
 
3
3
  import { ThemeProvider, ThemeProviderProps } from './ThemeProvider';
4
4
  import { useState } from 'react';
@@ -106,7 +106,7 @@ describe('ThemeProvider', () => {
106
106
  expect(screen.getByText('content').parentElement).toHaveClass('np-theme-personal');
107
107
 
108
108
  // Change to business theme
109
- screen.getByText('Change to business').click();
109
+ fireEvent.click(screen.getByText('Change to business'));
110
110
  await waitFor(() => {
111
111
  // eslint-disable-next-line testing-library/no-node-access
112
112
  expect(screen.getByText('content').parentElement).toHaveClass(
@@ -116,7 +116,7 @@ describe('ThemeProvider', () => {
116
116
  });
117
117
 
118
118
  // Change to dark mode
119
- screen.getByText('Change to dark').click();
119
+ fireEvent.click(screen.getByText('Change to dark'));
120
120
  await waitFor(() => {
121
121
  // eslint-disable-next-line testing-library/no-node-access
122
122
  expect(screen.getByText('content').parentElement).toHaveClass(
@@ -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, modernThemes } from './const';
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 =>
File without changes