@dynostack/react-grid 0.3.1 → 0.3.2

package/dist/index.d.cts

@@ -157,7 +157,7 @@ type ViewSheetLabels = {
 type ViewSheetConfig<TData> = {
     /** Side of the screen to slide in from. Defaults to "right". */
     side?: SheetSide;
-    /** Initial column count. Defaults to "compact" (1 column). */
+    /** Initial layout density. Defaults to "compact" (more fields per row). */
     defaultDensity?: ViewSheetDensity;
     /** Hide the density tabs entirely if you want a fixed layout. */
     hideDensityTabs?: boolean;

package/dist/index.d.ts

@@ -157,7 +157,7 @@ type ViewSheetLabels = {
 type ViewSheetConfig<TData> = {
     /** Side of the screen to slide in from. Defaults to "right". */
     side?: SheetSide;
-    /** Initial column count. Defaults to "compact" (1 column). */
+    /** Initial layout density. Defaults to "compact" (more fields per row). */
     defaultDensity?: ViewSheetDensity;
     /** Hide the density tabs entirely if you want a fixed layout. */
     hideDensityTabs?: boolean;

package/dist/index.js

@@ -1,6 +1,6 @@
 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, LayoutGridIcon, Rows3Icon, ListIcon } 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, ListIcon, Rows3Icon, LayoutGridIcon } 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, Dialog, AlertDialog as AlertDialog$1 } from 'radix-ui';
@@ -2214,8 +2214,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"
 };
@@ -2290,14 +2290,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__ */ jsx(ListIcon, { className: "size-3.5" }),
+  compact: /* @__PURE__ */ jsx(LayoutGridIcon, { className: "size-3.5" }),
   relaxed: /* @__PURE__ */ jsx(Rows3Icon, { className: "size-3.5" }),
-  comfy: /* @__PURE__ */ jsx(LayoutGridIcon, { className: "size-3.5" })
+  comfy: /* @__PURE__ */ jsx(ListIcon, { className: "size-3.5" })
 };
 function DataTableViewSheet({
   table,
@@ -2370,10 +2375,13 @@ function DataTableViewSheet({
       return /* @__PURE__ */ 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__ */ 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 })
+            /* @__PURE__ */ jsx("span", { className: "break-words text-sm text-foreground", children: rendered })
           ]
         },
         colId
@@ -2398,11 +2406,15 @@ function AlertDialogContent({
   ...props
 }) {
   const container = usePortalContainer();
+  const positionClass = container ? "absolute" : "fixed";
   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"
+        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__ */ jsx(
@@ -2410,7 +2422,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,
@@ -2629,6 +2642,7 @@ function ActionsCellHost({ row }) {
           onView?.(row.original);
         } else if (a === "delete") {
           onRequestDelete?.(row.original);
+          return;
         }
         onRowAction?.(a, row.original);
       }