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

Provides theming support for the Wise Design system components

'use strict';

var react = require('react');
var ThemedChildren = require('./ThemedChildren.js');
var _const = require('./const.js');
var helpers = require('./helpers.js');
var ThemeProviderContext = require('./ThemeProviderContext.js');
var jsxRuntime = require('react/jsx-runtime');

const themeClass = /\bnp-theme-[a-z-]+\b/g;
const ThemeProvider = ({
  theme: initialTheme = _const.DEFAULT_BASE_THEME,
  screenMode: initialScreenMode = _const.DEFAULT_SCREEN_MODE,
  isNotRootProvider: isLocal = false,
  children,
  className = undefined
}) => {
  const isContextRoot = react.useContext(ThemeProviderContext.ThemeContext) === undefined;
  const [theme, setTheme] = react.useState(helpers.normalizeTheme(initialTheme));
  const [screenMode, setScreenMode] = react.useState(initialScreenMode);
  // Update state when props change (for controlled usage)
  react.useEffect(() => {
    setTheme(helpers.normalizeTheme(initialTheme));
  }, [initialTheme]);
  react.useEffect(() => {
    setScreenMode(initialScreenMode);
  }, [initialScreenMode]);
  // useEffect hook used to apply the theme class to the HTML element
  react.useEffect(() => {
    if (!isLocal && isContextRoot) {
      // Remove all the theme classes from the documentElement
      document.documentElement.className.match(themeClass)?.forEach(item => {
        document.documentElement.classList.remove(item);
      });
      helpers.getThemeClassName(theme, screenMode).split(' ').forEach(item => {
        document.documentElement.classList.add(item);
      });
    }
  }, [isLocal, isContextRoot, theme, screenMode]);
  const contextValue = react.useMemo(() => ({
    theme,
    screenMode,
    setTheme,
    setScreenMode
  }), [theme, screenMode, setTheme, setScreenMode]);
  return /*#__PURE__*/jsxRuntime.jsx(ThemeProviderContext.ThemeContext.Provider, {
    value: contextValue,
    children: /*#__PURE__*/jsxRuntime.jsx(ThemedChildren.ThemedChildren, {
      className: className,
      children: children
    })
  });
};

exports.ThemeProvider = ThemeProvider;
//# sourceMappingURL=ThemeProvider.js.map