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

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import createCache from "@emotion/cache";
import { CacheProvider, Global, css, ClassNames } from "@emotion/react";
import { CssBaseline, getThemesVars, CssScopedBaseline } from "@hitachivantara/uikit-styles";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { getElementById } from "../utils/document.js";
import { processThemes } from "../utils/theme.js";
import { HvThemeProvider } from "./ThemeProvider.js";
import { defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
const scopedRootPrefix = "hv-uikit-scoped-root";
const HvProvider = ({
  children,
  rootElementId,
  cssBaseline = "global",
  cssTheme = "global",
  themes,
  theme,
  colorMode,
  emotionCache: emotionCacheProp,
  classNameKey = defaultCacheKey
}) => {
  const generatedId = useUniqueId();
  const scopedRootId = `${scopedRootPrefix}-${generatedId}`;
  const themesList = processThemes(themes);
  const emotionCache = useMemo(() => {
    if (emotionCacheProp) return emotionCacheProp;
    if (classNameKey === defaultCacheKey) return defaultEmotionCache;
    return createCache({ key: classNameKey, prepend: true });
  }, [classNameKey, emotionCacheProp]);
  return /* @__PURE__ */ jsxs(CacheProvider, { value: emotionCache, children: [
    /* @__PURE__ */ jsx(
      Global,
      {
        styles: css`
          ${cssBaseline === "global" && {
          [`@layer hv-uikit-baseline`]: {
            ...CssBaseline
          }
        }}
          ${getThemesVars(themesList)}
        `
      }
    ),
    /* @__PURE__ */ jsx(
      HvThemeProvider,
      {
        themes: themesList,
        theme: theme || themesList[0].name,
        emotionCache,
        colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0],
        themeRootId: cssTheme === "scoped" ? rootElementId || scopedRootId : void 0,
        children: /* @__PURE__ */ jsx(ClassNames, { children: ({ css: css2 }) => {
          if (cssBaseline === "scoped") {
            const rootElement = getElementById(rootElementId);
            if (rootElement) {
              rootElement.classList.add(
                css2({
                  [`@layer ${rootElementId}-baseline`]: {
                    ...CssScopedBaseline
                  }
                })
              );
            }
          }
          return (cssTheme === "scoped" || cssBaseline === "scoped") && !rootElementId ? /* @__PURE__ */ jsx(
            "div",
            {
              id: scopedRootId,
              className: cssBaseline === "scoped" ? css2({
                [`@layer ${rootElementId}-baseline`]: {
                  ...CssScopedBaseline
                }
              }) : void 0,
              children
            }
          ) : children;
        } })
      }
    )
  ] });
};
export {
  HvProvider
};