@hitachivantara/uikit-react-core 6.0.0-next.9 → 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
@@ -37,7 +40,9 @@ const HvThemeProvider = ({
         colors: {
           ...theme.colors,
           modes: {
-            ...theme.colors
+            ...theme.colors,
+            light: { ...theme.colors.light, type: "light" },
+            dark: { ...theme.colors.dark, type: "dark" }
           }
         }
       },
@@ -45,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

@@ -871,6 +871,174 @@ const pentaho = mergeTheme(pentaho$1, {
           padding: theme.spacing("xs", "sm")
         }
       }
+    },
+    HvCalendarCell: {
+      classes: {
+        dateWrapper: {
+          width: 32,
+          height: 32
+        },
+        calendarDate: {
+          width: 32,
+          height: 32,
+          ...theme.typography.caption1,
+          borderRadius: theme.radii.full,
+          ":hover": {
+            borderRadius: theme.radii.full
+          }
+        },
+        calendarDateSelected: {
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.dimmer,
+          ":hover": {
+            border: `1px solid ${theme.colors.primary}`,
+            color: theme.colors.text
+          }
+        },
+        cellContainer: {
+          "&:hover": {
+            backgroundColor: theme.colors.primaryDimmed,
+            borderRadius: theme.radii.full
+          },
+          ":has(> span.HvCalendarCell-calendarDateInSelectionRange):has(> span.HvCalendarCell-startBookend)": {
+            backgroundColor: theme.colors.bgPageSecondary,
+            borderTopLeftRadius: theme.radii.full,
+            borderBottomLeftRadius: theme.radii.full
+          },
+          ":has(> span.HvCalendarCell-calendarDateInSelectionRange):has(> span.HvCalendarCell-endBookend)": {
+            backgroundColor: theme.colors.bgPageSecondary,
+            borderTopRightRadius: theme.radii.full,
+            borderBottomRightRadius: theme.radii.full
+          }
+        },
+        calendarDateInSelectionRange: {
+          borderRadius: 0
+        },
+        startBookend: {
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.dimmer,
+          borderRadius: theme.radii.full
+        },
+        endBookend: {
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.dimmer,
+          borderRadius: theme.radii.full
+        }
+      }
+    },
+    HvSingleCalendar: {
+      classes: {
+        root: {
+          " .HvNavigation-text": {
+            ...theme.typography.captionLabel
+          },
+          " .HvNavigation-root": {
+            gap: 0
+          },
+          " .HvMonthSelector-calendarMonthlyGrid": {
+            gridTemplateColumns: "repeat(4, 1fr)"
+          },
+          " .HvMonthSelector-calendarMonthlyCell": {
+            borderRadius: theme.radii.full,
+            width: 48,
+            height: 48
+          },
+          " .HvMonthSelector-calendarMonthlyCellSelected": {
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.dimmer,
+            ":hover": {
+              border: `1px solid ${theme.colors.primary}`,
+              color: theme.colors.text,
+              backgroundColor: theme.colors.primaryDimmed
+            }
+          }
+        },
+        calendarDay: {
+          width: 32,
+          height: 32,
+          ...theme.typography.caption2
+        },
+        weekdays: {
+          borderBottom: `1px solid ${theme.colors.borderSubtle}`,
+          marginBottom: theme.space.xs,
+          justifyContent: "center"
+        },
+        calendarGrid: {
+          justifyContent: "center",
+          gridTemplateColumns: "repeat(7, 32px)",
+          "& .HvSingleCalendar-cellsInRange": {
+            "& .HvSingleCalendar-startBookend": {
+              borderLeft: "none",
+              backgroundColor: theme.colors.primary,
+              color: theme.colors.dimmer
+            }
+          },
+          "&:hover .HvSingleCalendar-cellsInRange": {
+            "& .HvSingleCalendar-startBookend": {
+              borderLeft: "none",
+              backgroundColor: theme.colors.primary,
+              color: theme.colors.dimmer
+            }
+          },
+          "& .HvSingleCalendar-cellsInRange:hover": {
+            borderTopRightRadius: theme.radii.full,
+            borderBottomRightRadius: theme.radii.full,
+            "& .HvSingleCalendar-calendarDate": {
+              borderRight: "none",
+              backgroundColor: theme.colors.primary,
+              color: theme.colors.dimmer
+            }
+          }
+        },
+        cellsInRange: {
+          ":has(span.HvSingleCalendar-startBookend)": {
+            borderTopLeftRadius: theme.radii.full,
+            borderBottomLeftRadius: theme.radii.full
+          }
+        },
+        cellContainer: {
+          "&:hover": {
+            ":has(span.HvSingleCalendar-startBookend)": {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0
+            },
+            ":has(span.HvSingleCalendar-endBookend)": {
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0
+            }
+          }
+        },
+        calendarDateInSelectionRange: {
+          ":hover:not( .HvSingleCalendar-endBookend):not( .HvSingleCalendar-startBookend)": {
+            borderRadius: 0
+          }
+        },
+        startBookend: {
+          borderLeft: "none",
+          borderTopLeftRadius: theme.radii.full,
+          borderBottomLeftRadius: theme.radii.full
+        },
+        endBookend: {
+          borderRight: "none",
+          borderTopRightRadius: theme.radii.full,
+          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.0.0-next.9",
+  "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.0-next.6",
-    "@hitachivantara/uikit-react-utils": "^6.0.0-next.6",
-    "@hitachivantara/uikit-styles": "^6.0.0-next.5",
+    "@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": "94053ad726b6c19742685dacb64949cd97ab6d4b",
+  "gitHead": "7815bbc4041430fbc4fda437e7359ec6cfcb0b32",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",