@ai-matrx/design-system 0.17.3 → 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 +12 -0
  2. package/dist/data-table/index.cjs +252 -205
  3. package/dist/data-table/index.cjs.map +1 -1
  4. package/dist/data-table/index.js +252 -205
  5. package/dist/data-table/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/data-table/index.js CHANGED
@@ -6493,6 +6493,7 @@ 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
@@ -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,
@@ -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",
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,
6797
6782
  {
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,
6853
- {
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(
@@ -6964,11 +7012,10 @@ function MatrxDataTableCore({
6964
7012
  /* @__PURE__ */ jsxs24(
6965
7013
  "div",
6966
7014
  {
6967
- role: "status",
6968
- "aria-live": "polite",
7015
+ ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
6969
7016
  className: "flex min-w-0 flex-1 items-center gap-2 text-xs text-muted-foreground",
6970
7017
  children: [
6971
- isLoading || isFetching ? /* @__PURE__ */ jsx32(
7018
+ isLoading ? /* @__PURE__ */ jsx32(
6972
7019
  Loader2,
6973
7020
  {
6974
7021
  "data-matrx-table-append-loader": true,
@@ -6977,7 +7024,7 @@ function MatrxDataTableCore({
6977
7024
  }
6978
7025
  ) : null,
6979
7026
  /* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
6980
- /* @__PURE__ */ jsx32("p", { className: "break-words font-medium text-foreground", children: isFetching ? "Loading more rows\u2026" : isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
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()}`}` }),
6981
7028
  scrollPagination.error ? /* @__PURE__ */ jsx32("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null
6982
7029
  ] })
6983
7030
  ]