@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
49 lines (48 loc) • 2.23 kB
JavaScript
import { pentaho as pentaho$1 } from "../themes/pentaho.js";
import { getElementById } from "../utils/document.js";
import { HvThemeProvider, defaultCacheKey, defaultEmotionCache } from "./ThemeProvider.js";
import { CssBaseline, CssScopedBaseline, getThemeVars } from "@hitachivantara/uikit-styles";
import { useId, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { CacheProvider, ClassNames, Global, css } from "@emotion/react";
import createCache from "@emotion/cache";
//#region src/providers/Provider.tsx
/**
* Enables theming capabilities and makes cross-component theme properties available down the tree.
*/
var HvProvider = ({ children, rootElementId, cssBaseline = "global", cssTheme = "global", theme = pentaho$1, colorMode = theme.defaultColorMode || "light", emotionCache: emotionCacheProp, classNameKey = defaultCacheKey }) => {
const scopedRootId = useId();
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 } }}
${getThemeVars(theme)}
` }), /* @__PURE__ */ jsx(HvThemeProvider, {
theme,
emotionCache,
colorMode,
themeRootId: cssTheme === "scoped" ? rootElementId || scopedRootId : void 0,
children: /* @__PURE__ */ jsx(ClassNames, { children: ({ css }) => {
if (cssBaseline === "scoped") {
const rootElement = getElementById(rootElementId);
if (rootElement) rootElement.classList.add(css({ [`@layer ${rootElementId}-baseline`]: { ...CssScopedBaseline } }));
}
return (cssTheme === "scoped" || cssBaseline === "scoped") && !rootElementId ? /* @__PURE__ */ jsx("div", {
id: scopedRootId,
className: cssBaseline === "scoped" ? css({ [`@layer ${rootElementId}-baseline`]: { ...CssScopedBaseline } }) : void 0,
children
}) : children;
} })
})]
});
};
//#endregion
export { HvProvider };