@countermeasure-platform/web-components 0.2.0

package/dist/react/primitives/data-grid.js

@@ -0,0 +1,775 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { t } from "../../createLucideIcon-BPb01goH.js";
+import { n, r, t as i } from "../../arrow-up-gNaqffAh.js";
+import { t as a } from "../../x-DCVjAtEF.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import * as l from "react";
+var u = t("columns-2", [["rect", {
+	width: "18",
+	height: "18",
+	x: "3",
+	y: "3",
+	rx: "2",
+	key: "afitv7"
+}], ["path", {
+	d: "M12 3v18",
+	key: "108xh3"
+}]]), d = t("columns-3", [
+	["rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2",
+		key: "afitv7"
+	}],
+	["path", {
+		d: "M9 3v18",
+		key: "fh3hqa"
+	}],
+	["path", {
+		d: "M15 3v18",
+		key: "14nvp0"
+	}]
+]), f = t("funnel", [["path", {
+	d: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z",
+	key: "sc7q7i"
+}]]), p = t("pin", [["path", {
+	d: "M12 17v5",
+	key: "bb1du9"
+}], ["path", {
+	d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z",
+	key: "1nkz8b"
+}]]), m = t("rotate-ccw", [["path", {
+	d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+	key: "1357e3"
+}], ["path", {
+	d: "M3 3v5h5",
+	key: "1xhq8a"
+}]]), h = "cm-datagrid-react-";
+function ee(e) {
+	try {
+		let t = localStorage.getItem(h + e);
+		return t ? JSON.parse(t) : null;
+	} catch {
+		return null;
+	}
+}
+function te(e, t) {
+	try {
+		localStorage.setItem(h + e, JSON.stringify(t));
+	} catch {}
+}
+function ne(e, t, n) {
+	let r = e.findIndex((e) => e.key === t), i = r >= 0 ? e[r] : void 0, a;
+	if (a = i ? i.direction === "asc" ? "desc" : null : "asc", n) {
+		let n = [...e];
+		return r >= 0 ? a === null ? n.splice(r, 1) : n[r] = {
+			key: t,
+			direction: a
+		} : a !== null && n.push({
+			key: t,
+			direction: a
+		}), n;
+	}
+	return a === null ? [] : [{
+		key: t,
+		direction: a
+	}];
+}
+function g(e) {
+	return e == null;
+}
+function re(e, t) {
+	return t.length === 0 ? e : [...e].sort((e, n) => {
+		for (let { key: r, direction: i } of t) {
+			let t = e[r], a = n[r], o = g(t) ? "" : String(t), s = g(a) ? "" : String(a), c = Number(o), l = Number(s), u;
+			if (u = !Number.isNaN(c) && !Number.isNaN(l) && o !== "" && s !== "" ? c - l : o.localeCompare(s), u !== 0) return i === "desc" ? -u : u;
+		}
+		return 0;
+	});
+}
+function _(e, t) {
+	let n = g(e) ? "" : String(e);
+	switch (t.type) {
+		case "text": return !t.value || n.toLowerCase().includes(t.value.toLowerCase());
+		case "select": return !t.value || n === t.value;
+		case "multi-select": return !t.values?.length || (t.values?.includes(n) ?? !0);
+	}
+}
+function v(e, t, n, r) {
+	let i = Object.keys(t).length > 0, a = n !== "";
+	return !i && !a ? e : e.filter((e) => {
+		let o = e;
+		if (i) {
+			for (let [e, n] of Object.entries(t)) if (!_(o[e], n)) return !1;
+		}
+		if (a) {
+			let e = n.toLowerCase(), t = !1;
+			for (let n of r) {
+				let r = o[n];
+				if (!g(r) && String(r).toLowerCase().includes(e)) {
+					t = !0;
+					break;
+				}
+			}
+			if (!t) return !1;
+		}
+		return !0;
+	});
+}
+function y(e, t, n, r) {
+	let [i, a] = l.useState(0), [o, s] = l.useState(600);
+	l.useEffect(() => {
+		let e = r.current;
+		if (!e) return;
+		let t = () => a(e.scrollTop);
+		e.addEventListener("scroll", t, { passive: !0 }), (() => {
+			let t = e.clientHeight || Math.round(e.getBoundingClientRect().height);
+			t > 0 && s(t);
+		})();
+		let n = null;
+		return typeof globalThis.ResizeObserver == "function" && (n = new globalThis.ResizeObserver((e) => {
+			for (let t of e) s(t.contentRect.height);
+		}), n.observe(e)), () => {
+			e.removeEventListener("scroll", t), n?.disconnect();
+		};
+	}, [r]);
+	let c = e * t, u = Math.ceil(o / t), d = Math.floor(i / t), f = Math.max(0, d - n);
+	return {
+		startIndex: f,
+		endIndex: Math.min(e, d + u + n),
+		totalHeight: c,
+		offsetY: f * t,
+		visibleCount: u
+	};
+}
+function b({ className: t, columns: d, data: p, tableId: m, rowHeight: _ = 40, overscan: b = 10, selectionMode: x = "none", selectedRows: S, onSelectionChange: oe, sort: C, onSort: w, defaultSort: se, filters: T, onFilterChange: E, globalSearch: D = "", onGlobalSearchChange: ce, emptyMessage: le = "No data available", loading: ue = !1, enableContextMenu: de = !0, persistColumnState: O = !0, onRowClick: k, rowClassName: fe, ...pe }) {
+	let [me, he] = l.useState(se ?? []), A = C ?? me, ge = l.useCallback((e, t) => {
+		let n = ne(A, e, t);
+		C === void 0 && he(n), w?.(n);
+	}, [
+		A,
+		C,
+		w
+	]), [_e, ve] = l.useState({}), j = T ?? _e, ye = l.useCallback((e, t) => {
+		let n = {
+			...j,
+			[e]: t
+		};
+		T === void 0 && ve(n), E?.(n);
+	}, [
+		j,
+		T,
+		E
+	]), be = l.useCallback(() => {
+		T === void 0 && ve({}), E?.({});
+	}, [T, E]), [xe, Se] = l.useState(/* @__PURE__ */ new Set()), M = S ?? xe, N = l.useCallback((e) => {
+		S === void 0 && Se(e), oe?.(e);
+	}, [S, oe]), [P, F] = l.useState(() => {
+		if (O && m) {
+			let e = ee(m);
+			if (e) return e;
+		}
+		let e = {};
+		return d.forEach((t, n) => {
+			e[t.key] = {
+				key: t.key,
+				width: t.width ?? 150,
+				visible: !0,
+				pinned: t.pinned ?? null,
+				order: n
+			};
+		}), e;
+	});
+	l.useEffect(() => {
+		O && m && te(m, P);
+	}, [
+		P,
+		O,
+		m
+	]);
+	let [I, L] = l.useState(null), [Ce, R] = l.useState(!1), we = l.useMemo(() => d.map((e) => e.key), [d]), Te = l.useMemo(() => v(p, j, D, we), [
+		p,
+		j,
+		D,
+		we
+	]), z = l.useMemo(() => re(Te, A), [Te, A]), B = l.useRef(null), V = z.length > 100, H = y(z.length, _, b, B), U = l.useMemo(() => [...d.filter((e) => P[e.key]?.visible !== !1)].sort((e, t) => (P[e.key]?.order ?? 0) - (P[t.key]?.order ?? 0)), [d, P]), W = l.useRef(null), Ee = l.useCallback((e, t) => {
+		t.preventDefault(), t.stopPropagation();
+		let n = P[e]?.width ?? 150;
+		W.current = {
+			key: e,
+			startX: t.clientX,
+			startWidth: n
+		};
+		let r = (e) => {
+			if (!W.current) return;
+			let t = e.clientX - W.current.startX, n = d.find((e) => e.key === W.current.key), r = Math.max(n?.minWidth ?? 40, W.current.startWidth + t);
+			n?.maxWidth && (r = Math.min(n.maxWidth, r)), F((e) => ({
+				...e,
+				[W.current.key]: {
+					...e[W.current.key],
+					width: r
+				}
+			}));
+		}, i = () => {
+			W.current = null, document.removeEventListener("pointermove", r), document.removeEventListener("pointerup", i);
+		};
+		document.addEventListener("pointermove", r), document.addEventListener("pointerup", i);
+	}, [P, d]), [G, De] = l.useState(null), Oe = l.useCallback((e) => {
+		De(e);
+	}, []), ke = l.useCallback((e) => {
+		G === null || G === e || (F((t) => {
+			let n = Object.values(t).sort((e, t) => e.order - t.order), r = n.findIndex((e) => e.key === G), i = n.findIndex((t) => t.key === e);
+			if (r < 0 || i < 0) return t;
+			let [a] = n.splice(r, 1);
+			if (!a) return t;
+			n.splice(i, 0, a);
+			let o = {};
+			return n.forEach((e, t) => {
+				o[e.key] = {
+					...e,
+					order: t
+				};
+			}), o;
+		}), De(null));
+	}, [G]), Ae = l.useCallback((e, t, n) => {
+		if (x === "multi") {
+			let e = new Set(M);
+			if (n.shiftKey && M.size > 0) {
+				let n = Math.max(...M), r = Math.min(n, t), i = Math.max(n, t);
+				for (let t = r; t <= i; t++) e.add(t);
+			} else n.ctrlKey || n.metaKey ? e.has(t) ? e.delete(t) : e.add(t) : (e.clear(), e.add(t));
+			N(e);
+		} else x === "single" && N(new Set([t]));
+		k?.(e, t);
+	}, [
+		x,
+		M,
+		N,
+		k
+	]), K = z.length > 0 && M.size === z.length, je = l.useCallback(() => {
+		N(K ? /* @__PURE__ */ new Set() : new Set(z.map((e, t) => t)));
+	}, [
+		K,
+		z,
+		N
+	]), Me = l.useCallback((e) => {
+		F((t) => ({
+			...t,
+			[e]: {
+				...t[e],
+				visible: !t[e]?.visible
+			}
+		}));
+	}, []), Ne = l.useCallback(() => {
+		let e = {};
+		if (d.forEach((t, n) => {
+			e[t.key] = {
+				key: t.key,
+				width: t.width ?? 150,
+				visible: !0,
+				pinned: t.pinned ?? null,
+				order: n
+			};
+		}), F(e), m) try {
+			localStorage.removeItem(h + m);
+		} catch {}
+	}, [d, m]), Pe = l.useMemo(() => V ? z.slice(H.startIndex, H.endIndex).map((e, t) => ({
+		row: e,
+		index: H.startIndex + t
+	})) : z.map((e, t) => ({
+		row: e,
+		index: t
+	})), [
+		z,
+		V,
+		H.startIndex,
+		H.endIndex
+	]), q = Object.values(j).filter((e) => e.type === "text" || e.type === "select" ? !!e.value : e.type === "multi-select" ? (e.values?.length ?? 0) > 0 : !1).length, [J, Fe] = l.useState(-1), [Y, Ie] = l.useState(0), Le = l.useCallback((e) => {
+		let t = z.length, n = U.length;
+		if (t === 0) return;
+		let r = J, i = Y, a = !0;
+		switch (e.key) {
+			case "ArrowDown":
+				r = Math.min(t - 1, J + 1);
+				break;
+			case "ArrowUp":
+				r = Math.max(0, J - 1);
+				break;
+			case "ArrowRight":
+				i = Math.min(n - 1, Y + 1);
+				break;
+			case "ArrowLeft":
+				i = Math.max(0, Y - 1);
+				break;
+			case "Home":
+				(e.ctrlKey || e.metaKey) && (r = 0), i = 0;
+				break;
+			case "End":
+				(e.ctrlKey || e.metaKey) && (r = t - 1), i = n - 1;
+				break;
+			case "PageDown":
+				r = Math.min(t - 1, J + 10);
+				break;
+			case "PageUp":
+				r = Math.max(0, J - 10);
+				break;
+			case "Enter":
+			case " ":
+				if (J >= 0 && J < t) {
+					let e = z[J];
+					e && k?.(e, J);
+				}
+				break;
+			case "Escape":
+				L(null), R(!1), Z(null);
+				break;
+			default: a = !1;
+		}
+		if (a && (e.preventDefault(), (r !== J || i !== Y) && (Fe(r), Ie(i), V && B.current))) {
+			let e = r * _, { scrollTop: t } = B.current, n = B.current.clientHeight;
+			e < t ? B.current.scrollTop = e : e + _ > t + n && (B.current.scrollTop = e + _ - n);
+		}
+	}, [
+		J,
+		Y,
+		z,
+		U.length,
+		k,
+		V,
+		_
+	]), [X, Z] = l.useState(null), Q = l.useRef(null);
+	l.useEffect(() => {
+		if (!X) return;
+		let e = (e) => {
+			Q.current && !Q.current.contains(e.target) && Z(null);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [X]);
+	let Re = l.useCallback((e, t) => {
+		t.preventDefault(), t.stopPropagation(), Z({
+			x: t.clientX,
+			y: t.clientY,
+			colKey: e
+		});
+	}, []), ze = l.useCallback((e, t) => {
+		F((n) => ({
+			...n,
+			[e]: {
+				...n[e],
+				pinned: t
+			}
+		})), Z(null);
+	}, []), $ = l.useCallback((e) => {
+		let t = d.find((t) => t.key === e);
+		if (!t) return;
+		let n = document.createElement("span");
+		n.style.cssText = "position:absolute;visibility:hidden;white-space:nowrap;font:inherit;font-size:14px", document.body.appendChild(n), n.textContent = t.label;
+		let r = n.offsetWidth + 48;
+		for (let t = 0; t < Math.min(z.length, 100); t++) {
+			let i = z[t][e];
+			n.textContent = g(i) ? "" : String(i), r = Math.max(r, n.offsetWidth + 24);
+		}
+		document.body.removeChild(n);
+		let i = t.minWidth ?? 40, a = t.maxWidth ?? 800, o = Math.max(i, Math.min(a, r));
+		F((t) => ({
+			...t,
+			[e]: {
+				...t[e],
+				width: o
+			}
+		})), Z(null);
+	}, [d, z]), Be = l.useCallback(() => {
+		for (let e of U) $(e.key);
+	}, [U, $]);
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "data-grid",
+		role: "grid",
+		tabIndex: 0,
+		className: e("cmm-grid-react relative w-full outline-none", t),
+		onKeyDown: Le,
+		...pe,
+		children: [
+			ue && /* @__PURE__ */ s("div", {
+				className: "absolute inset-0 z-20 flex items-center justify-center rounded-xl bg-surface-primary/60 backdrop-blur-sm",
+				children: /* @__PURE__ */ s("span", {
+					className: "text-foreground-muted animate-pulse text-sm",
+					children: "Loading..."
+				})
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex items-center gap-3 border-b border-border-glass px-3 py-2 text-xs text-foreground-muted",
+				children: [q > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c("span", {
+					className: "bg-primary/10 text-primary rounded px-1.5 py-0.5 text-[10px] font-semibold",
+					children: [
+						q,
+						" filter",
+						q > 1 ? "s" : ""
+					]
+				}), /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: be,
+					className: "text-foreground-muted hover:text-foreground text-[10px] underline",
+					children: "Clear"
+				})] }), /* @__PURE__ */ c("div", {
+					className: "ml-auto flex items-center gap-2",
+					children: [ce && /* @__PURE__ */ s("input", {
+						type: "text",
+						className: "border-border-glass text-foreground placeholder:text-foreground-muted focus:ring-primary w-36 rounded border bg-transparent px-2 py-1 text-[11px] focus:outline-none focus:ring-1",
+						placeholder: "Search...",
+						value: D,
+						onChange: (e) => ce(e.target.value)
+					}), /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => R(!Ce),
+						className: "text-foreground-muted hover:text-foreground hover:bg-glass-hover rounded p-1",
+						"aria-label": "Choose columns",
+						children: /* @__PURE__ */ s(u, { className: "size-3.5" })
+					})]
+				})]
+			}),
+			Ce && /* @__PURE__ */ c("div", {
+				className: "bg-surface-primary border-border-glass absolute right-0 top-10 z-30 w-56 rounded-lg border p-3 shadow-xl",
+				children: [
+					/* @__PURE__ */ c("div", {
+						className: "mb-2 flex items-center justify-between",
+						children: [/* @__PURE__ */ s("span", {
+							className: "text-foreground text-xs font-semibold",
+							children: "Columns"
+						}), /* @__PURE__ */ s("button", {
+							type: "button",
+							onClick: () => R(!1),
+							className: "text-foreground-muted hover:text-foreground",
+							children: /* @__PURE__ */ s(a, { className: "size-3.5" })
+						})]
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "max-h-64 space-y-1.5 overflow-y-auto",
+						children: d.filter((e) => e.hideable !== !1).map((e) => /* @__PURE__ */ c("label", {
+							className: "text-foreground hover:bg-glass-hover flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-xs",
+							children: [/* @__PURE__ */ s("input", {
+								type: "checkbox",
+								checked: P[e.key]?.visible !== !1,
+								onChange: () => Me(e.key),
+								className: "accent-primary"
+							}), e.label]
+						}, e.key))
+					}),
+					/* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: Ne,
+						className: "text-foreground-muted hover:text-foreground mt-2 w-full text-[10px] underline",
+						children: "Reset columns"
+					})
+				]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "border-border-glass relative w-full overflow-x-auto rounded-b-xl border border-t-0",
+				children: [/* @__PURE__ */ c("div", {
+					className: "bg-surface-secondary border-border-glass sticky top-0 z-10 flex border-b",
+					role: "row",
+					children: [x !== "none" && /* @__PURE__ */ s("div", {
+						className: "flex w-10 min-w-[40px] items-center justify-center px-2",
+						children: x === "multi" && /* @__PURE__ */ s("input", {
+							type: "checkbox",
+							checked: K,
+							onChange: je,
+							"aria-label": "Select all",
+							className: "accent-primary"
+						})
+					}), U.map((t) => {
+						let a = P[t.key], o = a?.width ?? t.width ?? 150, l = A.findIndex((e) => e.key === t.key), u = l >= 0 ? A[l] : void 0, d = j[t.key], m = !g(d) && (d.type === "text" && !!d.value || d.type === "multi-select" && (d.values?.length ?? 0) > 0 || d.type === "select" && !!d.value);
+						return /* @__PURE__ */ c("div", {
+							role: "columnheader",
+							className: e("group text-foreground-secondary relative flex h-10 items-center gap-1 whitespace-nowrap px-3 text-[11px] font-semibold uppercase tracking-wider select-none", t.sortable !== !1 && "hover:text-foreground cursor-pointer transition-colors", t.headerClassName, a?.pinned && "bg-surface-secondary sticky z-[1]", a?.pinned === "left" && "left-0", a?.pinned === "right" && "right-0"),
+							style: {
+								width: o,
+								minWidth: t.minWidth ?? 40
+							},
+							draggable: t.reorderable !== !1,
+							onDragStart: () => Oe(t.key),
+							onDragOver: (e) => {
+								e.preventDefault();
+							},
+							onDrop: () => ke(t.key),
+							onClick: (e) => {
+								t.sortable !== !1 && ge(t.key, e.shiftKey);
+							},
+							onContextMenu: (e) => Re(t.key, e),
+							"aria-sort": u ? u.direction === "asc" ? "ascending" : "descending" : void 0,
+							children: [
+								/* @__PURE__ */ s("span", {
+									className: "truncate",
+									children: t.label
+								}),
+								t.sortable !== !1 && /* @__PURE__ */ s("span", {
+									className: e("text-foreground-muted inline-flex shrink-0 transition-opacity", u ? "opacity-100" : "group-hover:opacity-40 opacity-0"),
+									children: u ? u.direction === "asc" ? /* @__PURE__ */ s(i, { className: "size-3" }) : /* @__PURE__ */ s(r, { className: "size-3" }) : /* @__PURE__ */ s(n, { className: "size-3" })
+								}),
+								u && A.length > 1 && /* @__PURE__ */ s("span", {
+									className: "bg-primary/20 text-primary flex size-3.5 items-center justify-center rounded-full text-[9px] font-bold",
+									children: l + 1
+								}),
+								m && /* @__PURE__ */ s("span", { className: "bg-primary size-1.5 shrink-0 rounded-full" }),
+								t.filterable !== !1 && /* @__PURE__ */ s("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation(), L(I === t.key ? null : t.key);
+									},
+									className: e("hover:bg-glass-hover rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100", I === t.key && "opacity-100"),
+									"aria-label": `Filter ${t.label}`,
+									children: /* @__PURE__ */ s(f, { className: "size-2.5" })
+								}),
+								t.resizable !== !1 && /* @__PURE__ */ s("div", {
+									className: "hover:bg-primary/40 absolute bottom-0 right-0 top-0 w-1 cursor-col-resize transition-colors",
+									onPointerDown: (e) => Ee(t.key, e),
+									onDoubleClick: (e) => {
+										e.stopPropagation(), $(t.key);
+									},
+									onClick: (e) => e.stopPropagation()
+								}),
+								I === t.key && /* @__PURE__ */ s(ae, {
+									column: t,
+									data: p,
+									...g(j[t.key]) ? {} : { currentFilter: j[t.key] },
+									onFilter: (e) => ye(t.key, e),
+									onClose: () => L(null)
+								})
+							]
+						}, t.key);
+					})]
+				}), /* @__PURE__ */ c("div", {
+					ref: B,
+					className: "relative overflow-y-auto",
+					style: V ? { height: Math.min(z.length * _, 600) } : void 0,
+					children: [V && /* @__PURE__ */ s("div", { style: {
+						height: H.totalHeight,
+						position: "relative"
+					} }), z.length === 0 ? /* @__PURE__ */ s("div", {
+						className: "text-foreground-muted flex items-center justify-center py-10 text-sm",
+						children: le
+					}) : Pe.map(({ row: t, index: n }) => /* @__PURE__ */ c("div", {
+						role: "row",
+						className: e("border-border-glass hover:bg-glass-hover flex border-b transition-colors", k && "cursor-pointer", n % 2 == 1 && "bg-foreground/[0.02]", M.has(n) && "bg-primary/5", J === n && "ring-primary/40 ring-1 ring-inset", fe?.(t, n)),
+						style: V ? {
+							position: "absolute",
+							top: n * _,
+							height: _,
+							width: "100%"
+						} : { height: _ },
+						"data-state": M.has(n) ? "selected" : void 0,
+						onClick: (e) => Ae(t, n, e),
+						children: [x !== "none" && /* @__PURE__ */ s("div", {
+							className: "flex w-10 min-w-[40px] items-center justify-center px-2",
+							children: /* @__PURE__ */ s("input", {
+								type: "checkbox",
+								checked: M.has(n),
+								onChange: () => {
+									let e = new Set(M);
+									e.has(n) ? e.delete(n) : e.add(n), N(e);
+								},
+								onClick: (e) => e.stopPropagation(),
+								"aria-label": `Select row ${n + 1}`,
+								className: "accent-primary"
+							})
+						}), U.map((r) => {
+							let i = P[r.key], a = i?.width ?? r.width ?? 150, o = t[r.key];
+							return /* @__PURE__ */ s("div", {
+								role: "gridcell",
+								className: e("text-foreground flex items-center truncate px-3 text-sm", r.cellClassName, i?.pinned && "bg-surface-primary sticky z-[1]", i?.pinned === "left" && "left-0", i?.pinned === "right" && "right-0"),
+								style: {
+									width: a,
+									minWidth: r.minWidth ?? 40
+								},
+								children: r.cell ? r.cell(o, t, n) : g(o) ? "" : String(o)
+							}, r.key);
+						})]
+					}, n))]
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "text-foreground-muted border-border-glass flex items-center justify-between border-t px-3 py-1.5 text-[11px] tabular-nums",
+				children: [/* @__PURE__ */ s("span", { children: p.length === z.length ? `Rows: ${p.length}` : `Rows: ${z.length} of ${p.length}` }), M.size > 0 && /* @__PURE__ */ c("span", {
+					className: "text-primary font-semibold",
+					children: [M.size, " selected"]
+				})]
+			}),
+			X && /* @__PURE__ */ s(ie, {
+				ref: Q,
+				x: X.x,
+				y: X.y,
+				colKey: X.colKey,
+				columns: d,
+				sort: A,
+				colState: P,
+				onSort: (e, t) => {
+					let n = t ? [{
+						key: e,
+						direction: t
+					}] : [];
+					C === void 0 && he(n), w?.(n), Z(null);
+				},
+				onPin: ze,
+				onAutosize: $,
+				onAutosizeAll: Be,
+				onChooseColumns: () => {
+					R(!0), Z(null);
+				},
+				onResetColumns: () => {
+					Ne(), Z(null);
+				}
+			})
+		]
+	});
+}
+var ie = l.forwardRef(({ x: e, y: t, colKey: n, columns: o, sort: l, colState: u, onSort: f, onPin: h, onAutosize: ee, onAutosizeAll: te, onChooseColumns: ne, onResetColumns: g }, re) => {
+	let _ = o.find((e) => e.key === n), v = l.find((e) => e.key === n), y = u[n]?.pinned ?? null, b = [];
+	return _?.sortable !== !1 && (b.push({
+		label: "Sort Ascending",
+		icon: /* @__PURE__ */ s(i, { className: "size-3.5" }),
+		action: () => f(n, "asc"),
+		disabled: v?.direction === "asc"
+	}), b.push({
+		label: "Sort Descending",
+		icon: /* @__PURE__ */ s(r, { className: "size-3.5" }),
+		action: () => f(n, "desc"),
+		disabled: v?.direction === "desc"
+	}), v && b.push({
+		label: "Clear Sort",
+		icon: /* @__PURE__ */ s(a, { className: "size-3.5" }),
+		action: () => f(n, null)
+	}), b.push({
+		label: "",
+		action: () => {},
+		separator: !0
+	})), b.push({
+		label: "Pin Left",
+		icon: /* @__PURE__ */ s(p, { className: "size-3.5" }),
+		action: () => h(n, "left"),
+		disabled: y === "left"
+	}), b.push({
+		label: "Pin Right",
+		icon: /* @__PURE__ */ s(p, { className: "size-3.5 rotate-180" }),
+		action: () => h(n, "right"),
+		disabled: y === "right"
+	}), y && b.push({
+		label: "Unpin",
+		icon: /* @__PURE__ */ s(a, { className: "size-3.5" }),
+		action: () => h(n, null)
+	}), b.push({
+		label: "",
+		action: () => {},
+		separator: !0
+	}), b.push({
+		label: "Autosize This Column",
+		action: () => ee(n)
+	}), b.push({
+		label: "Autosize All Columns",
+		action: () => te()
+	}), b.push({
+		label: "",
+		action: () => {},
+		separator: !0
+	}), b.push({
+		label: "Choose Columns",
+		icon: /* @__PURE__ */ s(d, { className: "size-3.5" }),
+		action: () => ne()
+	}), b.push({
+		label: "Reset Columns",
+		icon: /* @__PURE__ */ s(m, { className: "size-3.5" }),
+		action: () => g()
+	}), /* @__PURE__ */ s("div", {
+		ref: re,
+		className: "bg-surface-primary border-border-glass fixed z-50 w-52 rounded-lg border py-1 text-xs text-foreground shadow-2xl",
+		style: {
+			top: t,
+			left: e
+		},
+		children: b.map((e, t) => e.separator ? /* @__PURE__ */ s("div", { className: "border-border-glass my-1 border-t" }, t) : /* @__PURE__ */ c("button", {
+			type: "button",
+			disabled: e.disabled,
+			onClick: e.action,
+			className: "hover:bg-glass-hover flex w-full items-center gap-2.5 px-3 py-1.5 text-left transition-colors disabled:cursor-default disabled:opacity-40",
+			children: [e.icon && /* @__PURE__ */ s("span", {
+				className: "text-foreground-muted shrink-0",
+				children: e.icon
+			}), e.label]
+		}, t))
+	});
+});
+ie.displayName = "ContextMenu";
+function ae({ column: e, data: t, currentFilter: n, onFilter: r, onClose: i }) {
+	let [a, o] = l.useState(""), u = l.useRef(null);
+	if (l.useEffect(() => {
+		let e = (e) => {
+			u.current && !u.current.contains(e.target) && i();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [i]), (e.filterType ?? "text") === "text") return /* @__PURE__ */ s("div", {
+		ref: u,
+		className: "bg-surface-primary border-border-glass absolute left-0 top-full z-20 mt-1 w-48 rounded-lg border p-2 shadow-xl",
+		onClick: (e) => e.stopPropagation(),
+		children: /* @__PURE__ */ s("input", {
+			type: "text",
+			className: "border-border-glass text-foreground placeholder:text-foreground-muted focus:ring-primary w-full rounded border bg-transparent px-2 py-1.5 text-xs focus:outline-none focus:ring-1",
+			placeholder: `Filter ${e.label}...`,
+			value: n?.value ?? "",
+			onChange: (e) => r({
+				type: "text",
+				value: e.target.value
+			}),
+			autoFocus: !0
+		})
+	});
+	let d = e.filterOptions ?? Array.from(new Set(t.map((t) => {
+		let n = t[e.key];
+		return g(n) ? "" : String(n);
+	}).filter(Boolean))).sort(), f = new Set(n?.values ?? []), p = a ? d.filter((e) => e.toLowerCase().includes(a.toLowerCase())) : d;
+	return /* @__PURE__ */ c("div", {
+		ref: u,
+		className: "bg-surface-primary border-border-glass absolute left-0 top-full z-20 mt-1 w-52 rounded-lg border p-2 shadow-xl",
+		onClick: (e) => e.stopPropagation(),
+		children: [
+			/* @__PURE__ */ s("input", {
+				type: "text",
+				className: "border-border-glass text-foreground placeholder:text-foreground-muted focus:ring-primary mb-1.5 w-full rounded border bg-transparent px-2 py-1.5 text-xs focus:outline-none focus:ring-1",
+				placeholder: "Search...",
+				value: a,
+				onChange: (e) => o(e.target.value),
+				autoFocus: !0
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "max-h-40 space-y-0.5 overflow-y-auto",
+				children: p.map((e) => /* @__PURE__ */ c("label", {
+					className: "text-foreground hover:bg-glass-hover flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-xs",
+					children: [/* @__PURE__ */ s("input", {
+						type: "checkbox",
+						checked: f.has(e),
+						onChange: () => {
+							let t = new Set(f);
+							t.has(e) ? t.delete(e) : t.add(e), r({
+								type: "multi-select",
+								values: Array.from(t)
+							});
+						},
+						className: "accent-primary"
+					}), e]
+				}, e))
+			}),
+			f.size > 0 && /* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: () => r({
+					type: "multi-select",
+					values: []
+				}),
+				className: "text-foreground-muted hover:text-foreground mt-1.5 w-full text-center text-[10px] underline",
+				children: "Clear filter"
+			})
+		]
+	});
+}
+//#endregion
+export { b as DataGrid };
+
+//# sourceMappingURL=data-grid.js.map