@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/dist/data-table/index.js CHANGED
@@ -6493,12 +6493,13 @@ function MatrxDataTableCore({
6493
6493
  ref: cardsScrollRef,
6494
6494
  "data-matrx-table-cards-scroll": true,
6495
6495
  "aria-busy": isLoading || isFetching,
6496
+ ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
6496
6497
  className: cn(
6497
6498
  "flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
6498
6499
  mobileCardsClass
6499
6500
  ),
6500
6501
  children: [
6501
- isFetching && !isLoading ? /* @__PURE__ */ jsxs24(
6502
+ isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ jsxs24(
6502
6503
  "div",
6503
6504
  {
6504
6505
  role: "status",
@@ -6562,7 +6563,26 @@ function MatrxDataTableCore({
6562
6563
  }
6563
6564
  ) : null
6564
6565
  }) }, id);
6565
- })
6566
+ }),
6567
+ appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsxs24(
6568
+ "div",
6569
+ {
6570
+ "data-matrx-table-append-loading-card": true,
6571
+ role: "status",
6572
+ "aria-live": "polite",
6573
+ 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",
6574
+ children: [
6575
+ /* @__PURE__ */ jsx32(
6576
+ Loader2,
6577
+ {
6578
+ "aria-hidden": "true",
6579
+ className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
6580
+ }
6581
+ ),
6582
+ "Loading more rows\u2026"
6583
+ ]
6584
+ }
6585
+ ) : null
6566
6586
  ]
6567
6587
  }
6568
6588
  ) : null,
@@ -6573,6 +6593,7 @@ function MatrxDataTableCore({
6573
6593
  "data-matrx-table-scroll": true,
6574
6594
  onScroll: updateScrollHint,
6575
6595
  "aria-busy": isLoading || isFetching,
6596
+ ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
6576
6597
  className: cn(
6577
6598
  "relative h-full w-full overflow-auto rounded-md border border-border bg-card",
6578
6599
  mobileCards && tableWithCardsClass,
@@ -6593,7 +6614,7 @@ function MatrxDataTableCore({
6593
6614
  resolve: resolveHierarchyMove
6594
6615
  }
6595
6616
  ) : null,
6596
- isFetching && !isLoading ? /* @__PURE__ */ jsxs24(
6617
+ isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ jsxs24(
6597
6618
  "div",
6598
6619
  {
6599
6620
  role: "status",
@@ -6694,214 +6715,241 @@ function MatrxDataTableCore({
6694
6715
  }),
6695
6716
  showActionsCol && /* @__PURE__ */ jsx32("th", { className: "h-9 w-28 px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Actions" })
6696
6717
  ] }) }),
6697
- /* @__PURE__ */ jsx32("tbody", { children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs24("tr", { className: "border-b border-border/60", children: [
6698
- selection ? /* @__PURE__ */ jsx32("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx32(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
6699
- visibleColumns.map((col) => /* @__PURE__ */ jsx32(
6718
+ /* @__PURE__ */ jsxs24("tbody", { children: [
6719
+ isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs24("tr", { className: "border-b border-border/60", children: [
6720
+ selection ? /* @__PURE__ */ jsx32("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx32(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
6721
+ visibleColumns.map((col) => /* @__PURE__ */ jsx32(
6722
+ "td",
6723
+ {
6724
+ className: cn(
6725
+ "py-2",
6726
+ col.compact ? "px-1" : "px-2",
6727
+ col.mobileHidden && "max-sm:hidden"
6728
+ ),
6729
+ children: /* @__PURE__ */ jsx32(Skeleton, { className: "h-5 w-full" })
6730
+ },
6731
+ columnId(col)
6732
+ )),
6733
+ showActionsCol && /* @__PURE__ */ jsx32("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx32(Skeleton, { className: "ml-auto h-5 w-10" }) })
6734
+ ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32(
6700
6735
  "td",
6701
6736
  {
6702
- className: cn(
6703
- "py-2",
6704
- col.compact ? "px-1" : "px-2",
6705
- col.mobileHidden && "max-sm:hidden"
6706
- ),
6707
- children: /* @__PURE__ */ jsx32(Skeleton, { className: "h-5 w-full" })
6708
- },
6709
- columnId(col)
6710
- )),
6711
- showActionsCol && /* @__PURE__ */ jsx32("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx32(Skeleton, { className: "ml-auto h-5 w-10" }) })
6712
- ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32(
6713
- "td",
6714
- {
6715
- colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
6716
- className: "px-4 py-12 text-center",
6717
- children: /* @__PURE__ */ jsxs24("div", { className: "mx-auto flex max-w-sm flex-col items-center gap-2", children: [
6718
- emptyState?.icon,
6719
- /* @__PURE__ */ jsx32("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
6720
- emptyState?.description ? /* @__PURE__ */ jsx32("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
6721
- emptyState?.action
6722
- ] })
6723
- }
6724
- ) }) : paginated.map((row, index) => {
6725
- const id = getRowId(row);
6726
- const isSelected = selectedId === id;
6727
- const rowEdits = edits[id];
6728
- const displayRow = applyRowEdits(row, rowEdits);
6729
- const isChecked = selectedIdSet.has(id);
6730
- const rowNode = /* @__PURE__ */ jsxs24(
6731
- "tr",
6732
- {
6733
- "data-row-id": id,
6734
- "data-state": isSelected ? "selected" : void 0,
6735
- onClick: (e) => {
6736
- if (e.target.closest("a")) return;
6737
- openRow(row);
6738
- },
6739
- className: cn(
6740
- // Keep the mobile row opaque while the complete row scrolls
6741
- // horizontally. The translucent zebra/hover tints remain
6742
- // desktop-only so densely layered mobile content stays crisp.
6743
- "border-b border-border/60 bg-card transition-colors",
6744
- (detailEnabled || Boolean(onRowOpen)) && "cursor-pointer sm:hover:bg-muted/50",
6745
- isSelected && "bg-muted",
6746
- isChecked && "bg-primary/5",
6747
- highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
6748
- rowClassName?.(row, index),
6749
- draggedRowId === id && "opacity-40",
6750
- zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20"
6751
- ),
6752
- children: [
6753
- selection ? /* @__PURE__ */ jsx32(
6754
- "td",
6755
- {
6756
- className: "px-2 py-1.5 align-middle lg:py-0.5",
6757
- onClick: (e) => e.stopPropagation(),
6758
- children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ jsx32(
6759
- Checkbox,
6760
- {
6761
- className: CHECKBOX_TAP_AREA,
6762
- checked: isChecked,
6763
- "aria-label": `Select this ${selectionNoun}`,
6764
- onClick: (e) => toggleRowSelected(index, e.shiftKey)
6765
- }
6766
- ) : null
6767
- }
6768
- ) : null,
6769
- visibleColumns.map((col, colIdx) => {
6770
- const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
6771
- const display = renderCell(displayRow, col, index);
6772
- const editable = Boolean(
6773
- editEnabled && col.editable && (col.editableIf?.(row) ?? true)
6774
- );
6775
- const dirty = Boolean(
6776
- rowEdits && field in rowEdits
6777
- );
6778
- const cellHref = col.href?.(row) ?? void 0;
6779
- return /* @__PURE__ */ jsx32(
6737
+ colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
6738
+ className: "px-4 py-12 text-center",
6739
+ children: /* @__PURE__ */ jsxs24("div", { className: "mx-auto flex max-w-sm flex-col items-center gap-2", children: [
6740
+ emptyState?.icon,
6741
+ /* @__PURE__ */ jsx32("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
6742
+ emptyState?.description ? /* @__PURE__ */ jsx32("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
6743
+ emptyState?.action
6744
+ ] })
6745
+ }
6746
+ ) }) : paginated.map((row, index) => {
6747
+ const id = getRowId(row);
6748
+ const isSelected = selectedId === id;
6749
+ const rowEdits = edits[id];
6750
+ const displayRow = applyRowEdits(row, rowEdits);
6751
+ const isChecked = selectedIdSet.has(id);
6752
+ const rowNode = /* @__PURE__ */ jsxs24(
6753
+ "tr",
6754
+ {
6755
+ "data-row-id": id,
6756
+ "data-state": isSelected ? "selected" : void 0,
6757
+ onClick: (e) => {
6758
+ if (e.target.closest("a")) return;
6759
+ openRow(row);
6760
+ },
6761
+ className: cn(
6762
+ // Keep the mobile row opaque while the complete row scrolls
6763
+ // horizontally. The translucent zebra/hover tints remain
6764
+ // desktop-only so densely layered mobile content stays crisp.
6765
+ "border-b border-border/60 bg-card transition-colors",
6766
+ (detailEnabled || Boolean(onRowOpen)) && "cursor-pointer sm:hover:bg-muted/50",
6767
+ isSelected && "bg-muted",
6768
+ isChecked && "bg-primary/5",
6769
+ highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
6770
+ rowClassName?.(row, index),
6771
+ draggedRowId === id && "opacity-40",
6772
+ zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20"
6773
+ ),
6774
+ children: [
6775
+ selection ? /* @__PURE__ */ jsx32(
6780
6776
  "td",
6781
6777
  {
6782
- className: cn(
6783
- "py-1.5 align-middle lg:py-0.5",
6784
- col.compact ? "px-1" : "px-2",
6785
- // nowrap (NOT truncate — truncate clips the cell and
6786
- // defeats w-max, killing the horizontal scroll).
6787
- "max-sm:whitespace-nowrap",
6788
- col.mobileHidden && "max-sm:hidden",
6789
- col.width !== void 0 && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
6790
- col.className,
6791
- col.align === "center" && "text-center",
6792
- col.align === "right" && "text-right"
6793
- ),
6794
- style: columnWidthVar(col.width),
6795
- children: /* @__PURE__ */ jsxs24(
6796
- "div",
6797
- {
6798
- className: cn(
6799
- colIdx === 0 && hierarchy && "flex min-w-0 items-center"
6800
- ),
6801
- children: [
6802
- colIdx === 0 && hierarchy ? /* @__PURE__ */ jsx32(
6803
- HierarchyDragHandle,
6804
- {
6805
- id,
6806
- label: hierarchy.itemLabel?.(row) ?? "row",
6807
- disabled: !(hierarchy.canReparent?.(row) ?? true)
6808
- }
6809
- ) : null,
6810
- /* @__PURE__ */ jsx32(
6811
- "div",
6812
- {
6813
- "data-matrx-cell-content": true,
6814
- 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]",
6815
- children: editable && col.editable ? /* @__PURE__ */ jsx32(
6816
- EditableTableCell,
6817
- {
6818
- value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
6819
- editType: col.editable,
6820
- ...col.editOptions === void 0 ? {} : { editOptions: col.editOptions },
6821
- display,
6822
- dirty,
6823
- onCommit: (next) => commitCell(id, field, next),
6824
- ...cellHref === void 0 ? {} : { href: cellHref },
6825
- ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
6826
- }
6827
- ) : cellHref ? /* @__PURE__ */ jsx32(
6828
- Link,
6829
- {
6830
- href: cellHref,
6831
- onClick: (e) => e.stopPropagation(),
6832
- className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
6833
- children: display
6834
- }
6835
- ) : display
6836
- }
6837
- )
6838
- ]
6839
- }
6840
- )
6841
- },
6842
- columnId(col)
6843
- );
6844
- }),
6845
- showActionsCol && /* @__PURE__ */ jsx32("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ jsxs24(
6846
- "div",
6847
- {
6848
- className: "inline-flex items-center justify-end gap-0.5",
6849
- onClick: (e) => e.stopPropagation(),
6850
- children: [
6851
- showRowCopy && copy ? /* @__PURE__ */ jsx32(
6852
- TableRowCopyControl,
6778
+ className: "px-2 py-1.5 align-middle lg:py-0.5",
6779
+ onClick: (e) => e.stopPropagation(),
6780
+ children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ jsx32(
6781
+ Checkbox,
6853
6782
  {
6854
- size: "xs",
6855
- copy,
6856
- row: displayRow
6857
- }
6858
- ) : null,
6859
- rowActions?.(displayRow, {
6860
- closeDetail: () => setSelectedId(null),
6861
- openDetail: () => openDetail(displayRow),
6862
- openWindow: () => openWindow(displayRow),
6863
- closeWindow,
6864
- hasPendingEdits: Boolean(rowEdits),
6865
- discardPendingEdits: () => discardRowEdits(id)
6866
- }),
6867
- windowEnabled ? /* @__PURE__ */ jsx32(
6868
- Button,
6869
- {
6870
- type: "button",
6871
- variant: "ghost",
6872
- size: "icon",
6873
- className: "h-11 w-11 text-muted-foreground hover:text-foreground lg:h-5 lg:w-5 [&_svg]:size-3",
6874
- "aria-label": opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6875
- title: opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6876
- onClick: (e) => {
6877
- e.stopPropagation();
6878
- if (opensWindowOnRowClick) {
6879
- openDetail(row);
6880
- } else {
6881
- openWindow(row);
6882
- }
6883
- },
6884
- children: opensWindowOnRowClick ? /* @__PURE__ */ jsx32(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx32(PanelRight, { className: "h-3.5 w-3.5" })
6783
+ className: CHECKBOX_TAP_AREA,
6784
+ checked: isChecked,
6785
+ "aria-label": `Select this ${selectionNoun}`,
6786
+ onClick: (e) => toggleRowSelected(index, e.shiftKey)
6885
6787
  }
6886
6788
  ) : null
6887
- ]
6888
- }
6889
- ) })
6890
- ]
6891
- },
6892
- id
6893
- );
6894
- const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
6895
- return hierarchy ? /* @__PURE__ */ jsx32(
6896
- HierarchyDroppableRow,
6789
+ }
6790
+ ) : null,
6791
+ visibleColumns.map((col, colIdx) => {
6792
+ const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
6793
+ const display = renderCell(displayRow, col, index);
6794
+ const editable = Boolean(
6795
+ editEnabled && col.editable && (col.editableIf?.(row) ?? true)
6796
+ );
6797
+ const dirty = Boolean(
6798
+ rowEdits && field in rowEdits
6799
+ );
6800
+ const cellHref = col.href?.(row) ?? void 0;
6801
+ return /* @__PURE__ */ jsx32(
6802
+ "td",
6803
+ {
6804
+ className: cn(
6805
+ "py-1.5 align-middle lg:py-0.5",
6806
+ col.compact ? "px-1" : "px-2",
6807
+ // nowrap (NOT truncate — truncate clips the cell and
6808
+ // defeats w-max, killing the horizontal scroll).
6809
+ "max-sm:whitespace-nowrap",
6810
+ col.mobileHidden && "max-sm:hidden",
6811
+ col.width !== void 0 && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
6812
+ col.className,
6813
+ col.align === "center" && "text-center",
6814
+ col.align === "right" && "text-right"
6815
+ ),
6816
+ style: columnWidthVar(col.width),
6817
+ children: /* @__PURE__ */ jsxs24(
6818
+ "div",
6819
+ {
6820
+ className: cn(
6821
+ colIdx === 0 && hierarchy && "flex min-w-0 items-center"
6822
+ ),
6823
+ children: [
6824
+ colIdx === 0 && hierarchy ? /* @__PURE__ */ jsx32(
6825
+ HierarchyDragHandle,
6826
+ {
6827
+ id,
6828
+ label: hierarchy.itemLabel?.(row) ?? "row",
6829
+ disabled: !(hierarchy.canReparent?.(row) ?? true)
6830
+ }
6831
+ ) : null,
6832
+ /* @__PURE__ */ jsx32(
6833
+ "div",
6834
+ {
6835
+ "data-matrx-cell-content": true,
6836
+ 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]",
6837
+ children: editable && col.editable ? /* @__PURE__ */ jsx32(
6838
+ EditableTableCell,
6839
+ {
6840
+ value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
6841
+ editType: col.editable,
6842
+ ...col.editOptions === void 0 ? {} : { editOptions: col.editOptions },
6843
+ display,
6844
+ dirty,
6845
+ onCommit: (next) => commitCell(id, field, next),
6846
+ ...cellHref === void 0 ? {} : { href: cellHref },
6847
+ ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
6848
+ }
6849
+ ) : cellHref ? /* @__PURE__ */ jsx32(
6850
+ Link,
6851
+ {
6852
+ href: cellHref,
6853
+ onClick: (e) => e.stopPropagation(),
6854
+ className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
6855
+ children: display
6856
+ }
6857
+ ) : display
6858
+ }
6859
+ )
6860
+ ]
6861
+ }
6862
+ )
6863
+ },
6864
+ columnId(col)
6865
+ );
6866
+ }),
6867
+ showActionsCol && /* @__PURE__ */ jsx32("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ jsxs24(
6868
+ "div",
6869
+ {
6870
+ className: "inline-flex items-center justify-end gap-0.5",
6871
+ onClick: (e) => e.stopPropagation(),
6872
+ children: [
6873
+ showRowCopy && copy ? /* @__PURE__ */ jsx32(
6874
+ TableRowCopyControl,
6875
+ {
6876
+ size: "xs",
6877
+ copy,
6878
+ row: displayRow
6879
+ }
6880
+ ) : null,
6881
+ rowActions?.(displayRow, {
6882
+ closeDetail: () => setSelectedId(null),
6883
+ openDetail: () => openDetail(displayRow),
6884
+ openWindow: () => openWindow(displayRow),
6885
+ closeWindow,
6886
+ hasPendingEdits: Boolean(rowEdits),
6887
+ discardPendingEdits: () => discardRowEdits(id)
6888
+ }),
6889
+ windowEnabled ? /* @__PURE__ */ jsx32(
6890
+ Button,
6891
+ {
6892
+ type: "button",
6893
+ variant: "ghost",
6894
+ size: "icon",
6895
+ className: "h-11 w-11 text-muted-foreground hover:text-foreground lg:h-5 lg:w-5 [&_svg]:size-3",
6896
+ "aria-label": opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6897
+ title: opensWindowOnRowClick ? "Open in side panel" : "Open in window",
6898
+ onClick: (e) => {
6899
+ e.stopPropagation();
6900
+ if (opensWindowOnRowClick) {
6901
+ openDetail(row);
6902
+ } else {
6903
+ openWindow(row);
6904
+ }
6905
+ },
6906
+ children: opensWindowOnRowClick ? /* @__PURE__ */ jsx32(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx32(PanelRight, { className: "h-3.5 w-3.5" })
6907
+ }
6908
+ ) : null
6909
+ ]
6910
+ }
6911
+ ) })
6912
+ ]
6913
+ },
6914
+ id
6915
+ );
6916
+ const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
6917
+ return hierarchy ? /* @__PURE__ */ jsx32(
6918
+ HierarchyDroppableRow,
6919
+ {
6920
+ id,
6921
+ disabled: !canDropOn(row),
6922
+ children: wrappedRow
6923
+ },
6924
+ id
6925
+ ) : /* @__PURE__ */ jsx32(Fragment4, { children: wrappedRow }, id);
6926
+ }),
6927
+ appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsx32("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ jsx32(
6928
+ "td",
6897
6929
  {
6898
- id,
6899
- disabled: !canDropOn(row),
6900
- children: wrappedRow
6901
- },
6902
- id
6903
- ) : /* @__PURE__ */ jsx32(Fragment4, { children: wrappedRow }, id);
6904
- }) }),
6930
+ colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
6931
+ 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",
6932
+ children: /* @__PURE__ */ jsxs24(
6933
+ "div",
6934
+ {
6935
+ role: "status",
6936
+ "aria-live": "polite",
6937
+ 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",
6938
+ children: [
6939
+ /* @__PURE__ */ jsx32(
6940
+ Loader2,
6941
+ {
6942
+ "aria-hidden": "true",
6943
+ className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
6944
+ }
6945
+ ),
6946
+ "Loading more rows\u2026"
6947
+ ]
6948
+ }
6949
+ )
6950
+ }
6951
+ ) }) : null
6952
+ ] }),
6905
6953
  footerRows.length > 0 ? /* @__PURE__ */ jsx32("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ jsxs24("tr", { children: [
6906
6954
  selection ? /* @__PURE__ */ jsx32("td", { className: "px-2 py-2" }) : null,
6907
6955
  visibleColumns.map((column) => /* @__PURE__ */ jsx32(
@@ -6954,13 +7002,55 @@ function MatrxDataTableCore({
6954
7002
  }
6955
7003
  ) : null
6956
7004
  ] }),
6957
- appendQuery ? /* @__PURE__ */ jsxs24("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: [
6958
- /* @__PURE__ */ jsxs24("div", { role: "status", "aria-live": "polite", className: "text-xs text-muted-foreground", children: [
6959
- isFetching ? "Loading more rows\u2026" : isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}`,
6960
- scrollPagination.error ? /* @__PURE__ */ jsx32("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null
6961
- ] }),
6962
- scrollPagination.error && !appendQuery.pagination.hasNextPage ? /* @__PURE__ */ jsx32(Button, { type: "button", variant: "outline", onClick: appendQuery.pagination.refresh, children: "Reload rows" }) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ jsx32(Button, { type: "button", variant: "outline", disabled: isLoading || isFetching, onClick: () => void scrollPagination.requestNextPage(), children: scrollPagination.error ? "Retry" : "Load more" }) : !isLoading ? /* @__PURE__ */ jsx32("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
6963
- ] }) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ jsx32("div", { className: "shrink-0", children: /* @__PURE__ */ jsx32(
7005
+ appendQuery ? /* @__PURE__ */ jsxs24(
7006
+ "div",
7007
+ {
7008
+ "data-matrx-table-footer": true,
7009
+ className: "flex min-h-16 shrink-0 items-center justify-between gap-3 border-t border-border px-3 py-2",
7010
+ "aria-busy": isLoading || isFetching,
7011
+ children: [
7012
+ /* @__PURE__ */ jsxs24(
7013
+ "div",
7014
+ {
7015
+ ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
7016
+ className: "flex min-w-0 flex-1 items-center gap-2 text-xs text-muted-foreground",
7017
+ children: [
7018
+ isLoading ? /* @__PURE__ */ jsx32(
7019
+ Loader2,
7020
+ {
7021
+ "data-matrx-table-append-loader": true,
7022
+ "aria-hidden": "true",
7023
+ className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
7024
+ }
7025
+ ) : null,
7026
+ /* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
7027
+ /* @__PURE__ */ jsx32("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()}`}` }),
7028
+ scrollPagination.error ? /* @__PURE__ */ jsx32("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null
7029
+ ] })
7030
+ ]
7031
+ }
7032
+ ),
7033
+ scrollPagination.error && !appendQuery.pagination.hasNextPage ? /* @__PURE__ */ jsx32(
7034
+ Button,
7035
+ {
7036
+ type: "button",
7037
+ variant: "outline",
7038
+ onClick: appendQuery.pagination.refresh,
7039
+ children: "Reload rows"
7040
+ }
7041
+ ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ jsx32(
7042
+ Button,
7043
+ {
7044
+ type: "button",
7045
+ variant: "outline",
7046
+ disabled: isLoading || isFetching,
7047
+ onClick: () => void scrollPagination.requestNextPage(),
7048
+ children: scrollPagination.error ? "Retry" : "Load more"
7049
+ }
7050
+ ) : !isLoading ? /* @__PURE__ */ jsx32("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
7051
+ ]
7052
+ }
7053
+ ) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ jsx32("div", { className: "shrink-0", children: /* @__PURE__ */ jsx32(
6964
7054
  GenericTablePagination,
6965
7055
  {
6966
7056
  totalItems,