@dynostack/react-grid 0.3.2 → 0.5.0

package/dist/index.cjs

@@ -283,15 +283,21 @@ function PopoverContent({
 }
 
 // src/export.ts
+function sanitizeSpreadsheetValue(value) {
+  if (value == null) return "";
+  const text = String(value);
+  if (typeof value === "string" && (/^[\s\u0000-\u001f]*[=+\-@＝＋－＠]/u.test(text) || /^[\t\r\n]/.test(text))) return `'${text}`;
+  return text;
+}
 function escapeCsv(value) {
   if (value === null || value === void 0) return "";
-  const s = String(value);
+  const s = sanitizeSpreadsheetValue(value);
   if (/[",\n\r]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
   return s;
 }
 function escapeHtml(value) {
   if (value === null || value === void 0) return "";
-  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return sanitizeSpreadsheetValue(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function getExportRows(table) {
   const visible = table.getVisibleLeafColumns().filter((c) => {
@@ -1901,7 +1907,7 @@ function EditableCell({
     if (typeof flag === "function") return flag(row.original);
     return flag;
   })();
-  if (!isEditing) {
+  if (!isEditing || !isEditable) {
     const display = renderDisplay(initial, editor, meta);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1918,7 +1924,9 @@ function EditableCell({
       }
     );
   }
-  const commit = (value) => onCommit(value);
+  const commit = (value) => {
+    if (isEditable) onCommit(value);
+  };
   const handleKey = (e) => {
     if (e.key === "Enter") commit(local);
     else if (e.key === "Escape") onCancel();
@@ -2048,6 +2056,9 @@ var TOKEN_TO_VAR = {
   radius: "--radius",
   fontFamily: "--font-family"
 };
+function isSafeToken(value) {
+  return typeof value === "string" && !/[;{}<>@\\\u0000-\u001f]/.test(value) && !/\/\*|\*\/|url\s*\(|expression\s*\(/i.test(value);
+}
 function isModed(theme) {
   if (!theme) return false;
   return "light" in theme || "dark" in theme;
@@ -2056,8 +2067,8 @@ function tokensToStyle(tokens) {
   if (!tokens) return {};
   const out = {};
   for (const [k, v] of Object.entries(tokens)) {
-    if (v == null) continue;
-    const cssVar = TOKEN_TO_VAR[k];
+    if (!isSafeToken(v)) continue;
+    const cssVar = Object.prototype.hasOwnProperty.call(TOKEN_TO_VAR, k) ? TOKEN_TO_VAR[k] : void 0;
     if (cssVar) out[cssVar] = v;
   }
   return out;
@@ -2096,7 +2107,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})`,
@@ -2118,7 +2129,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"
     }
   };
 }
@@ -2131,8 +2142,8 @@ function tokensToCssBlock(tokens) {
   if (!tokens) return "";
   const parts = [];
   for (const [k, v] of Object.entries(tokens)) {
-    if (v == null) continue;
-    const cssVar = TOKEN_TO_VAR[k];
+    if (!isSafeToken(v)) continue;
+    const cssVar = Object.prototype.hasOwnProperty.call(TOKEN_TO_VAR, k) ? TOKEN_TO_VAR[k] : void 0;
     if (cssVar) parts.push(`${cssVar}:${v}`);
   }
   return parts.join(";");
@@ -2158,7 +2169,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)",
@@ -2180,11 +2191,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),
@@ -2548,22 +2586,18 @@ function getPinningStyles(column) {
     boxShadow: isLast ? "1px 0 0 0 var(--border)" : isFirst ? "-1px 0 0 0 var(--border)" : void 0
   };
 }
-var DataTableEditingContext = react.createContext(
-  null
-);
+var DataTableEditingContext = react.createContext(null);
 function useEditingContext() {
   const ctx = react.useContext(DataTableEditingContext);
   if (!ctx) throw new Error("DataTable editing context missing");
   return ctx;
 }
+function DefaultCellHost(ctx) {
+  const value = ctx.getValue();
+  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;
@@ -2677,6 +2711,7 @@ var DENSITY_CLASS = {
   default: "",
   comfortable: "[&_tbody_td]:py-2"
 };
+var EMPTY_DATA = [];
 function DataTable({
   data,
   columns,
@@ -2700,6 +2735,12 @@ function DataTable({
   pageSizeOptions,
   initialColumnPinning,
   initialColumnVisibility,
+  initialSorting,
+  onSelectionChange,
+  ariaLabel = "Data table",
+  striped = false,
+  stickyHeader = false,
+  maxHeight,
   globalFilter: globalFilterProp,
   onGlobalFilterChange,
   className,
@@ -2733,12 +2774,13 @@ function DataTable({
     () => `dyno-grid-${rawInstanceId.replace(/[^a-zA-Z0-9]/g, "")}`,
     [rawInstanceId]
   );
-  const { lightStyle, darkCss } = react.useMemo(() => {
+  const { lightStyle, lightCss, darkCss } = react.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]);
@@ -2776,7 +2818,7 @@ function DataTable({
     }
     setConfirmCtx(null);
   };
-  const [sorting, setSorting] = react.useState([]);
+  const [sorting, setSorting] = react.useState(initialSorting ?? []);
   const [columnFilters, setColumnFilters] = react.useState([]);
   const [internalGlobalFilter, setInternalGlobalFilter] = react.useState("");
   const isControlledFilter = globalFilterProp !== void 0;
@@ -2788,19 +2830,17 @@ function DataTable({
   const [columnVisibility, setColumnVisibility] = react.useState(
     initialColumnVisibility ?? {}
   );
-  const [columnPinning, setColumnPinning] = react.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] = react.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] = react.useState({});
   const [rowSelection, setRowSelection] = react.useState({});
   const [expanded, setExpanded] = react.useState({});
@@ -2872,7 +2912,7 @@ function DataTable({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     ...dataSourceDeps
   ]);
-  const baseData = dataSourceEnabled ? sourceRows : data ?? [];
+  const baseData = dataSourceEnabled ? sourceRows : data ?? EMPTY_DATA;
   const effectiveIsLoading = dataSourceEnabled ? sourceLoading : isLoading;
   const effectiveIsFetching = dataSourceEnabled ? sourceFetching : isFetching;
   const effectiveOnRefresh = dataSourceEnabled ? () => setSourceRefreshKey((key) => key + 1) : onRefresh;
@@ -2916,7 +2956,7 @@ function DataTable({
             title: headerLabel
           }
         ),
-        cell: hasEditor ? EditableCellHost : original
+        cell: hasEditor ? EditableCellHost : original ?? DefaultCellHost
       };
     };
     const built = columns.map(wrap);
@@ -2986,7 +3026,9 @@ function DataTable({
     customRowActions?.length
   ]);
   const [columnOrder, setColumnOrder] = react.useState(
-    () => augmentedColumns.map((c) => c.id ?? c.accessorKey ?? "")
+    () => augmentedColumns.map(
+      (c) => c.id ?? c.accessorKey ?? ""
+    )
   );
   react.useEffect(() => {
     const next = augmentedColumns.map(
@@ -3028,10 +3070,10 @@ function DataTable({
     enableColumnFilters: f.filtering,
     enableColumnResizing: f.resizing,
     columnResizeMode: "onChange",
-    enableRowSelection: true,
+    enableRowSelection: enableSelection,
     enableExpanding: !!(renderSubRow || getSubRows),
     enablePinning: f.pinning,
-    manualPagination: isServerSideDataSource,
+    manualPagination: isServerSideDataSource || !f.pagination,
     manualSorting: isServerSideDataSource,
     manualFiltering: isServerSideDataSource,
     pageCount: isServerSideDataSource ? Math.max(1, Math.ceil(effectiveTotalRecords / pagination.pageSize)) : void 0,
@@ -3121,6 +3163,13 @@ function DataTable({
     setEditingRowId(tempId);
   } : void 0;
   const rows = table.getRowModel().rows;
+  const selectionCallback = react.useRef(onSelectionChange);
+  selectionCallback.current = onSelectionChange;
+  react.useEffect(() => {
+    selectionCallback.current?.(
+      table.getSelectedRowModel().flatRows.map((row) => row.original)
+    );
+  }, [rowSelection, mergedData, table]);
   const visibleLeafCount = table.getVisibleLeafColumns().length;
   const editingContextValue = react.useMemo(
     () => ({
@@ -3171,12 +3220,15 @@ function DataTable({
             DENSITY_CLASS[density],
             className
           ),
-          style: lightStyle,
+          style: darkCss ? void 0 : lightStyle,
           children: [
             darkCss && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               DataTableToolbar,
@@ -3198,75 +3250,88 @@ function DataTable({
                 labels
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-auto", style: { maxHeight }, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "table",
                 {
-                  className: "w-full caption-bottom text-sm",
+                  "aria-label": ariaLabel,
+                  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__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/70", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                              canReorder && /* @__PURE__ */ jsxRuntime.jsx(
-                                lucideReact.GripVerticalIcon,
-                                {
-                                  className: "-ml-1 size-3 shrink-0 text-muted-foreground/40 opacity-0 transition group-hover/th:opacity-100",
-                                  "aria-hidden": "true"
-                                }
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "thead",
+                      {
+                        className: cn("bg-card", stickyHeader && "sticky top-0 z-10"),
+                        children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) })
-                            ] }),
-                            header.column.getCanResize() && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                                  canReorder && /* @__PURE__ */ jsxRuntime.jsx(
+                                    lucideReact.GripVerticalIcon,
+                                    {
+                                      className: "-ml-1 size-3 shrink-0 text-muted-foreground/40 opacity-0 transition group-hover/th:opacity-100",
+                                      "aria-hidden": "true"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: header.isPlaceholder ? null : reactTable.flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext()
+                                  ) })
+                                ] }),
+                                header.column.getCanResize() && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tbody", { children: effectiveIsLoading ? renderSkeleton(visibleLeafCount, pagination.pageSize) : sourceError && rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
                       "td",
                       {
@@ -3310,7 +3375,13 @@ function DataTable({
                 labels.refreshing
               ] })
             ] }),
-            f.pagination && /* @__PURE__ */ jsxRuntime.jsx(DataTablePagination, { table, pageSizeOptions }),
+            f.pagination && /* @__PURE__ */ jsxRuntime.jsx(
+              DataTablePagination,
+              {
+                table,
+                pageSizeOptions
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               DataTableViewSheet,
               {
@@ -3401,6 +3472,7 @@ exports.exportToCsv = exportToCsv;
 exports.exportToExcel = exportToExcel;
 exports.isFilterActive = isFilterActive;
 exports.numberFilterFn = numberFilterFn;
+exports.sanitizeSpreadsheetValue = sanitizeSpreadsheetValue;
 exports.setFilterFn = setFilterFn;
 exports.splitTheme = splitTheme;
 exports.textFilterFn = textFilterFn;