@hitachivantara/uikit-react-core 6.1.0 → 6.2.0

package/dist/providers/ThemeProvider.js

@@ -1,21 +1,23 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { HvThemeContext, EmotionContext } from "@hitachivantara/uikit-react-shared";
+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";
-const HvThemeProvider = ({
+import { createMuiTheme } from "./utils.js";
+function HvThemeProviderInner({
   children,
   theme,
-  emotionCache,
   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);
@@ -29,6 +31,7 @@ const HvThemeProvider = ({
       selectedMode: colorMode,
       changeMode(newMode = colorMode) {
         setColorModeValue(newMode);
+        setMode(newMode);
       },
       rootId,
       // TODO: remove once backwards-compatibility is not needed anymore
@@ -47,59 +50,24 @@ const HvThemeProvider = ({
       selectedTheme: theme.name,
       changeTheme(theme2, mode) {
         setColorModeValue(mode);
+        setMode(mode);
       }
     }),
-    [theme, colorMode, rootId]
+    [theme, colorMode, setMode, rootId]
   );
+  return /* @__PURE__ */ jsx(HvThemeContext.Provider, { value, children });
+}
+function HvThemeProvider(props) {
+  const { theme, emotionCache, colorMode } = props;
   const muiTheme = useMemo(() => {
-    const colors = theme.colors[colorMode] || theme.colors.light;
-    return createTheme({
-      colorSchemes: { light: true, dark: true },
-      spacing: theme.space.base,
-      typography: {
-        fontFamily: theme.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: theme.breakpoints
-    });
-  }, [theme, colorMode]);
+    return createMuiTheme(theme);
+  }, [theme]);
   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 }) }) });
-};
+  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,

package/dist/providers/utils.js

@@ -0,0 +1,52 @@
+import { createTheme } from "@mui/material/styles";
+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
+        }
+      }
+    }
+  });
+}
+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
+    }
+  };
+}
+export {
+  createMuiTheme
+};

package/dist/themes/pentaho.js

@@ -1024,6 +1024,21 @@ const pentaho = mergeTheme(pentaho$1, {
           borderBottomRightRadius: theme.radii.full
         }
       }
+    },
+    HvBannerContent: {
+      classes: {
+        root: {
+          overflow: "hidden",
+          minHeight: "unset"
+        }
+      }
+    },
+    HvSnackbarContent: {
+      classes: {
+        root: {
+          minHeight: "unset"
+        }
+      }
     }
   }
 });

package/dist/utils/Callout.js

@@ -13,8 +13,17 @@ const { useClasses } = createClasses("HvCallout", {
     position: "relative",
     boxShadow: "none",
     flexWrap: "nowrap",
-    padding: 0,
-    borderRadius: theme.radii.round
+    borderRadius: theme.radii.round,
+    alignItems: "center",
+    "&[data-size='large']": {
+      padding: theme.space.sm
+    },
+    "&[data-size='regular']": {
+      padding: theme.space.xs
+    },
+    "&[data-size='micro']": {
+      padding: 0
+    }
   },
   success: {
     backgroundColor: theme.colors.positiveDimmed
@@ -38,7 +47,8 @@ const { useClasses } = createClasses("HvCallout", {
     display: "flex",
     alignItems: "center",
     padding: 0,
-    color: theme.colors.textDark
+    color: theme.colors.textDark,
+    width: "100%"
   },
   messageContent: {
     textWrap: "balance",
@@ -58,7 +68,8 @@ const { useClasses } = createClasses("HvCallout", {
     flexDirection: "column",
     height: "100%",
     justifyContent: "space-between",
-    gap: theme.space.xs
+    gap: theme.space.xs,
+    alignItems: "flex-start"
   },
   actionCustom: {
     flex: "0 0 auto"
@@ -83,6 +94,7 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
     actionsPosition: actionsPositionProp = "auto",
     children,
     actionProps,
+    size = "regular",
     ...others
   } = useDefaultProps("HvCallout", props);
   const { classes, cx } = useClasses(classesProp, false);
@@ -113,10 +125,12 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
         message: classes.message,
         action: classes.action
       },
+      "data-size": size,
       message: /* @__PURE__ */ jsxs(Fragment, { children: [
         icon && /* @__PURE__ */ jsx(
           HvStatusIcon,
           {
+            size: size === "large" ? "md" : "sm",
             className: classes.messageIcon,
             variant: variant === "default" ? "info" : variant,
             customIcon
@@ -126,6 +140,7 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
           title && /* @__PURE__ */ jsx("b", { className: classes.messageTitle, children: title }),
           children
         ] }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
         actions && actionsPosition === "inline" && actionsContent
       ] }),
       action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", { className: classes.actionContent, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -33,9 +33,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^6.0.1",
-    "@hitachivantara/uikit-react-utils": "^6.1.0",
-    "@hitachivantara/uikit-styles": "^6.0.1",
+    "@hitachivantara/uikit-react-shared": "^6.0.2",
+    "@hitachivantara/uikit-react-utils": "^6.1.1",
+    "@hitachivantara/uikit-styles": "^6.0.2",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "6a6e77422bfbe5d7d59b447c972ccc0e3cce35d4",
+  "gitHead": "7815bbc4041430fbc4fda437e7359ec6cfcb0b32",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",