@slotted/react 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/tabs-cSln63RJ.js

@@ -0,0 +1,361 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { keyedProps as n, selectorKeyProps as r, withSelectorKey as i } from "@slotted/core/selector-key";
+import { createRemovalFocus as a, createRovingTabindex as o } from "@slotted/core/focus";
+import { createControllable as s } from "@slotted/core/state";
+import { createContext as c, useCallback as l, useContext as u, useDeferredValue as d, useEffect as f, useId as ee, useLayoutEffect as p, useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { NOT_OVERFLOWING as y, createScrollAffordance as b } from "@slotted/core/overflow";
+import { createIndicator as x } from "@slotted/core/measure";
+//#region src/tabs/tabs-defaults.tsx
+var S = c({
+	activation: "automatic",
+	fit: "auto",
+	loop: !0,
+	mount: "active",
+	orientation: "horizontal",
+	size: "md",
+	track: "line",
+	variant: "line"
+});
+function C() {
+	return u(S);
+}
+function w({ children: e, ...t }) {
+	let n = C();
+	return /* @__PURE__ */ _(S.Provider, {
+		value: {
+			activation: t.activation ?? n.activation,
+			fit: t.fit ?? n.fit,
+			loop: t.loop ?? n.loop,
+			mount: t.mount ?? n.mount,
+			orientation: t.orientation ?? n.orientation,
+			size: t.size ?? n.size,
+			track: t.track ?? n.track,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/tabs/tabs.tsx
+var T = "[data-part=\"tab\"]", E = ":scope > [data-part=\"item\"][data-selected] > [data-part=\"tab\"]", D = typeof document > "u" ? f : p, O = c(void 0);
+function k() {
+	let e = u(O);
+	if (e === void 0) throw Error("Tab, TabPanel and TabActions must be rendered inside Tabs.");
+	return e;
+}
+function A(e) {
+	return e.replace(/[^\w-]/g, (e) => `-${e.charCodeAt(0).toString(16)}-`);
+}
+function j(e, t) {
+	let n = !1;
+	return {
+		reason: e,
+		source: t,
+		get cancelled() {
+			return n;
+		},
+		cancel() {
+			n = !0;
+		}
+	};
+}
+function M({ activation: r, children: i, className: c, defaultValue: l, deferPanels: u, disabled: p, fit: S, loop: w, mount: k, onTabDismiss: M, onValueChange: N, orientation: P, ref: te, render: F, size: ne, style: re, track: ie, value: I, variant: ae, ...oe }) {
+	let L = C(), se = ee(), [ce, le] = h(l), R = I ?? ce, [z, ue] = h(null), [B, V] = h(y), [de, fe] = h("none"), H = r ?? L.activation, pe = S ?? L.fit, U = w ?? L.loop, W = k ?? L.mount, G = P ?? L.orientation, me = ne ?? L.size, he = ie ?? L.track, ge = ae ?? L.variant, _e = p === !0, ve = d(R), ye = u ?? W === "active" ? ve : R, K = m(new Set(R === void 0 ? [] : [R]));
+	R !== void 0 && K.current.add(R);
+	let q = m(null), J = m(null);
+	function Y() {
+		return z === null ? [] : [...z.querySelectorAll(T)];
+	}
+	function X(e) {
+		return e === void 0 ? -1 : Y().findIndex((t) => t.getAttribute("data-value") === e);
+	}
+	function Z(e, t, n) {
+		if (e === R) return;
+		let r = !1, i = s({
+			controlled: I,
+			initial: R,
+			onRequest: (e) => {
+				r = e.cancelled, e.value !== void 0 && N?.(e.value, e);
+			}
+		}).request(e, t, n);
+		if (r) return;
+		let a = X(R), o = X(e);
+		a !== -1 && o !== -1 && fe(o > a ? "forward" : "backward"), K.current.add(e), i && le(e);
+	}
+	function be(e) {
+		let t = Y().map((e) => e.getAttribute("data-value")).filter((e) => e !== null), n = t.indexOf(e);
+		if (n !== -1) return t[n + 1] ?? t[n - 1];
+	}
+	function xe(e, t, n) {
+		let r = j(t, n);
+		if (M?.(e, r), r.cancelled || e !== R) return;
+		let i = be(e);
+		i !== void 0 && Z(i, "remove", n);
+	}
+	let Q = m({
+		activation: H,
+		select: Z,
+		value: R
+	});
+	f(() => {
+		Q.current = {
+			activation: H,
+			select: Z,
+			value: R
+		};
+	}), f(() => {
+		if (z === null) return;
+		let e = o(z, {
+			crossAxis: !1,
+			itemSelector: T,
+			loop: U,
+			onMove: (e, t) => {
+				if (J.current?.reveal(t), Q.current.activation !== "automatic") return;
+				let n = t.getAttribute("data-value");
+				n !== null && Q.current.select(n, "keyboard", void 0);
+			},
+			orientation: () => G
+		});
+		q.current = e;
+		let t = a(z, { itemSelector: T }), n = new MutationObserver(() => {
+			e.refresh(), J.current?.refresh();
+		});
+		return n.observe(z, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			n.disconnect(), t.destroy(), e.destroy(), q.current = null;
+		};
+	}, [
+		z,
+		U,
+		G
+	]), D(() => {
+		if (z !== null) return x(z, {
+			orientation: () => G,
+			part: "marker",
+			target: () => z.querySelector(E)
+		}).destroy;
+	}, [z, G]), f(() => {
+		if (z === null || G === "vertical") {
+			V(y);
+			return;
+		}
+		let e = b(z, { onChange: V });
+		return J.current = e, V(e.state()), () => {
+			e.destroy(), J.current = null;
+		};
+	}, [z, G]), f(() => {
+		let e = X(R);
+		if (e === -1) return;
+		q.current?.setActive(e);
+		let t = Y()[e];
+		t !== void 0 && J.current?.reveal(t);
+	}, [R, z]);
+	let $ = B.overflowing && G === "horizontal";
+	f(() => {
+		if (!$) return;
+		let e = Y()[X(Q.current.value)];
+		e !== void 0 && J.current?.reveal(e);
+	}, [$]);
+	let Se = {
+		activation: H,
+		attachList: ue,
+		disabled: _e,
+		dismiss: xe,
+		identify: (e) => ({
+			panelId: `${se}panel-${A(e)}`,
+			tabId: `${se}tab-${A(e)}`
+		}),
+		mount: W,
+		orientation: G,
+		seen: (e) => K.current.has(e),
+		select: Z,
+		shownValue: ye,
+		value: R
+	}, Ce = n({
+		...oe,
+		children: /* @__PURE__ */ v(g, { children: [i, $ ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("button", {
+			"aria-hidden": "true",
+			"data-direction": "start",
+			"data-part": "scroll",
+			"data-part-scroll": "",
+			disabled: B.atStart,
+			onClick: () => J.current?.page(-1),
+			tabIndex: -1,
+			type: "button",
+			children: /* @__PURE__ */ _(t, {
+				directional: !0,
+				children: /* @__PURE__ */ _(e, { name: "chevron-right" })
+			})
+		}), /* @__PURE__ */ _("button", {
+			"aria-hidden": "true",
+			"data-direction": "end",
+			"data-part": "scroll",
+			"data-part-scroll": "",
+			disabled: B.atEnd,
+			onClick: () => J.current?.page(1),
+			tabIndex: -1,
+			type: "button",
+			children: /* @__PURE__ */ _(t, {
+				directional: !0,
+				children: /* @__PURE__ */ _(e, { name: "chevron-right" })
+			})
+		})] }) : null] }),
+		className: c,
+		"data-activation-direction": de,
+		..._e ? { "data-disabled": "" } : {},
+		"data-fit": pe,
+		"data-orientation": G,
+		...B.overflowing ? { "data-overflowing": "" } : {},
+		"data-part": "root",
+		"data-size": me,
+		"data-track": he,
+		"data-ui": "tabs",
+		"data-variant": ge,
+		style: re
+	});
+	return /* @__PURE__ */ _(O.Provider, {
+		value: Se,
+		children: F === void 0 ? /* @__PURE__ */ _("div", {
+			...Ce,
+			ref: te
+		}) : F(Ce)
+	});
+}
+//#endregion
+//#region src/tabs/tabs-parts.tsx
+function N(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function P({ children: e, ref: t, render: r, ...i }) {
+	let a = k(), o = l((e) => {
+		if (a.attachList(e), typeof t == "function") return t(e);
+		t && (t.current = e);
+	}, [t, a.attachList]), s = n({
+		tabIndex: -1,
+		...i,
+		...a.orientation === "vertical" ? { "aria-orientation": "vertical" } : {},
+		children: e,
+		"data-part": "list",
+		role: "tablist"
+	});
+	return r === void 0 ? /* @__PURE__ */ _("div", {
+		...s,
+		ref: o
+	}) : r({
+		...s,
+		ref: o
+	});
+}
+function te({ children: n, className: a, controls: o, disabled: s, dismissLabel: c, dismissible: l = !1, end: u, href: d, onClick: f, onKeyDown: ee, ref: p, render: m, start: h, style: y, value: b, ...x }) {
+	let S = k(), { panelId: C, tabId: w } = S.identify(b), T = o ?? C, E = S.value === b, D = S.disabled === !0 || s === !0;
+	function O(e) {
+		f?.(e), !e.defaultPrevented && (D || d !== void 0 && (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) || (d !== void 0 && e.preventDefault(), S.select(b, N(e), e)));
+	}
+	function A(e) {
+		ee?.(e), !(e.defaultPrevented || e.repeat) && l && !D && e.key === "Delete" && (e.preventDefault(), S.dismiss(b, "keyboard", e));
+	}
+	let j = /* @__PURE__ */ v(g, { children: [
+		h === void 0 ? null : /* @__PURE__ */ _("span", {
+			"data-part": "start",
+			"data-part-start": "",
+			children: h
+		}),
+		/* @__PURE__ */ _("span", {
+			"data-part": "label",
+			"data-part-label": "",
+			children: n
+		}),
+		u === void 0 ? null : /* @__PURE__ */ _("span", {
+			"data-part": "end",
+			"data-part-end": "",
+			children: u
+		})
+	] }), M = d === void 0 ? /* @__PURE__ */ _("button", {
+		...i(x, "part", "tab"),
+		"aria-controls": T,
+		"aria-keyshortcuts": l ? "Delete" : void 0,
+		"aria-selected": E,
+		"data-value": b,
+		disabled: D,
+		id: w,
+		onClick: O,
+		onKeyDown: A,
+		ref: p,
+		role: "tab",
+		tabIndex: E ? 0 : -1,
+		type: "button",
+		children: j
+	}) : /* @__PURE__ */ _("a", {
+		...i(x, "part", "tab"),
+		"aria-controls": T,
+		"aria-disabled": D === !0 || void 0,
+		"aria-keyshortcuts": l ? "Delete" : void 0,
+		"aria-selected": E,
+		"data-value": b,
+		href: d,
+		id: w,
+		onClick: O,
+		onKeyDown: A,
+		ref: p,
+		role: "tab",
+		tabIndex: E ? 0 : -1,
+		children: j
+	}), P = {
+		children: /* @__PURE__ */ v(g, { children: [M, l ? /* @__PURE__ */ _("button", {
+			"aria-label": c,
+			"data-part": "dismiss",
+			"data-part-dismiss": "",
+			disabled: D,
+			onClick: (e) => {
+				e.stopPropagation(), S.dismiss(b, "pointer", e);
+			},
+			tabIndex: -1,
+			type: "button",
+			children: /* @__PURE__ */ _(t, { children: /* @__PURE__ */ _(e, { name: "x" }) })
+		}) : null] }),
+		className: a,
+		"data-part": "item",
+		...r("part", "item"),
+		...E ? { "data-selected": "" } : {},
+		role: "presentation",
+		style: y
+	};
+	return m === void 0 ? /* @__PURE__ */ _("div", { ...P }) : m(P);
+}
+function F({ children: e, ref: t, render: r, value: i, ...a }) {
+	let o = k(), { panelId: s, tabId: c } = o.identify(i), l = o.shownValue === i, u = l && o.value !== o.shownValue, d = l || o.mount === "eager" || o.mount === "lazy" && o.seen(i), f = n({
+		...a,
+		"aria-labelledby": c,
+		...u ? {
+			"aria-busy": !0,
+			"data-pending": ""
+		} : {},
+		children: d ? e : null,
+		"data-part": "panel",
+		hidden: !l,
+		id: s,
+		role: "tabpanel",
+		tabIndex: 0
+	});
+	return r === void 0 ? /* @__PURE__ */ _("div", {
+		...f,
+		ref: t
+	}) : r(f);
+}
+function ne({ children: e, ref: t, render: r, ...i }) {
+	k();
+	let a = n({
+		...i,
+		children: e,
+		"data-part": "actions"
+	});
+	return r === void 0 ? /* @__PURE__ */ _("div", {
+		...a,
+		ref: t
+	}) : r(a);
+}
+//#endregion
+export { M as a, C as c, F as i, ne as n, k as o, P as r, w as s, te as t };

package/dist/tabs.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./tabs-HWmvOKM4.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./tabs-cSln63RJ.js";
 export { s as Tab, r as TabActions, a as TabList, n as TabPanel, e as Tabs, o as TabsDefaultsProvider, i as useTabs, t as useTabsDefaults };