@box-kite/react 2.2.4 → 2.2.6

package/dataGridList.mjs

@@ -0,0 +1,1314 @@
+import e from "./box.mjs";
+import { Path as t, Svg as n } from "./components/svg.mjs";
+import r from "./components/button.mjs";
+import i from "./components/visuallyHidden.mjs";
+import a from "./components/flex.mjs";
+import o from "./components/checkbox.mjs";
+import s from "./components/textbox.mjs";
+import { H3 as c, Span as l } from "./components/semantics.mjs";
+import { a as u, c as d, d as f, f as p, i as m, l as h, m as g, n as _, o as v, p as y, r as b, s as x, t as S, u as C } from "./components/dataGrid.mjs";
+import w from "./components/dialog.mjs";
+import T from "./components/list.mjs";
+import E from "./components/radioButton.mjs";
+import ee from "./components/skeleton.mjs";
+import { t as D } from "./dataGridListLayout.mjs";
+import { memo as O, useCallback as k, useEffect as A, useRef as j, useState as M } from "react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+//#region src/components/dataGrid/components/dataGridListAggregate.tsx
+function I(e) {
+	let { cell: t } = e, { AggregateCell: n } = t.column;
+	return n ? /* @__PURE__ */ P(n, { cell: t }) : /* @__PURE__ */ P(N, { children: t.value ?? "—" });
+}
+I.displayName = "DataGridListAggregate";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListFooter.tsx
+function L(t) {
+	let { grid: n, shown: i } = t, { list: o, pagination: s, aggregation: c } = n, l = n.componentName, u = n.localeText, d = s.state, f = c.hasFooter ? c.footerCells.value.filter((e) => e.column.aggregate) : [];
+	return /* @__PURE__ */ F(N, { children: [f.length > 0 && /* @__PURE__ */ F(e, {
+		bgColor: "currentColor/3",
+		px: 4,
+		py: 3,
+		children: [/* @__PURE__ */ P(e, {
+			fontWeight: 600,
+			fontSize: 14,
+			mb: 1,
+			children: c.footerLabel
+		}), /* @__PURE__ */ P(e, {
+			tag: "dl",
+			display: "grid",
+			gridTemplateColumns: 2,
+			columnGap: 4,
+			rowGap: 2,
+			m: 0,
+			children: f.map((t) => /* @__PURE__ */ F(e, {
+				minWidth: 0,
+				children: [/* @__PURE__ */ P(e, {
+					tag: "dt",
+					component: "list.muted",
+					fontSize: 12,
+					lineHeight: 16,
+					children: t.column.header ?? String(t.column.key)
+				}), /* @__PURE__ */ P(e, {
+					tag: "dd",
+					m: 0,
+					fontSize: 14,
+					lineHeight: 20,
+					fontWeight: 600,
+					children: /* @__PURE__ */ P(I, { cell: t })
+				})]
+			}, t.column.key))
+		})]
+	}), d ? /* @__PURE__ */ P(a, {
+		component: "list.muted",
+		d: "column",
+		gap: 2,
+		ai: "center",
+		px: 4,
+		py: 4,
+		fontSize: 13,
+		css: { fontVariantNumeric: "tabular-nums" },
+		children: /* @__PURE__ */ F(a, {
+			ai: "center",
+			jc: "space-between",
+			gap: 3,
+			width: "fit",
+			children: [
+				/* @__PURE__ */ P(r, {
+					type: "button",
+					component: `${l}.list.button`,
+					...D.ICON_BUTTON,
+					borderRadius: 3,
+					disabled: !s.canGoPrev,
+					onClick: s.prevPage,
+					props: { "aria-label": u.previousPage },
+					children: /* @__PURE__ */ P(p, {
+						width: "18px",
+						height: "18px",
+						rotate: 90,
+						rtl: { rotate: -90 }
+					})
+				}),
+				/* @__PURE__ */ P(e, {
+					textAlign: "center",
+					children: u.pageRowRange(s.startItem, s.endItem, s.totalItems)
+				}),
+				/* @__PURE__ */ P(r, {
+					type: "button",
+					component: `${l}.list.button`,
+					...D.ICON_BUTTON,
+					borderRadius: 3,
+					disabled: !s.canGoNext,
+					onClick: s.nextPage,
+					props: { "aria-label": u.nextPage },
+					children: /* @__PURE__ */ P(p, {
+						width: "18px",
+						height: "18px",
+						rotate: -90,
+						rtl: { rotate: 90 }
+					})
+				})
+			]
+		})
+	}) : (o.hasMore || i !== void 0) && /* @__PURE__ */ F(a, {
+		component: "list.muted",
+		d: "column",
+		gap: 2,
+		ai: "center",
+		px: 4,
+		py: 4,
+		fontSize: 13,
+		css: { fontVariantNumeric: "tabular-nums" },
+		children: [o.hasMore && /* @__PURE__ */ P(r, {
+			type: "button",
+			component: `${l}.list.button`,
+			width: "fit",
+			height: 11,
+			borderRadius: 3,
+			fontSize: 15,
+			fontWeight: 500,
+			color: "indigo-600",
+			cursor: "pointer",
+			theme: { dark: { color: "indigo-300" } },
+			onClick: o.showMore,
+			children: u.showMore(o.nextBatch)
+		}), i !== void 0 && /* @__PURE__ */ P(e, { children: u.shownCount(i, n.source.enabled ? n.totalRowCount : n.filterStats.filtered) })]
+	})] });
+}
+L.displayName = "DataGridListFooter";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListGroup.tsx
+function R(e) {
+	let { row: t } = e, { grid: n } = t, r = t.cells.flatMap((e) => e.aggregate ? [e.aggregate] : []), i = t.placeholder ? "" : String(t.groupValue);
+	return /* @__PURE__ */ F(T.Item, {
+		size: "sm",
+		bgColor: "currentColor/3",
+		ps: 4 + Math.min(t.depth, 3) * 4,
+		props: { "aria-busy": t.placeholder || void 0 },
+		children: [
+			n.list.selecting && t.selectable && /* @__PURE__ */ P(T.Actions, { children: /* @__PURE__ */ P(o, {
+				variant: "datagrid",
+				checked: t.selected,
+				indeterminate: t.indeterminate,
+				onChange: t.toggleSelectAll,
+				props: { "aria-label": n.localeText.selectGroupRows(i) }
+			}) }),
+			/* @__PURE__ */ P(p, {
+				width: "16px",
+				height: "16px",
+				flexShrink: 0,
+				rotate: t.expanded ? 0 : -90,
+				rtl: { rotate: t.expanded ? 0 : 90 }
+			}),
+			/* @__PURE__ */ F(T.Content, { children: [/* @__PURE__ */ P(T.Title, {
+				lines: 1,
+				fontSize: 14,
+				fontWeight: 600,
+				children: /* @__PURE__ */ P(T.Action, {
+					onClick: () => t.toggleRow(),
+					props: { "aria-expanded": t.expanded },
+					children: i
+				})
+			}), r.length > 0 && /* @__PURE__ */ P(T.Row, {
+				secondary: !0,
+				wrap: !0,
+				columnGap: 4,
+				fontSize: 13,
+				css: { fontVariantNumeric: "tabular-nums" },
+				children: r.map((e) => /* @__PURE__ */ F(l, {
+					display: "inline-flex",
+					gap: 1,
+					children: [/* @__PURE__ */ P(l, { children: e.column.header ?? String(e.column.key) }), /* @__PURE__ */ P(l, {
+						fontWeight: 600,
+						children: /* @__PURE__ */ P(I, { cell: e })
+					})]
+				}, e.column.key))
+			})] }),
+			/* @__PURE__ */ P(T.Meta, {
+				px: 2,
+				borderRadius: 999,
+				fontSize: 12,
+				fontWeight: 600,
+				lineHeight: 20,
+				bgColor: "currentColor/10",
+				alignSelf: "center",
+				children: t.count
+			})
+		]
+	});
+}
+R.displayName = "DataGridListGroup";
+var te = O(R);
+//#endregion
+//#region src/components/dataGrid/components/dataGridListValue.tsx
+function z(e) {
+	let { row: t, column: n } = e, r = t.cells.find((e) => e.column === n);
+	if (!r) return null;
+	if (n.Cell) return /* @__PURE__ */ P(n.Cell, { cell: r });
+	let { value: i } = r;
+	if (typeof i == "boolean") return /* @__PURE__ */ P(N, { children: i ? r.grid.localeText.booleanTrue : r.grid.localeText.booleanFalse });
+	let a = C(n, i);
+	return a && i != null && i !== "" ? /* @__PURE__ */ P(h, {
+		value: i,
+		format: a
+	}) : /* @__PURE__ */ P(N, { children: i == null || i === "" ? "—" : String(i) });
+}
+z.displayName = "DataGridListValue";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListItem.tsx
+function B(t) {
+	let { row: n, index: i, position: a, setSize: s } = t, { grid: c } = n, { list: u } = c, { title: d, kicker: f, subtitle: m, end: h, fields: g } = u.layout.value, { selecting: _ } = u, v = u.recordViewEnabled && !n.placeholder, b = y(n) ? n : void 0, x = c.props.def.rowDetail, S = c.localeText, C = {
+		"aria-posinset": a,
+		"aria-setsize": s
+	};
+	if (n.placeholder) return /* @__PURE__ */ P(T.Item, {
+		props: {
+			...C,
+			"aria-busy": !0
+		},
+		children: /* @__PURE__ */ P(ee, {
+			lines: 2,
+			flex1: !0
+		})
+	});
+	let w = d ? /* @__PURE__ */ P(z, {
+		row: n,
+		column: d
+	}) : S.unnamedRow(n.rowIndex + 1), E = d ? String(n.cells.find((e) => e.column === d)?.value ?? "") : "", O = u.checkboxId(n.key);
+	return /* @__PURE__ */ F(T.Item, {
+		ai: "start",
+		selected: !!c.props.def.rowSelection && n.selected,
+		chevron: v && !_,
+		ps: b ? 4 + Math.min(b.level, 3) * 4 : void 0,
+		props: {
+			...C,
+			"data-list-key": String(n.key)
+		},
+		children: [_ && /* @__PURE__ */ P(T.Actions, {
+			width: 6,
+			jc: "center",
+			alignSelf: "center",
+			children: /* @__PURE__ */ P(o, {
+				id: O,
+				variant: "datagrid",
+				checked: n.selected,
+				indeterminate: n.indeterminate,
+				onChange: n.toggleSelection
+			})
+		}), /* @__PURE__ */ F(T.Content, { children: [
+			f && /* @__PURE__ */ P(T.Overline, {
+				lines: 1,
+				children: /* @__PURE__ */ P(z, {
+					row: n,
+					column: f
+				})
+			}),
+			/* @__PURE__ */ F(T.Row, {
+				ai: "start",
+				gap: 3,
+				children: [/* @__PURE__ */ F(T.Row, {
+					jc: "start",
+					ai: "center",
+					gap: 1,
+					flex1: !0,
+					children: [b?.hasChildren && /* @__PURE__ */ P(T.Actions, {
+						ms: -2,
+						children: /* @__PURE__ */ P(r, {
+							type: "button",
+							component: `${c.componentName}.list.toggle`,
+							...D.ICON_BUTTON,
+							width: 8,
+							height: 8,
+							onClick: b.toggleTree,
+							props: {
+								"aria-expanded": b.treeExpanded,
+								"aria-label": (b.treeExpanded ? S.collapseTreeRow : S.expandTreeRow)(E || S.unnamedRow(n.rowIndex + 1))
+							},
+							children: /* @__PURE__ */ P(p, {
+								width: "16px",
+								height: "16px",
+								rotate: b.treeExpanded ? 0 : -90,
+								rtl: { rotate: b.treeExpanded ? 0 : 90 }
+							})
+						})
+					}), /* @__PURE__ */ P(T.Title, {
+						lines: 1,
+						flex1: !0,
+						fontWeight: 600,
+						children: _ ? /* @__PURE__ */ P(T.Action, {
+							props: { htmlFor: O },
+							children: w
+						}) : v ? /* @__PURE__ */ P(T.Action, {
+							props: { "aria-haspopup": "dialog" },
+							onClick: () => u.openRecord(n, i),
+							children: w
+						}) : w
+					})]
+				}), h && /* @__PURE__ */ F(T.End, {
+					fontSize: 16,
+					fontWeight: 600,
+					lineHeight: 22,
+					...D.TRUNCATE,
+					children: [/* @__PURE__ */ P(z, {
+						row: n,
+						column: h
+					}), /* @__PURE__ */ P(T.Meta, {
+						fontWeight: 400,
+						...D.LABEL,
+						children: h.header ?? String(h.key)
+					})]
+				})]
+			}),
+			m.length > 0 && /* @__PURE__ */ P(T.Description, {
+				lines: 1,
+				children: m.map((e, t) => /* @__PURE__ */ F(l, { children: [t > 0 && " · ", /* @__PURE__ */ P(z, {
+					row: n,
+					column: e
+				})] }, e.key))
+			}),
+			g.length > 0 && /* @__PURE__ */ P(T.Fields, {
+				mt: 2,
+				css: { gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
+				children: g.map((t) => /* @__PURE__ */ P(T.Field, {
+					label: t.header ?? String(t.key),
+					children: /* @__PURE__ */ P(e, {
+						...D.TRUNCATE,
+						children: /* @__PURE__ */ P(z, {
+							row: n,
+							column: t
+						})
+					})
+				}, t.key))
+			}),
+			x && /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(T.Actions, {
+				alignSelf: "start",
+				mt: 1,
+				ms: -2,
+				children: /* @__PURE__ */ F(r, {
+					type: "button",
+					component: `${c.componentName}.list.toggle`,
+					display: "inline-flex",
+					ai: "center",
+					gap: 1,
+					minHeight: 8,
+					px: 2,
+					borderRadius: 2,
+					fontSize: 13,
+					fontWeight: 500,
+					cursor: "pointer",
+					onClick: n.toggleDetail,
+					props: { "aria-expanded": n.expanded },
+					children: [/* @__PURE__ */ P(p, {
+						width: "14px",
+						height: "14px",
+						rotate: n.expanded ? 0 : -90,
+						rtl: { rotate: n.expanded ? 0 : 90 }
+					}), S.details]
+				})
+			}), n.expanded && /* @__PURE__ */ P(T.Actions, {
+				display: "block",
+				mt: 2,
+				children: /* @__PURE__ */ P(e, {
+					component: `${c.componentName}.list.detail`,
+					p: 3,
+					borderRadius: 2,
+					fontSize: 14,
+					children: x.content(n.data)
+				})
+			})] })
+		] })]
+	});
+}
+B.displayName = "DataGridListItem";
+var ne = O(B);
+//#endregion
+//#region src/icons/closeIcon.tsx
+function V(e) {
+	return /* @__PURE__ */ P(n, {
+		viewBox: "0 0 24 24",
+		width: "1.25rem",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		...e,
+		children: /* @__PURE__ */ P(t, {
+			d: "M6 6l12 12M18 6L6 18",
+			strokeLinecap: "round"
+		})
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridListSheet.tsx
+var re = 80;
+function H(t) {
+	let { grid: n, open: i, onOpen: o, onClose: s, title: c, trigger: l, actions: u, footer: d, tall: f, bodyProps: p, bodyRef: m, onKeyDown: h, children: g } = t, _ = n.componentName, v = `${_}.list.sheet.line`, y = j(null), b = k((e) => {
+		let t = e.currentTarget.closest("dialog");
+		e.button !== 0 || !t || e.target.closest("button") || (y.current = {
+			id: e.pointerId,
+			y: e.clientY,
+			dy: 0,
+			dialog: t
+		}, e.currentTarget.setPointerCapture(e.pointerId));
+	}, []), x = k((e) => {
+		let t = y.current;
+		if (!t || t.id !== e.pointerId) return;
+		let { dialog: n } = t;
+		t.dy = Math.max(0, e.clientY - t.y), n.style.transition = "none", n.style.translate = `0 ${t.dy}px`;
+	}, []), S = k(() => {
+		let e = y.current;
+		if (y.current = null, !e) return;
+		let { dialog: t } = e;
+		t.style.transition = "", t.style.translate = "", e.dy > re && s();
+	}, [s]);
+	return /* @__PURE__ */ F(w, {
+		component: `${_}.list.sheet`,
+		display: "flex",
+		d: "column",
+		css: f ? { minHeight: "min(32rem, calc(100dvh - 2rem))" } : void 0,
+		open: i,
+		onOpenChange: (e) => e ? o?.() : s(),
+		trigger: l,
+		props: { onKeyDown: h },
+		children: [
+			/* @__PURE__ */ F(a, {
+				d: "column",
+				flexShrink: 0,
+				css: { touchAction: "none" },
+				props: {
+					onPointerDown: b,
+					onPointerMove: x,
+					onPointerUp: S,
+					onPointerCancel: S
+				},
+				children: [/* @__PURE__ */ P(e, {
+					width: 9,
+					height: 1.25,
+					mt: 2,
+					mx: "auto",
+					borderRadius: 999,
+					bgColor: "gray-300",
+					theme: { dark: { bgColor: "gray-600" } },
+					props: { "aria-hidden": !0 }
+				}), /* @__PURE__ */ F(a, {
+					component: `${v}`,
+					ai: "center",
+					gap: 2,
+					ps: 4,
+					pe: 2,
+					py: 2,
+					bb: 1,
+					children: [
+						/* @__PURE__ */ P(w.Title, {
+							flex1: !0,
+							minWidth: 0,
+							m: 0,
+							fontSize: 17,
+							fontWeight: 600,
+							lineHeight: 24,
+							...D.TRUNCATE,
+							children: c
+						}),
+						u,
+						/* @__PURE__ */ P(r, {
+							type: "button",
+							component: `${_}.list.sheet.button`,
+							...D.ICON_BUTTON,
+							onClick: s,
+							props: { "aria-label": n.localeText.close },
+							children: /* @__PURE__ */ P(V, {})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ P(e, {
+				ref: m,
+				flex1: !0,
+				overflowY: "auto",
+				px: 4,
+				py: 2,
+				css: {
+					overscrollBehavior: "contain",
+					touchAction: "pan-y"
+				},
+				props: p,
+				children: g
+			}),
+			d && /* @__PURE__ */ P(a, {
+				component: v,
+				gap: 3,
+				flexShrink: 0,
+				px: 4,
+				pt: 3,
+				pb: 4,
+				bt: 1,
+				children: d
+			})
+		]
+	});
+}
+H.displayName = "DataGridListSheet";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListRecord.tsx
+var ie = 60;
+function ae({ cell: t, index: n }) {
+	let { grid: i, column: o } = t, s = i.componentName, c = String(o.header ?? o.key), { editing: l } = t, u = j(null), d = j(!1);
+	return A(() => {
+		d.current && !l && u.current?.focus(), d.current = l;
+	}, [l]), /* @__PURE__ */ F(e, {
+		component: `${s}.list.sheet.line`,
+		py: 3,
+		bb: 1,
+		children: [/* @__PURE__ */ P(e, {
+			tag: "dt",
+			component: "list.muted",
+			fontSize: 13,
+			lineHeight: 18,
+			children: c
+		}), /* @__PURE__ */ F(e, {
+			tag: "dd",
+			display: "flex",
+			ai: "center",
+			gap: 2,
+			m: 0,
+			fontSize: 16,
+			lineHeight: 24,
+			css: {
+				fontVariantNumeric: "tabular-nums",
+				overflowWrap: "anywhere"
+			},
+			children: [l ? /* @__PURE__ */ P(a, {
+				component: `${s}.list.sheet.input`,
+				...D.INPUT,
+				flex1: !0,
+				ai: "center",
+				px: 1,
+				children: /* @__PURE__ */ P(f, {
+					cell: t,
+					row: -1,
+					columnIndex: n
+				})
+			}) : /* @__PURE__ */ P(e, {
+				flex1: !0,
+				minWidth: 0,
+				children: /* @__PURE__ */ P(z, {
+					row: t.row,
+					column: o
+				})
+			}), t.editable && !l && /* @__PURE__ */ P(r, {
+				ref: u,
+				type: "button",
+				component: `${s}.list.sheet.button`,
+				...D.SHEET_BUTTON,
+				height: 10,
+				onClick: () => t.beginEdit(),
+				props: { "aria-label": i.localeText.editCell(c) },
+				children: i.localeText.edit
+			})]
+		})]
+	});
+}
+function U(t) {
+	let { grid: n } = t, { list: i } = n, s = n.componentName, l = n.localeText, u = i.record, d = i.recordPosition, { title: f } = i.layout.value, m = j(null), h = j(null), g = u?.key;
+	A(() => {
+		h.current?.scrollTo?.({ top: 0 });
+	}, [g]);
+	let _ = k(() => {
+		let e = i.record?.key;
+		n.edits.cancel(), i.closeRecord(), requestAnimationFrame(() => {
+			let t = n.sizingElement?.querySelectorAll("[data-list-key]") ?? [];
+			Array.from(t).find((t) => t.dataset.listKey === String(e))?.querySelector("[data-list-action]")?.focus();
+		});
+	}, [n, i]), v = k((e) => {
+		n.edits.isOpen && n.edits.commit(), n.edits.isOpen || i.stepRecord(e);
+	}, [n, i]), y = (e) => {
+		m.current = e.pointerType === "touch" ? {
+			x: e.clientX,
+			y: e.clientY
+		} : null;
+	}, b = (e) => {
+		let t = m.current;
+		if (m.current = null, !t) return;
+		let r = e.clientX - t.x, i = e.clientY - t.y;
+		Math.abs(r) < ie || Math.abs(r) < Math.abs(i) * 1.5 || v(r < 0 === n.isRtl ? -1 : 1);
+	}, x = (e) => {
+		if (e.target.closest("input,select,textarea,[role=\"combobox\"]")) return;
+		let t = n.isRtl ? "ArrowLeft" : "ArrowRight", r = n.isRtl ? "ArrowRight" : "ArrowLeft";
+		(e.key === t || e.key === r) && (e.preventDefault(), v(e.key === t ? 1 : -1));
+	}, S = u && d && /* @__PURE__ */ F(a, {
+		ai: "center",
+		gap: .5,
+		flexShrink: 0,
+		children: [
+			/* @__PURE__ */ P(r, {
+				type: "button",
+				component: `${s}.list.sheet.button`,
+				...D.ICON_BUTTON,
+				disabled: !i.hasPreviousRecord,
+				onClick: () => v(-1),
+				props: { "aria-label": l.previousRow },
+				children: /* @__PURE__ */ P(p, {
+					width: "18px",
+					height: "18px",
+					rotate: 90,
+					rtl: { rotate: -90 }
+				})
+			}),
+			/* @__PURE__ */ P(e, {
+				fontSize: 13,
+				color: "gray-500",
+				textWrap: "nowrap",
+				css: { fontVariantNumeric: "tabular-nums" },
+				props: { "aria-live": "polite" },
+				children: l.recordPosition(d.position, d.total)
+			}),
+			/* @__PURE__ */ P(r, {
+				type: "button",
+				component: `${s}.list.sheet.button`,
+				...D.ICON_BUTTON,
+				disabled: !i.hasNextRecord,
+				onClick: () => v(1),
+				props: { "aria-label": l.nextRow },
+				children: /* @__PURE__ */ P(p, {
+					width: "18px",
+					height: "18px",
+					rotate: -90,
+					rtl: { rotate: 90 }
+				})
+			})
+		]
+	}), C = n.props.def.rowDetail;
+	return /* @__PURE__ */ P(H, {
+		grid: n,
+		open: !!u,
+		onClose: _,
+		tall: !0,
+		title: u && f ? /* @__PURE__ */ P(z, {
+			row: u,
+			column: f
+		}) : "",
+		actions: S,
+		onKeyDown: x,
+		bodyRef: h,
+		bodyProps: {
+			onPointerDown: y,
+			onPointerUp: b
+		},
+		children: u && /* @__PURE__ */ F(N, { children: [
+			n.props.def.rowSelection && /* @__PURE__ */ P(e, {
+				py: 3,
+				children: /* @__PURE__ */ P(o, {
+					variant: "datagrid",
+					checked: u.selected,
+					onChange: u.toggleSelection,
+					label: l.selectRow(u.rowIndex + 1),
+					labelProps: {
+						display: "flex",
+						ai: "center",
+						gap: 3,
+						fontSize: 15
+					}
+				})
+			}),
+			/* @__PURE__ */ P(e, {
+				tag: "dl",
+				m: 0,
+				children: i.recordColumns.map((e) => {
+					let t = u.cells.findIndex((t) => t.column === e);
+					return t === -1 ? null : /* @__PURE__ */ P(ae, {
+						cell: u.cells[t],
+						index: t
+					}, e.key);
+				})
+			}),
+			C && /* @__PURE__ */ F(a, {
+				d: "column",
+				gap: 2,
+				py: 3,
+				children: [/* @__PURE__ */ P(c, {
+					m: 0,
+					fontSize: 14,
+					fontWeight: 600,
+					children: l.details
+				}), C.content(u.data)]
+			})
+		] })
+	});
+}
+U.displayName = "DataGridListRecord";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListSelectionBar.tsx
+function W(t) {
+	let { grid: n } = t, i = n.componentName, o = n.localeText, s = n.selectedRows.size;
+	return !n.props.def.rowSelection || s === 0 ? null : /* @__PURE__ */ F(a, {
+		component: `${i}.list.selectionBar`,
+		position: "sticky",
+		bottom: 0,
+		zIndex: 2,
+		ai: "center",
+		gap: 2,
+		px: 4,
+		py: 2,
+		fontSize: 14,
+		fontWeight: 500,
+		children: [
+			/* @__PURE__ */ P(e, {
+				flex1: !0,
+				minWidth: 0,
+				textWrap: "nowrap",
+				css: { fontVariantNumeric: "tabular-nums" },
+				children: o.selectedRows(s)
+			}),
+			!n.allRowsSelected && /* @__PURE__ */ P(r, {
+				type: "button",
+				minHeight: 10,
+				px: 3,
+				borderRadius: 2,
+				fontSize: 14,
+				fontWeight: 500,
+				cursor: "pointer",
+				active: { bgColor: "white/15" },
+				theme: { dark: { active: { bgColor: "black/10" } } },
+				onClick: n.toggleSelectAllRows,
+				children: o.selectAll
+			}),
+			/* @__PURE__ */ P(r, {
+				type: "button",
+				minHeight: 10,
+				px: 3,
+				borderRadius: 2,
+				fontSize: 14,
+				fontWeight: 500,
+				cursor: "pointer",
+				active: { bgColor: "white/15" },
+				theme: { dark: { active: { bgColor: "black/10" } } },
+				onClick: n.clearSelection,
+				children: o.clearSelection
+			})
+		]
+	});
+}
+W.displayName = "DataGridListSelectionBar";
+//#endregion
+//#region src/icons/filterIcon.tsx
+function G(e) {
+	return /* @__PURE__ */ P(n, {
+		viewBox: "0 0 24 24",
+		width: "1rem",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		...e,
+		children: /* @__PURE__ */ P(t, {
+			d: "M4 6h16M7 12h10M10 18h4",
+			strokeLinecap: "round"
+		})
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridListFilter.tsx
+var K = 8, q = [
+	{
+		value: "eq",
+		label: "="
+	},
+	{
+		value: "ne",
+		label: "≠"
+	},
+	{
+		value: "gt",
+		label: ">"
+	},
+	{
+		value: "gte",
+		label: "≥"
+	},
+	{
+		value: "lt",
+		label: "<"
+	},
+	{
+		value: "lte",
+		label: "≤"
+	},
+	{
+		value: "between",
+		label: "↔"
+	}
+];
+function oe({ column: e }) {
+	let { currentFilter: t } = e, n = e.grid.componentName, r = e.grid.localeText, [i, a] = M(t?.type === "text" ? t.value : ""), { debounce: o } = x(t, (e) => d.textMatches(i, e), (e) => a(e?.type === "text" ? e.value : ""));
+	return /* @__PURE__ */ P(s, {
+		component: `${n}.list.sheet.input`,
+		...D.INPUT,
+		type: "search",
+		value: i,
+		placeholder: e.filterConfig?.placeholder ?? r.filterPlaceholder,
+		onChange: (t) => {
+			let n = t.target.value;
+			a(n), o("value", () => e.setTextFilter(n));
+		},
+		props: { "aria-label": r.filterColumn(String(e.header ?? e.key)) }
+	});
+}
+function se({ column: t }) {
+	let { currentFilter: n } = t, r = t.grid.componentName, i = t.grid.localeText, o = String(t.header ?? t.key), c = t.filterConfig, [l, u] = M(() => d.numberDraft(n)), f = j(l), p = k((e) => {
+		f.current = e, u(e);
+	}, []), { debounce: m, cancel: h } = x(n, (e) => d.numberMatches(l, e), (e) => p(d.numberDraft(e))), g = (e, n) => {
+		p({
+			...f.current,
+			...e
+		});
+		let r = () => t.setNumberFilter(f.current.operator, f.current.value, f.current.valueTo);
+		n ? m("value", r) : (h(), r());
+	}, _ = (e, t, n, i) => /* @__PURE__ */ P(s, {
+		component: `${r}.list.sheet.input`,
+		...D.INPUT,
+		type: "number",
+		value: e,
+		step: c?.step,
+		placeholder: n,
+		onChange: (e) => g({ [i]: e.target.value }, !0),
+		props: {
+			"aria-label": t,
+			inputMode: "decimal",
+			min: c?.min,
+			max: c?.max
+		}
+	});
+	return /* @__PURE__ */ F(a, {
+		gap: 2,
+		ai: "center",
+		children: [
+			/* @__PURE__ */ P(e, {
+				tag: "select",
+				component: `${r}.list.sheet.input`,
+				...D.INPUT,
+				width: 18,
+				flexShrink: 0,
+				props: {
+					value: l.operator,
+					"aria-label": i.filterComparison(o),
+					onChange: (e) => g({ operator: e.target.value }, !1)
+				},
+				children: q.map((e) => /* @__PURE__ */ P("option", {
+					value: e.value,
+					children: e.label
+				}, e.value))
+			}),
+			_(l.value, l.operator === "between" ? i.filterFrom(o) : i.filterColumn(o), l.operator === "between" ? i.filterFromPlaceholder : c?.placeholder ?? i.filterValuePlaceholder, "value"),
+			l.operator === "between" && _(l.valueTo, i.filterTo(o), i.filterToPlaceholder, "valueTo")
+		]
+	});
+}
+function ce({ column: e }) {
+	let t = g(!0);
+	return t ? /* @__PURE__ */ P(t.ListDateFilter, { column: e }) : null;
+}
+function J({ column: e }) {
+	let { currentFilter: t } = e, n = e.grid.componentName, i = e.grid.localeText, c = t?.type === "multiselect" ? t.values : [], l = e.filterOptions, [u, d] = M(""), f = (t) => {
+		e.setMultiselectFilter(c.includes(t) ? c.filter((e) => e !== t) : [...c, t]);
+	};
+	if (l.length <= K) return /* @__PURE__ */ P(a, {
+		flexWrap: "wrap",
+		gap: 2,
+		children: l.map((e) => /* @__PURE__ */ P(r, {
+			type: "button",
+			component: `${n}.list.sheet.chip`,
+			display: "inline-flex",
+			ai: "center",
+			minHeight: 10,
+			px: 3.5,
+			borderRadius: 999,
+			fontSize: 14,
+			cursor: "pointer",
+			onClick: () => f(e.value),
+			props: { "aria-pressed": c.includes(e.value) },
+			children: e.label
+		}, String(e.value)))
+	});
+	let p = u.trim().toLocaleLowerCase(), m = p ? l.filter((e) => e.label.toLocaleLowerCase().includes(p)) : l;
+	return /* @__PURE__ */ F(a, {
+		d: "column",
+		gap: 2,
+		children: [/* @__PURE__ */ P(s, {
+			component: `${n}.list.sheet.input`,
+			...D.INPUT,
+			type: "search",
+			value: u,
+			placeholder: i.filterSelectSearchPlaceholder,
+			onChange: (e) => d(e.target.value),
+			props: { "aria-label": i.filterColumn(String(e.header ?? e.key)) }
+		}), /* @__PURE__ */ P(a, {
+			d: "column",
+			maxHeight: 64,
+			overflowY: "auto",
+			children: m.map((e) => /* @__PURE__ */ P(o, {
+				checked: c.includes(e.value),
+				onChange: () => f(e.value),
+				label: e.label,
+				labelProps: {
+					component: `${n}.list.sheet.line`,
+					display: "flex",
+					ai: "center",
+					gap: 3,
+					minHeight: 12,
+					fontSize: 16,
+					bb: 1
+				}
+			}, String(e.value)))
+		})]
+	});
+}
+function Y(e) {
+	let { column: t } = e;
+	switch (t.filterConfig?.type) {
+		case void 0: return null;
+		case "number": return /* @__PURE__ */ P(se, { column: t });
+		case "multiselect": return /* @__PURE__ */ P(J, { column: t });
+		case "date": return /* @__PURE__ */ P(ce, { column: t });
+		default: return /* @__PURE__ */ P(oe, { column: t });
+	}
+}
+Y.displayName = "DataGridListFilter";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListFilterSheet.tsx
+function X(t) {
+	let { grid: n } = t, { list: i } = n, o = n.componentName, s = n.localeText, l = i.activeFilters.length, u = i.filterableColumns;
+	return u.length === 0 ? null : /* @__PURE__ */ P(H, {
+		grid: n,
+		open: i.sheet === "filter",
+		onOpen: () => i.openSheet("filter"),
+		onClose: () => i.openSheet(null),
+		title: s.filters,
+		trigger: ({ ref: t, props: { onClick: n, ...i } }) => /* @__PURE__ */ F(r, {
+			type: "button",
+			component: `${o}.list.toolbar.button`,
+			variant: { active: l > 0 },
+			...D.PILL,
+			ref: t,
+			onClick: n,
+			props: {
+				...i,
+				"aria-label": s.filtersLabel(l)
+			},
+			children: [
+				/* @__PURE__ */ P(G, {}),
+				s.filters,
+				l > 0 && /* @__PURE__ */ P(e, {
+					tag: "span",
+					minWidth: 5,
+					height: 5,
+					px: 1.5,
+					borderRadius: 999,
+					bgColor: "indigo-600",
+					color: "white",
+					fontSize: 12,
+					fontWeight: 600,
+					lineHeight: 20,
+					textAlign: "center",
+					props: { "aria-hidden": !0 },
+					children: l
+				})
+			]
+		}),
+		footer: /* @__PURE__ */ F(N, { children: [l > 0 && /* @__PURE__ */ P(r, {
+			type: "button",
+			component: `${o}.list.sheet.button`,
+			...D.SHEET_BUTTON,
+			onClick: n.clearColumnFilters,
+			children: s.clearFilters
+		}), /* @__PURE__ */ P(r, {
+			type: "button",
+			component: `${o}.list.sheet.primary`,
+			...D.SHEET_BUTTON,
+			flex1: !0,
+			fontWeight: 600,
+			onClick: () => i.openSheet(null),
+			children: s.showRows(n.filterStats.filtered)
+		})] }),
+		children: u.map((e) => /* @__PURE__ */ F(a, {
+			component: `${o}.list.sheet.line`,
+			d: "column",
+			gap: 2,
+			py: 3,
+			bb: 1,
+			children: [/* @__PURE__ */ P(c, {
+				m: 0,
+				fontSize: 14,
+				fontWeight: 600,
+				children: e.header ?? String(e.key)
+			}), /* @__PURE__ */ P(Y, { column: e })]
+		}, e.key))
+	});
+}
+X.displayName = "DataGridListFilterSheet";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListSortSheet.tsx
+function Z(e) {
+	let { grid: t } = e, { list: n } = t, i = t.componentName, o = t.localeText, s = n.sortedColumn, c = t.sortDirection === "DESC", l = `${t.identifier}-sort`, u = {
+		component: `${i}.list.sheet.line`,
+		display: "flex",
+		ai: "center",
+		gap: 3,
+		minHeight: 12,
+		fontSize: 16,
+		cursor: "pointer",
+		bb: 1
+	};
+	return /* @__PURE__ */ F(H, {
+		grid: t,
+		open: n.sheet === "sort",
+		onClose: () => n.openSheet(null),
+		title: o.sortBy,
+		onOpen: () => n.openSheet("sort"),
+		trigger: ({ ref: e, props: { onClick: t, ...n } }) => /* @__PURE__ */ F(r, {
+			type: "button",
+			component: `${i}.list.toolbar.button`,
+			variant: { active: !!s },
+			...D.PILL,
+			ref: e,
+			onClick: t,
+			props: n,
+			children: [/* @__PURE__ */ P(v, {
+				width: "16px",
+				height: "16px",
+				fill: "currentColor",
+				rotate: c ? 180 : 0
+			}), s ? o.sortedBy(String(s.header ?? s.key), c) : o.sortBy]
+		}),
+		footer: /* @__PURE__ */ F(N, { children: [s && /* @__PURE__ */ P(r, {
+			type: "button",
+			component: `${i}.list.sheet.button`,
+			...D.SHEET_BUTTON,
+			onClick: () => t.setSortColumn(s.key, void 0),
+			children: o.clearSort
+		}), /* @__PURE__ */ P(r, {
+			type: "button",
+			component: `${i}.list.sheet.primary`,
+			...D.SHEET_BUTTON,
+			flex1: !0,
+			fontWeight: 600,
+			onClick: () => n.openSheet(null),
+			children: o.close
+		})] }),
+		children: [/* @__PURE__ */ P(a, {
+			tag: "fieldset",
+			d: "column",
+			b: 0,
+			m: 0,
+			p: 0,
+			props: { "aria-label": o.sortBy },
+			children: n.sortableColumns.map((e) => /* @__PURE__ */ P(E, {
+				name: l,
+				checked: s === e,
+				onChange: () => t.setSortColumn(e.key, c && s ? "DESC" : "ASC"),
+				label: e.header ?? String(e.key),
+				labelProps: u
+			}, e.key))
+		}), s && /* @__PURE__ */ P(a, {
+			tag: "fieldset",
+			d: "column",
+			b: 0,
+			m: 0,
+			p: 0,
+			pt: 4,
+			props: { "aria-label": `${o.sortBy}: ${s.header ?? s.key}` },
+			children: ["ASC", "DESC"].map((e) => /* @__PURE__ */ P(E, {
+				name: `${l}-direction`,
+				checked: t.sortDirection === e,
+				onChange: () => t.setSortColumn(s.key, e),
+				label: e === "ASC" ? o.ascending : o.descending,
+				labelProps: u
+			}, e))
+		})]
+	});
+}
+Z.displayName = "DataGridListSortSheet";
+//#endregion
+//#region src/components/dataGrid/components/dataGridListToolbar.tsx
+function le({ grid: e }) {
+	let t = e.componentName, [n, i] = M(e.globalFilterValue), { debounce: o, cancel: c } = x(e.globalFilterValue, (e) => e === n, i);
+	return /* @__PURE__ */ F(a, {
+		position: "relative",
+		ai: "center",
+		children: [
+			/* @__PURE__ */ P(a, {
+				position: "absolute",
+				insetStart: 3.5,
+				pointerEvents: "none",
+				color: "gray-500",
+				props: { "aria-hidden": !0 },
+				children: /* @__PURE__ */ P(b, {
+					fill: "currentColor",
+					width: "16px"
+				})
+			}),
+			/* @__PURE__ */ P(s, {
+				component: `${t}.list.toolbar.search`,
+				width: "fit",
+				height: 11,
+				ps: 10,
+				pe: 10,
+				b: 0,
+				borderRadius: 3,
+				fontSize: 16,
+				type: "search",
+				value: n,
+				placeholder: e.localeText.searchPlaceholder,
+				onChange: (t) => {
+					let n = t.target.value;
+					i(n), o("value", () => e.filter.setGlobalFilter(n));
+				},
+				props: {
+					"aria-label": e.localeText.searchPlaceholder,
+					enterKeyHint: "search"
+				}
+			}),
+			n && /* @__PURE__ */ P(r, {
+				type: "button",
+				component: `${t}.list.sheet.button`,
+				display: "inline-flex",
+				ai: "center",
+				jc: "center",
+				width: 7,
+				height: 7,
+				borderRadius: 999,
+				cursor: "pointer",
+				position: "absolute",
+				insetEnd: 2,
+				onClick: () => {
+					c(), i(""), e.filter.setGlobalFilter("");
+				},
+				props: { "aria-label": e.localeText.clearSearch },
+				children: /* @__PURE__ */ P(V, { width: "16px" })
+			})
+		]
+	});
+}
+function Q(t) {
+	let { grid: n } = t, { list: o } = n, { def: s } = n.props, c = n.componentName, l = n.localeText, { filtered: u, total: d } = n.filterStats, f = o.activeFilters, p = o.sortableColumns.length > 0;
+	return /* @__PURE__ */ F(a, {
+		component: `${c}.list.toolbar`,
+		d: "column",
+		gap: 3,
+		px: 4,
+		pt: 4,
+		pb: 3,
+		children: [
+			/* @__PURE__ */ F(a, {
+				ai: "center",
+				gap: 3,
+				flexWrap: "wrap",
+				children: [/* @__PURE__ */ F(a, {
+					d: "column",
+					flex1: !0,
+					minWidth: 0,
+					children: [s.title && /* @__PURE__ */ P(e, {
+						id: n.titleId,
+						fontSize: 17,
+						fontWeight: 600,
+						lineHeight: 24,
+						children: s.title
+					}), /* @__PURE__ */ P(e, {
+						component: `${c}.list.toolbar.count`,
+						fontSize: 13,
+						css: { fontVariantNumeric: "tabular-nums" },
+						children: l.rowCount(u, d)
+					})]
+				}), s.topBar && /* @__PURE__ */ F(a, {
+					ai: "center",
+					gap: 2,
+					flexWrap: "wrap",
+					children: [/* @__PURE__ */ P(_, { grid: n }), /* @__PURE__ */ P(S, { grid: n })]
+				})]
+			}),
+			s.globalFilter && /* @__PURE__ */ P(le, { grid: n }),
+			/* @__PURE__ */ F(a, {
+				gap: 2,
+				overflowX: "auto",
+				scrollbarWidth: "none",
+				mx: -4,
+				px: 4,
+				children: [
+					p && /* @__PURE__ */ P(Z, { grid: n }),
+					/* @__PURE__ */ P(X, { grid: n }),
+					s.rowSelection && /* @__PURE__ */ P(r, {
+						type: "button",
+						component: `${c}.list.toolbar.button`,
+						...D.PILL,
+						variant: { active: o.selecting },
+						onClick: () => o.setSelecting(!o.selecting),
+						props: { "aria-pressed": o.selecting },
+						children: l.selectRows
+					})
+				]
+			}),
+			f.length > 0 && /* @__PURE__ */ P(a, {
+				gap: 2,
+				overflowX: "auto",
+				scrollbarWidth: "none",
+				mx: -4,
+				px: 4,
+				children: f.map((t) => /* @__PURE__ */ F(e, {
+					tag: "span",
+					component: `${c}.list.toolbar.chip`,
+					display: "inline-flex",
+					ai: "center",
+					gap: 1,
+					flexShrink: 0,
+					height: 8,
+					ps: 3,
+					pe: 1,
+					borderRadius: 999,
+					fontSize: 13,
+					textWrap: "nowrap",
+					children: [
+						/* @__PURE__ */ F(e, {
+							tag: "span",
+							fontWeight: 500,
+							children: [t.label, ":"]
+						}),
+						/* @__PURE__ */ P(e, {
+							tag: "span",
+							children: t.value
+						}),
+						/* @__PURE__ */ P(r, {
+							type: "button",
+							component: `${c}.list.sheet.button`,
+							display: "inline-flex",
+							ai: "center",
+							jc: "center",
+							width: 7,
+							height: 7,
+							borderRadius: 999,
+							cursor: "pointer",
+							onClick: () => t.column.clearFilter(),
+							props: { "aria-label": l.clearFilter(t.label) },
+							children: /* @__PURE__ */ P(V, { width: "14px" })
+						})
+					]
+				}, t.column.key))
+			}),
+			s.topBarContent && /* @__PURE__ */ P(e, { children: s.topBarContent }),
+			/* @__PURE__ */ P(i, {
+				props: { role: "status" },
+				children: n.hasActiveFilters ? l.rowCount(u, d) : ""
+			})
+		]
+	});
+}
+Q.displayName = "DataGridListToolbar";
+//#endregion
+//#region src/components/dataGrid/components/dataGridList.tsx
+function $(t) {
+	let { grid: n } = t, { list: r, source: i } = n, o = n.componentName, s = r.visibleItems, c = n.props.loading || i.isLoading, l = n.groupColumns.size === 0 && !n.tree.enabled, d = i.enabled ? n.totalRowCount : n.filterStats.filtered, { queryVersion: f } = i;
+	return A(() => {
+		i.enabled && i.request(0, Math.max(s.length, 1));
+	}, [
+		i,
+		f,
+		s.length,
+		n.page,
+		n.pageSize,
+		n.expansionVersion
+	]), /* @__PURE__ */ F(a, {
+		component: `${o}.list`,
+		d: "column",
+		children: [
+			/* @__PURE__ */ P(Q, { grid: n }),
+			/* @__PURE__ */ P(m, { grid: n }),
+			c && /* @__PURE__ */ P(u, { grid: n }),
+			s.length === 0 ? /* @__PURE__ */ P(e, {
+				component: "list.muted",
+				px: 4,
+				py: 10,
+				textAlign: "center",
+				children: n.props.def.noDataComponent ?? (c ? n.localeText.loadingRows : n.localeText.noRows)
+			}) : /* @__PURE__ */ P(T, {
+				props: {
+					"aria-labelledby": n.props.def.title ? n.titleId : void 0,
+					"aria-busy": c || void 0
+				},
+				children: s.map(({ row: e, index: t }, r) => e.kind === "group" ? /* @__PURE__ */ P(te, {
+					row: e,
+					version: n.rowVersion(e, t)
+				}, e.key) : /* @__PURE__ */ P(ne, {
+					row: e,
+					index: t,
+					position: l ? r + 1 : void 0,
+					setSize: l ? d : void 0,
+					version: n.rowVersion(e, t)
+				}, e.key))
+			}),
+			/* @__PURE__ */ P(L, {
+				grid: n,
+				shown: l ? s.length : void 0
+			}),
+			/* @__PURE__ */ P(W, { grid: n }),
+			/* @__PURE__ */ P(U, { grid: n })
+		]
+	});
+}
+$.displayName = "DataGridList";
+//#endregion
+export { $ as default };