@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/providers/Provider.js

@@ -1,79 +1,48 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+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";
-import { CacheProvider, Global, css, ClassNames } from "@emotion/react";
-import { CssBaseline, getThemeVars, CssScopedBaseline } from "@hitachivantara/uikit-styles";
-import { pentaho } from "../themes/pentaho.js";
-import { getElementById } from "../utils/document.js";
-import { HvThemeProvider } from "./ThemeProvider.js";
-import { defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
-const HvProvider = ({
-  children,
-  rootElementId,
-  cssBaseline = "global",
-  cssTheme = "global",
-  theme = pentaho,
-  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
-          }
-        }}
+//#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: 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
+        ` }), /* @__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 };

package/dist/providers/ThemeProvider.js

@@ -1,77 +1,85 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo, useState, useEffect } from "react";
-import { ThemeProvider, useColorScheme } from "@mui/material/styles";
-import { EmotionContext, HvThemeContext } from "@hitachivantara/uikit-react-shared";
-import { EmotionContext as EmotionContext2, HvThemeContext as HvThemeContext2, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 import { getContainerElement } from "../utils/document.js";
 import { setElementAttrs } from "../utils/theme.js";
 import { createMuiTheme } from "./utils.js";
-function HvThemeProviderInner({
-  children,
-  theme,
-  colorMode: colorModeProp,
-  themeRootId: rootId
-}) {
-  const [colorModeValue, setColorModeValue] = useState(colorModeProp);
-  const { setMode } = useColorScheme();
-  const colorMode = colorModeValue === "dark" ? "dark" : "light";
-  useEffect(() => {
-    setColorModeValue(colorModeProp);
-    setMode(colorModeProp);
-  }, [colorModeProp]);
-  useEffect(() => {
-    const element = getContainerElement(rootId);
-    if (!element) return;
-    setElementAttrs(element, theme.name, colorMode);
-  }, [colorMode, rootId, theme.name]);
-  const value = useMemo(
-    () => ({
-      colorModes: ["light", "dark"],
-      // activeTheme: theme as HvTheme,
-      selectedMode: colorMode,
-      changeMode(newMode = colorMode) {
-        setColorModeValue(newMode);
-        setMode(newMode);
-      },
-      rootId,
-      // TODO: remove once backwards-compatibility is not needed anymore
-      activeTheme: {
-        ...theme,
-        colors: {
-          ...theme.colors,
-          modes: {
-            ...theme.colors,
-            light: { ...theme.colors.light, type: "light" },
-            dark: { ...theme.colors.dark, type: "dark" }
-          }
-        }
-      },
-      themes: [theme],
-      selectedTheme: theme.name,
-      changeTheme(theme2, mode) {
-        setColorModeValue(mode);
-        setMode(mode);
-      }
-    }),
-    [theme, colorMode, setMode, rootId]
-  );
-  return /* @__PURE__ */ jsx(HvThemeContext.Provider, { value, children });
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ThemeProvider, useColorScheme } from "@mui/material/styles";
+import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
+//#region src/providers/ThemeProvider.tsx
+function HvThemeProviderInner({ children, theme, colorMode: colorModeProp, themeRootId: rootId }) {
+	const [colorModeValue, setColorModeValue] = useState(colorModeProp);
+	const { setMode } = useColorScheme();
+	/** safe `colorMode`, ensuring no invalid values are used */
+	const colorMode = colorModeValue === "dark" ? "dark" : "light";
+	useEffect(() => {
+		setColorModeValue(colorModeProp);
+		setMode(colorModeProp);
+	}, [colorModeProp]);
+	useEffect(() => {
+		const element = getContainerElement(rootId);
+		if (!element) return;
+		setElementAttrs(element, theme.name, colorMode);
+	}, [
+		colorMode,
+		rootId,
+		theme.name
+	]);
+	const value = useMemo(() => ({
+		colorModes: ["light", "dark"],
+		selectedMode: colorMode,
+		changeMode(newMode = colorMode) {
+			setColorModeValue(newMode);
+			setMode(newMode);
+		},
+		rootId,
+		activeTheme: {
+			...theme,
+			colors: {
+				...theme.colors,
+				modes: {
+					...theme.colors,
+					light: {
+						...theme.colors.light,
+						type: "light"
+					},
+					dark: {
+						...theme.colors.dark,
+						type: "dark"
+					}
+				}
+			}
+		},
+		themes: [theme],
+		selectedTheme: theme.name,
+		changeTheme(_theme, mode) {
+			setColorModeValue(mode);
+			setMode(mode);
+		}
+	}), [
+		theme,
+		colorMode,
+		setMode,
+		rootId
+	]);
+	return /* @__PURE__ */ jsx(HvThemeContext.Provider, {
+		value,
+		children
+	});
 }
 function HvThemeProvider(props) {
-  const { theme, emotionCache, colorMode } = props;
-  const muiTheme = useMemo(() => {
-    return createMuiTheme(theme);
-  }, [theme]);
-  const emotionCacheValue = useMemo(
-    () => ({ cache: emotionCache }),
-    [emotionCache]
-  );
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: muiTheme, defaultMode: colorMode, children: /* @__PURE__ */ jsx(EmotionContext.Provider, { value: emotionCacheValue, children: /* @__PURE__ */ jsx(HvThemeProviderInner, { ...props }) }) });
+	const { theme, emotionCache, colorMode } = props;
+	const muiTheme = useMemo(() => {
+		return createMuiTheme(theme);
+	}, [theme]);
+	const emotionCacheValue = useMemo(() => ({ cache: emotionCache }), [emotionCache]);
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: muiTheme,
+		defaultMode: colorMode,
+		children: /* @__PURE__ */ jsx(EmotionContext.Provider, {
+			value: emotionCacheValue,
+			children: /* @__PURE__ */ jsx(HvThemeProviderInner, { ...props })
+		})
+	});
 }
-export {
-  EmotionContext2 as EmotionContext,
-  HvThemeContext2 as HvThemeContext,
-  HvThemeProvider,
-  defaultCacheKey,
-  defaultEmotionCache
-};
+//#endregion
+export { EmotionContext, HvThemeContext, HvThemeProvider, defaultCacheKey, defaultEmotionCache };

package/dist/providers/utils.js

@@ -1,52 +1,45 @@
 import { createTheme } from "@mui/material/styles";
+//#region src/providers/utils.ts
 function createMuiTheme(theme) {
-  return createTheme({
-    colorSchemes: {
-      light: { palette: makePalette(theme.colors.light) },
-      dark: { palette: makePalette(theme.colors.dark) }
-    },
-    // palette: makePalette(colors),
-    spacing: theme.space.base,
-    typography: {
-      fontFamily: theme.fontFamily.body
-    },
-    breakpoints: theme.breakpoints,
-    components: {
-      MuiButtonBase: {
-        defaultProps: {
-          disableRipple: true,
-          disableTouchRipple: true
-        }
-      }
-    }
-  });
+	return createTheme({
+		colorSchemes: {
+			light: { palette: makePalette(theme.colors.light) },
+			dark: { palette: makePalette(theme.colors.dark) }
+		},
+		spacing: theme.space.base,
+		typography: { fontFamily: theme.fontFamily.body },
+		breakpoints: theme.breakpoints,
+		components: { MuiButtonBase: { defaultProps: {
+			disableRipple: true,
+			disableTouchRipple: true
+		} } }
+	});
 }
 function makePalette(colors) {
-  return {
-    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
-    }
-  };
+	return {
+		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
+		}
+	};
 }
-export {
-  createMuiTheme
-};
+//#endregion
+export { createMuiTheme };

package/dist/themes/index.js

@@ -1,8 +1,9 @@
 import { next } from "./next.js";
 import { pentaho } from "./pentaho.js";
-const themes = { next, pentaho };
-export {
-  next,
-  pentaho,
-  themes
+//#region src/themes/index.ts
+var themes = {
+	next,
+	pentaho
 };
+//#endregion
+export { themes };