@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
88 lines (87 loc) • 3.27 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const createCache = require("@emotion/cache");
const react = require("@emotion/react");
const uikitStyles = require("@hitachivantara/uikit-styles");
const useUniqueId = require("../hooks/useUniqueId.cjs");
const document = require("../utils/document.cjs");
const theme = require("../utils/theme.cjs");
const ThemeProvider = require("./ThemeProvider.cjs");
const uikitReactShared = require("@hitachivantara/uikit-react-shared");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const createCache__default = /* @__PURE__ */ _interopDefault(createCache);
const scopedRootPrefix = "hv-uikit-scoped-root";
const HvProvider = ({
children,
rootElementId,
cssBaseline = "global",
cssTheme = "global",
themes,
theme: theme$1,
colorMode,
emotionCache: emotionCacheProp,
classNameKey = uikitReactShared.defaultCacheKey
}) => {
const generatedId = useUniqueId.useUniqueId();
const scopedRootId = `${scopedRootPrefix}-${generatedId}`;
const themesList = theme.processThemes(themes);
const emotionCache = React.useMemo(() => {
if (emotionCacheProp) return emotionCacheProp;
if (classNameKey === uikitReactShared.defaultCacheKey) return uikitReactShared.defaultEmotionCache;
return createCache__default.default({ key: classNameKey, prepend: true });
}, [classNameKey, emotionCacheProp]);
return /* @__PURE__ */ jsxRuntime.jsxs(react.CacheProvider, { value: emotionCache, children: [
/* @__PURE__ */ jsxRuntime.jsx(
react.Global,
{
styles: react.css`
${cssBaseline === "global" && {
[`@layer hv-uikit-baseline`]: {
...uikitStyles.CssBaseline
}
}}
${uikitStyles.getThemesVars(themesList)}
`
}
),
/* @__PURE__ */ jsxRuntime.jsx(
ThemeProvider.HvThemeProvider,
{
themes: themesList,
theme: theme$1 || themesList[0].name,
emotionCache,
colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0],
themeRootId: cssTheme === "scoped" ? rootElementId || scopedRootId : void 0,
children: /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, { children: ({ css }) => {
if (cssBaseline === "scoped") {
const rootElement = document.getElementById(rootElementId);
if (rootElement) {
rootElement.classList.add(
css({
[`@layer ${rootElementId}-baseline`]: {
...uikitStyles.CssScopedBaseline
}
})
);
}
}
return (cssTheme === "scoped" || cssBaseline === "scoped") && !rootElementId ? /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
id: scopedRootId,
className: cssBaseline === "scoped" ? css({
[`@layer ${rootElementId}-baseline`]: {
...uikitStyles.CssScopedBaseline
}
}) : void 0,
children
}
) : children;
} })
}
)
] });
};
exports.HvProvider = HvProvider;