@hitachivantara/uikit-react-core 6.3.0 → 6.4.1

package/dist/AppSwitcher/Action/Action.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { HvIcon } from "../../icons.js";
@@ -22,30 +22,25 @@ const HvAppSwitcherAction = ({
   const { classes, cx } = useClasses(classesProp);
   const { name, description, disabled, iconElement, iconUrl, url, target } = application;
   const color = getColor(
-    disabled ? "textDisabled" : application?.color,
-    "text"
+    disabled && "textDisabled" || application?.color || "text"
   );
-  const [validIconUrl, setValidIconUrl] = useState(true);
   const renderApplicationIcon = () => {
-    if (iconElement) {
-      return iconElement;
-    }
-    if (iconUrl && validIconUrl) {
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          className: classes.iconUrl,
-          src: iconUrl,
-          onError: () => {
-            setValidIconUrl(false);
-          },
-          alt: description
-        }
-      );
-    }
-    const brokenTitle = name.split(" ");
-    const initials = brokenTitle[0].slice(0, 1) + (brokenTitle[1] ? brokenTitle[1].slice(0, 1) : "");
-    return /* @__PURE__ */ jsx(HvAvatar, { size: "sm", backgroundColor: color, variant: "square", "aria-hidden": true, children: initials });
+    if (iconElement) return iconElement;
+    const nameParts = name.split(/\s+/);
+    const initials = nameParts[0].charAt(0) + (nameParts[1]?.charAt(0) || "");
+    return /* @__PURE__ */ jsx(
+      HvAvatar,
+      {
+        size: "sm",
+        src: iconUrl,
+        className: classes.iconUrl,
+        alt: description,
+        backgroundColor: color,
+        color: "bgContainer",
+        "aria-hidden": true,
+        children: initials
+      }
+    );
   };
   const isSelected = isSelectedCallback(application);
   const handleOnClick = useCallback(

package/dist/AppSwitcher/Action/Action.styles.js

@@ -1,7 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses(
-  "HvAppSwitcher-Action",
+  "HvAppSwitcherAction",
   {
     root: {
       width: "100%",
@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = createClasses(
       minHeight: 52
     },
     icon: { display: "flex", minWidth: 40, justifyContent: "center" },
-    iconUrl: { width: 32 },
+    iconUrl: { borderColor: "transparent" },
     iconInfo: { minWidth: 32 },
     disabled: {},
     selected: {},

package/dist/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
@@ -23,8 +23,8 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     children: childrenProp,
     component = "div",
     size: sizeProp,
-    backgroundColor = "text",
-    color = "bgContainer",
+    backgroundColor,
+    color: colorProp,
     src,
     srcSet,
     sizes,
@@ -37,6 +37,7 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     ...others
   } = useDefaultProps("HvAvatar", props);
   const { classes, cx } = useClasses(classesProp);
+  const color = props.backgroundColor ? props.color || "bgContainer" : colorProp;
   const avatarGroupContext = useAvatarGroupContext();
   const size = sizeProp || avatarGroupContext?.size || "sm";
   let children;
@@ -57,40 +58,28 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     );
   } else if (childrenProp != null) {
     children = childrenProp;
-  } else if (hasImg && alt) {
+  } else if (alt) {
     [children] = alt;
   } else {
     children = /* @__PURE__ */ jsx(
       HvIcon,
       {
         name: "User",
-        color,
         size: decreaseSizeMap[size],
         className: classes.fallback
       }
     );
   }
-  const inlineStyle = {
-    ...style
-  };
-  if (component != null && typeof component !== "string") {
-    inlineStyle.borderRadius = "50%";
-  }
-  if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = getColor(backgroundColor, "text");
-    inlineStyle.color = getColor(color, "textDimmed");
-  }
-  const statusInlineStyle = {};
-  if (status) {
-    const statusColor = getColor(status, "positive");
-    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
-  }
+  const statusColor = getColor(status, "positive");
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       className: cx(classes.container, classes[variant]),
-      style: statusInlineStyle,
+      style: mergeStyles(void 0, {
+        // we're using the boxShadow to have the border inside the container and not on its edge.
+        boxShadow: status && `inset 0px 0px 0px 2px ${statusColor}`
+      }),
       ...others,
       children: [
         badge && /* @__PURE__ */ jsx(
@@ -105,7 +94,12 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
           {
             component,
             className: cx(classes.root, classes.avatar, classes[size], className),
-            style: inlineStyle,
+            "data-color": color,
+            style: mergeStyles(style, {
+              "--bgColor": !hasImgNotFailing && getColor(backgroundColor, "text"),
+              "--textColor": !hasImgNotFailing && getColor(color, "bgContainer"),
+              borderRadius: component != null && typeof component !== "string" && "50%"
+            }),
             variant,
             size,
             ...avatarProps,

package/dist/Avatar/Avatar.styles.js

@@ -1,10 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvAvatar", {
-  root: {
-    fontSize: "1rem"
-  },
+  // use `classes.avatar` instead
+  root: {},
   img: {
     width: "100%",
     height: "100%",
@@ -23,17 +21,21 @@ const { staticClasses, useClasses } = createClasses("HvAvatar", {
     position: "relative",
     padding: theme.space.xxs,
     height: "fit-content",
-    ":focus-visible": {
-      ...outlineStyles,
-      borderRadius: 0
-    }
+    fontSize: "1rem"
+  },
+  xs: { "--size": "24px", fontSize: theme.fontSizes.sm },
+  sm: { "--size": "32px", fontSize: theme.fontSizes.base },
+  md: { "--size": "40px", fontSize: theme.fontSizes.xl },
+  lg: { "--size": "52px", fontSize: theme.fontSizes.xl2 },
+  xl: { "--size": "88px", fontSize: theme.fontSizes.xl3 },
+  avatar: {
+    fontSize: "1em",
+    borderRadius: "inherit",
+    color: "var(--textColor)",
+    width: "var(--size)",
+    height: "var(--size)",
+    backgroundColor: "var(--bgColor)"
   },
-  xs: { width: 24, height: 24, fontSize: "0.5rem" },
-  sm: { width: 32, height: 32, fontSize: "0.625rem" },
-  md: { width: 40, height: 40, fontSize: "1rem" },
-  lg: { width: 52, height: 52, fontSize: "1.5rem" },
-  xl: { width: 88, height: 88, fontSize: "2rem" },
-  avatar: { borderRadius: "inherit" },
   badge: {
     width: 8,
     height: 8,

package/dist/AvatarGroup/AvatarGroup.js

@@ -1,82 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Children } from "react";
-import { useDefaultProps, mergeStyles, useCss } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { HvAvatar } from "../Avatar/Avatar.js";
 import { useClasses } from "./AvatarGroup.styles.js";
 import { staticClasses } from "./AvatarGroup.styles.js";
 import { HvAvatarGroupProvider } from "./AvatarGroupContext.js";
 const getSpacingValue = (spacing, size) => {
   switch (size) {
-    case "xs":
-      return spacing === "compact" ? 24 : 16;
-    case "sm":
-      return spacing === "compact" ? 30 : 18;
-    case "md":
-      return spacing === "compact" ? 36 : 20;
-    case "lg":
-      return spacing === "compact" ? 44 : 24;
     case "xl":
-      return spacing === "compact" ? 72 : 34;
-    default:
-      return spacing === "compact" ? 30 : 18;
-  }
-};
-const getFontSize = (size) => {
-  switch (size) {
+      return spacing === "compact" ? 40 : 16;
+    case "lg":
+    case "md":
+      return spacing === "compact" ? 32 : 20;
     case "xs":
-      return "1em";
     case "sm":
-      return "1.25em";
-    case "md":
-      return "1.5em";
-    case "lg":
-      return "1.75em";
-    case "xl":
-      return "3em";
     default:
-      return "1em";
+      return spacing === "compact" ? 24 : 12;
   }
 };
-const Overflow = ({
-  direction,
-  childrenToShow,
-  spacingValue,
-  overflowComponent,
-  totalChildren,
-  maxVisible,
-  size
-}) => {
-  const { css } = useCss();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
-        marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
-        zIndex: 0
-      },
-      children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxs(
-        HvAvatar,
-        {
-          size,
-          backgroundColor: theme.colors.border,
-          classes: {
-            avatar: css({
-              [`&.HvAvatar-${size}`]: {
-                fontSize: getFontSize(size)
-              }
-            })
-          },
-          children: [
-            "+",
-            totalChildren - maxVisible
-          ]
-        }
-      )
-    }
-  );
-};
 const HvAvatarGroup = forwardRef(
   function HvAvatarGroup2(props, ref) {
     const {
@@ -94,11 +35,20 @@ const HvAvatarGroup = forwardRef(
       ...others
     } = useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = useClasses(classesProp);
-    const spacingValue = getSpacingValue(spacing, size);
     const totalChildren = Children.count(children);
     const willOverflow = totalChildren > maxVisible;
+    const overflowValue = totalChildren - maxVisible;
     const childrenToShow = Children.toArray(children).slice(0, maxVisible);
     if (toBack) childrenToShow.reverse();
+    const overflowElement = /* @__PURE__ */ jsx("div", { children: overflowComponent?.(overflowValue) || /* @__PURE__ */ jsx(
+      HvAvatar,
+      {
+        size,
+        avatarProps: { ["data-color"]: "neutral" },
+        backgroundColor: "border",
+        children: `+${overflowValue}`
+      }
+    ) });
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -112,36 +62,14 @@ const HvAvatarGroup = forwardRef(
           className
         ),
         style: mergeStyles(style, {
-          "--spacing": `-${spacingValue}px`
+          "--spacing": `-${getSpacingValue(spacing, size)}px`
         }),
         ref,
         ...others,
         children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, { size, children: [
-          toBack && willOverflow && /* @__PURE__ */ jsx(
-            Overflow,
-            {
-              childrenToShow,
-              direction,
-              maxVisible,
-              overflowComponent,
-              size,
-              spacingValue,
-              totalChildren
-            }
-          ),
+          toBack && willOverflow && overflowElement,
           childrenToShow,
-          !toBack && willOverflow && /* @__PURE__ */ jsx(
-            Overflow,
-            {
-              childrenToShow,
-              direction,
-              maxVisible,
-              overflowComponent,
-              size,
-              spacingValue,
-              totalChildren
-            }
-          )
+          !toBack && willOverflow && overflowElement
         ] })
       }
     );

package/dist/AvatarGroup/AvatarGroup.styles.js

@@ -16,15 +16,13 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
   row: {
     flexDirection: "row",
     justifyContent: "flex-start",
-    [`& .${staticClasses$1.container}`]: {
-      "&:not(:first-of-type)": {
-        marginLeft: "var(--spacing)"
-      }
+    "&>*:not(:first-of-type)": {
+      marginLeft: "var(--spacing)"
     },
     "&$toBack": {
       flexDirection: "row-reverse",
       justifyContent: "flex-end",
-      [`& .${staticClasses$1.container}`]: {
+      "&>*": {
         "&:last-of-type": {
           marginLeft: 0
         },
@@ -36,14 +34,12 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
   },
   column: {
     flexDirection: "column",
-    [`& .${staticClasses$1.container}`]: {
-      "&:not(:first-of-type)": {
-        marginTop: "var(--spacing)"
-      }
+    "&>*:not(:first-of-type)": {
+      marginTop: "var(--spacing)"
     },
     "&$toBack": {
       flexDirection: "column-reverse",
-      [`& .${staticClasses$1.container}`]: {
+      "&>*": {
         "&:last-of-type": {
           marginTop: 0
         },
@@ -54,7 +50,7 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
     }
   },
   highlight: {
-    [`& .${staticClasses$1.container}:hover`]: {
+    "&>*:hover": {
       zIndex: theme.zIndices.popover
     }
   },

package/dist/BreadCrumb/BreadCrumb.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, isValidElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BreadCrumb.styles.js";
 import { staticClasses } from "./BreadCrumb.styles.js";
 import { pathWithSubMenu, removeExtension } from "./utils.js";
@@ -18,9 +18,11 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
     onClick,
     component,
     dropDownMenuProps,
+    separator,
     ...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) {
@@ -36,11 +38,13 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
     listPath,
     maxVisibleElem,
     onClick,
-    dropDownMenuProps
+    dropDownMenuProps,
+    activeTheme?.name === "pentahoPlus" ? 2 : 1
   ) : 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(
       HvPathElement,
       {
@@ -49,10 +53,19 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
           separatorContainer: classes.separatorContainer
         },
         last: isLast,
-        children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(HvTypography, { className: classes.currentPage, variant: "body", children: removeExtension(elem.label) }) || /* @__PURE__ */ jsx(
+        separator,
+        children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            className: classes.currentPage,
+            variant: "caption1",
+            children: removeExtension(elem.label)
+          }
+        ) || /* @__PURE__ */ jsx(
           HvBreadCrumbPage,
           {
             elem,
+            showHome: isFirst && activeTheme?.name === "pentahoPlus",
             classes: {
               a: classes.a,
               link: classes.link

package/dist/BreadCrumb/Page/Page.js

@@ -1,14 +1,18 @@
 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);
@@ -17,11 +21,20 @@ const HvBreadCrumbPage = (props) => {
     event.preventDefault();
     onClick?.(event, elem);
   };
-  return /* @__PURE__ */ jsx(
+  return showHome ? /* @__PURE__ */ jsx(
+    HvIconButton,
+    {
+      title: elem.label,
+      component: component || "a",
+      href: elem.path,
+      onClick: onClick && handleClick,
+      children: /* @__PURE__ */ jsx(HomeIcon, {})
+    }
+  ) : /* @__PURE__ */ jsx(
     HvTypography,
     {
       noWrap: true,
-      variant: "label",
+      variant: "captionLabel",
       component: component || "a",
       href: elem.path,
       onClick: onClick && handleClick,

package/dist/BreadCrumb/PathElement/PathElement.js

@@ -5,20 +5,13 @@ import { staticClasses } from "./PathElement.styles.js";
 const HvPathElement = ({
   classes: classesProp,
   last = false,
+  separator,
   children
 }) => {
   const { classes } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs("li", { className: classes.centerContainer, children: [
     children,
-    !last && /* @__PURE__ */ jsx(
-      HvIcon,
-      {
-        name: "CaretRight",
-        size: "xs",
-        className: classes.separatorContainer,
-        color: "textDisabled"
-      }
-    )
+    !last && /* @__PURE__ */ jsx("div", { className: classes.separatorContainer, children: separator || /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs", color: "textDisabled" }) })
   ] });
 };
 export {

package/dist/BreadCrumb/utils.js

@@ -2,15 +2,18 @@ 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) => {
+const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps, moreOptionsPosition = 1) => {
   const nbrElemToSubMenu = listRoute.length - maxVisible;
-  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);
+  const subMenuList = listRoute.slice(
+    1,
+    nbrElemToSubMenu + moreOptionsPosition
+  );
   const handleClick = (event, data) => {
     event.preventDefault();
     onClick?.(event, data);
   };
   listRoute.splice(
-    1,
+    moreOptionsPosition,
     nbrElemToSubMenu,
     /* @__PURE__ */ jsx(
       HvDropDownMenu,

package/dist/Dialog/Content/Content.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
 import MuiDialogContent from "@mui/material/DialogContent";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Content.styles.js";
 import { staticClasses } from "./Content.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -10,44 +11,34 @@ const HvDialogContent = (props) => {
     classes: classesProp,
     className,
     children,
-    indentContent = false,
-    style,
+    indentContent,
+    dividers,
     ...others
   } = useDefaultProps("HvDialogContent", props);
   const { classes, cx } = useClasses(classesProp);
   const [hasBorder, setHasBorder] = useState(false);
-  const elRef = useRef(null);
-  useEffect(() => {
-    if (typeof ResizeObserver !== "undefined") {
-      const resizeObserver = new ResizeObserver(() => {
-        const el = elRef.current;
-        if (el) {
-          const hasOverflow = el.scrollHeight > el.clientHeight;
-          setHasBorder(hasOverflow);
-        }
-      });
-      if (elRef.current) {
-        resizeObserver.observe(elRef.current);
-      }
-      return () => {
-        resizeObserver.disconnect();
-      };
+  const { ref: elRef } = useResizeDetector({
+    refreshMode: "throttle",
+    refreshRate: 100,
+    handleWidth: false,
+    disableRerender: true,
+    onResize: ({ entry }) => {
+      if (!entry) return;
+      const hasOverflow = entry.target.scrollHeight > entry.target.clientHeight;
+      setHasBorder(hasOverflow);
     }
-    return void 0;
-  }, []);
+  });
   return /* @__PURE__ */ jsx(
     HvTypography,
     {
       ref: elRef,
       component: MuiDialogContent,
+      dividers: dividers ?? hasBorder,
       className: cx(
         classes.root,
         { [classes.textContent]: !!indentContent },
         className
       ),
-      style: mergeStyles(style, {
-        "--borderW": hasBorder ? "1px" : "0px"
-      }),
       ...others,
       children
     }

package/dist/Dialog/Content/Content.styles.js

@@ -3,9 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDialogContent", {
   root: {
     padding: theme.spacing(0, "sm", "sm"),
-    borderColor: theme.colors.borderSubtle,
-    borderTopWidth: "var(--borderW)",
-    borderBottomWidth: "var(--borderW)"
+    borderColor: theme.colors.borderSubtle
   },
   textContent: {
     paddingLeft: `calc(42px + ${theme.space.sm})`,

package/dist/Dialog/Dialog.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvDialog", {
   },
   paper: {
     color: theme.colors.text,
-    backgroundColor: theme.colors.bgContainer,
+    background: theme.colors.bgContainer,
     boxShadow: theme.colors.shadow,
     borderColor: theme.colors.border,
     borderRadius: theme.radii.round

package/dist/FilterGroup/FilterContent/FilterContent.js

@@ -140,26 +140,28 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
             }
           ),
           /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: classes.space, children: " " }),
-          /* @__PURE__ */ jsx(
-            HvButton,
-            {
-              id: setId(id, "apply-button"),
-              disabled: applyDisabled,
-              variant: "primary",
-              onClick: onApplyHandler,
-              className: classes.applyButton,
-              children: labels?.applyLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            HvButton,
-            {
-              id: setId(id, "cancel-button"),
-              variant: "secondarySubtle",
-              onClick: onCancelHandler,
-              children: labels?.cancelLabel
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
+            /* @__PURE__ */ jsx(
+              HvButton,
+              {
+                id: setId(id, "apply-button"),
+                disabled: applyDisabled,
+                variant: "primary",
+                onClick: onApplyHandler,
+                className: classes.applyButton,
+                children: labels?.applyLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HvButton,
+              {
+                id: setId(id, "cancel-button"),
+                variant: "secondarySubtle",
+                onClick: onCancelHandler,
+                children: labels?.cancelLabel
+              }
+            )
+          ] })
         ] })
       ]
     }

package/dist/FilterGroup/FilterContent/FilterContent.styles.js

@@ -40,12 +40,14 @@ const { staticClasses, useClasses } = createClasses(name, {
     minHeight: "calc(370px - 75px)"
   },
   actionBar: {},
+  actions: {
+    display: "flex",
+    gap: theme.space.xs
+  },
   space: {
     flex: 1
   },
-  applyButton: {
-    marginRight: "8px"
-  }
+  applyButton: {}
 });
 export {
   staticClasses,

package/dist/TimeAgo/formatUtils.js

@@ -1,31 +1,15 @@
-const isDateInPeriod = (timeAgoMs, period, referenceDate = /* @__PURE__ */ new Date()) => {
-  const date = new Date(timeAgoMs);
-  const startOfToday = new Date(referenceDate);
-  startOfToday.setHours(0, 0, 0, 0);
-  const startOfTomorrow = new Date(startOfToday);
-  startOfTomorrow.setDate(startOfToday.getDate() + 1);
-  const startOfDayAfterTomorrow = new Date(startOfTomorrow);
-  startOfDayAfterTomorrow.setDate(startOfTomorrow.getDate() + 1);
-  if (period === "tomorrow") {
-    return date >= startOfTomorrow && date < startOfDayAfterTomorrow;
-  }
-  if (period === "afterTomorrow") {
-    return date >= startOfDayAfterTomorrow;
-  }
-  return false;
-};
 const formatTimeAgo = (timeAgoMs, locale, showSeconds = false, referenceDate = /* @__PURE__ */ new Date()) => {
   const relFormatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
   const dayFormatter = new Intl.DateTimeFormat(locale, {
     hour: "numeric",
     minute: "numeric",
-    second: showSeconds ? "numeric" : void 0
+    ...showSeconds && { second: "numeric" }
   });
   const weekFormatter = new Intl.DateTimeFormat(locale, {
     weekday: "short",
     hour: "numeric",
     minute: "numeric",
-    second: showSeconds ? "numeric" : void 0
+    ...showSeconds && { second: "numeric" }
   });
   const fullFormatter = new Intl.DateTimeFormat(locale, {
     year: "numeric",
@@ -33,33 +17,43 @@ const formatTimeAgo = (timeAgoMs, locale, showSeconds = false, referenceDate = /
     day: "numeric",
     hour: "numeric",
     minute: "numeric",
-    second: showSeconds ? "numeric" : void 0
+    ...showSeconds && { second: "numeric" }
   });
   const date = new Date(timeAgoMs);
-  const secsInDay = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
-  const secsInWeek = date.getDay() * 86400 + secsInDay;
   const secsAgo = Math.floor((referenceDate.getTime() - timeAgoMs) / 1e3);
   const minsAgo = Math.floor(secsAgo / 60);
+  const getStartOfDay = (offset) => {
+    const d = new Date(referenceDate);
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + offset);
+    return d;
+  };
+  const startOfYesterday = getStartOfDay(-1);
+  const startOfToday = getStartOfDay(0);
+  const startOfTomorrow = getStartOfDay(1);
+  const startOfDayAfterTomorrow = getStartOfDay(2);
+  const secsInDay = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
+  const secsInWeek = date.getDay() * 86400 + secsInDay;
   switch (true) {
-    case isDateInPeriod(timeAgoMs, "afterTomorrow", referenceDate):
+    case date >= startOfDayAfterTomorrow:
       return fullFormatter.format(date);
-    case isDateInPeriod(timeAgoMs, "tomorrow", referenceDate):
+    case date >= startOfTomorrow:
       return `${relFormatter.format(1, "days")}, ${dayFormatter.format(date)}`;
     case minsAgo < -60:
       return `${relFormatter.format(0, "days")}, ${dayFormatter.format(date)}`;
     case minsAgo < -2:
       return relFormatter.format(-minsAgo, "minutes");
     case secsAgo < 0:
-      return `${relFormatter.format(Math.abs(secsAgo), "seconds")}`;
+      return relFormatter.format(Math.abs(secsAgo), "seconds");
     case secsAgo < 20:
       return relFormatter.format(0, "seconds");
     case minsAgo < 2:
       return relFormatter.format(-secsAgo, "seconds");
     case minsAgo < 60:
       return relFormatter.format(-minsAgo, "minutes");
-    case secsAgo < secsInDay:
+    case date >= startOfToday:
       return `${relFormatter.format(0, "days")}, ${dayFormatter.format(date)}`;
-    case secsAgo < secsInDay + 86400:
+    case date >= startOfYesterday:
       return `${relFormatter.format(-1, "days")}, ${dayFormatter.format(date)}`;
     case secsAgo < secsInWeek:
       return weekFormatter.format(date);

package/dist/VerticalNavigation/TreeView/TreeViewItem.styles.js

@@ -134,7 +134,8 @@ const { staticClasses, useClasses } = createClasses(
         marginLeft: "auto"
       },
       [`&& .${staticClasses$1.root}`]: {
-        fontSize: "15px"
+        fontSize: "15px",
+        borderColor: "transparent"
       }
     }
   }

package/dist/index.d.ts

@@ -1707,6 +1707,8 @@ export declare interface HvBreadCrumbProps extends HvBaseProps<HTMLDivElement, "
     onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void;
     /** Props passed down to the DropDownMenu sub-menu component. */
     dropDownMenuProps?: Partial<HvDropDownMenuProps>;
+    /** Separator element between breadcrumb items. */
+    separator?: React.ReactNode;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvBreadCrumbClasses;
 }
@@ -8207,7 +8209,7 @@ declare const useClasses_127: (classesProp?: Partial<Record<"action" | "minimize
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_128: (classesProp?: Partial<Record<"list" | "popup" | "root" | "collapsed" | "listItem" | "navigationPopup", string>>, addStatic?: boolean) => {
+declare const useClasses_128: (classesProp?: Partial<Record<"list" | "popup" | "root" | "listItem" | "collapsed" | "navigationPopup", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         list: string;
@@ -9291,7 +9293,7 @@ declare const useClasses_74: (classesProp?: Partial<Record<"label" | "error" | "
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_75: (classesProp?: Partial<Record<"dropdown" | "space" | "header" | "root" | "panel" | "baseDropdownSelection" | "rightSidePanel" | "leftSidePanel" | "actionBar" | "applyButton", string>>, addStatic?: boolean) => {
+declare const useClasses_75: (classesProp?: Partial<Record<"dropdown" | "space" | "header" | "root" | "panel" | "actions" | "baseDropdownSelection" | "rightSidePanel" | "leftSidePanel" | "actionBar" | "applyButton", string>>, addStatic?: boolean) => {
     readonly classes: {
         dropdown: string;
         panel: string;
@@ -9301,6 +9303,7 @@ declare const useClasses_75: (classesProp?: Partial<Record<"dropdown" | "space"
         rightSidePanel: string;
         leftSidePanel: string;
         actionBar: string;
+        actions: string;
         space: string;
         applyButton: string;
     };

package/dist/themes/pentaho.js

@@ -1,6 +1,36 @@
-import { mergeTheme, pentaho as pentaho$1, theme, neutral, slate, blue } from "@hitachivantara/uikit-styles";
+import { mergeTheme, pentaho as pentaho$1, theme, neutral, slate, blue, yellow, pink, violet, teal, orange } from "@hitachivantara/uikit-styles";
 const ld = (c1, c2) => `light-dark(${c1}, ${c2})`;
 const semaColors = ["positive", "warning", "negative", "info"];
+const avatarColors = {
+  blue: {
+    color: ld(theme.colors.primaryStrong, blue[300]),
+    backgroundColor: ld(theme.colors.primaryDimmed, blue[900])
+  },
+  orange: {
+    color: ld(orange[700], orange[200]),
+    backgroundColor: ld(orange[200], orange[900])
+  },
+  teal: {
+    color: ld(teal[800], teal[200]),
+    backgroundColor: ld(teal[200], teal[900])
+  },
+  violet: {
+    color: ld(violet[800], violet[200]),
+    backgroundColor: ld(violet[200], violet[900])
+  },
+  pink: {
+    color: ld(pink[900], pink[200]),
+    backgroundColor: ld(pink[200], pink[900])
+  },
+  yellow: {
+    color: ld(yellow[700], yellow[100]),
+    backgroundColor: ld(yellow[200], yellow[900])
+  },
+  neutral: {
+    color: ld(slate[400], slate[300]),
+    backgroundColor: ld(slate[200], slate[700])
+  }
+};
 const notificationMap = {
   success: "positive",
   warning: "warning",
@@ -33,6 +63,44 @@ const pentaho = mergeTheme(pentaho$1, {
     End: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
   },
   components: {
+    HvAvatar: {
+      color: "primaryStrong",
+      backgroundColor: "primaryDimmed",
+      classes: {
+        avatar: {
+          border: `1px solid ${theme.colors.bgContainerSecondary}`,
+          fontWeight: theme.fontWeights.semibold,
+          ...Object.entries(avatarColors).reduce(
+            (acc, [color, styles]) => {
+              acc[`&[data-color=${color}]`] = styles;
+              return acc;
+            },
+            {}
+          )
+        },
+        xs: { "--size": "24px", fontSize: theme.fontSizes.sm },
+        sm: { "--size": "24px", fontSize: theme.fontSizes.sm },
+        md: { "--size": "32px", fontSize: theme.fontSizes.base },
+        lg: { "--size": "48px", fontSize: theme.fontSizes.xl2 },
+        xl: { "--size": "64px", fontSize: theme.fontSizes.xl3 }
+      }
+    },
+    HvAvatarGroup: {
+      maxVisible: 4,
+      classes: {
+        root: {
+          // eslint-disable-next-line no-useless-spread
+          ...Object.values(avatarColors).reduce(
+            (acc, styles, i) => {
+              const key = `&>.HvAvatar-container:nth-of-type(${i + 1}) .HvAvatar-avatar`;
+              acc[key] = styles;
+              return acc;
+            },
+            {}
+          )
+        }
+      }
+    },
     HvLoading: {
       classes: {
         loadingBar: {
@@ -43,7 +111,8 @@ const pentaho = mergeTheme(pentaho$1, {
     HvBadge: {
       classes: {
         badge: {
-          color: ld(theme.colors.textLight, theme.colors.textDark),
+          "--bg-color": theme.colors.textSubtle,
+          color: ld("white", "black"),
           "&[data-color='textSubtle']:not(:empty)": {
             color: theme.colors.textSubtle,
             backgroundColor: theme.colors.bgPageSecondary
@@ -378,6 +447,7 @@ const pentaho = mergeTheme(pentaho$1, {
     HvButtonBase: {
       classes: {
         root: {
+          borderRadius: theme.radii.base,
           ":where(:not(.HvButtonBase-disabled))": {
             ":hover": { backgroundColor: theme.colors.primaryDimmed },
             ":active": { backgroundColor: theme.colors.primarySubtle }
@@ -1053,6 +1123,32 @@ const pentaho = mergeTheme(pentaho$1, {
           minHeight: "unset"
         }
       }
+    },
+    HvBreadCrumb: {
+      classes: {
+        currentPage: {
+          fontWeight: theme.fontWeights.semibold,
+          padding: `0 ${theme.space.xxs}`
+        },
+        separatorContainer: {
+          padding: `0 ${theme.space.xxs}`
+        },
+        link: {
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          padding: `0px ${theme.space.xxs}`,
+          fontWeight: theme.fontWeights.normal
+        }
+      },
+      separator: "/"
+    },
+    HvFilterGroupContent: {
+      classes: {
+        actions: {
+          flexDirection: "row-reverse"
+        }
+      }
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -34,7 +34,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
     "@hitachivantara/uikit-react-shared": "^6.0.2",
-    "@hitachivantara/uikit-react-utils": "^6.1.1",
+    "@hitachivantara/uikit-react-utils": "^6.2.0",
     "@hitachivantara/uikit-styles": "^6.0.2",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "f2b8a9e107bc8886231d527b37b30716d891105c",
+  "gitHead": "5dc28acf7238a5b194609f7e671b618fe7f0b0bc",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",