@bmsuisse/datagrid 0.31.0 → 0.31.1

package/dist/index.d.ts

@@ -668,7 +668,11 @@ declare function BooleanEditor<TRow>({ column, rowId, value, onChange, error, au
 declare function DateEditor<TRow>({ column, rowId, value, onChange, error, autoFocus, }: EditWidgetProps<DateColumn<TRow>>): ReactElement;
 
 /** Default inline editor for `type: "enum"` columns: a single-value select over `column.options`. */
-declare function EnumEditor<TRow>({ column, rowId, value, onChange, error, autoFocus, }: EditWidgetProps<EnumColumn<TRow>>): ReactElement;
+declare function EnumEditor<TRow>({ column, rowId, value, onChange, error, autoFocus, open, onOpenChange, }: EditWidgetProps<EnumColumn<TRow>> & {
+    /** Controls the dropdown's own open state — omit to let `<Select>` manage it itself (the default, used everywhere except `AlwaysEditCell`; see that file's own doc for why it needs control here). */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): ReactElement;
 
 /**
  * Default inline editor for a `type: "string"` column with `multiline: true`:
@@ -1420,9 +1424,18 @@ interface DataGridProps<TRow> {
     /**
      * Renders the built-in Previous/Next pagination footer. Defaults to true.
      * Set to false when a caller renders its own pagination UI instead (e.g.
-     * one with specific `data-testid`s an existing test suite depends on) —
-     * `<DataGrid>` itself never conditions any other behavior on this, it just
-     * stops rendering that one footer.
+     * one with specific `data-testid`s an existing test suite depends on), or
+     * to disable pagination altogether and render every row.
+     *
+     * When `false` and no explicit `pageSize` is given (via `initialState` or
+     * `gridState`), the effective page size becomes unbounded instead of
+     * defaulting to 20 — hiding the pagination UI with no page size in mind
+     * means "show every row," not "silently truncate to the first page." A
+     * caller who explicitly sets `pageSize` alongside `showPagination: false`
+     * still gets exactly that page size (deliberate fixed-size chunking with
+     * no UI). This only affects `"client"` mode's own row slicing; in
+     * `"server"` mode, whether every row actually comes back is up to your
+     * `dataSource`.
      */
     showPagination?: boolean;
     /**
@@ -1609,8 +1622,18 @@ interface GridStateController {
  * across the component's lifetime — start controlled and stay controlled,
  * or start uncontrolled and stay uncontrolled; toggling to `undefined`
  * later does not hand ownership back, it just stops resyncing.
+ *
+ * `showPagination`, when `false` and the caller did NOT explicitly provide
+ * `initialState.pageSize`, seeds `pageSize` as effectively unbounded instead
+ * of `DEFAULT_STATE`'s 20 — "hide the pagination controls" means "no
+ * pagination" by default, matching `<DataGrid>`'s `showPagination` doc. A
+ * caller who explicitly sets `initialState.pageSize` (deliberate fixed-size
+ * chunking with no UI, alongside `showPagination: false`) still gets exactly
+ * that value; this only changes what happens when they didn't ask for a
+ * particular page size at all. Has no effect once `externalState` is in
+ * play — a controlled `GridState` is always fully caller-specified.
  */
-declare function useGridState<TRow>(dataSource: DataSource<TRow>, initialState?: Partial<GridState>, externalState?: GridState): GridStateController;
+declare function useGridState<TRow>(dataSource: DataSource<TRow>, initialState?: Partial<GridState>, externalState?: GridState, showPagination?: boolean): GridStateController;
 
 interface ClientProcessingResult<TRow> {
     rows: TRow[];

package/dist/index.js

@@ -1477,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 })
   ] });
 }
@@ -2792,16 +2803,25 @@ 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 useState14 } 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 { useState as useState10 } from "react";
+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 } = 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) });
   }
@@ -2848,7 +2868,52 @@ function AlwaysEditCell(props) {
     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) });
+  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
@@ -2944,15 +3009,15 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo7, useState as useState13 } 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);
     };
@@ -2981,10 +3046,12 @@ function nextSortDir(current, descFirst) {
   if (current === first) return second;
   return void 0;
 }
-function useGridState(dataSource, initialState, externalState) {
-  const [state, setState] = useState13(
-    () => 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);
@@ -3002,7 +3069,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyRaw, cancelDebouncedNotify]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!externalState) return;
     cancelDebouncedNotify();
     setState(externalState);
@@ -3107,7 +3174,7 @@ 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,
@@ -3116,7 +3183,16 @@ function toTanstackColumns(columns, editingCtxRef, cellEditingCtxRef) {
     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);
+      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);
     }
   }));
 }
@@ -3156,7 +3232,8 @@ function DataGrid({
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
     initialState,
-    gridState
+    gridState,
+    showPagination
   );
   const [internalSelectedIds, setInternalSelectedIds] = useState14(/* @__PURE__ */ new Set());
   const selectedIds = controlledSelectedIds ?? internalSelectedIds;
@@ -3192,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(() => {
@@ -3218,7 +3296,7 @@ function DataGrid({
     updateSelectedIds(next);
   }
   const tanstackColumns = useMemo8(
-    () => toTanstackColumns(visibleColumns, editingCtxRef, cellEditingCtxRef),
+    () => toTanstackColumns(visibleColumns, editingCtxRef, cellEditingCtxRef, atomicGestureRef),
     [visibleColumns]
   );
   const columnById = useMemo8(() => {
@@ -3345,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]
@@ -3377,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;
@@ -3405,6 +3495,21 @@ function DataGrid({
   });
   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;
@@ -3415,7 +3520,7 @@ function DataGrid({
   }
   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]");
@@ -3435,7 +3540,15 @@ function DataGrid({
       cellSelection.endDrag();
       const clickCell = clickCellRef.current;
       clickCellRef.current = null;
-      if (clickCell && !clickCell.extend && !clickCell.wasEditing && !dragMovedRef.current) beginEditFromClick(clickCell);
+      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);
@@ -3448,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]");
@@ -3485,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;
@@ -3501,10 +3614,10 @@ 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 (cellEditingCtx?.alwaysEdit) return;
     if (wasEditing) return;
     scrollRef.current?.focus();
   }
@@ -4024,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) {
@@ -4276,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);