@bmsuisse/datagrid 0.30.0 → 0.31.0

package/dist/index.js

@@ -653,11 +653,24 @@ function toDate(value) {
   }
   return null;
 }
+var SWISS_CURRENCY_MARKER = /^(?:chf|s?fr\.?)\s+|\s+(?:chf|s?fr\.?)$/gi;
+var SWISS_THOUSANDS_SEPARATOR = /(\d)['’](\d{3})/;
+function stripSwissNumberFormatting(raw) {
+  const withoutCurrency = raw.replace(SWISS_CURRENCY_MARKER, "");
+  let stripped = withoutCurrency;
+  while (SWISS_THOUSANDS_SEPARATOR.test(stripped)) {
+    stripped = stripped.replace(SWISS_THOUSANDS_SEPARATOR, "$1$2");
+  }
+  return stripped;
+}
 function toNumber(value) {
   if (typeof value === "number") return Number.isNaN(value) ? null : value;
   if (typeof value === "string" && value.trim() !== "") {
-    const parsed = Number(value);
-    return Number.isNaN(parsed) ? null : parsed;
+    const trimmed = value.trim();
+    const parsed = Number(trimmed);
+    if (!Number.isNaN(parsed)) return parsed;
+    const swiss = Number(stripSwissNumberFormatting(trimmed));
+    return Number.isNaN(swiss) ? null : swiss;
   }
   return null;
 }
@@ -2169,6 +2182,8 @@ function useCellEditingState(cellEditing, getRowId) {
     return override.value;
   }
   const ctx = cellEditing ? {
+    alwaysEdit: cellEditing.alwaysEdit ?? false,
+    disabled: cellEditing.disabled ?? false,
     editingCell,
     initialText,
     hasDraft,
@@ -2182,6 +2197,7 @@ function useCellEditingState(cellEditing, getRowId) {
     onCommitEdit,
     onCommitValue,
     onSetError,
+    applyChange: (change) => applyChanges([change]),
     consumeJustCommitted
   } : void 0;
   const ctxRef = useRef8(void 0);
@@ -2341,7 +2357,12 @@ function matchEnumOption(options, raw) {
   const lowered = trimmed.toLowerCase();
   return options.find((option) => option.label.toLowerCase() === lowered)?.value;
 }
+var EXCEL_ERROR_STRINGS = /* @__PURE__ */ new Set(["#N/A", "#DIV/0!", "#REF!", "#VALUE!", "#NAME?", "#NULL!", "#NUM!", "#SPILL!", "#CALC!"]);
+function isExcelErrorString(raw) {
+  return EXCEL_ERROR_STRINGS.has(raw.trim());
+}
 function coerceValueForColumn(column, raw) {
+  if (column.type !== "string" && isExcelErrorString(raw)) return void 0;
   switch (column.type) {
     case "string":
       return { value: raw };
@@ -2400,7 +2421,8 @@ function rangeToTsv(range, rows, rowIds, columns, columnIds, getRowId) {
   return lines.join("\n");
 }
 function parseTsv(text) {
-  const normalized = text.replace(/\r\n/g, "\n");
+  const withoutBom = text.startsWith("\uFEFF") ? text.slice(1) : text;
+  const normalized = withoutBom.replace(/\r\n/g, "\n");
   const rows = [];
   let row = [];
   let field = "";
@@ -2770,12 +2792,69 @@ import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { Fragment as Fragment3, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef11, useState as useState13 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef11, useState as useState14 } from "react";
+
+// src/cell-editing/renderAlwaysEditCell.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function AlwaysEditCell(props) {
+  const { column, row, rawValue, ctx } = props;
+  const rowId = ctx.getRowId(row);
+  const resolvedValue = ctx.resolveValue(rowId, column.id, rawValue);
+  const [draft, setDraft] = useState10(void 0);
+  if (!isEditable(column, row)) {
+    return /* @__PURE__ */ jsx32("span", { "data-testid": `cell-${rowId}-${column.id}`, className: "block w-full", children: column.cell ? column.cell(resolvedValue, row) : defaultFormat(column, resolvedValue) });
+  }
+  const isAtomic = isAtomicEditorType(column.type);
+  const error = ctx.getError(rowId, column.id);
+  const draftIsFresh = draft !== void 0 && resolvedValue === draft.baseline;
+  const currentValue = draftIsFresh ? draft.value : resolvedValue;
+  function validate(candidate) {
+    return column.validateEdit?.(candidate, row);
+  }
+  function commit(value) {
+    ctx.applyChange({ rowId, row, columnId: column.id, previousValue: resolvedValue, value });
+    setDraft(void 0);
+  }
+  const onChange = (next) => {
+    const message = validate(next);
+    ctx.onSetError(rowId, column.id, message);
+    if (isAtomic && !message) {
+      commit(next);
+      return;
+    }
+    setDraft({ value: next, baseline: resolvedValue });
+  };
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      ctx.onSetError(rowId, column.id, void 0);
+      setDraft(void 0);
+      return;
+    }
+    const isMultilineNewline = column.type === "string" && column.multiline && event.key === "Enter" && event.shiftKey;
+    if (isMultilineNewline) return;
+    if (isAtomic || event.key !== "Enter" && event.key !== "Tab") return;
+    if (!draftIsFresh) return;
+    const message = validate(draft.value);
+    if (message) {
+      event.stopPropagation();
+      return;
+    }
+    commit(draft.value);
+  }
+  function handleBlur() {
+    if (isAtomic || !draftIsFresh) return;
+    if (validate(draft.value)) setDraft(void 0);
+    else commit(draft.value);
+  }
+  return /* @__PURE__ */ jsx32("fieldset", { disabled: ctx.disabled, onKeyDown: handleKeyDown, onBlur: handleBlur, className: "contents", children: column.renderEditCell ? column.renderEditCell(currentValue, row, onChange, error, false) : renderDefaultEditWidget(column, rowId, currentValue, onChange, error, false) });
+}
 
 // src/hooks/useGroupExpansion.ts
-import { useCallback as useCallback3, useState as useState10 } from "react";
+import { useCallback as useCallback3, useState as useState11 } from "react";
 function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onExpandedGroupsChange) {
-  const [internalExpandedGroups, setInternalExpandedGroups] = useState10({});
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState11({});
   const expandedGroups = controlledExpandedGroups ?? internalExpandedGroups;
   const updateExpandedGroups = useCallback3(
     (next) => {
@@ -2798,10 +2877,10 @@ function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onEx
 }
 
 // src/hooks/useStickyGroupHeaderTop.ts
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState11 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState12 } from "react";
 function useStickyGroupHeaderTop(enabled) {
   const theadRef = useRef9(null);
-  const [groupHeaderTop, setGroupHeaderTop] = useState11(0);
+  const [groupHeaderTop, setGroupHeaderTop] = useState12(0);
   useLayoutEffect3(() => {
     if (!enabled) return;
     const theadEl = theadRef.current;
@@ -2865,7 +2944,7 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo7, useState as useState12 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo7, useState as useState13 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
 import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef10 } from "react";
@@ -2903,7 +2982,7 @@ function nextSortDir(current, descFirst) {
   return void 0;
 }
 function useGridState(dataSource, initialState, externalState) {
-  const [state, setState] = useState12(
+  const [state, setState] = useState13(
     () => externalState ?? { ...DEFAULT_STATE, ...initialState }
   );
   const notifyRaw = useCallback4(
@@ -2992,12 +3071,16 @@ function useGridState(dataSource, initialState, externalState) {
 }
 
 // src/grid/DataGrid.tsx
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
 var DETAIL_COLUMN_WIDTH = 44;
 var ROW_ACTIONS_COLUMN_WIDTH = 44;
 var EMPTY_ID_ARRAY = [];
+function isNativeTextFieldTarget(event) {
+  const tag = event.target?.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA";
+}
 var STRUCTURAL_ZEBRA_BG_CLASS = "bg-[color-mix(in_srgb,var(--color-foreground)_5%,var(--color-background))]";
 function pinnedOffsets(visibleColumns, side, getSize, leadingOffset) {
   const offsets = /* @__PURE__ */ new Map();
@@ -3030,7 +3113,11 @@ function toTanstackColumns(columns, editingCtxRef, cellEditingCtxRef) {
     header: column.header,
     size: column.width,
     accessorFn: (row) => getColumnValue(column, row),
-    cell: (info) => cellEditingCtxRef.current ? renderCellModeCell(column, info.row.original, info.getValue(), cellEditingCtxRef.current) : renderEditableCell(column, info.row.original, info.getValue(), editingCtxRef.current)
+    cell: (info) => {
+      const cellEditingCtx = cellEditingCtxRef.current;
+      if (!cellEditingCtx) return renderEditableCell(column, info.row.original, info.getValue(), editingCtxRef.current);
+      return cellEditingCtx.alwaysEdit ? /* @__PURE__ */ jsx33(AlwaysEditCell, { column, row: info.row.original, rawValue: info.getValue(), ctx: cellEditingCtx }) : renderCellModeCell(column, info.row.original, info.getValue(), cellEditingCtx);
+    }
   }));
 }
 function DataGrid({
@@ -3071,19 +3158,19 @@ function DataGrid({
     initialState,
     gridState
   );
-  const [internalSelectedIds, setInternalSelectedIds] = useState13(/* @__PURE__ */ new Set());
+  const [internalSelectedIds, setInternalSelectedIds] = useState14(/* @__PURE__ */ new Set());
   const selectedIds = controlledSelectedIds ?? internalSelectedIds;
   function updateSelectedIds(next) {
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
-  const [internalColumnSizing, setInternalColumnSizing] = useState13({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState14({});
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   function updateColumnSizing(next) {
     setInternalColumnSizing(next);
     onColumnSizingChange?.(next);
   }
-  const [expandedIds, setExpandedIds] = useState13(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = useState14(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -3316,6 +3403,16 @@ function DataGrid({
       if (index !== void 0) virtualizer.scrollToIndex(index);
     }
   });
+  const clickCellRef = useRef11(null);
+  const dragMovedRef = useRef11(false);
+  function beginEditFromClick(cell) {
+    if (!cellEditingCtx) return;
+    if (cellEditingCtx.editingCell?.rowId === cell.rowId && cellEditingCtx.editingCell.columnId === cell.columnId) return;
+    const column = columnById.get(cell.columnId);
+    const row = findRowById(cell.rowId);
+    if (!column || row === void 0 || !isEditable(column, row)) return;
+    cellEditingCtx.onBeginEdit(cell);
+  }
   const pendingDragCellRef = useRef11(null);
   const dragRafRef = useRef11(null);
   useEffect9(() => {
@@ -3325,6 +3422,8 @@ function DataGrid({
       const rowId = cellEl?.dataset.cellRow;
       const columnId = cellEl?.dataset.cellCol;
       if (rowId === void 0 || columnId === void 0) return;
+      const anchor = clickCellRef.current;
+      if (anchor && (rowId !== anchor.rowId || columnId !== anchor.columnId)) dragMovedRef.current = true;
       pendingDragCellRef.current = { rowId, columnId };
       if (dragRafRef.current !== null) return;
       dragRafRef.current = requestAnimationFrame(() => {
@@ -3334,6 +3433,9 @@ function DataGrid({
     }
     function handleMouseUp() {
       cellSelection.endDrag();
+      const clickCell = clickCellRef.current;
+      clickCellRef.current = null;
+      if (clickCell && !clickCell.extend && !clickCell.wasEditing && !dragMovedRef.current) beginEditFromClick(clickCell);
     }
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
@@ -3399,6 +3501,11 @@ function DataGrid({
     const columnId = cellEl?.dataset.cellCol;
     if (rowId === void 0 || columnId === void 0) return;
     cellSelection.startSelection({ rowId, columnId }, { extend: event.shiftKey });
+    if (cellEditingCtx?.alwaysEdit) return;
+    const wasEditing = cellEditingCtx?.editingCell?.rowId === rowId && cellEditingCtx.editingCell.columnId === columnId;
+    clickCellRef.current = { rowId, columnId, extend: event.shiftKey, wasEditing };
+    dragMovedRef.current = false;
+    if (wasEditing) return;
     scrollRef.current?.focus();
   }
   const CELL_NAV_KEYS = {
@@ -3417,6 +3524,7 @@ function DataGrid({
   }
   function handleCellKeyDown(event) {
     if (!hasCellEditing || !cellEditingCtx) return;
+    if (cellEditingCtx.alwaysEdit) return;
     if (cellEditingCtx.editingCell && !cellEditingCtx.consumeJustCommitted()) return;
     const direction = CELL_NAV_KEYS[event.key];
     if (direction) {
@@ -3445,18 +3553,15 @@ function DataGrid({
     );
   }
   function handleCellDoubleClick(event) {
-    if (!hasCellEditing || !cellEditingCtx) return;
+    if (!hasCellEditing || !cellEditingCtx || cellEditingCtx.alwaysEdit) return;
     const cellEl = event.target.closest("[data-cell-row]");
     const rowId = cellEl?.dataset.cellRow;
     const columnId = cellEl?.dataset.cellCol;
     if (rowId === void 0 || columnId === void 0) return;
-    const column = columnById.get(columnId);
-    const row = findRowById(rowId);
-    if (!column || row === void 0 || !isEditable(column, row)) return;
-    cellEditingCtx.onBeginEdit({ rowId, columnId });
+    beginEditFromClick({ rowId, columnId });
   }
   function handleCopy(event) {
-    if (!hasCellEditing || !cellSelection.selection || cellEditingCtx?.editingCell) return;
+    if (!hasCellEditing || !cellSelection.selection || cellEditingCtx?.editingCell || isNativeTextFieldTarget(event)) return;
     event.preventDefault();
     const text = rangeToTsv(cellSelection.selection, rows, cellEditingRowIds, visibleColumns, cellEditingColumnIds, getRowId);
     event.clipboardData.setData("text/plain", text);
@@ -3473,7 +3578,7 @@ function DataGrid({
     return { rowId, row: rowData, columnId, previousValue: getColumnValue(column, rowData), value: coerced.value };
   }
   function handlePaste(event) {
-    if (!hasCellEditing || !cellSelection.selection || cellEditingCtx?.editingCell) return;
+    if (!hasCellEditing || !cellSelection.selection || cellEditingCtx?.editingCell || isNativeTextFieldTarget(event)) return;
     const text = event.clipboardData.getData("text/plain");
     event.preventDefault();
     const normalized = normalizeRange(cellSelection.selection, cellEditingRowIndex, buildIndexMap(cellEditingColumnIds));
@@ -3512,12 +3617,12 @@ function DataGrid({
           "data-testid": rowTestId,
           className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, isOddRow && "bg-foreground/5") : `divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
           children: [
-            showDetailColumn && /* @__PURE__ */ jsx32(
+            showDetailColumn && /* @__PURE__ */ jsx33(
               "td",
               {
                 className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
-                children: /* @__PURE__ */ jsx32(
+                children: /* @__PURE__ */ jsx33(
                   Button,
                   {
                     type: "button",
@@ -3529,7 +3634,7 @@ function DataGrid({
                       stopRowClick(event);
                       toggleRowExpanded(row.id);
                     },
-                    children: /* @__PURE__ */ jsx32(
+                    children: /* @__PURE__ */ jsx33(
                       ChevronRight,
                       {
                         className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
@@ -3540,12 +3645,12 @@ function DataGrid({
                 )
               }
             ),
-            showSelectionColumn && /* @__PURE__ */ jsx32(
+            showSelectionColumn && /* @__PURE__ */ jsx33(
               "td",
               {
                 className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
-                children: /* @__PURE__ */ jsx32(
+                children: /* @__PURE__ */ jsx33(
                   "input",
                   {
                     type: "checkbox",
@@ -3559,7 +3664,7 @@ function DataGrid({
             ),
             row.getAllCells().map((cell) => {
               const cellProps = bodyCellPropsByColumn.get(cell.column.id);
-              return /* @__PURE__ */ jsx32(
+              return /* @__PURE__ */ jsx33(
                 "td",
                 {
                   style: cellProps?.style,
@@ -3571,23 +3676,23 @@ function DataGrid({
                 cell.id
               );
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx32(
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx33(
               "td",
               {
                 className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
-                children: /* @__PURE__ */ jsx32(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
+                children: /* @__PURE__ */ jsx33(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
               }
             )
           ]
         }
       ),
-      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx32("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
+      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx33("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx33("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
   function renderGroupHeaderTbody(key, rows2, measureRef, dataIndex) {
     const expanded = isGroupExpanded(key);
-    return /* @__PURE__ */ jsx32("tbody", { ref: measureRef, "data-index": dataIndex, children: /* @__PURE__ */ jsx32("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33("tbody", { ref: measureRef, "data-index": dataIndex, children: /* @__PURE__ */ jsx33("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx33(
       "td",
       {
         colSpan: totalColumnCount,
@@ -3601,7 +3706,7 @@ function DataGrid({
             onClick: () => toggleGroupExpanded(key),
             "aria-expanded": expanded,
             children: [
-              /* @__PURE__ */ jsx32(
+              /* @__PURE__ */ jsx33(
                 ChevronRight,
                 {
                   className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
@@ -3641,7 +3746,7 @@ function DataGrid({
     // `overflow-x-auto` div scrolling horizontally) fighting over which one
     // a sticky header/pinned column is actually stuck relative to.
     /* @__PURE__ */ jsxs20("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
-      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx32(
+      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx33(
         EditingBar,
         {
           editing,
@@ -3656,15 +3761,15 @@ function DataGrid({
           selectedRows.length,
           " selected"
         ] }),
-        /* @__PURE__ */ jsx32(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
+        /* @__PURE__ */ jsx33(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
       ] }),
       /* @__PURE__ */ jsxs20("div", { className: "relative min-h-0 flex-1", children: [
-        loading && /* @__PURE__ */ jsx32(
+        loading && /* @__PURE__ */ jsx33(
           "div",
           {
             "data-testid": "datagrid-loading-overlay",
             className: "absolute inset-0 z-30 flex items-center justify-center bg-background/60",
-            children: /* @__PURE__ */ jsx32(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx33(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
           }
         ),
         /* @__PURE__ */ jsxs20(
@@ -3703,8 +3808,8 @@ function DataGrid({
                               onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
                               children: [
                                 headerContent,
-                                sortEntry?.dir === "asc" && /* @__PURE__ */ jsx32(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                                sortEntry?.dir === "desc" && /* @__PURE__ */ jsx32(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                                sortEntry?.dir === "asc" && /* @__PURE__ */ jsx33(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                                sortEntry?.dir === "desc" && /* @__PURE__ */ jsx33(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
                               ]
                             }
                           ) : (
@@ -3713,10 +3818,10 @@ function DataGrid({
                             // silently breaking any interactive content a column's own `renderHeader`
                             // embeds directly (bare filter inputs, "select/reject all" buttons) —
                             // clicks never reach them at all, even though nothing looks wrong visually.
-                            /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                            /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 px-1", children: headerContent })
                           ),
                           filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
-                            /* @__PURE__ */ jsx32(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx32(
+                            /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx33(
                               FunnelIcon7,
                               {
                                 className: cn(
@@ -3726,10 +3831,10 @@ function DataGrid({
                                 "aria-hidden": true
                               }
                             ) }) }),
-                            /* @__PURE__ */ jsx32(PopoverContent, { children: renderFilterWidget(column) })
+                            /* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
                           ] })
                         ] }),
-                        enableColumnResizing && /* @__PURE__ */ jsx32(
+                        enableColumnResizing && /* @__PURE__ */ jsx33(
                           "div",
                           {
                             "data-testid": `resize-handle-${column.id}`,
@@ -3742,7 +3847,7 @@ function DataGrid({
                     }
                     return /* @__PURE__ */ jsxs20(Fragment3, { children: [
                       hasHeaderGroups && /* @__PURE__ */ jsxs20("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
-                        showDetailColumn && /* @__PURE__ */ jsx32(
+                        showDetailColumn && /* @__PURE__ */ jsx33(
                           "th",
                           {
                             rowSpan: 2,
@@ -3751,13 +3856,13 @@ function DataGrid({
                             "aria-hidden": true
                           }
                         ),
-                        showSelectionColumn && /* @__PURE__ */ jsx32(
+                        showSelectionColumn && /* @__PURE__ */ jsx33(
                           "th",
                           {
                             rowSpan: 2,
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx32(
+                            children: /* @__PURE__ */ jsx33(
                               "input",
                               {
                                 type: "checkbox",
@@ -3769,7 +3874,7 @@ function DataGrid({
                           }
                         ),
                         headerRuns.map(
-                          (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx32(
+                          (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx33(
                             "th",
                             {
                               colSpan: run.columns.length,
@@ -3779,7 +3884,7 @@ function DataGrid({
                             `group-${run.label}-${run.columns[0].id}`
                           )
                         ),
-                        showRowActionsColumn && /* @__PURE__ */ jsx32(
+                        showRowActionsColumn && /* @__PURE__ */ jsx33(
                           "th",
                           {
                             rowSpan: 2,
@@ -3790,7 +3895,7 @@ function DataGrid({
                         )
                       ] }, `${headerGroup.id}-groups`),
                       /* @__PURE__ */ jsxs20("tr", { className: "divide-x divide-border", children: [
-                        !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx32(
+                        !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx33(
                           "th",
                           {
                             className: detailHeaderCellProps.className,
@@ -3798,12 +3903,12 @@ function DataGrid({
                             "aria-hidden": true
                           }
                         ),
-                        !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx32(
+                        !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx33(
                           "th",
                           {
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx32(
+                            children: /* @__PURE__ */ jsx33(
                               "input",
                               {
                                 type: "checkbox",
@@ -3819,7 +3924,7 @@ function DataGrid({
                           if (!column || hasHeaderGroups && !column.headerGroup) return null;
                           return renderLeafHeaderCell(column);
                         }),
-                        !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx32(
+                        !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx33(
                           "th",
                           {
                             className: rowActionsHeaderCellProps.className,
@@ -3831,8 +3936,8 @@ function DataGrid({
                     ] }, headerGroup.id);
                   }),
                   hasFilterRow && /* @__PURE__ */ jsxs20("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
-                    showDetailColumn && /* @__PURE__ */ jsx32("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
-                    showSelectionColumn && /* @__PURE__ */ jsx32(
+                    showDetailColumn && /* @__PURE__ */ jsx33("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
+                    showSelectionColumn && /* @__PURE__ */ jsx33(
                       "th",
                       {
                         className: selectionHeaderCellProps.className,
@@ -3841,9 +3946,9 @@ function DataGrid({
                     ),
                     visibleColumns.map((column) => {
                       const cellProps = filterHeaderCellPropsByColumn.get(column.id);
-                      return /* @__PURE__ */ jsx32("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
+                      return /* @__PURE__ */ jsx33("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
                     }),
-                    showRowActionsColumn && /* @__PURE__ */ jsx32(
+                    showRowActionsColumn && /* @__PURE__ */ jsx33(
                       "th",
                       {
                         className: rowActionsHeaderCellProps.className,
@@ -3852,8 +3957,8 @@ function DataGrid({
                     )
                   ] })
                 ] }),
-                rows.length === 0 ? /* @__PURE__ */ jsx32("tbody", { children: /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
-                  paddingTop > 0 && /* @__PURE__ */ jsx32("tbody", { children: /* @__PURE__ */ jsx32("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
+                rows.length === 0 ? /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { children: /* @__PURE__ */ jsx33("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
+                  paddingTop > 0 && /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
                   virtualItems.map(
                     (virtualItem) => renderFlatItem(
                       flatItems[virtualItem.index],
@@ -3861,10 +3966,10 @@ function DataGrid({
                       (el) => virtualizer.measureElement(el)
                     )
                   ),
-                  paddingBottom > 0 && /* @__PURE__ */ jsx32("tbody", { children: /* @__PURE__ */ jsx32("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
+                  paddingBottom > 0 && /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
                 ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
               ] }),
-              hasCellEditing && /* @__PURE__ */ jsx32(
+              hasCellEditing && /* @__PURE__ */ jsx33(
                 SelectionOverlay,
                 {
                   containerRef: scrollRef,
@@ -3890,7 +3995,7 @@ function DataGrid({
           ")"
         ] }),
         /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Button,
             {
               variant: "outline",
@@ -3900,7 +4005,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Button,
             {
               variant: "outline",
@@ -3964,7 +4069,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback5, useMemo as useMemo9, useState as useState14 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo9, useState as useState15 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -3976,7 +4081,7 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState14({});
+  const [internalExpanded, setInternalExpanded] = useState15({});
   const expanded = controlledExpanded ?? internalExpanded;
   const setExpanded = useCallback5(
     (updater) => {
@@ -3988,7 +4093,7 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [internalChildrenMap, setInternalChildrenMap] = useState14(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState15(/* @__PURE__ */ new Map());
   const childrenMap = controlledChildrenMap ?? internalChildrenMap;
   const setChildrenMap = useCallback5(
     (updater) => {
@@ -4000,8 +4105,8 @@ function useTreeState({
     },
     [controlledChildrenMap, onChildrenMapChange]
   );
-  const [loadingIds, setLoadingIds] = useState14(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = useState14(/* @__PURE__ */ new Map());
+  const [loadingIds, setLoadingIds] = useState15(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState15(/* @__PURE__ */ new Map());
   const resolveHasChildren = useMemo9(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
@@ -4081,7 +4186,7 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
 function renderCell(column, row, editingCtx) {
@@ -4098,7 +4203,7 @@ function TreeCell({
   editingCtx
 }) {
   return /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
-    flatRow.hasChildren ? /* @__PURE__ */ jsx33(
+    flatRow.hasChildren ? /* @__PURE__ */ jsx34(
       "button",
       {
         type: "button",
@@ -4110,14 +4215,14 @@ function TreeCell({
         "aria-label": flatRow.isExpanded ? "Collapse" : "Expand",
         "aria-expanded": flatRow.isExpanded,
         className: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-50",
-        children: isLoading ? /* @__PURE__ */ jsx33(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx33(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx33(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+        children: isLoading ? /* @__PURE__ */ jsx34(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx34(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx34(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
       }
-    ) : /* @__PURE__ */ jsx33("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx33("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
+    ) : /* @__PURE__ */ jsx34("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx34("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
     flatRow.isExpanded && error ? /* @__PURE__ */ jsxs21("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
-      /* @__PURE__ */ jsx33(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx34(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
       "Failed to load.",
-      /* @__PURE__ */ jsx33("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
+      /* @__PURE__ */ jsx34("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
     ] }) : null
   ] });
 }
@@ -4272,9 +4377,9 @@ function TreeDataGrid({
           isOddRow && "bg-foreground/5"
         ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
-          showSelectionColumn && /* @__PURE__ */ jsx33("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
+          showSelectionColumn && /* @__PURE__ */ jsx34("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);
-            return /* @__PURE__ */ jsx33(
+            return /* @__PURE__ */ jsx34(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -4285,7 +4390,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          visibleColumns.map((column) => /* @__PURE__ */ jsx33("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx33(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx34("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx34(
             TreeCell,
             {
               flatRow,
@@ -4298,7 +4403,7 @@ function TreeDataGrid({
               editingCtx: editingState.ctx
             }
           ) : renderCell(column, flatRow.row, editingState.ctx) }, column.id)),
-          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx33("td", { className: "p-2", children: /* @__PURE__ */ jsx33(
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx34("td", { className: "p-2", children: /* @__PURE__ */ jsx34(
             ActionsMenu,
             {
               items: rowActions,
@@ -4315,7 +4420,7 @@ function TreeDataGrid({
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
   return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
-    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx33(
+    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx34(
       EditingBar,
       {
         editing,
@@ -4326,15 +4431,15 @@ function TreeDataGrid({
         testIdPrefix: "tree-datagrid"
       }
     ),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         ref: scrollRef,
         className: shouldVirtualize ? "overflow-y-auto" : void 0,
         style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
         children: /* @__PURE__ */ jsxs21("table", { className: "w-full border-collapse text-sm", children: [
-          /* @__PURE__ */ jsx33("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx33("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
+            showSelectionColumn && /* @__PURE__ */ jsx34("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx34(
               Checkbox,
               {
                 "aria-label": "Select all visible rows",
@@ -4342,7 +4447,7 @@ function TreeDataGrid({
                 onCheckedChange: toggleAllVisibleSelected
               }
             ) }),
-            visibleColumns.map((column) => /* @__PURE__ */ jsx33(
+            visibleColumns.map((column) => /* @__PURE__ */ jsx34(
               "th",
               {
                 style: column.width ? { width: column.width } : void 0,
@@ -4351,12 +4456,12 @@ function TreeDataGrid({
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx33("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
+            showRowActionsColumn && /* @__PURE__ */ jsx34("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
           ] }) }),
-          /* @__PURE__ */ jsx33("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx33("tr", { children: /* @__PURE__ */ jsx33("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
+          /* @__PURE__ */ jsx34("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
             const groupExpanded = isGroupExpanded(bucket.key);
             return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-              /* @__PURE__ */ jsx33("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx34("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx34(
                 "td",
                 {
                   colSpan: totalColumnCount,
@@ -4373,7 +4478,7 @@ function TreeDataGrid({
                       onClick: () => toggleGroupExpanded(bucket.key),
                       "aria-expanded": groupExpanded,
                       children: [
-                        /* @__PURE__ */ jsx33(
+                        /* @__PURE__ */ jsx34(
                           ChevronRight2,
                           {
                             className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
@@ -4392,11 +4497,11 @@ function TreeDataGrid({
               })()
             ] }, `group-${bucket.key}`);
           }) : shouldVirtualize ? /* @__PURE__ */ jsxs21(Fragment6, { children: [
-            paddingTop > 0 && /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
+            paddingTop > 0 && /* @__PURE__ */ jsx34("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
             virtualItems.map(
               (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
             ),
-            paddingBottom > 0 && /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33(
+            paddingBottom > 0 && /* @__PURE__ */ jsx34("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx34(
               "td",
               {
                 colSpan: totalColumnCount,