@hitachivantara/uikit-react-core 5.63.0 → 5.63.2

package/dist/cjs/AppSwitcher/Action/Action.cjs

@@ -6,10 +6,10 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const Action_styles = require("./Action.styles.cjs");
-const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const Avatar = require("../../Avatar/Avatar.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const HvAppSwitcherAction = ({
   id,

package/dist/cjs/Avatar/Avatar.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const MuiAvatar = require("@mui/material/Avatar");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const AvatarGroupContext = require("../AvatarGroup/AvatarGroupContext.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useImageLoaded = require("../hooks/useImageLoaded.cjs");
 const sizes = require("../utils/sizes.cjs");
@@ -18,7 +19,7 @@ const HvAvatar = React.forwardRef((props, ref) => {
     classes: classesProp,
     children: childrenProp,
     component = "div",
-    size = "sm",
+    size: sizeProp,
     backgroundColor = "secondary",
     color = "atmo1",
     src,
@@ -33,6 +34,8 @@ const HvAvatar = React.forwardRef((props, ref) => {
     ...others
   } = useDefaultProps.useDefaultProps("HvAvatar", props);
   const { classes, cx } = Avatar_styles.useClasses(classesProp);
+  const avatarGroupContext = AvatarGroupContext.useAvatarGroupContext();
+  const size = sizeProp || avatarGroupContext?.size || "sm";
   let children;
   const imageLoaded = useImageLoaded.useImageLoaded(src, srcSet);
   const hasImg = src || srcSet;

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -7,6 +7,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const Avatar = require("../Avatar/Avatar.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const AvatarGroup_styles = require("./AvatarGroup.styles.cjs");
+const AvatarGroupContext = require("./AvatarGroupContext.cjs");
 const getSpacingValue = (spacing, size) => {
   switch (size) {
     case "xs":
@@ -23,83 +24,126 @@ const getSpacingValue = (spacing, size) => {
       return spacing === "compact" ? 30 : 18;
   }
 };
+const getFontSize = (size) => {
+  switch (size) {
+    case "xs":
+      return "1em";
+    case "sm":
+      return "1.25em";
+    case "md":
+      return "1.5em";
+    case "lg":
+      return "1.75em";
+    case "xl":
+      return "3em";
+    default:
+      return "1em";
+  }
+};
+const Overflow = ({
+  direction,
+  childrenToShow,
+  spacingValue,
+  overflowComponent,
+  totalChildren,
+  maxVisible,
+  size
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
+        marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
+        zIndex: 0
+      },
+      children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxRuntime.jsxs(
+        Avatar.HvAvatar,
+        {
+          size,
+          backgroundColor: uikitStyles.theme.colors.atmo4,
+          classes: {
+            avatar: css.css({
+              [`&.HvAvatar-${size}`]: {
+                fontSize: getFontSize(size)
+              }
+            })
+          },
+          children: [
+            "+",
+            totalChildren - maxVisible
+          ]
+        }
+      )
+    }
+  );
+};
 const HvAvatarGroup = React.forwardRef(
   (props, ref) => {
     const {
       className,
+      style,
       classes: classesProp,
       children,
       size = "sm",
       spacing = "loose",
       direction = "row",
-      toBack = true,
       maxVisible = 3,
       overflowComponent,
       highlight = false,
+      toBack = false,
       ...others
     } = useDefaultProps.useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = AvatarGroup_styles.useClasses(classesProp);
     const spacingValue = getSpacingValue(spacing, size);
     const totalChildren = React.Children.count(children);
-    const zIndexMultiplier = toBack ? -1 : 1;
     const willOverflow = totalChildren > maxVisible;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const childrenToShow = React.Children.toArray(children).slice(0, maxVisible);
+    if (toBack)
+      childrenToShow.reverse();
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cx(classes.root, classes[direction], className),
+        className: cx(
+          classes.root,
+          classes[direction],
+          { [classes.highlight]: highlight },
+          { [classes.toBack]: toBack },
+          className
+        ),
+        style: {
+          ["--spacing"]: `-${spacingValue}px`,
+          ...style
+        },
         ref,
         ...others,
-        children: [
-          React.Children.map(children, (child, index) => {
-            if (index < maxVisible) {
-              return React.cloneElement(child, {
-                classes: {
-                  container: css.css({
-                    marginLeft: direction === "row" ? index !== 0 ? -spacingValue : 0 : 0,
-                    marginTop: direction === "column" ? index !== 0 ? -spacingValue : 0 : 0
-                  }),
-                  root: css.css({
-                    zIndex: 100 + index * zIndexMultiplier,
-                    ...highlight && {
-                      "&:hover": {
-                        zIndex: 100 + totalChildren + 1
-                      }
-                    }
-                  })
-                },
-                size
-              });
+        children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarGroupContext.HvAvatarGroupProvider, { size, children: [
+          toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
+            Overflow,
+            {
+              childrenToShow,
+              direction,
+              maxVisible,
+              overflowComponent,
+              size,
+              spacingValue,
+              totalChildren
             }
-          }),
-          willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          ),
+          childrenToShow,
+          !toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
+            Overflow,
             {
-              style: {
-                marginLeft: direction === "row" ? -spacingValue : 0,
-                marginTop: direction === "column" ? -spacingValue : 0,
-                zIndex: 100 + maxVisible * zIndexMultiplier
-              },
-              children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxRuntime.jsxs(
-                Avatar.HvAvatar,
-                {
-                  size,
-                  backgroundColor: uikitStyles.theme.colors.atmo4,
-                  classes: {
-                    avatar: css.css({
-                      [`&.HvAvatar-${size}`]: {
-                        fontSize: "unset"
-                      }
-                    })
-                  },
-                  children: [
-                    "+",
-                    totalChildren - maxVisible
-                  ]
-                }
-              )
+              childrenToShow,
+              direction,
+              maxVisible,
+              overflowComponent,
+              size,
+              spacingValue,
+              totalChildren
             }
           )
-        ]
+        ] })
       }
     );
   }

package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs

@@ -10,14 +10,64 @@ const { staticClasses, useClasses } = classes.createClasses("HvAvatarGroup", {
     [`& .${Avatar_styles.staticClasses.root}`]: {
       border: `2px solid ${uikitStyles.theme.colors.atmo2}`,
       boxSizing: "content-box"
+    },
+    "&$row": {
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      [`& .${Avatar_styles.staticClasses.container}`]: {
+        "&:not(:first-of-type)": {
+          marginLeft: "var(--spacing)"
+        }
+      },
+      "&$toBack": {
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        [`& .${Avatar_styles.staticClasses.container}`]: {
+          "&:last-of-type": {
+            marginLeft: 0
+          },
+          "&:not(:last-of-type)": {
+            marginLeft: "var(--spacing)"
+          }
+        }
+      }
+    },
+    "&$column": {
+      flexDirection: "column",
+      [`& .${Avatar_styles.staticClasses.container}`]: {
+        "&:not(:first-of-type)": {
+          marginTop: "var(--spacing)"
+        }
+      },
+      "&$toBack": {
+        flexDirection: "column-reverse",
+        [`& .${Avatar_styles.staticClasses.container}`]: {
+          "&:last-of-type": {
+            marginTop: 0
+          },
+          "&:not(:last-of-type)": {
+            marginTop: "var(--spacing)"
+          }
+        }
+      }
+    },
+    [`&$highlight`]: {
+      [`& .${Avatar_styles.staticClasses.status}:hover`]: {
+        zIndex: uikitStyles.theme.zIndices.popover
+      }
     }
   },
   row: {
-    flexDirection: "row"
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    "&$toBack": {
+      flexDirection: "row-reverse",
+      justifyContent: "flex-end"
+    }
   },
-  column: {
-    flexDirection: "column"
-  }
+  column: {},
+  highlight: {},
+  toBack: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/AvatarGroup/AvatarGroupContext.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const HvAvatarGroupContext = React.createContext(null);
+const HvAvatarGroupProvider = ({
+  size,
+  children
+}) => {
+  const value = React.useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(HvAvatarGroupContext.Provider, { value, children });
+};
+const useAvatarGroupContext = () => {
+  const context = React.useContext(HvAvatarGroupContext);
+  return context;
+};
+exports.HvAvatarGroupContext = HvAvatarGroupContext;
+exports.HvAvatarGroupProvider = HvAvatarGroupProvider;
+exports.useAvatarGroupContext = useAvatarGroupContext;

package/dist/cjs/CheckBoxGroup/CheckBoxGroup.styles.cjs

@@ -5,8 +5,8 @@ const classes = require("../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvCheckBoxGroup", {
   root: {
     display: "inline-block",
-    padding: 0,
-    margin: 0,
+    padding: 4,
+    margin: -4,
     overflow: "hidden",
     verticalAlign: "top"
   },

package/dist/cjs/Dialog/Dialog.cjs

@@ -71,7 +71,6 @@ const HvDialog = (props) => {
           )
         }
       },
-      "aria-modal": true,
       ...others,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Drawer/Drawer.cjs

@@ -47,11 +47,6 @@ const HvDrawer = (props) => {
           backdrop: {
             classes: {
               root: classes.background
-            },
-            onClick: (event) => {
-              if (disableBackdropClick)
-                return;
-              onClose?.(event, "backdropClick");
             }
           }
         }

package/dist/cjs/FilterGroup/Counter/Counter.cjs

@@ -17,7 +17,7 @@ const getExistingFiltersById = (idx, filterValues, filterOptions) => {
 const HvFilterGroupCounter = (props) => {
   const {
     className,
-    id,
+    groupId,
     classes: classesProp
   } = useDefaultProps.useDefaultProps("HvFilterGroupCounter", props);
   const { classes, cx } = Counter_styles.useClasses(classesProp);
@@ -26,15 +26,13 @@ const HvFilterGroupCounter = (props) => {
     filterValues = [],
     appliedFilters = []
   } = React.useContext(FilterGroupContext.HvFilterGroupContext);
-  const options = id && filterOptions.find((option) => option.id === id) ? [
-    filterOptions.find((option) => option.id === id)
-  ] : filterOptions;
-  const optionIdx = filterOptions.findIndex((option) => option.id === id);
+  const options = groupId && filterOptions.find((option) => option.id === groupId) ? [filterOptions.find((option) => option.id === groupId)] : filterOptions;
+  const optionIdx = filterOptions.findIndex((option) => option.id === groupId);
   let groupsCounter = 0;
   appliedFilters.forEach((fg, i) => {
     groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
   });
-  const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;
+  const partialCounter = groupId ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;
   const totalCounter = options.reduce(
     (acc, option) => acc + option.data.length,
     0

package/dist/cjs/FilterGroup/LeftPanel/LeftPanel.cjs

@@ -3,36 +3,32 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const setId = require("../../utils/setId.cjs");
-const wrapperTooltip = require("../../utils/wrapperTooltip.cjs");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
 const LeftPanel_styles = require("./LeftPanel.styles.cjs");
 const Counter = require("../Counter/Counter.cjs");
 const Panel = require("../../Panel/Panel.cjs");
 const ListContainer = require("../../ListContainer/ListContainer.cjs");
 const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const HvFilterGroupLeftPanel = ({
   id,
   className,
   emptyElement,
   classes: classesProp
 }) => {
-  const { classes, cx } = LeftPanel_styles.useClasses(classesProp);
+  const { classes } = LeftPanel_styles.useClasses(classesProp);
   const { filterOptions, activeGroup, setActiveGroup } = React.useContext(FilterGroupContext.HvFilterGroupContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { id: setId.setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { id: setId.setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => {
-    const ItemText = wrapperTooltip.wrapperTooltip(true, group.name, group.name);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ListItem.HvListItem,
-      {
-        id: group.id,
-        className: cx(classes.listItem),
-        onClick: () => setActiveGroup(index),
-        selected: filterOptions[activeGroup].id === group.id,
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, { id: group.id }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {})
-      },
-      group.name
-    );
-  }) }) : emptyElement });
+  return /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { id: setId.setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { id: setId.setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    ListItem.HvListItem,
+    {
+      className: classes.listItem,
+      onClick: () => setActiveGroup(index),
+      selected: filterOptions[activeGroup].id === group.id,
+      endAdornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, { groupId: group.id }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: group.name })
+    },
+    group.id || group.name
+  )) }) : emptyElement });
 };
 exports.filterGroupLeftPanelClasses = LeftPanel_styles.staticClasses;
 exports.HvFilterGroupLeftPanel = HvFilterGroupLeftPanel;

package/dist/cjs/FilterGroup/RightPanel/RightPanel.styles.cjs

@@ -8,11 +8,8 @@ const { staticClasses, useClasses } = classes.createClasses(name, {
     marginBottom: uikitStyles.theme.spacing("xs")
   },
   list: {
-    width: "calc(100% + 8px)",
     height: "calc(100% - 70px)",
-    overflowY: "auto",
-    margin: -4,
-    padding: 4
+    overflowY: "auto"
   },
   selectAllContainer: {
     // Prevent the focus ring to be hidden by sibling hover background

package/dist/cjs/Input/Input.cjs

@@ -11,7 +11,6 @@ const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useIsMounted = require("../hooks/useIsMounted.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
-const browser = require("../utils/browser.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const Input_styles = require("./Input.styles.cjs");
@@ -35,9 +34,8 @@ const DEFAULT_LABELS = {
   /** The label of the search button. */
   searchButtonLabel: "Search"
 };
-const getFocusedElement = (event) => browser.isBrowser("ie") ? document.activeElement : event.relatedTarget;
 function eventTargetIsInsideContainer(container, event) {
-  return container != null && container.contains(getFocusedElement(event));
+  return !!container?.contains(event.relatedTarget);
 }
 const changeInputValue = (input, value = "") => {
   const event = new Event("input", { bubbles: true });

package/dist/cjs/List/List.cjs

@@ -6,13 +6,13 @@ const reactWindow = require("react-window");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const setId = require("../utils/setId.cjs");
-const wrapperTooltip = require("../utils/wrapperTooltip.cjs");
 const List_styles = require("./List.styles.cjs");
 const useSelectableList = require("./useSelectableList.cjs");
 const utils = require("./utils.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
-const Radio = require("../Radio/Radio.cjs");
+const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
 const Link = require("../Link/Link.cjs");
+const Radio = require("../Radio/Radio.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
@@ -26,6 +26,7 @@ const HvList = (props) => {
     classes: classesProp,
     className,
     multiSelect = false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     hasTooltips = false,
     showSelectAll = false,
     labels = DEFAULT_LABELS,
@@ -116,65 +117,32 @@ const HvList = (props) => {
     );
   };
   const renderItemText = (item) => {
-    const ItemText = wrapperTooltip.wrapperTooltip(hasTooltips, item.label, item.label);
-    return !multiSelect && item.path ? /* @__PURE__ */ jsxRuntime.jsx(Link.HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {}) }, item.label) : /* @__PURE__ */ jsxRuntime.jsx(ItemText, {});
-  };
-  const renderMultiSelectItem = (item, itemId) => {
-    if (useSelector) {
-      const Selection = wrapperTooltip.wrapperTooltip(
-        hasTooltips,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CheckBox.HvCheckBox,
-          {
-            id: setId.setId(itemId, "selector"),
-            label: item.label,
-            checked: item.selected,
-            disabled: item.disabled,
-            onChange: (evt) => handleSelect(evt, item),
-            classes: {
-              root: classes.selectorRoot,
-              container: classes.selectorContainer,
-              label: classes.truncate
-            }
-          }
-        ),
-        item.label
-      );
-      return /* @__PURE__ */ jsxRuntime.jsx(Selection, {});
-    }
-    return renderItemText(item);
+    return !multiSelect && item.path ? /* @__PURE__ */ jsxRuntime.jsx(Link.HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label }) }) : /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label });
   };
-  const renderSingleSelectItem = (item, itemId) => {
-    if (useSelector) {
-      const Selection = wrapperTooltip.wrapperTooltip(
-        hasTooltips,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Radio.HvRadio,
-          {
-            id: setId.setId(itemId, "selector"),
-            label: item.label,
-            checked: item.selected,
-            disabled: item.disabled,
-            classes: {
-              root: classes.selectorRoot,
-              container: classes.selectorContainer,
-              label: classes.truncate
-            }
-          }
-        ),
-        item.label
-      );
-      return /* @__PURE__ */ jsxRuntime.jsx(Selection, {});
-    }
-    return renderItemText(item);
+  const renderSelectItem = (item, itemId) => {
+    if (!useSelector)
+      return renderItemText(item);
+    const Component = multiSelect ? CheckBox.HvCheckBox : Radio.HvRadio;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        id: setId.setId(itemId, "selector"),
+        label: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label }),
+        checked: item.selected || false,
+        disabled: item.disabled,
+        onChange: multiSelect ? (evt) => handleSelect(evt, item) : void 0,
+        classes: {
+          root: classes.selectorRoot,
+          container: classes.selectorContainer,
+          label: classes.truncate
+        }
+      }
+    );
   };
   const renderListItem = (item, i, otherProps = {}) => {
     const itemId = setId.setId(id, "item", i);
     const selected = item.selected || false;
-    let startAdornment = null;
-    if (!useSelector && item.icon) {
-      startAdornment = renderLeftIcon(item);
-    }
+    const startAdornment = !useSelector && item.icon ? renderLeftIcon(item) : null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ListItem.HvListItem,
       {
@@ -192,7 +160,7 @@ const HvList = (props) => {
         startAdornment,
         endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { className: classes.box, iconSize: "XS" }),
         ...otherProps,
-        children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId)
+        children: renderSelectItem(item, itemId)
       },
       i
     );

package/dist/cjs/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs

@@ -4,46 +4,51 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const setId = require("../../../utils/setId.cjs");
 const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
+const OverflowTooltip = require("../../../OverflowTooltip/OverflowTooltip.cjs");
 const HvHorizontalScrollListItem = (props) => {
   const {
     id,
     className,
     classes: classesProp,
     selected,
-    children,
-    onClick,
-    onKeyDown,
-    tooltipWrapper,
+    label,
+    tooltipPlacement,
     href,
+    iconClasses,
     ...others
   } = useDefaultProps.useDefaultProps("HvHorizontalScrollListItem", props);
   const { classes, cx } = HorizontalScrollListItem_styles.useClasses(classesProp);
-  const variant = selected ? "label" : "body";
-  const labelId = setId.setId(id, "label");
   const buttonId = setId.setId(id, "button");
-  const Tooltip = tooltipWrapper;
   const Component = href != null ? "a" : "div";
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsxRuntime.jsxs(
     Component,
     {
       id: buttonId,
       role: href == null ? "button" : void 0,
       tabIndex: 0,
-      onClick,
-      onKeyDown,
       className: classes.button,
-      "aria-labelledby": labelId,
       href,
       ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Tooltip,
-        {
-          id: labelId,
-          className: cx(classes.text, { [classes.selected]: selected }),
-          variant,
-          children
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OverflowTooltip.HvOverflowTooltip,
+          {
+            className: cx(classes.text, { [classes.selected]: selected }),
+            placement: tooltipPlacement,
+            data: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cx(classes.bullet, iconClasses, {
+              [classes.bulletSelected]: selected
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", {})
+          }
+        )
+      ]
     }
   ) });
 };