@dynostack/react-grid 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -161,6 +161,10 @@ function Separator({
     }
   );
 }
+var PortalContainerContext = react.createContext(null);
+function usePortalContainer() {
+  return react.useContext(PortalContainerContext);
+}
 function DropdownMenu({
   ...props
 }) {
@@ -183,7 +187,8 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
     radixUi.DropdownMenu.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -261,7 +266,8 @@ function PopoverContent({
   sideOffset = 6,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
     radixUi.Popover.Content,
     {
       "data-slot": "popover-content",
@@ -616,7 +622,8 @@ function SelectContent({
   position = "popper",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
     radixUi.Select.Content,
     {
       "data-slot": "select-content",
@@ -1045,15 +1052,17 @@ function OpSelect({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: o.v, children: o.l }, o.v))
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Select, { value, onValueChange: (v) => onChange(v), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectTrigger,
+      {
+        size: "sm",
+        className: "h-8 w-full justify-between text-xs",
+        children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: ops.map((o) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: o.v, className: "text-xs", children: o.l }, o.v)) })
+  ] });
 }
 function CombineToggle({
   value,
@@ -1721,14 +1730,23 @@ function DataTableRowActions({
   const [menuPosition, setMenuPosition] = react.useState({ top: 0, left: 0 });
   const triggerRef = react.useRef(null);
   const menuRef = react.useRef(null);
+  const portalContainer = usePortalContainer();
   react.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]);
   react.useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -1790,8 +1808,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__ */ jsxRuntime.jsxs(
               RowActionButton,
@@ -1829,7 +1851,7 @@ function DataTableRowActions({
           ]
         }
       ),
-      document.body
+      portalContainer ?? document.body
     )
   ] });
 }
@@ -2052,6 +2074,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})`,
@@ -2068,7 +2091,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})`,
@@ -2090,7 +2113,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})`,
@@ -2099,6 +2122,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 = [];
@@ -2168,6 +2196,332 @@ var themePresets = {
 };
 var ISOLATE_LIGHT_TOKENS = neutral.light;
 var ISOLATE_DARK_TOKENS = neutral.dark;
+function Sheet(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.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__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.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__ */ jsxRuntime.jsx(
+            radixUi.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__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 pr-8", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-lg font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.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__ */ jsxRuntime.jsx(lucideReact.ListIcon, { className: "size-3.5" }),
+  relaxed: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3Icon, { className: "size-3.5" }),
+  comfy: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGridIcon, { className: "size-3.5" })
+};
+function DataTableViewSheet({
+  table,
+  row,
+  open,
+  onOpenChange,
+  config
+}) {
+  const [density, setDensity] = react.useState(
+    config?.defaultDensity ?? "compact"
+  );
+  const fields = react.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__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: config?.side ?? "right", children: [
+    config?.renderHeader ? config.renderHeader(row) : /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: labels?.title ? labels.title(row) : "Details" }),
+      labels?.description && /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: labels.description(row) })
+    ] }),
+    !config?.hideDensityTabs && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col gap-0.5 rounded-md border bg-card p-2.5",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: headerLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground break-words", children: rendered })
+          ]
+        },
+        colId
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(radixUi.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogContent({
+  className,
+  children,
+  ...props
+}) {
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.AlertDialog.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__ */ jsxRuntime.jsx(
+      radixUi.AlertDialog.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-1.5", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Action,
+    {
+      className: cn(buttonVariants(), className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.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__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { children: config?.cancelLabel ?? "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.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 {};
@@ -2240,7 +2594,9 @@ function ActionsCellHost({ row }) {
     rowActions,
     customRowActions,
     onRowAction,
-    onRowSave
+    onRowSave,
+    onView,
+    onRequestDelete
   } = useEditingContext();
   const rowId = row.id;
   const isRowEdit = editingRowId === rowId;
@@ -2271,6 +2627,11 @@ function ActionsCellHost({ row }) {
           setEditingRowId(rowId);
           return;
         }
+        if (a === "view") {
+          onView?.(row.original);
+        } else if (a === "delete") {
+          onRequestDelete?.(row.original);
+        }
         onRowAction?.(a, row.original);
       }
     }
@@ -2333,7 +2694,11 @@ function DataTable({
   labels: labelsProp,
   density = "default",
   theme,
-  isolate = false
+  isolate = false,
+  onView,
+  onDelete,
+  viewSheet,
+  confirmDelete = true
 }) {
   const labels = { ...DEFAULT_LABELS, ...labelsProp };
   const f = {
@@ -2363,6 +2728,40 @@ function DataTable({
       darkCss: darkTokens ? tokensToCssBlock(darkTokens) : null
     };
   }, [theme, isolate]);
+  const [gridRoot, setGridRoot] = react.useState(null);
+  const [viewRow, setViewRow] = react.useState(null);
+  const [confirmCtx, setConfirmCtx] = react.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] = react.useState([]);
   const [columnFilters, setColumnFilters] = react.useState([]);
   const [internalGlobalFilter, setInternalGlobalFilter] = react.useState("");
@@ -2721,7 +3120,9 @@ function DataTable({
       customRowActions,
       onRowAction,
       onCellEdit,
-      onRowSave
+      onRowSave,
+      onView: handleViewRequest,
+      onRequestDelete: handleDeleteRequest
     }),
     [
       editingCell,
@@ -2731,19 +3132,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__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: gridRoot, children: /* @__PURE__ */ jsxRuntime.jsx(
     DataTableEditingContext.Provider,
     {
       value: editingContextValue,
       children: /* @__PURE__ */ jsxRuntime.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
           ),
@@ -2762,7 +3172,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) => {
@@ -2886,12 +3296,32 @@ function DataTable({
                 labels.refreshing
               ] })
             ] }),
-            f.pagination && /* @__PURE__ */ jsxRuntime.jsx(DataTablePagination, { table, pageSizeOptions })
+            f.pagination && /* @__PURE__ */ jsxRuntime.jsx(DataTablePagination, { table, pageSizeOptions }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DataTableViewSheet,
+              {
+                table,
+                row: viewRow,
+                open: viewRow != null,
+                onOpenChange: (o) => !o && setViewRow(null),
+                config: viewSheetConfig
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DataTableConfirmDelete,
+              {
+                open: confirmCtx != null,
+                onOpenChange: (o) => !o && setConfirmCtx(null),
+                context: confirmCtx,
+                onConfirm: handleConfirmDelete,
+                config: confirmConfig
+              }
+            )
           ]
         }
       )
     }
-  );
+  ) });
 }
 function DataTableRow({
   row,
@@ -2949,6 +3379,7 @@ exports.DataTableToolbar = DataTableToolbar;
 exports.EditableCell = EditableCell;
 exports.ISOLATE_DARK_TOKENS = ISOLATE_DARK_TOKENS;
 exports.ISOLATE_LIGHT_TOKENS = ISOLATE_LIGHT_TOKENS;
+exports.PortalContainerContext = PortalContainerContext;
 exports.booleanFilterFn = booleanFilterFn;
 exports.buildPreset = buildPreset;
 exports.dateFilterFn = dateFilterFn;
@@ -2963,5 +3394,6 @@ exports.themePresets = themePresets;
 exports.themeToStyle = themeToStyle;
 exports.tokensToCssBlock = tokensToCssBlock;
 exports.tokensToStyle = tokensToStyle;
+exports.usePortalContainer = usePortalContainer;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map