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

UI Kit Core React components.

import { isKey } from "../utils/keyboardUtils.js";
import { useScrollTo } from "../hooks/useScrollTo.js";
import { calculateOffset, useClasses } from "./ScrollToVertical.styles.js";
import { HvVerticalScrollListItem } from "./VerticalScrollListItem/VerticalScrollListItem.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { jsx } from "react/jsx-runtime";
//#region src/ScrollToVertical/ScrollToVertical.tsx
/**
* The vertical scroll to element can be used to quickly navigate in a page.
*/
var HvScrollToVertical = (props) => {
	const { id, defaultSelectedIndex = 0, scrollElementId, navigationMode = "push", 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, {
		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
	});
};
//#endregion
export { HvScrollToVertical };