@dynostack/react-grid 0.3.0 → 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
@@ -77,7 +79,28 @@ yarn add @dynostack/react-grid
 
 ## Tailwind setup
 
-The component ships Tailwind class names verbatim. Tell your Tailwind config to scan the package files:
+The component ships Tailwind class names verbatim, so your Tailwind build needs to know two things:
+
+1. **Where to scan** for the class strings inside the bundle.
+2. **Which semantic color tokens** (`bg-popover`, `bg-card`, `text-foreground`, …) exist.
+
+The package's `styles.css` registers the tokens for you via Tailwind v4's `@theme inline`. You only need to wire scanning.
+
+### Tailwind v4 — zero config
+
+```css
+/* your global stylesheet (e.g. src/index.css) */
+@import "tailwindcss";
+@source "../node_modules/@dynostack/react-grid/dist";
+@import "@dynostack/react-grid/styles.css";
+@import "@dynostack/react-grid/page.css";   /* optional: extend tokens to <body> */
+```
+
+That's the whole setup. No `tailwind.config.js`, no `@theme` block to copy-paste, no shadcn install required. Overlay surfaces (popovers, dropdowns, sheets, the row-actions menu) all render correctly out of the box.
+
+### Tailwind v3
+
+v3 doesn't read CSS `@theme` directives, so the semantic-color mapping has to live in your `tailwind.config.js`. The shadcn install guide for v3 covers the exact `theme.extend.colors` block you need — copy that, plus add the package's `dist` to your `content` array:
 
 ```js
 // tailwind.config.{js,ts}
@@ -86,10 +109,28 @@ export default {
     "./src/**/*.{ts,tsx}",
     "./node_modules/@dynostack/react-grid/dist/**/*.{js,mjs,cjs}",
   ],
+  theme: {
+    extend: {
+      colors: {
+        // copy the shadcn v3 color mapping here
+        // (background, foreground, card, popover, primary, secondary,
+        //  muted, accent, destructive, border, input, ring)
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        // … etc
+      },
+    },
+  },
 }
 ```
 
-> Tailwind v4? Add the same path to your `@source` directive instead.
+Then import `styles.css` as usual:
+
+```ts
+import "@dynostack/react-grid/styles.css"
+```
+
+> Starting a new project? **Use Tailwind v4.** The v4 path above is meaningfully simpler — the package handles token registration for you.
 
 ## Theme tokens
 
@@ -104,15 +145,22 @@ The grid is built on **shadcn/ui CSS variables**. It auto-adjusts to whatever th
 | Custom theme with non-shadcn names | Pass [`theme` prop](#theming) | Per-instance override mapped to shadcn vars. |
 | Want one grid to ignore the app theme | Pass `isolate` | Grid uses bundled defaults regardless of `:root`. |
 
-**Why this just works.** The bundled `styles.css` declares its defaults inside the `dynostack-grid-defaults` cascade layer. Any unlayered consumer rule (which is where shadcn and most app CSS lives) automatically wins — import order doesn't matter, and you can't accidentally overwrite your app's theme by importing the grid's stylesheet.
+**Why this just works.** The bundled `styles.css`:
 
-### Minimal install
+1. **Registers Tailwind v4 utility tokens** via a top-level `@theme inline` block — so `bg-popover`, `text-foreground`, `border-border`, etc. resolve to your tokens without any consumer-side `@theme` block.
+2. **Declares variable values inside the `dynostack-grid-defaults` cascade layer** — any unlayered consumer rule (which is where shadcn and most app CSS lives) automatically wins, regardless of import order. You can't accidentally overwrite your app's theme by importing the grid's stylesheet.
 
-```ts
-// main.tsx — once per app
-import "@dynostack/react-grid/styles.css"
+### Minimal install (Tailwind v4)
+
+```css
+/* your global stylesheet */
+@import "tailwindcss";
+@source "../node_modules/@dynostack/react-grid/dist";
+@import "@dynostack/react-grid/styles.css";
 ```
 
+See the [Tailwind setup](#tailwind-setup) section for v3.
+
 ### Optional: extend the theme to the page
 
 By default the grid only styles itself, not the surrounding page. If you want `<body>` to use the same background/foreground as the grid:
@@ -567,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
@@ -614,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`:
 
@@ -622,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
@@ -632,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
@@ -653,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)}
@@ -670,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
@@ -694,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);
       }