@hitachivantara/uikit-react-core/dist/cjs/providers/ThemeProvider.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const styles = require("@mui/material/styles");
const uikitReactShared = require("@hitachivantara/uikit-react-shared");
const uikitStyles = require("@hitachivantara/uikit-styles");
const theme = require("../utils/theme.cjs");
const HvThemeProvider = ({
  children,
  themes: themesList,
  theme: themeProp,
  emotionCache,
  colorMode: colorModeProp,
  themeRootId: rootId
}) => {
  const [theme$1, setTheme] = React.useState(themeProp);
  const [colorMode, setColorMode] = React.useState(colorModeProp);
  const {
    theme: activeTheme,
    selectedTheme,
    selectedMode,
    colorModes,
    colorScheme
  } = uikitStyles.parseTheme(themesList, theme$1, colorMode);
  const themes = themesList.map((t) => t.name);
  React.useEffect(() => {
    setTheme(themeProp);
    setColorMode(colorModeProp);
  }, [colorModeProp, themeProp]);
  React.useEffect(() => {
    theme.setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);
  }, [colorScheme, rootId, selectedMode, selectedTheme]);
  const changeTheme = React.useCallback(
    (newTheme = selectedTheme, newMode = selectedMode) => {
      setTheme(newTheme);
      setColorMode(newMode);
    },
    [selectedMode, selectedTheme]
  );
  const value = React.useMemo(
    () => ({
      themes,
      colorModes,
      activeTheme,
      selectedTheme,
      selectedMode,
      changeTheme,
      rootId
    }),
    [
      themes,
      colorModes,
      activeTheme,
      selectedTheme,
      selectedMode,
      changeTheme,
      rootId
    ]
  );
  const muiTheme = React.useMemo(() => {
    const colors = activeTheme.colors.modes[colorMode];
    return styles.createTheme({
      spacing: activeTheme.space.base,
      typography: {
        fontFamily: activeTheme.fontFamily.body
      },
      palette: {
        primary: { main: colors.primary },
        success: { main: colors.positive },
        warning: { main: colors.warning },
        error: { main: colors.negative },
        info: { main: colors.info },
        text: {
          primary: colors.text,
          secondary: colors.textSubtle,
          disabled: colors.textDisabled
        },
        background: {
          default: colors.bgPage,
          paper: colors.bgContainer
        },
        divider: colors.border,
        action: {
          active: colors.primary,
          hover: colors.primaryStrong,
          selected: colors.primaryStrong,
          disabled: colors.textDisabled,
          disabledBackground: colors.bgDisabled
        }
      },
      components: {
        MuiButtonBase: {
          defaultProps: {
            disableRipple: true,
            disableTouchRipple: true
          }
        }
      },
      breakpoints: activeTheme.breakpoints
    });
  }, [activeTheme, colorMode]);
  const emotionCacheValue = React.useMemo(
    () => ({ cache: emotionCache }),
    [emotionCache]
  );
  return /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.HvThemeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.EmotionContext.Provider, { value: emotionCacheValue, children }) }) });
};
Object.defineProperty(exports, "EmotionContext", {
  enumerable: true,
  get: () => uikitReactShared.EmotionContext
});
Object.defineProperty(exports, "HvThemeContext", {
  enumerable: true,
  get: () => uikitReactShared.HvThemeContext
});
Object.defineProperty(exports, "defaultCacheKey", {
  enumerable: true,
  get: () => uikitReactShared.defaultCacheKey
});
Object.defineProperty(exports, "defaultEmotionCache", {
  enumerable: true,
  get: () => uikitReactShared.defaultEmotionCache
});
exports.HvThemeProvider = HvThemeProvider;