@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/column-manager-CNZ7Xk5_.js

@@ -0,0 +1,585 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { _ as n, c as r, n as i, t as a } from "./menu-parts-BQej6eU9.js";
+import { r as o } from "./i18n-DpW8lqJ1.js";
+import { d as s, o as c, u as l } from "./drawer-Ci3wuCVa.js";
+import { n as u } from "./icon-button-TnvMhK4o.js";
+import { t as d } from "./checkbox-CwUOc-3u.js";
+import { t as f } from "./text-field-BktZbmzD.js";
+import { a as ee, f as p, l as m, p as h } from "./popover-DE22lSpV.js";
+import { t as g } from "./visually-hidden-CE6u5JLW.js";
+import { createControllable as _ } from "@slotted/core/state";
+import { Fragment as te, createContext as v, useCallback as y, useContext as ne, useEffect as b, useId as re, useImperativeHandle as ie, useLayoutEffect as x, useMemo as S, useRef as C, useState as w, useSyncExternalStore as ae } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { columnManagerMessages as oe, dragMessages as se } from "@slotted/core/i18n";
+import { getLiveAnnouncer as ce } from "@slotted/core/live-announcer";
+import { createDragController as le } from "@slotted/core/drag";
+import { columnStateChanges as ue, normalizeColumnState as de, withColumnHidden as fe, withColumnMoved as pe, withColumnPinned as me } from "@slotted/core/grid";
+//#region src/column-manager/column-manager-defaults.tsx
+var he = v({
+	presentation: "popover",
+	apply: "live"
+});
+function ge() {
+	return ne(he);
+}
+function _e({ apply: e, children: t, presentation: n }) {
+	let r = ge();
+	return /* @__PURE__ */ E(he.Provider, {
+		value: {
+			apply: e ?? r.apply,
+			presentation: n ?? r.presentation
+		},
+		children: t
+	});
+}
+//#endregion
+//#region src/column-manager/column-manager.tsx
+var ve = [
+	"start",
+	"middle",
+	"end"
+];
+function ye(e) {
+	let t = e.pinned.start.filter((t) => e.order.includes(t)), n = e.pinned.end.filter((t) => e.order.includes(t));
+	return {
+		start: t,
+		middle: e.order.filter((e) => !t.includes(e) && !n.includes(e)),
+		end: n
+	};
+}
+function be(e) {
+	return e.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+function xe(e, t) {
+	return ue(e, t).length === 0;
+}
+function O(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function Se(e) {
+	return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/["\\]/g, "\\$&");
+}
+function Ce(e) {
+	return e === "middle" ? null : e;
+}
+var we = class {
+	listeners = /* @__PURE__ */ new Set();
+	snapshot;
+	toggle = () => void 0;
+	onTrigger = () => void 0;
+	constructor(e) {
+		this.snapshot = e;
+	}
+	subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e));
+	get = () => this.snapshot;
+	publish(e) {
+		let t = this.snapshot;
+		if (t.open !== e.open || t.hidden !== e.hidden || t.rootId !== e.rootId || t.t !== e.t) {
+			this.snapshot = e;
+			for (let e of this.listeners) e();
+		}
+	}
+}, Te = /* @__PURE__ */ new WeakMap(), Ee = v(null);
+function De({ children: e }) {
+	let [t, n] = w(null), r = S(() => ({
+		channel: t,
+		setChannel: n
+	}), [t]);
+	return /* @__PURE__ */ E(Ee.Provider, {
+		value: r,
+		children: e
+	});
+}
+function Oe(e, t, n, r = Object.is) {
+	let [i, a] = w(t), o = e === void 0 ? i : e, s = C({
+		controlled: e,
+		value: o,
+		onRequest: n,
+		equals: r
+	});
+	return s.current = {
+		controlled: e,
+		value: o,
+		onRequest: n,
+		equals: r
+	}, [o, y((e, t, n, r) => {
+		let { controlled: i, value: o, onRequest: c, equals: l } = s.current, u = _({
+			controlled: i,
+			initial: o,
+			equals: l,
+			onRequest: (e) => c?.(e.value, Object.assign(e, r ?? {}))
+		}).request(e, t, n);
+		return u && a(e), u;
+	}, [])];
+}
+function ke({ trigger: e }) {
+	let { setTriggerNode: t } = h();
+	return x(() => (t(e), () => t(null)), [t, e]), null;
+}
+function Ae({ trigger: e }) {
+	let t = s();
+	return x(() => {
+		t.nodes.trigger = e;
+	}, [t.nodes, e]), null;
+}
+var je = {
+	dragging: null,
+	container: null,
+	index: null
+};
+function k(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function Me({ apply: s, columnState: h, columns: g, defaultColumnState: _, defaultOpen: v, messages: ae, onColumnStateChange: he, onOpenChange: _e, open: De, outOfSpace: k, presentation: Me, ref: Ne, ...A }) {
+	let Pe = ge(), j = Me ?? Pe.presentation, Fe = s ?? Pe.apply, M = o(oe, ae), N = re(), Ie = `${N}-panel`, P = `${N}-title`, Le = S(() => de(_, g), [_, g]), [Re, ze] = Oe(S(() => h === void 0 ? void 0 : de(h, g), [h, g]), Le, he, xe), F = S(() => de(Re, g), [Re, g]), [I, Be] = Oe(De, v ?? !1, _e), [L, R] = w(null), z = Fe === "confirm", B = z && L !== null ? L : F, [Ve, He] = w(""), Ue = be(Ve.trim()), V = Ue !== "", H = S(() => new Map(g.map((e) => [e.id, e])), [g]), U = S(() => ye(B), [B]), We = S(() => new Set(B.hidden), [B.hidden]), Ge = S(() => new Set(k?.hidden ?? []), [k]), Ke = S(() => new Set(k?.popin ?? []), [k]), qe = B.order.length, Je = qe - B.order.filter((e) => We.has(e)).length, Ye = y((e) => {
+		if (!V) return !0;
+		let t = H.get(e);
+		return t ? be(t.label).includes(Ue) || be(t.description ?? "").includes(Ue) : !1;
+	}, [
+		H,
+		Ue,
+		V
+	]), Xe = y((e, t, n) => {
+		let r = ue(F, e);
+		return r.length !== 0 && ze(e, t, n, {
+			change: r[0],
+			changes: r
+		});
+	}, [ze, F]), W = y((e, t, n) => {
+		z ? R(e) : Xe(e, t, n);
+	}, [z, Xe]), G = y((e, t, n) => Be(e, t, n), [Be]), Ze = C(I);
+	b(() => {
+		I && !Ze.current && z && R(F), !I && Ze.current && (R(null), He("")), Ze.current = I;
+	}, [
+		I,
+		z,
+		F
+	]);
+	let Qe = (e) => {
+		L !== null && Xe(L, "submit", e), R(null), j !== "inline" && G(!1, O(e), e);
+	}, $e = (e) => {
+		R(null), j !== "inline" && G(!1, O(e), e);
+	}, [K] = w(() => new we({
+		open: !1,
+		hidden: 0,
+		rootId: Ie,
+		t: M
+	})), [q, et] = w(null);
+	K.onTrigger = et, K.toggle = (e, t) => G(!I, e, t), x(() => {
+		K.publish({
+			open: I,
+			hidden: F.hidden.length,
+			rootId: A.id ?? Ie,
+			t: M
+		});
+	});
+	let tt = ne(Ee)?.setChannel;
+	x(() => (tt?.(K), () => tt?.(null)), [K, tt]);
+	let nt = C(null), J = C({
+		open: I,
+		setOpen: G
+	});
+	J.current = {
+		open: I,
+		setOpen: G
+	};
+	let [rt] = w(() => ({
+		show: () => J.current.setOpen(!0, "programmatic"),
+		hide: () => J.current.setOpen(!1, "programmatic"),
+		toggle: () => J.current.setOpen(!J.current.open, "programmatic"),
+		get element() {
+			return nt.current;
+		}
+	}));
+	Te.set(rt, K), ie(Ne, () => rt, [rt]);
+	let [Y, it] = w(null), at = y((e) => {
+		nt.current = e, it(e);
+	}, []), [X, ot] = w(je), Z = C(null), st = C(null), ct = o(se), Q = C({
+		zones: U,
+		working: B,
+		edit: W,
+		searching: V,
+		byId: H,
+		t: M,
+		dragT: ct
+	});
+	Q.current = {
+		zones: U,
+		working: B,
+		edit: W,
+		searching: V,
+		byId: H,
+		t: M,
+		dragT: ct
+	}, b(() => {
+		if (!Y) return;
+		let e = Y.ownerDocument, t = (t) => {
+			t !== "" && ce(e).announce(t);
+		}, n = (e) => Y.querySelector(`[data-part="item"][data-column="${Se(e)}"]`), r = le({
+			document: e,
+			preview: !1,
+			restoreFocus: !1,
+			autoScroll: { axis: "y" },
+			announce: t,
+			t: (e, t) => Q.current.dragT(e, t),
+			silent: ["moved"],
+			onDrop: ({ items: e, source: n, target: r, reason: i, event: a }) => {
+				if (r.kind !== "between" || r.container !== n.container) return;
+				let { zones: o, working: s, edit: c, t: l } = Q.current, u = o[n.container], d = e[0], f = r.index > n.index ? r.index - 1 : r.index;
+				if (c(pe(s, d, f, u), i === "keyboard" ? "keyboard" : "pointer", a), i === "keyboard") {
+					st.current = d;
+					let e = Q.current.byId.get(d);
+					t(l("moved", {
+						column: e?.label ?? d,
+						position: f + 1
+					}));
+				}
+			}
+		}), i = ve.map((e) => r.registerContainer({
+			key: e,
+			items: () => Q.current.zones[e],
+			orientation: "vertical",
+			element: () => Y.querySelector(`[data-part="section"][data-zone="${e}"]`),
+			itemElement: n,
+			accepts: (e, t) => e.source?.container === t.container,
+			disabled: () => Q.current.searching,
+			itemLabel: (e) => Q.current.byId.get(e)?.label ?? e
+		})), a = r.subscribe((e) => {
+			if (e.status !== "dragging" || e.reason === "keyboard") {
+				ot(je);
+				return;
+			}
+			let t = e.target;
+			ot({
+				dragging: e.items[0] ?? null,
+				container: t && t.kind === "between" ? t.container : null,
+				index: t && t.kind === "between" && e.valid ? t.index : null
+			});
+		});
+		return Z.current = r, () => {
+			a();
+			for (let e of i) e();
+			r.destroy(), Z.current = null, $.current.clear();
+		};
+	}, [Y]);
+	let $ = C(/* @__PURE__ */ new Map());
+	b(() => {
+		let e = Z.current;
+		if (!e || !Y) return;
+		let t = /* @__PURE__ */ new Set();
+		for (let n of Y.querySelectorAll("[data-part=\"item\"][data-column]")) {
+			let r = n.dataset.column, i = n.closest("[data-part=\"section\"]")?.dataset.zone ?? "middle";
+			t.add(r);
+			let a = $.current.get(r);
+			if (a && a.node === n && a.node.dataset.attachedZone === i) continue;
+			a?.detach(), n.dataset.attachedZone = i;
+			let o = e.attachDraggable(n, {
+				container: i,
+				key: r,
+				handle: () => n.querySelector("[data-part=\"handle\"]"),
+				disabled: () => Q.current.searching || Q.current.byId.get(r)?.reorderable === !1,
+				distance: 4
+			});
+			$.current.set(r, {
+				node: n,
+				detach: o
+			});
+		}
+		for (let [e, n] of $.current) t.has(e) || (n.detach(), $.current.delete(e));
+	}), x(() => {
+		let e = st.current;
+		e && Y && (st.current = null, Y.querySelector(`[data-part="item"][data-column="${Se(e)}"] > [data-part="handle"]`)?.focus());
+	});
+	let lt = (e, t, n) => {
+		if (!e.altKey || e.key !== "ArrowUp" && e.key !== "ArrowDown" || (e.preventDefault(), V || H.get(t)?.reorderable === !1)) return;
+		let r = U[n], i = r.indexOf(t), a = e.key === "ArrowUp";
+		a && i <= 0 || !a && i >= r.length - 1 || Z.current?.moveBy({
+			items: [t],
+			source: {
+				container: n,
+				index: i
+			},
+			intent: a ? "previous" : "next",
+			reason: "keyboard",
+			event: e.nativeEvent
+		});
+	}, ut = ve.map((e) => ({
+		key: e,
+		ids: U[e].filter((e) => H.has(e) && Ye(e))
+	})).filter((e) => e.ids.length > 0), dt = {
+		start: M("pinnedStart"),
+		middle: M("unpinned"),
+		end: M("pinnedEnd")
+	}, ft = (o, s) => {
+		let c = H.get(o), l = We.has(o), u = c.hideable === !1, f = !l && Je <= 1, ee = !l && Ge.has(o), p = !l && Ke.has(o), m = V || c.reorderable === !1, h = u ? M("required") : ee ? M("hiddenBySpace") : p ? M("inRow") : null, g = Ce(s);
+		return /* @__PURE__ */ D("div", {
+			"data-column": o,
+			"data-part": "item",
+			...l ? { "data-hidden": "" } : {},
+			...u ? { "data-locked": "" } : {},
+			...ee ? { "data-space-hidden": "" } : {},
+			...g ? { "data-pinned": g } : {},
+			...X.dragging === o ? { "data-dragging": "" } : {},
+			children: [
+				/* @__PURE__ */ E("button", {
+					"aria-disabled": m || void 0,
+					"aria-label": M("reorder", { column: c.label }),
+					"data-part": "handle",
+					onKeyDown: (e) => lt(e, o, s),
+					type: "button",
+					...m ? { "data-disabled": "" } : {},
+					children: /* @__PURE__ */ E(t, {
+						size: "sm",
+						children: /* @__PURE__ */ E(e, { name: "grip-vertical" })
+					})
+				}),
+				/* @__PURE__ */ E("div", {
+					"data-part": "visibility",
+					children: /* @__PURE__ */ D(d, {
+						checked: !l,
+						description: c.description,
+						disabled: u && !l || f,
+						onCheckedChange: (e, t) => W(fe(B, o, !e), t.reason === "keyboard" ? "keyboard" : "pointer", t.source),
+						children: [c.label, h === null ? null : /* @__PURE__ */ D(T, { children: [" ", /* @__PURE__ */ E("span", {
+							"data-part": "status",
+							children: h
+						})] })]
+					})
+				}),
+				/* @__PURE__ */ D(n, {
+					size: "sm",
+					children: [/* @__PURE__ */ E(i, { render: (n) => /* @__PURE__ */ E("button", {
+						...n,
+						"aria-label": M("pin", { column: c.label }),
+						"data-part": "pin",
+						type: "button",
+						...g ? { "data-pinned": "" } : {},
+						children: /* @__PURE__ */ E(t, {
+							size: "sm",
+							children: /* @__PURE__ */ E(e, { name: "pin" })
+						})
+					}) }), /* @__PURE__ */ D(a, { children: [
+						/* @__PURE__ */ E(r, {
+							disabled: g === "start",
+							onSelect: (e) => W(me(B, o, "start"), e.reason, e.source),
+							children: M("pinStart")
+						}),
+						/* @__PURE__ */ E(r, {
+							disabled: g === "end",
+							onSelect: (e) => W(me(B, o, "end"), e.reason, e.source),
+							children: M("pinEnd")
+						}),
+						g === null ? null : /* @__PURE__ */ E(r, {
+							onSelect: (e) => W(me(B, o, null), e.reason, e.source),
+							children: M("unpin")
+						})
+					] })]
+				})
+			]
+		});
+	}, pt = (e, t) => {
+		if (X.container !== e || X.index !== t || X.dragging === null) return !1;
+		let n = U[e].indexOf(X.dragging);
+		return t !== n && t !== n + 1;
+	}, mt = /* @__PURE__ */ D("div", {
+		...A,
+		"aria-labelledby": A["aria-labelledby"] ?? P,
+		"data-apply": Fe,
+		"data-part": "root",
+		"data-presentation": j,
+		"data-ui": "column-manager",
+		id: A.id ?? Ie,
+		ref: at,
+		role: "group",
+		children: [
+			/* @__PURE__ */ D("div", {
+				"data-part": "header",
+				children: [/* @__PURE__ */ E("h2", {
+					"data-part": "title",
+					id: P,
+					children: M("title")
+				}), /* @__PURE__ */ E("span", {
+					"data-part": "summary",
+					children: M("visibleCount", {
+						visible: Je,
+						total: qe
+					})
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				"data-part": "search",
+				children: /* @__PURE__ */ E(f, {
+					"aria-label": M("search"),
+					clearable: !0,
+					onValueChange: (e) => He(e),
+					placeholder: M("search"),
+					size: "sm",
+					start: /* @__PURE__ */ E(t, { children: /* @__PURE__ */ E(e, { name: "search" }) }),
+					type: "search",
+					value: Ve
+				})
+			}),
+			/* @__PURE__ */ E("div", {
+				"data-part": "list",
+				children: ut.length === 0 && V ? /* @__PURE__ */ E("div", {
+					"data-part": "empty",
+					role: "status",
+					children: M("noResults")
+				}) : ut.map(({ key: e, ids: t }) => /* @__PURE__ */ D("div", {
+					"aria-labelledby": `${N}-${e}`,
+					"data-part": "section",
+					"data-zone": e,
+					role: "group",
+					...ut.length === 1 ? { "data-sole": "" } : {},
+					...X.container === e && X.index !== null ? { "data-drop-target": "" } : {},
+					children: [/* @__PURE__ */ E("div", {
+						"data-part": "section-label",
+						id: `${N}-${e}`,
+						children: dt[e]
+					}), t.map((n, r) => /* @__PURE__ */ D(te, { children: [
+						pt(e, U[e].indexOf(n)) ? /* @__PURE__ */ E("div", {
+							"aria-hidden": "true",
+							"data-part": "drop-indicator"
+						}) : null,
+						ft(n, e),
+						r === t.length - 1 && pt(e, U[e].length) ? /* @__PURE__ */ E("div", {
+							"aria-hidden": "true",
+							"data-part": "drop-indicator"
+						}) : null
+					] }, n))]
+				}, e))
+			}),
+			/* @__PURE__ */ D("div", {
+				"data-part": "footer",
+				children: [
+					/* @__PURE__ */ E(u, {
+						disabled: B.hidden.length === 0,
+						onClick: (e) => W({
+							...B,
+							hidden: []
+						}, O(e), e),
+						render: (e) => /* @__PURE__ */ E("button", {
+							...e,
+							"data-part": "show-all"
+						}),
+						size: "sm",
+						tone: "secondary",
+						variant: "ghost",
+						children: M("showAll")
+					}),
+					/* @__PURE__ */ E(u, {
+						disabled: xe(B, Le),
+						onClick: (e) => W(Le, "clear", e),
+						render: (e) => /* @__PURE__ */ E("button", {
+							...e,
+							"data-part": "reset"
+						}),
+						size: "sm",
+						tone: "secondary",
+						variant: "ghost",
+						children: M("reset")
+					}),
+					z ? /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(u, {
+						onClick: $e,
+						render: (e) => /* @__PURE__ */ E("button", {
+							...e,
+							"data-part": "cancel"
+						}),
+						size: "sm",
+						tone: "secondary",
+						variant: "outline",
+						children: M("cancel")
+					}), /* @__PURE__ */ E(u, {
+						disabled: L === null || xe(L, F),
+						onClick: Qe,
+						render: (e) => /* @__PURE__ */ E("button", {
+							...e,
+							"data-part": "apply"
+						}),
+						size: "sm",
+						children: M("apply")
+					})] }) : null
+				]
+			})
+		]
+	}), ht = (e, t) => {
+		G(e, t.reason, t.source);
+	};
+	return j === "inline" ? mt : j === "drawer" ? /* @__PURE__ */ D(l, {
+		finalFocus: q ? { current: q } : void 0,
+		onOpenChange: ht,
+		open: I,
+		side: "end",
+		size: "sm",
+		children: [/* @__PURE__ */ E(Ae, { trigger: q }), /* @__PURE__ */ E(c, {
+			"aria-labelledby": P,
+			children: mt
+		})]
+	}) : /* @__PURE__ */ D(p, {
+		align: "start",
+		initialFocus: "[data-part='search'] input",
+		onOpenChange: ht,
+		open: I,
+		side: "bottom",
+		size: "lg",
+		children: [/* @__PURE__ */ E(ke, { trigger: q }), /* @__PURE__ */ E(m, { children: /* @__PURE__ */ E(ee, {
+			"aria-labelledby": P,
+			children: mt
+		}) })]
+	});
+}
+var Ne = {
+	open: !1,
+	hidden: 0,
+	rootId: "",
+	t: () => ""
+}, A = () => () => void 0;
+function Pe({ children: e, manager: t, onClick: n, ref: r, render: i, ...a }) {
+	let o = ne(Ee), [s, c] = w(null);
+	b(() => {
+		let e = t?.current, n = e ? Te.get(e) ?? null : null;
+		n !== s && c(n);
+	});
+	let l = s ?? o?.channel ?? null, d = ae(l?.subscribe ?? A, l?.get ?? (() => Ne), () => Ne), f = C(null);
+	x(() => (l?.onTrigger(f.current), () => l?.onTrigger(null)), [l]);
+	let ee = y((e) => {
+		f.current = e, k(r, e);
+	}, [r]), p = d.hidden, m = d.t("hiddenCount", { count: p }), h = {
+		...a,
+		"aria-controls": d.open ? d.rootId : void 0,
+		"aria-expanded": d.open,
+		"aria-haspopup": "dialog",
+		"data-column-manager-trigger": "",
+		"data-part": "trigger",
+		...d.open ? { "data-open": "" } : {},
+		children: /* @__PURE__ */ D(T, { children: [e, p > 0 ? /* @__PURE__ */ D(T, { children: [
+			/* @__PURE__ */ E("span", {
+				"aria-hidden": "true",
+				"data-part": "count",
+				children: p
+			}),
+			" ",
+			/* @__PURE__ */ E(g, { children: m })
+		] }) : null] }),
+		onClick: (e) => {
+			n?.(e), !e.defaultPrevented && l?.toggle(O(e), e);
+		},
+		ref: ee,
+		type: a.type ?? "button"
+	};
+	if (i) return i(h);
+	let { children: _, ref: te, ...v } = h;
+	return /* @__PURE__ */ E(u, {
+		...v,
+		ref: te,
+		render: (e) => /* @__PURE__ */ E("button", {
+			...e,
+			"data-part": "trigger"
+		}),
+		tone: "secondary",
+		variant: "outline",
+		children: _
+	});
+}
+//#endregion
+export { ge as a, _e as i, De as n, Pe as r, Me as t };

package/dist/column-manager.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, r, t as i } from "./column-manager-CNZ7Xk5_.js";
+export { i as ColumnManager, t as ColumnManagerProvider, n as ColumnManagerRoot, r as ColumnManagerTrigger, e as useColumnManagerDefaults };