@marktiderman/genesis-ui 2.0.0 → 2.1.0

package/dist/components/data/index.js

@@ -26,7 +26,7 @@ import '../../chunk-F47U5KNW.js';
 import { DetailPage } from '../../chunk-AFZ76Q26.js';
 import '../../chunk-D2LIXA2Y.js';
 import '../../chunk-AVFZ4P4B.js';
-import { titleCase, useResourcePage } from '../../chunk-Q4I4SFBD.js';
+import { titleCase, useResourcePage } from '../../chunk-GDFNAHI4.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
 import '../../chunk-FTTNGGLA.js';
 import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
@@ -40,7 +40,7 @@ import { useKeyboardNavigation } from '../../chunk-YJ6MPS6U.js';
 import { useIsMobile } from '../../chunk-M7AU5DDM.js';
 import { AlertTriangle, RefreshCw, ChevronDown, Check, Search, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Plus } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { formatDistanceToNow, format } from 'date-fns';
 import { useFieldArray, Controller, useWatch } from 'react-hook-form';
 import { useResource, useWizard, useResourceForm, useOne, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
@@ -2424,6 +2424,24 @@ function ResourcePage(props) {
     searchPlaceholder,
     initialFilters,
     onFiltersChange,
+    page: pageProp,
+    perPage: perPageProp,
+    onPageChange,
+    onPerPageChange,
+    onSortChange,
+    onSearchChange,
+    savedViews,
+    onLoadView,
+    onSaveView,
+    onDeleteView,
+    canSaveViews,
+    columnVisibility,
+    columnVisibilityKey,
+    resizableColumns,
+    resizeKey,
+    stickyHeader,
+    stickyFirstColumn,
+    pageSizeOptions,
     onCreate,
     onEdit,
     onDelete,
@@ -2447,8 +2465,10 @@ function ResourcePage(props) {
     viewSettingsKey: viewSettingsKeyProp
   } = props;
   const isClientMode = !!resourceName;
+  const isServerControlled = pageProp !== void 0 || perPageProp !== void 0 || onPageChange !== void 0 || onPerPageChange !== void 0 || onSortChange !== void 0 || onSearchChange !== void 0;
   const viewSettingsKey = viewSettingsKeyProp ?? resourceName ?? title.toLowerCase().replace(/\s+/g, "-");
   const { settings, updateSetting } = useViewSettings(viewSettingsKey);
+  const effectivePageSize = perPageProp ?? settings.pageSize;
   const resourceHook = useResource(
     resourceName ?? "__noop__",
     isClientMode ? resourceOptions : { enabled: false }
@@ -2469,7 +2489,8 @@ function ResourcePage(props) {
     defaultView,
     detail,
     titleField: titleFieldProp,
-    subtitleField: subtitleFieldProp
+    subtitleField: subtitleFieldProp,
+    controlled: isServerControlled
   });
   const actions = useMemo(() => {
     if (isClientMode) {
@@ -2481,15 +2502,24 @@ function ResourcePage(props) {
     }
     return {
       update: async () => {
-        throw new Error("ResourceActions.update not available in server-data mode");
+        throw new Error(
+          "ResourceActions.update not available in server-data mode"
+        );
       },
       remove: async () => {
-        throw new Error("ResourceActions.remove not available in server-data mode");
+        throw new Error(
+          "ResourceActions.remove not available in server-data mode"
+        );
       },
       refetch: () => {
       }
     };
-  }, [isClientMode, resourceHook.update, resourceHook.remove, resourceHook.list]);
+  }, [
+    isClientMode,
+    resourceHook.update,
+    resourceHook.remove,
+    resourceHook.list
+  ]);
   const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
   const handleToggleSelect = useCallback((id) => {
     setSelectedIds((prev) => {
@@ -2539,15 +2569,101 @@ function ResourcePage(props) {
     [useBuiltInEdit, onEdit]
   );
   const tableColumns = useMemo(() => {
-    if (!isClientMode) return page.tableColumns;
-    return page.columns.map((col) => ({
+    const base = isClientMode ? page.columns.map((col) => ({
       key: col.key,
       header: col.header ?? col.key,
       sortable: col.sortable ?? true,
       hideBelow: col.hideBelow,
       render: col.render ? (item, value) => col.render(item, value, actions) : void 0
-    }));
-  }, [isClientMode, page.columns, page.tableColumns, actions]);
+    })) : page.tableColumns;
+    if (!isServerControlled) return base;
+    return base.map((col) => ({ ...col, sortable: false }));
+  }, [
+    isClientMode,
+    isServerControlled,
+    page.columns,
+    page.tableColumns,
+    actions
+  ]);
+  const currentPage = pageProp ?? 1;
+  const handleSearchChange = useCallback(
+    (value) => {
+      page.filterConfig.onSearchChange(value);
+      if (!isServerControlled) return;
+      onSearchChange?.(value);
+      if (currentPage !== 1) onPageChange?.(1);
+    },
+    [
+      page.filterConfig,
+      isServerControlled,
+      onSearchChange,
+      onPageChange,
+      currentPage
+    ]
+  );
+  const handleSortSelect = useCallback(
+    (value) => {
+      page.filterConfig.onSortChange(value);
+      if (!isServerControlled) return;
+      const [field, order] = value.split(":");
+      onSortChange?.(
+        field && (order === "asc" || order === "desc") ? { field, order } : null
+      );
+      onPageChange?.(1);
+    },
+    [page.filterConfig, isServerControlled, onSortChange, onPageChange]
+  );
+  const handleClearFilters = useCallback(() => {
+    page.clearFilters();
+    if (!isServerControlled) return;
+    onSearchChange?.("");
+    onSortChange?.(null);
+    onPageChange?.(1);
+  }, [page, isServerControlled, onSearchChange, onSortChange, onPageChange]);
+  const handleStatusChange = useCallback(
+    (values) => {
+      page.filterConfig.statusChips?.onChange(values);
+      if (!isServerControlled) return;
+      if (currentPage !== 1) onPageChange?.(1);
+    },
+    [page.filterConfig, isServerControlled, onPageChange, currentPage]
+  );
+  const statusChipsConfig = useMemo(() => {
+    const base = page.filterConfig.statusChips;
+    if (!base) return void 0;
+    return { ...base, onChange: handleStatusChange };
+  }, [page.filterConfig.statusChips, handleStatusChange]);
+  const handlePageSizeChange = useCallback(
+    (size) => {
+      updateSetting("pageSize", size);
+      onPerPageChange?.(size);
+      if (isServerControlled) onPageChange?.(1);
+    },
+    [updateSetting, onPerPageChange, isServerControlled, onPageChange]
+  );
+  const missingPerPage = isServerControlled && !!onPageChange && perPageProp === void 0;
+  const missingTotal = isServerControlled && !!onPageChange && totalProp === void 0;
+  const pagerMisconfigured = missingPerPage || missingTotal;
+  const missingPagerProps = [
+    ...missingPerPage ? ["perPage"] : [],
+    ...missingTotal ? ["total"] : []
+  ];
+  const loggedMissingPerPageRef = useRef(false);
+  useEffect(() => {
+    if (!pagerMisconfigured) return;
+    if (loggedMissingPerPageRef.current) return;
+    loggedMissingPerPageRef.current = true;
+    console.error(
+      `ResourcePage: ${missingPagerProps.map((name) => `\`${name}\``).join(" and ")} ${missingPagerProps.length > 1 ? "are" : "is"} required when \`onPageChange\` is supplied.`
+    );
+  }, [pagerMisconfigured]);
+  const pagerPageSize = perPageProp ?? effectivePageSize;
+  const totalPages = Math.max(
+    1,
+    Math.ceil(displayTotal / Math.max(1, pagerPageSize))
+  );
+  const rangeFrom = page.data.length === 0 ? 0 : (currentPage - 1) * pagerPageSize + 1;
+  const rangeTo = rangeFrom === 0 ? 0 : rangeFrom + page.data.length - 1;
   const detailTitle = page.selectedItem ? String(
     page.selectedItem[page.titleField] ?? ""
   ) : "";
@@ -2694,25 +2810,30 @@ function ResourcePage(props) {
       onRetry: isClientMode ? () => resourceHook.list.refetch() : void 0,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
-      pageSize: settings.pageSize,
-      onPageSizeChange: (size) => updateSetting("pageSize", size),
+      pageSize: effectivePageSize,
+      onPageSizeChange: handlePageSizeChange,
       density: settings.density,
       onDensityChange: (d) => updateSetting("density", d),
       createAction,
       hasActiveFilters: page.hasActiveFilters,
-      onClearFilters: page.clearFilters,
+      onClearFilters: handleClearFilters,
       emptyAction: emptyState,
       filters: /* @__PURE__ */ jsx(
         DataFilters,
         {
           search: page.filterConfig.search,
-          onSearchChange: page.filterConfig.onSearchChange,
+          onSearchChange: handleSearchChange,
           searchPlaceholder,
           sort: page.filterConfig.sort,
-          onSortChange: page.filterConfig.onSortChange,
+          onSortChange: handleSortSelect,
           sortOptions: page.filterConfig.sortOptions,
-          statusChips: page.filterConfig.statusChips,
-          onClearAll: page.hasActiveFilters ? page.clearFilters : void 0
+          statusChips: statusChipsConfig,
+          savedViews,
+          onLoadView,
+          onSaveView,
+          onDeleteView,
+          canSaveViews,
+          onClearAll: page.hasActiveFilters ? handleClearFilters : void 0
         }
       ),
       children: [
@@ -2754,13 +2875,108 @@ function ResourcePage(props) {
                 onToggleSelect: handleToggleSelect,
                 onToggleAll: handleToggleAll,
                 density: settings.density,
-                pageSize: settings.pageSize
+                pageSize: effectivePageSize,
+                pageSizeOptions,
+                columnVisibility,
+                columnVisibilityKey,
+                resizableColumns,
+                resizeKey,
+                stickyHeader,
+                stickyFirstColumn,
+                pagination: isServerControlled ? false : void 0
               }
             ),
             renderCard: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultCard(item),
             renderListItem: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultListItem(item)
           }
         ),
+        isServerControlled && onPageChange && pagerMisconfigured && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+            "data-testid": "resource-page-pagination-error",
+            role: "alert",
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Pagination unavailable:",
+                " ",
+                missingPagerProps.map((name, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  index > 0 ? " and " : null,
+                  /* @__PURE__ */ jsx("code", { children: name })
+                ] }, name)),
+                " ",
+                missingPagerProps.length > 1 ? "are" : "is",
+                " required when",
+                " ",
+                /* @__PURE__ */ jsx("code", { children: "onPageChange" }),
+                " is supplied."
+              ] })
+            ]
+          }
+        ),
+        isServerControlled && onPageChange && !pagerMisconfigured && /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            "aria-label": "Pagination",
+            className: "flex flex-col sm:flex-row items-center justify-between gap-2 px-3 py-2 text-sm",
+            "data-testid": "resource-page-pagination",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-muted-foreground",
+                  "data-testid": "resource-page-range",
+                  "aria-live": "polite",
+                  children: displayTotal === 0 ? "No records" : `Showing ${rangeFrom}-${rangeTo} of ${displayTotal}`
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    disabled: currentPage <= 1,
+                    onClick: () => onPageChange(currentPage - 1),
+                    testID: "resource-page-prev",
+                    children: [
+                      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1", "aria-hidden": "true" }),
+                      "Previous"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "text-muted-foreground",
+                    "data-testid": "resource-page-indicator",
+                    children: [
+                      "Page ",
+                      currentPage,
+                      " of ",
+                      totalPages
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    disabled: currentPage >= totalPages,
+                    onClick: () => onPageChange(currentPage + 1),
+                    testID: "resource-page-next",
+                    children: [
+                      "Next",
+                      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 ml-1", "aria-hidden": "true" })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         (detail === "panel" || detail === "modal") && /* @__PURE__ */ jsx(
           DetailPanel,
           {