@bmsuisse/datagrid 0.30.0 → 0.31.1

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;
 }
@@ -1464,25 +1477,36 @@ function EnumEditor({
   value,
   onChange,
   error,
-  autoFocus
+  autoFocus,
+  open,
+  onOpenChange
 }) {
   const errorId = editErrorId(rowId, column.id);
   return /* @__PURE__ */ jsxs11("div", { children: [
-    /* @__PURE__ */ jsxs11(Select, { value: value === null || value === void 0 ? "" : String(value), onValueChange: onChange, children: [
-      /* @__PURE__ */ jsx18(
-        SelectTrigger,
-        {
-          className: "h-8",
-          "aria-label": `Edit ${column.header}`,
-          "aria-invalid": error ? true : void 0,
-          "aria-describedby": error ? errorId : void 0,
-          "data-testid": `edit-${rowId}-${column.id}`,
-          autoFocus,
-          children: /* @__PURE__ */ jsx18(SelectValue, {})
-        }
-      ),
-      /* @__PURE__ */ jsx18(SelectContent, { children: column.options.map((option) => /* @__PURE__ */ jsx18(SelectItem, { value: option.value, children: option.label }, option.value)) })
-    ] }),
+    /* @__PURE__ */ jsxs11(
+      Select,
+      {
+        value: value === null || value === void 0 ? "" : String(value),
+        onValueChange: onChange,
+        open,
+        onOpenChange,
+        children: [
+          /* @__PURE__ */ jsx18(
+            SelectTrigger,
+            {
+              className: "h-8",
+              "aria-label": `Edit ${column.header}`,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": error ? errorId : void 0,
+              "data-testid": `edit-${rowId}-${column.id}`,
+              autoFocus,
+              children: /* @__PURE__ */ jsx18(SelectValue, {})
+            }
+          ),
+          /* @__PURE__ */ jsx18(SelectContent, { children: column.options.map((option) => /* @__PURE__ */ jsx18(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ]
+      }
+    ),
     error && /* @__PURE__ */ jsx18(EditFieldError, { id: errorId, message: error })
   ] });
 }
@@ -2169,6 +2193,8 @@ function useCellEditingState(cellEditing, getRowId) {
     return override.value;
   }
   const ctx = cellEditing ? {
+    alwaysEdit: cellEditing.alwaysEdit ?? false,
+    disabled: cellEditing.disabled ?? false,
     editingCell,
     initialText,
     hasDraft,
@@ -2182,6 +2208,7 @@ function useCellEditingState(cellEditing, getRowId) {
     onCommitEdit,
     onCommitValue,
     onSetError,
+    applyChange: (change) => applyChanges([change]),
     consumeJustCommitted
   } : void 0;
   const ctxRef = useRef8(void 0);
@@ -2341,7 +2368,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 +2432,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 +2803,123 @@ 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 useEffect10, useMemo as useMemo8, useRef as useRef11, useState as useState14 } from "react";
+
+// src/cell-editing/renderAlwaysEditCell.tsx
+import {
+  useEffect as useEffect7,
+  useState as useState10
+} from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function AlwaysEditCell(props) {
+  const { column, row, rawValue, ctx, atomicGesture } = props;
+  const rowId = ctx.getRowId(row);
+  const resolvedValue = ctx.resolveValue(rowId, column.id, rawValue);
+  const [draft, setDraft] = useState10(void 0);
+  const [enumOpen, setEnumOpen] = useState10(false);
+  const isBuiltinEnum = column.type === "enum" && !column.renderEditCell;
+  const shouldOpenEnumNow = isBuiltinEnum && (atomicGesture?.shouldOpenEnum(rowId, column.id) ?? false);
+  useEffect7(() => {
+    if (shouldOpenEnumNow) setEnumOpen(true);
+  }, [shouldOpenEnumNow]);
+  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);
+  }
+  function suppressNative(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    return true;
+  }
+  function handleModifierCapture(event) {
+    if (!isAtomic || isBuiltinEnum) return false;
+    if (!(event.shiftKey || event.ctrlKey || event.metaKey)) return false;
+    return suppressNative(event);
+  }
+  function handleEnumOpenCapture(event) {
+    if (!isBuiltinEnum || enumOpen) return false;
+    return suppressNative(event);
+  }
+  function handlePointerDownCapture(event) {
+    const suppressed = handleModifierCapture(event) || handleEnumOpenCapture(event);
+    if (suppressed) atomicGesture?.registerSelection(rowId, column.id, event.shiftKey);
+  }
+  function handleClickCapture(event) {
+    handleModifierCapture(event);
+    handleEnumOpenCapture(event);
+  }
+  return /* @__PURE__ */ jsx32(
+    "fieldset",
+    {
+      disabled: ctx.disabled,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      onPointerDownCapture: handlePointerDownCapture,
+      onClickCapture: handleClickCapture,
+      className: "contents",
+      children: column.type === "enum" && !column.renderEditCell ? /* @__PURE__ */ jsx32(
+        EnumEditor,
+        {
+          column,
+          rowId,
+          value: currentValue,
+          onChange,
+          error,
+          autoFocus: false,
+          open: enumOpen,
+          onOpenChange: setEnumOpen
+        }
+      ) : 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 +2942,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,15 +3009,15 @@ 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 useEffect9, useMemo as useMemo7, useState as useState13 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef10 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef10 } from "react";
 function useDebouncedCallback(callback, delayMs) {
   const callbackRef = useRef10(callback);
   callbackRef.current = callback;
   const timeoutRef = useRef10(void 0);
-  useEffect7(() => {
+  useEffect8(() => {
     return () => {
       clearTimeout(timeoutRef.current);
     };
@@ -2902,10 +3046,12 @@ function nextSortDir(current, descFirst) {
   if (current === first) return second;
   return void 0;
 }
-function useGridState(dataSource, initialState, externalState) {
-  const [state, setState] = useState12(
-    () => externalState ?? { ...DEFAULT_STATE, ...initialState }
-  );
+function useGridState(dataSource, initialState, externalState, showPagination = true) {
+  const [state, setState] = useState13(() => {
+    if (externalState) return externalState;
+    const pageSize = initialState?.pageSize ?? (showPagination ? DEFAULT_STATE.pageSize : Number.MAX_SAFE_INTEGER);
+    return { ...DEFAULT_STATE, ...initialState, pageSize };
+  });
   const notifyRaw = useCallback4(
     (next) => {
       if (dataSource.mode === "server") dataSource.onStateChange(next);
@@ -2923,7 +3069,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyRaw, cancelDebouncedNotify]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!externalState) return;
     cancelDebouncedNotify();
     setState(externalState);
@@ -2992,12 +3138,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();
@@ -3024,13 +3174,26 @@ function computeHeaderRuns(columns) {
   }
   return runs;
 }
-function toTanstackColumns(columns, editingCtxRef, cellEditingCtxRef) {
+function toTanstackColumns(columns, editingCtxRef, cellEditingCtxRef, atomicGestureRef) {
   return columns.map((column) => ({
     id: column.id,
     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,
+          atomicGesture: atomicGestureRef.current
+        }
+      ) : renderCellModeCell(column, info.row.original, info.getValue(), cellEditingCtx);
+    }
   }));
 }
 function DataGrid({
@@ -3069,21 +3232,22 @@ function DataGrid({
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
     initialState,
-    gridState
+    gridState,
+    showPagination
   );
-  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);
@@ -3105,6 +3269,7 @@ function DataGrid({
     hasCellEditing ? cellEditing : void 0,
     getRowId
   );
+  const atomicGestureRef = useRef11(void 0);
   const visibleColumns = useVisibleColumns(columns, columnVisibility);
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
   const { rows, rowCount } = useMemo8(() => {
@@ -3131,7 +3296,7 @@ function DataGrid({
     updateSelectedIds(next);
   }
   const tanstackColumns = useMemo8(
-    () => toTanstackColumns(visibleColumns, editingCtxRef, cellEditingCtxRef),
+    () => toTanstackColumns(visibleColumns, editingCtxRef, cellEditingCtxRef, atomicGestureRef),
     [visibleColumns]
   );
   const columnById = useMemo8(() => {
@@ -3258,6 +3423,18 @@ function DataGrid({
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
+  const truncationWarnedRef = useRef11(false);
+  useEffect10(() => {
+    if (process.env.NODE_ENV === "production") return;
+    if (showPagination) return;
+    if (truncationWarnedRef.current) return;
+    if (!gridState && initialState?.pageSize !== void 0) return;
+    if (tableRows.length >= rowCount) return;
+    truncationWarnedRef.current = true;
+    console.warn(
+      `[DataGrid] showPagination={false} but only ${tableRows.length} of ${rowCount} row(s) are rendered, with no pagination UI to reach the rest. Pass an explicit pageSize (via initialState or gridState) that covers every row you want visible, or a dataSource that returns all of them.`
+    );
+  }, [showPagination, gridState, initialState?.pageSize, tableRows.length, rowCount]);
   const groupedBuckets = useMemo8(
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
@@ -3290,7 +3467,7 @@ function DataGrid({
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
   const lastVisibleIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
   const notifiedForLengthRef = useRef11(-1);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!virtualize?.onEndReached) return;
     if (lastVisibleIndex < 0 || lastVisibleIndex < flatItems.length - 1) return;
     if (virtualize.hasMore === false) return;
@@ -3316,15 +3493,42 @@ function DataGrid({
       if (index !== void 0) virtualizer.scrollToIndex(index);
     }
   });
+  const clickCellRef = useRef11(null);
+  const dragMovedRef = useRef11(false);
+  const [pendingOpenEnumCell, setPendingOpenEnumCell] = useState14(void 0);
+  atomicGestureRef.current = {
+    shouldOpenEnum: (rowId, columnId) => pendingOpenEnumCell?.rowId === rowId && pendingOpenEnumCell?.columnId === columnId,
+    // Mirrors exactly what `handleCellMouseDown` below does for every other
+    // cell, minus the click-to-edit-only tail end (irrelevant here — always
+    // invoked under `alwaysEdit`, same as that function's own early return
+    // for it) — see `AtomicGestureContext.registerSelection`'s own doc for
+    // why `AlwaysEditCell` can't just rely on that function running on its
+    // own for a gesture it suppresses.
+    registerSelection: (rowId, columnId, extend) => {
+      cellSelection.startSelection({ rowId, columnId }, { extend });
+      clickCellRef.current = { rowId, columnId, extend, wasEditing: false };
+      dragMovedRef.current = 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(() => {
+  useEffect10(() => {
     if (!cellSelection.isDragging) return;
     function handleMouseMove(event) {
       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 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 +3538,17 @@ function DataGrid({
     }
     function handleMouseUp() {
       cellSelection.endDrag();
+      const clickCell = clickCellRef.current;
+      clickCellRef.current = null;
+      if (!clickCell || clickCell.extend || clickCell.wasEditing || dragMovedRef.current) return;
+      if (cellEditingCtx?.alwaysEdit) {
+        const column = columnById.get(clickCell.columnId);
+        if (column?.type === "enum" && !column.renderEditCell) {
+          setPendingOpenEnumCell({ rowId: clickCell.rowId, columnId: clickCell.columnId });
+        }
+        return;
+      }
+      beginEditFromClick(clickCell);
     }
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
@@ -3346,7 +3561,7 @@ function DataGrid({
   }, [cellSelection.isDragging, cellSelection.updateDrag, cellSelection.endDrag]);
   const pendingFillCellRef = useRef11(null);
   const fillRafRef = useRef11(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!cellSelection.isFillDragging) return;
     function handleMouseMove(event) {
       const cellEl = event.target?.closest("[data-cell-row]");
@@ -3383,7 +3598,7 @@ function DataGrid({
     };
   }, [cellSelection.isFillDragging, cellSelection.updateFillDrag, cellSelection.endFillDrag]);
   const wasEditingCellRef = useRef11(void 0);
-  useEffect9(() => {
+  useEffect10(() => {
     const wasEditing = wasEditingCellRef.current !== void 0;
     wasEditingCellRef.current = cellEditingCtx?.editingCell;
     if (!wasEditing || cellEditingCtx?.editingCell) return;
@@ -3399,6 +3614,11 @@ function DataGrid({
     const columnId = cellEl?.dataset.cellCol;
     if (rowId === void 0 || columnId === void 0) return;
     cellSelection.startSelection({ rowId, columnId }, { extend: event.shiftKey });
+    const wasEditing = cellEditingCtx?.editingCell?.rowId === rowId && cellEditingCtx.editingCell.columnId === columnId;
+    clickCellRef.current = { rowId, columnId, extend: event.shiftKey, wasEditing };
+    dragMovedRef.current = false;
+    if (cellEditingCtx?.alwaysEdit) return;
+    if (wasEditing) return;
     scrollRef.current?.focus();
   }
   const CELL_NAV_KEYS = {
@@ -3417,6 +3637,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 +3666,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 +3691,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 +3730,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 +3747,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 +3758,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 +3777,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 +3789,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 +3819,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 +3859,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 +3874,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 +3921,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 +3931,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 +3944,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 +3960,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 +3969,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 +3987,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 +3997,7 @@ function DataGrid({
                             `group-${run.label}-${run.columns[0].id}`
                           )
                         ),
-                        showRowActionsColumn && /* @__PURE__ */ jsx32(
+                        showRowActionsColumn && /* @__PURE__ */ jsx33(
                           "th",
                           {
                             rowSpan: 2,
@@ -3790,7 +4008,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 +4016,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 +4037,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 +4049,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 +4059,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 +4070,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 +4079,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 +4108,7 @@ function DataGrid({
           ")"
         ] }),
         /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Button,
             {
               variant: "outline",
@@ -3900,7 +4118,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Button,
             {
               variant: "outline",
@@ -3919,7 +4137,7 @@ function DataGrid({
 // src/tree/TreeDataGrid.tsx
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { AlertCircle, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
-import { Fragment as Fragment5, useEffect as useEffect10, useMemo as useMemo10, useRef as useRef12 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect11, useMemo as useMemo10, useRef as useRef12 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -3964,7 +4182,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 +4194,7 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState14({});
+  const [internalExpanded, setInternalExpanded] = useState15({});
   const expanded = controlledExpanded ?? internalExpanded;
   const setExpanded = useCallback5(
     (updater) => {
@@ -3988,7 +4206,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 +4218,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 +4299,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 +4316,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 +4328,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
   ] });
 }
@@ -4171,7 +4389,7 @@ function TreeDataGrid({
     onChildrenMapChange
   });
   const didAutoExpand = useRef12(false);
-  useEffect10(() => {
+  useEffect11(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
     if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
@@ -4272,9 +4490,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 +4503,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 +4516,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 +4533,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 +4544,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 +4560,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 +4569,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 +4591,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 +4610,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,