@ai-matrx/design-system 0.20.9 → 0.20.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.20.10
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.20.9..npm/design-system/v0.20.10 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.20.9
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/data-table/index.cjs

@@ -1398,6 +1398,35 @@ function useProgressiveTableRows({
       onPageAdvance(nextPage);
     }
   };
+  const warnedUnderfill = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!hasMore) return;
+    const surfaces = containers.map((entry) => entry && "current" in entry ? entry.current : entry).filter((entry) => entry !== null);
+    const fillViewport = () => {
+      for (const surface of surfaces) {
+        if (surface.clientHeight <= 0 || surface.getClientRects().length === 0) continue;
+        const content = surface.querySelector("table") ?? surface.lastElementChild;
+        if (!content) continue;
+        const bounds = surface.getBoundingClientRect();
+        const contentBottom = content.getBoundingClientRect().bottom - bounds.top + surface.scrollTop;
+        if (contentBottom <= 0 || contentBottom >= surface.clientHeight - 1) continue;
+        if (warnedUnderfill.current !== progressionKey) {
+          warnedUnderfill.current = progressionKey;
+          console.warn("[MatrxDataTable] The initial local batch leaves unused table height while more rows are already loaded. Revealing additional rows to fill the viewport; this is not a network fetch.");
+        }
+        setProgression((current) => {
+          if (current.key !== progressionKey) return current;
+          const nextCount = Math.min(rows.length, visibleCount + pageSize);
+          return current.shownCount >= nextCount ? current : { ...current, shownCount: nextCount };
+        });
+        break;
+      }
+    };
+    fillViewport();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(fillViewport);
+    for (const surface of surfaces) observer?.observe(surface);
+    return () => observer?.disconnect();
+  }, [containers, hasMore, pageSize, progressionKey, rows.length, visibleCount]);
   const scroll = useScrollPagination({
     containers,
     queryKey: progressionKey,
@@ -2002,6 +2031,7 @@ function GenericTablePagination({
   const startItem = totalItems === 0 ? 0 : progressive ? 1 : (currentPage - 1) * effectiveItemsPerPage + 1;
   const endItem = Math.min(progressive?.shownCount ?? currentPage * effectiveItemsPerPage, totalItems);
   const defaultLabelFormat = (start, end, total) => {
+    if (progressive) return `${end} shown / ${total} loaded`;
     return compact ? `${start}-${end} of ${total}` : `Showing ${start} to ${end} of ${total} entries`;
   };
   const formatLabel = labelFormat || defaultLabelFormat;
@@ -2031,7 +2061,7 @@ function GenericTablePagination({
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 SelectTrigger,
                 {
-                  "aria-label": "Rows per page",
+                  "aria-label": progressive ? "Rows per batch" : "Rows per page",
                   className: cn(
                     "focus:ring-0",
                     compact ? "h-11 min-w-20 rounded-md border border-border bg-card px-3 text-sm hover:bg-accent [&_svg]:size-5" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
@@ -2053,13 +2083,7 @@ function GenericTablePagination({
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
         children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: [
-            startItem,
-            "-",
-            endItem,
-            " / ",
-            totalItems
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: progressive ? `${endItem}/${totalItems} loaded` : `${startItem}-${endItem} / ${totalItems}` }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "span",
             {
@@ -10697,7 +10721,7 @@ function MatrxDataTableCore({
                           onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
                           children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
                         }
-                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex shrink-0 gap-0", children: [
+                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap gap-0", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                           Button,
                           {