@hitachivantara/uikit-react-core 5.76.0 → 5.78.0

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst sortedColor = theme.alpha(\"primary\", 0.1);\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"1px solid transparent\",\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...(theme.typography.label as React.CSSProperties),\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n    ...(theme.typography.body as React.CSSProperties),\n    fontFamily: theme.fontFamily.body,\n\n    \"&$sorted\": {\n      backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n    },\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    backgroundColor: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.secondary}`,\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst sortedColor = theme.alpha(\"primary\", 0.1);\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"1px solid transparent\",\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...(theme.typography.label as React.CSSProperties),\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n    ...(theme.typography.body as React.CSSProperties),\n    fontFamily: theme.fontFamily.body,\n\n    \"&$sorted\": {\n      backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n    },\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    backgroundColor: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.secondary}`,\n  },\n});\n"],"names":[],"mappings":"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"}

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

@@ -6,6 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     "--cell-height": "32px",
     height: "var(--cell-height)",
     verticalAlign: "inherit",
+    alignContent: "inherit",
     textAlign: "left",
     padding: theme.spacing(0, 1, 0, 4),
     borderBottom: `1px solid ${theme.colors.atmo4}`
@@ -13,6 +14,7 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
   head: {
     paddingTop: 8,
     verticalAlign: "top",
+    alignContent: "start",
     ...theme.typography.label,
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     backgroundColor: theme.colors.atmo1,
@@ -30,6 +32,7 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     },
     "&$sortable": {
       verticalAlign: "initial",
+      alignContent: "initial",
       paddingTop: 0,
       paddingLeft: 0,
       cursor: "pointer",

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.styles.js","sources":["../../../../src/Table/TableHeader/TableHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableHeader\", {\n  root: {\n    \"--first-row-cell-height\": \"52px\",\n    \"--cell-height\": \"32px\",\n    height: \"var(--cell-height)\",\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: theme.spacing(0, 1, 0, 4),\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  head: {\n    paddingTop: 8,\n    verticalAlign: \"top\",\n    ...theme.typography.label,\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    backgroundColor: theme.colors.atmo1,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n\n    \"*:first-of-type > &\": {\n      height: \"var(--first-row-cell-height)\",\n      borderTop: \"1px solid transparent\",\n    },\n\n    \"&$variantList\": {\n      backgroundColor: \"inherit\",\n      borderBottom: 0,\n      \"*:first-of-type > &\": {\n        borderTop: 0,\n      },\n    },\n\n    \"&$sortable\": {\n      verticalAlign: \"initial\",\n      paddingTop: 0,\n      paddingLeft: 0,\n      cursor: \"pointer\",\n\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n      \"&:focus-within\": {\n        backgroundColor: \"transparent\",\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n    },\n  },\n  body: {\n    backgroundColor: \"inherit\",\n    ...theme.typography.body,\n    \"&$sortable:not($variantNone)\": {\n      paddingLeft: 32,\n    },\n  },\n  footer: {},\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  stickyColumnMostLeft: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  stickyColumnLeastRight: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostLeft: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n  headerContent: { display: \"flex\", alignItems: \"flex-start\", width: \"100%\" },\n  headerText: { overflow: \"hidden\", textOverflow: \"ellipsis\" },\n  headerParagraph: { overflow: \"hidden\", display: \"-webkit-box\" },\n  sortableHeaderText: { paddingTop: \"8px\" },\n  sorted: {\n    \"& $sortIcon\": {\n      visibility: \"visible\",\n    },\n  },\n  sortable: {},\n  sortButton: {\n    \"$root$sortable &\": {\n      boxShadow: \"none\",\n      backgroundColor: \"transparent\",\n      \"&:hover\": {\n        backgroundColor: theme.colors.primary_20,\n      },\n    },\n  },\n  sortIcon: { display: \"inline-flex\", visibility: \"hidden\" },\n  alignLeft: { textAlign: \"left\" },\n  alignRight: { textAlign: \"right\", flexDirection: \"row-reverse\" },\n  alignCenter: { textAlign: \"center\" },\n  alignJustify: { textAlign: \"justify\" },\n  alignFlexLeft: { justifyContent: \"flex-start\" },\n  alignFlexRight: { justifyContent: \"flex-end\" },\n  alignFlexCenter: { justifyContent: \"center\" },\n  alignFlexJustify: { textAlign: \"justify\" },\n  variantCheckbox: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantExpand: {},\n  variantActions: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantNone: { padding: 0 },\n  variantList: {\n    backgroundColor: \"inherit\",\n    borderBottom: 0,\n    height: 16,\n    \":first-of-type > &\": {\n      borderTop: 0,\n      height: 16,\n    },\n  },\n  resizable: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  resizing: { borderRight: `solid 2px ${theme.colors.secondary}` },\n  resizer: {\n    display: \"inline-block\",\n    width: 10,\n    height: \"100%\",\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transform: \"translateX(50%)\",\n    zIndex: 1,\n    touchAction: \"none\",\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableHeader.styles.js","sources":["../../../../src/Table/TableHeader/TableHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableHeader\", {\n  root: {\n    \"--first-row-cell-height\": \"52px\",\n    \"--cell-height\": \"32px\",\n    height: \"var(--cell-height)\",\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    padding: theme.spacing(0, 1, 0, 4),\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  head: {\n    paddingTop: 8,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n    ...theme.typography.label,\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    backgroundColor: theme.colors.atmo1,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n\n    \"*:first-of-type > &\": {\n      height: \"var(--first-row-cell-height)\",\n      borderTop: \"1px solid transparent\",\n    },\n\n    \"&$variantList\": {\n      backgroundColor: \"inherit\",\n      borderBottom: 0,\n      \"*:first-of-type > &\": {\n        borderTop: 0,\n      },\n    },\n\n    \"&$sortable\": {\n      verticalAlign: \"initial\",\n      alignContent: \"initial\",\n      paddingTop: 0,\n      paddingLeft: 0,\n      cursor: \"pointer\",\n\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n      \"&:focus-within\": {\n        backgroundColor: \"transparent\",\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n    },\n  },\n  body: {\n    backgroundColor: \"inherit\",\n    ...theme.typography.body,\n    \"&$sortable:not($variantNone)\": {\n      paddingLeft: 32,\n    },\n  },\n  footer: {},\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  stickyColumnMostLeft: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  stickyColumnLeastRight: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostLeft: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n  headerContent: { display: \"flex\", alignItems: \"flex-start\", width: \"100%\" },\n  headerText: { overflow: \"hidden\", textOverflow: \"ellipsis\" },\n  headerParagraph: { overflow: \"hidden\", display: \"-webkit-box\" },\n  sortableHeaderText: { paddingTop: \"8px\" },\n  sorted: {\n    \"& $sortIcon\": {\n      visibility: \"visible\",\n    },\n  },\n  sortable: {},\n  sortButton: {\n    \"$root$sortable &\": {\n      boxShadow: \"none\",\n      backgroundColor: \"transparent\",\n      \"&:hover\": {\n        backgroundColor: theme.colors.primary_20,\n      },\n    },\n  },\n  sortIcon: { display: \"inline-flex\", visibility: \"hidden\" },\n  alignLeft: { textAlign: \"left\" },\n  alignRight: { textAlign: \"right\", flexDirection: \"row-reverse\" },\n  alignCenter: { textAlign: \"center\" },\n  alignJustify: { textAlign: \"justify\" },\n  alignFlexLeft: { justifyContent: \"flex-start\" },\n  alignFlexRight: { justifyContent: \"flex-end\" },\n  alignFlexCenter: { justifyContent: \"center\" },\n  alignFlexJustify: { textAlign: \"justify\" },\n  variantCheckbox: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantExpand: {},\n  variantActions: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantNone: { padding: 0 },\n  variantList: {\n    backgroundColor: \"inherit\",\n    borderBottom: 0,\n    height: 16,\n    \":first-of-type > &\": {\n      borderTop: 0,\n      height: 16,\n    },\n  },\n  resizable: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  resizing: { borderRight: `solid 2px ${theme.colors.secondary}` },\n  resizer: {\n    display: \"inline-block\",\n    width: 10,\n    height: \"100%\",\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transform: \"translateX(50%)\",\n    zIndex: 1,\n    touchAction: \"none\",\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Table/TableRow/TableRow.styles.js

@@ -7,6 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvTableRow", {
     color: "inherit",
     backgroundColor: theme.colors.atmo1,
     verticalAlign: "middle",
+    alignContent: "center",
     outline: 0
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */

package/dist/esm/Table/TableRow/TableRow.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.styles.js","sources":["../../../../src/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { getBorderStyles } from \"../utils/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n  /** Styles applied to the component root class. */\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.colors.atmo1,\n    verticalAlign: \"middle\",\n    outline: 0,\n  },\n  /** Styles applied to the component root when inside a `HvTableHead`. */\n  head: {},\n  /** Styles applied to the component root when inside a `HvTableBody`. */\n  body: {},\n  /** Styles applied to the component root when inside a `HvTableFooter`. */\n  footer: {},\n  /** Styles applied to the component root when selected. */\n  selected: {\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** Styles applied to the component root when expanded. */\n  expanded: {\n    backgroundColor: theme.colors.atmo1,\n    \"& > *[role=cell]\": {\n      borderBottom: \"none\",\n    },\n  },\n  /** Styles applied to the component root when striped. */\n  striped: {\n    \"&:nth-of-type(even)\": {\n      backgroundColor: theme.alpha(\"atmo1\", 0.6),\n\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \"&:nth-of-type(odd)\": {\n      backgroundColor: \"transparent\",\n\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n  },\n  /** Styles applied to the component root on hover. */\n  hover: {\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantList: {\n    // only applied on custom `display`\n    marginBottom: theme.space.xs,\n    borderRadius: theme.radii.round,\n\n    ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n    backgroundColor: theme.colors.atmo1,\n    \"&$selected\": {\n      ...getBorderStyles(theme.colors.secondary, theme.radii.round),\n\n      \"&:hover\": {\n        ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.radii.round,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantListHead: {\n    backgroundColor: \"transparent\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA;AAAA,EAEvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,MAAM,CAAC;AAAA;AAAA,EAEP,QAAQ,CAAC;AAAA;AAAA,EAET,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA,EAEA,SAAS;AAAA,IACP,uBAAuB;AAAA,MACrB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,MAEzC,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,sBAAsB;AAAA,MACpB,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA;AAAA,EAEA,aAAa;AAAA;AAAA,IAEX,cAAc,MAAM,MAAM;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,IAE1B,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,IACxD,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,GAAG,gBAAgB,MAAM,OAAO,WAAW,MAAM,MAAM,KAAK;AAAA,MAE5D,WAAW;AAAA,QACT,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,IAC1D;AAAA,IACA,iBAAiB;AAAA,MACf,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AACF,CAAC;"}
+{"version":3,"file":"TableRow.styles.js","sources":["../../../../src/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { getBorderStyles } from \"../utils/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n  /** Styles applied to the component root class. */\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.colors.atmo1,\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    outline: 0,\n  },\n  /** Styles applied to the component root when inside a `HvTableHead`. */\n  head: {},\n  /** Styles applied to the component root when inside a `HvTableBody`. */\n  body: {},\n  /** Styles applied to the component root when inside a `HvTableFooter`. */\n  footer: {},\n  /** Styles applied to the component root when selected. */\n  selected: {\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** Styles applied to the component root when expanded. */\n  expanded: {\n    backgroundColor: theme.colors.atmo1,\n    \"& > *[role=cell]\": {\n      borderBottom: \"none\",\n    },\n  },\n  /** Styles applied to the component root when striped. */\n  striped: {\n    \"&:nth-of-type(even)\": {\n      backgroundColor: theme.alpha(\"atmo1\", 0.6),\n\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \"&:nth-of-type(odd)\": {\n      backgroundColor: \"transparent\",\n\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n  },\n  /** Styles applied to the component root on hover. */\n  hover: {\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantList: {\n    // only applied on custom `display`\n    marginBottom: theme.space.xs,\n    borderRadius: theme.radii.round,\n\n    ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n    backgroundColor: theme.colors.atmo1,\n    \"&$selected\": {\n      ...getBorderStyles(theme.colors.secondary, theme.radii.round),\n\n      \"&:hover\": {\n        ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.radii.round,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantListHead: {\n    backgroundColor: \"transparent\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA;AAAA,EAEvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,eAAe;AAAA,IACf,cAAc;AAAA,IACd,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,MAAM,CAAC;AAAA;AAAA,EAEP,QAAQ,CAAC;AAAA;AAAA,EAET,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA,EAEA,SAAS;AAAA,IACP,uBAAuB;AAAA,MACrB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,MAEzC,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,sBAAsB;AAAA,MACpB,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA;AAAA,EAEA,aAAa;AAAA;AAAA,IAEX,cAAc,MAAM,MAAM;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,IAE1B,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,IACxD,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,GAAG,gBAAgB,MAAM,OAAO,WAAW,MAAM,MAAM,KAAK;AAAA,MAE5D,WAAW;AAAA,QACT,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,IAC1D;AAAA,IACA,iBAAiB;AAAA,MACf,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AACF,CAAC;"}

package/dist/esm/Table/hooks/useRowExpand.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { DropDownXS, DropUpXS } from "@hitachivantara/uikit-react-icons";
+import { DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useLabels } from "../../hooks/useLabels.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -13,7 +13,7 @@ const CellWithExpandButton = ({
   labels: labelsProp
 }) => {
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const { onClick } = row.getToggleRowExpandedProps();
+  const rowProps = row.getToggleRowExpandedProps?.();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       HvButton,
@@ -21,8 +21,8 @@ const CellWithExpandButton = ({
         icon: true,
         "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
         "aria-expanded": row.isExpanded,
-        onClick,
-        children: row.isExpanded ? /* @__PURE__ */ jsx(DropDownXS, {}) : /* @__PURE__ */ jsx(DropUpXS, {})
+        onClick: rowProps?.onClick,
+        children: /* @__PURE__ */ jsx(DropDownXS, { style: { rotate: row.isExpanded ? "180deg" : void 0 } })
       }
     ),
     cell?.value && /* @__PURE__ */ jsx(HvTypography, { variant: "label", component: "span", children: cell.value })

package/dist/esm/Table/hooks/useRowExpand.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {\n  Hooks,\n  TableExpandedToggleProps,\n  UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n  expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n  disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n  onClick?: React.MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n  D extends object = Record<string, unknown>,\n> extends UseExpandedRowProps<D> {\n  getToggleRowExpandedProps: (\n    props?: Partial<TableExpandedToggleProps>,\n  ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n  hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n  expandRowButtonAriaLabel: \"Expand this row\",\n  collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({\n  row,\n  cell,\n  labels: labelsProp,\n}: any) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { onClick } = row.getToggleRowExpandedProps();\n\n  return (\n    <>\n      <HvButton\n        icon\n        aria-label={\n          row.isExpanded\n            ? labels.collapseRowButtonAriaLabel\n            : labels.expandRowButtonAriaLabel\n        }\n        aria-expanded={row.isExpanded}\n        onClick={onClick}\n      >\n        {row.isExpanded ? <DropDownXS /> : <DropUpXS />}\n      </HvButton>\n      {cell?.value && (\n        <HvTypography variant=\"label\" component=\"span\">\n          {cell.value}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst visibleColumnsHook = (columns: any, { instance }: any) => {\n  if (instance.disableCreateExpandButton) {\n    return columns;\n  }\n\n  // add a button to first data column, unless it has a custom renderer\n  // if so, add an extra column instead\n  const firstDataColumnIndex = columns.findIndex(\n    (c: any) => c.id?.indexOf(\"_hv_\") !== 0,\n  );\n\n  if (firstDataColumnIndex !== -1) {\n    const firstDataColumn = columns[firstDataColumnIndex];\n\n    if (firstDataColumn.Cell == null) {\n      firstDataColumn.Cell = CellWithExpandButton;\n      firstDataColumn.variant = \"expand\";\n\n      return columns;\n    }\n  }\n\n  const expandColumn = {\n    id: \"_hv_expand\",\n    variant: \"none\",\n\n    width: 32,\n\n    // this will only work when using useHvTableSticky\n    // but ensures it stays left of any sticky column\n    sticky: \"left\",\n\n    Cell: CellWithExpandButton,\n  };\n\n  const columnsCopy = [...columns];\n  columnsCopy.splice(\n    firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,\n    0,\n    expandColumn,\n  );\n\n  return columnsCopy;\n};\n\nconst getRowPropsHook = (props: any, { row }: any) => {\n  const nextProps: UseHvRowExpandTableRowProps = {\n    expanded: row.isExpanded,\n  };\n\n  return [props, nextProps];\n};\n\nconst useRowExpand: UseRowExpandProps = (hooks) => {\n  hooks.visibleColumns.push(visibleColumnsHook);\n  hooks.getRowProps.push(getRowPropsHook);\n};\nuseRowExpand.pluginName = \"useHvRowExpand\";\n\nexport default useRowExpand;\n"],"names":[],"mappings":";;;;;AAuCA,MAAM,iBAAiB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,4BAA4B;AAC9B;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAW;AACH,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,EAAE,QAAA,IAAY,IAAI,0BAA0B;AAElD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,cACE,IAAI,aACA,OAAO,6BACP,OAAO;AAAA,QAEb,iBAAe,IAAI;AAAA,QACnB;AAAA,QAEC,cAAI,aAAa,oBAAC,YAAW,CAAA,CAAA,wBAAM,UAAS,EAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,IACC,MAAM,SACJ,oBAAA,cAAA,EAAa,SAAQ,SAAQ,WAAU,QACrC,UAAA,KAAK,MACR,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,qBAAqB,CAAC,SAAc,EAAE,eAAoB;AAC9D,MAAI,SAAS,2BAA2B;AAC/B,WAAA;AAAA,EACT;AAIA,QAAM,uBAAuB,QAAQ;AAAA,IACnC,CAAC,MAAW,EAAE,IAAI,QAAQ,MAAM,MAAM;AAAA,EAAA;AAGxC,MAAI,yBAAyB,IAAI;AACzB,UAAA,kBAAkB,QAAQ,oBAAoB;AAEhD,QAAA,gBAAgB,QAAQ,MAAM;AAChC,sBAAgB,OAAO;AACvB,sBAAgB,UAAU;AAEnB,aAAA;AAAA,IACT;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,IAAI;AAAA,IACJ,SAAS;AAAA,IAET,OAAO;AAAA;AAAA;AAAA,IAIP,QAAQ;AAAA,IAER,MAAM;AAAA,EAAA;AAGF,QAAA,cAAc,CAAC,GAAG,OAAO;AACnB,cAAA;AAAA,IACV,yBAAyB,KAAK,uBAAuB;AAAA,IACrD;AAAA,IACA;AAAA,EAAA;AAGK,SAAA;AACT;AAEA,MAAM,kBAAkB,CAAC,OAAY,EAAE,UAAe;AACpD,QAAM,YAAyC;AAAA,IAC7C,UAAU,IAAI;AAAA,EAAA;AAGT,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEM,MAAA,eAAkC,CAAC,UAAU;AAC3C,QAAA,eAAe,KAAK,kBAAkB;AACtC,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,aAAa,aAAa;"}
+{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {\n  Hooks,\n  TableExpandedToggleProps,\n  UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\nimport type { HvCellProps } from \"./useTable\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n  expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n  disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n  onClick?: React.MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n  D extends object = Record<string, unknown>,\n> extends UseExpandedRowProps<D> {\n  getToggleRowExpandedProps: (\n    props?: Partial<TableExpandedToggleProps>,\n  ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n  hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n  expandRowButtonAriaLabel: \"Expand this row\",\n  collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({\n  row,\n  cell,\n  labels: labelsProp,\n}: HvCellProps<any>) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const rowProps = row.getToggleRowExpandedProps?.();\n\n  return (\n    <>\n      <HvButton\n        icon\n        aria-label={\n          row.isExpanded\n            ? labels.collapseRowButtonAriaLabel\n            : labels.expandRowButtonAriaLabel\n        }\n        aria-expanded={row.isExpanded}\n        onClick={rowProps?.onClick}\n      >\n        <DropDownXS style={{ rotate: row.isExpanded ? \"180deg\" : undefined }} />\n      </HvButton>\n      {cell?.value && (\n        <HvTypography variant=\"label\" component=\"span\">\n          {cell.value}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst visibleColumnsHook = (columns: any, { instance }: any) => {\n  if (instance.disableCreateExpandButton) {\n    return columns;\n  }\n\n  // add a button to first data column, unless it has a custom renderer\n  // if so, add an extra column instead\n  const firstDataColumnIndex = columns.findIndex(\n    (c: any) => c.id?.indexOf(\"_hv_\") !== 0,\n  );\n\n  if (firstDataColumnIndex !== -1) {\n    const firstDataColumn = columns[firstDataColumnIndex];\n\n    if (firstDataColumn.Cell == null) {\n      firstDataColumn.Cell = CellWithExpandButton;\n      firstDataColumn.variant = \"expand\";\n\n      return columns;\n    }\n  }\n\n  const expandColumn = {\n    id: \"_hv_expand\",\n    variant: \"none\",\n\n    width: 32,\n\n    // this will only work when using useHvTableSticky\n    // but ensures it stays left of any sticky column\n    sticky: \"left\",\n\n    Cell: CellWithExpandButton,\n  };\n\n  const columnsCopy = [...columns];\n  columnsCopy.splice(\n    firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,\n    0,\n    expandColumn,\n  );\n\n  return columnsCopy;\n};\n\nconst getRowPropsHook = (props: any, { row }: any) => {\n  const nextProps: UseHvRowExpandTableRowProps = {\n    expanded: row.isExpanded,\n  };\n\n  return [props, nextProps];\n};\n\nconst useRowExpand: UseRowExpandProps = (hooks) => {\n  hooks.visibleColumns.push(visibleColumnsHook);\n  hooks.getRowProps.push(getRowPropsHook);\n};\nuseRowExpand.pluginName = \"useHvRowExpand\";\n\nexport default useRowExpand;\n"],"names":[],"mappings":";;;;;AAwCA,MAAM,iBAAiB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,4BAA4B;AAC9B;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAwB;AAChB,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAC7C,QAAA,WAAW,IAAI;AAErB,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,cACE,IAAI,aACA,OAAO,6BACP,OAAO;AAAA,QAEb,iBAAe,IAAI;AAAA,QACnB,SAAS,UAAU;AAAA,QAEnB,UAAA,oBAAC,cAAW,OAAO,EAAE,QAAQ,IAAI,aAAa,WAAW,OAAa,EAAA,CAAA;AAAA,MAAA;AAAA,IACxE;AAAA,IACC,MAAM,SACJ,oBAAA,cAAA,EAAa,SAAQ,SAAQ,WAAU,QACrC,UAAA,KAAK,MACR,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,qBAAqB,CAAC,SAAc,EAAE,eAAoB;AAC9D,MAAI,SAAS,2BAA2B;AAC/B,WAAA;AAAA,EACT;AAIA,QAAM,uBAAuB,QAAQ;AAAA,IACnC,CAAC,MAAW,EAAE,IAAI,QAAQ,MAAM,MAAM;AAAA,EAAA;AAGxC,MAAI,yBAAyB,IAAI;AACzB,UAAA,kBAAkB,QAAQ,oBAAoB;AAEhD,QAAA,gBAAgB,QAAQ,MAAM;AAChC,sBAAgB,OAAO;AACvB,sBAAgB,UAAU;AAEnB,aAAA;AAAA,IACT;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,IAAI;AAAA,IACJ,SAAS;AAAA,IAET,OAAO;AAAA;AAAA;AAAA,IAIP,QAAQ;AAAA,IAER,MAAM;AAAA,EAAA;AAGF,QAAA,cAAc,CAAC,GAAG,OAAO;AACnB,cAAA;AAAA,IACV,yBAAyB,KAAK,uBAAuB;AAAA,IACrD;AAAA,IACA;AAAA,EAAA;AAGK,SAAA;AACT;AAEA,MAAM,kBAAkB,CAAC,OAAY,EAAE,UAAe;AACpD,QAAM,YAAyC;AAAA,IAC7C,UAAU,IAAI;AAAA,EAAA;AAGT,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEM,MAAA,eAAkC,CAAC,UAAU;AAC3C,QAAA,eAAe,KAAK,kBAAkB;AACtC,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,aAAa,aAAa;"}

package/dist/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { getElementById } from \"../utils/document\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAoEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EAAA;AAItC,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { getElementById } from \"../utils/document\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   * @deprecated tooltips already support multiline and can be styled accordingly.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAqEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EAAA;AAItC,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/esm/Tooltip/Tooltip.styles.js

@@ -4,13 +4,9 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvTooltip", {
   root: {},
   tooltip: {},
-  tooltipMulti: {},
   popper: {
-    [`& .${tooltipClasses.popper}`]: {
-      opacity: 1
-    },
+    // TODO: move this to `tooltip` in v6 and make class always be applied
     [`& .${tooltipClasses.tooltip}`]: {
-      fontFamily: theme.fontFamily.body,
       ...theme.typography.body,
       display: "flex",
       width: "fit-content",
@@ -54,19 +50,29 @@ const { staticClasses, useClasses } = createClasses("HvTooltip", {
       padding: theme.space.sm
     },
     "& $tooltip": {
-      padding: "15px 20px",
+      padding: theme.space.sm,
       borderRadius: theme.radii.round,
       "& p": {
         wordBreak: "break-word"
       }
     }
   },
+  // TODO: remove in v6
+  /** @deprecated */
+  tooltipMulti: {},
+  /** @deprecated */
   title: {},
+  /** @deprecated */
   valuesContainer: {},
+  /** @deprecated */
   values: {},
+  /** @deprecated */
   color: {},
+  /** @deprecated */
   separatorColor: {},
+  /** @deprecated */
   separator: {},
+  /** @deprecated */
   valueWrapper: {}
 });
 export {

package/dist/esm/Tooltip/Tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.js","sources":["../../../src/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { tooltipClasses as MuitooltipClasses } from \"@mui/material/Tooltip\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: \"15px 20px\",\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n"],"names":["MuitooltipClasses"],"mappings":";;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,cAAc,CAAC;AAAA,EACf,QAAQ;AAAA,IACN,CAAC,MAAMA,eAAkB,MAAM,EAAE,GAAG;AAAA,MAClC,SAAS;AAAA,IACX;AAAA,IACA,CAAC,MAAMA,eAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,YAAY,MAAM,WAAW;AAAA,MAC7B,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AAAA,EACR,iBAAiB,CAAC;AAAA,EAClB,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AACjB,CAAC;"}
+{"version":3,"file":"Tooltip.styles.js","sources":["../../../src/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { tooltipClasses as MuitooltipClasses } from \"@mui/material/Tooltip\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  popper: {\n    // TODO: move this to `tooltip` in v6 and make class always be applied\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: theme.space.sm,\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  // TODO: remove in v6\n  /** @deprecated */\n  tooltipMulti: {},\n  /** @deprecated */\n  title: {},\n  /** @deprecated */\n  valuesContainer: {},\n  /** @deprecated */\n  values: {},\n  /** @deprecated */\n  color: {},\n  /** @deprecated */\n  separatorColor: {},\n  /** @deprecated */\n  separator: {},\n  /** @deprecated */\n  valueWrapper: {},\n});\n"],"names":["MuitooltipClasses"],"mappings":";;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,QAAQ;AAAA;AAAA,IAEN,CAAC,MAAMA,eAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS,MAAM,MAAM;AAAA,MACrB,cAAc,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,cAAc,CAAC;AAAA;AAAA,EAEf,OAAO,CAAC;AAAA;AAAA,EAER,iBAAiB,CAAC;AAAA;AAAA,EAElB,QAAQ,CAAC;AAAA;AAAA,EAET,OAAO,CAAC;AAAA;AAAA,EAER,gBAAgB,CAAC;AAAA;AAAA,EAEjB,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AACjB,CAAC;"}

package/dist/types/index.d.ts

@@ -536,7 +536,7 @@ declare type CellValue<V = any> = V;
 
 export declare const CellWithCheckBox: ({ row, labels: labelsProp }: any) => JSX_3.Element;
 
-export declare const CellWithExpandButton: ({ row, cell, labels: labelsProp, }: any) => JSX_3.Element;
+export declare const CellWithExpandButton: ({ row, cell, labels: labelsProp, }: HvCellProps<any>) => JSX_3.Element;
 
 export declare const charCounterClasses: {
     root: string;
@@ -4324,6 +4324,17 @@ export declare interface HvInputProps extends HvBaseProps<HTMLElement, "onChange
     inputRef?: HvBaseInputProps["inputRef"];
     /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */
     suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;
+    /**
+     * If enabled, the suggestions list will be rendered using a portal.
+     * If disabled, it will be under the DOM hierarchy of the parent component.
+     * @default false
+     * */
+    enablePortal?: boolean;
+    /**
+     * Whether the suggestions should be triggered once the input is focused and not only when typing.
+     * @default false
+     * */
+    suggestOnFocus?: boolean;
     /**
      * The custom validation function, it receives the value and must return
      * either `true` for valid or `false` for invalid, default validations would only
@@ -6049,7 +6060,10 @@ export declare type HvSuggestionsClasses = ExtractNames<typeof useClasses_17>;
 export declare interface HvSuggestionsProps extends HvBaseProps {
     /** Whether suggestions is visible */
     open?: boolean;
-    /** Whether suggestions is visible. @deprecated use `open` instead */
+    /**
+     * Whether suggestions is visible.
+     * @deprecated use `open` instead.
+     * */
     expanded?: boolean;
     /** The HTML element Suggestions attaches to. */
     anchorEl?: HTMLElement | null;
@@ -6061,6 +6075,12 @@ export declare interface HvSuggestionsProps extends HvBaseProps {
     onClose?: ClickAwayListenerProps["onClickAway"];
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSuggestionsClasses;
+    /**
+     * If enabled, the suggestions list will be rendered using a portal.
+     * If disabled, it will be under the DOM hierarchy of the parent component.
+     * @default false
+     * */
+    enablePortal?: boolean;
 }
 
 export { HvSupportColor }
@@ -6979,6 +6999,7 @@ export declare interface HvTooltipProps extends Omit<TooltipProps, "classes"> {
     TransitionProps?: TooltipProps["TransitionProps"];
     /**
      * Defines if should use a single or multiline tooltip.
+     * @deprecated tooltips already support multiline and can be styled accordingly.
      */
     useSingle?: boolean;
     /**
@@ -7675,9 +7696,6 @@ export declare const multiButtonClasses: {
     button: string;
     selected: string;
     vertical: string;
-    split: string;
-    splitContainer: string;
-    splitDisabled: string;
     firstButton: string;
     lastButton: string;
     primary: string;
@@ -8035,6 +8053,7 @@ export declare const suggestionsClasses: {
     root: string;
     list: string;
     popper: string;
+    portal: string;
 };
 
 export declare const switchClasses: {
@@ -8253,8 +8272,8 @@ export declare const timePickerClasses: {
 export declare const tooltipClasses: {
     root: string;
     tooltip: string;
-    tooltipMulti: string;
     popper: string;
+    tooltipMulti: string;
     title: string;
     valuesContainer: string;
     values: string;
@@ -8936,11 +8955,12 @@ declare const useClasses_16: (classesProp?: Partial<Record<"vertical" | "horizon
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_17: (classesProp?: Partial<Record<"root" | "list" | "popper", string>>, addStatic?: boolean) => {
+declare const useClasses_17: (classesProp?: Partial<Record<"root" | "list" | "popper" | "portal", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         list: string;
         popper: string;
+        portal: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;
@@ -9197,7 +9217,7 @@ declare const useClasses_31: (classesProp?: Partial<Record<"warning" | "root" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_32: (classesProp?: Partial<Record<"root" | "disabled" | "semantic" | "icon" | "checked" | "focusVisible" | "indeterminate", string>>, addStatic?: boolean) => {
+declare const useClasses_32: (classesProp?: Partial<Record<"root" | "disabled" | "semantic" | "icon" | "checked" | "indeterminate" | "focusVisible", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         disabled: string;
@@ -9268,7 +9288,7 @@ declare const useClasses_36: (classesProp?: Partial<Record<"root" | "semantic" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_37: (classesProp?: Partial<Record<"container" | "label" | "root" | "disabled" | "semantic" | "checkbox" | "checked" | "focusVisible" | "indeterminate" | "invalidContainer" | "invalidCheckbox", string>>, addStatic?: boolean) => {
+declare const useClasses_37: (classesProp?: Partial<Record<"container" | "label" | "root" | "disabled" | "semantic" | "checkbox" | "checked" | "indeterminate" | "focusVisible" | "invalidContainer" | "invalidCheckbox", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         container: string;
@@ -9647,7 +9667,7 @@ declare const useClasses_57: (classesProp?: Partial<Record<"root" | "sortDropdow
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_58: (classesProp?: Partial<Record<"label" | "root" | "placeholder" | "disabled" | "readOnly" | "placeholderClosed" | "error" | "dropdown" | "description" | "arrow" | "labelContainer" | "selectionDisabled" | "rootList" | "dropdownListContainer" | "dropdownHeader" | "dropdownHeaderInvalid" | "dropdownHeaderOpen", string>>, addStatic?: boolean) => {
+declare const useClasses_58: (classesProp?: Partial<Record<"label" | "root" | "placeholder" | "disabled" | "readOnly" | "placeholderClosed" | "error" | "description" | "arrow" | "labelContainer" | "dropdown" | "selectionDisabled" | "rootList" | "dropdownListContainer" | "dropdownHeader" | "dropdownHeaderInvalid" | "dropdownHeaderOpen", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         labelContainer: string;
@@ -9698,7 +9718,7 @@ declare const useClasses_6: (classesProp?: Partial<Record<"root" | "counterDisab
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_60: (classesProp?: Partial<Record<"container" | "label" | "root" | "panel" | "icon" | "inputText" | "action" | "error" | "dropdown" | "description" | "labelContainer" | "actionContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "leftContainer" | "rightContainer" | "dateText", string>>, addStatic?: boolean) => {
+declare const useClasses_60: (classesProp?: Partial<Record<"container" | "label" | "root" | "panel" | "icon" | "inputText" | "action" | "error" | "description" | "labelContainer" | "dropdown" | "actionContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "leftContainer" | "rightContainer" | "dateText", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         actionContainer: string;
@@ -10093,7 +10113,7 @@ declare const useClasses_85: (classesProp?: Partial<Record<"link" | "root" | "it
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_86: (classesProp?: Partial<Record<"overlay" | "label" | "small" | "root" | "hidden" | "blur" | "regular" | "barContainer" | "loadingBar" | "smallColor" | "regularColor", string>>, addStatic?: boolean) => {
+declare const useClasses_86: (classesProp?: Partial<Record<"overlay" | "label" | "small" | "root" | "hidden" | "loadingBar" | "blur" | "regular" | "barContainer" | "smallColor" | "regularColor", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         barContainer: string;
@@ -10129,7 +10149,7 @@ declare const useClasses_88: (classesProp?: Partial<Record<"root" | "formContain
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_89: (classesProp?: Partial<Record<"secondary" | "primary" | "vertical" | "root" | "secondarySubtle" | "selected" | "button" | "secondaryGhost" | "splitDisabled" | "multiple" | "primaryGhost" | "primarySubtle" | "splitGroup" | "splitGroupDisabled" | "splitContainer" | "split" | "firstButton" | "lastButton", string>>, addStatic?: boolean) => {
+declare const useClasses_89: (classesProp?: Partial<Record<"secondary" | "primary" | "vertical" | "root" | "secondarySubtle" | "selected" | "button" | "secondaryGhost" | "multiple" | "primaryGhost" | "primarySubtle" | "splitGroup" | "splitGroupDisabled" | "firstButton" | "lastButton", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         multiple: string;
@@ -10138,9 +10158,6 @@ declare const useClasses_89: (classesProp?: Partial<Record<"secondary" | "primar
         button: string;
         selected: string;
         vertical: string;
-        split: string;
-        splitContainer: string;
-        splitDisabled: string;
         firstButton: string;
         lastButton: string;
         primary: string;
@@ -10178,8 +10195,8 @@ declare const useClasses_91: (classesProp?: Partial<Record<"color" | "root" | "t
     readonly classes: {
         root: string;
         tooltip: string;
-        tooltipMulti: string;
         popper: string;
+        tooltipMulti: string;
         title: string;
         valuesContainer: string;
         values: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.76.0",
+  "version": "5.78.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,10 +32,10 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-icons": "^5.12.3",
-    "@hitachivantara/uikit-react-shared": "^5.3.8",
-    "@hitachivantara/uikit-react-utils": "^0.2.8",
-    "@hitachivantara/uikit-styles": "^5.35.0",
+    "@hitachivantara/uikit-react-icons": "^5.12.4",
+    "@hitachivantara/uikit-react-shared": "^5.3.9",
+    "@hitachivantara/uikit-react-utils": "^0.2.9",
+    "@hitachivantara/uikit-styles": "^5.36.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.40",
     "@popperjs/core": "^2.11.8",
@@ -62,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "dc2be087e44b98c1d1dd9e0b3f4a19b4e7dafcb2",
+  "gitHead": "38ee933a412961b131a5e4a157ca195a362ea3dc",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",