@wise/components-theming/dist/ThemeProvider.mjs

Provides theming support for the Wise Design system components

import { useContext, useEffect, useMemo } from 'react';
import { ThemedChildren } from './ThemedChildren.mjs';
import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
import { getThemeClassName } from './helpers.mjs';
import { ThemeContext } from './ThemeProviderContext.mjs';
import { jsx } from 'react/jsx-runtime';

const themeClass = /\bnp-theme-[a-z-]+\b/g;
const ThemeProvider = ({
  theme = DEFAULT_BASE_THEME,
  screenMode = DEFAULT_SCREEN_MODE,
  isNotRootProvider = false,
  children,
  className = undefined
}) => {
  const isContextRoot = useContext(ThemeContext) === undefined;
  // useEffect hook used to apply the theme class to the HTML element
  useEffect(() => {
    if (!isNotRootProvider && isContextRoot) {
      // Remove all the theme classes from the documentElement
      document.documentElement.className.match(themeClass)?.forEach(item => {
        document.documentElement.classList.remove(item);
      });
      getThemeClassName(theme, screenMode).split(' ').forEach(item => {
        document.documentElement.classList.add(item);
      });
    }
  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
  const contextValue = useMemo(() => ({
    theme,
    screenMode
  }), [screenMode, theme]);
  return /*#__PURE__*/jsx(ThemeContext.Provider, {
    value: contextValue,
    children: /*#__PURE__*/jsx(ThemedChildren, {
      className: className,
      children: children
    })
  });
};

export { ThemeProvider };
//# sourceMappingURL=ThemeProvider.mjs.map