@wise/components-theming 1.2.0 → 1.2.1

package/dist/ThemeProvider.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import type { ScreenMode, Theming } from './const';
 export declare const ThemeContext: import("react").Context<{
-    theme: Theming['theme'];
+    theme: NonNullable<Theming['theme']>;
     screenMode: ScreenMode;
 } | undefined>;
 type ThemeProviderProps = PropsWithChildren<Theming> & {

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAGzF,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,YAAY;WAEZ,OAAO,CAAC,OAAO,CAAC;gBACX,UAAU;cAGhB,CAAC;AAEb,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,eAAO,MAAM,aAAa,mEAMvB,kBAAkB,gCA6BpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAGzF,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,YAAY;WAEZ,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC;gBACxB,UAAU;cAGhB,CAAC;AAEb,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,mEAMvB,kBAAkB,gCAyBpB,CAAC"}

package/dist/index.js

@@ -79,6 +79,8 @@ const ThemedChildren = ({
 };
 
 const ThemeContext = /*#__PURE__*/react.createContext(undefined);
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
@@ -87,9 +89,6 @@ const ThemeProvider = ({
   className = undefined
 }) => {
   const isContextRoot = react.useContext(ThemeContext) === undefined;
-  // RegEx to check for `np-theme-` class name
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
   // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -101,7 +100,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = react.useMemo(() => ({
     theme,
     screenMode

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","includes","isExtraTheme","isForestGreenTheme","theme","isScreenModeDark","screenMode","getThemeClassName","FALLBACK_VALUES","isNotProduction","ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","useContext","ThemeContext","RegExp"],"mappings":";;;;;;;;;;AACA;AACO,MAAAA,UAAiB,GAAA,CAAA,OAAA,EAAA,UAAA,CAAA,CAAA;AACjB,MAAAC,WAAiB,GAAA,CAAA,cAAA,EAAA,cAAA,CAAA,CAAA;AACjB,MAAAC,WAAkB,GAAA,CAAA,OAAA,EAAA,MAAA,CAAA,CAAA;AAClB,MAAAC,YAAoB,GAAA,CAAAH,UAAA,CAAA,CAAA,CAAA,EAAA,GAAAC,WAAA,CAAA,CAAA;AAIrB,MAAiBG,kBAAI,GAAO;AAC5B,MAAeC,mBAAW,UAAU;;ACAnC,MAAAC,qBAA8B,IAAAH,YAAQ,CAAOI;AAG7C,MAAAC,oBAA6B,IAAAP,WAAO,CAACM,QAAQ;AAG7C,MAAAE,0BAAmC,IAAAC,KAAA,KAAAT;MAGnCU,gBAAsB,GAAAA,CAAAD,KAAA,EAAAE,UACb,KAACN,aAAQ,CAAAI,KAAA,CAAA,IACDR,WAAA,CAAA,CAAA,CAAA,KAAAU,WAAA;MAIjBC,iBAAuB,GAAAA,CAAAH,KAAA,EAAAE,UAAkB,KAAC;;;;;;;;;;;;;MCfvCE,eAAS,GAAC;AAClBJ,EAAAA,KAAkB,EAAAN;AAClBQ,EAAAA,UAAgB,EAAAP,mBAAAA;;AAEjB,MAAAU,eAAA,GAAAA,MAAA;EAeD,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBsC,MAAAC,cAAU,GAAAA,CAAA;AAAAC,EAAAA,SAAA,GAAAC,SAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,KAAA;EAAC,MAAQ;AAAAF,IAAAA,WAAWG,UAAAA;GAAA,GAAAC,QAAA,EAAA,CAAA;AAAG,EAAA,oBAAAC,cAAA,CAAA,KAAA,EAAA;AAAAL,IAAAA,SAAA,EAAAM,2BAAA,CAAAH,UAAA,EAAAH,SAAA,CAAA;AAAAE,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAEvE,CAAA;;kBCG4B,gBAAAK,mBAAA,CAAAN,SAAA,CAAA,CAAA;mBAGf,GAAAO,CAAA;AAAAf,EAAAA,KAAA,GAAAN,kBAAA;AAAAQ,EAAAA,UAAA,GAAAP,mBAAA;AAAAqB,EAAAA,iBAAA,GAAA,KAAA;EAAAP,QAAA;AAAAF,EAAAA,SAAA,GAAAC,SAAAA;AAAA,CAAA,KAAA;AAEb,EAAA,mBAAuB,GAAGS,gBAAA,CAAAC,YAAkB,CAAA,KAAWV,SAAA,CAAA;AAAE;AAAqB;EAE9E,MAAAE,UAAa,GAAA,IAAAS,MAAA,CAAa,sBAMvB,EAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: Theming['theme']): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: Theming['theme']): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (theme: Theming['theme']): theme is ForestGreenTheme =>\n  theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: Theming['theme'],\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: Theming['theme'], screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: Theming['theme'];\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && 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  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","undefined","children","themeClass","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","isContextRoot","useEffect","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/dist/index.mjs

@@ -73,6 +73,8 @@ const ThemedChildren = ({
 };
 
 const ThemeContext = /*#__PURE__*/createContext(undefined);
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
@@ -81,9 +83,6 @@ const ThemeProvider = ({
   className = undefined
 }) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
-  // RegEx to check for `np-theme-` class name
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -95,7 +94,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = useMemo(() => ({
     theme,
     screenMode

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","includes","isExtraTheme","isForestGreenTheme","theme","isScreenModeDark","screenMode","getThemeClassName","FALLBACK_VALUES","isNotProduction","ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","useContext","ThemeContext","RegExp"],"mappings":";;;;AACA;AACO,MAAAA,UAAiB,GAAA,CAAA,OAAA,EAAA,UAAA,CAAA,CAAA;AACjB,MAAAC,WAAiB,GAAA,CAAA,cAAA,EAAA,cAAA,CAAA,CAAA;AACjB,MAAAC,WAAkB,GAAA,CAAA,OAAA,EAAA,MAAA,CAAA,CAAA;AAClB,MAAAC,YAAoB,GAAA,CAAAH,UAAA,CAAA,CAAA,CAAA,EAAA,GAAAC,WAAA,CAAA,CAAA;AAIrB,MAAiBG,kBAAI,GAAO;AAC5B,MAAeC,mBAAW,UAAU;;ACAnC,MAAAC,qBAA8B,IAAAH,YAAQ,CAAOI;AAG7C,MAAAC,oBAA6B,IAAAP,WAAO,CAACM,QAAQ;AAG7C,MAAAE,0BAAmC,IAAAC,KAAA,KAAAT;MAGnCU,gBAAsB,GAAAA,CAAAD,KAAA,EAAAE,UACb,KAACN,aAAQ,CAAAI,KAAA,CAAA,IACDR,WAAA,CAAA,CAAA,CAAA,KAAAU,WAAA;MAIjBC,iBAAuB,GAAAA,CAAAH,KAAA,EAAAE,UAAkB,KAAC;;;;;;;;;;;;;MCfvCE,eAAS,GAAC;AAClBJ,EAAAA,KAAkB,EAAAN;AAClBQ,EAAAA,UAAgB,EAAAP,mBAAAA;;AAEjB,MAAAU,eAAA,GAAAA,MAAA;EAeD,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBsC,MAAAC,cAAU,GAAAA,CAAA;AAAAC,EAAAA,SAAA,GAAAC,SAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,KAAA;EAAC,MAAQ;AAAAF,IAAAA,WAAWG,UAAAA;GAAA,GAAAC,QAAA,EAAA,CAAA;AAAG,EAAA,oBAAAC,GAAA,CAAA,KAAA,EAAA;AAAAL,IAAAA,SAAA,EAAAM,UAAA,CAAAH,UAAA,EAAAH,SAAA,CAAA;AAAAE,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAEvE,CAAA;;kBCG4B,gBAAAK,aAAA,CAAAN,SAAA,CAAA,CAAA;mBAGf,GAAAO,CAAA;AAAAf,EAAAA,KAAA,GAAAN,kBAAA;AAAAQ,EAAAA,UAAA,GAAAP,mBAAA;AAAAqB,EAAAA,iBAAA,GAAA,KAAA;EAAAP,QAAA;AAAAF,EAAAA,SAAA,GAAAC,SAAAA;AAAA,CAAA,KAAA;AAEb,EAAA,mBAAuB,GAAGS,UAAA,CAAAC,YAAkB,CAAA,KAAWV,SAAA,CAAA;AAAE;AAAqB;EAE9E,MAAAE,UAAa,GAAA,IAAAS,MAAA,CAAa,sBAMvB,EAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: Theming['theme']): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: Theming['theme']): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (theme: Theming['theme']): theme is ForestGreenTheme =>\n  theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: Theming['theme'],\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: Theming['theme'], screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: Theming['theme'];\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && 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  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","undefined","children","themeClass","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","isContextRoot","useEffect","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -12,32 +12,31 @@
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.15",
-    "classnames": "^2.3.2"
+    "@babel/runtime": "^7.24.5",
+    "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-typescript": "^11.1.3",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@tsconfig/recommended": "^1.0.2",
-    "@types/babel__core": "^7.20.1",
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@tsconfig/recommended": "^1.0.6",
+    "@types/babel__core": "^7.20.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^18.15.12",
-    "@types/react": "^17.0.65",
-    "@types/react-dom": "^17.0.20",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "classnames": "^2.3.2",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.25",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "classnames": "^2.5.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^3.28.1",
-    "typescript": "4.9.4"
+    "rollup": "^4.17.2",
+    "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": ">=16.14",

package/src/ThemeProvider.tsx

@@ -7,7 +7,7 @@ import { getThemeClassName } from './helpers';
 
 export const ThemeContext = createContext<
   | {
-      theme: Theming['theme'];
+      theme: NonNullable<Theming['theme']>;
       screenMode: ScreenMode;
     }
   | undefined
@@ -15,6 +15,9 @@ export const ThemeContext = createContext<
 
 type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };
 
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
+
 export const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
@@ -24,10 +27,6 @@ export const ThemeProvider = ({
 }: ThemeProviderProps) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
 
-  // RegEx to check for `np-theme-` class name
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
-
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -41,7 +40,7 @@ export const ThemeProvider = ({
           document.documentElement.classList.add(item);
         });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
 
   const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);