@open-mercato/ui 0.7.0 → 0.7.1-develop.7102.1.b41f7e3e51

package/dist/backend/DataTable.js

@@ -1853,8 +1853,11 @@ function DataTable({
   const paginationNode = React.useMemo(() => {
     if (!pagination || pagination.total === 0) return null;
     const { page, totalPages, onPageChange, durationMs, cacheStatus } = pagination;
+    const totalIsCapped = pagination.totalIsCapped === true;
+    const pageIsFull = data.length >= pagination.pageSize;
     const startItem = (page - 1) * pagination.pageSize + 1;
-    const endItem = Math.min(page * pagination.pageSize, pagination.total);
+    const endItem = totalIsCapped ? Math.max(startItem, startItem + data.length - 1) : Math.min(page * pagination.pageSize, pagination.total);
+    const pageIsEmpty = data.length === 0;
     const effectiveDuration = typeof durationMs === "number" && Number.isFinite(durationMs) && durationMs >= 0 ? durationMs : measuredDurationMs ?? void 0;
     const durationLabel = showQueryTime ? formatDurationLabel(effectiveDuration) : "";
     const normalizedCacheStatus = cacheStatus === "hit" || cacheStatus === "miss" ? cacheStatus : null;
@@ -1887,6 +1890,8 @@ function DataTable({
           page,
           pageSize: pagination.pageSize,
           total: pagination.total,
+          totalIsCapped,
+          hasNextPage: totalIsCapped ? pageIsFull : void 0,
           onPageChange: (next) => {
             onPageChange(next);
             scrollTableIntoView();
@@ -1896,14 +1901,22 @@ function DataTable({
             scrollTableIntoView();
           } : void 0,
           pageSizeOptions,
-          formatPageInfo: () => durationLabel ? t("ui.dataTable.pagination.resultsWithDuration", "Showing {start} to {end} of {total} results in {duration}", { start: startItem, end: endItem, total: pagination.total, duration: durationLabel }) : t("ui.dataTable.pagination.results", "Showing {start} to {end} of {total} results", { start: startItem, end: endItem, total: pagination.total }),
+          formatPageInfo: () => {
+            if (totalIsCapped) {
+              if (pageIsEmpty) {
+                return t("ui.dataTable.pagination.resultsCappedNoRows", "No further results past {total}", { total: pagination.total });
+              }
+              return durationLabel ? t("ui.dataTable.pagination.resultsCappedWithDuration", "Showing {start} to {end} of {total}+ results in {duration}", { start: startItem, end: endItem, total: pagination.total, duration: durationLabel }) : t("ui.dataTable.pagination.resultsCapped", "Showing {start} to {end} of {total}+ results", { start: startItem, end: endItem, total: pagination.total });
+            }
+            return durationLabel ? t("ui.dataTable.pagination.resultsWithDuration", "Showing {start} to {end} of {total} results in {duration}", { start: startItem, end: endItem, total: pagination.total, duration: durationLabel }) : t("ui.dataTable.pagination.results", "Showing {start} to {end} of {total} results", { start: startItem, end: endItem, total: pagination.total });
+          },
           formatPageSizeLabel: (size) => `${size} ${t("ui.dataTable.pagination.perPage", "per page")}`,
           "aria-label": t("ui.dataTable.pagination.navAriaLabel", "Table pagination"),
           className: "flex-1"
         }
       )
     ] });
-  }, [pagination, showQueryTime, measuredDurationMs, scrollTableIntoView, t]);
+  }, [pagination, data, showQueryTime, measuredDurationMs, scrollTableIntoView, t]);
   const resolvedEntityIds = React.useMemo(() => {
     if (Array.isArray(entityIds) && entityIds.length) {
       const dedup = /* @__PURE__ */ new Set();
@@ -2364,7 +2377,7 @@ function DataTable({
   const shouldRenderHeader = hasTitle || renderToolbarInline || shouldRenderActionsWrapper || shouldRenderToolbarBelow;
   const containerClassName = embedded ? "" : "rounded-lg border bg-card mx-1 sm:mx-2";
   const headerWrapperClassName = embedded ? "pb-3" : "px-4 py-3 border-b";
-  const headerContentClassName = "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between";
+  const headerContentClassName = "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between";
   const toolbarWrapperClassName = embedded ? "mt-2" : "mt-3 pt-3 border-t";
   const tableScrollWrapperClassName = embedded ? "" : "overflow-auto";
   const virtualScrollRef = React.useRef(null);
@@ -2398,8 +2411,8 @@ function DataTable({
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClassName, "data-component-handle": resolvedReplacementHandle, children: [
     shouldRenderHeader && /* @__PURE__ */ jsxs("div", { className: headerWrapperClassName, children: [
       (hasTitle || shouldRenderActionsWrapper || renderToolbarInline) && /* @__PURE__ */ jsxs("div", { className: headerContentClassName, children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: renderToolbarInline ? builtToolbar : titleContent }),
-        shouldRenderActionsWrapper ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 min-h-[2.25rem]", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 sm:basis-48", children: renderToolbarInline ? builtToolbar : titleContent }),
+        shouldRenderActionsWrapper ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 min-h-[2.25rem] sm:ml-auto sm:justify-end", children: [
           refreshButtonConfig ? /* @__PURE__ */ jsxs(
             Button,
             {
@@ -2564,7 +2577,7 @@ function DataTable({
                       return;
                     }
                     if (onRowClick) {
-                      onRowClick(row.original);
+                      onRowClick(row.original, e);
                     } else if (defaultRowAction) {
                       if (defaultRowAction.href) {
                         router.push(defaultRowAction.href);