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

package/dist/column-manager-CFtJxQWS.js

@@ -1,585 +0,0 @@
-import { n as e, t } from "./icon-T9Yt4tnm.js";
-import { _ as n, c as r, n as i, t as a } from "./menu-parts-BpQu2s4z.js";
-import { r as o } from "./i18n-DpW8lqJ1.js";
-import { d as s, o as c, u as l } from "./drawer-B_EgvFeX.js";
-import { n as u } from "./icon-button-CCWkCDMs.js";
-import { t as d } from "./checkbox-B4Sb1eXj.js";
-import { t as f } from "./text-field-CbQ6UCAP.js";
-import { a as ee, f as p, l as m, p as h } from "./popover-DEp8Bf3e.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 };