@wise/components-theming 0.1.2-next-b9f447bdaa.2571 → 0.1.2-next-9ff5b52e35.2579

package/dist/cjs/index.d.ts

@@ -5,9 +5,10 @@ declare const componentThemes: readonly [
     "personal"
 ];
 type ComponentTheme = (typeof componentThemes)[number];
-type ThemeProviderProps = PropsWithChildren<{
-    theme: ComponentTheme | undefined;
-}>;
+type Theming = {
+    theme?: ComponentTheme;
+};
+type ThemeProviderProps = PropsWithChildren<Theming>;
 declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
 interface ThemeHookValue {
     theme: ComponentTheme;
@@ -16,5 +17,5 @@ interface ThemeHookValue {
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
-export type { ComponentTheme };
+export type { ComponentTheme, Theming };
 export { ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -7,36 +7,6 @@ var modernThemes = ['personal'];
 var darkThemes = [];
 var DEFAULT_COMPONENT_THEME = 'light';
 
-var ThemeContext = /*#__PURE__*/react.createContext(DEFAULT_COMPONENT_THEME);
-var ThemeProvider = function ThemeProvider(_ref) {
-  var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
-      children = _ref.children;
-  var themedChildren = react.Children.map(children, function (child) {
-    var _child$props;
-
-    if (! /*#__PURE__*/react.isValidElement(child)) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.warn('[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!');
-      }
-
-      return child;
-    } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-
-
-    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
-    return /*#__PURE__*/react.cloneElement(child, {
-      className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-    });
-  });
-  return jsxRuntime.jsx(ThemeContext.Provider, {
-    value: theme,
-    children: themedChildren
-  });
-};
-
 var isThemeModern = function isThemeModern(theme) {
   return modernThemes.includes(theme);
 };
@@ -61,6 +31,58 @@ var useTheme = function useTheme() {
   }, [theme]);
 };
 
+var ThemeScript = /*#__PURE__*/react.memo(function () {
+  var _useTheme = useTheme(),
+      className = _useTheme.className;
+
+  var scriptSource = react.useMemo(function () {
+    return "!(function () {try {document.documentElement.classList.add('".concat(className, "');} catch (e) {}})();");
+  }, [className]); // eslint-disable-next-line react/no-danger
+
+  return jsxRuntime.jsx("script", {
+    dangerouslySetInnerHTML: {
+      __html: scriptSource
+    }
+  });
+}, // Never re-render this component
+function () {
+  return true;
+});
+
+var ThemedChildren = function ThemedChildren(_ref) {
+  var children = _ref.children;
+
+  var _useTheme = useTheme(),
+      className = _useTheme.className;
+
+  return jsxRuntime.jsx("div", {
+    className: className,
+    children: children
+  });
+};
+
+var ThemeContext = /*#__PURE__*/react.createContext(undefined);
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+      children = _ref.children;
+  var isRootProvider = react.useContext(ThemeContext) === undefined;
+
+  if (isRootProvider) {
+    return jsxRuntime.jsxs(ThemeContext.Provider, {
+      value: theme,
+      children: [jsxRuntime.jsx(ThemeScript, {}), children]
+    });
+  }
+
+  return jsxRuntime.jsx(ThemeContext.Provider, {
+    value: theme,
+    children: jsxRuntime.jsx(ThemedChildren, {
+      children: children
+    })
+  });
+};
+
 exports.ThemeProvider = ThemeProvider;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/helpers.ts","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","isThemeModern","includes","isThemeDark","getThemeClassName","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAD,CAArB,CAAA;AACA,IAAMC,UAAU,GAAG,EAAnB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACHA,IAAMC,YAAY,gBAAGC,mBAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,cAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,oBAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,kBAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,cAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AClCM,IAAMoB,aAAa,GAAG,SAAhBA,aAAgB,CAACtB,KAAD,EAAA;AAAA,EAAA,OAC3BN,YAAY,CAAC6B,QAAb,CAAsBvB,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAMwB,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD,EAAA;AAAA,EAAA,OACzBL,UAAU,CAAC4B,QAAX,CAAoBvB,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMyB,iBAAiB,GAAG,SAApBA,iBAAoB,CAACzB,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACKM0B,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAM1B,KAAK,GAAG2B,CAAAA,WAAAA,GAAAA,gBAAU,CAAC9B,YAAD,CAAb,qDAA+BD,uBAA1C,CAAA;AAEA,EAAA,OAAOgC,aAAO,CACZ,YAAA;IAAA,OAAO;AACL5B,MAAAA,KAAK,EAALA,KADK;AAEL6B,MAAAA,QAAQ,EAAEP,aAAa,CAACtB,KAAD,CAFlB;AAGL8B,MAAAA,MAAM,EAAEN,WAAW,CAACxB,KAAD,CAHd;MAILc,SAAS,EAAEW,iBAAiB,CAACzB,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemeScript.tsx","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n","import { memo, useMemo } from 'react';\n\nimport { useTheme } from './useTheme';\n\nexport const ThemeScript = memo(\n  () => {\n    const { className } = useTheme();\n\n    const scriptSource = useMemo(() => {\n      return `!(function () {try {document.documentElement.classList.add('${className}');} catch (e) {}})();`;\n    }, [className]);\n\n    // eslint-disable-next-line react/no-danger\n    return <script dangerouslySetInnerHTML={{ __html: scriptSource }} />;\n  },\n  // Never re-render this component\n  () => true,\n);\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext } from 'react';\n\nimport { ThemeScript } from './ThemeScript';\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext) === undefined;\n\n  if (isRootProvider) {\n    return (\n      <ThemeContext.Provider value={theme}>\n        <ThemeScript />\n        {children}\n      </ThemeContext.Provider>\n    );\n  }\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemeScript","memo","scriptSource","_jsx","dangerouslySetInnerHTML","__html","ThemedChildren","children","createContext","undefined","ThemeProvider","isRootProvider","_jsxs","Provider","value"],"mappings":";;;;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAD,CAArB,CAAA;AACA,IAAMC,UAAU,GAAG,EAAnB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACNA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAA;AAAA,EAAA,OAC3BJ,YAAY,CAACK,QAAb,CAAsBD,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAME,WAAW,GAAG,SAAdA,WAAc,CAACF,KAAD,EAAA;AAAA,EAAA,OACzBH,UAAU,CAACI,QAAX,CAAoBD,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAACH,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACKMI,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAMJ,KAAK,GAAGK,CAAAA,WAAAA,GAAAA,gBAAU,CAACC,YAAD,CAAb,qDAA+BR,uBAA1C,CAAA;AAEA,EAAA,OAAOS,aAAO,CACZ,YAAA;IAAA,OAAO;AACLP,MAAAA,KAAK,EAALA,KADK;AAELQ,MAAAA,QAAQ,EAAET,aAAa,CAACC,KAAD,CAFlB;AAGLS,MAAAA,MAAM,EAAEP,WAAW,CAACF,KAAD,CAHd;MAILU,SAAS,EAAEP,iBAAiB,CAACH,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;ACrBM,IAAMW,WAAW,gBAAGC,UAAI,CAC7B,YAAK;AACH,EAAA,IAAA,SAAA,GAAsBR,QAAQ,EAA9B;MAAQM,SAAR,aAAQA,SAAR,CAAA;;AAEA,EAAA,IAAMG,YAAY,GAAGN,aAAO,CAAC,YAAK;AAChC,IAAA,OAAA,8DAAA,CAAA,MAAA,CAAsEG,SAAtE,EAAA,wBAAA,CAAA,CAAA;AACD,GAF2B,EAEzB,CAACA,SAAD,CAFyB,CAA5B,CAHG;;EAQH,OAAOI,cAAAA,CAAAA,QAAAA,EAAAA;AAAQC,IAAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEH,YAAAA;AAAV,KAAA;GAAxC,CAAA,CAAA;AACD,CAV4B;AAY7B,YAAA;AAAA,EAAA,OAAM,IAAN,CAAA;AAAA,CAZ6B,CAAxB;;ACEA,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,CAAsC,IAAA,EAAA;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC,CAAA;;AAClE,EAAA,IAAA,SAAA,GAAsBd,QAAQ,EAA9B;MAAQM,SAAR,aAAQA,SAAR,CAAA;;EAEA,OAAOI,cAAAA,CAAAA,KAAAA,EAAAA;AAAKJ,IAAAA,SAAS,EAAEA,SAAhB;IAAyBQ,QAAGA,EAAAA,QAAAA;GAAnC,CAAA,CAAA;AACD,CAJM;;ACAA,IAAMZ,YAAY,gBAAGa,mBAAa,CAA6BC,SAA7B,CAAlC,CAAA;AAIMC,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBrB,KAEuB;MAFvBA,KAEuB,2BAFfF,uBAEe,GAAA,UAAA;MADvBoB,QACuB,QADvBA,QACuB,CAAA;AACvB,EAAA,IAAMI,cAAc,GAAGjB,gBAAU,CAACC,YAAD,CAAV,KAA6Bc,SAApD,CAAA;;AAEA,EAAA,IAAIE,cAAJ,EAAoB;AAClB,IAAA,OACEC,eAACjB,CAAAA,YAAY,CAACkB,QAAd,EAAsB;AAACC,MAAAA,KAAK,EAAEzB,KAAR;AAAakB,MAAAA,QAAAA,EAAAA,CACjCJ,eAACH,WAAD,EAAY,EAAZ,CADiC,EAEhCO,QAFgC,CAAA;AAAb,KAAtB,CADF,CAAA;AAMD,GAAA;;AAED,EAAA,OACEJ,cAACR,CAAAA,YAAY,CAACkB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAEzB,KAAR;IAAakB,QACjCJ,EAAAA,cAAAA,CAACG,cAAD,EAAe;MAAAC,QAAEA,EAAAA,QAAAA;KAAjB,CAAA;AADoB,GAAtB,CADF,CAAA;AAKD;;;;;"}

package/dist/es/index.d.ts

@@ -5,9 +5,10 @@ declare const componentThemes: readonly [
     "personal"
 ];
 type ComponentTheme = (typeof componentThemes)[number];
-type ThemeProviderProps = PropsWithChildren<{
-    theme: ComponentTheme | undefined;
-}>;
+type Theming = {
+    theme?: ComponentTheme;
+};
+type ThemeProviderProps = PropsWithChildren<Theming>;
 declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
 interface ThemeHookValue {
     theme: ComponentTheme;
@@ -16,5 +17,5 @@ interface ThemeHookValue {
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
-export type { ComponentTheme };
+export type { ComponentTheme, Theming };
 export { ThemeProvider, useTheme };

package/dist/es/index.js

@@ -1,40 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createContext, useContext, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, useMemo, memo, createContext } from 'react';
 
 var modernThemes = ['personal'];
 var darkThemes = [];
 var DEFAULT_COMPONENT_THEME = 'light';
 
-var ThemeContext = /*#__PURE__*/createContext(DEFAULT_COMPONENT_THEME);
-var ThemeProvider = function ThemeProvider(_ref) {
-  var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
-      children = _ref.children;
-  var themedChildren = Children.map(children, function (child) {
-    var _child$props;
-
-    if (! /*#__PURE__*/isValidElement(child)) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.warn('[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!');
-      }
-
-      return child;
-    } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-
-
-    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
-    return /*#__PURE__*/cloneElement(child, {
-      className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-    });
-  });
-  return jsx(ThemeContext.Provider, {
-    value: theme,
-    children: themedChildren
-  });
-};
-
 var isThemeModern = function isThemeModern(theme) {
   return modernThemes.includes(theme);
 };
@@ -59,5 +29,57 @@ var useTheme = function useTheme() {
   }, [theme]);
 };
 
+var ThemeScript = /*#__PURE__*/memo(function () {
+  var _useTheme = useTheme(),
+      className = _useTheme.className;
+
+  var scriptSource = useMemo(function () {
+    return "!(function () {try {document.documentElement.classList.add('".concat(className, "');} catch (e) {}})();");
+  }, [className]); // eslint-disable-next-line react/no-danger
+
+  return jsx("script", {
+    dangerouslySetInnerHTML: {
+      __html: scriptSource
+    }
+  });
+}, // Never re-render this component
+function () {
+  return true;
+});
+
+var ThemedChildren = function ThemedChildren(_ref) {
+  var children = _ref.children;
+
+  var _useTheme = useTheme(),
+      className = _useTheme.className;
+
+  return jsx("div", {
+    className: className,
+    children: children
+  });
+};
+
+var ThemeContext = /*#__PURE__*/createContext(undefined);
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+      children = _ref.children;
+  var isRootProvider = useContext(ThemeContext) === undefined;
+
+  if (isRootProvider) {
+    return jsxs(ThemeContext.Provider, {
+      value: theme,
+      children: [jsx(ThemeScript, {}), children]
+    });
+  }
+
+  return jsx(ThemeContext.Provider, {
+    value: theme,
+    children: jsx(ThemedChildren, {
+      children: children
+    })
+  });
+};
+
 export { ThemeProvider, useTheme };
 //# sourceMappingURL=index.js.map

package/dist/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/helpers.ts","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","isThemeModern","includes","isThemeDark","getThemeClassName","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAD,CAArB,CAAA;AACA,IAAMC,UAAU,GAAG,EAAnB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACHA,IAAMC,YAAY,gBAAGC,aAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,QAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,cAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,YAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,GAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AClCM,IAAMoB,aAAa,GAAG,SAAhBA,aAAgB,CAACtB,KAAD,EAAA;AAAA,EAAA,OAC3BN,YAAY,CAAC6B,QAAb,CAAsBvB,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAMwB,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD,EAAA;AAAA,EAAA,OACzBL,UAAU,CAAC4B,QAAX,CAAoBvB,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMyB,iBAAiB,GAAG,SAApBA,iBAAoB,CAACzB,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACKM0B,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAM1B,KAAK,GAAG2B,CAAAA,WAAAA,GAAAA,UAAU,CAAC9B,YAAD,CAAb,qDAA+BD,uBAA1C,CAAA;AAEA,EAAA,OAAOgC,OAAO,CACZ,YAAA;IAAA,OAAO;AACL5B,MAAAA,KAAK,EAALA,KADK;AAEL6B,MAAAA,QAAQ,EAAEP,aAAa,CAACtB,KAAD,CAFlB;AAGL8B,MAAAA,MAAM,EAAEN,WAAW,CAACxB,KAAD,CAHd;MAILc,SAAS,EAAEW,iBAAiB,CAACzB,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemeScript.tsx","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n","import { memo, useMemo } from 'react';\n\nimport { useTheme } from './useTheme';\n\nexport const ThemeScript = memo(\n  () => {\n    const { className } = useTheme();\n\n    const scriptSource = useMemo(() => {\n      return `!(function () {try {document.documentElement.classList.add('${className}');} catch (e) {}})();`;\n    }, [className]);\n\n    // eslint-disable-next-line react/no-danger\n    return <script dangerouslySetInnerHTML={{ __html: scriptSource }} />;\n  },\n  // Never re-render this component\n  () => true,\n);\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext } from 'react';\n\nimport { ThemeScript } from './ThemeScript';\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext) === undefined;\n\n  if (isRootProvider) {\n    return (\n      <ThemeContext.Provider value={theme}>\n        <ThemeScript />\n        {children}\n      </ThemeContext.Provider>\n    );\n  }\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemeScript","memo","scriptSource","_jsx","dangerouslySetInnerHTML","__html","ThemedChildren","children","createContext","undefined","ThemeProvider","isRootProvider","_jsxs","Provider","value"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.1.2-next-b9f447bdaa.2571+b9f447bdaa",
+  "version": "0.1.2-next-9ff5b52e35.2579+9ff5b52e35",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,5 +43,5 @@
     "dist/",
     "src/"
   ],
-  "gitHead": "b9f447bdaae7d30c977407848eb645c07cc81bcd"
+  "gitHead": "9ff5b52e35d76e7718fd67c8b0d59cb75885da12"
 }

package/src/ThemeProvider.spec.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { ThemeProvider } from './ThemeProvider';
+
 import {} from './const';
 
 const InValidElement = React.createContext<undefined>(undefined).Provider;
@@ -14,28 +15,6 @@ const ComponentWithClassname = ({
 }) => <div className={className} {...rest} />;
 
 describe('ThemeProvider', () => {
-  it('appends theme to children', () => {
-    render(
-      <ThemeProvider theme="light">
-        <div>children 1</div>
-        <div>children 2</div>
-      </ThemeProvider>,
-    );
-
-    expect(screen.getByText('children 1')).toHaveClass('np-theme-light');
-    expect(screen.getByText('children 2')).toHaveClass('np-theme-light');
-  });
-
-  it('concatenate className with children', () => {
-    render(
-      <ThemeProvider theme="light">
-        <div className="other class names">children</div>
-      </ThemeProvider>,
-    );
-
-    expect(screen.getByText('children')).toHaveClass('np-theme-light other class names');
-  });
-
   it('can nest theme providers', () => {
     render(
       <ThemeProvider theme="light">
@@ -49,37 +28,29 @@ describe('ThemeProvider', () => {
       </ThemeProvider>,
     );
 
-    expect(screen.getAllByText('light')[0]).toHaveClass('np-theme-light');
-    expect(screen.getByText('personal')).toHaveClass('np-theme-personal');
-    expect(screen.getAllByText('light')[1]).toHaveClass('np-theme-light');
-  });
-
-  it('can append className to a component', () => {
-    render(
-      <ThemeProvider theme="personal">
-        <ComponentWithClassname data-testid="button">Click me!</ComponentWithClassname>
-      </ThemeProvider>,
-    );
-
-    expect(screen.getByTestId('button')).toHaveClass('np-theme-personal');
+    // The first provider will not have a className attached to it
+    expect(screen.getAllByText('light')[0]).not.toHaveClass('np-theme-light');
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getAllByText('light')[0].parentElement).not.toHaveClass('np-theme-light');
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
   });
 
-  it('displays console warning when children is not a valid React element', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => jest.fn());
-
-    render(
-      <ThemeProvider theme="personal">
-        <InValidElement value={undefined}>
-          <ComponentWithClassname data-testid="button">Click me!</ComponentWithClassname>
-        </InValidElement>
-        ,
+  it('matches snapshot', () => {
+    const { asFragment } = render(
+      <ThemeProvider theme="light">
+        <div>light</div>
+        <ThemeProvider theme="personal">
+          <div>personal</div>
+          <ThemeProvider theme="light">
+            <div>light</div>
+          </ThemeProvider>
+        </ThemeProvider>
       </ThemeProvider>,
     );
 
-    expect(screen.getByTestId('button')).not.toHaveClass('np-theme-personal');
-    // eslint-disable-next-line no-console
-    expect(console.warn).toHaveBeenCalledWith(
-      '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',
-    );
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/ThemeProvider.tsx

@@ -1,37 +1,31 @@
-import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 
-import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
-import { getThemeClassName } from './helpers';
+import { ThemeScript } from './ThemeScript';
+import { ThemedChildren } from './ThemedChildren';
+import { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';
 
-export const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);
+export const ThemeContext = createContext<ComponentTheme | undefined>(undefined);
 
-type ThemeProviderProps = PropsWithChildren<{
-  theme: ComponentTheme | undefined;
-}>;
+type ThemeProviderProps = PropsWithChildren<Theming>;
 
 export const ThemeProvider = ({
   theme = DEFAULT_COMPONENT_THEME,
   children,
 }: ThemeProviderProps) => {
-  const themedChildren = Children.map(children, (child) => {
-    if (!isValidElement(child)) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.warn(
-          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',
-        );
-      }
-      return child;
-    }
+  const isRootProvider = useContext(ThemeContext) === undefined;
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');
+  if (isRootProvider) {
+    return (
+      <ThemeContext.Provider value={theme}>
+        <ThemeScript />
+        {children}
+      </ThemeContext.Provider>
+    );
+  }
 
-    return cloneElement(child, {
-      className: classNames,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as any);
-  });
-
-  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;
+  return (
+    <ThemeContext.Provider value={theme}>
+      <ThemedChildren>{children}</ThemedChildren>
+    </ThemeContext.Provider>
+  );
 };

package/src/ThemeScript.tsx

@@ -0,0 +1,18 @@
+import { memo, useMemo } from 'react';
+
+import { useTheme } from './useTheme';
+
+export const ThemeScript = memo(
+  () => {
+    const { className } = useTheme();
+
+    const scriptSource = useMemo(() => {
+      return `!(function () {try {document.documentElement.classList.add('${className}');} catch (e) {}})();`;
+    }, [className]);
+
+    // eslint-disable-next-line react/no-danger
+    return <script dangerouslySetInnerHTML={{ __html: scriptSource }} />;
+  },
+  // Never re-render this component
+  () => true,
+);

package/src/ThemedChildren.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+import { useTheme } from './useTheme';
+
+type ThemedChildrenProps = { children: ReactNode };
+
+export const ThemedChildren = ({ children }: ThemedChildrenProps) => {
+  const { className } = useTheme();
+
+  return <div className={className}>{children}</div>;
+};

package/src/__snapshots__/ThemeProvider.spec.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThemeProvider matches snapshot 1`] = `
+<DocumentFragment>
+  <script>
+    !(function () {try {document.documentElement.classList.add('np-theme-light');} catch (e) {}})();
+  </script>
+  <div>
+    light
+  </div>
+  <div
+    class="np-theme-personal"
+  >
+    <div>
+      personal
+    </div>
+    <div
+      class="np-theme-light"
+    >
+      <div>
+        light
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/const.ts

@@ -7,3 +7,7 @@ export type ModernTheme = typeof modernThemes[number];
 export type DarkTheme = typeof darkThemes[number];
 
 export const DEFAULT_COMPONENT_THEME = 'light' as const;
+
+export type Theming = {
+  theme?: ComponentTheme;
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-export type { ComponentTheme } from './const';
+export type { ComponentTheme, Theming } from './const';
 
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';