@dynostack/react-grid 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { createContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useId, useContext } from 'react';
+import { createContext, useContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useId } from 'react';
 import { useReactTable, getPaginationRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
-import { Trash2Icon, XIcon, SearchIcon, RefreshCwIcon, ColumnsIcon, DownloadIcon, FileTextIcon, FileSpreadsheetIcon, PlusIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PinOffIcon, PinIcon, EyeOffIcon, FilterIcon, CheckIcon, MoreHorizontalIcon, ChevronDownIcon, GripVerticalIcon, Loader2Icon, MinusIcon, CopyIcon, PencilIcon, EyeIcon, ChevronUpIcon } from 'lucide-react';
+import { Trash2Icon, XIcon, SearchIcon, RefreshCwIcon, ColumnsIcon, DownloadIcon, FileTextIcon, FileSpreadsheetIcon, PlusIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PinOffIcon, PinIcon, EyeOffIcon, FilterIcon, CheckIcon, MoreHorizontalIcon, ChevronDownIcon, GripVerticalIcon, Loader2Icon, MinusIcon, CopyIcon, PencilIcon, EyeIcon, ChevronUpIcon, LayoutGridIcon, Rows3Icon, ListIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Slot, Separator as Separator$1, Popover as Popover$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, Select as Select$1 } from 'radix-ui';
+import { Slot, Separator as Separator$1, Popover as Popover$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, Select as Select$1, Dialog, AlertDialog as AlertDialog$1 } from 'radix-ui';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { createPortal } from 'react-dom';
@@ -159,6 +159,10 @@ function Separator({
     }
   );
 }
+var PortalContainerContext = createContext(null);
+function usePortalContainer() {
+  return useContext(PortalContainerContext);
+}
 function DropdownMenu({
   ...props
 }) {
@@ -181,7 +185,8 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     DropdownMenu$1.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -259,7 +264,8 @@ function PopoverContent({
   sideOffset = 6,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     Popover$1.Content,
     {
       "data-slot": "popover-content",
@@ -614,7 +620,8 @@ function SelectContent({
   position = "popper",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsx(Select$1.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxs(
     Select$1.Content,
     {
       "data-slot": "select-content",
@@ -1043,15 +1050,17 @@ function OpSelect({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx(
-    "select",
-    {
-      value,
-      onChange: (e) => onChange(e.target.value),
-      className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:border-ring",
-      children: ops.map((o) => /* @__PURE__ */ jsx("option", { value: o.v, children: o.l }, o.v))
-    }
-  );
+  return /* @__PURE__ */ jsxs(Select, { value, onValueChange: (v) => onChange(v), children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        size: "sm",
+        className: "h-8 w-full justify-between text-xs",
+        children: /* @__PURE__ */ jsx(SelectValue, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { children: ops.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.v, className: "text-xs", children: o.l }, o.v)) })
+  ] });
 }
 function CombineToggle({
   value,
@@ -1719,14 +1728,23 @@ function DataTableRowActions({
   const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
   const triggerRef = useRef(null);
   const menuRef = useRef(null);
+  const portalContainer = usePortalContainer();
   useLayoutEffect(() => {
     if (!open || !triggerRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
-    setMenuPosition({
-      top: rect.bottom + 4,
-      left: Math.max(8, rect.right - 160)
-    });
-  }, [open]);
+    if (portalContainer) {
+      const cRect = portalContainer.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.bottom - cRect.top + 4,
+        left: Math.max(8, rect.right - cRect.left - 160)
+      });
+    } else {
+      setMenuPosition({
+        top: rect.bottom + 4,
+        left: Math.max(8, rect.right - 160)
+      });
+    }
+  }, [open, portalContainer]);
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -1788,8 +1806,12 @@ function DataTableRowActions({
         "div",
         {
           ref: menuRef,
-          className: "fixed z-[1000] w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
-          style: { top: menuPosition.top, left: menuPosition.left },
+          className: "z-[1000] w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+          style: {
+            position: portalContainer ? "absolute" : "fixed",
+            top: menuPosition.top,
+            left: menuPosition.left
+          },
           children: [
             actions.map((a) => /* @__PURE__ */ jsxs(
               RowActionButton,
@@ -1827,7 +1849,7 @@ function DataTableRowActions({
           ]
         }
       ),
-      document.body
+      portalContainer ?? document.body
     )
   ] });
 }
@@ -2050,6 +2072,7 @@ function splitTheme(theme) {
 }
 function buildPreset(hue, chroma = 0.03) {
   const c = chroma;
+  const destH = blendTowardRed(hue);
   return {
     light: {
       background: `oklch(0.99 ${c * 0.2} ${hue})`,
@@ -2066,7 +2089,7 @@ function buildPreset(hue, chroma = 0.03) {
       mutedForeground: `oklch(0.5 ${c * 1.5} ${hue})`,
       accent: `oklch(0.94 ${c * 1.2} ${hue})`,
       accentForeground: `oklch(0.3 ${c * 3} ${hue})`,
-      destructive: `oklch(0.577 0.245 27.325)`,
+      destructive: `oklch(0.577 0.22 ${destH})`,
       destructiveForeground: `oklch(0.985 0 0)`,
       border: `oklch(0.9 ${c * 0.8} ${hue})`,
       input: `oklch(0.9 ${c * 0.8} ${hue})`,
@@ -2088,7 +2111,7 @@ function buildPreset(hue, chroma = 0.03) {
       mutedForeground: `oklch(0.7 ${c * 0.5} ${hue})`,
       accent: `oklch(0.3 ${c * 1.5} ${hue})`,
       accentForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
-      destructive: `oklch(0.577 0.245 27.325 / 0.6)`,
+      destructive: `oklch(0.65 0.22 ${destH})`,
       destructiveForeground: `oklch(0.985 0 0)`,
       border: `oklch(0.27 ${c * 0.8} ${hue})`,
       input: `oklch(0.27 ${c * 0.8} ${hue})`,
@@ -2097,6 +2120,11 @@ function buildPreset(hue, chroma = 0.03) {
     }
   };
 }
+function blendTowardRed(hue) {
+  const red = 25;
+  let delta = (hue - red + 540) % 360 - 180;
+  return (red + delta * 0.3 + 360) % 360;
+}
 function tokensToCssBlock(tokens) {
   if (!tokens) return "";
   const parts = [];
@@ -2166,6 +2194,332 @@ var themePresets = {
 };
 var ISOLATE_LIGHT_TOKENS = neutral.light;
 var ISOLATE_DARK_TOKENS = neutral.dark;
+function Sheet(props) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var SIDE_CLASS = {
+  right: "right-0 top-0 h-full w-3/4 max-w-md border-l data-closed:slide-out-to-right data-open:slide-in-from-right",
+  left: "left-0 top-0 h-full w-3/4 max-w-md border-r data-closed:slide-out-to-left data-open:slide-in-from-left",
+  top: "left-0 top-0 w-full max-h-[80vh] border-b data-closed:slide-out-to-top data-open:slide-in-from-top",
+  bottom: "left-0 bottom-0 w-full max-h-[80vh] border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom"
+};
+function SheetContent({
+  className,
+  side = "right",
+  children,
+  ...props
+}) {
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsxs(Dialog.Portal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg outline-none transition data-open:animate-in data-closed:animate-out duration-200",
+          SIDE_CLASS[side],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Dialog.Close,
+            {
+              className: "absolute top-4 right-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 pr-8", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-lg font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var COLS_CLASS = {
+  compact: "grid-cols-1",
+  relaxed: "grid-cols-1 sm:grid-cols-2",
+  comfy: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+};
+var DENSITY_ICON = {
+  compact: /* @__PURE__ */ jsx(ListIcon, { className: "size-3.5" }),
+  relaxed: /* @__PURE__ */ jsx(Rows3Icon, { className: "size-3.5" }),
+  comfy: /* @__PURE__ */ jsx(LayoutGridIcon, { className: "size-3.5" })
+};
+function DataTableViewSheet({
+  table,
+  row,
+  open,
+  onOpenChange,
+  config
+}) {
+  const [density, setDensity] = useState(
+    config?.defaultDensity ?? "compact"
+  );
+  const fields = useMemo(() => {
+    if (!row) return [];
+    const wanted = config?.fields;
+    const allCols = table.getAllLeafColumns().filter((c) => {
+      if (c.id === "__select" || c.id === "__actions" || c.id === "__expand")
+        return false;
+      if (wanted) return wanted.includes(c.id);
+      return c.getIsVisible();
+    });
+    if (wanted) {
+      return wanted.map((id) => allCols.find((c) => c.id === id)).filter((c) => Boolean(c));
+    }
+    return allCols;
+  }, [table, row, config?.fields]);
+  if (!row) return null;
+  const labels = config?.labels;
+  const emptyValue = labels?.emptyValue ?? "\u2014";
+  const densityLabels = {
+    compact: labels?.density?.compact ?? "Compact",
+    relaxed: labels?.density?.relaxed ?? "Relaxed",
+    comfy: labels?.density?.comfy ?? "Comfy"
+  };
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: config?.side ?? "right", children: [
+    config?.renderHeader ? config.renderHeader(row) : /* @__PURE__ */ jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsx(SheetTitle, { children: labels?.title ? labels.title(row) : "Details" }),
+      labels?.description && /* @__PURE__ */ jsx(SheetDescription, { children: labels.description(row) })
+    ] }),
+    !config?.hideDensityTabs && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": "Layout density",
+        className: "inline-flex w-fit gap-0.5 rounded-md border bg-muted/40 p-0.5 text-xs",
+        children: ["compact", "relaxed", "comfy"].map((d) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": density === d,
+            onClick: () => setDensity(d),
+            className: cn(
+              "inline-flex items-center gap-1 rounded px-2 py-1 transition-colors",
+              density === d ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              DENSITY_ICON[d],
+              densityLabels[d]
+            ]
+          },
+          d
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cn("grid gap-3 overflow-y-auto", COLS_CLASS[density]), children: fields.map((col) => {
+      const colId = col.id;
+      const colDef = col.columnDef;
+      const headerLabel = colDef.meta?.label ?? (typeof colDef.header === "string" ? colDef.header : colId);
+      const rawValue = row[colDef.accessorKey ?? colId];
+      const rendered = config?.renderField ? config.renderField({ column: col, value: rawValue, row }) : defaultRenderValue(rawValue, emptyValue);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col gap-0.5 rounded-md border bg-card p-2.5",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: headerLabel }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground break-words", children: rendered })
+          ]
+        },
+        colId
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), children: "Close" }) })
+  ] }) });
+}
+function defaultRenderValue(value, empty) {
+  if (value == null || value === "") return empty;
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function AlertDialog(props) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogContent({
+  className,
+  children,
+  ...props
+}) {
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Overlay,
+      {
+        className: "fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-1.5", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Action,
+    {
+      className: cn(buttonVariants(), className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Cancel,
+    {
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      ...props
+    }
+  );
+}
+function DataTableConfirmDelete({
+  open,
+  onOpenChange,
+  context,
+  onConfirm,
+  config
+}) {
+  if (!context) return null;
+  const title = config?.title ? config.title(context) : context.source === "bulk" ? `Delete ${context.rows.length} ${context.rows.length === 1 ? "row" : "rows"}?` : "Delete this row?";
+  const description = config?.description ? config.description(context) : context.source === "bulk" ? `${context.rows.length} ${context.rows.length === 1 ? "row" : "rows"} will be permanently removed. This cannot be undone.` : "This row will be permanently removed. This cannot be undone.";
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx(AlertDialogCancel, { children: config?.cancelLabel ?? "Cancel" }),
+      /* @__PURE__ */ jsx(
+        AlertDialogAction,
+        {
+          className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          onClick: onConfirm,
+          children: config?.confirmLabel ?? "Delete"
+        }
+      )
+    ] })
+  ] }) });
+}
 function getPinningStyles(column) {
   const isPinned = column.getIsPinned();
   if (!isPinned) return {};
@@ -2238,7 +2592,9 @@ function ActionsCellHost({ row }) {
     rowActions,
     customRowActions,
     onRowAction,
-    onRowSave
+    onRowSave,
+    onView,
+    onRequestDelete
   } = useEditingContext();
   const rowId = row.id;
   const isRowEdit = editingRowId === rowId;
@@ -2269,6 +2625,11 @@ function ActionsCellHost({ row }) {
           setEditingRowId(rowId);
           return;
         }
+        if (a === "view") {
+          onView?.(row.original);
+        } else if (a === "delete") {
+          onRequestDelete?.(row.original);
+        }
         onRowAction?.(a, row.original);
       }
     }
@@ -2331,7 +2692,11 @@ function DataTable({
   labels: labelsProp,
   density = "default",
   theme,
-  isolate = false
+  isolate = false,
+  onView,
+  onDelete,
+  viewSheet,
+  confirmDelete = true
 }) {
   const labels = { ...DEFAULT_LABELS, ...labelsProp };
   const f = {
@@ -2361,6 +2726,40 @@ function DataTable({
       darkCss: darkTokens ? tokensToCssBlock(darkTokens) : null
     };
   }, [theme, isolate]);
+  const [gridRoot, setGridRoot] = useState(null);
+  const [viewRow, setViewRow] = useState(null);
+  const [confirmCtx, setConfirmCtx] = useState(null);
+  const confirmEnabled = confirmDelete !== false;
+  const confirmConfig = typeof confirmDelete === "object" ? confirmDelete : void 0;
+  const viewSheetEnabled = viewSheet !== false;
+  const viewSheetConfig = viewSheet && typeof viewSheet === "object" ? viewSheet : void 0;
+  const handleViewRequest = (row) => {
+    onView?.(row);
+    if (viewSheetEnabled) setViewRow(row);
+  };
+  const handleDeleteRequest = (row) => {
+    if (confirmEnabled) {
+      setConfirmCtx({ rows: [row], source: "single" });
+    } else {
+      onDelete?.(row);
+    }
+  };
+  const handleBulkDeleteRequest = (rows2) => {
+    if (confirmEnabled) {
+      setConfirmCtx({ rows: rows2, source: "bulk" });
+    } else {
+      onBulkDelete?.(rows2);
+    }
+  };
+  const handleConfirmDelete = () => {
+    if (!confirmCtx) return;
+    if (confirmCtx.source === "single") {
+      onDelete?.(confirmCtx.rows[0]);
+    } else {
+      onBulkDelete?.(confirmCtx.rows);
+    }
+    setConfirmCtx(null);
+  };
   const [sorting, setSorting] = useState([]);
   const [columnFilters, setColumnFilters] = useState([]);
   const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
@@ -2719,7 +3118,9 @@ function DataTable({
       customRowActions,
       onRowAction,
       onCellEdit,
-      onRowSave
+      onRowSave,
+      onView: handleViewRequest,
+      onRequestDelete: handleDeleteRequest
     }),
     [
       editingCell,
@@ -2729,19 +3130,28 @@ function DataTable({
       customRowActions,
       onRowAction,
       onCellEdit,
-      onRowSave
+      onRowSave,
+      // intentional: handleViewRequest / handleDeleteRequest close over
+      // viewSheetEnabled / confirmEnabled which are derived from props above.
+      // They're recreated each render; the inputs here capture the prop deps.
+      onView,
+      onDelete,
+      onBulkDelete,
+      viewSheetEnabled,
+      confirmEnabled
     ]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: gridRoot, children: /* @__PURE__ */ jsx(
     DataTableEditingContext.Provider,
     {
       value: editingContextValue,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: setGridRoot,
           "data-dyno-grid": instanceId,
           className: cn(
-            "flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm",
+            "relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm",
             DENSITY_CLASS[density],
             className
           ),
@@ -2760,7 +3170,7 @@ function DataTable({
                 isFetching: effectiveIsFetching,
                 onRefresh: f.refresh ? effectiveOnRefresh : void 0,
                 onAddRow: f.addRow ? handleAddRow : void 0,
-                onBulkDelete,
+                onBulkDelete: onBulkDelete ? handleBulkDeleteRequest : void 0,
                 exportFileName,
                 globalFilter,
                 onGlobalFilterChange: (v) => {
@@ -2884,12 +3294,32 @@ function DataTable({
                 labels.refreshing
               ] })
             ] }),
-            f.pagination && /* @__PURE__ */ jsx(DataTablePagination, { table, pageSizeOptions })
+            f.pagination && /* @__PURE__ */ jsx(DataTablePagination, { table, pageSizeOptions }),
+            /* @__PURE__ */ jsx(
+              DataTableViewSheet,
+              {
+                table,
+                row: viewRow,
+                open: viewRow != null,
+                onOpenChange: (o) => !o && setViewRow(null),
+                config: viewSheetConfig
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DataTableConfirmDelete,
+              {
+                open: confirmCtx != null,
+                onOpenChange: (o) => !o && setConfirmCtx(null),
+                context: confirmCtx,
+                onConfirm: handleConfirmDelete,
+                config: confirmConfig
+              }
+            )
           ]
         }
       )
     }
-  );
+  ) });
 }
 function DataTableRow({
   row,
@@ -2938,6 +3368,6 @@ function renderSkeleton(cols, rows) {
   return Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: Array.from({ length: cols }).map((__, c) => /* @__PURE__ */ jsx("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, c)) }, r));
 }
 
-export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle };
+export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, PortalContainerContext, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map