@hitachivantara/uikit-react-core 6.4.3 → 6.6.0

package/dist/Banner/BannerContent/BannerContent.js

@@ -47,6 +47,7 @@ const HvBannerContent = forwardRef(function HvBannerContent2(props, ref) {
       actionProps,
       onClose: (evt) => onClose?.(evt),
       onAction,
+      size,
       ...others,
       children: children ?? content
     }

package/dist/BreadCrumb/BreadCrumb.js

@@ -1,18 +1,22 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, isValidElement } from "react";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { SvgBase } from "../icons.js";
 import { useClasses } from "./BreadCrumb.styles.js";
 import { staticClasses } from "./BreadCrumb.styles.js";
 import { pathWithSubMenu, removeExtension } from "./utils.js";
 import { HvPathElement } from "./PathElement/PathElement.js";
 import { HvBreadCrumbPage } from "./Page/Page.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvTypography } from "../Typography/Typography.js";
+const HomeIcon = (props) => /* @__PURE__ */ jsx(SvgBase, { viewBox: "0 0 256 256", width: "16", height: "16", ...props, children: /* @__PURE__ */ jsx("path", { d: "M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z" }) });
 const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
   const {
     classes: classesProp,
     className,
     id,
     listRoute = [],
+    home,
     maxVisible,
     url,
     onClick,
@@ -22,7 +26,6 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
     ...others
   } = useDefaultProps("HvBreadCrumb", props);
   const { classes, cx } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
   const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
   let listPath = listRoute.slice();
   if (url != null) {
@@ -38,46 +41,68 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
     listPath,
     maxVisibleElem,
     onClick,
-    dropDownMenuProps,
-    activeTheme?.name === "pentahoPlus" ? 2 : 1
+    dropDownMenuProps
   ) : listPath;
-  return /* @__PURE__ */ jsx("nav", { ref, id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx("ol", { className: classes.orderedList, children: listPath.map((elem, index) => {
-    const key = `key_${index}`;
-    const isLast = index === breadcrumbPath.length - 1;
-    const isFirst = index === 0;
-    return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("nav", { ref, id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxs("ol", { className: classes.orderedList, children: [
+    home && /* @__PURE__ */ jsx(
       HvPathElement,
       {
         classes: {
           centerContainer: classes.centerContainer,
           separatorContainer: classes.separatorContainer
         },
-        last: isLast,
         separator,
-        children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(
-          HvTypography,
-          {
-            className: classes.currentPage,
-            variant: "caption1",
-            children: removeExtension(elem.label)
-          }
-        ) || /* @__PURE__ */ jsx(
-          HvBreadCrumbPage,
+        children: /* @__PURE__ */ jsx(
+          HvIconButton,
           {
-            elem,
-            showHome: isFirst && activeTheme?.name === "pentahoPlus",
-            classes: {
-              a: classes.a,
-              link: classes.link
+            title: home.label,
+            component: component || "a",
+            href: home.path,
+            onClick: (event) => {
+              event.preventDefault();
+              onClick?.(event, home);
             },
-            component,
-            onClick
+            children: /* @__PURE__ */ jsx(HomeIcon, {})
           }
         )
-      },
-      key
-    );
-  }) }) });
+      }
+    ),
+    listPath.map((elem, index) => {
+      const key = `key_${index}`;
+      const isLast = index === breadcrumbPath.length - 1;
+      return /* @__PURE__ */ jsx(
+        HvPathElement,
+        {
+          classes: {
+            centerContainer: classes.centerContainer,
+            separatorContainer: classes.separatorContainer
+          },
+          last: isLast,
+          separator,
+          children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(
+            HvTypography,
+            {
+              className: classes.currentPage,
+              variant: "caption1",
+              children: removeExtension(elem.label)
+            }
+          ) || /* @__PURE__ */ jsx(
+            HvBreadCrumbPage,
+            {
+              elem,
+              classes: {
+                a: classes.a,
+                link: classes.link
+              },
+              component,
+              onClick
+            }
+          )
+        },
+        key
+      );
+    })
+  ] }) });
 });
 export {
   HvBreadCrumb,

package/dist/BreadCrumb/Page/Page.js

@@ -1,18 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { SvgBase } from "../../icons.js";
 import { useClasses } from "./Page.styles.js";
 import { staticClasses } from "./Page.styles.js";
-import { HvIconButton } from "../../IconButton/IconButton.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
-const HomeIcon = (props) => /* @__PURE__ */ jsx(SvgBase, { viewBox: "0 0 256 256", width: "16", height: "16", ...props, children: /* @__PURE__ */ jsx("path", { d: "M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z" }) });
 const HvBreadCrumbPage = (props) => {
   const {
     component,
     onClick,
     elem,
-    showHome,
     classes: classesProp
   } = useDefaultProps("HvBreadCrumbPage", props);
   const { classes, cx } = useClasses(classesProp);
@@ -21,16 +17,7 @@ const HvBreadCrumbPage = (props) => {
     event.preventDefault();
     onClick?.(event, elem);
   };
-  return showHome ? /* @__PURE__ */ jsx(
-    HvIconButton,
-    {
-      title: elem.label,
-      component: component || "a",
-      href: elem.path,
-      onClick: onClick && handleClick,
-      children: /* @__PURE__ */ jsx(HomeIcon, {})
-    }
-  ) : /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     HvTypography,
     {
       noWrap: true,

package/dist/BreadCrumb/utils.js

@@ -2,18 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { HvIcon } from "../icons.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 const removeExtension = (label) => label.includes(".") ? label.slice(0, label.lastIndexOf(".")) : label;
-const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps, moreOptionsPosition = 1) => {
+const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps) => {
   const nbrElemToSubMenu = listRoute.length - maxVisible;
-  const subMenuList = listRoute.slice(
-    1,
-    nbrElemToSubMenu + moreOptionsPosition
-  );
+  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);
   const handleClick = (event, data) => {
     event.preventDefault();
     onClick?.(event, data);
   };
   listRoute.splice(
-    moreOptionsPosition,
+    1,
     nbrElemToSubMenu,
     /* @__PURE__ */ jsx(
       HvDropDownMenu,

package/dist/BulkActions/BulkActions.js

@@ -13,14 +13,15 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
     className,
     classes: classesProp,
     selectAllPagesLabel,
-    actionsDisabled,
+    disabled,
+    actionsDisabled: actionsDisabledProp,
     maxVisibleActions,
     checkboxProps,
     actions,
     numTotal = 0,
     numSelected = 0,
     selectAllConjunctionLabel = "/",
-    showSelectAllPages = false,
+    showSelectAllPages,
     semantic = true,
     onAction,
     onSelectAll,
@@ -30,22 +31,23 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
   const { classes, cx } = useClasses(classesProp);
   const anySelected = numSelected > 0;
   const isSemantic = semantic && anySelected;
+  const actionsDisabled = disabled || actionsDisabledProp;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       id,
-      className: cx(
-        classes.root,
-        { [classes.semantic]: isSemantic },
-        className
-      ),
+      className: cx(classes.root, className, {
+        [classes.semantic]: isSemantic,
+        [classes.disabled]: disabled
+      }),
       ...others,
       children: [
         /* @__PURE__ */ jsxs("div", { className: classes.selectAllContainer, children: [
           /* @__PURE__ */ jsx(
             HvCheckBox,
             {
+              disabled,
               className: classes.selectAll,
               checked: numSelected > 0,
               semantic: isSemantic,
@@ -67,6 +69,7 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
             /* @__PURE__ */ jsx(
               HvButton,
               {
+                disabled,
                 className: classes.selectAllPages,
                 variant: isSemantic ? "primaryGhost" : "secondaryGhost",
                 onClick: onSelectAllPages,

package/dist/BulkActions/BulkActions.styles.js

@@ -12,15 +12,10 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
     marginBottom: theme.space.xs
   },
   semantic: {
-    backgroundColor: theme.colors.bgHover,
-    "& $selectAll div": {
-      "&:hover:not(:disabled)": {
-        backgroundColor: theme.alpha("textLight", 0.3)
-      }
-    },
-    "& $selectAll:focus-within div": {
-      backgroundColor: theme.alpha("textLight", 0.3)
-    }
+    backgroundColor: theme.colors.bgHover
+  },
+  disabled: {
+    backgroundColor: theme.colors.bgDisabled
   },
   actions: {
     display: "inline-flex",
@@ -32,15 +27,18 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
       }
     }
   },
-  selectAllContainer: { display: "flex", alignItems: "center" },
+  selectAllContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.xs
+  },
   selectAll: {},
   selectAllPages: {},
   divider: {
     display: "flex",
     backgroundColor: theme.colors.border,
     width: "1px",
-    height: "32px",
-    marginLeft: theme.space.sm
+    height: "32px"
   }
 });
 export {

package/dist/Section/Section.js

@@ -40,7 +40,8 @@ const HvSection = forwardRef(
         }),
         ...others,
         children: [
-          hasHeader && /* @__PURE__ */ jsxs(
+          hasHeader && // eslint-disable-next-line jsx-a11y/click-events-have-key-events jsx-a11y/no-static-element-interactions
+          /* @__PURE__ */ jsxs(
             "div",
             {
               className: cx(classes.header, {

package/dist/Section/Section.styles.js

@@ -46,8 +46,7 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
   raisedHeader: {
     "& $header": {
       zIndex: 1,
-      borderBottomWidth: 1,
-      boxShadow: theme.colors.shadow
+      borderBottomWidth: 1
     },
     "& $content": {
       paddingTop: theme.space.sm

package/dist/Snackbar/Snackbar.js

@@ -29,6 +29,7 @@ const HvSnackbar = forwardRef(function HvSnackbar2(props, ref) {
     container,
     offset = 60,
     snackbarContentProps,
+    size,
     ...others
   } = useDefaultProps("HvSnackbar", props);
   const { classes } = useClasses(classesProp);
@@ -78,6 +79,7 @@ const HvSnackbar = forwardRef(function HvSnackbar2(props, ref) {
           action,
           onAction,
           onClose,
+          size,
           ...snackbarContentProps
         }
       )

package/dist/Snackbar/SnackbarContent/SnackbarContent.js

@@ -18,6 +18,7 @@ const HvSnackbarContent = forwardRef(function HvSnackbarContent2(props, ref) {
     action,
     onAction,
     onClose,
+    size,
     ...others
   } = useDefaultProps("HvSnackbarContent", props);
   const { classes, cx } = useClasses(classesProp);
@@ -40,6 +41,7 @@ const HvSnackbarContent = forwardRef(function HvSnackbarContent2(props, ref) {
       actions: isActionGeneric(action) ? [action] : action,
       onClose,
       onAction,
+      size,
       ...others,
       children: label
     }

package/dist/index.d.ts

@@ -369,6 +369,7 @@ export declare const breadCrumbClasses: {
 export declare const bulkActionsClasses: {
     root: string;
     semantic: string;
+    disabled: string;
     actions: string;
     selectAllContainer: string;
     selectAll: string;
@@ -1234,7 +1235,7 @@ export declare interface HvBannerContentProps extends Omit<SnackbarContentProps,
     /** The props to pass down to the Action Container. */
     actionProps?: Partial<HvButtonProps>;
     /** The size of the banner. */
-    size?: HvCalloutProps["size"];
+    size?: Extract<HvCalloutProps["size"], "regular" | "large" | "micro">;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvBannerContentClasses;
 }
@@ -1691,6 +1692,8 @@ export declare interface HvBreadCrumbPathElement extends Record<string, any> {
 export declare interface HvBreadCrumbProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     /** List of breadcrumb. */
     listRoute?: HvBreadCrumbPathElement[];
+    /** Home breadcrumb element. If passed, it will be displayed as the first breadcrumb item as a Home icon */
+    home?: HvBreadCrumbPathElement;
     /** URL to build the breadcrumb. */
     url?: string;
     /** Number of pages visible. */
@@ -1737,6 +1740,8 @@ export declare interface HvBulkActionsProps extends HvBaseProps {
     semantic?: boolean;
     /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */
     actions?: HvActionsGenericProps["actions"];
+    /** Whether the bulk actions component is disabled */
+    disabled?: boolean;
     /** Whether actions should be all disabled */
     actionsDisabled?: boolean;
     /** The callback function called when an action is triggered, receiving `action` as parameter. */
@@ -1995,7 +2000,7 @@ declare interface HvCalloutProps extends Omit<SnackbarContentProps, "title" | "v
     /** The props to pass down to the Action Container. */
     actionProps?: Partial<HvButtonProps>;
     /** The size of the banner. */
-    size?: "large" | "regular" | "micro";
+    size?: "large" | "regular" | "toast" | "micro";
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvCalloutClasses;
 }
@@ -5490,6 +5495,8 @@ export declare interface HvSnackbarContentProps extends Omit<SnackbarContentProp
     onAction?: HvActionsGenericProps["onAction"];
     /** @inheritdoc */
     onClose?: SnackbarProps["onClose"];
+    /** The size of the snackbar. */
+    size?: Extract<HvCalloutProps["size"], "regular" | "toast">;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSnackbarContentClasses;
 }
@@ -5533,6 +5540,8 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
     offset?: number;
     /** Others applied to the content of the snackbar. */
     snackbarContentProps?: HvSnackbarContentProps;
+    /** The size of the snackbar. */
+    size?: Extract<HvCalloutProps["size"], "regular" | "toast">;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSnackbarClasses;
     /** @ignore */
@@ -8652,10 +8661,11 @@ declare const useClasses_35: (classesProp?: Partial<Record<"link" | "a" | "root"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_36: (classesProp?: Partial<Record<"semantic" | "root" | "actions" | "selectAll" | "selectAllContainer" | "selectAllPages" | "divider", string>>, addStatic?: boolean) => {
+declare const useClasses_36: (classesProp?: Partial<Record<"semantic" | "disabled" | "root" | "actions" | "selectAll" | "selectAllContainer" | "selectAllPages" | "divider", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         semantic: string;
+        disabled: string;
         actions: string;
         selectAllContainer: string;
         selectAll: string;

package/dist/themes/pentaho.js

@@ -125,9 +125,20 @@ const pentaho = mergeTheme(pentaho$1, {
         }
       }
     },
+    HvBulkActions: {
+      semantic: false,
+      classes: {
+        root: {
+          borderRadius: theme.radii.round,
+          padding: theme.space.xs
+        }
+      }
+    },
     HvCallout: {
       classes: {
-        root: { outline: "1px solid var(--icolor, currentcolor)" },
+        root: {
+          outline: "1px solid var(--icolor, currentcolor)"
+        },
         ...Object.fromEntries(
           Object.entries(notificationMap).map(([variant, color]) => [
             variant,
@@ -284,14 +295,8 @@ const pentaho = mergeTheme(pentaho$1, {
           backgroundColor: theme.colors.bgContainer
         },
         header: {
-          minHeight: 48,
           padding: theme.spacing("xs", "sm"),
           gap: theme.space.xs
-        },
-        raisedHeader: {
-          "& .HvSection-header": {
-            boxShadow: "none"
-          }
         }
       }
     },
@@ -803,7 +808,11 @@ const pentaho = mergeTheme(pentaho$1, {
     HvCardHeader: {
       classes: {
         root: {
-          flexDirection: "row-reverse"
+          flexDirection: "row-reverse",
+          // remove top padding from the next sibling
+          "&& + *": {
+            paddingTop: 0
+          }
         },
         subheader: {
           color: theme.colors.textSubtle
@@ -813,6 +822,16 @@ const pentaho = mergeTheme(pentaho$1, {
         }
       }
     },
+    HvCardContent: {
+      classes: {
+        content: {
+          paddingBottom: 0,
+          "&& + .HvCardMedia-root": {
+            paddingTop: theme.space.xs
+          }
+        }
+      }
+    },
     HvFooter: {
       name: "Pentaho"
     },
@@ -1121,11 +1140,21 @@ const pentaho = mergeTheme(pentaho$1, {
     HvSnackbarContent: {
       classes: {
         root: {
+          width: 525,
           minHeight: "unset"
+        },
+        messageText: {
+          paddingLeft: 0
+        },
+        iconVariant: {
+          alignSelf: "flex-start",
+          margin: theme.space.xxs,
+          marginRight: theme.space.sm
         }
       }
     },
     HvBreadCrumb: {
+      maxVisible: 5,
       classes: {
         currentPage: {
           fontWeight: theme.fontWeights.semibold,

package/dist/utils/Callout.js

@@ -78,6 +78,16 @@ const { useClasses } = createClasses("HvCallout", {
     alignSelf: "flex-end"
   }
 });
+const getIconSize = (size) => {
+  switch (size) {
+    case "large":
+      return "md";
+    case "toast":
+      return "xs";
+    default:
+      return "sm";
+  }
+};
 const HvCallout = forwardRef(function HvCallout2(props, ref) {
   const {
     id,
@@ -130,7 +140,7 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
         icon && /* @__PURE__ */ jsx(
           HvStatusIcon,
           {
-            size: size === "large" ? "md" : "sm",
+            size: getIconSize(size),
             className: classes.messageIcon,
             variant: variant === "default" ? "info" : variant,
             customIcon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.4.3",
+  "version": "6.6.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.2",
-    "@hitachivantara/uikit-react-utils": "^6.2.0",
-    "@hitachivantara/uikit-styles": "^6.0.2",
+    "@hitachivantara/uikit-react-shared": "^6.0.3",
+    "@hitachivantara/uikit-react-utils": "^6.2.1",
+    "@hitachivantara/uikit-styles": "^6.0.3",
     "@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": "fe1e806628c08552c969d2b99d3d2e977be12b21",
+  "gitHead": "a80406b1865bb35a4e5c23e1c4fa2e7266f77f4e",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",