@scrolia/react/dist/components/thumb/y.mjs

A headless scrollbar component

"use client";


import { useScrollCore } from "../../contexts/scrollcore.mjs";
import { getComponentProps } from "../../functions/props.mjs";
import { useThumbYHandler } from "../../hooks/thumb.mjs";
import * as React from "react";
import { jsx } from "react/jsx-runtime";

/** Vertical thumb component. */
const ThumbY = (props) => {
	const { options: { plugins }, y: { setHvThumb, scrollbarLength, scrollbarOffset } } = useScrollCore();
	const p = getComponentProps({
		name: "thumbY",
		props,
		plugins
	});
	React.useEffect(() => {
		setHvThumb(true);
	}, [setHvThumb]);
	const { onPointerDown } = useThumbYHandler();
	const handlePointerDown = (event) => {
		onPointerDown(event);
		p.onPointerDown?.(event);
	};
	const thumbStyle = {
		...p.style,
		height: Number.isNaN(scrollbarLength) ? 0 : scrollbarLength,
		top: Number.isNaN(scrollbarOffset) ? 0 : scrollbarOffset
	};
	return /* @__PURE__ */ jsx("div", {
		...p,
		style: thumbStyle,
		onPointerDown: handlePointerDown,
		children: p.children
	});
};

export { ThumbY };
//# sourceMappingURL=y.mjs.map