@marktiderman/genesis-ui 2.1.0 → 2.2.0

package/dist/components/data/index.d.ts

@@ -167,11 +167,34 @@ interface DataGridProps<T> {
 }
 declare function DataGrid<T>({ items, viewMode, batchSize, gridCols, renderCard, renderTable, renderListItem, staggerAnimation, getKey, focusedIndex, keyboardContainerRef, }: DataGridProps<T>): React.JSX.Element;
 
+/**
+ * One button in the bulk action bar.
+ *
+ * @stability Stable
+ */
 interface BulkAction {
     label: string;
     icon: LucideIcon;
     onClick: () => void;
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    /**
+     * Makes this action inert: it renders with the Button primitive's native
+     * `disabled` attribute, so it is neither clickable nor focusable, and it
+     * picks up the disabled styling.
+     *
+     * The case this exists for is an in-flight bulk mutation. A consumer that
+     * fires a move/duplicate/delete over the selected ids wants every bulk
+     * action dead until it settles, so a user cannot double-fire a destructive
+     * operation on the same selection. Without this field the only guard
+     * available is an early return inside `onClick` — which does stop the
+     * second call, but leaves the button looking live, so the affordance lies
+     * about what pressing it will do. Concretely, that is what blocks a real
+     * consumer's hand-rolled bulk bar from migrating to `DataBulkBar`: it
+     * would have to give up its double-submit guard to do so.
+     *
+     * Optional and defaulted off — omitting it behaves exactly as before.
+     */
+    disabled?: boolean;
 }
 interface DataBulkBarProps {
     selected: Set<string>;
@@ -405,6 +428,26 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
     searchPlaceholder?: string;
     initialFilters?: FilterParam[];
     onFiltersChange?: (filters: FilterParam[]) => void;
+    /**
+     * Extra multi-select filter comboboxes, handed straight to `DataFilters`
+     * and rendered beside the status chips. Each config owns its own
+     * `selected` array and `onChange` — ResourcePage never reads or writes
+     * them, because it cannot know what a caller's "Grade" or "Subject"
+     * combobox means against the row shape. That is deliberate rather than a
+     * gap: the built-in machinery (`searchFields`, `statusFilter`) covers the
+     * two shapes it *can* interpret, and this prop covers everything else by
+     * getting out of the way.
+     *
+     * Two consequences of that hands-off stance, stated rather than hidden:
+     * - These selections are invisible to `page.hasActiveFilters`, so the
+     *   header's "Clear filters" affordance does not appear for them alone,
+     *   and `onClearFilters` does not reset them. DataFilters' own "Clear all"
+     *   does call each config's `onChange([])`, so wire real clearing there.
+     * - In client-side mode the rows are NOT re-filtered by these selections.
+     *   A caller using them is expected to filter its own `data` (or ask the
+     *   server to), exactly as it already does in server-controlled mode.
+     */
+    filters?: DataFilterConfig[];
     /** Current page, 1-based. Server-controlled mode only. */
     page?: number;
     /**
@@ -448,6 +491,35 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
     onSortChange?: (sort: SortParam | null) => void;
     /** Called when the user changes the search text (including clearing it). */
     onSearchChange?: (search: string) => void;
+    /**
+     * Server-data mode: the caller's fetch is in flight, so render the shell's
+     * loading skeleton instead of the (as yet meaningless) `data`. Ignored in
+     * client-side mode, where `useResource`'s own loading state is used.
+     */
+    loading?: boolean;
+    /**
+     * Server-data mode: the caller's fetch failed, so render the shell's error
+     * panel instead of an empty table. Takes effect even when `data` is
+     * non-empty — stale rows beside no indication of failure are exactly the
+     * silent-failure this prop exists to prevent. Ignored in client-side mode,
+     * where `useResource`'s own error state is used.
+     */
+    error?: boolean;
+    /**
+     * Message shown in the error panel, in place of the shell's generic
+     * "Failed to load …". Forwarded in both modes — it is inert unless an
+     * error state is actually showing — so a client-side page can also give
+     * its failure a human sentence.
+     */
+    errorMessage?: string;
+    /**
+     * Server-data mode: invoked by the error panel's Retry button. The button
+     * only appears when this is supplied, so a caller with no way to retry
+     * simply omits it and gets an error panel without a dead control. In
+     * client-side mode the button is already wired to `useResource`'s own
+     * `refetch` and this prop is ignored.
+     */
+    onRetry?: () => void;
     /** Saved filter views to offer. Pair with `useSavedViews` for per-user storage. */
     savedViews?: SavedViewItem[];
     onLoadView?: (filters: Record<string, unknown>) => void;
@@ -496,6 +568,13 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
         icon?: LucideIcon;
         variant?: "default" | "destructive";
         onAction: (ids: string[]) => void | Promise<void>;
+        /**
+         * Forwarded straight to the rendered bulk button (see `BulkAction`).
+         * Exists so a consumer can kill every bulk action while one of them is
+         * in flight — an early return inside `onAction` blocks the second call
+         * but leaves the button looking live, which misstates what it will do.
+         */
+        disabled?: boolean;
     }>;
     /**
      * Override the default card renderer used for grid view (and, absent a
@@ -512,6 +591,23 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
      * call `actions.open()` from wherever your card should activate.
      */
     renderCard?: (item: T, index: number, actions: ResourceCardActions<T>) => ReactNode;
+    /**
+     * Replace the built-in `DataTable` that table view renders, keeping every
+     * other piece of the page — header, counts, view settings, filters,
+     * bulk bar, detail panel, form, pager — exactly as it is. The counterpart
+     * to `renderCard`, which does the same for grid and list view.
+     *
+     * Receives the rows for the current view, which in server-controlled mode
+     * is precisely the page the server returned. Ownership is total: row
+     * click-through, selection, density, column visibility and resizing are
+     * all things the built-in table wires for you and a custom table must
+     * wire for itself. That is the trade this prop makes, and it is why
+     * `renderCard` remains the lighter option when only the *cells* need to
+     * change — a `ResourceColumnDef.render` is lighter still.
+     *
+     * Omitted, the default `DataTable` render is used unchanged.
+     */
+    renderTable?: (items: T[]) => ReactNode;
     /**
      * Tailwind grid-column classes for the card grid, passed through to
      * `DataGrid`'s `gridCols` — e.g. `"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"`.

package/dist/components/data/index.js

@@ -15,17 +15,17 @@ import '../../chunk-B2GIBUQD.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-22XB3Q6H.js';
+import { PageLoading } from '../../chunk-YRYQXU3G.js';
+import { Spinner } from '../../chunk-OVU3Z2MT.js';
 import { Switch } from '../../chunk-27ELYTGE.js';
+import { DetailPage } from '../../chunk-AFZ76Q26.js';
+import '../../chunk-D2LIXA2Y.js';
+import '../../chunk-AVFZ4P4B.js';
 import { EmptyState } from '../../chunk-65SPT7EA.js';
 export { EmptyState } from '../../chunk-65SPT7EA.js';
 import { Button } from '../../chunk-NWSCYLPT.js';
-import { PageLoading } from '../../chunk-YRYQXU3G.js';
-import { Spinner } from '../../chunk-OVU3Z2MT.js';
 import { FormField, FormLabel, FormError, FormDescription } from '../../chunk-R7QFP6EL.js';
 import '../../chunk-F47U5KNW.js';
-import { DetailPage } from '../../chunk-AFZ76Q26.js';
-import '../../chunk-D2LIXA2Y.js';
-import '../../chunk-AVFZ4P4B.js';
 import { titleCase, useResourcePage } from '../../chunk-GDFNAHI4.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
 import '../../chunk-FTTNGGLA.js';
@@ -1146,6 +1146,7 @@ function DataBulkBar({
           size: "sm",
           variant: action.variant || "outline",
           onClick: action.onClick,
+          disabled: action.disabled,
           children: [
             /* @__PURE__ */ jsx(ActionIcon, { className: "h-3.5 w-3.5 mr-1" }),
             action.label
@@ -2424,12 +2425,17 @@ function ResourcePage(props) {
     searchPlaceholder,
     initialFilters,
     onFiltersChange,
+    filters: filtersProp,
     page: pageProp,
     perPage: perPageProp,
     onPageChange,
     onPerPageChange,
     onSortChange,
     onSearchChange,
+    loading: loadingProp,
+    error: errorProp,
+    errorMessage,
+    onRetry: onRetryProp,
     savedViews,
     onLoadView,
     onSaveView,
@@ -2455,6 +2461,7 @@ function ResourcePage(props) {
     formLayout: formLayoutProp,
     bulkActions,
     renderCard: renderCardProp,
+    renderTable: renderTableProp,
     gridCols: gridColsProp,
     keyboardNavigation = true,
     toolbar,
@@ -2475,8 +2482,8 @@ function ResourcePage(props) {
   );
   const displayData = isClientMode ? resourceHook.list.data?.data ?? [] : dataProp ?? [];
   const displayTotal = isClientMode ? resourceHook.list.data?.total ?? 0 : totalProp ?? 0;
-  const isLoading = isClientMode ? resourceHook.list.isLoading : false;
-  const hasError = isClientMode ? resourceHook.list.isError : false;
+  const isLoading = isClientMode ? resourceHook.list.isLoading : loadingProp ?? false;
+  const hasError = isClientMode ? resourceHook.list.isError : errorProp ?? false;
   const page = useResourcePage({
     resource: resourceName,
     data: displayData,
@@ -2807,7 +2814,8 @@ function ResourcePage(props) {
       isLoading,
       hasError,
       isEmpty,
-      onRetry: isClientMode ? () => resourceHook.list.refetch() : void 0,
+      errorMessage,
+      onRetry: isClientMode ? () => resourceHook.list.refetch() : onRetryProp,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
       pageSize: effectivePageSize,
@@ -2827,6 +2835,7 @@ function ResourcePage(props) {
           sort: page.filterConfig.sort,
           onSortChange: handleSortSelect,
           sortOptions: page.filterConfig.sortOptions,
+          filters: filtersProp,
           statusChips: statusChipsConfig,
           savedViews,
           onLoadView,
@@ -2848,6 +2857,7 @@ function ResourcePage(props) {
               label: a.label,
               icon: a.icon ?? Trash2,
               variant: a.variant,
+              disabled: a.disabled,
               onClick: () => {
                 void a.onAction(Array.from(selectedIds));
               }
@@ -2863,7 +2873,7 @@ function ResourcePage(props) {
             getKey: (item) => String(item.id ?? ""),
             focusedIndex: keyboardNav.focusedIndex,
             keyboardContainerRef: keyboardNav.containerRef,
-            renderTable: (items) => /* @__PURE__ */ jsx(
+            renderTable: (items) => renderTableProp ? renderTableProp(items) : /* @__PURE__ */ jsx(
               DataTable,
               {
                 items,