@marktiderman/genesis-ui 2.5.0 → 2.7.0

package/dist/components/data/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { AppShell, PageHeader } from '../../chunk-DWM7ELFI.js';
+import { AppShell, PageHeader } from '../../chunk-ZPPLUGLA.js';
 export { ViewSettings, ViewToggle } from '../../chunk-46TZGMFW.js';
 import { renderSlot } from '../../chunk-7S7LKQBD.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
@@ -9,13 +9,13 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '
 import { Skeleton } from '../../chunk-QFM4Z2SS.js';
 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 { Checkbox } from '../../chunk-SEBU6JCK.js';
 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 { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuLabel } from '../../chunk-QJ6P2DW6.js';
 import { Switch } from '../../chunk-27ELYTGE.js';
 import { EmptyState } from '../../chunk-65SPT7EA.js';
 export { EmptyState } from '../../chunk-65SPT7EA.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
       ),