@ai-matrx/design-system 0.17.2 → 0.17.4

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 (6) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/data-table/index.cjs +300 -210
  3. package/dist/data-table/index.cjs.map +1 -1
  4. package/dist/data-table/index.js +300 -210
  5. package/dist/data-table/index.js.map +1 -1
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.17.4 — 2026-09-12
4
+
5
+ `MatrxDataTable` now renders next-page progress as a sticky 64px row inside
6
+ the desktop table and mobile-card scrollers. It remains visible at the current
7
+ scroll bottom without moving the user; the footer retains counts, errors, and
8
+ controls without duplicating the active spinner/status.
9
+
10
+ ### Consumer action
11
+
12
+ Update to 0.17.4 for in-body append progress. No query, pagination, or API
13
+ changes are required.
14
+
15
+ ## 0.17.3 — 2026-09-12
16
+
17
+ `MatrxDataTable` now keeps a fixed-height append status area at the bottom of
18
+ automatic and manual append surfaces. Active loads show an accessible spinner
19
+ without replacing already loaded rows or shifting the footer, including in
20
+ dark mode and reduced-motion environments.
21
+
22
+ ### Consumer action
23
+
24
+ Update to 0.17.3 for visible, layout-stable feedback while additional table
25
+ rows load. No query, pagination, or API changes are required.
26
+
3
27
  ## 0.17.2 — 2026-09-12
4
28
 
5
29
  `MatrxDataTable` now resets the vertical scroll position of both its desktop
package/dist/data-table/index.cjs CHANGED
@@ -6511,12 +6511,13 @@ function MatrxDataTableCore({
6511
6511
  ref: cardsScrollRef,
6512
6512
  "data-matrx-table-cards-scroll": true,
6513
6513
  "aria-busy": isLoading || isFetching,
6514
+ ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
6514
6515
  className: cn(
6515
6516
  "flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
6516
6517
  mobileCardsClass
6517
6518
  ),
6518
6519
  children: [
6519
- isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6520
+ isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6520
6521
  "div",
6521
6522
  {
6522
6523
  role: "status",
@@ -6580,7 +6581,26 @@ function MatrxDataTableCore({
6580
6581
  }
6581
6582
  ) : null
6582
6583
  }) }, id);
6583
- })
6584
+ }),
6585
+ appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6586
+ "div",
6587
+ {
6588
+ "data-matrx-table-append-loading-card": true,
6589
+ role: "status",
6590
+ "aria-live": "polite",
6591
+ className: "sticky bottom-0 z-20 flex h-16 w-full max-w-[100cqw] shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-card/95 px-3 text-sm font-medium text-foreground shadow-sm backdrop-blur-sm",
6592
+ children: [
6593
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6594
+ Loader2,
6595
+ {
6596
+ "aria-hidden": "true",
6597
+ className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
6598
+ }
6599
+ ),
6600
+ "Loading more rows\u2026"
6601
+ ]
6602
+ }
6603
+ ) : null
6584
6604
  ]
6585
6605
  }
6586
6606
  ) : null,
@@ -6591,6 +6611,7 @@ function MatrxDataTableCore({
6591
6611
  "data-matrx-table-scroll": true,
6592
6612
  onScroll: updateScrollHint,
6593
6613
  "aria-busy": isLoading || isFetching,
6614
+ ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
6594
6615
  className: cn(
6595
6616
  "relative h-full w-full overflow-auto rounded-md border border-border bg-card",
6596
6617
  mobileCards && tableWithCardsClass,
@@ -6611,7 +6632,7 @@ function MatrxDataTableCore({
6611
6632
  resolve: resolveHierarchyMove
6612
6633
  }
6613
6634
  ) : null,
6614
- isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6635
+ isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6615
6636
  "div",
6616
6637
  {
6617
6638
  role: "status",
@@ -6712,214 +6733,241 @@ function MatrxDataTableCore({
6712
6733
  }),
6713
6734
  showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "h-9 w-28 px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Actions" })
6714
6735
  ] }) }),
6715
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { className: "border-b border-border/60", children: [
6716
- selection ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
6717
- visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6736
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tbody", { children: [
6737
+ isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { className: "border-b border-border/60", children: [
6738
+ selection ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
6739
+ visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6740
+ "td",
6741
+ {
6742
+ className: cn(
6743
+ "py-2",
6744
+ col.compact ? "px-1" : "px-2",
6745
+ col.mobileHidden && "max-sm:hidden"
6746
+ ),
6747
+ children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { className: "h-5 w-full" })
6748
+ },
6749
+ columnId(col)
6750
+ )),
6751
+ showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
6752
+ ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6718
6753
  "td",
6719
6754
  {
6720
- className: cn(
6721
- "py-2",
6722
- col.compact ? "px-1" : "px-2",
6723
- col.mobileHidden && "max-sm:hidden"
6724
- ),
6725
- children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { className: "h-5 w-full" })
6726
- },
6727
- columnId(col)
6728
- )),
6729
- showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
6730
- ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6731
- "td",
6732
- {
6733
- colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
6734
- className: "px-4 py-12 text-center",
6735
- children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mx-auto flex max-w-sm flex-col items-center gap-2", children: [
6736
- emptyState?.icon,
6737
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
6738
- emptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
6739
- emptyState?.action
6740
- ] })
6741
- }
6742
- ) }) : paginated.map((row, index) => {
6743
- const id = getRowId(row);
6744
- const isSelected = selectedId === id;
6745
- const rowEdits = edits[id];
6746
- const displayRow = applyRowEdits(row, rowEdits);
6747
- const isChecked = selectedIdSet.has(id);
6748
- const rowNode = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6749
- "tr",
6750
- {
6751
- "data-row-id": id,
6752
- "data-state": isSelected ? "selected" : void 0,
6753
- onClick: (e) => {
6754
- if (e.target.closest("a")) return;
6755
- openRow(row);
6756
- },
6757
- className: cn(
6758
- // Keep the mobile row opaque while the complete row scrolls
6759
- // horizontally. The translucent zebra/hover tints remain
6760
- // desktop-only so densely layered mobile content stays crisp.
6761
- "border-b border-border/60 bg-card transition-colors",
6762
- (detailEnabled || Boolean(onRowOpen)) && "cursor-pointer sm:hover:bg-muted/50",
6763
- isSelected && "bg-muted",
6764
- isChecked && "bg-primary/5",
6765
- highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
6766
- rowClassName?.(row, index),
6767
- draggedRowId === id && "opacity-40",
6768
- zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20"
6769
- ),
6770
- children: [
6771
- selection ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6772
- "td",
6773
- {
6774
- className: "px-2 py-1.5 align-middle lg:py-0.5",
6775
- onClick: (e) => e.stopPropagation(),
6776
- children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6777
- Checkbox,
6778
- {
6779
- className: CHECKBOX_TAP_AREA,
6780
- checked: isChecked,
6781
- "aria-label": `Select this ${selectionNoun}`,
6782
- onClick: (e) => toggleRowSelected(index, e.shiftKey)
6783
- }
6784
- ) : null
6785
- }
6786
- ) : null,
6787
- visibleColumns.map((col, colIdx) => {
6788
- const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
6789
- const display = renderCell(displayRow, col, index);
6790
- const editable = Boolean(
6791
- editEnabled && col.editable && (col.editableIf?.(row) ?? true)
6792
- );
6793
- const dirty = Boolean(
6794
- rowEdits && field in rowEdits
6795
- );
6796
- const cellHref = col.href?.(row) ?? void 0;
6797
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6755
+ colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
6756
+ className: "px-4 py-12 text-center",
6757
+ children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mx-auto flex max-w-sm flex-col items-center gap-2", children: [
6758
+ emptyState?.icon,
6759
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
6760
+ emptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
6761
+ emptyState?.action
6762
+ ] })
6763
+ }
6764
+ ) }) : paginated.map((row, index) => {
6765
+ const id = getRowId(row);
6766
+ const isSelected = selectedId === id;
6767
+ const rowEdits = edits[id];
6768
+ const displayRow = applyRowEdits(row, rowEdits);
6769
+ const isChecked = selectedIdSet.has(id);
6770
+ const rowNode = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6771
+ "tr",
6772
+ {
6773
+ "data-row-id": id,
6774
+ "data-state": isSelected ? "selected" : void 0,
6775
+ onClick: (e) => {
6776
+ if (e.target.closest("a")) return;
6777
+ openRow(row);
6778
+ },
6779
+ className: cn(
6780
+ // Keep the mobile row opaque while the complete row scrolls
6781
+ // horizontally. The translucent zebra/hover tints remain
6782
+ // desktop-only so densely layered mobile content stays crisp.
6783
+ "border-b border-border/60 bg-card transition-colors",
6784
+ (detailEnabled || Boolean(onRowOpen)) && "cursor-pointer sm:hover:bg-muted/50",
6785
+ isSelected && "bg-muted",
6786
+ isChecked && "bg-primary/5",
6787
+ highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
6788
+ rowClassName?.(row, index),
6789
+ draggedRowId === id && "opacity-40",
6790
+ zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20"
6791
+ ),
6792
+ children: [
6793
+ selection ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6798
6794
  "td",
6799
6795
  {
6800
- className: cn(
6801
- "py-1.5 align-middle lg:py-0.5",
6802
- col.compact ? "px-1" : "px-2",
6803
- // nowrap (NOT truncate — truncate clips the cell and
6804
- // defeats w-max, killing the horizontal scroll).
6805
- "max-sm:whitespace-nowrap",
6806
- col.mobileHidden && "max-sm:hidden",
6807
- col.width !== void 0 && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
6808
- col.className,
6809
- col.align === "center" && "text-center",
6810
- col.align === "right" && "text-right"
6811
- ),
6812
- style: columnWidthVar(col.width),
6813
- children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6814
- "div",
6815
- {
6816
- className: cn(
6817
- colIdx === 0 && hierarchy && "flex min-w-0 items-center"
6818
- ),
6819
- children: [
6820
- colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6821
- HierarchyDragHandle,
6822
- {
6823
- id,
6824
- label: hierarchy.itemLabel?.(row) ?? "row",
6825
- disabled: !(hierarchy.canReparent?.(row) ?? true)
6826
- }
6827
- ) : null,
6828
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6829
- "div",
6830
- {
6831
- "data-matrx-cell-content": true,
6832
- className: "min-w-0 max-w-full flex-1 whitespace-normal break-words [overflow-wrap:anywhere] sm:[&_*]:min-w-0 sm:[&_*]:max-w-full sm:[&_*]:whitespace-normal sm:[&_*]:[overflow-wrap:anywhere] sm:[&_[data-matrx-cell-control]]:w-max sm:[&_[data-matrx-cell-control]]:min-w-max sm:[&_[data-matrx-cell-control]]:max-w-none sm:[&_[data-matrx-cell-control]]:whitespace-nowrap sm:[&_[data-matrx-cell-control]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]_*]:whitespace-nowrap sm:[&_[data-matrx-cell-control]_*]:[overflow-wrap:normal]",
6833
- children: editable && col.editable ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6834
- EditableTableCell,
6835
- {
6836
- value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
6837
- editType: col.editable,
6838
- ...col.editOptions === void 0 ? {} : { editOptions: col.editOptions },
6839
- display,
6840
- dirty,
6841
- onCommit: (next) => commitCell(id, field, next),
6842
- ...cellHref === void 0 ? {} : { href: cellHref },
6843
- ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
6844
- }
6845
- ) : cellHref ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6846
- Link,
6847
- {
6848
- href: cellHref,
6849
- onClick: (e) => e.stopPropagation(),
6850
- className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
6851
- children: display
6852
- }
6853
- ) : display
6854
- }
6855
- )
6856
- ]
6857
- }
6858
- )
6859
- },
6860
- columnId(col)
6861
- );
6862
- }),
6863
- showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6864
- "div",
6865
- {
6866
- className: "inline-flex items-center justify-end gap-0.5",
6867
- onClick: (e) => e.stopPropagation(),
6868
- children: [
6869
- showRowCopy && copy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6870
- TableRowCopyControl,
6796
+ className: "px-2 py-1.5 align-middle lg:py-0.5",
6797
+ onClick: (e) => e.stopPropagation(),
6798
+ children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6799
+ Checkbox,
6871
6800
  {
6872
- size: "xs",
6873
- copy,
6874
- row: displayRow
6875
- }
6876
- ) : null,
6877
- rowActions?.(displayRow, {
6878
- closeDetail: () => setSelectedId(null),
6879
- openDetail: () => openDetail(displayRow),
6880
- openWindow: () => openWindow(displayRow),
6881
- closeWindow,
6882
- hasPendingEdits: Boolean(rowEdits),
6883
- discardPendingEdits: () => discardRowEdits(id)
6884
- }),
6885
- windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6886
- Button,
6887
- {
6888
- type: "button",
6889
- variant: "ghost",
6890
- size: "icon",
6891
- className: "h-11 w-11 text-muted-foreground hover:text-foreground lg:h-5 lg:w-5 [&_svg]:size-3",
6892
- "aria-label": opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6893
- title: opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6894
- onClick: (e) => {
6895
- e.stopPropagation();
6896
- if (opensWindowOnRowClick) {
6897
- openDetail(row);
6898
- } else {
6899
- openWindow(row);
6900
- }
6901
- },
6902
- children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
6801
+ className: CHECKBOX_TAP_AREA,
6802
+ checked: isChecked,
6803
+ "aria-label": `Select this ${selectionNoun}`,
6804
+ onClick: (e) => toggleRowSelected(index, e.shiftKey)
6903
6805
  }
6904
6806
  ) : null
6905
- ]
6906
- }
6907
- ) })
6908
- ]
6909
- },
6910
- id
6911
- );
6912
- const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
6913
- return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6914
- HierarchyDroppableRow,
6807
+ }
6808
+ ) : null,
6809
+ visibleColumns.map((col, colIdx) => {
6810
+ const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
6811
+ const display = renderCell(displayRow, col, index);
6812
+ const editable = Boolean(
6813
+ editEnabled && col.editable && (col.editableIf?.(row) ?? true)
6814
+ );
6815
+ const dirty = Boolean(
6816
+ rowEdits && field in rowEdits
6817
+ );
6818
+ const cellHref = col.href?.(row) ?? void 0;
6819
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6820
+ "td",
6821
+ {
6822
+ className: cn(
6823
+ "py-1.5 align-middle lg:py-0.5",
6824
+ col.compact ? "px-1" : "px-2",
6825
+ // nowrap (NOT truncate — truncate clips the cell and
6826
+ // defeats w-max, killing the horizontal scroll).
6827
+ "max-sm:whitespace-nowrap",
6828
+ col.mobileHidden && "max-sm:hidden",
6829
+ col.width !== void 0 && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
6830
+ col.className,
6831
+ col.align === "center" && "text-center",
6832
+ col.align === "right" && "text-right"
6833
+ ),
6834
+ style: columnWidthVar(col.width),
6835
+ children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6836
+ "div",
6837
+ {
6838
+ className: cn(
6839
+ colIdx === 0 && hierarchy && "flex min-w-0 items-center"
6840
+ ),
6841
+ children: [
6842
+ colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6843
+ HierarchyDragHandle,
6844
+ {
6845
+ id,
6846
+ label: hierarchy.itemLabel?.(row) ?? "row",
6847
+ disabled: !(hierarchy.canReparent?.(row) ?? true)
6848
+ }
6849
+ ) : null,
6850
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6851
+ "div",
6852
+ {
6853
+ "data-matrx-cell-content": true,
6854
+ className: "min-w-0 max-w-full flex-1 whitespace-normal break-words [overflow-wrap:anywhere] sm:[&_*]:min-w-0 sm:[&_*]:max-w-full sm:[&_*]:whitespace-normal sm:[&_*]:[overflow-wrap:anywhere] sm:[&_[data-matrx-cell-control]]:w-max sm:[&_[data-matrx-cell-control]]:min-w-max sm:[&_[data-matrx-cell-control]]:max-w-none sm:[&_[data-matrx-cell-control]]:whitespace-nowrap sm:[&_[data-matrx-cell-control]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]_*]:whitespace-nowrap sm:[&_[data-matrx-cell-control]_*]:[overflow-wrap:normal]",
6855
+ children: editable && col.editable ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6856
+ EditableTableCell,
6857
+ {
6858
+ value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
6859
+ editType: col.editable,
6860
+ ...col.editOptions === void 0 ? {} : { editOptions: col.editOptions },
6861
+ display,
6862
+ dirty,
6863
+ onCommit: (next) => commitCell(id, field, next),
6864
+ ...cellHref === void 0 ? {} : { href: cellHref },
6865
+ ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
6866
+ }
6867
+ ) : cellHref ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6868
+ Link,
6869
+ {
6870
+ href: cellHref,
6871
+ onClick: (e) => e.stopPropagation(),
6872
+ className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
6873
+ children: display
6874
+ }
6875
+ ) : display
6876
+ }
6877
+ )
6878
+ ]
6879
+ }
6880
+ )
6881
+ },
6882
+ columnId(col)
6883
+ );
6884
+ }),
6885
+ showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6886
+ "div",
6887
+ {
6888
+ className: "inline-flex items-center justify-end gap-0.5",
6889
+ onClick: (e) => e.stopPropagation(),
6890
+ children: [
6891
+ showRowCopy && copy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6892
+ TableRowCopyControl,
6893
+ {
6894
+ size: "xs",
6895
+ copy,
6896
+ row: displayRow
6897
+ }
6898
+ ) : null,
6899
+ rowActions?.(displayRow, {
6900
+ closeDetail: () => setSelectedId(null),
6901
+ openDetail: () => openDetail(displayRow),
6902
+ openWindow: () => openWindow(displayRow),
6903
+ closeWindow,
6904
+ hasPendingEdits: Boolean(rowEdits),
6905
+ discardPendingEdits: () => discardRowEdits(id)
6906
+ }),
6907
+ windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6908
+ Button,
6909
+ {
6910
+ type: "button",
6911
+ variant: "ghost",
6912
+ size: "icon",
6913
+ className: "h-11 w-11 text-muted-foreground hover:text-foreground lg:h-5 lg:w-5 [&_svg]:size-3",
6914
+ "aria-label": opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6915
+ title: opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6916
+ onClick: (e) => {
6917
+ e.stopPropagation();
6918
+ if (opensWindowOnRowClick) {
6919
+ openDetail(row);
6920
+ } else {
6921
+ openWindow(row);
6922
+ }
6923
+ },
6924
+ children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
6925
+ }
6926
+ ) : null
6927
+ ]
6928
+ }
6929
+ ) })
6930
+ ]
6931
+ },
6932
+ id
6933
+ );
6934
+ const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
6935
+ return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6936
+ HierarchyDroppableRow,
6937
+ {
6938
+ id,
6939
+ disabled: !canDropOn(row),
6940
+ children: wrappedRow
6941
+ },
6942
+ id
6943
+ ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react14.Fragment, { children: wrappedRow }, id);
6944
+ }),
6945
+ appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6946
+ "td",
6915
6947
  {
6916
- id,
6917
- disabled: !canDropOn(row),
6918
- children: wrappedRow
6919
- },
6920
- id
6921
- ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react14.Fragment, { children: wrappedRow }, id);
6922
- }) }),
6948
+ colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
6949
+ className: "sticky bottom-0 z-20 h-16 border-y border-border bg-card/95 px-0 py-0 text-left shadow-sm backdrop-blur-sm",
6950
+ children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
6951
+ "div",
6952
+ {
6953
+ role: "status",
6954
+ "aria-live": "polite",
6955
+ className: "sticky left-0 flex h-16 w-fit max-w-[100cqw] items-center justify-center gap-2 px-3 text-sm font-medium text-foreground",
6956
+ children: [
6957
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6958
+ Loader2,
6959
+ {
6960
+ "aria-hidden": "true",
6961
+ className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
6962
+ }
6963
+ ),
6964
+ "Loading more rows\u2026"
6965
+ ]
6966
+ }
6967
+ )
6968
+ }
6969
+ ) }) : null
6970
+ ] }),
6923
6971
  footerRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
6924
6972
  selection ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-2 py-2" }) : null,
6925
6973
  visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -6972,13 +7020,55 @@ function MatrxDataTableCore({
6972
7020
  }
6973
7021
  ) : null
6974
7022
  ] }),
6975
- appendQuery ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { "data-matrx-table-footer": true, className: "flex min-h-16 shrink-0 items-center justify-between gap-3 border-t border-border px-3 py-2", "aria-busy": isLoading || isFetching, children: [
6976
- /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { role: "status", "aria-live": "polite", className: "text-xs text-muted-foreground", children: [
6977
- isFetching ? "Loading more rows\u2026" : isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}`,
6978
- scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null
6979
- ] }),
6980
- scrollPagination.error && !appendQuery.pagination.hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { type: "button", variant: "outline", onClick: appendQuery.pagination.refresh, children: "Reload rows" }) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { type: "button", variant: "outline", disabled: isLoading || isFetching, onClick: () => void scrollPagination.requestNextPage(), children: scrollPagination.error ? "Retry" : "Load more" }) : !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
6981
- ] }) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
7023
+ appendQuery ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
7024
+ "div",
7025
+ {
7026
+ "data-matrx-table-footer": true,
7027
+ className: "flex min-h-16 shrink-0 items-center justify-between gap-3 border-t border-border px-3 py-2",
7028
+ "aria-busy": isLoading || isFetching,
7029
+ children: [
7030
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
7031
+ "div",
7032
+ {
7033
+ ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
7034
+ className: "flex min-w-0 flex-1 items-center gap-2 text-xs text-muted-foreground",
7035
+ children: [
7036
+ isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
7037
+ Loader2,
7038
+ {
7039
+ "data-matrx-table-append-loader": true,
7040
+ "aria-hidden": "true",
7041
+ className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
7042
+ }
7043
+ ) : null,
7044
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0", children: [
7045
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
7046
+ scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null
7047
+ ] })
7048
+ ]
7049
+ }
7050
+ ),
7051
+ scrollPagination.error && !appendQuery.pagination.hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
7052
+ Button,
7053
+ {
7054
+ type: "button",
7055
+ variant: "outline",
7056
+ onClick: appendQuery.pagination.refresh,
7057
+ children: "Reload rows"
7058
+ }
7059
+ ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
7060
+ Button,
7061
+ {
7062
+ type: "button",
7063
+ variant: "outline",
7064
+ disabled: isLoading || isFetching,
7065
+ onClick: () => void scrollPagination.requestNextPage(),
7066
+ children: scrollPagination.error ? "Retry" : "Load more"
7067
+ }
7068
+ ) : !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
7069
+ ]
7070
+ }
7071
+ ) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6982
7072
  GenericTablePagination,
6983
7073
  {
6984
7074
  totalItems,