@hitachivantara/uikit-react-core 6.2.0 → 6.3.0

package/dist/Pagination/Pagination.js

@@ -9,12 +9,11 @@ import { useClasses } from "./Pagination.styles.js";
 import { staticClasses } from "./Pagination.styles.js";
 import HvSelect, { Option } from "./Select.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
-import { HvTypography } from "../Typography/Typography.js";
 import { HvBaseInput } from "../BaseInput/BaseInput.js";
 const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
 const DEFAULT_LABELS = {
   /** The show label. */
-  pageSizePrev: "Show",
+  pageSizePrev: "",
   /** Indicate the units of the page size selection. */
   pageSizeEntryName: "rows",
   /** Used for the aria-label of the selection of number of unit.s */
@@ -36,15 +35,14 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
   const {
     classes: classesProp,
     className,
-    id,
     pages = 1,
     page = 0,
     showPageSizeOptions = true,
     pageSizeOptions = defaultPageSizeOptions,
     pageSize = defaultPageSizeOptions[1],
     showPageJump = true,
-    canPrevious = false,
-    canNext = false,
+    canPrevious,
+    canNext,
     onPageChange,
     onPageSizeChange,
     labels: labelsProp,
@@ -56,7 +54,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const muiTheme = useTheme();
-  const isXsDown = useMediaQuery(muiTheme.breakpoints.down("xs"));
+  const isXsDown = useMediaQuery(muiTheme.breakpoints.only("xs"));
   const [pageInput, setPageInput] = useState(page);
   const changePage = useCallback(
     (newPage) => {
@@ -97,14 +95,14 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
       ...currentPageInputProps
     }
   );
-  return /* @__PURE__ */ jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
-      !isXsDown && /* @__PURE__ */ jsx("span", { className: classes?.pageSizeTextContainer, children: labels?.pageSizePrev }),
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+    showPageSizeOptions && /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isXsDown && labels.pageSizePrev && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels.pageSizePrev }),
       /* @__PURE__ */ jsx(
         HvSelect,
         {
           disabled: pageSize === 0,
-          "aria-label": labels?.pageSizeSelectorDescription,
+          "aria-label": labels.pageSizeSelectorDescription,
           onChange: (evt, val) => onPageSizeChange?.(val),
           value: pageSize,
           classes: {
@@ -114,7 +112,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
         }
       ),
-      !isXsDown && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName })
+      !isXsDown && labels.pageSizeEntryName && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels.pageSizeEntryName })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
       /* @__PURE__ */ jsx(
@@ -139,7 +137,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
       ),
       /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
         showPageJump ? renderPageJump() : /* @__PURE__ */ jsx("span", { children: `${page + 1}` }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
+        /* @__PURE__ */ jsx("span", { children: `${labels?.pagesSeparator} ` }),
         /* @__PURE__ */ jsx("span", { children: pages })
       ] }),
       /* @__PURE__ */ jsx(

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/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/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

@@ -5980,7 +5980,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 +6099,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>>;

package/dist/themes/pentaho.js

@@ -552,9 +552,6 @@ const pentaho = mergeTheme(pentaho$1, {
     },
     HvPagination: {
       classes: {
-        root: {
-          ...theme.typography.caption1
-        },
         icon: {
           fontSize: 16
         }
@@ -748,6 +745,23 @@ const pentaho = mergeTheme(pentaho$1, {
     HvFooter: {
       name: "Pentaho"
     },
+    HvTableCell: {
+      classes: {
+        root: {
+          borderColor: theme.colors.borderSubtle
+        }
+      }
+    },
+    HvTableHeader: {
+      classes: {
+        root: {
+          borderColor: theme.colors.borderSubtle
+        },
+        head: {
+          backgroundColor: theme.colors.bgPage
+        }
+      }
+    },
     HvTabs: {
       classes: {
         floating: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -50,7 +50,7 @@
     "rc-slider": "^10.5.0",
     "rc-tooltip": "~6.3.0",
     "react-popper": "^2.3.0",
-    "react-resize-detector": "^8.1.0",
+    "react-resize-detector": "^12.3.0",
     "react-table": "^7.8.0",
     "react-window": "^1.8.10"
   },
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "7815bbc4041430fbc4fda437e7359ec6cfcb0b32",
+  "gitHead": "f2b8a9e107bc8886231d527b37b30716d891105c",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",