@hitachivantara/uikit-react-core/dist/esm/providers/ThemeProvider.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useState, useEffect, useCallback, useMemo } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { HvThemeContext, EmotionContext } from "@hitachivantara/uikit-react-shared";
import { EmotionContext as EmotionContext2, HvThemeContext as HvThemeContext2, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
import { parseTheme } from "@hitachivantara/uikit-styles";
import { setElementAttrs } from "../utils/theme.js";
const HvThemeProvider = ({
  children,
  themes: themesList,
  theme: themeProp,
  emotionCache,
  colorMode: colorModeProp,
  themeRootId: rootId
}) => {
  const [theme, setTheme] = useState(themeProp);
  const [colorMode, setColorMode] = useState(colorModeProp);
  const {
    theme: activeTheme,
    selectedTheme,
    selectedMode,
    colorModes,
    colorScheme
  } = parseTheme(themesList, theme, colorMode);
  const themes = themesList.map((t) => t.name);
  useEffect(() => {
    setTheme(themeProp);
    setColorMode(colorModeProp);
  }, [colorModeProp, themeProp]);
  useEffect(() => {
    setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);
  }, [colorScheme, rootId, selectedMode, selectedTheme]);
  const changeTheme = useCallback(
    (newTheme = selectedTheme, newMode = selectedMode) => {
      setTheme(newTheme);
      setColorMode(newMode);
    },
    [selectedMode, selectedTheme]
  );
  const value = useMemo(
    () => ({
      themes,
      colorModes,
      activeTheme,
      selectedTheme,
      selectedMode,
      changeTheme,
      rootId
    }),
    [
      themes,
      colorModes,
      activeTheme,
      selectedTheme,
      selectedMode,
      changeTheme,
      rootId
    ]
  );
  const muiTheme = useMemo(() => {
    const colors = activeTheme.colors.modes[colorMode];
    return 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 = useMemo(
    () => ({ cache: emotionCache }),
    [emotionCache]
  );
  return /* @__PURE__ */ jsx(ThemeProvider, { theme: muiTheme, children: /* @__PURE__ */ jsx(HvThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(EmotionContext.Provider, { value: emotionCacheValue, children }) }) });
};
export {
  EmotionContext2 as EmotionContext,
  HvThemeContext2 as HvThemeContext,
  HvThemeProvider,
  defaultCacheKey,
  defaultEmotionCache
};