@adapttable/unstyled 0.1.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.
package/dist/index.js ADDED
@@ -0,0 +1,2401 @@
1
+ import { resolveLabels, useSavedViews, useTableData, isDeclarativeFilters, useTableChrome, useFilterTriggerToggle, useChromeScrollReset, useChromeBodyData, RANGE_SUFFIXES, useColumnDragState, columnMenuRows, pageSizeOptions, useBulkActionRunner, resolveDisabledReason, ACTIONS_COLUMN_KEY, readRangeWidget, RANGE_OP_LABEL_KEYS, RANGE_OPS, filterLabel, useFilterOptions, GripIcon, columnReorderKeyProps, nextPinSide, pinActionLabel, resolveVirtualRows, rowClickProps, tableRenderModel, useHorizontalOverflow, PIN_Z, tableMinWidth, headerGroupRow, columnResizeHandleProps, writeRangeWidget, EyeIcon, PinIcon, edgePinStyle, pinnedColumnWidth, runRowAction, pinnedCellStyle } from '@adapttable/core';
2
+ export { FILTER_TYPES, createHistoryAdapter, createMemoryAdapter, defaultConfirm, defaultLabels, deriveSortByOptions, filterLabel, filterStateKeys, getHistoryAdapter, useBackendData, useDataTable, useFrontendData, useSavedViews, useServerData, useTableData, useTableUrlState } from '@adapttable/core';
3
+ import { useRef, useEffect, useState, useCallback, useMemo, memo } from 'react';
4
+ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
5
+ import { createPortal } from 'react-dom';
6
+
7
+ // src/components/AutoFilterForm.tsx
8
+ var FIELD_PART = "filter-field";
9
+ var LABEL_PART = "filter-label";
10
+ function asText(value) {
11
+ return String(value ?? "");
12
+ }
13
+ function selectedValues(value) {
14
+ if (Array.isArray(value)) return value;
15
+ if (value == null || value === "") return [];
16
+ return [String(value)];
17
+ }
18
+ function GroupField({
19
+ caption,
20
+ classNames,
21
+ children
22
+ }) {
23
+ return /* @__PURE__ */ jsxs(
24
+ "fieldset",
25
+ {
26
+ "data-adapttable-part": FIELD_PART,
27
+ className: classNames.filterField,
28
+ children: [
29
+ /* @__PURE__ */ jsx(
30
+ "legend",
31
+ {
32
+ "data-adapttable-part": LABEL_PART,
33
+ className: classNames.filterLabel,
34
+ children: caption
35
+ }
36
+ ),
37
+ children
38
+ ]
39
+ }
40
+ );
41
+ }
42
+ function BagInput({
43
+ source,
44
+ stateKey,
45
+ type,
46
+ placeholder,
47
+ classNames
48
+ }) {
49
+ return /* @__PURE__ */ jsx(
50
+ "input",
51
+ {
52
+ type,
53
+ placeholder,
54
+ "data-adapttable-part": "filter-input",
55
+ className: classNames.filterInput,
56
+ value: asText(source.extra[stateKey]),
57
+ onChange: (e) => source.setExtra(stateKey, e.currentTarget.value)
58
+ }
59
+ );
60
+ }
61
+ function TextField({
62
+ def,
63
+ source,
64
+ classNames
65
+ }) {
66
+ return /* @__PURE__ */ jsxs("label", { "data-adapttable-part": FIELD_PART, className: classNames.filterField, children: [
67
+ /* @__PURE__ */ jsx(
68
+ "span",
69
+ {
70
+ "data-adapttable-part": LABEL_PART,
71
+ className: classNames.filterLabel,
72
+ children: filterLabel(def)
73
+ }
74
+ ),
75
+ " ",
76
+ /* @__PURE__ */ jsx(
77
+ BagInput,
78
+ {
79
+ source,
80
+ stateKey: def.key,
81
+ type: "text",
82
+ placeholder: def.placeholder,
83
+ classNames
84
+ }
85
+ )
86
+ ] });
87
+ }
88
+ function SelectField({
89
+ def,
90
+ source,
91
+ classNames
92
+ }) {
93
+ const { options, loading } = useFilterOptions(def);
94
+ return /* @__PURE__ */ jsxs("label", { "data-adapttable-part": FIELD_PART, className: classNames.filterField, children: [
95
+ /* @__PURE__ */ jsx(
96
+ "span",
97
+ {
98
+ "data-adapttable-part": LABEL_PART,
99
+ className: classNames.filterLabel,
100
+ children: filterLabel(def)
101
+ }
102
+ ),
103
+ " ",
104
+ /* @__PURE__ */ jsx(
105
+ "select",
106
+ {
107
+ "data-adapttable-part": "filter-select",
108
+ className: classNames.filterSelect,
109
+ value: asText(source.extra[def.key]),
110
+ onChange: (e) => source.setExtra(def.key, e.currentTarget.value),
111
+ children: loading ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
112
+ /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
113
+ options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
114
+ ] })
115
+ }
116
+ )
117
+ ] });
118
+ }
119
+ function MultiSelectField({
120
+ def,
121
+ source,
122
+ classNames
123
+ }) {
124
+ const selected = selectedValues(source.extra[def.key]);
125
+ const { options, loading } = useFilterOptions(def);
126
+ return /* @__PURE__ */ jsx(GroupField, { caption: filterLabel(def), classNames, children: /* @__PURE__ */ jsx(
127
+ "div",
128
+ {
129
+ "data-adapttable-part": "filter-checkbox-group",
130
+ className: classNames.filterCheckboxGroup,
131
+ children: loading ? /* @__PURE__ */ jsx(
132
+ "span",
133
+ {
134
+ "data-adapttable-part": "filter-options-loading",
135
+ className: classNames.filterOptionsLoading,
136
+ children: "\u2026"
137
+ }
138
+ ) : options.map((option) => /* @__PURE__ */ jsxs(
139
+ "label",
140
+ {
141
+ "data-adapttable-part": "filter-checkbox",
142
+ className: classNames.filterCheckbox,
143
+ children: [
144
+ /* @__PURE__ */ jsx(
145
+ "input",
146
+ {
147
+ type: "checkbox",
148
+ checked: selected.includes(option.value),
149
+ onChange: (e) => source.setExtra(
150
+ def.key,
151
+ e.currentTarget.checked ? [...selected, option.value] : selected.filter((v) => v !== option.value)
152
+ )
153
+ }
154
+ ),
155
+ " ",
156
+ option.label
157
+ ]
158
+ },
159
+ option.value
160
+ ))
161
+ }
162
+ ) });
163
+ }
164
+ function RangeValueInput({
165
+ type,
166
+ label,
167
+ value,
168
+ onValue,
169
+ classNames
170
+ }) {
171
+ return /* @__PURE__ */ jsx(
172
+ "input",
173
+ {
174
+ type,
175
+ style: { flex: "1 1 7rem", minWidth: "7rem" },
176
+ placeholder: label,
177
+ "aria-label": label,
178
+ "data-adapttable-part": "filter-input",
179
+ className: classNames.filterInput,
180
+ value,
181
+ onChange: (e) => onValue(e.currentTarget.value)
182
+ }
183
+ );
184
+ }
185
+ function RangeField({
186
+ def,
187
+ source,
188
+ classNames,
189
+ inputType,
190
+ suffixes,
191
+ labels
192
+ }) {
193
+ const lowKey = def.key + suffixes.start;
194
+ const highKey = def.key + suffixes.end;
195
+ const [op, setOp] = useState(
196
+ () => readRangeWidget(source.extra, lowKey, highKey).op
197
+ );
198
+ const a = asText(source.extra[op === "lte" ? highKey : lowKey]);
199
+ const b = asText(source.extra[highKey]);
200
+ const write = (nextOp, nextA, nextB) => source.setExtras(writeRangeWidget(nextOp, nextA, nextB, lowKey, highKey));
201
+ const opLabelKeys = RANGE_OP_LABEL_KEYS[inputType];
202
+ return /* @__PURE__ */ jsx(GroupField, { caption: filterLabel(def), classNames, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: [
203
+ /* @__PURE__ */ jsxs(
204
+ "select",
205
+ {
206
+ style: { flex: "0 0 8.5rem", width: "8.5rem" },
207
+ "aria-label": labels.operator,
208
+ "data-adapttable-part": "filter-operator",
209
+ className: classNames.filterOperator,
210
+ value: op ?? "",
211
+ onChange: (e) => {
212
+ const next = RANGE_OPS.find((o) => o === e.currentTarget.value);
213
+ setOp(next);
214
+ write(next, a, b);
215
+ },
216
+ children: [
217
+ /* @__PURE__ */ jsx("option", { value: "", children: labels.operator }),
218
+ RANGE_OPS.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: labels[opLabelKeys[o]] }, o))
219
+ ]
220
+ }
221
+ ),
222
+ op === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [
223
+ /* @__PURE__ */ jsx(
224
+ RangeValueInput,
225
+ {
226
+ type: inputType,
227
+ label: labels.from,
228
+ value: a,
229
+ onValue: (next) => write(op, next, b),
230
+ classNames
231
+ }
232
+ ),
233
+ /* @__PURE__ */ jsx(
234
+ RangeValueInput,
235
+ {
236
+ type: inputType,
237
+ label: labels.to,
238
+ value: b,
239
+ onValue: (next) => write(op, a, next),
240
+ classNames
241
+ }
242
+ )
243
+ ] }),
244
+ op !== void 0 && op !== "between" && /* @__PURE__ */ jsx(
245
+ RangeValueInput,
246
+ {
247
+ type: inputType,
248
+ label: labels.value,
249
+ value: a,
250
+ onValue: (next) => write(op, next, ""),
251
+ classNames
252
+ }
253
+ )
254
+ ] }) });
255
+ }
256
+ function FilterField({
257
+ def,
258
+ source,
259
+ classNames,
260
+ labels
261
+ }) {
262
+ switch (def.type) {
263
+ case "text":
264
+ return /* @__PURE__ */ jsx(TextField, { def, source, classNames });
265
+ case "select":
266
+ return /* @__PURE__ */ jsx(SelectField, { def, source, classNames });
267
+ case "multiSelect":
268
+ return /* @__PURE__ */ jsx(MultiSelectField, { def, source, classNames });
269
+ case "dateRange":
270
+ return /* @__PURE__ */ jsx(
271
+ RangeField,
272
+ {
273
+ def,
274
+ source,
275
+ classNames,
276
+ inputType: "date",
277
+ suffixes: RANGE_SUFFIXES.dateRange,
278
+ labels
279
+ }
280
+ );
281
+ case "numberRange":
282
+ return /* @__PURE__ */ jsx(
283
+ RangeField,
284
+ {
285
+ def,
286
+ source,
287
+ classNames,
288
+ inputType: "number",
289
+ suffixes: RANGE_SUFFIXES.numberRange,
290
+ labels
291
+ }
292
+ );
293
+ }
294
+ }
295
+ function AutoFilterForm({
296
+ defs,
297
+ source,
298
+ classNames = {},
299
+ labels
300
+ }) {
301
+ const resolvedLabels = resolveLabels(labels);
302
+ return /* @__PURE__ */ jsx(Fragment, { children: defs.map((def) => /* @__PURE__ */ jsx(
303
+ FilterField,
304
+ {
305
+ def,
306
+ source,
307
+ classNames,
308
+ labels: resolvedLabels
309
+ },
310
+ def.key
311
+ )) });
312
+ }
313
+
314
+ // src/cx.ts
315
+ function cx(...parts) {
316
+ return parts.filter(Boolean).join(" ");
317
+ }
318
+ function FilterPanel({
319
+ open,
320
+ onClose,
321
+ filters,
322
+ activeFilterCount,
323
+ onClearFilters,
324
+ labels,
325
+ dir = "ltr",
326
+ classNames
327
+ }) {
328
+ const panelRef = useRef(null);
329
+ const onCloseRef = useRef(onClose);
330
+ onCloseRef.current = onClose;
331
+ useEffect(() => {
332
+ if (!open) return;
333
+ const trigger = document.activeElement;
334
+ panelRef.current?.focus();
335
+ const onKeyDown = (event) => {
336
+ if (event.key === "Escape") onCloseRef.current();
337
+ };
338
+ document.addEventListener("keydown", onKeyDown);
339
+ return () => {
340
+ document.removeEventListener("keydown", onKeyDown);
341
+ trigger?.focus?.();
342
+ };
343
+ }, [open]);
344
+ if (!open) return null;
345
+ return createPortal(
346
+ /* @__PURE__ */ jsxs(Fragment, { children: [
347
+ /* @__PURE__ */ jsx(
348
+ "button",
349
+ {
350
+ type: "button",
351
+ "aria-label": labels.cancel,
352
+ "data-adapttable-part": "filters-backdrop",
353
+ className: cx(
354
+ "adapttable-filters-backdrop",
355
+ classNames.filtersBackdrop
356
+ ),
357
+ onClick: onClose
358
+ }
359
+ ),
360
+ /* @__PURE__ */ jsxs(
361
+ "dialog",
362
+ {
363
+ ref: panelRef,
364
+ open: true,
365
+ tabIndex: -1,
366
+ "aria-modal": "true",
367
+ "aria-label": labels.filters,
368
+ "data-adapttable-part": "filters-panel",
369
+ dir,
370
+ "data-dir": dir,
371
+ className: cx("adapttable-filters-panel", classNames.filtersPanel),
372
+ style: {
373
+ position: "fixed",
374
+ insetBlock: 0,
375
+ insetInlineEnd: 0,
376
+ insetInlineStart: "auto",
377
+ margin: 0,
378
+ maxHeight: "none",
379
+ maxWidth: "none",
380
+ height: "100%",
381
+ zIndex: 200
382
+ },
383
+ children: [
384
+ /* @__PURE__ */ jsxs(
385
+ "header",
386
+ {
387
+ "data-adapttable-part": "filters-header",
388
+ className: classNames.filtersHeader,
389
+ children: [
390
+ /* @__PURE__ */ jsxs(
391
+ "h3",
392
+ {
393
+ "data-adapttable-part": "filters-title",
394
+ className: classNames.filtersTitle,
395
+ children: [
396
+ labels.filters,
397
+ activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
398
+ ]
399
+ }
400
+ ),
401
+ /* @__PURE__ */ jsx(
402
+ "button",
403
+ {
404
+ type: "button",
405
+ "aria-label": labels.cancel,
406
+ "data-adapttable-part": "filters-close",
407
+ className: classNames.filtersClose,
408
+ onClick: onClose,
409
+ children: "\xD7"
410
+ }
411
+ )
412
+ ]
413
+ }
414
+ ),
415
+ /* @__PURE__ */ jsx(
416
+ "div",
417
+ {
418
+ "data-adapttable-part": "filters-body",
419
+ className: classNames.filtersBody,
420
+ children: filters
421
+ }
422
+ ),
423
+ /* @__PURE__ */ jsxs(
424
+ "footer",
425
+ {
426
+ "data-adapttable-part": "filters-footer",
427
+ className: classNames.filtersFooter,
428
+ children: [
429
+ /* @__PURE__ */ jsx(
430
+ "button",
431
+ {
432
+ type: "button",
433
+ onClick: () => onClearFilters?.(),
434
+ disabled: activeFilterCount === 0,
435
+ "data-adapttable-part": "filters-clear",
436
+ className: classNames.filtersClear,
437
+ children: labels.clearAll
438
+ }
439
+ ),
440
+ /* @__PURE__ */ jsx(
441
+ "button",
442
+ {
443
+ type: "button",
444
+ onClick: onClose,
445
+ "data-adapttable-part": "filters-done",
446
+ className: classNames.filtersDone,
447
+ children: labels.applyFilters
448
+ }
449
+ )
450
+ ]
451
+ }
452
+ )
453
+ ]
454
+ }
455
+ )
456
+ ] }),
457
+ document.body
458
+ );
459
+ }
460
+ function FilterPopover({
461
+ open,
462
+ onClose,
463
+ filters,
464
+ activeFilterCount,
465
+ onClearFilters,
466
+ labels,
467
+ dir = "ltr",
468
+ classNames,
469
+ children
470
+ }) {
471
+ const onCloseRef = useRef(onClose);
472
+ onCloseRef.current = onClose;
473
+ const rootRef = useRef(null);
474
+ const cardRef = useRef(null);
475
+ useEffect(() => {
476
+ if (!open) return;
477
+ const onClick = (event) => {
478
+ const root = rootRef.current;
479
+ if (root.contains(event.target)) return;
480
+ if (cardRef.current?.contains(document.activeElement)) return;
481
+ onCloseRef.current();
482
+ };
483
+ const onKeyDown = (event) => {
484
+ if (event.key !== "Escape") return;
485
+ onCloseRef.current();
486
+ rootRef.current?.querySelector("button")?.focus();
487
+ };
488
+ document.addEventListener("click", onClick);
489
+ document.addEventListener("keydown", onKeyDown);
490
+ return () => {
491
+ document.removeEventListener("click", onClick);
492
+ document.removeEventListener("keydown", onKeyDown);
493
+ };
494
+ }, [open]);
495
+ const side = dir === "rtl" ? { left: 0 } : { right: 0 };
496
+ return /* @__PURE__ */ jsxs(
497
+ "span",
498
+ {
499
+ ref: rootRef,
500
+ "data-adapttable-part": "filters-anchor",
501
+ className: cx("adapttable-filters-anchor", classNames.filtersAnchor),
502
+ style: { position: "relative", display: "inline-flex" },
503
+ children: [
504
+ children,
505
+ open && /* @__PURE__ */ jsxs(
506
+ "div",
507
+ {
508
+ ref: cardRef,
509
+ "data-adapttable-part": "filters-popover",
510
+ "data-dir": dir,
511
+ className: cx(
512
+ "adapttable-filters-popover",
513
+ classNames.filtersPopover
514
+ ),
515
+ style: { position: "absolute", top: "100%", zIndex: 200, ...side },
516
+ children: [
517
+ /* @__PURE__ */ jsxs(
518
+ "header",
519
+ {
520
+ "data-adapttable-part": "filters-header",
521
+ className: classNames.filtersHeader,
522
+ children: [
523
+ /* @__PURE__ */ jsxs(
524
+ "h3",
525
+ {
526
+ "data-adapttable-part": "filters-title",
527
+ className: classNames.filtersTitle,
528
+ children: [
529
+ labels.filters,
530
+ activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
531
+ ]
532
+ }
533
+ ),
534
+ /* @__PURE__ */ jsx(
535
+ "button",
536
+ {
537
+ type: "button",
538
+ onClick: () => onClearFilters?.(),
539
+ disabled: activeFilterCount === 0,
540
+ "data-adapttable-part": "filters-clear",
541
+ className: classNames.filtersClear,
542
+ children: labels.clearAll
543
+ }
544
+ )
545
+ ]
546
+ }
547
+ ),
548
+ /* @__PURE__ */ jsx(
549
+ "div",
550
+ {
551
+ "data-adapttable-part": "filters-body",
552
+ className: classNames.filtersBody,
553
+ children: filters
554
+ }
555
+ )
556
+ ]
557
+ }
558
+ )
559
+ ]
560
+ }
561
+ );
562
+ }
563
+ function Svg({
564
+ size = 16,
565
+ className,
566
+ children
567
+ }) {
568
+ return /* @__PURE__ */ jsx(
569
+ "svg",
570
+ {
571
+ width: size,
572
+ height: size,
573
+ viewBox: "0 0 24 24",
574
+ fill: "none",
575
+ stroke: "currentColor",
576
+ strokeWidth: 2,
577
+ strokeLinecap: "round",
578
+ strokeLinejoin: "round",
579
+ className,
580
+ "aria-hidden": "true",
581
+ focusable: "false",
582
+ children
583
+ }
584
+ );
585
+ }
586
+ var SearchIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
587
+ /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
588
+ /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
589
+ ] });
590
+ var FiltersIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M3 4h18l-7 8v6l-4 2v-8L3 4Z" }) });
591
+ var ChevronIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
592
+ var MENU_PANEL_STYLE = {
593
+ position: "absolute",
594
+ zIndex: 200,
595
+ insetInlineEnd: 0,
596
+ margin: 0,
597
+ border: 0,
598
+ padding: 0,
599
+ minInlineSize: 0
600
+ };
601
+ function useMenuPopover() {
602
+ const [open, setOpen] = useState(false);
603
+ const rootRef = useRef(null);
604
+ const triggerRef = useRef(null);
605
+ useEffect(() => {
606
+ if (!open) return;
607
+ const onDown = (event) => {
608
+ if (!rootRef.current?.contains(event.target)) setOpen(false);
609
+ };
610
+ const onKey = (event) => {
611
+ if (event.key !== "Escape") return;
612
+ setOpen(false);
613
+ triggerRef.current?.focus();
614
+ };
615
+ document.addEventListener("mousedown", onDown);
616
+ document.addEventListener("keydown", onKey);
617
+ return () => {
618
+ document.removeEventListener("mousedown", onDown);
619
+ document.removeEventListener("keydown", onKey);
620
+ };
621
+ }, [open]);
622
+ return { open, setOpen, rootRef, triggerRef };
623
+ }
624
+ function SavedViewsMenu({
625
+ options,
626
+ labels,
627
+ classNames
628
+ }) {
629
+ const { views, save, apply, remove } = useSavedViews(options);
630
+ const { open, setOpen, rootRef, triggerRef } = useMenuPopover();
631
+ const [name, setName] = useState("");
632
+ const trimmed = name.trim();
633
+ return /* @__PURE__ */ jsxs(
634
+ "div",
635
+ {
636
+ ref: rootRef,
637
+ "data-adapttable-part": "views-menu",
638
+ style: { position: "relative" },
639
+ children: [
640
+ /* @__PURE__ */ jsx(
641
+ "button",
642
+ {
643
+ ref: triggerRef,
644
+ type: "button",
645
+ "aria-expanded": open,
646
+ "aria-haspopup": "true",
647
+ "data-adapttable-part": "views-button",
648
+ "data-active": open || void 0,
649
+ className: classNames.viewsButton,
650
+ style: { flexShrink: 0, whiteSpace: "nowrap" },
651
+ onClick: () => setOpen((v) => !v),
652
+ children: labels.savedViews
653
+ }
654
+ ),
655
+ open && /* @__PURE__ */ jsxs(
656
+ "div",
657
+ {
658
+ "data-adapttable-part": "views-panel",
659
+ className: classNames.viewsPanel,
660
+ style: MENU_PANEL_STYLE,
661
+ children: [
662
+ views.map((view) => /* @__PURE__ */ jsxs(
663
+ "div",
664
+ {
665
+ style: { display: "flex", alignItems: "center" },
666
+ children: [
667
+ /* @__PURE__ */ jsx(
668
+ "button",
669
+ {
670
+ type: "button",
671
+ "data-adapttable-part": "views-item",
672
+ className: classNames.viewsItem,
673
+ onClick: () => {
674
+ apply(view.name);
675
+ setOpen(false);
676
+ },
677
+ children: view.name
678
+ }
679
+ ),
680
+ /* @__PURE__ */ jsx(
681
+ "button",
682
+ {
683
+ type: "button",
684
+ "aria-label": `${labels.deleteView}: ${view.name}`,
685
+ "data-adapttable-part": "views-delete",
686
+ className: classNames.viewsDelete,
687
+ onClick: () => remove(view.name),
688
+ children: "\xD7"
689
+ }
690
+ )
691
+ ]
692
+ },
693
+ view.name
694
+ )),
695
+ /* @__PURE__ */ jsx("hr", { "data-adapttable-part": "views-divider" }),
696
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
697
+ /* @__PURE__ */ jsx(
698
+ "input",
699
+ {
700
+ "aria-label": labels.viewName,
701
+ placeholder: labels.viewName,
702
+ "data-adapttable-part": "views-input",
703
+ className: classNames.viewsInput,
704
+ value: name,
705
+ onChange: (e) => setName(e.currentTarget.value)
706
+ }
707
+ ),
708
+ /* @__PURE__ */ jsx(
709
+ "button",
710
+ {
711
+ type: "button",
712
+ disabled: trimmed === "",
713
+ "data-adapttable-part": "views-save",
714
+ className: classNames.viewsSave,
715
+ onClick: () => {
716
+ save(trimmed);
717
+ setName("");
718
+ },
719
+ children: labels.saveView
720
+ }
721
+ )
722
+ ] })
723
+ ]
724
+ }
725
+ )
726
+ ]
727
+ }
728
+ );
729
+ }
730
+ function Chips({
731
+ chips,
732
+ onClearAll,
733
+ labels,
734
+ classNames
735
+ }) {
736
+ if (chips.length === 0) return null;
737
+ return /* @__PURE__ */ jsxs(
738
+ "ul",
739
+ {
740
+ "aria-label": labels.filters,
741
+ "data-adapttable-part": "chips",
742
+ className: classNames.chips,
743
+ children: [
744
+ chips.map((chip) => /* @__PURE__ */ jsxs(
745
+ "li",
746
+ {
747
+ "data-adapttable-part": "chip",
748
+ className: classNames.chip,
749
+ children: [
750
+ chip.label,
751
+ /* @__PURE__ */ jsx(
752
+ "button",
753
+ {
754
+ type: "button",
755
+ "aria-label": `${labels.clearAll}: ${chip.label}`,
756
+ "data-adapttable-part": "chip-remove",
757
+ className: classNames.chipRemove,
758
+ onClick: chip.onRemove,
759
+ children: "\xD7"
760
+ }
761
+ )
762
+ ]
763
+ },
764
+ chip.key
765
+ )),
766
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
767
+ "button",
768
+ {
769
+ type: "button",
770
+ onClick: onClearAll,
771
+ className: classNames.chipRemove,
772
+ children: labels.clearAll
773
+ }
774
+ ) })
775
+ ]
776
+ }
777
+ );
778
+ }
779
+ function BulkBar({
780
+ selection,
781
+ total,
782
+ bulkActions,
783
+ confirm,
784
+ labels,
785
+ classNames
786
+ }) {
787
+ const {
788
+ selectedIds,
789
+ selectedCount,
790
+ clear,
791
+ headerState,
792
+ visibleIds,
793
+ allMatching,
794
+ selectAllMatching
795
+ } = selection;
796
+ const { pending, run } = useBulkActionRunner({
797
+ confirm,
798
+ cancelLabel: labels.cancel,
799
+ onComplete: clear
800
+ });
801
+ if (selectedCount === 0) return null;
802
+ const ids = [...selectedIds];
803
+ const showBanner = headerState === "all" && total > visibleIds.length;
804
+ const scope = allMatching ? { allMatching: true, total } : void 0;
805
+ return /* @__PURE__ */ jsxs("div", { "data-adapttable-part": "bulk-bar", className: classNames.bulkBar, children: [
806
+ /* @__PURE__ */ jsx("span", { children: labels.selectedCount(selectedCount) }),
807
+ showBanner && /* @__PURE__ */ jsxs(
808
+ "div",
809
+ {
810
+ "data-adapttable-part": "select-all-banner",
811
+ className: classNames.selectAllBanner,
812
+ children: [
813
+ /* @__PURE__ */ jsx(
814
+ "span",
815
+ {
816
+ "data-adapttable-part": "select-all-text",
817
+ className: classNames.selectAllText,
818
+ children: allMatching ? labels.allMatchingSelected(total) : labels.pageSelected(visibleIds.length)
819
+ }
820
+ ),
821
+ /* @__PURE__ */ jsx(
822
+ "button",
823
+ {
824
+ type: "button",
825
+ "data-adapttable-part": "select-all-button",
826
+ className: classNames.selectAllButton,
827
+ onClick: allMatching ? clear : selectAllMatching,
828
+ children: allMatching ? labels.clearAll : labels.selectAllMatching(total)
829
+ }
830
+ )
831
+ ]
832
+ }
833
+ ),
834
+ /* @__PURE__ */ jsx("button", { type: "button", onClick: clear, disabled: pending !== null, children: labels.clearAll }),
835
+ bulkActions.map((action) => {
836
+ const reason = resolveDisabledReason(action.disabledReason?.(ids));
837
+ return /* @__PURE__ */ jsxs(
838
+ "button",
839
+ {
840
+ type: "button",
841
+ title: reason,
842
+ disabled: reason !== void 0 || pending !== null,
843
+ "data-adapttable-part": "bulk-button",
844
+ "data-color": action.color,
845
+ className: classNames.bulkButton,
846
+ onClick: () => run(action, ids, scope),
847
+ children: [
848
+ action.icon,
849
+ action.label
850
+ ]
851
+ },
852
+ action.key
853
+ );
854
+ })
855
+ ] });
856
+ }
857
+ function RowsPerPageSelect({
858
+ source,
859
+ labels,
860
+ classNames
861
+ }) {
862
+ return /* @__PURE__ */ jsxs("label", { children: [
863
+ labels.rowsPerPage,
864
+ " ",
865
+ /* @__PURE__ */ jsx(
866
+ "select",
867
+ {
868
+ "aria-label": labels.rowsPerPage,
869
+ "data-adapttable-part": "rows-per-page",
870
+ className: classNames.rowsPerPageSelect,
871
+ value: source.limit,
872
+ onChange: (e) => source.setLimit(Number(e.currentTarget.value)),
873
+ children: pageSizeOptions(source.limit).map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n))
874
+ }
875
+ )
876
+ ] });
877
+ }
878
+ function Footer({
879
+ pagination,
880
+ source,
881
+ labels,
882
+ classNames
883
+ }) {
884
+ const { safePage, totalPages, fromIndex, toIndex } = pagination;
885
+ return /* @__PURE__ */ jsxs("div", { "data-adapttable-part": "footer", className: classNames.footer, children: [
886
+ /* @__PURE__ */ jsx(
887
+ RowsPerPageSelect,
888
+ {
889
+ source,
890
+ labels,
891
+ classNames
892
+ }
893
+ ),
894
+ source.total > 0 && /* @__PURE__ */ jsx("span", { children: labels.showing({
895
+ from: fromIndex,
896
+ to: toIndex,
897
+ total: source.total
898
+ }) }),
899
+ /* @__PURE__ */ jsx("span", { children: labels.pageOf({ page: safePage, total: totalPages }) }),
900
+ /* @__PURE__ */ jsx(
901
+ "button",
902
+ {
903
+ type: "button",
904
+ "aria-label": labels.previousPage,
905
+ "data-adapttable-part": "page-prev",
906
+ className: classNames.pageButton,
907
+ disabled: safePage <= 1,
908
+ onClick: () => source.setPage(safePage - 1),
909
+ children: "\u2039"
910
+ }
911
+ ),
912
+ /* @__PURE__ */ jsx(
913
+ "button",
914
+ {
915
+ type: "button",
916
+ "aria-label": labels.nextPage,
917
+ "data-adapttable-part": "page-next",
918
+ className: classNames.pageButton,
919
+ disabled: safePage >= totalPages,
920
+ onClick: () => source.setPage(safePage + 1),
921
+ children: "\u203A"
922
+ }
923
+ )
924
+ ] });
925
+ }
926
+ function ErrorState({
927
+ error,
928
+ labels,
929
+ onRetry,
930
+ classNames
931
+ }) {
932
+ return /* @__PURE__ */ jsxs("div", { role: "alert", "data-adapttable-part": "error", className: classNames.error, children: [
933
+ /* @__PURE__ */ jsx("strong", { children: labels.errorTitle }),
934
+ /* @__PURE__ */ jsx("p", { children: labels.errorMessage }),
935
+ /* @__PURE__ */ jsx("small", { children: error.message }),
936
+ onRetry && /* @__PURE__ */ jsx(
937
+ "button",
938
+ {
939
+ type: "button",
940
+ onClick: onRetry,
941
+ "data-adapttable-part": "retry",
942
+ className: classNames.retryButton,
943
+ children: labels.retry
944
+ }
945
+ )
946
+ ] });
947
+ }
948
+ function loadingLineWidth(column, total) {
949
+ if (column === 0) return "70%";
950
+ if (column === total - 1) return "42%";
951
+ return "55%";
952
+ }
953
+ function LoadingState({
954
+ rows,
955
+ columns,
956
+ variant,
957
+ labels,
958
+ classNames,
959
+ hasActions = false
960
+ }) {
961
+ const rowKeys = Array.from({ length: rows }, (_, i) => i);
962
+ const dataColumns = Math.max(columns, 1);
963
+ const columnCount = dataColumns + (hasActions ? 1 : 0);
964
+ const columnKeys = Array.from({ length: columnCount }, (_, i) => i);
965
+ return /* @__PURE__ */ jsxs(
966
+ "div",
967
+ {
968
+ role: "status",
969
+ "aria-busy": "true",
970
+ "aria-live": "polite",
971
+ "data-adapttable-part": "loading",
972
+ className: cx(classNames.loading),
973
+ children: [
974
+ variant === "table" ? /* @__PURE__ */ jsxs("table", { "data-adapttable-part": "loading-table", children: [
975
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { "data-adapttable-part": "loading-header-row", children: columnKeys.map((column) => /* @__PURE__ */ jsx("th", { "data-adapttable-part": "loading-header-cell", children: /* @__PURE__ */ jsx(
976
+ "span",
977
+ {
978
+ "data-adapttable-part": "loading-line",
979
+ style: { width: loadingLineWidth(column, columnCount) }
980
+ }
981
+ ) }, column)) }) }),
982
+ /* @__PURE__ */ jsx("tbody", { children: rowKeys.map((row) => /* @__PURE__ */ jsx("tr", { "data-adapttable-part": "loading-row", children: columnKeys.map((column) => /* @__PURE__ */ jsx("td", { "data-adapttable-part": "loading-cell", children: /* @__PURE__ */ jsx(
983
+ "span",
984
+ {
985
+ "data-adapttable-part": "loading-line",
986
+ style: {
987
+ width: loadingLineWidth(column, columnCount)
988
+ }
989
+ }
990
+ ) }, column)) }, row)) })
991
+ ] }) : /* @__PURE__ */ jsx("div", { "data-adapttable-part": "loading-cards", children: rowKeys.map((row) => /* @__PURE__ */ jsx("div", { "data-adapttable-part": "loading-card", children: columnKeys.slice(0, Math.min(4, columnKeys.length)).map((column) => /* @__PURE__ */ jsx(
992
+ "span",
993
+ {
994
+ "data-adapttable-part": "loading-line",
995
+ style: {
996
+ width: loadingLineWidth(column, columnKeys.length)
997
+ }
998
+ },
999
+ column
1000
+ )) }, row)) }),
1001
+ /* @__PURE__ */ jsx("span", { className: "adapttable-sr-only", children: labels.loading })
1002
+ ]
1003
+ }
1004
+ );
1005
+ }
1006
+ function VisibilityToggle({
1007
+ hidden,
1008
+ name,
1009
+ labels,
1010
+ classNames,
1011
+ onToggle
1012
+ }) {
1013
+ return /* @__PURE__ */ jsx(
1014
+ "button",
1015
+ {
1016
+ type: "button",
1017
+ "data-adapttable-part": "column-menu-visibility",
1018
+ "data-active": !hidden || void 0,
1019
+ "aria-pressed": !hidden,
1020
+ "aria-label": `${hidden ? labels.showColumn : labels.hideColumn}: ${name}`,
1021
+ className: classNames.columnMenuVisibility,
1022
+ onClick: onToggle,
1023
+ children: /* @__PURE__ */ jsx(EyeIcon, { off: hidden })
1024
+ }
1025
+ );
1026
+ }
1027
+ function RowName({
1028
+ hidden,
1029
+ name,
1030
+ classNames
1031
+ }) {
1032
+ return /* @__PURE__ */ jsx(
1033
+ "span",
1034
+ {
1035
+ "data-adapttable-part": "column-menu-label",
1036
+ "data-hidden": hidden || void 0,
1037
+ className: classNames.columnMenuLabel,
1038
+ children: name
1039
+ }
1040
+ );
1041
+ }
1042
+ function PinToggle({
1043
+ active,
1044
+ actionLabel,
1045
+ classNames,
1046
+ onClick
1047
+ }) {
1048
+ return /* @__PURE__ */ jsx(
1049
+ "button",
1050
+ {
1051
+ type: "button",
1052
+ "data-adapttable-part": "column-menu-pin",
1053
+ "data-active": active || void 0,
1054
+ "aria-pressed": active,
1055
+ "aria-label": actionLabel,
1056
+ className: classNames.columnMenuPin,
1057
+ onClick,
1058
+ children: /* @__PURE__ */ jsx(PinIcon, {})
1059
+ }
1060
+ );
1061
+ }
1062
+ function ColumnMenuRowItem({
1063
+ row,
1064
+ layout,
1065
+ labels,
1066
+ classNames,
1067
+ drag
1068
+ }) {
1069
+ const { key, name, hidden, pinned, index } = row;
1070
+ return /* @__PURE__ */ jsxs(
1071
+ "div",
1072
+ {
1073
+ "data-adapttable-part": "column-menu-item",
1074
+ "data-hidden": hidden || void 0,
1075
+ "data-pinned": pinned,
1076
+ className: classNames.columnMenuItem,
1077
+ style: { cursor: "grab" },
1078
+ ...drag.rowDragProps(key, index),
1079
+ ...drag.dropProps(index, layout.move),
1080
+ ...drag.rowAttrs(key, index),
1081
+ children: [
1082
+ /* @__PURE__ */ jsx(
1083
+ "span",
1084
+ {
1085
+ "data-adapttable-part": "column-menu-grip",
1086
+ className: classNames.columnMenuGrip,
1087
+ ...columnReorderKeyProps(
1088
+ key,
1089
+ index,
1090
+ layout.move,
1091
+ `${labels.moveLeft} / ${labels.moveRight}: ${name}`
1092
+ ),
1093
+ children: /* @__PURE__ */ jsx(GripIcon, {})
1094
+ }
1095
+ ),
1096
+ /* @__PURE__ */ jsx(
1097
+ VisibilityToggle,
1098
+ {
1099
+ hidden,
1100
+ name,
1101
+ labels,
1102
+ classNames,
1103
+ onToggle: () => layout.toggleVisible(key)
1104
+ }
1105
+ ),
1106
+ /* @__PURE__ */ jsx(RowName, { hidden, name, classNames }),
1107
+ /* @__PURE__ */ jsx(
1108
+ PinToggle,
1109
+ {
1110
+ active: pinned !== void 0,
1111
+ actionLabel: `${pinActionLabel(pinned, labels)}: ${name}`,
1112
+ classNames,
1113
+ onClick: () => layout.setPinned(key, nextPinSide(pinned))
1114
+ }
1115
+ )
1116
+ ]
1117
+ }
1118
+ );
1119
+ }
1120
+ function ActionsMenuRowItem({
1121
+ layout,
1122
+ labels,
1123
+ classNames
1124
+ }) {
1125
+ const hidden = layout.isHidden(ACTIONS_COLUMN_KEY);
1126
+ const pinned = layout.state.pinned[ACTIONS_COLUMN_KEY] !== void 0;
1127
+ const name = labels.actions;
1128
+ return /* @__PURE__ */ jsxs(
1129
+ "div",
1130
+ {
1131
+ "data-adapttable-part": "column-menu-item",
1132
+ "data-actions": "",
1133
+ "data-hidden": hidden || void 0,
1134
+ "data-pinned": pinned ? "right" : void 0,
1135
+ className: classNames.columnMenuItem,
1136
+ children: [
1137
+ /* @__PURE__ */ jsx(
1138
+ VisibilityToggle,
1139
+ {
1140
+ hidden,
1141
+ name,
1142
+ labels,
1143
+ classNames,
1144
+ onToggle: () => layout.toggleVisible(ACTIONS_COLUMN_KEY)
1145
+ }
1146
+ ),
1147
+ /* @__PURE__ */ jsx(RowName, { hidden, name, classNames }),
1148
+ /* @__PURE__ */ jsx(
1149
+ PinToggle,
1150
+ {
1151
+ active: pinned,
1152
+ actionLabel: `${pinned ? labels.unpin : labels.pinRight}: ${name}`,
1153
+ classNames,
1154
+ onClick: () => layout.setPinned(ACTIONS_COLUMN_KEY, pinned ? void 0 : "right")
1155
+ }
1156
+ )
1157
+ ]
1158
+ }
1159
+ );
1160
+ }
1161
+ function ColumnMenu({
1162
+ allColumns,
1163
+ layout,
1164
+ labels,
1165
+ classNames,
1166
+ hasRowActions
1167
+ }) {
1168
+ const drag = useColumnDragState();
1169
+ const { open, setOpen, rootRef, triggerRef } = useMenuPopover();
1170
+ return /* @__PURE__ */ jsxs(
1171
+ "div",
1172
+ {
1173
+ ref: rootRef,
1174
+ "data-adapttable-part": "column-menu",
1175
+ className: classNames.columnMenu,
1176
+ style: { position: "relative" },
1177
+ children: [
1178
+ /* @__PURE__ */ jsx(
1179
+ "button",
1180
+ {
1181
+ ref: triggerRef,
1182
+ type: "button",
1183
+ "aria-expanded": open,
1184
+ "aria-haspopup": "true",
1185
+ "data-adapttable-part": "column-menu-button",
1186
+ "data-active": open || void 0,
1187
+ className: classNames.columnMenuButton,
1188
+ style: { flexShrink: 0, whiteSpace: "nowrap" },
1189
+ onClick: () => setOpen((v) => !v),
1190
+ children: labels.columns
1191
+ }
1192
+ ),
1193
+ open && /* @__PURE__ */ jsxs(
1194
+ "fieldset",
1195
+ {
1196
+ "aria-label": labels.columns,
1197
+ "data-adapttable-part": "column-menu-panel",
1198
+ className: classNames.columnMenuPanel,
1199
+ style: MENU_PANEL_STYLE,
1200
+ children: [
1201
+ /* @__PURE__ */ jsx(
1202
+ "div",
1203
+ {
1204
+ "data-adapttable-part": "column-menu-header",
1205
+ className: classNames.columnMenuHeader,
1206
+ children: /* @__PURE__ */ jsx(
1207
+ "span",
1208
+ {
1209
+ "data-adapttable-part": "column-menu-title",
1210
+ className: classNames.columnMenuTitle,
1211
+ children: labels.columns
1212
+ }
1213
+ )
1214
+ }
1215
+ ),
1216
+ columnMenuRows(allColumns, layout).map((row) => /* @__PURE__ */ jsx(
1217
+ ColumnMenuRowItem,
1218
+ {
1219
+ row,
1220
+ layout,
1221
+ labels,
1222
+ classNames,
1223
+ drag
1224
+ },
1225
+ row.key
1226
+ )),
1227
+ hasRowActions && /* @__PURE__ */ jsxs(Fragment, { children: [
1228
+ /* @__PURE__ */ jsx(
1229
+ "hr",
1230
+ {
1231
+ "data-adapttable-part": "column-menu-separator",
1232
+ className: classNames.columnMenuSeparator
1233
+ }
1234
+ ),
1235
+ /* @__PURE__ */ jsx(
1236
+ ActionsMenuRowItem,
1237
+ {
1238
+ layout,
1239
+ labels,
1240
+ classNames
1241
+ }
1242
+ )
1243
+ ] }),
1244
+ /* @__PURE__ */ jsx(
1245
+ "button",
1246
+ {
1247
+ type: "button",
1248
+ "data-adapttable-part": "column-menu-reset",
1249
+ className: cx(classNames.columnMenuReset),
1250
+ onClick: () => layout.reset(),
1251
+ children: labels.resetColumns
1252
+ }
1253
+ )
1254
+ ]
1255
+ }
1256
+ )
1257
+ ]
1258
+ }
1259
+ );
1260
+ }
1261
+ var RESIZE_HANDLE_STYLE = {
1262
+ position: "absolute",
1263
+ insetInlineEnd: 0,
1264
+ top: 0,
1265
+ height: "100%",
1266
+ width: 8,
1267
+ cursor: "col-resize",
1268
+ touchAction: "none",
1269
+ userSelect: "none"
1270
+ };
1271
+ var SELECTION_WIDTH = 44;
1272
+ var ACTIONS_WIDTH = 120;
1273
+ function scrollBoxStyle(maxHeight, scrollX) {
1274
+ if (maxHeight != null) {
1275
+ return { maxHeight, overflowX: "auto", overflowY: "auto" };
1276
+ }
1277
+ return scrollX ? { overflowX: "auto" } : void 0;
1278
+ }
1279
+ function RowActionButtons({
1280
+ row,
1281
+ actions,
1282
+ confirm,
1283
+ cancelLabel,
1284
+ classNames
1285
+ }) {
1286
+ return /* @__PURE__ */ jsx(Fragment, { children: actions.map((action) => {
1287
+ if (action.isHidden?.(row)) return null;
1288
+ const reason = resolveDisabledReason(action.disabledReason?.(row));
1289
+ const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
1290
+ const handleClick = disabled ? void 0 : (e) => {
1291
+ e.stopPropagation();
1292
+ runRowAction(action, row, confirm, cancelLabel);
1293
+ };
1294
+ return /* @__PURE__ */ jsx(
1295
+ "button",
1296
+ {
1297
+ type: "button",
1298
+ disabled,
1299
+ title: reason,
1300
+ "aria-label": action.label,
1301
+ "data-adapttable-part": "action-button",
1302
+ "data-color": action.color,
1303
+ className: classNames.actionButton,
1304
+ onClick: handleClick,
1305
+ children: action.icon ?? action.label
1306
+ },
1307
+ action.key
1308
+ );
1309
+ }) });
1310
+ }
1311
+ function ExpandButton({
1312
+ expanded,
1313
+ labels,
1314
+ classNames,
1315
+ onToggle
1316
+ }) {
1317
+ return /* @__PURE__ */ jsx(
1318
+ "button",
1319
+ {
1320
+ type: "button",
1321
+ "data-adapttable-part": "expand-button",
1322
+ "data-expanded": expanded ? "" : void 0,
1323
+ className: classNames.expandButton,
1324
+ "aria-expanded": expanded,
1325
+ "aria-label": expanded ? labels.collapseRow : labels.expandRow,
1326
+ onClick: onToggle,
1327
+ children: /* @__PURE__ */ jsx(ChevronIcon, { size: 14 })
1328
+ }
1329
+ );
1330
+ }
1331
+ function desktopRowPropsEqual(prev, next) {
1332
+ return prev.row === next.row && prev.index === next.index && prev.id === next.id && prev.selected === next.selected && prev.expanded === next.expanded && prev.columns === next.columns && prev.labels === next.labels && prev.classNames === next.classNames && prev.showActions === next.showActions && prev.rowActions === next.rowActions && prev.columnSpan === next.columnSpan && prev.columnWidths === next.columnWidths && prev.pinSignature === next.pinSignature && prev.hasLeftPin === next.hasLeftPin && prev.hasRightPin === next.hasRightPin && prev.actionsPinned === next.actionsPinned && prev.rowClass === next.rowClass && prev.clickable === next.clickable && prev.hasPrefetch === next.hasPrefetch;
1333
+ }
1334
+ function DesktopRowBase(props) {
1335
+ const {
1336
+ row,
1337
+ index,
1338
+ id,
1339
+ table,
1340
+ columns,
1341
+ labels,
1342
+ classNames,
1343
+ selected,
1344
+ expanded,
1345
+ showActions,
1346
+ rowActions,
1347
+ confirm,
1348
+ columnSpan,
1349
+ pinOffset,
1350
+ hasLeftPin,
1351
+ hasRightPin,
1352
+ actionsPinned,
1353
+ rowClass,
1354
+ clickable,
1355
+ hasPrefetch,
1356
+ onRowClick,
1357
+ onPrefetch,
1358
+ onToggleSelect,
1359
+ onToggleExpand,
1360
+ renderDetail,
1361
+ measureElement
1362
+ } = props;
1363
+ const expandable = expanded !== void 0;
1364
+ const leads = {
1365
+ left: selected === void 0 ? 0 : SELECTION_WIDTH,
1366
+ right: showActions ? ACTIONS_WIDTH : 0
1367
+ };
1368
+ const bodyPinStyle = (key) => pinnedCellStyle(pinOffset?.(key), PIN_Z.body, leads);
1369
+ const rowProps = { ...table.getRowProps(row, index) };
1370
+ delete rowProps.key;
1371
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
1372
+ /* @__PURE__ */ jsxs(
1373
+ "tr",
1374
+ {
1375
+ ...rowProps,
1376
+ ...rowClickProps(row, clickable ? onRowClick : void 0),
1377
+ ref: measureElement,
1378
+ "data-adapttable-part": "row",
1379
+ "data-selected": selected ? "" : void 0,
1380
+ "data-clickable": clickable ? "" : void 0,
1381
+ className: cx(classNames.row, rowClass),
1382
+ onMouseEnter: hasPrefetch ? () => onPrefetch(row) : void 0,
1383
+ children: [
1384
+ expandable && /* @__PURE__ */ jsx(
1385
+ "td",
1386
+ {
1387
+ "data-adapttable-part": "expand-cell",
1388
+ className: classNames.expandCell,
1389
+ children: /* @__PURE__ */ jsx(
1390
+ ExpandButton,
1391
+ {
1392
+ expanded,
1393
+ labels,
1394
+ classNames,
1395
+ onToggle: () => onToggleExpand(id)
1396
+ }
1397
+ )
1398
+ }
1399
+ ),
1400
+ selected !== void 0 && /* @__PURE__ */ jsx(
1401
+ "td",
1402
+ {
1403
+ "data-adapttable-part": "selection-cell",
1404
+ "data-pinned": hasLeftPin ? "left" : void 0,
1405
+ style: edgePinStyle("left", hasLeftPin, PIN_Z.body),
1406
+ className: cx(classNames.cell, classNames.selectionCell),
1407
+ children: /* @__PURE__ */ jsx(
1408
+ "input",
1409
+ {
1410
+ type: "checkbox",
1411
+ "aria-label": labels.selectRow,
1412
+ checked: selected,
1413
+ onChange: () => onToggleSelect(id),
1414
+ className: classNames.checkbox
1415
+ }
1416
+ )
1417
+ }
1418
+ ),
1419
+ columns.map((column) => {
1420
+ const pinStyle = bodyPinStyle(column.key);
1421
+ return /* @__PURE__ */ jsx(
1422
+ "td",
1423
+ {
1424
+ ...table.getCellProps(column, pinStyle && { style: pinStyle }),
1425
+ "data-adapttable-part": "cell",
1426
+ "data-pinned": pinOffset?.(column.key)?.side,
1427
+ className: classNames.cell,
1428
+ children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row)
1429
+ },
1430
+ column.key
1431
+ );
1432
+ }),
1433
+ showActions && /* @__PURE__ */ jsx(
1434
+ "td",
1435
+ {
1436
+ "data-adapttable-part": "actions-cell",
1437
+ "data-pinned": hasRightPin || actionsPinned ? "right" : void 0,
1438
+ style: edgePinStyle(
1439
+ "right",
1440
+ hasRightPin || actionsPinned,
1441
+ PIN_Z.body
1442
+ ),
1443
+ className: cx(classNames.cell, classNames.actionsCell),
1444
+ children: /* @__PURE__ */ jsx(
1445
+ RowActionButtons,
1446
+ {
1447
+ row,
1448
+ actions: rowActions,
1449
+ confirm,
1450
+ cancelLabel: labels.cancel,
1451
+ classNames
1452
+ }
1453
+ )
1454
+ }
1455
+ )
1456
+ ]
1457
+ }
1458
+ ),
1459
+ expandable && expanded && /* @__PURE__ */ jsx("tr", { "data-adapttable-part": "detail-row", className: classNames.detailRow, children: /* @__PURE__ */ jsx(
1460
+ "td",
1461
+ {
1462
+ colSpan: columnSpan,
1463
+ "data-adapttable-part": "detail-cell",
1464
+ className: classNames.detailCell,
1465
+ children: renderDetail(row)
1466
+ }
1467
+ ) })
1468
+ ] });
1469
+ }
1470
+ function createDesktopRow() {
1471
+ return memo(DesktopRowBase, desktopRowPropsEqual);
1472
+ }
1473
+ function DesktopTable({
1474
+ table,
1475
+ rows,
1476
+ rowActions,
1477
+ confirm,
1478
+ getRowId,
1479
+ classNames,
1480
+ prefetch,
1481
+ onRowClick,
1482
+ rowClassName,
1483
+ renderRowDetail,
1484
+ summaryRow,
1485
+ expansion,
1486
+ rowEntries,
1487
+ paddingTop = 0,
1488
+ paddingBottom = 0,
1489
+ measureElement,
1490
+ stickyHeader = false,
1491
+ stickyTop = 0,
1492
+ pinOffset,
1493
+ maxHeight,
1494
+ virtualScrollRef,
1495
+ setWidth,
1496
+ columnWidths,
1497
+ resizeLabel = "Resize column",
1498
+ actionsPinned = false
1499
+ }) {
1500
+ const { columns, selection, labels, showActions, entries, columnSpan } = tableRenderModel({
1501
+ table,
1502
+ rows,
1503
+ rowActions,
1504
+ getRowId,
1505
+ rowEntries,
1506
+ renderRowDetail,
1507
+ expansion
1508
+ });
1509
+ const stickActions = showActions && actionsPinned;
1510
+ const expansionState = renderRowDetail ? expansion : void 0;
1511
+ const expandable = expansionState !== void 0;
1512
+ const live = useRef({
1513
+ selection,
1514
+ expansion: expansionState,
1515
+ onRowClick,
1516
+ prefetch,
1517
+ renderRowDetail
1518
+ });
1519
+ live.current = {
1520
+ selection,
1521
+ expansion: expansionState,
1522
+ onRowClick,
1523
+ prefetch,
1524
+ renderRowDetail
1525
+ };
1526
+ const onToggleSelect = useCallback(
1527
+ (id) => live.current.selection?.toggle(id),
1528
+ []
1529
+ );
1530
+ const onToggleExpand = useCallback(
1531
+ (id) => live.current.expansion?.toggle(id),
1532
+ []
1533
+ );
1534
+ const handleRowClick = useCallback(
1535
+ (row) => live.current.onRowClick?.(row),
1536
+ []
1537
+ );
1538
+ const handlePrefetch = useCallback(
1539
+ (row) => live.current.prefetch?.(row),
1540
+ []
1541
+ );
1542
+ const renderDetail = useCallback(
1543
+ (row) => live.current.renderRowDetail?.(row),
1544
+ []
1545
+ );
1546
+ const Row = useMemo(() => createDesktopRow(), []);
1547
+ const { ref: overflowRef, overflowing } = useHorizontalOverflow();
1548
+ const hasPinned = columns.some((c) => pinOffset?.(c.key) != null) || stickActions;
1549
+ const inScrollBox = maxHeight != null || hasPinned || overflowing;
1550
+ const stickyStyle = stickyHeader ? {
1551
+ position: "sticky",
1552
+ top: inScrollBox ? 0 : stickyTop,
1553
+ zIndex: PIN_Z.header
1554
+ } : void 0;
1555
+ const stickyAttr = stickyHeader || void 0;
1556
+ const leads = {
1557
+ left: selection ? SELECTION_WIDTH : 0,
1558
+ right: showActions ? ACTIONS_WIDTH : 0
1559
+ };
1560
+ const hasLeftPin = columns.some((c) => pinOffset?.(c.key)?.side === "left");
1561
+ const hasRightPin = columns.some((c) => pinOffset?.(c.key)?.side === "right");
1562
+ const pinSignature = columns.map((c) => {
1563
+ const pin = pinOffset?.(c.key);
1564
+ return pin ? `${c.key}:${pin.side}:${pin.inset}` : "";
1565
+ }).join("|");
1566
+ const headPinStyle = (key) => pinnedCellStyle(pinOffset?.(key), PIN_Z.headerPinned, leads);
1567
+ const headStyle = (column) => {
1568
+ const key = column.key;
1569
+ const pin = headPinStyle(key);
1570
+ const width = pin ? pinnedColumnWidth(column, columnWidths) : columnWidths?.[key];
1571
+ if (!stickyStyle && !pin && width == null && !setWidth) return void 0;
1572
+ const merged = {
1573
+ ...stickyStyle,
1574
+ ...pin,
1575
+ ...width != null && { width }
1576
+ };
1577
+ if (setWidth && !merged.position) merged.position = "relative";
1578
+ return merged;
1579
+ };
1580
+ const edgeHeadStyle = (side, active) => {
1581
+ const edge = edgePinStyle(side, active, PIN_Z.headerPinned);
1582
+ if (!stickyStyle && !edge) return void 0;
1583
+ return { ...stickyStyle, ...edge };
1584
+ };
1585
+ const columnName = (column) => typeof column.header === "string" ? column.header : column.key;
1586
+ const minWidth = tableMinWidth(columns, {
1587
+ widths: columnWidths,
1588
+ extra: (selection ? SELECTION_WIDTH : 0) + (showActions ? ACTIONS_WIDTH : 0)
1589
+ });
1590
+ const groups = headerGroupRow(columns);
1591
+ const summary = summaryRow?.(rows);
1592
+ const groupPad = /* @__PURE__ */ jsx("th", { "data-adapttable-part": "group-cell", className: classNames.groupCell });
1593
+ const summaryPad = /* @__PURE__ */ jsx(
1594
+ "td",
1595
+ {
1596
+ "data-adapttable-part": "summary-cell",
1597
+ className: classNames.summaryCell
1598
+ }
1599
+ );
1600
+ const tableEl = /* @__PURE__ */ jsxs(
1601
+ "table",
1602
+ {
1603
+ ...table.getTableProps(),
1604
+ "data-adapttable-part": "table",
1605
+ className: classNames.table,
1606
+ style: minWidth > 0 ? { minWidth } : void 0,
1607
+ children: [
1608
+ /* @__PURE__ */ jsxs("thead", { "data-adapttable-part": "thead", className: classNames.thead, children: [
1609
+ groups && /* @__PURE__ */ jsxs("tr", { "data-adapttable-part": "group-row", className: classNames.groupRow, children: [
1610
+ expandable && groupPad,
1611
+ selection && groupPad,
1612
+ groups.map((group) => /* @__PURE__ */ jsx(
1613
+ "th",
1614
+ {
1615
+ colSpan: group.span,
1616
+ "data-adapttable-part": "group-cell",
1617
+ className: classNames.groupCell,
1618
+ children: group.label
1619
+ },
1620
+ group.key
1621
+ )),
1622
+ showActions && groupPad
1623
+ ] }),
1624
+ /* @__PURE__ */ jsxs(
1625
+ "tr",
1626
+ {
1627
+ ...table.getHeaderRowProps(),
1628
+ "data-adapttable-part": "header-row",
1629
+ className: classNames.headerRow,
1630
+ children: [
1631
+ expandable && /* @__PURE__ */ jsx(
1632
+ "th",
1633
+ {
1634
+ "aria-label": labels.expandRow,
1635
+ "data-adapttable-part": "expand-header",
1636
+ "data-sticky": stickyAttr,
1637
+ style: stickyStyle,
1638
+ className: cx(classNames.headerCell, classNames.expandHeader)
1639
+ }
1640
+ ),
1641
+ selection && /* @__PURE__ */ jsx(
1642
+ "th",
1643
+ {
1644
+ "data-adapttable-part": "selection-header",
1645
+ "data-sticky": stickyAttr,
1646
+ "data-pinned": hasLeftPin ? "left" : void 0,
1647
+ style: edgeHeadStyle("left", hasLeftPin),
1648
+ className: cx(classNames.headerCell, classNames.selectionCell),
1649
+ children: /* @__PURE__ */ jsx(
1650
+ "input",
1651
+ {
1652
+ type: "checkbox",
1653
+ "aria-label": labels.selectAll,
1654
+ checked: selection.headerState === "all",
1655
+ ref: (el) => {
1656
+ if (el) el.indeterminate = selection.headerState === "some";
1657
+ },
1658
+ onChange: selection.toggleAll,
1659
+ className: classNames.checkbox
1660
+ }
1661
+ )
1662
+ }
1663
+ ),
1664
+ columns.map((column) => {
1665
+ const localStyle = headStyle(column);
1666
+ const headerProps = table.getHeaderCellProps(
1667
+ column,
1668
+ localStyle && { style: localStyle }
1669
+ );
1670
+ const active = table.sortBy === column.key;
1671
+ const sortButtonProps = table.getSortButtonProps(column);
1672
+ const sortIndex = sortButtonProps["data-sort-index"];
1673
+ return /* @__PURE__ */ jsxs(
1674
+ "th",
1675
+ {
1676
+ ...headerProps,
1677
+ "data-adapttable-part": "header-cell",
1678
+ "data-sorted": active ? table.sortDir : void 0,
1679
+ "data-sticky": stickyAttr,
1680
+ "data-pinned": pinOffset?.(column.key)?.side,
1681
+ className: classNames.headerCell,
1682
+ children: [
1683
+ column.sortable ? /* @__PURE__ */ jsxs(
1684
+ "button",
1685
+ {
1686
+ ...sortButtonProps,
1687
+ "data-adapttable-part": "sort-button",
1688
+ className: classNames.sortButton,
1689
+ children: [
1690
+ column.header,
1691
+ typeof sortIndex === "number" && /* @__PURE__ */ jsx(
1692
+ "span",
1693
+ {
1694
+ "data-adapttable-part": "sort-index",
1695
+ className: classNames.sortIndex,
1696
+ children: sortIndex
1697
+ }
1698
+ ),
1699
+ /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
1700
+ " ",
1701
+ sortGlyph(active, table.sortDir)
1702
+ ] })
1703
+ ]
1704
+ }
1705
+ ) : column.header,
1706
+ setWidth && /* @__PURE__ */ jsx(
1707
+ "span",
1708
+ {
1709
+ ...columnResizeHandleProps(
1710
+ column.key,
1711
+ setWidth,
1712
+ `${resizeLabel}: ${columnName(column)}`
1713
+ ),
1714
+ "data-adapttable-part": "resize-handle",
1715
+ className: classNames.resizeHandle,
1716
+ style: RESIZE_HANDLE_STYLE
1717
+ }
1718
+ )
1719
+ ]
1720
+ },
1721
+ column.key
1722
+ );
1723
+ }),
1724
+ showActions && /* @__PURE__ */ jsx(
1725
+ "th",
1726
+ {
1727
+ "data-adapttable-part": "actions-header",
1728
+ "data-sticky": stickyAttr,
1729
+ "data-pinned": hasRightPin || stickActions ? "right" : void 0,
1730
+ style: edgeHeadStyle("right", hasRightPin || stickActions),
1731
+ className: cx(classNames.headerCell, classNames.actionsCell),
1732
+ children: labels.actions
1733
+ }
1734
+ )
1735
+ ]
1736
+ }
1737
+ )
1738
+ ] }),
1739
+ /* @__PURE__ */ jsxs("tbody", { "data-adapttable-part": "tbody", className: classNames.tbody, children: [
1740
+ paddingTop > 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
1741
+ "td",
1742
+ {
1743
+ colSpan: columnSpan,
1744
+ style: { height: paddingTop, padding: 0 }
1745
+ }
1746
+ ) }),
1747
+ entries.map(({ row, index, key }) => {
1748
+ const id = getRowId(row);
1749
+ return /* @__PURE__ */ jsx(
1750
+ Row,
1751
+ {
1752
+ row,
1753
+ index,
1754
+ id,
1755
+ table,
1756
+ columns,
1757
+ labels,
1758
+ classNames,
1759
+ selected: selection ? selection.isSelected(id) : void 0,
1760
+ expanded: expansionState ? expansionState.isExpanded(id) : void 0,
1761
+ showActions,
1762
+ rowActions,
1763
+ confirm,
1764
+ columnSpan,
1765
+ columnWidths,
1766
+ pinOffset,
1767
+ pinSignature,
1768
+ hasLeftPin,
1769
+ hasRightPin,
1770
+ actionsPinned: stickActions,
1771
+ rowClass: rowClassName?.(row, index),
1772
+ clickable: Boolean(onRowClick),
1773
+ hasPrefetch: Boolean(prefetch),
1774
+ onRowClick: handleRowClick,
1775
+ onPrefetch: handlePrefetch,
1776
+ onToggleSelect,
1777
+ onToggleExpand,
1778
+ renderDetail,
1779
+ measureElement
1780
+ },
1781
+ key
1782
+ );
1783
+ }),
1784
+ paddingBottom > 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
1785
+ "td",
1786
+ {
1787
+ colSpan: columnSpan,
1788
+ style: { height: paddingBottom, padding: 0 }
1789
+ }
1790
+ ) })
1791
+ ] }),
1792
+ summary && /* @__PURE__ */ jsx("tfoot", { "data-adapttable-part": "summary", className: classNames.summary, children: /* @__PURE__ */ jsxs(
1793
+ "tr",
1794
+ {
1795
+ "data-adapttable-part": "summary-row",
1796
+ className: classNames.summaryRow,
1797
+ children: [
1798
+ expandable && summaryPad,
1799
+ selection && summaryPad,
1800
+ columns.map((column) => /* @__PURE__ */ jsx(
1801
+ "td",
1802
+ {
1803
+ "data-adapttable-part": "summary-cell",
1804
+ className: classNames.summaryCell,
1805
+ children: summary[column.key]
1806
+ },
1807
+ column.key
1808
+ )),
1809
+ showActions && summaryPad
1810
+ ]
1811
+ }
1812
+ ) })
1813
+ ]
1814
+ }
1815
+ );
1816
+ return /* @__PURE__ */ jsx(
1817
+ "div",
1818
+ {
1819
+ ref: (node) => {
1820
+ overflowRef(node);
1821
+ virtualScrollRef?.(node);
1822
+ },
1823
+ "data-adapttable-part": "scroll-box",
1824
+ style: scrollBoxStyle(maxHeight, hasPinned || overflowing),
1825
+ children: tableEl
1826
+ }
1827
+ );
1828
+ }
1829
+ function MobileCards({
1830
+ table,
1831
+ rows,
1832
+ rowActions,
1833
+ confirm,
1834
+ getRowId,
1835
+ classNames,
1836
+ onRowClick,
1837
+ rowClassName,
1838
+ renderRowDetail,
1839
+ summaryRow,
1840
+ expansion,
1841
+ rowEntries,
1842
+ paddingTop = 0,
1843
+ paddingBottom = 0,
1844
+ measureElement
1845
+ }) {
1846
+ const { columns, selection, labels } = table;
1847
+ const entries = resolveVirtualRows(rows, getRowId, rowEntries);
1848
+ const expansionState = renderRowDetail ? expansion : void 0;
1849
+ const summary = summaryRow?.(rows);
1850
+ return /* @__PURE__ */ jsxs(
1851
+ "ul",
1852
+ {
1853
+ ...table.getTableProps({ role: void 0 }),
1854
+ "data-adapttable-part": "cards",
1855
+ className: classNames.cards,
1856
+ style: { listStyle: "none", margin: 0, padding: 0 },
1857
+ children: [
1858
+ paddingTop > 0 && /* @__PURE__ */ jsx(
1859
+ "li",
1860
+ {
1861
+ "aria-hidden": true,
1862
+ "data-adapttable-part": "virtual-spacer",
1863
+ style: { height: paddingTop }
1864
+ }
1865
+ ),
1866
+ entries.map(({ row, index, key }) => {
1867
+ const id = getRowId(row);
1868
+ const expanded = expansionState?.isExpanded(id) ?? false;
1869
+ return /* @__PURE__ */ jsxs(
1870
+ "li",
1871
+ {
1872
+ ...rowClickProps(row, onRowClick),
1873
+ ref: measureElement,
1874
+ "data-index": index,
1875
+ "data-adapttable-part": "card",
1876
+ "data-selected": selection?.isSelected(id) ? "" : void 0,
1877
+ "data-clickable": onRowClick ? "" : void 0,
1878
+ className: cx(classNames.card, rowClassName?.(row, index)),
1879
+ children: [
1880
+ selection && /* @__PURE__ */ jsx(
1881
+ "input",
1882
+ {
1883
+ type: "checkbox",
1884
+ "aria-label": labels.selectRow,
1885
+ checked: selection.isSelected(id),
1886
+ onChange: () => selection.toggle(id),
1887
+ className: classNames.checkbox
1888
+ }
1889
+ ),
1890
+ expansionState && /* @__PURE__ */ jsx(
1891
+ ExpandButton,
1892
+ {
1893
+ expanded,
1894
+ labels,
1895
+ classNames,
1896
+ onToggle: () => expansionState.toggle(id)
1897
+ }
1898
+ ),
1899
+ columns.map((column) => /* @__PURE__ */ jsxs(
1900
+ "div",
1901
+ {
1902
+ "data-adapttable-part": "card-row",
1903
+ className: classNames.cardRow,
1904
+ children: [
1905
+ /* @__PURE__ */ jsx(
1906
+ "span",
1907
+ {
1908
+ "data-adapttable-part": "card-label",
1909
+ className: classNames.cardLabel,
1910
+ children: cardLabel(column)
1911
+ }
1912
+ ),
1913
+ /* @__PURE__ */ jsx(
1914
+ "span",
1915
+ {
1916
+ "data-adapttable-part": "card-value",
1917
+ className: classNames.cardValue,
1918
+ children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row)
1919
+ }
1920
+ )
1921
+ ]
1922
+ },
1923
+ column.key
1924
+ )),
1925
+ rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx(
1926
+ "div",
1927
+ {
1928
+ "data-adapttable-part": "card-actions",
1929
+ className: classNames.actionsCell,
1930
+ children: /* @__PURE__ */ jsx(
1931
+ RowActionButtons,
1932
+ {
1933
+ row,
1934
+ actions: rowActions,
1935
+ confirm,
1936
+ cancelLabel: labels.cancel,
1937
+ classNames
1938
+ }
1939
+ )
1940
+ }
1941
+ ),
1942
+ expanded && // Inside the measured card `<li>`, so the virtualizer's size
1943
+ // measurement tracks the open detail panel.
1944
+ /* @__PURE__ */ jsx(
1945
+ "div",
1946
+ {
1947
+ "data-adapttable-part": "card-detail",
1948
+ className: classNames.cardDetail,
1949
+ children: renderRowDetail(row)
1950
+ }
1951
+ )
1952
+ ]
1953
+ },
1954
+ key
1955
+ );
1956
+ }),
1957
+ paddingBottom > 0 && /* @__PURE__ */ jsx(
1958
+ "li",
1959
+ {
1960
+ "aria-hidden": true,
1961
+ "data-adapttable-part": "virtual-spacer",
1962
+ style: { height: paddingBottom }
1963
+ }
1964
+ ),
1965
+ summary && /* @__PURE__ */ jsx(
1966
+ "li",
1967
+ {
1968
+ "data-adapttable-part": "summary-card",
1969
+ className: classNames.summaryCard,
1970
+ children: columns.filter((column) => summary[column.key] !== void 0).map((column) => /* @__PURE__ */ jsxs(
1971
+ "div",
1972
+ {
1973
+ "data-adapttable-part": "card-row",
1974
+ className: classNames.cardRow,
1975
+ children: [
1976
+ /* @__PURE__ */ jsx(
1977
+ "span",
1978
+ {
1979
+ "data-adapttable-part": "card-label",
1980
+ className: classNames.cardLabel,
1981
+ children: cardLabel(column)
1982
+ }
1983
+ ),
1984
+ /* @__PURE__ */ jsx(
1985
+ "span",
1986
+ {
1987
+ "data-adapttable-part": "card-value",
1988
+ className: classNames.cardValue,
1989
+ children: summary[column.key]
1990
+ }
1991
+ )
1992
+ ]
1993
+ },
1994
+ column.key
1995
+ ))
1996
+ }
1997
+ )
1998
+ ]
1999
+ }
2000
+ );
2001
+ }
2002
+ function sortGlyph(active, dir) {
2003
+ if (!active) return "\u2195";
2004
+ return dir === "asc" ? "\u2191" : "\u2193";
2005
+ }
2006
+ function cardLabel(column) {
2007
+ return column.mobileLabel ?? (typeof column.header === "string" ? column.header : column.key);
2008
+ }
2009
+ var NO_CLASSNAMES = {};
2010
+ function DataTableBody({
2011
+ chrome,
2012
+ props,
2013
+ classNames,
2014
+ confirm,
2015
+ getRowId,
2016
+ virtualization,
2017
+ virtualScrollRef,
2018
+ labels
2019
+ }) {
2020
+ const rowActions = chrome.columnLayout.isHidden(ACTIONS_COLUMN_KEY) ? void 0 : props.rowActions;
2021
+ const actionsPinned = (rowActions?.length ?? 0) > 0 && chrome.columnLayout.state.pinned[ACTIONS_COLUMN_KEY] !== void 0;
2022
+ if (chrome.body === "skeleton") {
2023
+ return /* @__PURE__ */ jsx(Fragment, { children: props.slots?.skeleton ?? props.loadingState ?? /* @__PURE__ */ jsx(
2024
+ LoadingState,
2025
+ {
2026
+ rows: props.skeletonRows ?? props.source.limit,
2027
+ columns: chrome.table.columns.length,
2028
+ variant: chrome.isMobile ? "cards" : "table",
2029
+ labels,
2030
+ classNames,
2031
+ hasActions: (rowActions?.length ?? 0) > 0
2032
+ }
2033
+ ) });
2034
+ }
2035
+ if (chrome.body === "empty") {
2036
+ const noResults = chrome.emptyVariant === "noResults";
2037
+ return /* @__PURE__ */ jsx(Fragment, { children: props.slots?.empty ?? props.emptyState ?? /* @__PURE__ */ jsxs("output", { "data-adapttable-part": "empty", className: classNames.empty, children: [
2038
+ noResults ? labels.noResults : labels.noData,
2039
+ noResults && /* @__PURE__ */ jsx(
2040
+ "button",
2041
+ {
2042
+ type: "button",
2043
+ "data-adapttable-part": "empty-clear",
2044
+ className: classNames.emptyClear,
2045
+ onClick: chrome.clearFilters,
2046
+ children: labels.clearAll
2047
+ }
2048
+ )
2049
+ ] }) });
2050
+ }
2051
+ const Renderer = chrome.isMobile ? MobileCards : DesktopTable;
2052
+ return /* @__PURE__ */ jsx(
2053
+ Renderer,
2054
+ {
2055
+ table: chrome.table,
2056
+ rows: props.source.rows,
2057
+ rowActions,
2058
+ actionsPinned,
2059
+ confirm,
2060
+ getRowId,
2061
+ classNames,
2062
+ prefetch: props.prefetch,
2063
+ onRowClick: props.onRowClick,
2064
+ rowClassName: props.rowClassName,
2065
+ renderRowDetail: props.renderRowDetail,
2066
+ summaryRow: props.summaryRow,
2067
+ expansion: chrome.detail?.expansion,
2068
+ rowEntries: virtualization.enabled ? virtualization.rows : void 0,
2069
+ paddingTop: virtualization.paddingTop,
2070
+ paddingBottom: virtualization.paddingBottom,
2071
+ measureElement: virtualization.measureElement,
2072
+ stickyHeader: props.stickyHeader,
2073
+ stickyTop: props.stickyTop,
2074
+ pinOffset: chrome.columnLayout.pinOffset,
2075
+ maxHeight: props.maxHeight,
2076
+ virtualScrollRef,
2077
+ setWidth: props.resizableColumns ? chrome.columnLayout.setWidth : void 0,
2078
+ columnWidths: chrome.columnLayout.state.widths,
2079
+ resizeLabel: labels.resizeColumn
2080
+ }
2081
+ );
2082
+ }
2083
+ function DataTable(props) {
2084
+ const {
2085
+ data,
2086
+ total,
2087
+ loading,
2088
+ onQueryChange,
2089
+ urlAdapter,
2090
+ urlKey,
2091
+ searchPlaceholder,
2092
+ sortByOptions,
2093
+ dir,
2094
+ hideSearch,
2095
+ filtersMode = "popover",
2096
+ bulkActions,
2097
+ classNames = NO_CLASSNAMES,
2098
+ toolbar: customToolbar
2099
+ } = props;
2100
+ const density = props.density ?? "comfortable";
2101
+ const { source, runtime } = useTableData({
2102
+ locale: props.locale,
2103
+ source: props.source,
2104
+ data,
2105
+ total,
2106
+ loading,
2107
+ onQueryChange,
2108
+ adapter: props.urlSync === false ? void 0 : urlAdapter,
2109
+ enabled: props.urlSync,
2110
+ urlKey,
2111
+ columns: props.columns,
2112
+ filters: props.filters
2113
+ });
2114
+ const autoForm = runtime.defs.length > 0 ? /* @__PURE__ */ jsx(
2115
+ AutoFilterForm,
2116
+ {
2117
+ defs: runtime.defs,
2118
+ source,
2119
+ classNames,
2120
+ labels: props.labels
2121
+ }
2122
+ ) : void 0;
2123
+ const filters = isDeclarativeFilters(props.filters) || props.filters === void 0 ? autoForm : props.filters;
2124
+ const chromeProps = {
2125
+ ...props,
2126
+ source,
2127
+ filters,
2128
+ filterLabels: { ...runtime.filterLabels, ...props.filterLabels }
2129
+ };
2130
+ const chrome = useTableChrome(chromeProps);
2131
+ const { table, confirm, getRowId } = chrome;
2132
+ const { labels } = table;
2133
+ const [filtersOpen, setFiltersOpen] = useState(false);
2134
+ const filtersTrigger = useFilterTriggerToggle(filtersOpen, setFiltersOpen);
2135
+ const rootRef = useRef(null);
2136
+ useChromeScrollReset(rootRef, chrome, chromeProps);
2137
+ const bodyData = useChromeBodyData(chrome, chromeProps);
2138
+ const { virtualization, canLoadMore } = bodyData;
2139
+ const loadMoreRef = bodyData.loadMoreRef;
2140
+ const searchProps = table.getSearchInputProps(
2141
+ searchPlaceholder ? { placeholder: searchPlaceholder } : void 0
2142
+ );
2143
+ const sortOptions = sortByOptions ?? (chrome.isMobile ? table.sortByOptions : void 0);
2144
+ const filtersButton = /* @__PURE__ */ jsxs(
2145
+ "button",
2146
+ {
2147
+ type: "button",
2148
+ "aria-expanded": filtersMode === "popover" ? filtersOpen : void 0,
2149
+ "data-active": filtersOpen || void 0,
2150
+ "data-adapttable-part": "filters-button",
2151
+ className: classNames.filtersButton,
2152
+ style: { flexShrink: 0, whiteSpace: "nowrap" },
2153
+ onPointerDown: filtersTrigger.onPointerDown,
2154
+ onClick: filtersTrigger.onClick,
2155
+ children: [
2156
+ /* @__PURE__ */ jsx(
2157
+ "span",
2158
+ {
2159
+ "data-adapttable-part": "filters-icon",
2160
+ className: classNames.filtersIcon,
2161
+ style: { display: "inline-flex" },
2162
+ children: /* @__PURE__ */ jsx(FiltersIcon, {})
2163
+ }
2164
+ ),
2165
+ labels.filters,
2166
+ chrome.activeFilterCount > 0 && /* @__PURE__ */ jsx(
2167
+ "span",
2168
+ {
2169
+ "data-adapttable-part": "filters-count",
2170
+ className: classNames.filtersCount,
2171
+ children: chrome.activeFilterCount
2172
+ }
2173
+ )
2174
+ ]
2175
+ }
2176
+ );
2177
+ return /* @__PURE__ */ jsxs(
2178
+ "div",
2179
+ {
2180
+ ref: rootRef,
2181
+ dir,
2182
+ "data-adapttable-part": "root",
2183
+ "data-mobile": chrome.isMobile || void 0,
2184
+ "data-density": density,
2185
+ "data-refreshing": chrome.isRefreshing || void 0,
2186
+ "aria-busy": chrome.isRefreshing || void 0,
2187
+ className: cx("adapttable", classNames.root),
2188
+ children: [
2189
+ /* @__PURE__ */ jsxs(
2190
+ "div",
2191
+ {
2192
+ "data-adapttable-part": "toolbar",
2193
+ className: classNames.toolbar,
2194
+ style: {
2195
+ display: "flex",
2196
+ flexWrap: "wrap",
2197
+ alignItems: "center",
2198
+ rowGap: 8
2199
+ },
2200
+ children: [
2201
+ !hideSearch && /* @__PURE__ */ jsxs(
2202
+ "span",
2203
+ {
2204
+ "data-adapttable-part": "search-field",
2205
+ className: classNames.searchField,
2206
+ style: {
2207
+ flex: 1,
2208
+ minWidth: 0,
2209
+ display: "inline-flex",
2210
+ alignItems: "center"
2211
+ },
2212
+ children: [
2213
+ /* @__PURE__ */ jsx(
2214
+ "span",
2215
+ {
2216
+ "data-adapttable-part": "search-icon",
2217
+ className: classNames.searchIcon,
2218
+ style: { display: "inline-flex" },
2219
+ children: /* @__PURE__ */ jsx(SearchIcon, { size: 14 })
2220
+ }
2221
+ ),
2222
+ /* @__PURE__ */ jsx(
2223
+ "input",
2224
+ {
2225
+ ...searchProps,
2226
+ "data-adapttable-part": "search",
2227
+ className: classNames.search,
2228
+ style: { flex: 1, minWidth: 0 }
2229
+ }
2230
+ )
2231
+ ]
2232
+ }
2233
+ ),
2234
+ sortOptions && sortOptions.length > 0 && /* @__PURE__ */ jsxs("label", { children: [
2235
+ labels.sortBy,
2236
+ " ",
2237
+ /* @__PURE__ */ jsxs(
2238
+ "select",
2239
+ {
2240
+ "aria-label": labels.sortBy,
2241
+ "data-adapttable-part": "sort-select",
2242
+ className: classNames.sortSelect,
2243
+ value: source.sortBy ?? "",
2244
+ onChange: (e) => source.setSort(
2245
+ e.currentTarget.value || void 0,
2246
+ source.sortDir ?? "asc"
2247
+ ),
2248
+ children: [
2249
+ /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
2250
+ sortOptions.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
2251
+ ]
2252
+ }
2253
+ )
2254
+ ] }),
2255
+ customToolbar,
2256
+ filters && (filtersMode === "popover" ? /* @__PURE__ */ jsx(
2257
+ FilterPopover,
2258
+ {
2259
+ open: filtersOpen,
2260
+ onClose: () => setFiltersOpen(false),
2261
+ filters,
2262
+ activeFilterCount: chrome.activeFilterCount,
2263
+ onClearFilters: chrome.clearFilters,
2264
+ labels,
2265
+ dir,
2266
+ classNames,
2267
+ children: filtersButton
2268
+ }
2269
+ ) : filtersButton),
2270
+ props.enableColumnMenu && !chrome.isMobile && /* @__PURE__ */ jsx(
2271
+ ColumnMenu,
2272
+ {
2273
+ allColumns: chrome.allColumns,
2274
+ layout: chrome.columnLayout,
2275
+ labels,
2276
+ classNames,
2277
+ hasRowActions: (props.rowActions?.length ?? 0) > 0
2278
+ }
2279
+ ),
2280
+ props.savedViews && // The menu must capture/apply through the SAME URL backend and
2281
+ // namespace the table reads, so those default from the table's
2282
+ // own props (explicit option values still win).
2283
+ /* @__PURE__ */ jsx(
2284
+ SavedViewsMenu,
2285
+ {
2286
+ options: { adapter: urlAdapter, urlKey, ...props.savedViews },
2287
+ labels,
2288
+ classNames
2289
+ }
2290
+ ),
2291
+ canLoadMore && /* @__PURE__ */ jsx(
2292
+ RowsPerPageSelect,
2293
+ {
2294
+ source,
2295
+ labels,
2296
+ classNames
2297
+ }
2298
+ )
2299
+ ]
2300
+ }
2301
+ ),
2302
+ filters && filtersMode === "drawer" && /* @__PURE__ */ jsx(
2303
+ FilterPanel,
2304
+ {
2305
+ open: filtersOpen,
2306
+ onClose: () => setFiltersOpen(false),
2307
+ filters,
2308
+ activeFilterCount: chrome.activeFilterCount,
2309
+ onClearFilters: chrome.clearFilters,
2310
+ labels,
2311
+ dir,
2312
+ classNames
2313
+ }
2314
+ ),
2315
+ /* @__PURE__ */ jsx(
2316
+ Chips,
2317
+ {
2318
+ chips: chrome.mergedChips,
2319
+ onClearAll: chrome.clearFilters,
2320
+ labels,
2321
+ classNames
2322
+ }
2323
+ ),
2324
+ table.selection && bulkActions && /* @__PURE__ */ jsx(
2325
+ BulkBar,
2326
+ {
2327
+ selection: table.selection,
2328
+ total: source.total,
2329
+ bulkActions,
2330
+ confirm,
2331
+ labels,
2332
+ classNames
2333
+ }
2334
+ ),
2335
+ chrome.isRefreshing && // Native indeterminate progress (no `value`) — implicit progressbar
2336
+ // role with correct semantics on every device.
2337
+ /* @__PURE__ */ jsx(
2338
+ "progress",
2339
+ {
2340
+ "aria-label": labels.loading,
2341
+ "data-adapttable-part": "refresh-indicator",
2342
+ className: classNames.refreshIndicator
2343
+ }
2344
+ ),
2345
+ source.error ? /* @__PURE__ */ jsx(
2346
+ ErrorState,
2347
+ {
2348
+ error: source.error,
2349
+ labels,
2350
+ onRetry: source.refetch ? () => void source.refetch?.() : void 0,
2351
+ classNames
2352
+ }
2353
+ ) : /* @__PURE__ */ jsx(
2354
+ DataTableBody,
2355
+ {
2356
+ chrome,
2357
+ props: chromeProps,
2358
+ classNames,
2359
+ confirm,
2360
+ getRowId,
2361
+ virtualization,
2362
+ virtualScrollRef: bodyData.virtualScrollRef,
2363
+ labels
2364
+ }
2365
+ ),
2366
+ canLoadMore && source.hasNextPage && /* @__PURE__ */ jsx(
2367
+ "div",
2368
+ {
2369
+ ref: loadMoreRef,
2370
+ "data-adapttable-part": "load-more",
2371
+ className: classNames.loadMore,
2372
+ children: /* @__PURE__ */ jsx(
2373
+ "button",
2374
+ {
2375
+ type: "button",
2376
+ disabled: source.isFetchingNextPage,
2377
+ "data-adapttable-part": "load-more-button",
2378
+ className: classNames.loadMoreButton,
2379
+ onClick: () => source.fetchNextPage(),
2380
+ children: labels.loadMore
2381
+ }
2382
+ )
2383
+ }
2384
+ ),
2385
+ chrome.showFooter && /* @__PURE__ */ jsx(
2386
+ Footer,
2387
+ {
2388
+ pagination: table.pagination,
2389
+ source,
2390
+ labels,
2391
+ classNames
2392
+ }
2393
+ )
2394
+ ]
2395
+ }
2396
+ );
2397
+ }
2398
+
2399
+ export { AutoFilterForm, DataTable, FilterPanel, FilterPopover, FiltersIcon, SavedViewsMenu, SearchIcon, cx };
2400
+ //# sourceMappingURL=index.js.map
2401
+ //# sourceMappingURL=index.js.map