@hitachivantara/uikit-react-core 5.63.0 → 5.63.1

package/dist/esm/List/List.js

@@ -4,14 +4,14 @@ import { FixedSizeList } from "react-window";
 import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { setId } from "../utils/setId.js";
-import { wrapperTooltip } from "../utils/wrapperTooltip.js";
 import { useClasses } from "./List.styles.js";
 import { staticClasses } from "./List.styles.js";
 import { useSelectableList } from "./useSelectableList.js";
 import { parseList } from "./utils.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
-import { HvRadio } from "../Radio/Radio.js";
+import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
 import { HvLink } from "../Link/Link.js";
+import { HvRadio } from "../Radio/Radio.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvTypography } from "../Typography/Typography.js";
 import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
@@ -25,6 +25,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,
@@ -115,65 +116,32 @@ const HvList = (props) => {
     );
   };
   const renderItemText = (item) => {
-    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);
-    return !multiSelect && item.path ? /* @__PURE__ */ jsx(HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsx(ItemText, {}) }, item.label) : /* @__PURE__ */ jsx(ItemText, {});
-  };
-  const renderMultiSelectItem = (item, itemId) => {
-    if (useSelector) {
-      const Selection = wrapperTooltip(
-        hasTooltips,
-        /* @__PURE__ */ jsx(
-          HvCheckBox,
-          {
-            id: 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__ */ jsx(Selection, {});
-    }
-    return renderItemText(item);
+    return !multiSelect && item.path ? /* @__PURE__ */ jsx(HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label }) }) : /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label });
   };
-  const renderSingleSelectItem = (item, itemId) => {
-    if (useSelector) {
-      const Selection = wrapperTooltip(
-        hasTooltips,
-        /* @__PURE__ */ jsx(
-          HvRadio,
-          {
-            id: 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__ */ jsx(Selection, {});
-    }
-    return renderItemText(item);
+  const renderSelectItem = (item, itemId) => {
+    if (!useSelector)
+      return renderItemText(item);
+    const Component = multiSelect ? HvCheckBox : HvRadio;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        id: setId(itemId, "selector"),
+        label: /* @__PURE__ */ jsx(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(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__ */ jsx(
       HvListItem,
       {
@@ -191,7 +159,7 @@ const HvList = (props) => {
         startAdornment,
         endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(DropRightXS, { className: classes.box, iconSize: "XS" }),
         ...otherProps,
-        children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId)
+        children: renderSelectItem(item, itemId)
       },
       i
     );

package/dist/esm/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import {\n  AriaRole,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { FixedSizeList } from \"react-window\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvLink } from \"../Link\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../ListContainer\";\nimport { HvRadio } from \"../Radio\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { wrapperTooltip } from \"../utils/wrapperTooltip\";\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { HvListLabels, HvListValue } from \"./types\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\n\nexport { staticClasses as listClasses };\n\nexport type HvListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\" | \"onClick\"> {\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - id: The id of the item.\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - isHidden: Is item visible.\n   * - icon: The icon.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   * - path: The path to navigate to.\n   */\n  values: HvListValue[];\n  /** If true renders a multi select list. */\n  multiSelect?: boolean;\n  /**\n   * If true renders select all option for multi selection lists with selectors.\n   * note: It will only be rendered if multiSelect and useSelector props are set to true.\n   */\n  showSelectAll?: boolean;\n  /** An object containing all the labels for the dropdown. */\n  labels?: HvListLabels;\n  /** If true renders list items with radio or checkbox selectors. */\n  useSelector?: boolean;\n  /** Call back fired when list item is selected. Returns selection state. */\n  onChange?: (value: HvListValue[]) => void;\n  /** Call back fired when list item is selected. Returns selected item. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** If `true` the list items will show the selection state. */\n  selectable?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** If `true` the list will be rendered without vertical spacing. */\n  condensed?: boolean;\n  /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n  hasTooltips?: boolean;\n  /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n  height?: number;\n  /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n  virtualized?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListClasses;\n}\n\nconst DEFAULT_LABELS = {\n  selectAll: \"Select All\",\n  selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = (props: HvListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    multiSelect = false,\n    hasTooltips = false,\n    showSelectAll = false,\n    labels = DEFAULT_LABELS,\n    useSelector = false,\n    selectable = true,\n    singleSelectionToggle = true,\n    condensed = false,\n    onChange,\n    onClick,\n    values: valuesProp = [],\n    height,\n    virtualized = false,\n    ...others\n  } = useDefaultProps(\"HvList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [list, setList, selection] = useSelectableList(valuesProp);\n  const listRef = useRef<any>(null);\n\n  useEffect(() => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList: HvListValue[] = parseList(\n      undefined,\n      passedProps,\n      undefined,\n      valuesProp,\n    );\n\n    setList(parsedList);\n  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n  const [role, itemRole] = useMemo<[AriaRole, AriaRole]>(() => {\n    // selectors are responsible for the role & selection state\n    if (selectable && useSelector) return [\"list\", \"listitem\"];\n\n    if (selectable) return [\"listbox\", \"option\"];\n    return [\"menu\", \"menuitem\"];\n  }, [selectable, useSelector]);\n\n  const handleSelect = (evt, item) => {\n    if (!item.path) evt.preventDefault();\n    if (item.disabled) return;\n\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList = parseList(item, passedProps, undefined, list);\n    setList(parsedList);\n\n    onClick?.(evt, item);\n    onChange?.(parsedList);\n  };\n\n  const handleSelectAll = () => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const anySelectableSelected = list.some(\n      (elem) => elem.selected || elem.disabled,\n    );\n    const parsedList = parseList(\n      undefined,\n      passedProps,\n      !anySelectableSelected,\n      list,\n    );\n    setList(parsedList);\n\n    onChange?.(parsedList);\n  };\n\n  const renderLeftIcon = (item) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : item.icon?.({\n          isSelected: item.selected,\n          isDisabled: item.disabled,\n        });\n  };\n\n  const renderSelectAll = () => {\n    const { selectAll, selectionConjunction } = labels;\n\n    const anySelected = !!selection?.length;\n    const allSelected = selection.length === list.length;\n\n    const selectionLabel = (\n      <HvTypography component=\"span\">\n        {!anySelected ? (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        ) : (\n          <>\n            <b>{selection.length}</b>\n            {`\\xa0${selectionConjunction}\\xa0`}\n            {list.length}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <HvCheckBox\n        id={setId(id, \"select-all\")}\n        label={selectionLabel}\n        onChange={handleSelectAll}\n        className={classes.selectAllSelector}\n        indeterminate={anySelected && !allSelected}\n        checked={allSelected}\n      />\n    );\n  };\n\n  const renderItemText = (item) => {\n    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n    return !multiSelect && item.path ? (\n      <HvLink key={item.label} route={item.path} classes={{ a: classes.link }}>\n        <ItemText />\n      </HvLink>\n    ) : (\n      <ItemText />\n    );\n  };\n\n  const renderMultiSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvCheckBox\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          onChange={(evt) => handleSelect(evt, item)}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label,\n      );\n      return <Selection />;\n    }\n\n    return renderItemText(item);\n  };\n\n  const renderSingleSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvRadio\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label,\n      );\n      return <Selection />;\n    }\n    return renderItemText(item);\n  };\n\n  const renderListItem = (item, i, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    let startAdornment = null;\n    if (!useSelector && item.icon) {\n      startAdornment = renderLeftIcon(item);\n    }\n\n    return (\n      <HvListItem\n        key={i}\n        id={itemId}\n        role={itemRole}\n        disabled={item.disabled || undefined}\n        className={classes.item}\n        classes={{\n          selected: cx({\n            [classes.itemSelector]: useSelector || multiSelect,\n          }),\n        }}\n        selected={multiSelect || selected ? selected : undefined}\n        onClick={(evt) => handleSelect(evt, item)}\n        startAdornment={startAdornment}\n        endAdornment={\n          item.showNavIcon && (\n            <DropRightXS className={classes.box} iconSize=\"XS\" />\n          )\n        }\n        {...otherProps}\n      >\n        {multiSelect\n          ? renderMultiSelectItem(item, itemId)\n          : renderSingleSelectItem(item, itemId)}\n      </HvListItem>\n    );\n  };\n\n  const filteredList = list.filter((it) => !it.isHidden);\n  const anySelected = list\n    .map((item) => item.selected && !item.disabled)\n    .reduce((result, selected) => result || selected, false);\n\n  const selectedItemIndex = list.findIndex((item) => item.selected);\n  useEffect(() => {\n    if (selectedItemIndex >= 0 && listRef.current !== null) {\n      listRef.current.scrollToItem(selectedItemIndex);\n    }\n  }, [listRef, selectedItemIndex]);\n\n  const renderVirtualizedListItem = ({ index, style }) => {\n    const item = filteredList[index];\n    const tabIndex =\n      item.tabIndex ||\n      (!anySelected && index === 0) ||\n      (item.selected && !item.disabled)\n        ? 0\n        : -1;\n\n    return renderListItem(item, index, {\n      style: {\n        ...style,\n        top: `${parseFloat(style.top) + 5}px`,\n        left: `${parseFloat(style.left) + 5}px`,\n        width: `calc(${parseFloat(style.width)}% - 10px)`,\n      },\n      tabIndex,\n      interactive: true,\n      condensed,\n      disableGutters: useSelector,\n    });\n  };\n\n  const ariaMultiSelectable = (role === \"listbox\" && multiSelect) || undefined;\n\n  const ListContainer = useMemo(() => {\n    return forwardRef<HTMLUListElement, HvListContainerProps>(\n      ({ ...rest }, ref) => (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          ref={ref}\n          {...rest}\n        />\n      ),\n    );\n  }, [\n    cx,\n    id,\n    useSelector,\n    className,\n    classes.root,\n    role,\n    condensed,\n    ariaMultiSelectable,\n  ]);\n\n  // Render nothing if there are no items\n  if (filteredList.length === 0) return null;\n\n  return (\n    <>\n      {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n      {!virtualized ? (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          {...others}\n        >\n          {filteredList.map((item, i) => renderListItem(item, i))}\n        </HvListContainer>\n      ) : (\n        <FixedSizeList\n          ref={listRef}\n          className={classes.virtualizedRoot}\n          height={(height || 0) + 5}\n          width=\"100%\"\n          itemCount={filteredList.length}\n          itemSize={condensed ? 32 : 40}\n          innerElementType={ListContainer}\n          {...others}\n        >\n          {renderVirtualizedListItem}\n        </FixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["anySelected"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import {\n  AriaRole,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { FixedSizeList } from \"react-window\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvLink } from \"../Link\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvRadio } from \"../Radio\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { HvListLabels, HvListValue } from \"./types\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\n\nexport { staticClasses as listClasses };\n\nexport type HvListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\" | \"onClick\"> {\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - id: The id of the item.\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - isHidden: Is item visible.\n   * - icon: The icon.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   * - path: The path to navigate to.\n   */\n  values: HvListValue[];\n  /** If true renders a multi select list. */\n  multiSelect?: boolean;\n  /**\n   * If true renders select all option for multi selection lists with selectors.\n   * note: It will only be rendered if multiSelect and useSelector props are set to true.\n   */\n  showSelectAll?: boolean;\n  /** An object containing all the labels for the dropdown. */\n  labels?: HvListLabels;\n  /** If true renders list items with radio or checkbox selectors. */\n  useSelector?: boolean;\n  /** Call back fired when list item is selected. Returns selection state. */\n  onChange?: (value: HvListValue[]) => void;\n  /** Call back fired when list item is selected. Returns selected item. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** If `true` the list items will show the selection state. */\n  selectable?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** If `true` the list will be rendered without vertical spacing. */\n  condensed?: boolean;\n  /** If `true` the dropdown will show tooltips when user mouseenter text in list. @deprecated this is always enabled */\n  hasTooltips?: boolean;\n  /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n  height?: number;\n  /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n  virtualized?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListClasses;\n}\n\nconst DEFAULT_LABELS = {\n  selectAll: \"Select All\",\n  selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = (props: HvListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    multiSelect = false,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    hasTooltips = false,\n    showSelectAll = false,\n    labels = DEFAULT_LABELS,\n    useSelector = false,\n    selectable = true,\n    singleSelectionToggle = true,\n    condensed = false,\n    onChange,\n    onClick,\n    values: valuesProp = [],\n    height,\n    virtualized = false,\n    ...others\n  } = useDefaultProps(\"HvList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [list, setList, selection] = useSelectableList(valuesProp);\n  const listRef = useRef<any>(null);\n\n  useEffect(() => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList: HvListValue[] = parseList(\n      undefined,\n      passedProps,\n      undefined,\n      valuesProp,\n    );\n\n    setList(parsedList);\n  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n  const [role, itemRole] = useMemo<[AriaRole, AriaRole]>(() => {\n    // selectors are responsible for the role & selection state\n    if (selectable && useSelector) return [\"list\", \"listitem\"];\n\n    if (selectable) return [\"listbox\", \"option\"];\n    return [\"menu\", \"menuitem\"];\n  }, [selectable, useSelector]);\n\n  const handleSelect = (evt, item) => {\n    if (!item.path) evt.preventDefault();\n    if (item.disabled) return;\n\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList = parseList(item, passedProps, undefined, list);\n    setList(parsedList);\n\n    onClick?.(evt, item);\n    onChange?.(parsedList);\n  };\n\n  const handleSelectAll = () => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const anySelectableSelected = list.some(\n      (elem) => elem.selected || elem.disabled,\n    );\n    const parsedList = parseList(\n      undefined,\n      passedProps,\n      !anySelectableSelected,\n      list,\n    );\n    setList(parsedList);\n\n    onChange?.(parsedList);\n  };\n\n  const renderLeftIcon = (item) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : item.icon?.({\n          isSelected: item.selected,\n          isDisabled: item.disabled,\n        });\n  };\n\n  const renderSelectAll = () => {\n    const { selectAll, selectionConjunction } = labels;\n\n    const anySelected = !!selection?.length;\n    const allSelected = selection.length === list.length;\n\n    const selectionLabel = (\n      <HvTypography component=\"span\">\n        {!anySelected ? (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        ) : (\n          <>\n            <b>{selection.length}</b>\n            {`\\xa0${selectionConjunction}\\xa0`}\n            {list.length}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <HvCheckBox\n        id={setId(id, \"select-all\")}\n        label={selectionLabel}\n        onChange={handleSelectAll}\n        className={classes.selectAllSelector}\n        indeterminate={anySelected && !allSelected}\n        checked={allSelected}\n      />\n    );\n  };\n\n  const renderItemText = (item: HvListValue) => {\n    return !multiSelect && item.path ? (\n      <HvLink route={item.path} classes={{ a: classes.link }}>\n        <HvOverflowTooltip data={item.label} />\n      </HvLink>\n    ) : (\n      <HvOverflowTooltip data={item.label} />\n    );\n  };\n\n  const renderSelectItem = (item: HvListValue, itemId?: string) => {\n    if (!useSelector) return renderItemText(item);\n\n    const Component = multiSelect ? HvCheckBox : HvRadio;\n\n    return (\n      <Component\n        id={setId(itemId, \"selector\")}\n        label={<HvOverflowTooltip data={item.label} />}\n        checked={item.selected || false}\n        disabled={item.disabled}\n        onChange={multiSelect ? (evt) => handleSelect(evt, item) : undefined}\n        classes={{\n          root: classes.selectorRoot,\n          container: classes.selectorContainer,\n          label: classes.truncate,\n        }}\n      />\n    );\n  };\n\n  const renderListItem = (item: HvListValue, i: number, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    const startAdornment =\n      !useSelector && item.icon ? renderLeftIcon(item) : null;\n\n    return (\n      <HvListItem\n        key={i}\n        id={itemId}\n        role={itemRole}\n        disabled={item.disabled || undefined}\n        className={classes.item}\n        classes={{\n          selected: cx({\n            [classes.itemSelector]: useSelector || multiSelect,\n          }),\n        }}\n        selected={multiSelect || selected ? selected : undefined}\n        onClick={(evt) => handleSelect(evt, item)}\n        startAdornment={startAdornment}\n        endAdornment={\n          item.showNavIcon && (\n            <DropRightXS className={classes.box} iconSize=\"XS\" />\n          )\n        }\n        {...otherProps}\n      >\n        {renderSelectItem(item, itemId)}\n      </HvListItem>\n    );\n  };\n\n  const filteredList = list.filter((it) => !it.isHidden);\n  const anySelected = list\n    .map((item) => item.selected && !item.disabled)\n    .reduce((result, selected) => result || selected, false);\n\n  const selectedItemIndex = list.findIndex((item) => item.selected);\n  useEffect(() => {\n    if (selectedItemIndex >= 0 && listRef.current !== null) {\n      listRef.current.scrollToItem(selectedItemIndex);\n    }\n  }, [listRef, selectedItemIndex]);\n\n  const renderVirtualizedListItem = ({ index, style }) => {\n    const item = filteredList[index];\n    const tabIndex =\n      item.tabIndex ||\n      (!anySelected && index === 0) ||\n      (item.selected && !item.disabled)\n        ? 0\n        : -1;\n\n    return renderListItem(item, index, {\n      style: {\n        ...style,\n        top: `${parseFloat(style.top) + 5}px`,\n        left: `${parseFloat(style.left) + 5}px`,\n        width: `calc(${parseFloat(style.width)}% - 10px)`,\n      },\n      tabIndex,\n      interactive: true,\n      condensed,\n      disableGutters: useSelector,\n    });\n  };\n\n  const ariaMultiSelectable = (role === \"listbox\" && multiSelect) || undefined;\n\n  const ListContainer = useMemo(() => {\n    return forwardRef<HTMLUListElement, HvListContainerProps>(\n      ({ ...rest }, ref) => (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          ref={ref}\n          {...rest}\n        />\n      ),\n    );\n  }, [\n    cx,\n    id,\n    useSelector,\n    className,\n    classes.root,\n    role,\n    condensed,\n    ariaMultiSelectable,\n  ]);\n\n  // Render nothing if there are no items\n  if (filteredList.length === 0) return null;\n\n  return (\n    <>\n      {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n      {!virtualized ? (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          {...others}\n        >\n          {filteredList.map((item, i) => renderListItem(item, i))}\n        </HvListContainer>\n      ) : (\n        <FixedSizeList\n          ref={listRef}\n          className={classes.virtualizedRoot}\n          height={(height || 0) + 5}\n          width=\"100%\"\n          itemCount={filteredList.length}\n          itemSize={condensed ? 32 : 40}\n          innerElementType={ListContainer}\n          {...others}\n        >\n          {renderVirtualizedListItem}\n        </FixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["anySelected"],"mappings":";;;;;;;;;;;;;;;;;AAmFA,MAAM,iBAAiB;AAAA,EACrB,WAAW;AAAA,EACX,sBAAsB;AACxB;AAKa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA;AAAA,IAEd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,aAAa;AAAA,IACb,wBAAwB;AAAA,IACxB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,CAAC;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,MAAM,SAAS,SAAS,IAAI,kBAAkB,UAAU;AACzD,QAAA,UAAU,OAAY,IAAI;AAEhC,YAAU,MAAM;AACd,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,aAA4B;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,YAAQ,UAAU;AAAA,EAAA,GACjB,CAAC,YAAY,aAAa,YAAY,uBAAuB,OAAO,CAAC;AAExE,QAAM,CAAC,MAAM,QAAQ,IAAI,QAA8B,MAAM;AAE3D,QAAI,cAAc;AAAoB,aAAA,CAAC,QAAQ,UAAU;AAErD,QAAA;AAAmB,aAAA,CAAC,WAAW,QAAQ;AACpC,WAAA,CAAC,QAAQ,UAAU;AAAA,EAAA,GACzB,CAAC,YAAY,WAAW,CAAC;AAEtB,QAAA,eAAe,CAAC,KAAK,SAAS;AAClC,QAAI,CAAC,KAAK;AAAM,UAAI,eAAe;AACnC,QAAI,KAAK;AAAU;AAEnB,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,aAAa,UAAU,MAAM,aAAa,QAAW,IAAI;AAC/D,YAAQ,UAAU;AAElB,cAAU,KAAK,IAAI;AACnB,eAAW,UAAU;AAAA,EAAA;AAGvB,QAAM,kBAAkB,MAAM;AAC5B,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,wBAAwB,KAAK;AAAA,MACjC,CAAC,SAAS,KAAK,YAAY,KAAK;AAAA,IAAA;AAElC,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA,CAAC;AAAA,MACD;AAAA,IAAA;AAEF,YAAQ,UAAU;AAElB,eAAW,UAAU;AAAA,EAAA;AAGjB,QAAA,iBAAiB,CAAC,SAAS;AAC/B,WAAO,eAAe,KAAK,IAAI,IAC3B,KAAK,OACL,KAAK,OAAO;AAAA,MACV,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA,CAClB;AAAA,EAAA;AAGP,QAAM,kBAAkB,MAAM;AACtB,UAAA,EAAE,WAAW,qBAAyB,IAAA;AAEtCA,UAAAA,eAAc,CAAC,CAAC,WAAW;AAC3B,UAAA,cAAc,UAAU,WAAW,KAAK;AAE9C,UAAM,iBACH,oBAAA,cAAA,EAAa,WAAU,QACrB,UAAA,CAACA,eAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,OAAG,UAAU,UAAA,CAAA;AAAA,MACb,KAAK,KAAK,MAAM;AAAA,IAAA,EAAA,CACnB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,KAAA,EAAG,oBAAU,OAAO,CAAA;AAAA,MACpB,IAAO,oBAAoB;AAAA,MAC3B,KAAK;AAAA,IAAA,EACR,CAAA,EAEJ,CAAA;AAIA,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,YAAY;AAAA,QAC1B,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW,QAAQ;AAAA,QACnB,eAAeA,gBAAe,CAAC;AAAA,QAC/B,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACX;AAIE,QAAA,iBAAiB,CAAC,SAAsB;AACrC,WAAA,CAAC,eAAe,KAAK,OAC1B,oBAAC,QAAO,EAAA,OAAO,KAAK,MAAM,SAAS,EAAE,GAAG,QAAQ,KAC9C,GAAA,UAAA,oBAAC,mBAAkB,EAAA,MAAM,KAAK,MAAA,CAAO,EACvC,CAAA,IAEC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,MAAO,CAAA;AAAA,EAAA;AAInC,QAAA,mBAAmB,CAAC,MAAmB,WAAoB;AAC/D,QAAI,CAAC;AAAa,aAAO,eAAe,IAAI;AAEtC,UAAA,YAAY,cAAc,aAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,QAAQ,UAAU;AAAA,QAC5B,OAAO,oBAAC,mBAAkB,EAAA,MAAM,KAAK,OAAO;AAAA,QAC5C,SAAS,KAAK,YAAY;AAAA,QAC1B,UAAU,KAAK;AAAA,QACf,UAAU,cAAc,CAAC,QAAQ,aAAa,KAAK,IAAI,IAAI;AAAA,QAC3D,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,WAAW,QAAQ;AAAA,UACnB,OAAO,QAAQ;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAIJ,QAAM,iBAAiB,CAAC,MAAmB,GAAW,aAAa,CAAA,MAAO;AACxE,UAAM,SAAS,MAAM,IAAI,QAAQ,CAAC;AAC5B,UAAA,WAAW,KAAK,YAAY;AAElC,UAAM,iBACJ,CAAC,eAAe,KAAK,OAAO,eAAe,IAAI,IAAI;AAGnD,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,UAAU,KAAK,YAAY;AAAA,QAC3B,WAAW,QAAQ;AAAA,QACnB,SAAS;AAAA,UACP,UAAU,GAAG;AAAA,YACX,CAAC,QAAQ,YAAY,GAAG,eAAe;AAAA,UAAA,CACxC;AAAA,QACH;AAAA,QACA,UAAU,eAAe,WAAW,WAAW;AAAA,QAC/C,SAAS,CAAC,QAAQ,aAAa,KAAK,IAAI;AAAA,QACxC;AAAA,QACA,cACE,KAAK,eACH,oBAAC,eAAY,WAAW,QAAQ,KAAK,UAAS,KAAK,CAAA;AAAA,QAGtD,GAAG;AAAA,QAEH,UAAA,iBAAiB,MAAM,MAAM;AAAA,MAAA;AAAA,MApBzB;AAAA,IAAA;AAAA,EAqBP;AAIJ,QAAM,eAAe,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,QAAQ;AACrD,QAAM,cAAc,KACjB,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,KAAK,QAAQ,EAC7C,OAAO,CAAC,QAAQ,aAAa,UAAU,UAAU,KAAK;AAEzD,QAAM,oBAAoB,KAAK,UAAU,CAAC,SAAS,KAAK,QAAQ;AAChE,YAAU,MAAM;AACd,QAAI,qBAAqB,KAAK,QAAQ,YAAY,MAAM;AAC9C,cAAA,QAAQ,aAAa,iBAAiB;AAAA,IAChD;AAAA,EAAA,GACC,CAAC,SAAS,iBAAiB,CAAC;AAE/B,QAAM,4BAA4B,CAAC,EAAE,OAAO,YAAY;AAChD,UAAA,OAAO,aAAa,KAAK;AAC/B,UAAM,WACJ,KAAK,YACJ,CAAC,eAAe,UAAU,KAC1B,KAAK,YAAY,CAAC,KAAK,WACpB,IACA;AAEC,WAAA,eAAe,MAAM,OAAO;AAAA,MACjC,OAAO;AAAA,QACL,GAAG;AAAA,QACH,KAAK,GAAG,WAAW,MAAM,GAAG,IAAI,CAAC;AAAA,QACjC,MAAM,GAAG,WAAW,MAAM,IAAI,IAAI,CAAC;AAAA,QACnC,OAAO,QAAQ,WAAW,MAAM,KAAK,CAAC;AAAA,MACxC;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,gBAAgB;AAAA,IAAA,CACjB;AAAA,EAAA;AAGG,QAAA,sBAAuB,SAAS,aAAa,eAAgB;AAE7D,QAAA,gBAAgB,QAAQ,MAAM;AAC3B,WAAA;AAAA,MACL,CAAC,EAAE,GAAG,QAAQ,QACZ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,UACrC;AAAA,UACA,aAAW;AAAA,UACX;AAAA,UACA,gBAAgB;AAAA,UAChB,wBAAsB;AAAA,UACtB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGD,MAAI,aAAa,WAAW;AAAU,WAAA;AAEtC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAe,eAAA,eAAe,iBAAiB,gBAAgB;AAAA,IAE/D,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA,gBAAgB;AAAA,QAChB,wBAAsB;AAAA,QACrB,GAAG;AAAA,QAEH,UAAA,aAAa,IAAI,CAAC,MAAM,MAAM,eAAe,MAAM,CAAC,CAAC;AAAA,MAAA;AAAA,IAAA,IAGxD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,SAAS,UAAU,KAAK;AAAA,QACxB,OAAM;AAAA,QACN,WAAW,aAAa;AAAA,QACxB,UAAU,YAAY,KAAK;AAAA,QAC3B,kBAAkB;AAAA,QACjB,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js

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

package/dist/esm/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../src/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTypographyProps } from \"../../../Typography\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHorizontalScrollListItemProps\n  extends HvBaseProps<HTMLDivElement | HTMLAnchorElement> {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n  ) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (\n    event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n\n  /**\n   * The link to be set in the href attribute of the anchor element.\n   *\n   * If this is not set, the element will be rendered as a div with a button role.\n   */\n  href?: string;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = (\n  props: HvHorizontalScrollListItemProps,\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    children,\n    onClick,\n    onKeyDown,\n    tooltipWrapper,\n    href,\n    ...others\n  } = useDefaultProps(\"HvHorizontalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  const Component = href != null ? \"a\" : \"div\";\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <Component\n        id={buttonId}\n        role={href == null ? \"button\" : undefined}\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-labelledby={labelId}\n        href={href}\n        {...others}\n      >\n        <Tooltip\n          id={labelId}\n          className={cx(classes.text, { [classes.selected]: selected })}\n          variant={variant}\n        >\n          {children}\n        </Tooltip>\n      </Component>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8Ca,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AACvD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,UAAU,WAAW,UAAU;AAC/B,QAAA,UAAU,MAAM,IAAI,OAAO;AAC3B,QAAA,WAAW,MAAM,IAAI,QAAQ;AACnC,QAAM,UAAU;AAEV,QAAA,YAAY,QAAQ,OAAO,MAAM;AAGrC,SAAA,oBAAC,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAM,QAAQ,OAAO,WAAW;AAAA,MAChC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,mBAAiB;AAAA,MACjB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,UAC5D;AAAA,UAEC;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../src/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../../hooks/useDefaultProps\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"../../../OverflowTooltip\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHorizontalScrollListItemProps\n  extends HvBaseProps<HTMLDivElement | HTMLAnchorElement> {\n  /** The text to render.  */\n  label?: React.ReactNode;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  tooltipPlacement: HvOverflowTooltipProps[\"placement\"];\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n\n  /**\n   * The link to be set in the href attribute of the anchor element.\n   *\n   * If this is not set, the element will be rendered as a div with a button role.\n   */\n  href?: string;\n  /** @deprecated remove in v6 */\n  iconClasses?: string;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = (\n  props: HvHorizontalScrollListItemProps,\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    label,\n    tooltipPlacement,\n    href,\n    iconClasses,\n    ...others\n  } = useDefaultProps(\"HvHorizontalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const buttonId = setId(id, \"button\");\n\n  const Component = href != null ? \"a\" : \"div\";\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <Component\n        id={buttonId}\n        role={href == null ? \"button\" : undefined}\n        tabIndex={0}\n        className={classes.button}\n        href={href}\n        {...others}\n      >\n        <HvOverflowTooltip\n          className={cx(classes.text, { [classes.selected]: selected })}\n          placement={tooltipPlacement}\n          data={label}\n        />\n        <div\n          aria-hidden\n          className={cx(classes.bullet, iconClasses, {\n            [classes.bulletSelected]: selected,\n          })}\n        >\n          <span />\n        </div>\n      </Component>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqCa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AACvD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,WAAW,MAAM,IAAI,QAAQ;AAE7B,QAAA,YAAY,QAAQ,OAAO,MAAM;AAGrC,SAAA,oBAAC,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAM,QAAQ,OAAO,WAAW;AAAA,MAChC,UAAU;AAAA,MACV,WAAW,QAAQ;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,YAC5D,WAAW;AAAA,YACX,MAAM;AAAA,UAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAW,GAAG,QAAQ,QAAQ,aAAa;AAAA,cACzC,CAAC,QAAQ,cAAc,GAAG;AAAA,YAAA,CAC3B;AAAA,YAED,8BAAC,QAAK,EAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js

@@ -4,49 +4,44 @@ import { outlineStyles } from "../../../utils/focusUtils.js";
 const name = "HvHorizontalScrollListItem";
 const { staticClasses, useClasses } = createClasses(name, {
   root: {
-    padding: "10px 0"
+    padding: 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: theme.colors.secondary
-      },
-      "& $notSelectedRoot": {
-        backgroundColor: theme.colors.containerBackgroundHover
-      }
-    },
-    "&:focus": {
-      outline: "none"
-    },
     "&:focus-visible": {
       ...outlineStyles
     }
   },
   text: {
+    margin: theme.spacing("xs", "xs", "0")
+  },
+  selected: {
+    fontWeight: 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: theme.colors.secondary_60,
+    "& > span": {
+      margin: "auto",
+      width: "1em",
+      height: "1em",
+      backgroundColor: "currentcolor",
+      borderRadius: "50%"
     }
   },
-  selected: {
-    borderBottom: "none"
+  bulletSelected: {
+    fontSize: 6,
+    color: theme.colors.secondary
   }
 });
 export {

package/dist/esm/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../src/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../utils/classes\";\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"48px\",\n    cursor: \"pointer\",\n    borderBottom: \"none\",\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n\n      \"& $notSelected\": {\n        height: \"6px\",\n        width: \"6px\",\n        backgroundColor: theme.colors.secondary,\n      },\n\n      \"& $notSelectedRoot\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"48px\",\n    borderBottom: \"none\",\n\n    \"& p\": {\n      padding: \"3px 10px\",\n      maxWidth: \"120px\",\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: \"none\",\n  },\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,WAAW;AAAA,MACT,iBAAiB;AAAA,MAEjB,kBAAkB;AAAA,QAChB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MAEA,sBAAsB;AAAA,QACpB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,cAAc;AAAA,IAEd,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,MACd,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,cAAc;AAAA,EAChB;AACF,CAAC;"}
+{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../src/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../utils/classes\";\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: theme.spacing(\"xs\", 0),\n    maxWidth: 120,\n  },\n  button: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    margin: theme.spacing(\"xs\", \"xs\", \"0\"),\n  },\n  selected: {\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  bullet: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    minHeight: 24,\n    height: 24,\n    width: 24,\n    fontSize: 4,\n    color: theme.colors.secondary_60,\n\n    \"& > span\": {\n      margin: \"auto\",\n      width: \"1em\",\n      height: \"1em\",\n      backgroundColor: \"currentcolor\",\n      borderRadius: \"50%\",\n    },\n  },\n  bulletSelected: {\n    fontSize: 6,\n    color: theme.colors.secondary,\n  },\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ,MAAM,QAAQ,MAAM,MAAM,GAAG;AAAA,EACvC;AAAA,EACA,UAAU;AAAA,IACR,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,IAEpB,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}

package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -1,16 +1,11 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import { useMemo, useCallback } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { CurrentStep } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useTheme as useTheme$1 } from "../../hooks/useTheme.js";
-import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import { useScrollTo } from "../useScrollTo.js";
-import { withTooltip } from "../withTooltip.js";
 import { useClasses } from "./ScrollToHorizontal.styles.js";
 import { staticClasses } from "./ScrollToHorizontal.styles.js";
 import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
@@ -37,8 +32,6 @@ const HvScrollToHorizontal = (props) => {
   const muiTheme = useTheme();
   const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
   const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
-  const { activeTheme } = useTheme$1();
-  const elementId = useUniqueId(id);
   const [selectedIndex, setScrollTo, elements] = useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
@@ -48,65 +41,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 = useMemo(() => {
-    return options.map((option) => {
-      return withTooltip(option.label, "div", tooltipPosition);
-    });
-  }, [options, tooltipPosition]);
-  const NotSelected = useCallback(() => {
-    return /* @__PURE__ */ jsx("div", { className: classes.notSelectedRoot, children: /* @__PURE__ */ jsx("div", { className: classes.notSelected }) });
-  }, [classes.notSelectedRoot, classes.notSelected]);
-  const Selected = useCallback(() => {
-    return /* @__PURE__ */ jsx(
-      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__ */ jsxs(
-      HvHorizontalScrollListItem,
-      {
-        id: setId(elementId, `item-${index}`),
-        onClick: (event) => {
-          if (navigationMode !== "none") {
-            event.preventDefault();
-          }
-          handleSelection(event, option.value, index);
-          onClick?.(event, index);
-        },
-        onKeyDown: (event) => {
-          if (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__ */ jsx("p", { children: option.label }),
-          selected ? /* @__PURE__ */ jsx(Selected, {}) : /* @__PURE__ */ jsx(NotSelected, {})
-        ]
+  const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(
+    HvHorizontalScrollListItem,
+    {
+      id: setId(id, `item-${index}`),
+      onClick: (event) => {
+        event.preventDefault();
+        setScrollTo(event, option.value, index, () => onChange?.(event, index));
+        onClick?.(event, index);
+      },
+      onKeyDown: (event) => {
+        if (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__ */ jsx(
     "ol",
     {
@@ -125,7 +87,7 @@ const HvScrollToHorizontal = (props) => {
         },
         className
       ),
-      id: elementId,
+      id,
       ...others,
       children: tabs
     }

package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../src/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /**\n   * Should the active element be reflected in the URL.\n   *\n   * @default true\n   *\n   * @deprecated Use `navigationMode` instead.\n   * */\n  href?: boolean;\n  /**\n   * The navigation mode to be used when the user clicks on a tab element.\n   * - `push` will add a new entry to the history stack.\n   * - `replace` will replace the current entry on the history stack.\n   * - `none` will not add any entry to the history stack.\n   *\n   * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n   *\n   * When set to `none`, then each element will render a button instead of a link.\n   *\n   * @default \"push\"\n   */\n  navigationMode?: \"push\" | \"replace\" | \"none\";\n  /**\n   * When set to `true`, the generated links will be relative (e.g. `#section`).\n   * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n   * This can lead to unexpected behavior.\n   *\n   * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n   *\n   * @default false\n   */\n  relativeLinks?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number,\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (\n    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number,\n  ) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (\n    event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number,\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    navigationMode = href ? \"push\" : \"none\",\n    relativeLinks = false,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme } = useTheme();\n\n  const elementId = useUniqueId(id);\n\n  const [selectedIndex, setScrollTo, elements] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    navigationMode,\n    relativeLinks,\n    offset,\n    options,\n    onChange,\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    value: string,\n    index: number,\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = elements.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          if (navigationMode !== \"none\") {\n            event.preventDefault();\n          }\n\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            if (navigationMode !== \"none\") {\n              event.preventDefault();\n            }\n\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        href={navigationMode !== \"none\" ? option.href : undefined}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className,\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["useMuiTheme","useTheme"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../src/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { HvScrollToOption, HvScrollToTooltipPositions } from \"../types\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToOption[];\n  /**\n   * Should the active element be reflected in the URL.\n   *\n   * @default true\n   *\n   * @deprecated Use `navigationMode` instead.\n   * */\n  href?: boolean;\n  /**\n   * The navigation mode to be used when the user clicks on a tab element.\n   * - `push` will add a new entry to the history stack.\n   * - `replace` will replace the current entry on the history stack.\n   * - `none` will not add any entry to the history stack.\n   *\n   * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n   *\n   * When set to `none`, then each element will render a button instead of a link.\n   *\n   * @default \"push\"\n   */\n  navigationMode?: \"push\" | \"replace\" | \"none\";\n  /**\n   * When set to `true`, the generated links will be relative (e.g. `#section`).\n   * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n   * This can lead to unexpected behavior.\n   *\n   * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n   *\n   * @default false\n   */\n  relativeLinks?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number,\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (\n    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number,\n  ) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (\n    event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number,\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    navigationMode = href ? \"push\" : \"none\",\n    relativeLinks = false,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const [selectedIndex, setScrollTo, elements] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    navigationMode,\n    relativeLinks,\n    offset,\n    options,\n    onChange,\n  );\n\n  const tabs = elements.map((option, index) => (\n    <HvHorizontalScrollListItem\n      id={setId(id, `item-${index}`)}\n      onClick={(event) => {\n        event.preventDefault();\n\n        setScrollTo(event, option.value, index, () => onChange?.(event, index));\n        onClick?.(event, index);\n      }}\n      onKeyDown={(event) => {\n        if (isKey(event, \"Enter\") !== true) return;\n        event.preventDefault();\n\n        setScrollTo(event, option.value, index, () => onChange?.(event, index));\n        onEnter?.(event, index);\n      }}\n      href={navigationMode !== \"none\" ? option.href : undefined}\n      tooltipPlacement={tooltipPosition}\n      selected={selectedIndex === index}\n      key={option.key || option.label}\n      label={option.label}\n      iconClasses={cx({\n        [classes.selected]: selectedIndex === index,\n        [classes.notSelected]: selectedIndex !== index,\n        [classes.notSelectedRoot]: selectedIndex !== index,\n      })}\n    />\n  ));\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className,\n      )}\n      id={id}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["useMuiTheme"],"mappings":";;;;;;;;;;;AAoGa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,OAAO,SAAS;AAAA,IACjC,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AAEjD,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AACnD,QAAM,WAAWA;AAEjB,QAAM,SAAS,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC5D,QAAM,OAAO,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAExD,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UACjC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,MAC7B,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AAET,oBAAA,OAAO,OAAO,OAAO,OAAO,MAAM,WAAW,OAAO,KAAK,CAAC;AACtE,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AAChB,YAAA,MAAM,OAAO,OAAO,MAAM;AAAM;AACpC,cAAM,eAAe;AAET,oBAAA,OAAO,OAAO,OAAO,OAAO,MAAM,WAAW,OAAO,KAAK,CAAC;AACtE,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,MAChD,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,MACd,aAAa,GAAG;AAAA,QACd,CAAC,QAAQ,QAAQ,GAAG,kBAAkB;AAAA,QACtC,CAAC,QAAQ,WAAW,GAAG,kBAAkB;AAAA,QACzC,CAAC,QAAQ,eAAe,GAAG,kBAAkB;AAAA,MAAA,CAC9C;AAAA,IAAA;AAAA,IANI,OAAO,OAAO,OAAO;AAAA,EAAA,CAQ7B;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI;AAAA,UACF,OACE,aAAa,YAAY,QAAQ,UAC7B,iBAAiB,MAAM,QAAQ,OAAO,IAAI,CAAC,CAAC,MAC5C;AAAA,UACN,WAAW;AAAA,UACX,cAAc;AAAA,UACd,aACE,aAAa,YAAY,QAAQ,UAC7B,MAAM,QAAQ,OAAO,IAAI,CAAC,IAC1B;AAAA,UACN,YACE,aAAa,YAAY,QAAQ,UAC7B,MAAM,QAAQ,OAAO,IAAI,CAAC,IAC1B;AAAA,QAAA,CACP;AAAA,QACD,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG,aAAa;AAAA,UACvC,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,QACxC;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.styles.js

@@ -23,26 +23,9 @@ const { staticClasses, useClasses } = createClasses(
       top: 0,
       left: 0
     },
-    notSelectedRoot: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "16px",
-      width: "16px",
-      borderRadius: "50%"
-    },
-    notSelected: {
-      height: "4px",
-      width: "4px",
-      borderRadius: "50%",
-      display: "inline-block",
-      backgroundColor: theme.colors.secondary_60
-    },
-    selected: {
-      display: "flex",
-      height: "16px",
-      width: "16px"
-    }
+    notSelectedRoot: {},
+    notSelected: {},
+    selected: {}
   }
 );
 export {

package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../src/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvScrollToHorizontal\",\n  {\n    root: {\n      display: \"flex\",\n      padding: \"0 30px\",\n      listStyleType: \"none\",\n      flexWrap: \"wrap\",\n      backdropFilter: `blur(4px)`,\n      backgroundColor: theme.alpha(\"atmo2\", 0.9),\n    },\n    positionSticky: {\n      position: \"sticky\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    positionFixed: {\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    notSelectedRoot: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      height: \"16px\",\n      width: \"16px\",\n      borderRadius: \"50%\",\n    },\n    notSelected: {\n      height: \"4px\",\n      width: \"4px\",\n      borderRadius: \"50%\",\n      display: \"inline-block\",\n      backgroundColor: theme.colors.secondary_60,\n    },\n    selected: {\n      display: \"flex\",\n      height: \"16px\",\n      width: \"16px\",\n    },\n  },\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,IAC3C;AAAA,IACA,gBAAgB;AAAA,MACd,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,cAAc;AAAA,IAChB;AAAA,IACA,aAAa;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,cAAc;AAAA,MACd,SAAS;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AACF;"}
+{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../src/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvScrollToHorizontal\",\n  {\n    root: {\n      display: \"flex\",\n      padding: \"0 30px\",\n      listStyleType: \"none\",\n      flexWrap: \"wrap\",\n      backdropFilter: `blur(4px)`,\n      backgroundColor: theme.alpha(\"atmo2\", 0.9),\n    },\n    positionSticky: {\n      position: \"sticky\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    positionFixed: {\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    notSelectedRoot: {},\n    notSelected: {},\n    selected: {},\n  },\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,IAC3C;AAAA,IACA,gBAAgB;AAAA,MACd,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB,CAAC;AAAA,IAClB,aAAa,CAAC;AAAA,IACd,UAAU,CAAC;AAAA,EACb;AACF;"}