@payfit/unity-components/dist/esm/components/tabs/parts/TabList.js

import { useTabsContext as e } from "../Tabs.context.js";
import { tabsVariant as t } from "../Tabs.variant.js";
import { NavigationButton as n } from "./NavigationButton.js";
import { forwardRef as r, useCallback as i, useRef as a, useState as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { useResizeObserver as l } from "usehooks-ts";
import { TabList as u } from "react-aria-components/Tabs";
//#region src/components/tabs/parts/TabList.tsx
var d = r(({ children: r }, d) => {
	let f = a(null), [p, m] = o(!1), [h, g] = o(!1), { variant: _, scrollable: v } = e(), { tabList: y, scroller: b } = t({
		variant: _,
		scrollable: v
	}), x = i(() => {
		if (!f.current) return;
		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = f.current;
		m(e > 0), g(e + n < t);
	}, []);
	l({
		ref: f,
		onResize: x
	});
	let S = (e) => {
		x();
	}, C = () => {
		let e = f.current?.querySelectorAll("[role=tab]");
		if (!f.current || !e) return 0;
		let { scrollLeft: t } = f.current, n = Array.from(e);
		for (let e = n.length - 1; e >= 0; e--) {
			let r = n[e];
			if (r.offsetLeft < t) return -r.offsetWidth;
		}
		return 0;
	}, w = () => {
		let e = f.current?.querySelectorAll("[role=tab]");
		if (!f.current || !e) return 0;
		let { scrollLeft: t, clientWidth: n } = f.current, r = Array.from(e), i = t + n;
		for (let e = 0; e < r.length - 1; e++) {
			let t = r[e], n = t.offsetLeft + t.offsetWidth;
			if (n > i || n < i) return t.offsetWidth;
		}
		return 0;
	};
	return v ? /* @__PURE__ */ c("div", {
		className: "uy:relative",
		children: [
			p && /* @__PURE__ */ s(n, {
				direction: "left",
				onPress: () => {
					f.current?.scrollBy({
						behavior: "smooth",
						left: C()
					});
				}
			}),
			/* @__PURE__ */ s("div", {
				ref: f,
				"data-testid": "scrollable-tab-list",
				className: b(),
				onScroll: S,
				children: /* @__PURE__ */ s(u, {
					ref: d,
					className: y(),
					children: r
				})
			}),
			h && /* @__PURE__ */ s(n, {
				direction: "right",
				onPress: () => {
					f.current?.scrollBy({
						behavior: "smooth",
						left: w()
					});
				}
			})
		]
	}) : /* @__PURE__ */ s(u, {
		ref: d,
		className: y(),
		children: r
	});
});
d.displayName = "TabList";
//#endregion
export { d as TabList };