@marktiderman/genesis-ui 2.5.0 → 2.6.0

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

@@ -179,8 +179,12 @@ interface DataFiltersProps {
     onClearAll?: () => void;
     /** Expose the search input ref for keyboard nav "/" shortcut */
     searchInputRef?: React.RefObject<HTMLInputElement | null>;
+    /** Show the search box. Default `true`; turn off when the data source can't search. */
+    showSearch?: boolean;
+    /** Show the sort select. Default `true`; turn off when the data source can't sort. */
+    showSort?: boolean;
 }
-declare function DataFilters({ search, onSearchChange, searchPlaceholder, sort, onSortChange, sortOptions, filters, statusChips, savedViews, onLoadView, onSaveView, onDeleteView, canSaveViews, onViewSaved, onClearAll, searchInputRef, }: DataFiltersProps): React.JSX.Element;
+declare function DataFilters({ search, onSearchChange, searchPlaceholder, sort, onSortChange, sortOptions, filters, statusChips, savedViews, onLoadView, onSaveView, onDeleteView, canSaveViews, onViewSaved, onClearAll, searchInputRef, showSearch, showSort, }: DataFiltersProps): React.JSX.Element;
 
 interface DataGridProps<T> {
     items: T[];
@@ -309,14 +313,36 @@ interface KanbanColumn<T> {
     /** Raw bg color class (used if status not provided) */
     bgColor?: string;
     items: T[];
+    /** How many items the column holds in all, when `items` is one page of them. */
+    total?: number;
 }
 interface KanbanBoardProps<T> {
     columns: KanbanColumn<T>[];
     renderCard: (item: T) => ReactNode;
     emptyMessage?: string;
     className?: string;
+    /** A stable key per item. Without one, cards are keyed by position. */
+    getKey?: (item: T) => string;
+    /**
+     * Move an item to another column. When set, cards can be dragged between
+     * columns, and each card gets a "Move to…" menu that does the same from
+     * the keyboard. A rejected promise leaves the card where it was.
+     */
+    onMoveItem?: (item: T, toColumn: string) => void | Promise<void>;
+    /** A name for an item, for the move menu's label ("Move Ana Ruiz"). */
+    getItemLabel?: (item: T) => string;
+    /** Under a column's cards, e.g. a "Load more" button. */
+    renderColumnFooter?: (column: KanbanColumn<T>) => ReactNode;
 }
-declare function KanbanBoard<T>({ columns, renderCard, emptyMessage, className, }: KanbanBoardProps<T>): React.JSX.Element;
+/**
+ * Columns of cards, optionally movable between columns.
+ *
+ * Why the keyboard path isn't Radix (docs/FRAMEWORK.md rule 3): Radix has no
+ * drag and drop, and native drag and drop can't be done from a keyboard. The
+ * "Move to…" menu (a Radix DropdownMenu) is the equivalent path for keyboard
+ * and screen-reader users, so dragging is never the only way to move a card.
+ */
+declare function KanbanBoard<T>({ columns, renderCard, emptyMessage, className, getKey, onMoveItem, getItemLabel, renderColumnFooter, }: KanbanBoardProps<T>): React.JSX.Element;
 
 interface DataListProps<T> {
     items: T[];
@@ -648,6 +674,16 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
     onDeleteView?: (id: string) => void;
     /** Show the "save current view" affordance. */
     canSaveViews?: boolean;
+    /**
+     * What the data source can do. A control it can't serve is hidden rather
+     * than left to error (DATA-STUDIO.md decision 9): `search: false` hides the
+     * search box, `sort: false` the sort select. Pass a provider's
+     * `capabilities()` straight in. Omitted, both show, as before.
+     */
+    capabilities?: {
+        search?: boolean;
+        sort?: boolean;
+    };
     /** Show the column-visibility dropdown. DataTable's default is `true`. */
     columnVisibility?: boolean;
     /** Persist key for the user's column-visibility picks. */

package/dist/components/data/index.js

@@ -11,7 +11,7 @@ import { Progress } from '../../chunk-W5Y3LG5K.js';
 import { Input } from '../../chunk-QSXVL5UB.js';
 import { Checkbox } from '../../chunk-SEBU6JCK.js';
 import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-QJ6P2DW6.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuLabel } from '../../chunk-QJ6P2DW6.js';
 import '../../chunk-B2GIBUQD.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.js';
@@ -39,7 +39,7 @@ import { DefaultLink, defaultNavigate } from '../../chunk-CDYZRZ6U.js';
 export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-CDYZRZ6U.js';
 import { useKeyboardNavigation } from '../../chunk-YJ6MPS6U.js';
 import { useIsMobile } from '../../chunk-VFO3I7PV.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 { AlertTriangle, RefreshCw, ChevronDown, Check, Search, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, ArrowRightLeft, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Plus } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { formatDistanceToNow, format } from 'date-fns';
@@ -279,7 +279,9 @@ function DataFilters({
   canSaveViews = false,
   onViewSaved,
   onClearAll,
-  searchInputRef
+  searchInputRef,
+  showSearch = true,
+  showSort = true
 }) {
   const internalSearchRef = useRef(null);
   const effectiveSearchRef = searchInputRef || internalSearchRef;
@@ -335,8 +337,8 @@ function DataFilters({
         })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+    (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+      showSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
         /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
           Input,
@@ -357,7 +359,7 @@ function DataFilters({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Select, { value: sort, onValueChange: onSortChange, children: [
+      showSort && /* @__PURE__ */ jsxs(Select, { value: sort, onValueChange: onSortChange, children: [
         /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-full sm:w-[180px] shrink-0", children: [
           /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 mr-1.5 text-muted-foreground" }),
           /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort by..." })
@@ -1414,12 +1416,39 @@ var statusColorMap = {
   destructive: { color: "text-destructive", bgColor: "bg-destructive/15" },
   primary: { color: "text-primary", bgColor: "bg-primary/15" }
 };
+var DRAG_TYPE = "application/x-genesis-kanban-item";
 function KanbanBoard({
   columns,
   renderCard,
   emptyMessage = "No items",
-  className
+  className,
+  getKey,
+  onMoveItem,
+  getItemLabel,
+  renderColumnFooter
 }) {
+  const [dragging, setDragging] = useState(null);
+  const [over, setOver] = useState(null);
+  const keyOf = (item, index) => getKey ? getKey(item) : String(index);
+  const move = (item, to) => {
+    void Promise.resolve(onMoveItem?.(item, to)).catch(() => {
+    });
+  };
+  const onDrop = (event, to) => {
+    event.preventDefault();
+    setOver(null);
+    const key = event.dataTransfer.getData(DRAG_TYPE) || dragging?.key;
+    setDragging(null);
+    if (!key || !getKey) return;
+    for (const column of columns) {
+      const item = column.items.find((i) => getKey(i) === key);
+      if (item) {
+        if (column.key !== to) move(item, to);
+        return;
+      }
+    }
+  };
+  const movable = Boolean(onMoveItem && getKey);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1429,20 +1458,80 @@ function KanbanBoard({
       ),
       children: columns.map((column) => {
         const resolved = column.status ? statusColorMap[column.status] : { color: column.color ?? "", bgColor: column.bgColor ?? "" };
-        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold", resolved.color), children: column.label }),
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: "secondary",
-                className: cn("text-[10px] px-1.5 py-0", resolved.bgColor),
-                children: column.items.length
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-h-[80px]", children: column.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border p-6 text-xs text-muted-foreground", children: emptyMessage }) : column.items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "animate-fade-in", style: { animationDelay: `${i * 30}ms`, animationFillMode: "both" }, children: renderCard(item) }, i)) })
-        ] }, column.key);
+        return /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-label": column.label,
+            "data-kanban-column": column.key,
+            className: cn(
+              "flex flex-col gap-3 rounded-lg",
+              movable && over === column.key && dragging?.from !== column.key && "bg-accent/40 ring-2 ring-primary/40"
+            ),
+            onDragOver: movable ? (e) => {
+              if (!dragging) return;
+              e.preventDefault();
+              e.dataTransfer.dropEffect = "move";
+              if (over !== column.key) setOver(column.key);
+            } : void 0,
+            onDragLeave: movable ? (e) => {
+              if (!e.currentTarget.contains(e.relatedTarget)) setOver(null);
+            } : void 0,
+            onDrop: movable ? (e) => onDrop(e, column.key) : void 0,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold", resolved.color), children: column.label }),
+                /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: "secondary",
+                    className: cn("text-[10px] px-1.5 py-0", resolved.bgColor),
+                    children: column.total ?? column.items.length
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-h-[80px]", children: column.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border p-6 text-xs text-muted-foreground", children: emptyMessage }) : column.items.map((item, i) => {
+                const key = keyOf(item, i);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn("animate-fade-in", movable && "group relative", dragging?.key === key && "opacity-50"),
+                    style: { animationDelay: `${i * 30}ms`, animationFillMode: "both" },
+                    draggable: movable || void 0,
+                    onDragStart: movable ? (e) => {
+                      e.dataTransfer.setData(DRAG_TYPE, key);
+                      e.dataTransfer.effectAllowed = "move";
+                      setDragging({ key, from: column.key });
+                    } : void 0,
+                    onDragEnd: movable ? () => {
+                      setDragging(null);
+                      setOver(null);
+                    } : void 0,
+                    children: [
+                      renderCard(item),
+                      movable && columns.length > 1 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                        /* @__PURE__ */ jsx(
+                          DropdownMenuTrigger,
+                          {
+                            "aria-label": `Move ${getItemLabel?.(item) ?? "card"}`,
+                            className: "absolute right-1.5 top-1.5 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                            children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5", "aria-hidden": true })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Move to" }),
+                          columns.filter((c) => c.key !== column.key).map((c) => /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => move(item, c.key), children: c.label }, c.key))
+                        ] })
+                      ] })
+                    ]
+                  },
+                  key
+                );
+              }) }),
+              renderColumnFooter?.(column)
+            ]
+          },
+          column.key
+        );
       })
     }
   );
@@ -2614,6 +2703,7 @@ function ResourcePage(props) {
     renderTable: renderTableProp,
     gridCols: gridColsProp,
     keyboardNavigation = true,
+    capabilities,
     toolbar,
     emptyState,
     resourceOptions,
@@ -2999,7 +3089,9 @@ function ResourcePage(props) {
           onSaveView,
           onDeleteView,
           canSaveViews,
-          onClearAll: page.hasActiveFilters ? handleClearFilters : void 0
+          onClearAll: page.hasActiveFilters ? handleClearFilters : void 0,
+          showSearch: capabilities?.search !== false,
+          showSort: capabilities?.sort !== false
         },
         slotProps?.filters
       ),