@dynostack/react-grid 0.4.0 → 0.5.1

package/dist/index.d.cts

@@ -118,6 +118,54 @@ declare function tokensToCssBlock(tokens?: DataTableTokens): string;
  */
 declare const themePresets: {
     neutral: DataTableModedTheme;
+    graphite: {
+        light: {
+            background: string;
+            card: string;
+            border: string;
+            radius: string;
+            fontFamily: string;
+            foreground?: string;
+            cardForeground?: string;
+            popover?: string;
+            popoverForeground?: string;
+            primary?: string;
+            primaryForeground?: string;
+            secondary?: string;
+            secondaryForeground?: string;
+            muted?: string;
+            mutedForeground?: string;
+            accent?: string;
+            accentForeground?: string;
+            destructive?: string;
+            destructiveForeground?: string;
+            input?: string;
+            ring?: string;
+        };
+        dark: {
+            background: string;
+            card: string;
+            popover: string;
+            border: string;
+            input: string;
+            muted: string;
+            mutedForeground: string;
+            accent: string;
+            primary: string;
+            primaryForeground: string;
+            ring: string;
+            destructive: string;
+            radius: string;
+            fontFamily: string;
+            foreground?: string;
+            cardForeground?: string;
+            popoverForeground?: string;
+            secondary?: string;
+            secondaryForeground?: string;
+            accentForeground?: string;
+            destructiveForeground?: string;
+        };
+    };
     light: {
         light: DataTableTokens | undefined;
     };

package/dist/index.d.ts

@@ -118,6 +118,54 @@ declare function tokensToCssBlock(tokens?: DataTableTokens): string;
  */
 declare const themePresets: {
     neutral: DataTableModedTheme;
+    graphite: {
+        light: {
+            background: string;
+            card: string;
+            border: string;
+            radius: string;
+            fontFamily: string;
+            foreground?: string;
+            cardForeground?: string;
+            popover?: string;
+            popoverForeground?: string;
+            primary?: string;
+            primaryForeground?: string;
+            secondary?: string;
+            secondaryForeground?: string;
+            muted?: string;
+            mutedForeground?: string;
+            accent?: string;
+            accentForeground?: string;
+            destructive?: string;
+            destructiveForeground?: string;
+            input?: string;
+            ring?: string;
+        };
+        dark: {
+            background: string;
+            card: string;
+            popover: string;
+            border: string;
+            input: string;
+            muted: string;
+            mutedForeground: string;
+            accent: string;
+            primary: string;
+            primaryForeground: string;
+            ring: string;
+            destructive: string;
+            radius: string;
+            fontFamily: string;
+            foreground?: string;
+            cardForeground?: string;
+            popoverForeground?: string;
+            secondary?: string;
+            secondaryForeground?: string;
+            accentForeground?: string;
+            destructiveForeground?: string;
+        };
+    };
     light: {
         light: DataTableTokens | undefined;
     };

package/dist/index.js

@@ -1912,7 +1912,7 @@ function EditableCell({
       {
         className: cn(
           "flex h-7 items-center gap-1.5 rounded px-1.5 text-sm",
-          isEditable && "cursor-text outline-1 outline-transparent transition-colors hover:bg-muted/60 hover:outline-border",
+          isEditable && "cursor-text transition-colors hover:bg-muted/60",
           align === "right" && "justify-end",
           align === "center" && "justify-center"
         ),
@@ -1935,6 +1935,7 @@ function EditableCell({
       return /* @__PURE__ */ jsx(
         "select",
         {
+          "data-cell-editor": "",
           value: String(local ?? ""),
           onChange: (e) => {
             setLocal(e.target.value);
@@ -1956,7 +1957,15 @@ function EditableCell({
         value: String(local ?? ""),
         onValueChange: (v) => commit(v),
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 w-full text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              "data-cell-editor": "",
+              size: "sm",
+              className: "h-7 w-full text-xs focus-visible:ring-0",
+              children: /* @__PURE__ */ jsx(SelectValue, {})
+            }
+          ),
           /* @__PURE__ */ jsx(SelectContent, { children: opts.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
         ]
       }
@@ -1966,6 +1975,8 @@ function EditableCell({
     return /* @__PURE__ */ jsx("div", { className: "flex h-7 items-center justify-center", children: /* @__PURE__ */ jsx(
       Checkbox,
       {
+        "data-cell-editor": "",
+        className: "focus-visible:ring-0",
         checked: !!local,
         onCheckedChange: (c) => commit(!!c),
         autoFocus: true
@@ -1975,6 +1986,7 @@ function EditableCell({
   return /* @__PURE__ */ jsx(
     Input,
     {
+      "data-cell-editor": "",
       ref: inputRef,
       type: editor === "number" || editor === "currency" ? "number" : editor === "date" ? "date" : "text",
       value: local == null ? "" : String(local),
@@ -1988,7 +2000,7 @@ function EditableCell({
       onBlur: () => commit(local),
       onKeyDown: handleKey,
       className: cn(
-        "h-7 px-1.5 text-sm",
+        "h-7 px-1.5 text-sm focus-visible:ring-0",
         align === "right" && "text-right",
         align === "center" && "text-center"
       )
@@ -2105,7 +2117,7 @@ function buildPreset(hue, chroma = 0.03) {
       border: `oklch(0.9 ${c * 0.8} ${hue})`,
       input: `oklch(0.9 ${c * 0.8} ${hue})`,
       ring: `oklch(0.55 0.2 ${hue} / 0.5)`,
-      radius: "0.625rem"
+      radius: "0.375rem"
     },
     dark: {
       background: `oklch(0.16 ${c * 0.6} ${hue})`,
@@ -2127,7 +2139,7 @@ function buildPreset(hue, chroma = 0.03) {
       border: `oklch(0.27 ${c * 0.8} ${hue})`,
       input: `oklch(0.27 ${c * 0.8} ${hue})`,
       ring: `oklch(0.7 0.18 ${hue} / 0.5)`,
-      radius: "0.625rem"
+      radius: "0.375rem"
     }
   };
 }
@@ -2167,7 +2179,7 @@ var neutral = {
     border: "oklch(0.922 0 0)",
     input: "oklch(0.922 0 0)",
     ring: "oklch(0.708 0 0)",
-    radius: "0.625rem"
+    radius: "0.375rem"
   },
   dark: {
     background: "oklch(0.145 0 0)",
@@ -2189,11 +2201,38 @@ var neutral = {
     border: "oklch(0.269 0 0)",
     input: "oklch(0.269 0 0)",
     ring: "oklch(0.439 0 0)",
-    radius: "0.625rem"
+    radius: "0.375rem"
   }
 };
 var themePresets = {
   neutral,
+  graphite: {
+    light: {
+      ...neutral.light,
+      background: "#fafafa",
+      card: "#ffffff",
+      border: "#e5e5e5",
+      radius: "0.375rem",
+      fontFamily: "'Geist', sans-serif"
+    },
+    dark: {
+      ...neutral.dark,
+      background: "#101112",
+      card: "#101112",
+      popover: "#17191b",
+      border: "#292c2f",
+      input: "#303438",
+      muted: "#1b1e21",
+      mutedForeground: "#9ba2aa",
+      accent: "#24282d",
+      primary: "#edf0f3",
+      primaryForeground: "#101112",
+      ring: "#84b8ff",
+      destructive: "#fb7185",
+      radius: "0.375rem",
+      fontFamily: "'Geist', sans-serif"
+    }
+  },
   light: { light: neutral.light },
   dark: { light: neutral.dark },
   violet: buildPreset(285),
@@ -2557,9 +2596,7 @@ function getPinningStyles(column) {
     boxShadow: isLast ? "1px 0 0 0 var(--border)" : isFirst ? "-1px 0 0 0 var(--border)" : void 0
   };
 }
-var DataTableEditingContext = createContext(
-  null
-);
+var DataTableEditingContext = createContext(null);
 function useEditingContext() {
   const ctx = useContext(DataTableEditingContext);
   if (!ctx) throw new Error("DataTable editing context missing");
@@ -2570,13 +2607,7 @@ function DefaultCellHost(ctx) {
   return value == null ? null : String(value);
 }
 function EditableCellHost(ctx) {
-  const {
-    editingCell,
-    editingRowId,
-    setEditingCell,
-    setRowDraft,
-    onCellEdit
-  } = useEditingContext();
+  const { editingCell, editingRowId, setEditingCell, setRowDraft, onCellEdit } = useEditingContext();
   const colId = ctx.column.id;
   const rowId = ctx.row.id;
   const isCellEdit = editingCell?.rowId === rowId && editingCell.colId === colId;
@@ -2753,12 +2784,13 @@ function DataTable({
     () => `dyno-grid-${rawInstanceId.replace(/[^a-zA-Z0-9]/g, "")}`,
     [rawInstanceId]
   );
-  const { lightStyle, darkCss } = useMemo(() => {
+  const { lightStyle, lightCss, darkCss } = useMemo(() => {
     const { light, dark } = splitTheme(theme);
     const lightTokens = isolate ? { ...ISOLATE_LIGHT_TOKENS, ...light ?? {} } : light;
     const darkTokens = isolate ? { ...ISOLATE_DARK_TOKENS, ...dark ?? light ?? {} } : dark;
     return {
       lightStyle: tokensToStyle(lightTokens),
+      lightCss: tokensToCssBlock(lightTokens),
       darkCss: darkTokens ? tokensToCssBlock(darkTokens) : null
     };
   }, [theme, isolate]);
@@ -2808,19 +2840,17 @@ function DataTable({
   const [columnVisibility, setColumnVisibility] = useState(
     initialColumnVisibility ?? {}
   );
-  const [columnPinning, setColumnPinning] = useState(
-    () => {
-      const base = initialColumnPinning ?? { left: [], right: [] };
-      const left = [...base.left ?? []];
-      const right = [...base.right ?? []];
-      const hasExpandColumn = !!(renderSubRow || getSubRows);
-      if (hasExpandColumn && left.includes("__select") && !left.includes("__expand")) {
-        const idx = left.indexOf("__select");
-        left.splice(idx + 1, 0, "__expand");
-      }
-      return { left, right };
+  const [columnPinning, setColumnPinning] = useState(() => {
+    const base = initialColumnPinning ?? { left: [], right: [] };
+    const left = [...base.left ?? []];
+    const right = [...base.right ?? []];
+    const hasExpandColumn = !!(renderSubRow || getSubRows);
+    if (hasExpandColumn && left.includes("__select") && !left.includes("__expand")) {
+      const idx = left.indexOf("__select");
+      left.splice(idx + 1, 0, "__expand");
     }
-  );
+    return { left, right };
+  });
   const [columnSizing, setColumnSizing] = useState({});
   const [rowSelection, setRowSelection] = useState({});
   const [expanded, setExpanded] = useState({});
@@ -3006,7 +3036,9 @@ function DataTable({
     customRowActions?.length
   ]);
   const [columnOrder, setColumnOrder] = useState(
-    () => augmentedColumns.map((c) => c.id ?? c.accessorKey ?? "")
+    () => augmentedColumns.map(
+      (c) => c.id ?? c.accessorKey ?? ""
+    )
   );
   useEffect(() => {
     const next = augmentedColumns.map(
@@ -3144,7 +3176,9 @@ function DataTable({
   const selectionCallback = useRef(onSelectionChange);
   selectionCallback.current = onSelectionChange;
   useEffect(() => {
-    selectionCallback.current?.(table.getSelectedRowModel().flatRows.map((row) => row.original));
+    selectionCallback.current?.(
+      table.getSelectedRowModel().flatRows.map((row) => row.original)
+    );
   }, [rowSelection, mergedData, table]);
   const visibleLeafCount = table.getVisibleLeafColumns().length;
   const editingContextValue = useMemo(
@@ -3196,12 +3230,15 @@ function DataTable({
             DENSITY_CLASS[density],
             className
           ),
-          style: lightStyle,
+          style: darkCss ? void 0 : lightStyle,
           children: [
             darkCss && /* @__PURE__ */ jsxs("style", { children: [
+              `[data-dyno-grid="${instanceId}"]{${lightCss}}`,
               `@media (prefers-color-scheme: dark){[data-dyno-grid="${instanceId}"]{${darkCss}}}`,
               `.dark [data-dyno-grid="${instanceId}"]{${darkCss}}`,
-              `[data-dyno-grid="${instanceId}"].dark{${darkCss}}`
+              `.light [data-dyno-grid="${instanceId}"]{${lightCss}}`,
+              `[data-dyno-grid="${instanceId}"].dark{${darkCss}}`,
+              `[data-dyno-grid="${instanceId}"].light{${lightCss}}`
             ] }),
             /* @__PURE__ */ jsx(
               DataTableToolbar,
@@ -3228,71 +3265,83 @@ function DataTable({
                 "table",
                 {
                   "aria-label": ariaLabel,
-                  className: cn("w-full caption-bottom text-sm", striped && "[&_tbody>tr:nth-child(even)]:bg-muted/25"),
+                  className: cn(
+                    "w-full caption-bottom text-sm",
+                    striped && "[&_tbody>tr:nth-child(even)]:bg-muted/25"
+                  ),
                   style: {
                     width: table.getCenterTotalSize() ? void 0 : "100%",
                     minWidth: "100%"
                   },
                   children: [
-                    /* @__PURE__ */ jsx("thead", { className: cn("bg-card", stickyHeader && "sticky top-0 z-10"), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: hg.headers.map((header) => {
-                      const meta = header.column.columnDef.meta;
-                      const isUtility = header.column.id === "__select" || header.column.id === "__expand" || header.column.id === "__actions";
-                      const isPinned = !!header.column.getIsPinned();
-                      const canReorder = !isUtility && f.reordering;
-                      const isDropTarget = canReorder && dragOverColId === header.column.id;
-                      const isBeingDragged = canReorder && activeReorderId === header.column.id;
-                      return /* @__PURE__ */ jsxs(
-                        "th",
-                        {
-                          colSpan: header.colSpan,
-                          "data-col-id": header.column.id,
-                          onPointerDown: canReorder ? onHeaderPointerDown(header.column.id) : void 0,
-                          onPointerMove: canReorder ? onHeaderPointerMove : void 0,
-                          onPointerUp: canReorder ? onHeaderPointerUp : void 0,
-                          onPointerCancel: canReorder ? onHeaderPointerUp : void 0,
-                          style: {
-                            width: header.getSize(),
-                            ...getPinningStyles(header.column),
-                            ...isPinned ? { zIndex: 2 } : {}
-                          },
-                          className: cn(
-                            "group/th relative h-9 px-2 text-left align-middle text-xs font-medium text-muted-foreground select-none",
-                            canReorder && "cursor-grab active:cursor-grabbing",
-                            isPinned && "bg-card",
-                            isBeingDragged && "opacity-50",
-                            isDropTarget && "bg-primary/10 ring-2 ring-inset ring-primary/40",
-                            meta?.headerClassName
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                              canReorder && /* @__PURE__ */ jsx(
-                                GripVerticalIcon,
-                                {
-                                  className: "-ml-1 size-3 shrink-0 text-muted-foreground/40 opacity-0 transition group-hover/th:opacity-100",
-                                  "aria-hidden": "true"
-                                }
+                    /* @__PURE__ */ jsx(
+                      "thead",
+                      {
+                        className: cn("bg-card", stickyHeader && "sticky top-0 z-10"),
+                        children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: hg.headers.map((header) => {
+                          const meta = header.column.columnDef.meta;
+                          const isUtility = header.column.id === "__select" || header.column.id === "__expand" || header.column.id === "__actions";
+                          const isPinned = !!header.column.getIsPinned();
+                          const canReorder = !isUtility && f.reordering;
+                          const isDropTarget = canReorder && dragOverColId === header.column.id;
+                          const isBeingDragged = canReorder && activeReorderId === header.column.id;
+                          return /* @__PURE__ */ jsxs(
+                            "th",
+                            {
+                              colSpan: header.colSpan,
+                              "data-col-id": header.column.id,
+                              onPointerDown: canReorder ? onHeaderPointerDown(header.column.id) : void 0,
+                              onPointerMove: canReorder ? onHeaderPointerMove : void 0,
+                              onPointerUp: canReorder ? onHeaderPointerUp : void 0,
+                              onPointerCancel: canReorder ? onHeaderPointerUp : void 0,
+                              style: {
+                                width: header.getSize(),
+                                ...getPinningStyles(header.column),
+                                ...isPinned ? { zIndex: 2 } : {}
+                              },
+                              className: cn(
+                                "group/th relative h-9 px-2 text-left align-middle text-xs font-medium text-muted-foreground select-none",
+                                canReorder && "cursor-grab active:cursor-grabbing",
+                                isPinned && "bg-card",
+                                isBeingDragged && "opacity-50",
+                                isDropTarget && "bg-primary/10 ring-2 ring-primary/40 ring-inset",
+                                meta?.headerClassName
                               ),
-                              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
-                            ] }),
-                            header.column.getCanResize() && /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                "data-no-drag": true,
-                                onPointerDown: (e) => e.stopPropagation(),
-                                onMouseDown: header.getResizeHandler(),
-                                onTouchStart: header.getResizeHandler(),
-                                onDoubleClick: () => header.column.resetSize(),
-                                className: cn(
-                                  "absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none select-none bg-transparent transition-colors hover:bg-primary/40",
-                                  header.column.getIsResizing() && "bg-primary"
+                              children: [
+                                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                                  canReorder && /* @__PURE__ */ jsx(
+                                    GripVerticalIcon,
+                                    {
+                                      className: "-ml-1 size-3 shrink-0 text-muted-foreground/40 opacity-0 transition group-hover/th:opacity-100",
+                                      "aria-hidden": "true"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header.isPlaceholder ? null : flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext()
+                                  ) })
+                                ] }),
+                                header.column.getCanResize() && /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    "data-no-drag": true,
+                                    onPointerDown: (e) => e.stopPropagation(),
+                                    onMouseDown: header.getResizeHandler(),
+                                    onTouchStart: header.getResizeHandler(),
+                                    onDoubleClick: () => header.column.resetSize(),
+                                    className: cn(
+                                      "absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none bg-transparent transition-colors select-none hover:bg-primary/40",
+                                      header.column.getIsResizing() && "bg-primary"
+                                    )
+                                  }
                                 )
-                              }
-                            )
-                          ]
-                        },
-                        header.id
-                      );
-                    }) }, hg.id)) }),
+                              ]
+                            },
+                            header.id
+                          );
+                        }) }, hg.id))
+                      }
+                    ),
                     /* @__PURE__ */ jsx("tbody", { children: effectiveIsLoading ? renderSkeleton(visibleLeafCount, pagination.pageSize) : sourceError && rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                       "td",
                       {
@@ -3336,7 +3385,13 @@ function DataTable({
                 labels.refreshing
               ] })
             ] }),
-            f.pagination && /* @__PURE__ */ jsx(DataTablePagination, { table, pageSizeOptions }),
+            f.pagination && /* @__PURE__ */ jsx(
+              DataTablePagination,
+              {
+                table,
+                pageSizeOptions
+              }
+            ),
             /* @__PURE__ */ jsx(
               DataTableViewSheet,
               {