@scrolia/vanilla/dist/components/thumb/x.mjs

A headless scrollbar component

import { useScrollCore } from "../../contexts/scrollcore.mjs";
import { useComponentPropsSetter } from "../../hooks/props.mjs";
import { useThumbXHandler } from "../../hooks/thumb.mjs";
import * as Atom from "atomico";
import { jsx } from "atomico/jsx-runtime";

const _ThumbX = () => {
	const elRef = Atom.useHost();
	const { options: { disabled }, x: { setHvThumb, scrollbarLength, scrollbarOffset } } = useScrollCore();
	Atom.useEffect(() => {
		setHvThumb(true);
	});
	const { onPointerDown } = useThumbXHandler();
	Atom.useEffect(() => {
		elRef.current.addEventListener("pointerdown", onPointerDown);
		return () => {
			elRef.current.removeEventListener("pointerdown", onPointerDown);
		};
	}, [onPointerDown]);
	useComponentPropsSetter("thumbX");
	Atom.useEffect(() => {
		if (disabled) return void 0;
		const length = Number.isNaN(scrollbarLength) ? 0 : scrollbarLength;
		const offset = Number.isNaN(scrollbarOffset) ? 0 : scrollbarOffset;
		elRef.current.style.width = `${length}px`;
		elRef.current.style.left = `${offset}px`;
	}, [
		disabled,
		scrollbarLength,
		scrollbarOffset
	]);
	return /* @__PURE__ */ jsx("host", {
		shadowDom: true,
		children: /* @__PURE__ */ jsx("slot", {})
	});
};
const ThumbX = Atom.c(_ThumbX);

export { ThumbX };
//# sourceMappingURL=x.mjs.map