@hitachivantara/uikit-react-core 5.49.0 → 5.50.1

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

@@ -14,6 +14,7 @@ const HvHorizontalScrollListItem = (props) => {
     onClick,
     onKeyDown,
     tooltipWrapper,
+    href,
     ...others
   } = useDefaultProps.useDefaultProps("HvHorizontalScrollListItem", props);
   const { classes, cx } = HorizontalScrollListItem_styles.useClasses(classesProp);
@@ -21,16 +22,18 @@ const HvHorizontalScrollListItem = (props) => {
   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(
-    "div",
+    Component,
     {
       id: buttonId,
-      role: "button",
+      role: href == null ? "button" : void 0,
       tabIndex: 0,
       onClick,
       onKeyDown,
       className: classes.button,
       "aria-labelledby": labelId,
+      href,
       ...others,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Tooltip,

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.cjs","sources":["../../../../../src/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../../types/generic\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\nimport { HvTypographyProps } from \"../../../Typography\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\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?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    children,\n    onClick,\n    onKeyDown,\n    tooltipWrapper,\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  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-labelledby={labelId}\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      </div>\n    </li>\n  );\n};\n"],"names":["useDefaultProps","useClasses","setId","jsx"],"mappings":";;;;;;AAoCa,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,IACDA,gBAAgB,gBAAA,8BAA8B,KAAK;AACvD,QAAM,EAAE,SAAS,GAAG,IAAIC,2CAAW,WAAW;AACxC,QAAA,UAAU,WAAW,UAAU;AAC/B,QAAA,UAAUC,MAAAA,MAAM,IAAI,OAAO;AAC3B,QAAA,WAAWA,MAAAA,MAAM,IAAI,QAAQ;AACnC,QAAM,UAAU;AAGd,SAAAC,2BAAA,IAAC,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ,UAAAA,2BAAA;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.cjs","sources":["../../../../../src/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../../types/generic\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\nimport { HvTypographyProps } from \"../../../Typography\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\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":["useDefaultProps","useClasses","setId","jsx"],"mappings":";;;;;;AAgDa,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,IACDA,gBAAgB,gBAAA,8BAA8B,KAAK;AACvD,QAAM,EAAE,SAAS,GAAG,IAAIC,2CAAW,WAAW;AACxC,QAAA,UAAU,WAAW,UAAU;AAC/B,QAAA,UAAUC,MAAAA,MAAM,IAAI,OAAO;AAC3B,QAAA,WAAWA,MAAAA,MAAM,IAAI,QAAQ;AACnC,QAAM,UAAU;AAEV,QAAA,YAAY,QAAQ,OAAO,MAAM;AAGrC,SAAAC,2BAAA,IAAC,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAAA,2BAAA;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,UAAAA,2BAAA;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;;;"}

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

@@ -23,6 +23,8 @@ const HvScrollToHorizontal = (props) => {
     defaultSelectedIndex = 0,
     scrollElementId,
     href = true,
+    navigationMode = href ? "push" : "none",
+    relativeLinks = false,
     onChange,
     onClick,
     onEnter,
@@ -40,10 +42,11 @@ const HvScrollToHorizontal = (props) => {
   const upMd = useMediaQuery__default.default(muiTheme.breakpoints.up("md"));
   const { activeTheme } = useTheme.useTheme();
   const elementId = useUniqueId.useUniqueId(id, "hvHorizontalScrollto");
-  const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(
+  const [selectedIndex, setScrollTo, elements] = useScrollTo.useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
-    href,
+    navigationMode,
+    relativeLinks,
     offset,
     options,
     onChange
@@ -73,7 +76,7 @@ const HvScrollToHorizontal = (props) => {
       }
     );
   }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);
-  const tabs = options.map((option, index) => {
+  const tabs = elements.map((option, index) => {
     const selected = selectedIndex === index;
     const tooltipWrapper = tooltipWrappers[index];
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -81,15 +84,22 @@ const HvScrollToHorizontal = (props) => {
       {
         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: [

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.cjs","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 { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\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  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: 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>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => 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    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, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\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 = options.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          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\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":["useDefaultProps","useClasses","useMuiTheme","useMediaQuery","useTheme","useUniqueId","useScrollTo","useMemo","withTooltip","useCallback","jsx","CurrentStep","jsxs","HvHorizontalScrollListItem","setId","isKey","theme"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.cjs","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 { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\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, \"hvHorizontalScrollto\");\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":["useDefaultProps","useClasses","useMuiTheme","useMediaQuery","useTheme","useUniqueId","useScrollTo","useMemo","withTooltip","useCallback","jsx","CurrentStep","jsxs","HvHorizontalScrollListItem","setId","isKey","theme"],"mappings":"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"}

package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs

@@ -14,6 +14,8 @@ const HvScrollToVertical = (props) => {
     defaultSelectedIndex = 0,
     scrollElementId,
     href = true,
+    navigationMode = href ? "push" : "none",
+    relativeLinks = false,
     onChange,
     onClick,
     onEnter,
@@ -28,10 +30,11 @@ const HvScrollToVertical = (props) => {
   } = useDefaultProps.useDefaultProps("HvScrollToVertical", props);
   const { classes, cx } = ScrollToVertical_styles.useClasses(classesProp);
   const elementId = useUniqueId.useUniqueId(id, "hvVerticalScrollto");
-  const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(
+  const [selectedIndex, setScrollTo, elements] = useScrollTo.useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
-    href,
+    navigationMode,
+    relativeLinks,
     offset,
     options,
     onChange
@@ -43,20 +46,27 @@ const HvScrollToVertical = (props) => {
     };
     setScrollTo(event, value, index, wrappedOnChange);
   };
-  const tabs = options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  const tabs = elements.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
     VerticalScrollListItem.HvVerticalScrollListItem,
     {
       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,
       tooltipPlacement: tooltipPosition,
       selected: selectedIndex === index,
       label: option.label

package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\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: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: 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 Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\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>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\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 tabs = options.map((option, index) => (\n    <HvVerticalScrollListItem\n      id={setId(elementId, `item-${index}`)}\n      onClick={(event) => {\n        handleSelection(event, option.value, index);\n        onClick?.(event, index);\n      }}\n      onKeyDown={(event) => {\n        if (isKey(event, \"Enter\") === true) {\n          handleSelection(event, option.value, index);\n          onEnter?.(event, index);\n        }\n      }}\n      tooltipPlacement={tooltipPosition}\n      selected={selectedIndex === index}\n      key={option.key || option.label}\n      label={option.label}\n    />\n  ));\n\n  const positionOffset = calculateOffset(options.length);\n\n  return (\n    <ol\n      className={cx(\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useUniqueId","useScrollTo","jsx","HvVerticalScrollListItem","setId","isKey","calculateOffset"],"mappings":";;;;;;;;;;AAqEa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAIC,mCAAW,WAAW;AAExC,QAAA,YAAYC,YAAAA,YAAY,IAAI,oBAAoB;AAEhD,QAAA,CAAC,eAAe,WAAW,IAAIC,YAAA;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,kBAAkB,CACtB,OAGA,OACA,UACG;AACH,UAAM,eAAe;AAErB,UAAM,kBAAkB,MAAM;AAC5B,iBAAW,OAAO,KAAK;AAAA,IAAA;AAGb,gBAAA,OAAO,OAAO,OAAO,eAAe;AAAA,EAAA;AAGlD,QAAM,OAAO,QAAQ,IAAI,CAAC,QAAQ,UAChCC,2BAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAIC,MAAA,MAAM,WAAW,QAAQ,KAAK,EAAE;AAAA,MACpC,SAAS,CAAC,UAAU;AACF,wBAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAIC,oBAAM,OAAO,OAAO,MAAM,MAAM;AAClB,0BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,oBAAU,OAAO,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiBC,wBAAAA,gBAAgB,QAAQ,MAAM;AAGnD,SAAAJ,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}
+{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\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 Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\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?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\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 = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\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 tabs = elements.map((option, index) => (\n    <HvVerticalScrollListItem\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      tooltipPlacement={tooltipPosition}\n      selected={selectedIndex === index}\n      key={option.key || option.label}\n      label={option.label}\n    />\n  ));\n\n  const positionOffset = calculateOffset(options.length);\n\n  return (\n    <ol\n      className={cx(\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useUniqueId","useScrollTo","jsx","HvVerticalScrollListItem","setId","isKey","calculateOffset"],"mappings":";;;;;;;;;;AAwGa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,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;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAIC,mCAAW,WAAW;AAExC,QAAA,YAAYC,YAAAA,YAAY,IAAI,oBAAoB;AAEtD,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAIC,YAAA;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,kBAAkB,CACtB,OAGA,OACA,UACG;AACH,UAAM,eAAe;AAErB,UAAM,kBAAkB,MAAM;AAC5B,iBAAW,OAAO,KAAK;AAAA,IAAA;AAGb,gBAAA,OAAO,OAAO,OAAO,eAAe;AAAA,EAAA;AAGlD,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UACjCC,2BAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAIC,MAAA,MAAM,WAAW,QAAQ,KAAK,EAAE;AAAA,MACpC,SAAS,CAAC,UAAU;AAClB,YAAI,mBAAmB,QAAQ;AAC7B,gBAAM,eAAe;AAAA,QACvB;AAEgB,wBAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAIC,oBAAM,OAAO,OAAO,MAAM,MAAM;AAClC,cAAI,mBAAmB,QAAQ;AAC7B,kBAAM,eAAe;AAAA,UACvB;AAEgB,0BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,oBAAU,OAAO,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,MAChD,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiBC,wBAAAA,gBAAgB,QAAQ,MAAM;AAGnD,SAAAJ,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}

package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs

@@ -16,6 +16,7 @@ const HvVerticalScrollListItem = (props) => {
     onClick,
     onKeyDown,
     tooltipPlacement = "left",
+    href,
     ...others
   } = useDefaultProps.useDefaultProps("HvVerticalScrollListItem", props);
   const { classes, cx } = VerticalScrollListItem_styles.useClasses(classesProp);
@@ -27,14 +28,16 @@ const HvVerticalScrollListItem = (props) => {
       width: activeTheme?.scrollTo.dotSelectedSize
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelected });
+  const Component = href != null ? "a" : "div";
   return /* @__PURE__ */ jsxRuntime.jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: label, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Component,
     {
-      role: "button",
+      role: href == null ? "button" : void 0,
       tabIndex: 0,
       onClick,
       onKeyDown,
       className: cx(classes.button, classes.text),
+      href,
       ...others,
       children: icon
     }

package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"../../../Tooltip\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { useTheme } from \"../../../hooks/useTheme\";\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps\n  extends HvBaseProps<HTMLDivElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  label?: React.ReactNode;\n  tooltipPlacement?: HvTooltipProps[\"placement\"];\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    label,\n    onClick,\n    onKeyDown,\n    tooltipPlacement = \"left\",\n    ...others\n  } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={classes.notSelected} />\n  );\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <HvTooltip title={label} placement={tooltipPlacement}>\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          className={cx(classes.button, classes.text)}\n          {...others}\n        >\n          {icon}\n        </div>\n      </HvTooltip>\n    </li>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useTheme","jsx","CurrentStep","HvTooltip"],"mappings":";;;;;;;;AA2Ba,MAAA,2BAA2B,CACtC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,4BAA4B,KAAK;AACrD,QAAM,EAAE,SAAS,GAAG,IAAIC,yCAAW,WAAW;AACxC,QAAA,EAAE,gBAAgBC,SAAAA;AAExB,QAAM,OAAO,WACXC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,QAAQ,aAAa,SAAS;AAAA,MAC9B,OAAO,aAAa,SAAS;AAAA,IAAA;AAAA,EAAA,IAG/BD,2BAAAA,IAAC,OAAI,EAAA,WAAW,QAAQ,YAAa,CAAA;AAGvC,wCACG,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAACA,+BAAAE,QAAAA,WAAA,EAAU,OAAO,OAAO,WAAW,kBAClC,UAAAF,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI;AAAA,MACzC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA,EAEL,CAAA,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"../../../Tooltip\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { useTheme } from \"../../../hooks/useTheme\";\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps\n  extends HvBaseProps<HTMLDivElement | HTMLAnchorElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\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  label?: React.ReactNode;\n  tooltipPlacement?: HvTooltipProps[\"placement\"];\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 * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    label,\n    onClick,\n    onKeyDown,\n    tooltipPlacement = \"left\",\n    href,\n    ...others\n  } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={classes.notSelected} />\n  );\n\n  const Component = href != null ? \"a\" : \"div\";\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <HvTooltip title={label} placement={tooltipPlacement}>\n        <Component\n          role={href == null ? \"button\" : undefined}\n          tabIndex={0}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          className={cx(classes.button, classes.text)}\n          href={href}\n          {...others}\n        >\n          {icon}\n        </Component>\n      </HvTooltip>\n    </li>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useTheme","jsx","CurrentStep","HvTooltip"],"mappings":";;;;;;;;AA0Ca,MAAA,2BAA2B,CACtC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,4BAA4B,KAAK;AACrD,QAAM,EAAE,SAAS,GAAG,IAAIC,yCAAW,WAAW;AACxC,QAAA,EAAE,gBAAgBC,SAAAA;AAExB,QAAM,OAAO,WACXC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,QAAQ,aAAa,SAAS;AAAA,MAC9B,OAAO,aAAa,SAAS;AAAA,IAAA;AAAA,EAAA,IAG/BD,2BAAAA,IAAC,OAAI,EAAA,WAAW,QAAQ,YAAa,CAAA;AAGjC,QAAA,YAAY,QAAQ,OAAO,MAAM;AAEvC,wCACG,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAACA,+BAAAE,QAAAA,WAAA,EAAU,OAAO,OAAO,WAAW,kBAClC,UAAAF,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,QAAQ,OAAO,WAAW;AAAA,MAChC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI;AAAA,MAC1C;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA,EAEL,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/ScrollTo/useScrollTo.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const utils = require("./utils.cjs");
-const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
+const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigationMode = "push", relativeLinks = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
   const RETRY_MAX = 5;
   const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp);
   const scrollEle = React.useRef(window);
@@ -66,7 +66,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
   }, [checkScroll]);
   React.useEffect(() => {
     let checkRenderedInterval;
-    if (href) {
+    if (navigationMode !== "none") {
       const hashValue = document.location.hash.split("#")[1] || "";
       const option = options.find((o) => o.value === hashValue);
       if (option) {
@@ -89,26 +89,39 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
       clearInterval(checkRenderedInterval);
     };
   }, []);
-  const setScrollTo = (event, id, index, wrappedOnChange) => {
-    const option = options.find((o) => o.value === id);
-    if (option) {
-      const ele = document.getElementById(id);
-      if (ele) {
-        utils.scrollElement(
-          ele,
-          scrollEle.current,
-          option.offset || offset,
-          direction
-        );
-      }
-      if (href) {
-        window.history.pushState({}, "", `#${options[index].value}`);
+  const baseUrl = relativeLinks || window == null ? "" : window.location.href.split("#")[0];
+  const elements = React.useMemo(
+    () => options.map((o) => ({
+      ...o,
+      href: `${baseUrl}#${o.value}`
+    })),
+    [options, baseUrl]
+  );
+  const setScrollTo = React.useCallback(
+    (event, id, index, wrappedOnChange) => {
+      const option = elements.find((o) => o.value === id);
+      if (option) {
+        const ele = document.getElementById(id);
+        if (ele) {
+          utils.scrollElement(
+            ele,
+            scrollEle.current,
+            option.offset || offset,
+            direction
+          );
+        }
+        if (navigationMode === "push") {
+          window.history.pushState({}, "", option.href);
+        } else if (navigationMode === "replace") {
+          window.history.replaceState({}, "", option.href);
+        }
+        setSelectedIndex(index);
+        wrappedOnChange?.(index);
+        selectedIndexRef.current = index;
       }
-      setSelectedIndex(index);
-      wrappedOnChange?.(index);
-      selectedIndexRef.current = index;
-    }
-  };
-  return [selectedIndex, setScrollTo];
+    },
+    [elements, navigationMode, direction, offset]
+  );
+  return [selectedIndex, setScrollTo, elements];
 };
 exports.useScrollTo = useScrollTo;

package/dist/cjs/ScrollTo/useScrollTo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.cjs","sources":["../../../src/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n  selectedIndexProp: number = 0,\n  scrollElementId: string | undefined = undefined,\n  href: boolean = false,\n  offset: number = 0,\n  options: HvScrollToVerticalOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement>\n          | React.KeyboardEvent<HTMLDivElement>,\n        index: number\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\"\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => void\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    scrollEle.current =\n      (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange]\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (href) {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const setScrollTo = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => {\n    const option = options.find((o) => o.value === id);\n\n    if (option) {\n      const ele = document.getElementById(id);\n      if (ele) {\n        scrollElement(\n          ele,\n          scrollEle.current,\n          option.offset || offset,\n          direction\n        );\n      }\n\n      if (href) {\n        window.history.pushState({}, \"\", `#${options[index].value}`);\n      }\n\n      setSelectedIndex(index);\n      wrappedOnChange?.(index);\n\n      // Safari scrolls immediately (no smooth scroll support),\n      // so this ref value must be updated asap\n      selectedIndexRef.current = index;\n    }\n  };\n\n  return [selectedIndex, setScrollTo];\n};\n"],"names":["useState","useRef","useEffect","verticalScrollOffset","useCallback","findFirstVisibleElement","isScrolledToTheBottom","getScrollTop","scrollElement"],"mappings":"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"}
+{"version":3,"file":"useScrollTo.cjs","sources":["../../../src/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToOption } from \"./types\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp: number = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks: boolean = false,\n  offset: number = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\"\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => void,\n  HvScrollToOptionWithLink[]\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    scrollEle.current =\n      (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange]\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (navigationMode !== \"none\") {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const baseUrl =\n    relativeLinks || window == null ? \"\" : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl]\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void\n    ) => {\n      const option = elements.find((o) => o.value === id);\n\n      if (option) {\n        const ele = document.getElementById(id);\n        if (ele) {\n          scrollElement(\n            ele,\n            scrollEle.current,\n            option.offset || offset,\n            direction\n          );\n        }\n\n        if (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\n        }\n\n        setSelectedIndex(index);\n        wrappedOnChange?.(index);\n\n        // Safari scrolls immediately (no smooth scroll support),\n        // so this ref value must be updated asap\n        selectedIndexRef.current = index;\n      }\n    },\n    [elements, navigationMode, direction, offset]\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":["useState","useRef","useEffect","verticalScrollOffset","useCallback","findFirstVisibleElement","isScrolledToTheBottom","getScrollTop","scrollElement","useMemo"],"mappings":"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"}

package/dist/cjs/ScrollTo/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      window.scrollY ||\n      window.pageYOffset ||\n      (document.documentElement && document.documentElement.scrollTop) ||\n      document.body.scrollTop\n    );\n  }\n\n  return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n  t: HTMLElement | (Window & typeof globalThis),\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n      (window.scrollY || window.pageYOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return (t as ExtendedWindow).offsetTop;\n  }\n\n  return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n  t: HTMLElement,\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      (t?.getBoundingClientRect?.().left || 0) +\n      (window.scrollX || window.pageXOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return t.offsetLeft;\n  }\n\n  return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n  element: HTMLElement,\n  container: HTMLElement | (Window & typeof globalThis),\n  offset: number = 0,\n  direction?: \"row\" | \"column\"\n) => {\n  if (direction === \"row\") {\n    const elemLeft = horizontalScrollOffset(element, container);\n    container?.scrollTo?.({\n      left: elemLeft - offset,\n      behavior: \"smooth\",\n    });\n  } else {\n    const elemTop = verticalScrollOffset(element, container);\n    container?.scrollTo?.({\n      top: elemTop - offset,\n      behavior: \"smooth\",\n    });\n  }\n  element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n  container: HTMLElement | (Window & typeof globalThis)\n) => {\n  const containerScrollTop = getScrollTop(container);\n\n  if (container === window) {\n    // Accounting for cases where html/body are set to height:100%\n    const scrollHeight =\n      (document.documentElement && document.documentElement.scrollHeight) ||\n      document.body.scrollHeight;\n\n    return containerScrollTop + window.innerHeight >= scrollHeight;\n  }\n\n  return (\n    containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n    (container as ExtendedWindow).scrollHeight\n  );\n};\n\nexport const findFirstVisibleElement = (\n  container: HTMLElement | (Window & typeof globalThis),\n  options: HvScrollToVerticalOption[],\n  offset: number\n) => {\n  const boundsTop = verticalScrollOffset(container);\n\n  let i = 0;\n\n  // Find index of first element whose top is still visible inside the container\n  for (; i < options.length; i += 1) {\n    const ele = document.getElementById(options[i].value);\n\n    if (ele) {\n      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n      if (elemTop > boundsTop) {\n        break;\n      }\n    }\n  }\n\n  // Return the previous index, the element that last scrolled past the top\n  return i - 1;\n};\n"],"names":[],"mappings":";;AAIa,MAAA,eAAe,CAC1B,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAEd,WAAA,OAAO,WACP,OAAO,eACN,SAAS,mBAAmB,SAAS,gBAAgB,aACtD,SAAS,KAAK;AAAA,EAElB;AAEA,SAAQ,EAAqB;AAC/B;AAEO,MAAM,uBAAuB,CAClC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACI,GAAsB,wBAAwB,EAAE,OAAO,MACxD,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAQ,EAAqB;AAAA,EAC/B;AAEQ,SAAA,EAAqB,YAAa,EAAqB;AACjE;AAEO,MAAM,yBAAyB,CACpC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACG,GAAG,wBAAwB,EAAE,QAAQ,MACrC,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAO,EAAE;AAAA,EACX;AAEO,SAAA,EAAE,aAAc,EAAqB;AAC9C;AAEO,MAAM,gBAAgB,CAC3B,SACA,WACA,SAAiB,GACjB,cACG;AACH,MAAI,cAAc,OAAO;AACjB,UAAA,WAAW,uBAAuB,SAAS,SAAS;AAC1D,eAAW,WAAW;AAAA,MACpB,MAAM,WAAW;AAAA,MACjB,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACC,UAAA,UAAU,qBAAqB,SAAS,SAAS;AACvD,eAAW,WAAW;AAAA,MACpB,KAAK,UAAU;AAAA,MACf,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACA,UAAQ,MAAM,EAAE,eAAe,KAAM,CAAA;AACvC;AAEa,MAAA,wBAAwB,CACnC,cACG;AACG,QAAA,qBAAqB,aAAa,SAAS;AAEjD,MAAI,cAAc,QAAQ;AAExB,UAAM,eACH,SAAS,mBAAmB,SAAS,gBAAgB,gBACtD,SAAS,KAAK;AAET,WAAA,qBAAqB,OAAO,eAAe;AAAA,EACpD;AAGE,SAAA,qBAAsB,UAA6B,gBAClD,UAA6B;AAElC;AAEO,MAAM,0BAA0B,CACrC,WACA,SACA,WACG;AACG,QAAA,YAAY,qBAAqB,SAAS;AAEhD,MAAI,IAAI;AAGR,SAAO,IAAI,QAAQ,QAAQ,KAAK,GAAG;AACjC,UAAM,MAAM,SAAS,eAAe,QAAQ,CAAC,EAAE,KAAK;AAEpD,QAAI,KAAK;AACP,YAAM,UAAU,qBAAqB,GAAG,KAAK,QAAQ,CAAC,EAAE,UAAU;AAElE,UAAI,UAAU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAO,IAAI;AACb;;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      window.scrollY ||\n      window.pageYOffset ||\n      (document.documentElement && document.documentElement.scrollTop) ||\n      document.body.scrollTop\n    );\n  }\n\n  return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n  t: HTMLElement | (Window & typeof globalThis),\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n      (window.scrollY || window.pageYOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return (t as ExtendedWindow).offsetTop;\n  }\n\n  return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n  t: HTMLElement,\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      (t?.getBoundingClientRect?.().left || 0) +\n      (window.scrollX || window.pageXOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return t.offsetLeft;\n  }\n\n  return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n  element: HTMLElement,\n  container: HTMLElement | (Window & typeof globalThis),\n  offset: number = 0,\n  direction?: \"row\" | \"column\"\n) => {\n  if (direction === \"row\") {\n    const elemLeft = horizontalScrollOffset(element, container);\n    container?.scrollTo?.({\n      left: elemLeft - offset,\n      behavior: \"smooth\",\n    });\n  } else {\n    const elemTop = verticalScrollOffset(element, container);\n    container?.scrollTo?.({\n      top: elemTop - offset,\n      behavior: \"smooth\",\n    });\n  }\n  element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n  container: HTMLElement | (Window & typeof globalThis)\n) => {\n  const containerScrollTop = getScrollTop(container);\n\n  if (container === window) {\n    // Accounting for cases where html/body are set to height:100%\n    const scrollHeight =\n      (document.documentElement && document.documentElement.scrollHeight) ||\n      document.body.scrollHeight;\n\n    return containerScrollTop + window.innerHeight >= scrollHeight;\n  }\n\n  return (\n    containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n    (container as ExtendedWindow).scrollHeight\n  );\n};\n\nexport const findFirstVisibleElement = (\n  container: HTMLElement | (Window & typeof globalThis),\n  options: HvScrollToOption[],\n  offset: number\n) => {\n  const boundsTop = verticalScrollOffset(container);\n\n  let i = 0;\n\n  // Find index of first element whose top is still visible inside the container\n  for (; i < options.length; i += 1) {\n    const ele = document.getElementById(options[i].value);\n\n    if (ele) {\n      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n      if (elemTop > boundsTop) {\n        break;\n      }\n    }\n  }\n\n  // Return the previous index, the element that last scrolled past the top\n  return i - 1;\n};\n"],"names":[],"mappings":";;AAIa,MAAA,eAAe,CAC1B,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAEd,WAAA,OAAO,WACP,OAAO,eACN,SAAS,mBAAmB,SAAS,gBAAgB,aACtD,SAAS,KAAK;AAAA,EAElB;AAEA,SAAQ,EAAqB;AAC/B;AAEO,MAAM,uBAAuB,CAClC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACI,GAAsB,wBAAwB,EAAE,OAAO,MACxD,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAQ,EAAqB;AAAA,EAC/B;AAEQ,SAAA,EAAqB,YAAa,EAAqB;AACjE;AAEO,MAAM,yBAAyB,CACpC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACG,GAAG,wBAAwB,EAAE,QAAQ,MACrC,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAO,EAAE;AAAA,EACX;AAEO,SAAA,EAAE,aAAc,EAAqB;AAC9C;AAEO,MAAM,gBAAgB,CAC3B,SACA,WACA,SAAiB,GACjB,cACG;AACH,MAAI,cAAc,OAAO;AACjB,UAAA,WAAW,uBAAuB,SAAS,SAAS;AAC1D,eAAW,WAAW;AAAA,MACpB,MAAM,WAAW;AAAA,MACjB,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACC,UAAA,UAAU,qBAAqB,SAAS,SAAS;AACvD,eAAW,WAAW;AAAA,MACpB,KAAK,UAAU;AAAA,MACf,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACA,UAAQ,MAAM,EAAE,eAAe,KAAM,CAAA;AACvC;AAEa,MAAA,wBAAwB,CACnC,cACG;AACG,QAAA,qBAAqB,aAAa,SAAS;AAEjD,MAAI,cAAc,QAAQ;AAExB,UAAM,eACH,SAAS,mBAAmB,SAAS,gBAAgB,gBACtD,SAAS,KAAK;AAET,WAAA,qBAAqB,OAAO,eAAe;AAAA,EACpD;AAGE,SAAA,qBAAsB,UAA6B,gBAClD,UAA6B;AAElC;AAEO,MAAM,0BAA0B,CACrC,WACA,SACA,WACG;AACG,QAAA,YAAY,qBAAqB,SAAS;AAEhD,MAAI,IAAI;AAGR,SAAO,IAAI,QAAQ,QAAQ,KAAK,GAAG;AACjC,UAAM,MAAM,SAAS,eAAe,QAAQ,CAAC,EAAE,KAAK;AAEpD,QAAI,KAAK;AACP,YAAM,UAAU,qBAAqB,GAAG,KAAK,QAAQ,CAAC,EAAE,UAAU;AAElE,UAAI,UAAU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAO,IAAI;AACb;;;;;;;"}

package/dist/cjs/index.cjs

@@ -215,7 +215,6 @@ const ScrollToVertical = require("./ScrollTo/Vertical/ScrollToVertical.cjs");
 const HorizontalScrollListItem_styles = require("./ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs");
 const ScrollToHorizontal_styles = require("./ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs");
 const ScrollToHorizontal = require("./ScrollTo/Horizontal/ScrollToHorizontal.cjs");
-const useScrollTo = require("./ScrollTo/useScrollTo.cjs");
 const Section_styles = require("./Section/Section.styles.cjs");
 const Section = require("./Section/Section.cjs");
 const SimpleGrid_styles = require("./SimpleGrid/SimpleGrid.styles.cjs");
@@ -565,7 +564,6 @@ exports.HvScrollToVertical = ScrollToVertical.HvScrollToVertical;
 exports.horizontalScrollListItemClasses = HorizontalScrollListItem_styles.staticClasses;
 exports.scrollToHorizontalClasses = ScrollToHorizontal_styles.staticClasses;
 exports.HvScrollToHorizontal = ScrollToHorizontal.HvScrollToHorizontal;
-exports.useScrollTo = useScrollTo.useScrollTo;
 exports.sectionClasses = Section_styles.staticClasses;
 exports.HvSection = Section.HvSection;
 exports.simpleGridClasses = SimpleGrid_styles.staticClasses;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -13,6 +13,7 @@ const HvHorizontalScrollListItem = (props) => {
     onClick,
     onKeyDown,
     tooltipWrapper,
+    href,
     ...others
   } = useDefaultProps("HvHorizontalScrollListItem", props);
   const { classes, cx } = useClasses(classesProp);
@@ -20,16 +21,18 @@ const HvHorizontalScrollListItem = (props) => {
   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(
-    "div",
+    Component,
     {
       id: buttonId,
-      role: "button",
+      role: href == null ? "button" : void 0,
       tabIndex: 0,
       onClick,
       onKeyDown,
       className: classes.button,
       "aria-labelledby": labelId,
+      href,
       ...others,
       children: /* @__PURE__ */ jsx(
         Tooltip,

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 { HvBaseProps } from \"../../../types/generic\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\nimport { HvTypographyProps } from \"../../../Typography\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\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?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    children,\n    onClick,\n    onKeyDown,\n    tooltipWrapper,\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  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-labelledby={labelId}\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      </div>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;AAoCa,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,UAAU,WAAW,UAAU;AAC/B,QAAA,UAAU,MAAM,IAAI,OAAO;AAC3B,QAAA,WAAW,MAAM,IAAI,QAAQ;AACnC,QAAM,UAAU;AAGd,SAAA,oBAAC,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,mBAAiB;AAAA,MAChB,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 { HvBaseProps } from \"../../../types/generic\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\nimport { HvTypographyProps } from \"../../../Typography\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\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":";;;;;AAgDa,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;"}

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

@@ -20,6 +20,8 @@ const HvScrollToHorizontal = (props) => {
     defaultSelectedIndex = 0,
     scrollElementId,
     href = true,
+    navigationMode = href ? "push" : "none",
+    relativeLinks = false,
     onChange,
     onClick,
     onEnter,
@@ -37,10 +39,11 @@ const HvScrollToHorizontal = (props) => {
   const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
   const { activeTheme } = useTheme$1();
   const elementId = useUniqueId(id, "hvHorizontalScrollto");
-  const [selectedIndex, setScrollTo] = useScrollTo(
+  const [selectedIndex, setScrollTo, elements] = useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
-    href,
+    navigationMode,
+    relativeLinks,
     offset,
     options,
     onChange
@@ -70,7 +73,7 @@ const HvScrollToHorizontal = (props) => {
       }
     );
   }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);
-  const tabs = options.map((option, index) => {
+  const tabs = elements.map((option, index) => {
     const selected = selectedIndex === index;
     const tooltipWrapper = tooltipWrappers[index];
     return /* @__PURE__ */ jsxs(
@@ -78,15 +81,22 @@ const HvScrollToHorizontal = (props) => {
       {
         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: [

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 { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\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  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: 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>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => 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    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, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\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 = options.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          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\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 { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\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, \"hvHorizontalScrollto\");\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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"}

package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js

@@ -13,6 +13,8 @@ const HvScrollToVertical = (props) => {
     defaultSelectedIndex = 0,
     scrollElementId,
     href = true,
+    navigationMode = href ? "push" : "none",
+    relativeLinks = false,
     onChange,
     onClick,
     onEnter,
@@ -27,10 +29,11 @@ const HvScrollToVertical = (props) => {
   } = useDefaultProps("HvScrollToVertical", props);
   const { classes, cx } = useClasses(classesProp);
   const elementId = useUniqueId(id, "hvVerticalScrollto");
-  const [selectedIndex, setScrollTo] = useScrollTo(
+  const [selectedIndex, setScrollTo, elements] = useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
-    href,
+    navigationMode,
+    relativeLinks,
     offset,
     options,
     onChange
@@ -42,20 +45,27 @@ const HvScrollToVertical = (props) => {
     };
     setScrollTo(event, value, index, wrappedOnChange);
   };
-  const tabs = options.map((option, index) => /* @__PURE__ */ jsx(
+  const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(
     HvVerticalScrollListItem,
     {
       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,
       tooltipPlacement: tooltipPosition,
       selected: selectedIndex === index,
       label: option.label

package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.js","sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\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: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: 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 Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\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>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\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 tabs = options.map((option, index) => (\n    <HvVerticalScrollListItem\n      id={setId(elementId, `item-${index}`)}\n      onClick={(event) => {\n        handleSelection(event, option.value, index);\n        onClick?.(event, index);\n      }}\n      onKeyDown={(event) => {\n        if (isKey(event, \"Enter\") === true) {\n          handleSelection(event, option.value, index);\n          onEnter?.(event, index);\n        }\n      }}\n      tooltipPlacement={tooltipPosition}\n      selected={selectedIndex === index}\n      key={option.key || option.label}\n      label={option.label}\n    />\n  ));\n\n  const positionOffset = calculateOffset(options.length);\n\n  return (\n    <ol\n      className={cx(\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqEa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,IAAI,oBAAoB;AAEhD,QAAA,CAAC,eAAe,WAAW,IAAI;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,kBAAkB,CACtB,OAGA,OACA,UACG;AACH,UAAM,eAAe;AAErB,UAAM,kBAAkB,MAAM;AAC5B,iBAAW,OAAO,KAAK;AAAA,IAAA;AAGb,gBAAA,OAAO,OAAO,OAAO,eAAe;AAAA,EAAA;AAGlD,QAAM,OAAO,QAAQ,IAAI,CAAC,QAAQ,UAChC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,WAAW,QAAQ,KAAK,EAAE;AAAA,MACpC,SAAS,CAAC,UAAU;AACF,wBAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,OAAO,OAAO,MAAM,MAAM;AAClB,0BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,oBAAU,OAAO,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiB,gBAAgB,QAAQ,MAAM;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"ScrollToVertical.js","sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\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 Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\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?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\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 = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\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 tabs = elements.map((option, index) => (\n    <HvVerticalScrollListItem\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      tooltipPlacement={tooltipPosition}\n      selected={selectedIndex === index}\n      key={option.key || option.label}\n      label={option.label}\n    />\n  ));\n\n  const positionOffset = calculateOffset(options.length);\n\n  return (\n    <ol\n      className={cx(\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwGa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,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;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,IAAI,oBAAoB;AAEtD,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,kBAAkB,CACtB,OAGA,OACA,UACG;AACH,UAAM,eAAe;AAErB,UAAM,kBAAkB,MAAM;AAC5B,iBAAW,OAAO,KAAK;AAAA,IAAA;AAGb,gBAAA,OAAO,OAAO,OAAO,eAAe;AAAA,EAAA;AAGlD,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UACjC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,WAAW,QAAQ,KAAK,EAAE;AAAA,MACpC,SAAS,CAAC,UAAU;AAClB,YAAI,mBAAmB,QAAQ;AAC7B,gBAAM,eAAe;AAAA,QACvB;AAEgB,wBAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,OAAO,OAAO,MAAM,MAAM;AAClC,cAAI,mBAAmB,QAAQ;AAC7B,kBAAM,eAAe;AAAA,UACvB;AAEgB,0BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,oBAAU,OAAO,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,MAChD,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiB,gBAAgB,QAAQ,MAAM;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js

@@ -15,6 +15,7 @@ const HvVerticalScrollListItem = (props) => {
     onClick,
     onKeyDown,
     tooltipPlacement = "left",
+    href,
     ...others
   } = useDefaultProps("HvVerticalScrollListItem", props);
   const { classes, cx } = useClasses(classesProp);
@@ -26,14 +27,16 @@ const HvVerticalScrollListItem = (props) => {
       width: activeTheme?.scrollTo.dotSelectedSize
     }
   ) : /* @__PURE__ */ jsx("div", { className: classes.notSelected });
+  const Component = href != null ? "a" : "div";
   return /* @__PURE__ */ jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsx(HvTooltip, { title: label, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
-    "div",
+    Component,
     {
-      role: "button",
+      role: href == null ? "button" : void 0,
       tabIndex: 0,
       onClick,
       onKeyDown,
       className: cx(classes.button, classes.text),
+      href,
       ...others,
       children: icon
     }

package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"../../../Tooltip\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { useTheme } from \"../../../hooks/useTheme\";\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps\n  extends HvBaseProps<HTMLDivElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  label?: React.ReactNode;\n  tooltipPlacement?: HvTooltipProps[\"placement\"];\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    label,\n    onClick,\n    onKeyDown,\n    tooltipPlacement = \"left\",\n    ...others\n  } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={classes.notSelected} />\n  );\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <HvTooltip title={label} placement={tooltipPlacement}>\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          className={cx(classes.button, classes.text)}\n          {...others}\n        >\n          {icon}\n        </div>\n      </HvTooltip>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA2Ba,MAAA,2BAA2B,CACtC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAExB,QAAM,OAAO,WACX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,aAAa,SAAS;AAAA,MAC9B,OAAO,aAAa,SAAS;AAAA,IAAA;AAAA,EAAA,IAG/B,oBAAC,OAAI,EAAA,WAAW,QAAQ,YAAa,CAAA;AAGvC,6BACG,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAC,oBAAA,WAAA,EAAU,OAAO,OAAO,WAAW,kBAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI;AAAA,MACzC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA,EAEL,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"../../../Tooltip\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { useTheme } from \"../../../hooks/useTheme\";\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps\n  extends HvBaseProps<HTMLDivElement | HTMLAnchorElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\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  label?: React.ReactNode;\n  tooltipPlacement?: HvTooltipProps[\"placement\"];\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 * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    label,\n    onClick,\n    onKeyDown,\n    tooltipPlacement = \"left\",\n    href,\n    ...others\n  } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={classes.notSelected} />\n  );\n\n  const Component = href != null ? \"a\" : \"div\";\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <HvTooltip title={label} placement={tooltipPlacement}>\n        <Component\n          role={href == null ? \"button\" : undefined}\n          tabIndex={0}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          className={cx(classes.button, classes.text)}\n          href={href}\n          {...others}\n        >\n          {icon}\n        </Component>\n      </HvTooltip>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0Ca,MAAA,2BAA2B,CACtC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAExB,QAAM,OAAO,WACX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,aAAa,SAAS;AAAA,MAC9B,OAAO,aAAa,SAAS;AAAA,IAAA;AAAA,EAAA,IAG/B,oBAAC,OAAI,EAAA,WAAW,QAAQ,YAAa,CAAA;AAGjC,QAAA,YAAY,QAAQ,OAAO,MAAM;AAEvC,6BACG,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAC,oBAAA,WAAA,EAAU,OAAO,OAAO,WAAW,kBAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,QAAQ,OAAO,WAAW;AAAA,MAChC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI;AAAA,MAC1C;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA,EAEL,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/ScrollTo/useScrollTo.js

@@ -1,6 +1,6 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { verticalScrollOffset, findFirstVisibleElement, isScrolledToTheBottom, getScrollTop, scrollElement } from "./utils.js";
-const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
+const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigationMode = "push", relativeLinks = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
   const RETRY_MAX = 5;
   const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
   const scrollEle = useRef(window);
@@ -64,7 +64,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
   }, [checkScroll]);
   useEffect(() => {
     let checkRenderedInterval;
-    if (href) {
+    if (navigationMode !== "none") {
       const hashValue = document.location.hash.split("#")[1] || "";
       const option = options.find((o) => o.value === hashValue);
       if (option) {
@@ -87,27 +87,40 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
       clearInterval(checkRenderedInterval);
     };
   }, []);
-  const setScrollTo = (event, id, index, wrappedOnChange) => {
-    const option = options.find((o) => o.value === id);
-    if (option) {
-      const ele = document.getElementById(id);
-      if (ele) {
-        scrollElement(
-          ele,
-          scrollEle.current,
-          option.offset || offset,
-          direction
-        );
-      }
-      if (href) {
-        window.history.pushState({}, "", `#${options[index].value}`);
+  const baseUrl = relativeLinks || window == null ? "" : window.location.href.split("#")[0];
+  const elements = useMemo(
+    () => options.map((o) => ({
+      ...o,
+      href: `${baseUrl}#${o.value}`
+    })),
+    [options, baseUrl]
+  );
+  const setScrollTo = useCallback(
+    (event, id, index, wrappedOnChange) => {
+      const option = elements.find((o) => o.value === id);
+      if (option) {
+        const ele = document.getElementById(id);
+        if (ele) {
+          scrollElement(
+            ele,
+            scrollEle.current,
+            option.offset || offset,
+            direction
+          );
+        }
+        if (navigationMode === "push") {
+          window.history.pushState({}, "", option.href);
+        } else if (navigationMode === "replace") {
+          window.history.replaceState({}, "", option.href);
+        }
+        setSelectedIndex(index);
+        wrappedOnChange?.(index);
+        selectedIndexRef.current = index;
       }
-      setSelectedIndex(index);
-      wrappedOnChange?.(index);
-      selectedIndexRef.current = index;
-    }
-  };
-  return [selectedIndex, setScrollTo];
+    },
+    [elements, navigationMode, direction, offset]
+  );
+  return [selectedIndex, setScrollTo, elements];
 };
 export {
   useScrollTo

package/dist/esm/ScrollTo/useScrollTo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.js","sources":["../../../src/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n  selectedIndexProp: number = 0,\n  scrollElementId: string | undefined = undefined,\n  href: boolean = false,\n  offset: number = 0,\n  options: HvScrollToVerticalOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement>\n          | React.KeyboardEvent<HTMLDivElement>,\n        index: number\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\"\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => void\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    scrollEle.current =\n      (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange]\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (href) {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const setScrollTo = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => {\n    const option = options.find((o) => o.value === id);\n\n    if (option) {\n      const ele = document.getElementById(id);\n      if (ele) {\n        scrollElement(\n          ele,\n          scrollEle.current,\n          option.offset || offset,\n          direction\n        );\n      }\n\n      if (href) {\n        window.history.pushState({}, \"\", `#${options[index].value}`);\n      }\n\n      setSelectedIndex(index);\n      wrappedOnChange?.(index);\n\n      // Safari scrolls immediately (no smooth scroll support),\n      // so this ref value must be updated asap\n      selectedIndexRef.current = index;\n    }\n  };\n\n  return [selectedIndex, setScrollTo];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useScrollTo.js","sources":["../../../src/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToOption } from \"./types\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp: number = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks: boolean = false,\n  offset: number = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\"\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void\n  ) => void,\n  HvScrollToOptionWithLink[]\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    scrollEle.current =\n      (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange]\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (navigationMode !== \"none\") {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const baseUrl =\n    relativeLinks || window == null ? \"\" : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl]\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void\n    ) => {\n      const option = elements.find((o) => o.value === id);\n\n      if (option) {\n        const ele = document.getElementById(id);\n        if (ele) {\n          scrollElement(\n            ele,\n            scrollEle.current,\n            option.offset || offset,\n            direction\n          );\n        }\n\n        if (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\n        }\n\n        setSelectedIndex(index);\n        wrappedOnChange?.(index);\n\n        // Safari scrolls immediately (no smooth scroll support),\n        // so this ref value must be updated asap\n        selectedIndexRef.current = index;\n      }\n    },\n    [elements, navigationMode, direction, offset]\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/ScrollTo/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      window.scrollY ||\n      window.pageYOffset ||\n      (document.documentElement && document.documentElement.scrollTop) ||\n      document.body.scrollTop\n    );\n  }\n\n  return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n  t: HTMLElement | (Window & typeof globalThis),\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n      (window.scrollY || window.pageYOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return (t as ExtendedWindow).offsetTop;\n  }\n\n  return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n  t: HTMLElement,\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      (t?.getBoundingClientRect?.().left || 0) +\n      (window.scrollX || window.pageXOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return t.offsetLeft;\n  }\n\n  return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n  element: HTMLElement,\n  container: HTMLElement | (Window & typeof globalThis),\n  offset: number = 0,\n  direction?: \"row\" | \"column\"\n) => {\n  if (direction === \"row\") {\n    const elemLeft = horizontalScrollOffset(element, container);\n    container?.scrollTo?.({\n      left: elemLeft - offset,\n      behavior: \"smooth\",\n    });\n  } else {\n    const elemTop = verticalScrollOffset(element, container);\n    container?.scrollTo?.({\n      top: elemTop - offset,\n      behavior: \"smooth\",\n    });\n  }\n  element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n  container: HTMLElement | (Window & typeof globalThis)\n) => {\n  const containerScrollTop = getScrollTop(container);\n\n  if (container === window) {\n    // Accounting for cases where html/body are set to height:100%\n    const scrollHeight =\n      (document.documentElement && document.documentElement.scrollHeight) ||\n      document.body.scrollHeight;\n\n    return containerScrollTop + window.innerHeight >= scrollHeight;\n  }\n\n  return (\n    containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n    (container as ExtendedWindow).scrollHeight\n  );\n};\n\nexport const findFirstVisibleElement = (\n  container: HTMLElement | (Window & typeof globalThis),\n  options: HvScrollToVerticalOption[],\n  offset: number\n) => {\n  const boundsTop = verticalScrollOffset(container);\n\n  let i = 0;\n\n  // Find index of first element whose top is still visible inside the container\n  for (; i < options.length; i += 1) {\n    const ele = document.getElementById(options[i].value);\n\n    if (ele) {\n      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n      if (elemTop > boundsTop) {\n        break;\n      }\n    }\n  }\n\n  // Return the previous index, the element that last scrolled past the top\n  return i - 1;\n};\n"],"names":[],"mappings":"AAIa,MAAA,eAAe,CAC1B,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAEd,WAAA,OAAO,WACP,OAAO,eACN,SAAS,mBAAmB,SAAS,gBAAgB,aACtD,SAAS,KAAK;AAAA,EAElB;AAEA,SAAQ,EAAqB;AAC/B;AAEO,MAAM,uBAAuB,CAClC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACI,GAAsB,wBAAwB,EAAE,OAAO,MACxD,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAQ,EAAqB;AAAA,EAC/B;AAEQ,SAAA,EAAqB,YAAa,EAAqB;AACjE;AAEO,MAAM,yBAAyB,CACpC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACG,GAAG,wBAAwB,EAAE,QAAQ,MACrC,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAO,EAAE;AAAA,EACX;AAEO,SAAA,EAAE,aAAc,EAAqB;AAC9C;AAEO,MAAM,gBAAgB,CAC3B,SACA,WACA,SAAiB,GACjB,cACG;AACH,MAAI,cAAc,OAAO;AACjB,UAAA,WAAW,uBAAuB,SAAS,SAAS;AAC1D,eAAW,WAAW;AAAA,MACpB,MAAM,WAAW;AAAA,MACjB,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACC,UAAA,UAAU,qBAAqB,SAAS,SAAS;AACvD,eAAW,WAAW;AAAA,MACpB,KAAK,UAAU;AAAA,MACf,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACA,UAAQ,MAAM,EAAE,eAAe,KAAM,CAAA;AACvC;AAEa,MAAA,wBAAwB,CACnC,cACG;AACG,QAAA,qBAAqB,aAAa,SAAS;AAEjD,MAAI,cAAc,QAAQ;AAExB,UAAM,eACH,SAAS,mBAAmB,SAAS,gBAAgB,gBACtD,SAAS,KAAK;AAET,WAAA,qBAAqB,OAAO,eAAe;AAAA,EACpD;AAGE,SAAA,qBAAsB,UAA6B,gBAClD,UAA6B;AAElC;AAEO,MAAM,0BAA0B,CACrC,WACA,SACA,WACG;AACG,QAAA,YAAY,qBAAqB,SAAS;AAEhD,MAAI,IAAI;AAGR,SAAO,IAAI,QAAQ,QAAQ,KAAK,GAAG;AACjC,UAAM,MAAM,SAAS,eAAe,QAAQ,CAAC,EAAE,KAAK;AAEpD,QAAI,KAAK;AACP,YAAM,UAAU,qBAAqB,GAAG,KAAK,QAAQ,CAAC,EAAE,UAAU;AAElE,UAAI,UAAU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAO,IAAI;AACb;"}
+{"version":3,"file":"utils.js","sources":["../../../src/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      window.scrollY ||\n      window.pageYOffset ||\n      (document.documentElement && document.documentElement.scrollTop) ||\n      document.body.scrollTop\n    );\n  }\n\n  return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n  t: HTMLElement | (Window & typeof globalThis),\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n      (window.scrollY || window.pageYOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return (t as ExtendedWindow).offsetTop;\n  }\n\n  return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n  t: HTMLElement,\n  c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n  if (c === window) {\n    return (\n      (t?.getBoundingClientRect?.().left || 0) +\n      (window.scrollX || window.pageXOffset)\n    );\n  }\n  if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n    return t.offsetLeft;\n  }\n\n  return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n  element: HTMLElement,\n  container: HTMLElement | (Window & typeof globalThis),\n  offset: number = 0,\n  direction?: \"row\" | \"column\"\n) => {\n  if (direction === \"row\") {\n    const elemLeft = horizontalScrollOffset(element, container);\n    container?.scrollTo?.({\n      left: elemLeft - offset,\n      behavior: \"smooth\",\n    });\n  } else {\n    const elemTop = verticalScrollOffset(element, container);\n    container?.scrollTo?.({\n      top: elemTop - offset,\n      behavior: \"smooth\",\n    });\n  }\n  element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n  container: HTMLElement | (Window & typeof globalThis)\n) => {\n  const containerScrollTop = getScrollTop(container);\n\n  if (container === window) {\n    // Accounting for cases where html/body are set to height:100%\n    const scrollHeight =\n      (document.documentElement && document.documentElement.scrollHeight) ||\n      document.body.scrollHeight;\n\n    return containerScrollTop + window.innerHeight >= scrollHeight;\n  }\n\n  return (\n    containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n    (container as ExtendedWindow).scrollHeight\n  );\n};\n\nexport const findFirstVisibleElement = (\n  container: HTMLElement | (Window & typeof globalThis),\n  options: HvScrollToOption[],\n  offset: number\n) => {\n  const boundsTop = verticalScrollOffset(container);\n\n  let i = 0;\n\n  // Find index of first element whose top is still visible inside the container\n  for (; i < options.length; i += 1) {\n    const ele = document.getElementById(options[i].value);\n\n    if (ele) {\n      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n      if (elemTop > boundsTop) {\n        break;\n      }\n    }\n  }\n\n  // Return the previous index, the element that last scrolled past the top\n  return i - 1;\n};\n"],"names":[],"mappings":"AAIa,MAAA,eAAe,CAC1B,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAEd,WAAA,OAAO,WACP,OAAO,eACN,SAAS,mBAAmB,SAAS,gBAAgB,aACtD,SAAS,KAAK;AAAA,EAElB;AAEA,SAAQ,EAAqB;AAC/B;AAEO,MAAM,uBAAuB,CAClC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACI,GAAsB,wBAAwB,EAAE,OAAO,MACxD,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAQ,EAAqB;AAAA,EAC/B;AAEQ,SAAA,EAAqB,YAAa,EAAqB;AACjE;AAEO,MAAM,yBAAyB,CACpC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACG,GAAG,wBAAwB,EAAE,QAAQ,MACrC,OAAO,WAAW,OAAO;AAAA,EAE9B;AACA,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAO,EAAE;AAAA,EACX;AAEO,SAAA,EAAE,aAAc,EAAqB;AAC9C;AAEO,MAAM,gBAAgB,CAC3B,SACA,WACA,SAAiB,GACjB,cACG;AACH,MAAI,cAAc,OAAO;AACjB,UAAA,WAAW,uBAAuB,SAAS,SAAS;AAC1D,eAAW,WAAW;AAAA,MACpB,MAAM,WAAW;AAAA,MACjB,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACC,UAAA,UAAU,qBAAqB,SAAS,SAAS;AACvD,eAAW,WAAW;AAAA,MACpB,KAAK,UAAU;AAAA,MACf,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACA,UAAQ,MAAM,EAAE,eAAe,KAAM,CAAA;AACvC;AAEa,MAAA,wBAAwB,CACnC,cACG;AACG,QAAA,qBAAqB,aAAa,SAAS;AAEjD,MAAI,cAAc,QAAQ;AAExB,UAAM,eACH,SAAS,mBAAmB,SAAS,gBAAgB,gBACtD,SAAS,KAAK;AAET,WAAA,qBAAqB,OAAO,eAAe;AAAA,EACpD;AAGE,SAAA,qBAAsB,UAA6B,gBAClD,UAA6B;AAElC;AAEO,MAAM,0BAA0B,CACrC,WACA,SACA,WACG;AACG,QAAA,YAAY,qBAAqB,SAAS;AAEhD,MAAI,IAAI;AAGR,SAAO,IAAI,QAAQ,QAAQ,KAAK,GAAG;AACjC,UAAM,MAAM,SAAS,eAAe,QAAQ,CAAC,EAAE,KAAK;AAEpD,QAAI,KAAK;AACP,YAAM,UAAU,qBAAqB,GAAG,KAAK,QAAQ,CAAC,EAAE,UAAU;AAElE,UAAI,UAAU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAO,IAAI;AACb;"}

package/dist/esm/index.js

@@ -213,7 +213,6 @@ import { HvScrollToVertical } from "./ScrollTo/Vertical/ScrollToVertical.js";
 import { staticClasses as staticClasses82 } from "./ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js";
 import { staticClasses as staticClasses83 } from "./ScrollTo/Horizontal/ScrollToHorizontal.styles.js";
 import { HvScrollToHorizontal } from "./ScrollTo/Horizontal/ScrollToHorizontal.js";
-import { useScrollTo } from "./ScrollTo/useScrollTo.js";
 import { staticClasses as staticClasses84 } from "./Section/Section.styles.js";
 import { HvSection } from "./Section/Section.js";
 import { staticClasses as staticClasses85 } from "./SimpleGrid/SimpleGrid.styles.js";
@@ -657,7 +656,6 @@ export {
   useLabels,
   useQueryBuilderContext,
   useSavedState,
-  useScrollTo,
   useSelectionPath,
   useTheme,
   useUniqueId,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -5407,8 +5407,37 @@ export declare type HvScrollToHorizontalPositions = "sticky" | "fixed" | "relati
 export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOListElement, "onChange" | "onClick"> {
     /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
     options: HvScrollToHorizontalOption[];
-    /** True if the href location link should be applied. It will create an a element around every list item */
+    /**
+     * Should the active element be reflected in the URL.
+     *
+     * @default true
+     *
+     * @deprecated Use `navigationMode` instead.
+     * */
     href?: boolean;
+    /**
+     * The navigation mode to be used when the user clicks on a tab element.
+     * - `push` will add a new entry to the history stack.
+     * - `replace` will replace the current entry on the history stack.
+     * - `none` will not add any entry to the history stack.
+     *
+     * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.
+     *
+     * When set to `none`, then each element will render a button instead of a link.
+     *
+     * @default "push"
+     */
+    navigationMode?: "push" | "replace" | "none";
+    /**
+     * When set to `true`, the generated links will be relative (e.g. `#section`).
+     * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).
+     * This can lead to unexpected behavior.
+     *
+     * 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`).
+     *
+     * @default false
+     */
+    relativeLinks?: boolean;
     /** Default selected index passed from the parent. */
     defaultSelectedIndex?: number;
     /**
@@ -5430,15 +5459,22 @@ export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOList
     /** Position of tooltip identifying the current item. */
     tooltipPosition?: HvScrollToTooltipPositions;
     /** A function called each time the selected index changes. */
-    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user clicks on a tab element. */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user press enter on a tab element. */
-    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvScrollToHorizontalClasses;
 }
 
+export declare interface HvScrollToOption {
+    key?: string;
+    label: string;
+    value: string;
+    offset?: number;
+}
+
 export declare type HvScrollToTooltipPositions = "left" | "right" | "top" | "bottom";
 
 /**
@@ -5448,20 +5484,44 @@ export declare const HvScrollToVertical: (props: HvScrollToVerticalProps) => JSX
 
 export declare type HvScrollToVerticalClasses = ExtractNames<typeof useClasses_92>;
 
-export declare interface HvScrollToVerticalOption {
-    key?: string;
-    label: string;
-    value: string;
-    offset?: number;
-}
+export declare type HvScrollToVerticalOption = HvScrollToOption;
 
 export declare type HvScrollToVerticalPositions = "absolute" | "fixed" | "relative";
 
 export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListElement, "onChange" | "onClick"> {
     /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
-    options: HvScrollToVerticalOption[];
-    /** True if the href location link should be applied. It will create an a element around every list item */
+    options: HvScrollToOption[];
+    /**
+     * Should the active element be reflected in the URL.
+     *
+     * @default true
+     *
+     * @deprecated Use `navigationMode` instead.
+     * */
     href?: boolean;
+    /**
+     * The navigation mode to be used when the user clicks on a tab element.
+     * - `push` will add a new entry to the history stack.
+     * - `replace` will replace the current entry on the history stack.
+     * - `none` will not add any entry to the history stack.
+     *
+     * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.
+     *
+     * When set to `none`, then each element will render a button instead of a link.
+     *
+     * @default "push"
+     */
+    navigationMode?: "push" | "replace" | "none";
+    /**
+     * When set to `true`, the generated links will be relative (e.g. `#section`).
+     * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).
+     * This can lead to unexpected behavior.
+     *
+     * 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`).
+     *
+     * @default false
+     */
+    relativeLinks?: boolean;
     /** Default selected index passed from the parent. */
     defaultSelectedIndex?: number;
     /**
@@ -5483,11 +5543,11 @@ export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListEl
     /** Position of tooltip identifying the current item. */
     tooltipPosition?: HvScrollToTooltipPositions;
     /** A function called each time the selected index changes. */
-    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user clicks on a tab element. */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user press enter on a tab element. */
-    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvScrollToVerticalClasses;
 }
@@ -10878,8 +10938,6 @@ export declare type UseRowSelectionProps = (<D extends object = Record<string, u
 
 export declare function useSavedState<T>(defaultState: T): readonly [T | undefined, (value?: T, save?: boolean) => void, () => void, T | undefined, T];
 
-export declare const useScrollTo: (selectedIndexProp?: number, scrollElementId?: string | undefined, href?: boolean, offset?: number, options?: HvScrollToVerticalOption[], onChange?: ((event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void) | undefined, direction?: "column" | "row") => [number, (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, id: string, index: number, wrappedOnChange?: ((index: number) => void) | undefined) => void];
-
 export declare const useSelectionPath: (data: HvHeaderNavigationItemProp[], selectedId?: string) => string[];
 
 export declare type UseTableStylesProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.49.0",
+  "version": "5.50.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -63,7 +63,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d55ec32afc4167738c8a24100d8a0bcd2fece0e8",
+  "gitHead": "092a81afd5d37df417f5f0b56edef95ef48e09d9",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {