@hitachivantara/uikit-react-core/dist/esm/ScrollToVertical/ScrollToVertical.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useScrollTo } from "../hooks/useScrollTo.js";
import { isKey } from "../utils/keyboardUtils.js";
import { setId } from "../utils/setId.js";
import { useClasses, calculateOffset } from "./ScrollToVertical.styles.js";
import { staticClasses } from "./ScrollToVertical.styles.js";
import { HvVerticalScrollListItem } from "./VerticalScrollListItem/VerticalScrollListItem.js";
const HvScrollToVertical = (props) => {
  const {
    id,
    defaultSelectedIndex = 0,
    scrollElementId,
    // @ts-ignore
    href = true,
    navigationMode = href ? "push" : "none",
    relativeLinks = false,
    onChange,
    onClick,
    onEnter,
    className,
    classes: classesProp,
    options,
    offset = 0,
    position = "relative",
    tooltipPosition = "left",
    style,
    ...others
  } = useDefaultProps("HvScrollToVertical", props);
  const { classes, cx } = useClasses(classesProp);
  const [selectedIndex, setScrollTo, elements] = useScrollTo(
    defaultSelectedIndex,
    scrollElementId,
    navigationMode,
    relativeLinks,
    offset,
    options,
    onChange
  );
  const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(
    HvVerticalScrollListItem,
    {
      id: setId(id, `item-${index}`),
      onClick: (event) => {
        event.preventDefault();
        setScrollTo(event, option.value, index, () => onChange?.(event, index));
        onClick?.(event, index);
      },
      onKeyDown: (event) => {
        if (isKey(event, "Enter") !== true) return;
        event.preventDefault();
        setScrollTo(event, option.value, index, () => onChange?.(event, index));
        onEnter?.(event, index);
      },
      href: navigationMode !== "none" ? option.href : void 0,
      tooltipPlacement: tooltipPosition,
      selected: selectedIndex === index,
      label: option.label
    },
    option.key || option.label
  ));
  const positionOffset = calculateOffset(options.length);
  return /* @__PURE__ */ jsx(
    "ol",
    {
      className: cx(
        classes.root,
        {
          [classes.positionFixed]: position === "fixed",
          [classes.positionAbsolute]: position === "absolute"
        },
        className
      ),
      style: { top: `calc(50% - ${positionOffset}px)`, ...style },
      id,
      ...others,
      children: tabs
    }
  );
};
export {
  HvScrollToVertical,
  staticClasses as scrollToVerticalClasses
};