@hitachivantara/uikit-react-core 6.2.0 → 6.4.0

package/dist/Pagination/Pagination.styles.js

@@ -8,21 +8,17 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
     position: "relative",
     zIndex: 1,
     display: "flex",
-    justifyContent: "center",
-    alignItems: "stretch",
+    justifyContent: "space-between",
+    alignItems: "center",
     flexWrap: "wrap",
     marginTop: theme.space.sm,
-    ...theme.typography.caption2
+    ...theme.typography.caption1
   },
   /** Styles applied to the page size selector container. */
   pageSizeOptions: {
     display: "flex",
-    position: "absolute",
     gap: theme.space.xs,
-    height: 24,
-    top: "50%",
-    transform: "translateY(-50%)",
-    left: "0"
+    height: 24
   },
   pageSizeHeader: {
     height: 24,
@@ -55,8 +51,9 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
   pageNavigator: {
     display: "flex",
     alignItems: "center",
-    height: "32px",
-    gap: 8
+    justifyContent: "center",
+    flex: 1,
+    gap: theme.space.xs
   },
   /** Styles applied to each navigation `HvButton` icon container. */
   iconContainer: {
@@ -66,22 +63,17 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
   icon: {},
   /** Styles applied to the central page information container. */
   pageInfo: {
-    display: "inline-block",
+    display: "inline-flex",
+    gap: 4,
     whiteSpace: "nowrap",
-    height: "32px",
-    lineHeight: "32px"
+    alignItems: "center"
   },
   /** Styles applied to the page selector input container. */
   pageJump: {
-    marginRight: 4,
     width: 24,
     minWidth: 24,
-    maxWidth: theme.spacing(8),
     backgroundColor: "transparent",
     height: "24px",
-    "&:focus, &:focus-within, &:hover": {
-      backgroundColor: theme.colors.bgHover
-    },
     "&, & $pageSizeInput": {
       fontSize: "inherit",
       lineHeight: "inherit"
@@ -89,19 +81,9 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
   },
   /** Styles passed down to the page selector Input component as `input`. */
   pageSizeInput: {
-    paddingLeft: 4,
-    paddingRight: 4,
     margin: 0,
     textAlign: "center",
-    borderRadius: theme.radii.base,
-    MozAppearance: "textfield",
-    "&:focus": {
-      padding: 0,
-      backgroundColor: theme.colors.bgHover
-    },
-    "&:hover": {
-      cursor: "pointer"
-    }
+    MozAppearance: "textfield"
   }
 });
 export {

package/dist/Section/Section.js

@@ -36,7 +36,7 @@ const HvSection = forwardRef(
       {
         ref,
         className: cx(classes.root, className, {
-          [classes.raisedHeader]: raisedHeader && isOpen
+          [classes.raisedHeader]: hasHeader && raisedHeader && isOpen
         }),
         ...others,
         children: [
@@ -85,7 +85,7 @@ const HvSection = forwardRef(
             "div",
             {
               ref: contentRef,
-              hidden: !isOpen,
+              hidden: expandable && !isOpen,
               className: cx(classes.content, {
                 [classes.hidden]: expandable && !isOpen,
                 [classes.hasHeader]: hasHeader

package/dist/SimpleGrid/SimpleGrid.styles.js

@@ -15,10 +15,10 @@ function getSortedBreakpoints(breakpoints) {
     return breakpoints;
   }
   const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
-  const sorted = [...breakpoints].sort(
+  const sorted = breakpoints.toSorted(
     (a, b) => getSize(b[property]) - getSize(a[property])
   );
-  return property === "minWidth" ? sorted.reverse() : sorted;
+  return property === "minWidth" ? sorted.toReversed() : sorted;
 }
 const getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
   return {

package/dist/StatusIcon/StatusIcon.styles.js

@@ -13,14 +13,14 @@ const { staticClasses, useClasses } = createClasses("HvStatusIcon", {
     display: "inline-flex",
     lineHeight: 0,
     flexShrink: 0,
-    padding: theme.space.xxs,
     borderRadius: theme.radii.base,
     "--icsize": "auto",
     ":where([data-size=md])": { borderRadius: theme.radii.round },
     ":where([data-size=lg])": { borderRadius: theme.radii.large },
     ":where([data-size=xl])": { borderRadius: theme.radii.large },
     ":where([data-type=full])": {
-      outline: "1px solid currentcolor"
+      outline: "1px solid currentcolor",
+      padding: theme.space.xxs
     },
     ...Object.fromEntries(
       Object.entries(notificationMap).map(([variant, color]) => [

package/dist/Table/TableCell/TableCell.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
     alignContent: "inherit",
     textAlign: "left",
     borderColor: theme.colors.border,
-    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${theme.space.xs} - 3px ) ${theme.spacing(4)}`,
+    padding: theme.spacing(0, "sm"),
     borderBottomWidth: 1
   },
   /** Styles applied to the cell when it's in the table head. */

package/dist/Table/TableHeader/TableHeader.js

@@ -7,9 +7,9 @@ import TableContext from "../TableContext.js";
 import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableHeader.styles.js";
 import { staticClasses } from "./TableHeader.styles.js";
-import { getSortIconName, isParagraph } from "./utils.js";
-import { HvButton } from "../../Button/Button.js";
+import { isParagraph, getSortIconName } from "./utils.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
 const defaultComponent = "th";
 const HvTableHeader = forwardRef(
   function HvTableHeader2(props, ref) {
@@ -80,40 +80,40 @@ const HvTableHeader = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
+              "data-align": align !== "inherit" ? align : void 0,
               className: cx(
                 classes.headerContent,
                 align !== "inherit" && classes[`alignFlex${capitalize(align)}`]
               ),
               children: [
+                /* @__PURE__ */ jsx(
+                  HvTypography,
+                  {
+                    component: "div",
+                    className: cx(classes.headerText, {
+                      [classes.headerParagraph]: paragraph,
+                      [classes.sortableHeaderText]: sortable
+                    }),
+                    variant: "label",
+                    ...headerTextProps,
+                    children
+                  }
+                ),
                 isHeadCell && sortable && /* @__PURE__ */ jsx(
-                  HvButton,
+                  HvButtonBase,
                   {
                     className: classes.sortButton,
-                    icon: true,
                     "aria-label": "Sort",
                     ...sortButtonProps,
                     children: /* @__PURE__ */ jsx(
                       HvIcon,
                       {
+                        compact: true,
                         name: getSortIconName(sorted && sortDirection),
                         className: classes.sortIcon
                       }
                     )
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  HvTypography,
-                  {
-                    component: "div",
-                    className: cx({
-                      [classes.headerText]: !paragraph,
-                      [classes.headerParagraph]: paragraph,
-                      [classes.sortableHeaderText]: sortable
-                    }),
-                    variant: "label",
-                    ...headerTextProps,
-                    children
-                  }
                 )
               ]
             }

package/dist/Table/TableHeader/TableHeader.styles.js

@@ -2,21 +2,18 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvTableHeader", {
   root: {
-    "--first-row-cell-height": "52px",
+    "--first-row-cell-height": "32px",
     "--cell-height": "32px",
     height: "var(--cell-height)",
     verticalAlign: "inherit",
     alignContent: "inherit",
     textAlign: "left",
-    padding: theme.spacing(0, 1, 0, 4),
+    padding: theme.spacing(0, "sm"),
     borderColor: theme.colors.border,
     borderBottomWidth: 1
   },
   head: {
-    paddingTop: 8,
-    verticalAlign: "top",
-    alignContent: "start",
-    ...theme.typography.label,
+    fontWeight: theme.fontWeights.semibold,
     backgroundColor: theme.colors.bgContainer,
     borderBottomWidth: 1,
     "*:first-of-type > &": {
@@ -31,14 +28,10 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
       }
     },
     "&$sortable": {
-      verticalAlign: "initial",
-      alignContent: "initial",
-      paddingTop: 0,
-      paddingLeft: 0,
       cursor: "pointer",
       ":hover, :focus-within": {
         backgroundColor: theme.colors.bgHover,
-        "& $sortIcon": {
+        "& $sortButton": {
           opacity: 1
         }
       }
@@ -49,9 +42,6 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     ...theme.typography.body,
     ":where($sorted)": {
       backgroundColor: theme.alpha("bgContainer", 0.4)
-    },
-    "&$sortable:not($variantNone)": {
-      paddingLeft: 32
     }
   },
   footer: {},
@@ -78,31 +68,40 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
       borderLeftWidth: 0
     }
   },
-  headerContent: { display: "flex", alignItems: "flex-start", width: "100%" },
+  headerContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.xxs,
+    width: "100%"
+  },
   headerText: { overflow: "hidden", textOverflow: "ellipsis" },
-  headerParagraph: { overflow: "hidden", display: "-webkit-box" },
-  sortableHeaderText: { paddingTop: "8px" },
+  headerParagraph: { textOverflow: "inherit", display: "-webkit-box" },
+  /** @deprecated use `sortable: &$headerText` */
+  sortableHeaderText: {},
   sorted: {
-    "& $sortIcon": {
+    "& $sortButton": {
       opacity: 1
     }
   },
   sortable: {},
   sortButton: {
+    opacity: 0,
     paddingLeft: 4,
     paddingTop: 4,
-    ":focus-visible": {
+    ":focus-visible,:hover": {
       boxShadow: "none",
       backgroundColor: "transparent"
     }
   },
-  sortIcon: { opacity: 0 },
+  /** @deprecated use `classes.sortButton` instead */
+  sortIcon: {},
+  // TODO: deprecate & merge these classes in favour of data-align
   alignLeft: { textAlign: "left" },
   alignRight: { textAlign: "right", flexDirection: "row-reverse" },
   alignCenter: { textAlign: "center" },
   alignJustify: { textAlign: "justify" },
   alignFlexLeft: { justifyContent: "flex-start" },
-  alignFlexRight: { justifyContent: "flex-end" },
+  alignFlexRight: { flexDirection: "row-reverse" },
   alignFlexCenter: { justifyContent: "center" },
   alignFlexJustify: { textAlign: "justify" },
   variantCheckbox: {

package/dist/Table/TableSection/TableSection.js

@@ -1,21 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useClasses } from "./TableSection.styles.js";
 import { staticClasses } from "./TableSection.styles.js";
 import { HvSection } from "../../Section/Section.js";
 const HvTableSection = forwardRef(
   function HvTableSection2(props, ref) {
     const {
-      id,
       classes: classesProp,
       children,
       ...others
     } = useDefaultProps("HvTableSection", props);
     const { classes } = useClasses(classesProp);
-    const elementId = useUniqueId(id);
-    return /* @__PURE__ */ jsx(HvSection, { id: elementId, ref, classes, ...others, children });
+    return /* @__PURE__ */ jsx(HvSection, { ref, classes, ...others, children });
   }
 );
 export {

package/dist/Table/renderers/renderers.js

@@ -55,27 +55,30 @@ function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabe
       const { value, row } = cellProps;
       const expandedProps = row.getToggleRowExpandedProps?.();
       const hasContent = getCanRowExpand?.(row) ?? true;
-      return /* @__PURE__ */ jsx(ClassNames, { children: ({ css }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        hasContent && /* @__PURE__ */ jsx(
-          HvButton,
-          {
-            icon: true,
-            "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
-            "aria-expanded": row.isExpanded,
-            onClick: expandedProps?.onClick,
-            classes: {
-              root: css({
-                position: "absolute",
-                left: 0,
-                top: "50%",
-                transform: "translateY(-50%)"
-              })
-            },
-            children: row.isExpanded ? ExpandedIcon : CollapsedIcon
-          }
-        ),
-        /* @__PURE__ */ jsx(HvOverflowTooltip, { data: hvStringFallback(value) })
-      ] }) });
+      return /* @__PURE__ */ jsx(ClassNames, { children: ({ css }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: css({
+            display: "flex",
+            alignItems: "center",
+            position: "relative",
+            left: -16
+          }),
+          children: [
+            hasContent && /* @__PURE__ */ jsx(
+              HvButton,
+              {
+                icon: true,
+                "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
+                "aria-expanded": row.isExpanded,
+                onClick: expandedProps?.onClick,
+                children: row.isExpanded ? ExpandedIcon : CollapsedIcon
+              }
+            ),
+            /* @__PURE__ */ jsx(HvOverflowTooltip, { data: hvStringFallback(value) })
+          ]
+        }
+      ) });
     },
     sortType: "alphanumeric",
     cellStyle: {

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/TreeView.js

@@ -102,7 +102,7 @@ const HvVerticalNavigationTreeView = forwardRef(function HvVerticalNavigationTre
   );
   const getChildrenIds = (id) => Object.keys(nodeMap.current).map((key) => {
     return nodeMap.current[key];
-  }).filter((node) => node.parentId === id).sort((a, b) => a.index - b.index).map((child) => child.id);
+  }).filter((node) => node.parentId === id).toSorted((a, b) => a.index - b.index).map((child) => child.id);
   const getNavigableChildrenIds = useCallback(
     (id) => {
       let childrenIds = getChildrenIds(id);

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/hooks/useWidth.js

@@ -3,7 +3,9 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { theme } from "@hitachivantara/uikit-styles";
 const useWidth = () => {
   const muiTheme = useTheme();
-  const keys = Object.keys(theme.breakpoints.values).reverse();
+  const keys = Object.keys(
+    theme.breakpoints.values
+  ).toReversed();
   return keys.reduce((output, key) => {
     const matches = useMediaQuery(muiTheme.breakpoints.up(key));
     return !output && matches ? key : output;

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;
 }
@@ -5980,7 +5982,7 @@ export declare interface HvTableHeaderProps extends Omit<React.ThHTMLAttributes<
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvTableHeaderClasses;
     /** Extra props to be passed onto the sort button in the header. */
-    sortButtonProps?: HvButtonProps;
+    sortButtonProps?: HvButtonBaseProps;
 }
 
 export declare type HvTableHeaderRenderer<D extends object = Record<string, unknown>> = Renderer<HvHeaderProps_2<D>>;
@@ -6099,7 +6101,7 @@ export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement
 }
 
 /**
- * The `TableSection` component is a wrapper for the `Section` component that applies
+ * The `HvTableSection` component is a wrapper for the `HvSection` component that applies
  * specific stylings for tables that follow the latest DS specifications.
  */
 export declare const HvTableSection: ForwardRefExoticComponent<HvTableSectionProps & RefAttributes<HTMLDivElement>>;