@slotted/react 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/column-manager-CV9tCnKa.js

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

package/dist/column-manager.js

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