@hitachivantara/uikit-react-core 5.62.2 → 5.63.1

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/AvatarGroup/AvatarGroup.cjs

@@ -35,6 +35,7 @@ const HvAvatarGroup = React.forwardRef(
       toBack = true,
       maxVisible = 3,
       overflowComponent,
+      highlight = false,
       ...others
     } = useDefaultProps.useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = AvatarGroup_styles.useClasses(classesProp);
@@ -52,13 +53,18 @@ const HvAvatarGroup = React.forwardRef(
           React.Children.map(children, (child, index) => {
             if (index < maxVisible) {
               return React.cloneElement(child, {
-                style: {
-                  zIndex: 100 + index * zIndexMultiplier
-                },
                 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

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -28,7 +28,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
       pointerEvents: "initial",
       "& svg": {
         color: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60
+        borderColor: uikitStyles.theme.colors.secondary_60,
+        backgroundColor: uikitStyles.theme.colors.atmo3
       }
     }
   },
@@ -46,8 +47,6 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.atmo3,
         color: uikitStyles.theme.colors.secondary_60
       }
     }
@@ -58,8 +57,6 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60,
         color: uikitStyles.theme.colors.secondary_60
       }
     }

package/dist/cjs/BaseRadio/BaseRadio.styles.cjs

@@ -18,7 +18,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseRadio", {
       width: 16,
       height: 16,
       borderRadius: uikitStyles.theme.radii.circle,
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      backgroundColor: uikitStyles.theme.colors.atmo1
     },
     borderRadius: 0
   },

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/LoadingContainer/LoadingContainer.styles.cjs

@@ -5,11 +5,11 @@ const classes = require("../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvLoadingContainer", {
   root: {
     position: "relative",
-    height: "inherit",
-    userSelect: "none"
+    height: "inherit"
   },
   loading: {
     position: "absolute",
+    userSelect: "none",
     inset: 0,
     zIndex: uikitStyles.theme.zIndices.overlay,
     transition: "background-color .2s ease",

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", {})
+          }
+        )
+      ]
     }
   ) });
 };

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

@@ -6,49 +6,44 @@ const focusUtils = require("../../../utils/focusUtils.cjs");
 const name = "HvHorizontalScrollListItem";
 const { staticClasses, useClasses } = classes.createClasses(name, {
   root: {
-    padding: "10px 0"
+    padding: uikitStyles.theme.spacing("xs", 0),
+    maxWidth: 120
   },
   button: {
     display: "flex",
+    flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    height: "48px",
-    cursor: "pointer",
-    borderBottom: "none",
-    "&:hover": {
-      backgroundColor: "transparent",
-      "& $notSelected": {
-        height: "6px",
-        width: "6px",
-        backgroundColor: uikitStyles.theme.colors.secondary
-      },
-      "& $notSelectedRoot": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      }
-    },
-    "&:focus": {
-      outline: "none"
-    },
     "&:focus-visible": {
       ...focusUtils.outlineStyles
     }
   },
   text: {
+    margin: uikitStyles.theme.spacing("xs", "xs", "0")
+  },
+  selected: {
+    fontWeight: uikitStyles.theme.typography.label.fontWeight
+  },
+  bullet: {
     display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
     justifyContent: "center",
-    height: "48px",
-    borderBottom: "none",
-    "& p": {
-      padding: "3px 10px",
-      maxWidth: "120px",
-      textOverflow: "ellipsis",
-      overflow: "hidden"
+    alignItems: "center",
+    minHeight: 24,
+    height: 24,
+    width: 24,
+    fontSize: 4,
+    color: uikitStyles.theme.colors.secondary_60,
+    "& > span": {
+      margin: "auto",
+      width: "1em",
+      height: "1em",
+      backgroundColor: "currentcolor",
+      borderRadius: "50%"
     }
   },
-  selected: {
-    borderBottom: "none"
+  bulletSelected: {
+    fontSize: 6,
+    color: uikitStyles.theme.colors.secondary
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.cjs

@@ -1,18 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const useTheme = require("../../hooks/useTheme.cjs");
-const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const useScrollTo = require("../useScrollTo.cjs");
-const withTooltip = require("../withTooltip.cjs");
 const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
 const HorizontalScrollListItem = require("./HorizontalScrollListItem/HorizontalScrollListItem.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -40,8 +35,6 @@ const HvScrollToHorizontal = (props) => {
   const muiTheme = styles.useTheme();
   const downSm = useMediaQuery__default.default(muiTheme.breakpoints.down("sm"));
   const upMd = useMediaQuery__default.default(muiTheme.breakpoints.up("md"));
-  const { activeTheme } = useTheme.useTheme();
-  const elementId = useUniqueId.useUniqueId(id);
   const [selectedIndex, setScrollTo, elements] = useScrollTo.useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
@@ -51,65 +44,34 @@ const HvScrollToHorizontal = (props) => {
     options,
     onChange
   );
-  const handleSelection = (event, value, index) => {
-    event.preventDefault();
-    const wrappedOnChange = () => {
-      onChange?.(event, index);
-    };
-    setScrollTo(event, value, index, wrappedOnChange);
-  };
-  const tooltipWrappers = React.useMemo(() => {
-    return options.map((option) => {
-      return withTooltip.withTooltip(option.label, "div", tooltipPosition);
-    });
-  }, [options, tooltipPosition]);
-  const NotSelected = React.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelectedRoot, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelected }) });
-  }, [classes.notSelectedRoot, classes.notSelected]);
-  const Selected = React.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactIcons.CurrentStep,
-      {
-        height: activeTheme?.scrollTo.dotSelectedSize,
-        width: activeTheme?.scrollTo.dotSelectedSize,
-        className: classes.selected
-      }
-    );
-  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);
-  const tabs = elements.map((option, index) => {
-    const selected = selectedIndex === index;
-    const tooltipWrapper = tooltipWrappers[index];
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      HorizontalScrollListItem.HvHorizontalScrollListItem,
-      {
-        id: setId.setId(elementId, `item-${index}`),
-        onClick: (event) => {
-          if (navigationMode !== "none") {
-            event.preventDefault();
-          }
-          handleSelection(event, option.value, index);
-          onClick?.(event, index);
-        },
-        onKeyDown: (event) => {
-          if (keyboardUtils.isKey(event, "Enter") === true) {
-            if (navigationMode !== "none") {
-              event.preventDefault();
-            }
-            handleSelection(event, option.value, index);
-            onEnter?.(event, index);
-          }
-        },
-        href: navigationMode !== "none" ? option.href : void 0,
-        tooltipWrapper,
-        selected,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: option.label }),
-          selected ? /* @__PURE__ */ jsxRuntime.jsx(Selected, {}) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {})
-        ]
+  const tabs = elements.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    HorizontalScrollListItem.HvHorizontalScrollListItem,
+    {
+      id: setId.setId(id, `item-${index}`),
+      onClick: (event) => {
+        event.preventDefault();
+        setScrollTo(event, option.value, index, () => onChange?.(event, index));
+        onClick?.(event, index);
+      },
+      onKeyDown: (event) => {
+        if (keyboardUtils.isKey(event, "Enter") !== true)
+          return;
+        event.preventDefault();
+        setScrollTo(event, option.value, index, () => onChange?.(event, index));
+        onEnter?.(event, index);
       },
-      option.key || option.label
-    );
-  });
+      href: navigationMode !== "none" ? option.href : void 0,
+      tooltipPlacement: tooltipPosition,
+      selected: selectedIndex === index,
+      label: option.label,
+      iconClasses: cx({
+        [classes.selected]: selectedIndex === index,
+        [classes.notSelected]: selectedIndex !== index,
+        [classes.notSelectedRoot]: selectedIndex !== index
+      })
+    },
+    option.key || option.label
+  ));
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ol",
     {
@@ -128,7 +90,7 @@ const HvScrollToHorizontal = (props) => {
         },
         className
       ),
-      id: elementId,
+      id,
       ...others,
       children: tabs
     }