@box-kite/react 2.2.3 → 2.2.5

package/dataGridList.mjs

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