@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(function({ children: r, ...d }, f) {
	let p = a(null), [m, h] = o(!1), [g, _] = o(!1), { variant: v, scrollable: y } = e(), { tabList: b, scroller: x } = t({
		variant: v,
		scrollable: y
	}), S = i(() => {
		if (!p.current) return;
		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = p.current;
		h(e > 0), _(e + n < t);
	}, []);
	l({
		ref: p,
		onResize: S
	});
	let C = () => {
		S();
	}, w = () => {
		let e = p.current?.querySelectorAll("[role=tab]");
		if (!p.current || !e) return 0;
		let { scrollLeft: t } = p.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;
	}, T = () => {
		let e = p.current?.querySelectorAll("[role=tab]");
		if (!p.current || !e) return 0;
		let { scrollLeft: t, clientWidth: n } = p.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 y ? /* @__PURE__ */ c("div", {
		className: "uy:relative",
		children: [
			m && /* @__PURE__ */ s(n, {
				direction: "left",
				onPress: () => {
					p.current?.scrollBy({
						behavior: "smooth",
						left: w()
					});
				}
			}),
			/* @__PURE__ */ s("div", {
				ref: p,
				"data-testid": "scrollable-tab-list",
				className: x(),
				onScroll: C,
				children: /* @__PURE__ */ s(u, {
					...d,
					ref: f,
					className: b(),
					children: r
				})
			}),
			g && /* @__PURE__ */ s(n, {
				direction: "right",
				onPress: () => {
					p.current?.scrollBy({
						behavior: "smooth",
						left: T()
					});
				}
			})
		]
	}) : /* @__PURE__ */ s(u, {
		...d,
		ref: f,
		className: b(),
		children: r
	});
});
d.displayName = "TabList";
//#endregion
export { d as TabList };