@spark-ui/components 17.3.1 → 17.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/dropdown/index.js +1 -1
  2. package/dist/dropdown/index.js.map +1 -1
  3. package/dist/dropdown/index.mjs +10 -10
  4. package/dist/dropdown/index.mjs.map +1 -1
  5. package/dist/src/dropdown/DropdownItems.d.ts +3 -0
  6. package/dist/src/table/Table.d.ts +2 -45
  7. package/dist/src/table/TableBody.d.ts +8 -3
  8. package/dist/src/table/TableBulkBar.d.ts +9 -2
  9. package/dist/src/table/TableCell.d.ts +3 -4
  10. package/dist/src/table/TableColumn.d.ts +11 -5
  11. package/dist/src/table/TableHeader.d.ts +7 -5
  12. package/dist/src/table/TableRow.d.ts +8 -3
  13. package/dist/src/table/index.d.mts +1 -1
  14. package/dist/src/table/index.d.ts +1 -1
  15. package/dist/src/table/internal/ResizableTableContainer.d.ts +13 -0
  16. package/dist/src/table/{Table.styles.d.ts → internal/Table.styles.d.ts} +4 -1
  17. package/dist/src/table/internal/TableBodyCellRenderer.d.ts +10 -0
  18. package/dist/src/table/internal/TableBodyRowRenderer.d.ts +10 -0
  19. package/dist/src/table/internal/TableColumnHeader.d.ts +18 -0
  20. package/dist/src/table/internal/TableColumnResizer.d.ts +14 -0
  21. package/dist/src/table/{TableContext.d.ts → internal/TableContext.d.ts} +10 -2
  22. package/dist/src/table/internal/TableGrid.d.ts +12 -0
  23. package/dist/src/table/internal/TableHeaderRowRenderer.d.ts +16 -0
  24. package/dist/src/table/internal/TableHeaderSelectionCheckbox.d.ts +18 -0
  25. package/dist/src/table/internal/TableKeyboardModeContext.d.ts +2 -0
  26. package/dist/src/table/internal/TableRoot.d.ts +9 -0
  27. package/dist/src/table/internal/TableRootWrapper.d.ts +39 -0
  28. package/dist/src/table/internal/TableSelectionCheckbox.d.ts +18 -0
  29. package/dist/src/table/internal/table-keyboard.d.ts +26 -0
  30. package/dist/src/table/internal/table-utils.d.ts +8 -0
  31. package/dist/src/table/useTablePagination.d.ts +1 -1
  32. package/dist/src/table/useTableSort.d.ts +1 -1
  33. package/dist/table/index.js +1 -1
  34. package/dist/table/index.js.map +1 -1
  35. package/dist/table/index.mjs +697 -334
  36. package/dist/table/index.mjs.map +1 -1
  37. package/package.json +4 -4
  38. package/dist/src/table/ResizableTableContainer.d.ts +0 -9
  39. package/dist/src/table/TableHeaderSelectionCheckbox.d.ts +0 -13
  40. package/dist/src/table/TableSelectionCheckbox.d.ts +0 -7
  41. package/dist/src/table/table-utils.d.ts +0 -2
@@ -2,156 +2,267 @@ import { t as e } from "../icon-D05Uqh8_.mjs";
2
2
  import { t } from "../button-C6nlNPdv.mjs";
3
3
  import { n } from "../checkbox-xsURzANi.mjs";
4
4
  import { cva as r, cx as i } from "class-variance-authority";
5
- import { createContext as a, forwardRef as o, useContext as s, useEffect as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
6
- import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
7
- import { Button as g, Cell as _, CheckboxContext as v, Collection as y, Column as b, ColumnResizer as x, Group as ee, ResizableTableContainer as S, Row as te, Table as ne, TableBody as re, TableHeader as C, TableStateContext as w, composeRenderProps as ie, useContextProps as ae, useTableOptions as T } from "react-aria-components";
8
- import { ArrowUp as E } from "@spark-ui/icons/ArrowUp";
9
- import { Sort as oe } from "@spark-ui/icons/Sort";
10
- //#region src/table/table-utils.ts
11
- var D = "button, [role=\"button\"], [role=\"switch\"], [role=\"checkbox\"], [role=\"option\"], input:not([type=\"hidden\"]), select, textarea, [href]", se = "[data-resizable-direction]";
12
- function O(e) {
13
- if (!e || !(e instanceof Element)) return !1;
14
- let t = e;
15
- return t.matches(D) || t.closest(D) !== null;
16
- }
17
- function k(e) {
18
- return !e || !(e instanceof Element) ? !1 : e.closest(se) !== null;
19
- }
20
- //#endregion
21
- //#region src/table/TableContext.tsx
22
- var A = a({ isResizable: !1 });
23
- function j() {
24
- return s(A);
5
+ import a, { createContext as o, useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
6
+ import { jsx as m, jsxs as h } from "react/jsx-runtime";
7
+ import { filterDOMProps as g, getEventTarget as _, useResizeObserver as v } from "@react-aria/utils";
8
+ import { Cell as y, TableBody as b, TableHeader as x, useTableColumnResizeState as S, useTableState as C } from "@react-stately/table";
9
+ import { mergeProps as w, useFocusRing as T, useTable as ee, useTableCell as E, useTableColumnHeader as te, useTableHeaderRow as D, useTableRow as ne, useTableRowGroup as O } from "react-aria";
10
+ import { useTableColumnResize as re, useTableSelectAllCheckbox as ie, useTableSelectionCheckbox as ae } from "@react-aria/table";
11
+ import { ArrowDown as oe } from "@spark-ui/icons/ArrowDown";
12
+ import { ArrowUp as se } from "@spark-ui/icons/ArrowUp";
13
+ import { Sort as ce } from "@spark-ui/icons/Sort";
14
+ //#region src/table/internal/TableContext.tsx
15
+ var le = o({
16
+ isResizable: !1,
17
+ tableWidth: 0
18
+ });
19
+ function ue() {
20
+ return c(le);
25
21
  }
26
- var M = a({
22
+ var de = o({
27
23
  selectedCount: 0,
28
24
  onClearSelection: () => {}
29
25
  });
30
- function N() {
31
- return s(M);
32
- }
33
- //#endregion
34
- //#region src/table/ResizableTableContainer.tsx
35
- function P({ className: e, children: t, ...n }) {
36
- let r = d(null);
37
- return l(() => {
38
- let e = r.current;
39
- if (!e) return;
40
- let t = (t) => {
41
- t.key !== " " && t.key !== "Enter" || O(t.target) && e.contains(t.target) && (k(t.target) || (t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), t.target.click()));
42
- };
43
- return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
44
- }, []), /* @__PURE__ */ m(A.Provider, {
45
- value: { isResizable: !0 },
46
- children: /* @__PURE__ */ m(S, {
47
- ref: r,
48
- "data-spark-component": "resizable-table-container",
49
- className: i("relative w-full overflow-auto", e),
50
- ...n,
51
- children: t
52
- })
53
- });
26
+ function k() {
27
+ return c(de);
54
28
  }
55
- P.displayName = "ResizableTableContainer";
56
29
  //#endregion
57
- //#region src/table/Table.tsx
58
- function F({ children: e, className: t, selectedKeys: n, onSelectionChange: r, totalCount: a, hasMultiplePages: o, onClearSelection: s, onSelectAll: c, allowsResizing: l = !0, maxHeight: u, onResizeStart: d, onResize: f, onResizeEnd: p, onKeyDownCapture: h, sortDescriptor: g, onSortChange: _, ...v }) {
59
- let y = 0;
60
- n === "all" ? y = a ?? 0 : n instanceof Set ? y = n.size : n && (y = new Set(n).size);
61
- let b = s ?? (() => r?.(/* @__PURE__ */ new Set())), x = {
62
- ...v,
30
+ //#region src/table/internal/TableRootWrapper.tsx
31
+ function fe({ children: e, className: t, selectedKeys: n, onSelectionChange: r, totalCount: a, hasMultiplePages: o, onClearSelection: s, onSelectAll: c, allowsResizing: l = !0, resizeColumnAriaLabel: u, maxHeight: d, stickyHeader: f, onResizeStart: p, onResize: h, onResizeEnd: g, onKeyDownCapture: _, sortDescriptor: v, onSortChange: y, ...b }) {
32
+ let x = 0;
33
+ n === "all" ? x = a ?? 0 : n instanceof Set ? x = n.size : n && (x = new Set(n).size);
34
+ let S = s ?? (() => r?.(/* @__PURE__ */ new Set())), C = {
35
+ ...b,
63
36
  selectedKeys: n,
64
37
  onSelectionChange: r,
65
38
  totalCount: a,
66
39
  hasMultiplePages: o,
67
40
  onSelectAll: c,
68
- selectedCount: y,
69
- onClearSelection: b,
41
+ selectedCount: x,
42
+ onClearSelection: S,
70
43
  allowsResizing: l,
71
- maxHeight: u,
72
- onResizeStart: d,
73
- onResize: f,
74
- onResizeEnd: p,
75
- onKeyDownCapture: h,
76
- sortDescriptor: g,
77
- onSortChange: _,
44
+ resizeColumnAriaLabel: u,
45
+ maxHeight: d,
46
+ stickyHeader: f,
47
+ onResizeStart: p,
48
+ onResize: h,
49
+ onResizeEnd: g,
50
+ onKeyDownCapture: _,
51
+ sortDescriptor: v,
52
+ onSortChange: y,
78
53
  className: t
79
54
  };
80
- return /* @__PURE__ */ m(M.Provider, {
81
- value: x,
55
+ return /* @__PURE__ */ m(de.Provider, {
56
+ value: C,
82
57
  children: /* @__PURE__ */ m("div", {
83
58
  className: i("gap-md flex flex-col", t),
84
59
  children: e
85
60
  })
86
61
  });
87
62
  }
88
- F.displayName = "Table";
89
- var I = ({ className: e, onKeyDownCapture: t, ...n }) => {
90
- let r = d(null);
91
- return l(() => {
63
+ fe.displayName = "Table";
64
+ //#endregion
65
+ //#region src/table/internal/ResizableTableContainer.tsx
66
+ function A({ className: e, children: t, ...n }) {
67
+ let r = f(null), [a, o] = p(0);
68
+ return u(() => {
92
69
  let e = r.current;
93
- if (!e) return;
94
- let t = (t) => {
95
- t.key !== " " && t.key !== "Enter" || O(t.target) && e.contains(t.target) && (k(t.target) || (t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), t.target.click()));
96
- };
97
- return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
98
- }, []), /* @__PURE__ */ m(ne, {
70
+ e && o(e.clientWidth);
71
+ }, []), v({
99
72
  ref: r,
100
- "data-spark-component": "table",
101
- className: i("default:w-full", "border-separate border-spacing-y-0", "bg-surface", "outline-none", "text-body-1", "forced-color-adjust-none", "data-focus-visible:u-outline-inset", "has-[>[data-empty]]:h-full", e),
102
- ...t ? {
73
+ onResize: () => {
74
+ let e = r.current;
75
+ e && o(e.clientWidth);
76
+ }
77
+ }), /* @__PURE__ */ m(le.Provider, {
78
+ value: {
79
+ isResizable: !0,
80
+ tableWidth: a
81
+ },
82
+ children: /* @__PURE__ */ m("div", {
83
+ ref: r,
84
+ "data-spark-component": "resizable-table-container",
85
+ className: i("relative w-full overflow-auto", e),
103
86
  ...n,
104
- onKeyDownCapture: t
105
- } : n
87
+ children: t
88
+ })
106
89
  });
107
- };
108
- I.displayName = "Table.Grid.Inner";
109
- function ce(e) {
110
- return typeof e == "number" ? `${e}px` : e;
111
90
  }
112
- function L({ "aria-label": e, "aria-labelledby": t, className: n, children: r }) {
113
- let { allowsResizing: i = !0, maxHeight: a, onResizeStart: o, onResize: s, onResizeEnd: c, onKeyDownCapture: l, sortDescriptor: u, onSortChange: d, className: f, ...p } = N(), h = a == null ? void 0 : { maxHeight: ce(a) }, g = n ?? f, _ = {
114
- ...p,
115
- ...e != null && { "aria-label": e },
116
- ...t != null && { "aria-labelledby": t },
117
- sortDescriptor: u,
118
- onSortChange: d,
119
- onKeyDownCapture: l,
120
- className: g
91
+ A.displayName = "ResizableTableContainer";
92
+ //#endregion
93
+ //#region src/table/internal/table-keyboard.ts
94
+ var j = "[data-spark-component=\"table-cell\"]";
95
+ function M(e) {
96
+ return !e || !(e instanceof Element) ? !1 : !!e.closest("[role=\"combobox\"],select,[data-spark-component=\"dropdown-trigger\"],[data-spark-component=\"combobox-input\"]");
97
+ }
98
+ function pe(e) {
99
+ if (!e || !(e instanceof Element)) return !1;
100
+ let t = e.closest("[role=\"combobox\"],[data-spark-component=\"dropdown-trigger\"],[data-spark-component=\"combobox-input\"]");
101
+ return t ? t.getAttribute("aria-expanded") === "true" : !1;
102
+ }
103
+ var me = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
104
+ function N(e) {
105
+ return !e || !(e instanceof Element) ? null : e.closest(j);
106
+ }
107
+ function P(e) {
108
+ return e.getAttribute("data-table-cell-kind") === "selection";
109
+ }
110
+ function F(e) {
111
+ return Array.from(e.querySelectorAll(me)).filter((t) => !(t === e || t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true" || t.getAttribute("hidden") !== null));
112
+ }
113
+ function I(e, t) {
114
+ for (let n of F(e)) {
115
+ let e = "data-prev-tabindex";
116
+ if (!t) n.hasAttribute(e) || n.setAttribute(e, n.getAttribute("tabindex") ?? ""), n.setAttribute("tabindex", "-1");
117
+ else {
118
+ let t = n.getAttribute(e);
119
+ if (t === null) continue;
120
+ n.removeAttribute(e), t === "" ? n.removeAttribute("tabindex") : n.setAttribute("tabindex", t);
121
+ }
122
+ }
123
+ }
124
+ function L(e) {
125
+ let t = Array.from(e.querySelectorAll(j));
126
+ for (let e of t) I(e, !1);
127
+ }
128
+ function he({ ref: e, gridProps: t, onKeyDownCapture: n, onFocusCapture: r }) {
129
+ let [i, a] = p("grid"), o = f("grid"), s = f(null), c = f(!1), u = d(() => {
130
+ let { onKeyDown: l, ...u } = t, d = (e) => {
131
+ s.current = e, o.current = "interaction", a("interaction"), I(e, !0);
132
+ };
133
+ return w(u, {
134
+ onKeyDown: (e) => {
135
+ if (o.current === "interaction" && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
136
+ let e = s.current, t = document.activeElement;
137
+ if (e && t instanceof Node && e.contains(t)) return;
138
+ }
139
+ o.current === "interaction" && (e.key === "ArrowUp" || e.key === "ArrowDown") && M(e.target) && N(e.target) === s.current || l?.(e);
140
+ },
141
+ onKeyDownCapture: (e) => {
142
+ if (n?.(e), o.current === "interaction" && e.key === "Tab") {
143
+ let t = N(e.target);
144
+ t && t === s.current && e.stopPropagation();
145
+ return;
146
+ }
147
+ if (M(e.target) && o.current === "interaction" && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
148
+ let t = N(e.target);
149
+ if (t && t === s.current) return;
150
+ }
151
+ if (o.current === "interaction" && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
152
+ let t = N(e.target);
153
+ if (t && t === s.current) {
154
+ e.stopPropagation();
155
+ return;
156
+ }
157
+ }
158
+ if (o.current === "grid" && e.key === "ArrowRight") {
159
+ let t = N(e.target);
160
+ if (t) {
161
+ let n = t.closest("tr");
162
+ if (n) {
163
+ let r = Array.from(n.querySelectorAll(j));
164
+ if (r.length > 0 && r[r.length - 1] === t) {
165
+ e.preventDefault(), e.stopPropagation(), n.focus();
166
+ return;
167
+ }
168
+ }
169
+ }
170
+ }
171
+ if (o.current === "grid" && e.key === "Enter") {
172
+ let t = N(e.target);
173
+ if (!t || P(t)) return;
174
+ let n = F(t);
175
+ if (n.length === 0) return;
176
+ e.preventDefault(), e.stopPropagation(), d(t), n[0]?.focus();
177
+ return;
178
+ }
179
+ if (o.current === "grid" && e.key === "F2") {
180
+ let t = N(e.target);
181
+ if (!t || P(t)) return;
182
+ let n = F(t);
183
+ if (n.length === 0) return;
184
+ e.preventDefault(), e.stopPropagation(), d(t), n[0]?.focus();
185
+ return;
186
+ }
187
+ if (o.current === "interaction" && e.key === "Escape") {
188
+ if (pe(e.target)) return;
189
+ let t = s.current;
190
+ if (!t) return;
191
+ e.preventDefault(), e.stopPropagation(), o.current = "grid", a("grid"), t.focus();
192
+ }
193
+ if (o.current === "interaction" && e.key === "F2") {
194
+ let t = s.current;
195
+ if (!t) return;
196
+ e.preventDefault(), e.stopPropagation(), o.current = "grid", a("grid"), t.focus();
197
+ }
198
+ },
199
+ onBlurCapture: (t) => {
200
+ if (o.current !== "interaction") return;
201
+ let n = e.current;
202
+ if (!n) return;
203
+ let r = t.relatedTarget;
204
+ r instanceof Node && n.contains(r) || (s.current = null, o.current = "grid", a("grid"));
205
+ },
206
+ onFocusCapture: (t) => {
207
+ r?.(t);
208
+ let n = c.current;
209
+ c.current = !1;
210
+ let i = e.current, l = N(t.target);
211
+ if (o.current === "interaction" && s.current && i) {
212
+ let e = !!(l && l !== s.current), n = !l && t.target instanceof Element && i.contains(t.target) && !s.current.contains(t.target);
213
+ (e || n) && (o.current = "grid", a("grid"), n && (s.current = null));
214
+ }
215
+ if (!l) return;
216
+ s.current = l;
217
+ let u = t.target instanceof Element ? t.target : null, f = l.matches(j), p = o.current === "grid", m = !!(u && u !== l && l.contains(u)), h = F(l).length > 0;
218
+ p && f && m && h && !n && queueMicrotask(() => l.focus()), n && p && m && f && h && !P(l) && d(l);
219
+ },
220
+ onPointerDownCapture: (e) => {
221
+ let t = N(e.target);
222
+ t?.matches(j) && e.target instanceof Element && e.target !== t && t.contains(e.target) && (c.current = !0);
223
+ },
224
+ "data-table-keyboard-mode": i
225
+ });
226
+ }, [
227
+ t,
228
+ i,
229
+ e,
230
+ r,
231
+ n
232
+ ]);
233
+ return l(() => {
234
+ o.current = i;
235
+ let t = e.current;
236
+ if (t) {
237
+ if (i === "grid") {
238
+ L(t), s.current?.focus?.();
239
+ return;
240
+ }
241
+ L(t), s.current && I(s.current, !0);
242
+ }
243
+ }, [i, e]), {
244
+ gridProps: u,
245
+ keyboardMode: i
121
246
  };
122
- return i ? /* @__PURE__ */ m(P, {
123
- className: g,
124
- style: h,
125
- onResizeStart: o,
126
- onResize: s,
127
- onResizeEnd: c,
128
- children: /* @__PURE__ */ m(I, {
129
- ..._,
130
- children: r
131
- })
132
- }) : /* @__PURE__ */ m("div", {
133
- className: "relative w-full overflow-auto",
134
- style: h,
135
- children: /* @__PURE__ */ m(I, {
136
- ..._,
137
- children: r
138
- })
139
- });
140
247
  }
141
- L.displayName = "Table.Grid";
142
248
  //#endregion
143
- //#region src/table/Table.styles.tsx
249
+ //#region src/table/internal/Table.styles.tsx
144
250
  var R = r([
145
251
  "h-sz-64 min-w-sz-64",
146
252
  "relative group/column first:rounded-l-xl last:rounded-r-xl bg-neutral-container",
147
- "px-lg py-sm text-left outline-none box-border",
253
+ "pl-lg pr-lg py-sm text-left outline-none box-border",
148
254
  "cursor-default",
149
255
  "data-focus-visible:u-outline data-focus-visible:-outline-offset-2"
150
256
  ], {
151
- variants: {},
152
- defaultVariants: {}
153
- });
154
- r([
257
+ variants: {
258
+ checkbox: { true: ["w-sz-64 min-w-sz-64 max-w-sz-64", "px-0 align-middle"] },
259
+ resizable: { true: ["pr-xl"] }
260
+ },
261
+ defaultVariants: {
262
+ checkbox: !1,
263
+ resizable: !1
264
+ }
265
+ }), ge = r([
155
266
  "flex flex-1 justify-between items-center gap-md",
156
267
  "font-inherit text-left text-inherit",
157
268
  "whitespace-nowrap text-ellipsis",
@@ -161,10 +272,11 @@ r([
161
272
  variants: {},
162
273
  defaultVariants: {}
163
274
  });
164
- var le = r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
275
+ r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
165
276
  variants: {},
166
277
  defaultVariants: {}
167
- }), ue = r([
278
+ });
279
+ var z = r([
168
280
  "p-lg outline-none box-border default:overflow-hidden",
169
281
  "border-b-sm border-outline [tr:last-child>&]:border-b-0",
170
282
  "[-webkit-tap-highlight-color:transparent]",
@@ -172,62 +284,369 @@ var le = r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
172
284
  ], {
173
285
  variants: { checkbox: { true: ["w-sz-64 py-sm px-0 align-middle"] } },
174
286
  defaultVariants: { checkbox: !1 }
175
- });
176
- r(["pointer-events-none", "[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle"], {
287
+ }), _e = r(["pointer-events-none", "[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle"], {
177
288
  variants: {},
178
289
  defaultVariants: {}
179
- });
290
+ }), B = "button, [role=\"button\"], [role=\"switch\"], [role=\"checkbox\"], [role=\"option\"], input:not([type=\"hidden\"]), select, textarea, [href], [data-spark-component=\"dropdown-trigger\"], [data-spark-component=\"icon-button\"], [data-spark-component=\"switch\"], [data-spark-component=\"switch-input\"], [data-spark-component=\"combobox-input\"]", ve = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
291
+ function ye(e) {
292
+ if (!e || !(e instanceof Element)) return !1;
293
+ let t = e;
294
+ return t.matches(B) || t.closest(B) !== null;
295
+ }
296
+ function be(e) {
297
+ return e ? e instanceof Element ? e : e instanceof Text ? e.parentElement : null : null;
298
+ }
299
+ function xe(e) {
300
+ for (let t of e.querySelectorAll(ve)) if (t !== e && !t.hasAttribute("disabled") && t.getAttribute("aria-disabled") !== "true" && t.getAttribute("hidden") === null) return !0;
301
+ return !1;
302
+ }
303
+ function Se(e) {
304
+ let t = be(e);
305
+ if (!t) return !1;
306
+ if (ye(t)) return !0;
307
+ let n = t.closest("[data-spark-component=\"table-cell\"]");
308
+ return !n || n.getAttribute("data-table-cell-kind") === "selection" ? !1 : xe(n);
309
+ }
180
310
  //#endregion
181
- //#region src/table/TableBody.tsx
182
- function z({ className: e, renderEmptyState: t, ...n }) {
183
- let r = t == null ? void 0 : (e) => /* @__PURE__ */ m("div", {
184
- "data-spark-component": "table-empty",
185
- className: "p-lg",
186
- children: t(e)
311
+ //#region src/table/internal/TableKeyboardModeContext.tsx
312
+ var V = o("grid");
313
+ //#endregion
314
+ //#region src/table/internal/TableSelectionCheckbox.tsx
315
+ function H({ checkboxProps: e, className: t, suppressFocusWalker: r }) {
316
+ let { isSelected: i, isIndeterminate: a, isDisabled: o, onChange: s, ...c } = e, l = a === !0 ? "indeterminate" : !!i;
317
+ return /* @__PURE__ */ m("span", {
318
+ ...r ? { "data-react-aria-prevent-focus": !0 } : void 0,
319
+ onClick: (e) => e.stopPropagation(),
320
+ onPointerDown: (e) => e.stopPropagation(),
321
+ className: t ?? "flex h-full min-h-full items-center justify-center",
322
+ children: /* @__PURE__ */ m(n, {
323
+ checked: l,
324
+ disabled: o,
325
+ onCheckedChange: s,
326
+ ...c
327
+ })
187
328
  });
188
- return /* @__PURE__ */ m(re, {
189
- "data-spark-component": "table-body",
190
- className: i(le(), e),
191
- renderEmptyState: r,
192
- ...n
329
+ }
330
+ H.displayName = "Table.SelectionCheckbox";
331
+ //#endregion
332
+ //#region src/table/internal/TableBodyCellRenderer.tsx
333
+ function Ce({ cell: e, state: t, resizeState: n }) {
334
+ let r = f(null), { gridCellProps: i } = E({ node: e }, t, r), { isFocusVisible: a, focusProps: o } = T(), l = c(V), u = s((e) => {
335
+ l === "interaction" && (e.key !== " " && e.key !== "Enter" || e.stopPropagation());
336
+ }, [l]), { onKeyDownCapture: d, ...p } = i, h = s((e) => {
337
+ [
338
+ "ArrowLeft",
339
+ "ArrowRight",
340
+ "ArrowUp",
341
+ "ArrowDown"
342
+ ].includes(e.key) || d?.(e);
343
+ }, [d]), g = ae({ key: e.parentKey ?? e.key }, t), _ = t.collection.columns[e.index ?? 0]?.key ?? null, v = _ ? n?.columnWidths?.get?.(_) : void 0;
344
+ return e.props?.isSelectionCell ? /* @__PURE__ */ m("td", {
345
+ ...w(p, { onKeyDownCapture: h }, o, { onKeyDown: u }),
346
+ ref: r,
347
+ "data-spark-component": "table-cell",
348
+ "data-table-cell-kind": "selection",
349
+ className: z({ checkbox: !0 }),
350
+ "data-focus-visible": a || void 0,
351
+ children: /* @__PURE__ */ m(H, {
352
+ suppressFocusWalker: l === "grid",
353
+ checkboxProps: g.checkboxProps
354
+ })
355
+ }) : /* @__PURE__ */ m("td", {
356
+ ...w(p, { onKeyDownCapture: h }, o, { onKeyDown: u }),
357
+ ref: r,
358
+ "data-spark-component": "table-cell",
359
+ className: z(),
360
+ "data-focus-visible": a || void 0,
361
+ style: v ? { width: v } : void 0,
362
+ children: e.rendered
193
363
  });
194
364
  }
195
- z.displayName = "Table.Body";
365
+ Ce.displayName = "Table.BodyCellRenderer";
366
+ //#endregion
367
+ //#region src/table/internal/TableBodyRowRenderer.tsx
368
+ function U(e) {
369
+ if (e) return (t) => {
370
+ Se(_(t.nativeEvent)) || e(t);
371
+ };
372
+ }
373
+ function W({ item: e, state: t, resizeState: n }) {
374
+ let r = f(null), { rowProps: a, isSelected: o } = ne({ node: e }, t, r), { isFocusVisible: s, focusProps: c } = T(), { onClick: l, onPointerDown: u, onMouseDown: d, onPointerUp: p, onPointerCancel: h, ...g } = a, _ = i("outline-none box-border data-focus-visible:u-outline-inset data-focus-visible:outline-dashed", g.className, o && "bg-support-container text-on-support-container");
375
+ return /* @__PURE__ */ m("tr", {
376
+ ...w(g, c),
377
+ onPointerDown: U(u),
378
+ onMouseDown: U(d),
379
+ onPointerUp: U(p),
380
+ onPointerCancel: U(h),
381
+ onClick: U(l),
382
+ ref: r,
383
+ "data-spark-component": "table-row",
384
+ "data-selected": o || void 0,
385
+ "data-focus-visible": s || void 0,
386
+ className: _,
387
+ tabIndex: -1,
388
+ children: [...e.childNodes].map((e) => /* @__PURE__ */ m(Ce, {
389
+ cell: e,
390
+ state: t,
391
+ resizeState: n
392
+ }, e.key))
393
+ });
394
+ }
395
+ W.displayName = "Table.BodyRowRenderer";
396
+ //#endregion
397
+ //#region src/table/internal/TableColumnResizer.tsx
398
+ function G({ column: e, ariaLabel: t, resizeState: n, resizeCallbacks: r }) {
399
+ let a = f(null), { resizerProps: o, inputProps: s, isResizing: c } = re({
400
+ column: e,
401
+ "aria-label": t ?? "Resize column",
402
+ onResizeStart: r.onResizeStart,
403
+ onResize: r.onResize,
404
+ onResizeEnd: r.onResizeEnd
405
+ }, n, a);
406
+ return /* @__PURE__ */ m("div", {
407
+ role: "presentation",
408
+ className: i("cursor-col-resize absolute inset-y-lg right-0 flex w-lg items-center justify-center", "after:block after:h-full after:w-[2px] after:bg-outline after:transition-all after:duration-75", "has-[input:focus-visible]:after:u-outline has-[input:focus-visible]:after:outline-offset-2", c && "after:bg-outline-high after:scale-120"),
409
+ "data-resizable-direction": "both",
410
+ ...o,
411
+ children: /* @__PURE__ */ m("input", {
412
+ ref: a,
413
+ disabled: !c,
414
+ ...s
415
+ })
416
+ });
417
+ }
418
+ G.displayName = "Table.ColumnResizer";
419
+ //#endregion
420
+ //#region src/table/internal/TableHeaderSelectionCheckbox.tsx
421
+ function K({ state: e }) {
422
+ let { checkboxProps: t } = ie(e), { collection: n, selectionManager: r } = e, i = r.selectedKeys, a = n, o = a.body, s = o == null ? new Set(n.getKeys()) : new Set([...a.getChildren(o.key)].map((e) => e.key)), c = i === "all" ? s : i, l = [...s].filter((e) => c.has(e)).length, u = s.size, d = u > 0 && l === u, f = l > 0 && l < u, { isSelected: p, isIndeterminate: h, onChange: g, ..._ } = t, v = (e) => {
423
+ (e.key === " " || e.key === "Enter") && e.stopPropagation(), e.key === "Enter" && (e.preventDefault(), t.isDisabled || g?.(!d));
424
+ };
425
+ return /* @__PURE__ */ m(H, { checkboxProps: {
426
+ ..._,
427
+ isSelected: d,
428
+ isIndeterminate: f,
429
+ onChange: g,
430
+ onKeyDown: v
431
+ } });
432
+ }
433
+ K.displayName = "Table.HeaderSelectionCheckbox";
434
+ //#endregion
435
+ //#region src/table/internal/TableColumnHeader.tsx
436
+ var we = i("sticky top-0 z-sticky");
437
+ function Te({ column: t, state: n, resizeState: r, stickyHeader: a, resizeCallbacks: o, isLastColumnInRow: s = !1 }) {
438
+ let c = f(null), { resizeColumnAriaLabel: l } = k(), { columnHeaderProps: u } = te({ node: t }, n, c), { isFocusVisible: d, focusProps: p } = T(), g = t.props?.allowsResizing !== !1 && !s, _ = r?.columnWidths?.get?.(t.key), v = !!(r && g);
439
+ if (t.props?.isSelectionCell) return /* @__PURE__ */ m("th", {
440
+ ...u,
441
+ ref: c,
442
+ role: "columnheader",
443
+ className: i(R({ checkbox: !0 }), a && we),
444
+ "data-spark-component": "table-column",
445
+ "data-table-selection-columnheader": !0,
446
+ "data-focus-visible": d || void 0,
447
+ children: /* @__PURE__ */ m(K, { state: n })
448
+ });
449
+ let y = !!t.props?.allowsSorting, b = n.sortDescriptor?.column === t.key, x = n.sortDescriptor?.direction ?? "ascending", S = m(b ? x === "descending" ? oe : se : ce, {}), C = (e) => {
450
+ y && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), n.sort?.(t.key)));
451
+ };
452
+ return /* @__PURE__ */ h("th", {
453
+ ...w(u, p),
454
+ ref: c,
455
+ role: "columnheader",
456
+ className: i(R({ resizable: v }), a && we),
457
+ style: _ ? { width: _ } : void 0,
458
+ "data-spark-component": "table-column",
459
+ "data-focus-visible": d || void 0,
460
+ onKeyDown: C,
461
+ children: [/* @__PURE__ */ h("div", {
462
+ className: ge(),
463
+ children: [/* @__PURE__ */ m("button", {
464
+ type: "button",
465
+ className: i("gap-md flex min-w-0 flex-1 items-center text-left", "focus-visible:u-outline outline-none", "bg-transparent p-0 border-0"),
466
+ onKeyDown: C,
467
+ children: /* @__PURE__ */ m("span", {
468
+ className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
469
+ children: t.rendered
470
+ })
471
+ }), y ? /* @__PURE__ */ m("span", {
472
+ "aria-hidden": "true",
473
+ className: i("shrink-0 opacity-dim-2 group-hover/column:opacity-100", b && "opacity-100"),
474
+ children: /* @__PURE__ */ m(e, {
475
+ size: "sm",
476
+ children: S
477
+ })
478
+ }) : null]
479
+ }), r && g ? /* @__PURE__ */ m(G, {
480
+ column: t,
481
+ ariaLabel: typeof l == "function" ? l(t) : l,
482
+ resizeState: r,
483
+ resizeCallbacks: o
484
+ }) : null]
485
+ });
486
+ }
487
+ Te.displayName = "Table.ColumnHeader";
488
+ //#endregion
489
+ //#region src/table/internal/TableHeaderRowRenderer.tsx
490
+ function Ee({ item: e, state: t, resizeState: n, stickyHeader: r, resizeCallbacks: i }) {
491
+ let a = f(null), { rowProps: o } = D({ node: e }, t, a), s = [...e.childNodes];
492
+ return /* @__PURE__ */ m("tr", {
493
+ ...o,
494
+ ref: a,
495
+ children: s.map((e, a) => /* @__PURE__ */ m(Te, {
496
+ column: e,
497
+ state: t,
498
+ resizeState: n,
499
+ stickyHeader: r,
500
+ resizeCallbacks: i,
501
+ isLastColumnInRow: a === s.length - 1
502
+ }, e.key))
503
+ });
504
+ }
505
+ Ee.displayName = "Table.HeaderRowRenderer";
506
+ //#endregion
507
+ //#region src/table/internal/TableRoot.tsx
508
+ function De({ className: e, children: t, stickyHeader: n, ...r }) {
509
+ let a = !!n, o = f(null), s = ue(), c = r.selectionMode === "multiple", l = C({
510
+ ...r,
511
+ showSelectionCheckboxes: r.selectionMode === "multiple",
512
+ children: t
513
+ }), u = S({ tableWidth: s.tableWidth }, l), d = s.isResizable && r.allowsResizing !== !1 ? u : null, { gridProps: p } = ee({ ...r }, l, o), _ = l.collection.headerRows, v = [...l.collection.body.childNodes], y = l.collection.body.props?.renderEmptyState, b = l.collection.columns.length || 1, x = v.length > 0 || !!y, { rowGroupProps: T } = O(), { rowGroupProps: E } = O(), { gridProps: te, keyboardMode: D } = he({
514
+ ref: o,
515
+ gridProps: p,
516
+ onKeyDownCapture: r.onKeyDownCapture,
517
+ onFocusCapture: r.onFocusCapture
518
+ });
519
+ return /* @__PURE__ */ m(V.Provider, {
520
+ value: D,
521
+ children: /* @__PURE__ */ h("table", {
522
+ ...w(te, g(r, { global: !0 })),
523
+ ref: o,
524
+ "data-spark-component": "table",
525
+ className: i("default:w-full", c ? "table-fixed" : void 0, "border-separate border-spacing-y-0", "bg-surface", "outline-none", "text-body-1", "forced-color-adjust-none", "data-focus-visible:u-outline-inset", "has-[>[data-empty]]:h-full", e),
526
+ children: [/* @__PURE__ */ m("thead", {
527
+ ...T,
528
+ "data-spark-component": "table-header",
529
+ children: _.map((e) => /* @__PURE__ */ m(Ee, {
530
+ item: e,
531
+ state: l,
532
+ resizeState: d,
533
+ stickyHeader: a,
534
+ resizeCallbacks: {
535
+ onResizeStart: r.onResizeStart,
536
+ onResize: r.onResize,
537
+ onResizeEnd: r.onResizeEnd
538
+ }
539
+ }, e.key))
540
+ }), /* @__PURE__ */ h("tbody", {
541
+ ...E,
542
+ "data-spark-component": "table-body",
543
+ children: [
544
+ x ? /* @__PURE__ */ m("tr", {
545
+ "aria-hidden": "true",
546
+ className: _e(),
547
+ role: "presentation",
548
+ "data-spark-component": "table-body-spacer",
549
+ children: /* @__PURE__ */ m("td", {
550
+ colSpan: b,
551
+ role: "presentation"
552
+ })
553
+ }) : null,
554
+ v.length === 0 && y ? /* @__PURE__ */ m("tr", {
555
+ "data-empty": !0,
556
+ children: /* @__PURE__ */ m("td", {
557
+ colSpan: b,
558
+ children: y({ isEmpty: !0 })
559
+ })
560
+ }) : null,
561
+ v.map((e) => /* @__PURE__ */ m(W, {
562
+ item: e,
563
+ state: l,
564
+ resizeState: d
565
+ }, e.key))
566
+ ]
567
+ })]
568
+ })
569
+ });
570
+ }
571
+ De.displayName = "Table.Grid.Inner";
572
+ //#endregion
573
+ //#region src/table/internal/TableGrid.tsx
574
+ function Oe(e) {
575
+ return typeof e == "number" ? `${e}px` : e;
576
+ }
577
+ function ke({ "aria-label": e, "aria-labelledby": t, className: n, children: r }) {
578
+ let { allowsResizing: i = !0, maxHeight: a, stickyHeader: o, onResizeStart: s, onResize: c, onResizeEnd: l, onKeyDownCapture: u, sortDescriptor: d, onSortChange: f, className: p, ...h } = k(), g = a == null ? void 0 : { maxHeight: Oe(a) }, _ = n ?? p, v = {
579
+ ...h,
580
+ ...e != null && { "aria-label": e },
581
+ ...t != null && { "aria-labelledby": t },
582
+ sortDescriptor: d,
583
+ onSortChange: f,
584
+ onKeyDownCapture: u,
585
+ className: _,
586
+ stickyHeader: o
587
+ }, y = De;
588
+ return i ? /* @__PURE__ */ m(A, {
589
+ className: _,
590
+ style: g,
591
+ onResizeStart: s,
592
+ onResize: c,
593
+ onResizeEnd: l,
594
+ children: /* @__PURE__ */ m(y, {
595
+ ...v,
596
+ children: r
597
+ })
598
+ }) : /* @__PURE__ */ m("div", {
599
+ className: "relative w-full overflow-auto",
600
+ style: g,
601
+ children: /* @__PURE__ */ m(y, {
602
+ ...v,
603
+ children: r
604
+ })
605
+ });
606
+ }
607
+ ke.displayName = "Table.Grid";
608
+ //#endregion
609
+ //#region src/table/TableBody.tsx
610
+ function q(e) {
611
+ return /* @__PURE__ */ m(b, { ...e });
612
+ }
613
+ q.displayName = "Table.Body", q.getCollectionNode = b.getCollectionNode;
196
614
  //#endregion
197
615
  //#region src/table/TableBulkBar.tsx
198
- var B = a(null);
199
- function V() {
200
- let e = s(B);
616
+ var Ae = o(null);
617
+ function J() {
618
+ let e = c(Ae);
201
619
  if (!e) throw Error("Table.BulkBar subcomponents must be used within Table.BulkBar");
202
620
  return e;
203
621
  }
204
- function H({ children: e, className: t }) {
205
- let { selectedCount: n, totalCount: r, onClearSelection: a, onSelectAll: o, hasMultiplePages: s } = N(), c = {
206
- selectedCount: n,
207
- totalCount: r,
208
- onClearSelection: a,
209
- onSelectAll: o,
210
- hasMultiplePages: s
622
+ function je({ children: e, className: t, rootProps: n, ...r }) {
623
+ let { selectedCount: a, totalCount: o, onClearSelection: s, onSelectAll: c, hasMultiplePages: l } = k(), u = {
624
+ selectedCount: a,
625
+ totalCount: o,
626
+ onClearSelection: s,
627
+ onSelectAll: c,
628
+ hasMultiplePages: l
211
629
  };
212
- return /* @__PURE__ */ m(B.Provider, {
213
- value: c,
630
+ return /* @__PURE__ */ m(Ae.Provider, {
631
+ value: u,
214
632
  children: /* @__PURE__ */ m("div", {
215
633
  role: "toolbar",
216
- "aria-label": "Table bulk actions",
634
+ "aria-label": r["aria-label"] ?? "Table bulk actions",
217
635
  "data-spark-component": "table-bulk-bar",
218
636
  className: i("gap-lg min-h-sz-64 flex w-full flex-wrap items-center justify-between", "rounded-lg", "bg-support-container text-on-support-container p-lg", t),
637
+ ...n,
219
638
  children: e
220
639
  })
221
640
  });
222
641
  }
223
- function U({ children: e }) {
224
- return V(), /* @__PURE__ */ m("span", {
642
+ function Me({ children: e }) {
643
+ return J(), /* @__PURE__ */ m("span", {
225
644
  className: "text-body-1 font-bold",
226
645
  children: e
227
646
  });
228
647
  }
229
- function W({ className: e, children: n, ...r }) {
230
- let { selectedCount: a, onClearSelection: o, hasMultiplePages: s } = V();
648
+ function Ne({ className: e, children: n, ...r }) {
649
+ let { selectedCount: a, onClearSelection: o, hasMultiplePages: s } = J();
231
650
  return s ? /* @__PURE__ */ m(t, {
232
651
  size: "sm",
233
652
  design: "ghost",
@@ -240,8 +659,8 @@ function W({ className: e, children: n, ...r }) {
240
659
  children: n
241
660
  }) : null;
242
661
  }
243
- function G({ className: e, children: n, ...r }) {
244
- let { selectedCount: a, totalCount: o, onSelectAll: s, hasMultiplePages: c } = V();
662
+ function Pe({ className: e, children: n, ...r }) {
663
+ let { selectedCount: a, totalCount: o, onSelectAll: s, hasMultiplePages: c } = J();
245
664
  return c ? /* @__PURE__ */ m(t, {
246
665
  size: "sm",
247
666
  design: "ghost",
@@ -254,182 +673,126 @@ function G({ className: e, children: n, ...r }) {
254
673
  children: n
255
674
  }) : null;
256
675
  }
257
- H.displayName = "Table.BulkBar";
258
- var K = H;
259
- K.displayName = "Table.BulkBar", U.displayName = "Table.BulkBarSelectedCount", W.displayName = "Table.BulkBarClearButton", G.displayName = "Table.BulkBarSelectAllButton";
676
+ je.displayName = "Table.BulkBar";
677
+ var Fe = je;
678
+ Fe.displayName = "Table.BulkBar", Me.displayName = "Table.BulkBarSelectedCount", Ne.displayName = "Table.BulkBarClearButton", Pe.displayName = "Table.BulkBarSelectAllButton";
260
679
  //#endregion
261
680
  //#region src/table/TableCell.tsx
262
- function q({ className: e, checkbox: t, onClick: n, onPointerDown: r, ...a }) {
263
- let o = (e) => {
264
- O(e.target) && e.stopPropagation();
265
- };
266
- return /* @__PURE__ */ m(_, {
267
- "data-spark-component": "table-cell",
268
- className: i(ue({ checkbox: t }), e),
269
- onClick: (e) => {
270
- o(e), n?.(e);
271
- },
272
- onPointerDown: (e) => {
273
- o(e), r?.(e);
274
- },
275
- ...a
276
- });
681
+ function Y(e) {
682
+ return /* @__PURE__ */ m(y, { ...e });
277
683
  }
278
- q.displayName = "Table.Cell";
684
+ Y.displayName = "Table.Cell", Y.getCollectionNode = y.getCollectionNode;
279
685
  //#endregion
280
686
  //#region src/table/TableColumn.tsx
281
- function J({ className: t, label: n, children: r, allowsResizing: a = !0, minWidth: o = 120, ...s }) {
282
- let { isResizable: c } = j(), l = r;
283
- return /* @__PURE__ */ m(b, {
284
- "data-spark-component": "table-column",
285
- className: i(R(), t),
286
- minWidth: o,
287
- ...s,
288
- children: ie(l, (t, o) => {
289
- let { allowsSorting: l, sortDirection: u } = o, d = (e) => {
290
- O(e.target) && e.stopPropagation();
291
- };
292
- return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(ee, {
293
- role: "presentation",
294
- tabIndex: -1,
295
- className: i("border-transparent", "focus-visible:u-outline focus-visible:outline-offset-2", "gap-sm box-border flex flex-1 items-center"),
296
- onClick: d,
297
- onPointerDown: d,
298
- children: [/* @__PURE__ */ h("div", {
299
- className: "gap-md flex min-w-0 shrink items-center",
300
- children: [/* @__PURE__ */ m("p", {
301
- className: "truncate",
302
- children: n
303
- }), r && /* @__PURE__ */ m("div", {
304
- className: "inline-flex shrink-0 items-center",
305
- children: typeof t == "function" ? t({
306
- ...o,
307
- defaultChildren: void 0
308
- }) : t
309
- })]
310
- }), l && /* @__PURE__ */ m("span", {
311
- className: "size-sz-32 ml-auto inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",
312
- children: /* @__PURE__ */ m(e, {
313
- size: "sm",
314
- className: i(u === "descending" && "rotate-180"),
315
- children: m(u ? E : oe, {})
316
- })
317
- })]
318
- }), c && a && !s.width && /* @__PURE__ */ m(x, { className: i("z-raised absolute top-0 right-[-8px]", "group-last/column:hidden", "h-full w-[16px] touch-none", "mx-0 cursor-col-resize", "data-focus-visible:after:u-outline", "data-resizing:after:bg-outline-high after:transition-transform after:duration-200 data-resizing:after:scale-125", "after:h-sz-32 after:bg-outline after:absolute after:top-1/2 after:left-1/2 after:w-[2px] after:-translate-y-1/2") })] });
319
- })
320
- });
687
+ function X({ label: e, allowsResizing: t = !0, ...n }) {
688
+ return null;
321
689
  }
322
- J.displayName = "Table.Column";
323
- //#endregion
324
- //#region src/table/TableSelectionCheckbox.tsx
325
- var Y = o(function(e, t) {
326
- let [r, i] = ae({
327
- ...e,
328
- slot: "selection"
329
- }, t, v), { isSelected: a, isIndeterminate: o, onChange: s, ...c } = r;
330
- return /* @__PURE__ */ m("span", {
331
- onClick: (e) => e.stopPropagation(),
332
- onPointerDown: (e) => e.stopPropagation(),
333
- className: "flex h-full min-h-full items-center justify-center",
334
- children: /* @__PURE__ */ m(n, {
335
- ref: i,
336
- checked: o === !0 ? "indeterminate" : !!a,
337
- onCheckedChange: s,
338
- ...c
339
- })
340
- });
341
- });
342
- Y.displayName = "Table.SelectionCheckbox";
343
- //#endregion
344
- //#region src/table/TableHeaderSelectionCheckbox.tsx
345
- function X() {
346
- let e = s(w);
347
- if (!e) return /* @__PURE__ */ m(Y, {});
348
- let { collection: t, selectionManager: r } = e, i = r.selectedKeys, a = t, o = a.body, c = o == null ? new Set(t.getKeys()) : new Set([...a.getChildren(o.key)].map((e) => e.key)), l = i === "all" ? c : i, u = [...c].filter((e) => l.has(e)).length, d = c.size;
349
- return /* @__PURE__ */ m("span", {
350
- onClick: (e) => e.stopPropagation(),
351
- onPointerDown: (e) => e.stopPropagation(),
352
- className: "flex h-full min-h-full items-center justify-center",
353
- children: /* @__PURE__ */ m(n, {
354
- checked: u > 0 && u < d ? "indeterminate" : d > 0 && u === d,
355
- onCheckedChange: () => {
356
- r.toggleSelectAll();
690
+ X.displayName = "Table.Column", X.getCollectionNode = function* (e, t) {
691
+ let n = e.title ?? e.label ?? e.children ?? null, r = e.textValue || (typeof n == "string" ? n : "") || e["aria-label"], i = yield {
692
+ type: "column",
693
+ key: e.id ?? null,
694
+ hasChildNodes: !!e.childColumns || !!e.title && a.Children.count(e.children) > 0,
695
+ rendered: n,
696
+ textValue: r,
697
+ props: {
698
+ ...e,
699
+ title: e.title ?? e.label,
700
+ allowsResizing: e.allowsResizing
701
+ },
702
+ *childNodes() {
703
+ if (e.childColumns) for (let t of e.childColumns) yield {
704
+ type: "column",
705
+ value: t
706
+ };
707
+ else if (e.title) {
708
+ let t = [];
709
+ a.Children.forEach(e.children, (e) => {
710
+ t.push({
711
+ type: "column",
712
+ element: e
713
+ });
714
+ }), yield* t;
357
715
  }
358
- })
359
- });
360
- }
361
- X.displayName = "Table.HeaderSelectionCheckbox";
716
+ },
717
+ shouldInvalidate(e) {
718
+ return o(e), !1;
719
+ }
720
+ }, o = (e) => {
721
+ for (let t of i) t.hasChildNodes || e.columns.push(t);
722
+ };
723
+ o(t);
724
+ };
362
725
  //#endregion
363
726
  //#region src/table/TableHeader.tsx
364
- function Z({ className: e, columns: t, children: n, sticky: r = !0, ...a }) {
365
- let { selectionBehavior: o, selectionMode: s, allowsDragging: c } = T();
366
- return /* @__PURE__ */ h(C, {
367
- "data-spark-component": "table-header",
368
- className: i([
369
- r && "z-raised sticky top-0",
370
- "text-on-neutral-container text-body-1 font-semibold",
371
- "after:pt-md after:block after:size-0"
372
- ], e),
373
- columns: t,
374
- ...a,
375
- children: [
376
- c && /* @__PURE__ */ m(b, {
377
- width: 20,
378
- minWidth: 20,
379
- className: "w-sz-20 min-w-sz-20 box-border"
380
- }),
381
- o === "toggle" && /* @__PURE__ */ m(b, {
382
- width: 56,
383
- minWidth: 56,
384
- className: i(R()),
385
- children: s === "multiple" && /* @__PURE__ */ m(X, {})
386
- }),
387
- t == null ? n : /* @__PURE__ */ m(y, {
388
- items: t,
389
- children: n
390
- })
391
- ]
392
- });
727
+ function Z(e) {
728
+ return /* @__PURE__ */ m(x, { ...e });
393
729
  }
394
- Z.displayName = "Table.Header";
730
+ Z.displayName = "Table.Header", Z.getCollectionNode = x.getCollectionNode;
395
731
  //#endregion
396
732
  //#region src/table/TableRow.tsx
397
- function Q({ id: e, columns: t, children: n, className: r, ...a }) {
398
- let { selectionBehavior: o, allowsDragging: s } = T();
399
- return /* @__PURE__ */ h(te, {
400
- id: e,
401
- "data-spark-component": "table-row",
402
- className: i("group/row", "h-sz-80", "group/row text-on-surface relative cursor-default select-none", "[-webkit-tap-highlight-color:transparent]", "data-focus-visible:u-outline-inset outline-none data-focus-visible:outline-dashed", "data-react-aria-pressable:hover:bg-surface-hovered data-react-aria-pressable:pressed:bg-surface-hovered", "data-selected:bg-support-container data-selected:text-on-support-container", "data-selected:hover:bg-support-container-hovered data-selected:data-pressed:bg-support-container-hovered", "data-disabled:text-on-surface/dim-3", "data-href:cursor-pointer", r),
403
- columns: t,
404
- ...a,
405
- children: [
406
- s && /* @__PURE__ */ m(q, { children: /* @__PURE__ */ m(g, {
407
- slot: "drag",
408
- className: "w-sz-15 data-focus-visible:u-outline flex items-center justify-center text-center outline-none data-[focus-visible]:rounded-md",
409
- children: "≡"
410
- }) }),
411
- o === "toggle" && /* @__PURE__ */ m(q, {
412
- checkbox: !0,
413
- children: /* @__PURE__ */ m(Y, {})
414
- }),
415
- t == null ? n : /* @__PURE__ */ m(y, {
416
- items: t,
417
- children: n
418
- })
419
- ]
420
- });
733
+ function Q(e) {
734
+ return null;
421
735
  }
422
- Q.displayName = "Table.Row";
736
+ Q.displayName = "Table.Row", Q.getCollectionNode = function* (e, t) {
737
+ let { children: n, textValue: r, UNSTABLE_childItems: i } = e;
738
+ yield {
739
+ type: "item",
740
+ key: e.id ?? null,
741
+ props: e,
742
+ textValue: r,
743
+ "aria-label": e["aria-label"],
744
+ hasChildNodes: !0,
745
+ *childNodes() {
746
+ if (t.showDragButtons && (yield {
747
+ type: "cell",
748
+ key: "header-drag",
749
+ props: { isDragButtonCell: !0 }
750
+ }), t.showSelectionCheckboxes && t.selectionMode !== "none" && (yield {
751
+ type: "cell",
752
+ key: "header",
753
+ props: { isSelectionCell: !0 }
754
+ }), typeof n == "function") {
755
+ for (let e of t.columns) yield {
756
+ type: "cell",
757
+ element: n(e.key),
758
+ key: e.key
759
+ };
760
+ if (i) for (let e of i) yield {
761
+ type: "item",
762
+ value: e
763
+ };
764
+ } else {
765
+ let e = [], r = [], i = 0;
766
+ if (a.Children.forEach(n, (n) => {
767
+ if (n) if (n.type === Q) {
768
+ if (e.length < t.columns.length) throw Error("All of a Row's child Cells must be positioned before any child Rows.");
769
+ r.push({
770
+ type: "item",
771
+ element: n
772
+ });
773
+ } else e.push({
774
+ type: "cell",
775
+ element: n
776
+ }), i += n.props?.colSpan ?? 1;
777
+ }), i !== t.columns.length) throw Error(`Cell count must match column count. Found ${i} cells and ${t.columns.length} columns.`);
778
+ yield* e, yield* r;
779
+ }
780
+ },
781
+ shouldInvalidate(e) {
782
+ return e.columns.length !== t.columns.length || e.columns.some((e, n) => e.key !== t.columns[n].key) || e.showSelectionCheckboxes !== t.showSelectionCheckboxes || e.showDragButtons !== t.showDragButtons || e.selectionMode !== t.selectionMode;
783
+ }
784
+ };
785
+ };
423
786
  //#endregion
424
787
  //#region src/table/useTableSort.ts
425
- function de(e, t, n, r) {
788
+ function Ie(e, t, n, r) {
426
789
  let i = e[n], a = t[n];
427
790
  if (i === a) return 0;
428
791
  let o;
429
792
  return o = typeof i == "number" && typeof a == "number" ? i < a ? -1 : 1 : String(i).localeCompare(String(a)), r === "descending" ? -o : o;
430
793
  }
431
- function fe(e, t = {}) {
432
- let { initialSort: n, compare: r } = t, [i, a] = f(() => n ? {
794
+ function Le(e, t = {}) {
795
+ let { initialSort: n, compare: r } = t, [i, a] = p(() => n ? {
433
796
  column: n.column,
434
797
  direction: n.direction
435
798
  } : {
@@ -440,10 +803,10 @@ function fe(e, t = {}) {
440
803
  sortDescriptor: i,
441
804
  onSortChange: a,
442
805
  setSortDescriptor: a,
443
- sortedItems: u(() => {
806
+ sortedItems: d(() => {
444
807
  let t = i.column;
445
808
  if (!t) return [...e];
446
- let n = r ?? de, a = i.direction ?? "ascending";
809
+ let n = r ?? Ie, a = i.direction ?? "ascending";
447
810
  return [...e].sort((e, r) => n(e, r, t, a));
448
811
  }, [
449
812
  e,
@@ -455,28 +818,28 @@ function fe(e, t = {}) {
455
818
  }
456
819
  //#endregion
457
820
  //#region src/table/useTablePagination.ts
458
- function pe(e, t) {
459
- let { pageSize: n, initialPage: r = 1, getId: i } = t, [a, o] = f(r), [s, l] = f(() => /* @__PURE__ */ new Set()), d = e.length, p = Math.max(1, Math.ceil(d / n));
460
- c(() => {
461
- o((e) => e < 1 ? 1 : e > p ? p : e);
462
- }, [p]);
821
+ function Re(e, t) {
822
+ let { pageSize: n, initialPage: r = 1, getId: i } = t, [a, o] = p(r), [s, c] = p(() => /* @__PURE__ */ new Set()), u = e.length, f = Math.max(1, Math.ceil(u / n));
823
+ l(() => {
824
+ o((e) => e < 1 ? 1 : e > f ? f : e);
825
+ }, [f]);
463
826
  let m = a;
464
- m < 1 ? m = 1 : m > p && (m = p);
465
- let h = u(() => {
827
+ m < 1 ? m = 1 : m > f && (m = f);
828
+ let h = d(() => {
466
829
  let t = (m - 1) * n, r = t + n;
467
830
  return e.slice(t, r);
468
831
  }, [
469
832
  e,
470
833
  m,
471
834
  n
472
- ]), g = u(() => {
835
+ ]), g = d(() => {
473
836
  let t = i ?? ((e) => {
474
837
  let t = e.id;
475
838
  if (t == null) throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");
476
839
  return t;
477
840
  });
478
841
  return new Set(e.map((e) => t(e)));
479
- }, [i, e]), _ = u(() => {
842
+ }, [i, e]), _ = d(() => {
480
843
  let e = i ?? ((e) => {
481
844
  let t = e.id;
482
845
  if (t == null) throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");
@@ -488,13 +851,13 @@ function pe(e, t) {
488
851
  page: m,
489
852
  setPage: o,
490
853
  pageItems: h,
491
- totalItems: d,
492
- totalPages: p,
854
+ totalItems: u,
855
+ totalPages: f,
493
856
  allKeys: g,
494
857
  selectedKeys: s,
495
858
  onSelectionChange: (e) => {
496
859
  let t = e === "all" ? new Set(_) : new Set(e);
497
- l((e) => {
860
+ c((e) => {
498
861
  let n = new Set(t);
499
862
  for (let t of e) _.has(t) || n.add(t);
500
863
  return n;
@@ -504,26 +867,26 @@ function pe(e, t) {
504
867
  o(e.page);
505
868
  },
506
869
  clearSelection: () => {
507
- l(() => /* @__PURE__ */ new Set());
870
+ c(() => /* @__PURE__ */ new Set());
508
871
  }
509
872
  };
510
873
  }
511
874
  //#endregion
512
875
  //#region src/table/index.ts
513
- var $ = Object.assign(F, {
514
- Grid: L,
876
+ var $ = Object.assign(fe, {
877
+ Grid: ke,
515
878
  Header: Z,
516
- Column: J,
517
- Body: z,
879
+ Column: X,
880
+ Body: q,
518
881
  Row: Q,
519
- Cell: q,
520
- BulkBar: K,
521
- BulkBarSelectedCount: U,
522
- BulkBarClearButton: W,
523
- BulkBarSelectAllButton: G
882
+ Cell: Y,
883
+ BulkBar: Fe,
884
+ BulkBarSelectedCount: Me,
885
+ BulkBarClearButton: Ne,
886
+ BulkBarSelectAllButton: Pe
524
887
  });
525
- $.displayName = "Table", Z.displayName = "Table.Header", J.displayName = "Table.Column", z.displayName = "Table.Body", Q.displayName = "Table.Row", q.displayName = "Table.Cell";
888
+ $.displayName = "Table", Z.displayName = "Table.Header", X.displayName = "Table.Column", q.displayName = "Table.Body", Q.displayName = "Table.Row", Y.displayName = "Table.Cell";
526
889
  //#endregion
527
- export { $ as Table, $ as TableWithSubcomponents, pe as useTablePagination, fe as useTableSort };
890
+ export { $ as Table, $ as TableWithSubcomponents, Re as useTablePagination, Le as useTableSort };
528
891
 
529
892
  //# sourceMappingURL=index.mjs.map