@dynostack/react-grid 0.3.1 → 0.3.2

package/README.md

@@ -26,6 +26,8 @@ A single `<DataTable />` component that gives you ag-grid–level functionality
 - **Selection + bulk actions** — pinned `__select` column with select-all, clear, bulk delete
 - **Expandable rows** — provide a `renderSubRow` panel or use TanStack's nested `getSubRows`
 - **CSV / Excel export** — selection-aware (export selected vs. all)
+- **Built-in row Details panel** — `View` opens a scoped sheet with compact, relaxed, and comfy field layouts
+- **Scoped delete confirmation** — row and bulk delete confirmations stay inside the table instead of covering the entire app
 - **Theming that just works** — shadcn-compatible CSS variables, automatic OS dark-mode follow, cascade-layered defaults that never overwrite your app theme, full-repaint moded presets (`violet`, `emerald`, `amber`, `rose`, `sky`, `slate`, …), `buildPreset(hue)` for custom hues, and `isolate` to opt out of inheriting the app theme
 - **Density** — `compact` · `default` · `comfortable`
 - **i18n / labels** — every visible string is overridable
@@ -613,7 +615,7 @@ The set filter automatically derives unique values from the visible rows when `s
 Selection is on by default (`enableSelection: true`). When any row is selected the toolbar swaps in:
 
 - A `<count> selected` badge
-- `Delete` button → wires to `onBulkDelete?(rows)`
+- `Delete` button → opens the confirmation dialog first, then calls `onBulkDelete?(rows)` after confirm
 - `Clear` button → resets selection
 
 ```tsx
@@ -660,7 +662,15 @@ Mark a column non-exportable via `meta.exportable: false`.
 
 ## View sheet
 
-Click the row action "View" → a right-side `Sheet` slides in showing every visible column as a `{Label}: {value}` card. The user can switch layout density inline (Compact 1 col / Relaxed 2 col / Comfy 3 col).
+Click the row action "View" → a right-side `Sheet` slides in showing every visible column as a `{Label}: {value}` card. The user can switch layout density inline:
+
+| Option | Layout | Intended use |
+| --- | --- | --- |
+| `Compact` | 3 columns, tighter cards | Scan more fields at once. |
+| `Relaxed` | 2 columns, medium spacing | Balanced default for mixed values. |
+| `Comfy` | 1 column, roomier cards | Read long values without cramped wrapping. |
+
+The sheet is responsive and wider on desktop so the multi-column modes have enough room for real row data.
 
 Works out of the box with no props. Customize via `viewSheet`:
 
@@ -668,7 +678,7 @@ Works out of the box with no props. Customize via `viewSheet`:
 <DataTable
   viewSheet={{
     side: "right",                              // or "left"
-    defaultDensity: "relaxed",                  // initial column count
+    defaultDensity: "relaxed",                  // initial layout density
     hideDensityTabs: true,                      // hide the layout picker
     fields: ["name", "email", "role"],          // limit / reorder shown columns
     renderField: ({ column, value, row }) =>    // override how a value renders
@@ -678,7 +688,7 @@ Works out of the box with no props. Customize via `viewSheet`:
       title: (row) => `${row.name} (${row.role})`,
       description: (row) => `Joined ${row.joinedAt}`,
       emptyValue: "—",
-      density: { compact: "1 col", relaxed: "2 cols", comfy: "3 cols" },
+      density: { compact: "3 cols", relaxed: "2 cols", comfy: "1 col" },
     },
   }}
   onView={(row) => track("user.view", row)}   // optional side-effect
@@ -699,6 +709,8 @@ Disable the built-in sheet entirely:
 
 Both the row-action "Delete" and the toolbar "Bulk delete" open a confirmation `AlertDialog` by default. The user must confirm before `onDelete` or `onBulkDelete` fires.
 
+The dialog is mounted inside the DataTable portal container, so its blur / dim overlay covers only that table instance. It does not block or blur the rest of the page.
+
 ```tsx
 <DataTable
   onDelete={(row) => api.deleteUser(row.id)}
@@ -716,6 +728,8 @@ Both the row-action "Delete" and the toolbar "Bulk delete" open a confirmation `
 />
 ```
 
+Use `onDelete` for the built-in row delete action. Do not put the actual delete mutation in `onRowAction("delete")`, because the built-in delete action is handled by the confirmation flow.
+
 Skip the dialog (fire immediately):
 
 ```tsx
@@ -740,10 +754,10 @@ Skip the dialog (fire immediately):
     { id: "archive", label: "Archive", icon: <ArchiveIcon /> },
   ]}
   onRowAction={(action, row) => {
-    if (action === "delete") deleteMutation.mutate([row.id])
     if (action === "suspend") saveMutation.mutate({ ...row, status: "suspended" })
     // ...
   }}
+  onDelete={(row) => deleteMutation.mutate([row.id])}
 />
 ```
 

package/dist/index.cjs

@@ -2216,8 +2216,8 @@ function SheetOverlay({
   );
 }
 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",
+  right: "right-0 top-0 h-full w-full border-l sm:w-[min(48rem,calc(100vw-2rem))] data-closed:slide-out-to-right data-open:slide-in-from-right",
+  left: "left-0 top-0 h-full w-full border-r sm:w-[min(48rem,calc(100vw-2rem))] 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"
 };
@@ -2292,14 +2292,19 @@ function SheetDescription({
   );
 }
 var COLS_CLASS = {
-  compact: "grid-cols-1",
+  compact: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
   relaxed: "grid-cols-1 sm:grid-cols-2",
-  comfy: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+  comfy: "grid-cols-1"
+};
+var CARD_CLASS = {
+  compact: "gap-0.5 p-2.5",
+  relaxed: "gap-1 p-3",
+  comfy: "gap-1.5 p-4"
 };
 var DENSITY_ICON = {
-  compact: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListIcon, { className: "size-3.5" }),
+  compact: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGridIcon, { className: "size-3.5" }),
   relaxed: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3Icon, { className: "size-3.5" }),
-  comfy: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGridIcon, { className: "size-3.5" })
+  comfy: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListIcon, { className: "size-3.5" })
 };
 function DataTableViewSheet({
   table,
@@ -2372,10 +2377,13 @@ function DataTableViewSheet({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex flex-col gap-0.5 rounded-md border bg-card p-2.5",
+          className: cn(
+            "flex min-w-0 flex-col rounded-md border bg-card",
+            CARD_CLASS[density]
+          ),
           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 })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "break-words text-sm text-foreground", children: rendered })
           ]
         },
         colId
@@ -2400,11 +2408,15 @@ function AlertDialogContent({
   ...props
 }) {
   const container = usePortalContainer();
+  const positionClass = container ? "absolute" : "fixed";
   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"
+        className: cn(
+          "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",
+          positionClass
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2412,7 +2424,8 @@ function AlertDialogContent({
       {
         "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",
+          "top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] 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",
+          positionClass,
           className
         ),
         ...props,
@@ -2631,6 +2644,7 @@ function ActionsCellHost({ row }) {
           onView?.(row.original);
         } else if (a === "delete") {
           onRequestDelete?.(row.original);
+          return;
         }
         onRowAction?.(a, row.original);
       }