@jielga/tmdatagrid 2.0.0-beta.4 → 2.0.0-beta.7

package/src/tmdatagrid/components/TMDataGridTable.tsx

@@ -364,9 +364,10 @@ function TMDataGridBodyCell({
         <span className={classes.cellContent}>
           {(() => {
             // A row with a live form shows its draft, not `data`: the column's
-            // own renderer over a context reading the form's values. Parked
-            // drafts - draft mode, cellConfirm's kept-on-blur - are the point;
-            // group cells are excluded because no group row ever has a form.
+            // own renderer over a context reading the form's values. The
+            // drafts that outlive their editor - parked ones, cellConfirm's
+            // kept ones - are the point; group cells are excluded because no
+            // group row ever has a form.
             const draftContext =
               draftValues !== undefined &&
               contentOverride === undefined &&
@@ -969,6 +970,21 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     initialRect: { height: 600, width: 1200 },
   });
 
+  /**
+   * A live `size` (or `meta.rowHeight`) change moves what `estimateSize`
+   * answers, but the virtualizer's measurement cache does not list that option
+   * among its dependencies - by its own docs, changing the estimate means
+   * calling `measure()`. Without this the spacers keep the old height until
+   * something else invalidates the cache, so the scroll range and the window
+   * disagree with the rows actually painted.
+   */
+  const prevRowHeightRef = useRef(rowHeight);
+  useEffect(() => {
+    if (prevRowHeightRef.current === rowHeight) return;
+    prevRowHeightRef.current = rowHeight;
+    virtualizer.measure();
+  }, [rowHeight, virtualizer]);
+
   const virtualItems = virtualizer.getVirtualItems();
   const paddingTop = virtualItems[0]?.start ?? 0;
   const paddingBottom =
@@ -1539,7 +1555,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     close: TMDataGridCellEditorClose,
   ) => {
     // Where the keyboard goes: Enter moves down, Tab to the next editable
-    // cell (the deferring draft variants move the same way, draft in tow) -
+    // cell (cellConfirm's deferring variants move the same way, draft kept) -
     // everything else, and a saved row, goes back to where the edit was.
     const move =
       close.via === "enter"
@@ -2163,8 +2179,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               // open, so every row holding a form shows its editors. Which of
               // them holds the caret is not decided here - see
               // placeEditCaret, which places it once per gesture.
+              //
+              // A parked row is not one of them. It keeps its form, so it is
+              // still "open", but it has been decided: it renders its draft
+              // through the column's own renderer until `begin` reopens it.
               const rowEditing =
-                features.editMode === "row" && editOpenRowIds.includes(row.id);
+                features.editMode === "row" &&
+                editOpenRowIds.includes(row.id) &&
+                !editDraftRowIds.includes(row.id);
               // Cell selection takes the body's tab stop off the row and puts
               // it on a cell - two stops per row would make Tab a way of
               // walking the grid, which is what the arrow keys are for. Space

package/src/tmdatagrid/components/TMDataGridToolbar.module.css

@@ -10,3 +10,7 @@
 .toolbarSpacer {
   flex: 1;
 }
+
+.summaryCount {
+  white-space: nowrap;
+}

package/src/tmdatagrid/components/TMDataGridToolbar.tsx

@@ -54,22 +54,20 @@ export function TMDataGridSummaryCount({ children }: { children?: ReactNode }) {
   const { table, controlSize } = useTMDataGridContext();
   useSelector(table.store);
 
-  if (children !== undefined) {
-    return (
-      <Text span size={controlSize} c="dimmed" data-dg-part="summary-count">
-        {children}
-      </Text>
-    );
-  }
-
   const shown = table.getRowCount();
   const total =
     table.options.meta?.totalRowCount ??
     table.getPreFilteredRowModel().rows.length;
 
   return (
-    <Text span size={controlSize} c="dimmed" data-dg-part="summary-count">
-      {shown} / {total}
+    <Text
+      span
+      size={controlSize}
+      c="dimmed"
+      className={classes.summaryCount}
+      data-dg-part="summary-count"
+    >
+      {children !== undefined ? children : `${shown} / ${total}`}
     </Text>
   );
 }

package/src/tmdatagrid/components/editors/TMDataGridNumberEditor.tsx

@@ -1,4 +1,5 @@
 import { NumberInput } from "@mantine/core";
+import { useState } from "react";
 import type { TMDataGridEditorArgs } from "../../core/editEngine";
 import { getColumnLabel } from "../../core/columnUtils";
 import { useTMDataGridContext } from "../../TMDataGridContext";
@@ -15,6 +16,19 @@ export function TMDataGridNumberEditor({ field, column, size }: TMDataGridEditor
   const value = useFieldValue(field);
   const error = useFieldError(field);
   const { inputRef, remember } = useCaretKeeper();
+  /**
+   * The last text Mantine reported instead of a number - "-" or "1e" on the
+   * way to one. Held so a half-typed number stays on screen while the field
+   * itself holds no value.
+   */
+  const [typed, setTyped] = useState<string | null>(null);
+  // The field is the source of truth: the text survives only while it still
+  // describes what the field holds, so a write from outside the editor -
+  // `edit.setCellValue`, a revert - replaces it rather than being masked.
+  const parsedTyped = typed === null || typed === "" ? null : Number(typed);
+  const textDescribesField = Number.isFinite(parsedTyped)
+    ? parsedTyped === value
+    : value === null;
   return (
     <NumberInput
       ref={inputRef}
@@ -24,13 +38,29 @@ export function TMDataGridNumberEditor({ field, column, size }: TMDataGridEditor
       hideControls
       aria-label={labels.editCell(getColumnLabel(column))}
       data-dg-part="editor-input"
-      value={typeof value === "number" ? value : ""}
+      value={
+        typed !== null && textDescribesField
+          ? typed
+          : typeof value === "number"
+            ? value
+            : ""
+      }
       onChange={(next) => {
         if (inputRef.current !== null) remember(inputRef.current);
-        // Mantine reports a number once one can be parsed, and a string while
-        // it cannot. An empty cell is `null`, meaning no value.
+        if (typeof next === "number") {
+          setTyped(null);
+          field.handleChange(next);
+          return;
+        }
+        // Mantine reports a number once one can be parsed and a string while
+        // it cannot: "" for an empty cell, partial input on the way to a
+        // number. Anything that does not parse leaves the field empty rather
+        // than `NaN` - which is a number to every validator and would commit
+        // as one, with no message a user could act on.
+        setTyped(next);
+        const parsed = Number(next);
         field.handleChange(
-          typeof next === "number" ? next : next === "" ? null : Number(next),
+          next !== "" && Number.isFinite(parsed) ? parsed : null,
         );
       }}
       onBlur={field.handleBlur}

package/src/tmdatagrid/components/editors/editorShared.ts

@@ -1,34 +1,6 @@
 import { useStore } from "@tanstack/react-form";
 import { useLayoutEffect, useRef, type RefObject } from "react";
-import type { TMDataGridEditField } from "../../core/editEngine";
-
-/**
- * The first error as text, whatever shape the validator produced - TanStack
- * Form keeps errors verbatim, so a Zod issue arrives as `{ message }`, a
- * plain function's return arrives as it was, and a form-level schema's
- * pathless issues arrive keyed under an empty path (`{ "": [issues] }`).
- * This digs until it finds a message.
- */
-export function firstErrorText(error: unknown): string | undefined {
-  if (error === null || error === undefined) return undefined;
-  if (typeof error === "string") return error;
-  if (Array.isArray(error)) {
-    for (const entry of error) {
-      const text = firstErrorText(entry);
-      if (text !== undefined) return text;
-    }
-    return undefined;
-  }
-  if (typeof error === "object") {
-    const message = (error as { message?: unknown }).message;
-    if (typeof message === "string") return message;
-    for (const value of Object.values(error)) {
-      const text = firstErrorText(value);
-      if (text !== undefined) return text;
-    }
-  }
-  return undefined;
-}
+import { firstErrorText, type TMDataGridEditField } from "../../core/editEngine";
 
 /** The field's live value - one subscription, on the field's own store. */
 export function useFieldValue(field: TMDataGridEditField): unknown {

package/src/tmdatagrid/core/capabilities.ts

@@ -120,13 +120,20 @@ export type TMDataGridFeatureFlags = {
   grouping: boolean;
   /** Whether cells can be edited at all - the `editing` option was set. */
   editing: boolean;
-  /** The commit policy, or `null` while editing is off. */
+  /** What counts as a commit, or `null` while editing is off. */
   editMode: TMDataGridEditMode | null;
   /**
-   * Whether a confirmed entry row stays pinned in the sticky entry block
-   * until Save all - `editing.newRowsSticky`, draft mode only. Off by
-   * default: a confirmed row joins the scrolling flow instead, so entering
-   * many rows cannot fill the viewport with sticky chrome.
+   * Where a commit goes - `editing.draft`. On, commits park in the grid's
+   * draft store and leave through `edit.saveDrafts()`; off, each one reaches
+   * the consumer as it happens.
+   */
+  editDraft: boolean;
+  /**
+   * Whether a parked entry row stays pinned in the sticky entry block until
+   * the draft store is saved - `editing.newRowsSticky`, which needs
+   * `editing.draft`. Off by default: a parked row joins the scrolling flow
+   * instead, so entering many rows cannot fill the viewport with sticky
+   * chrome.
    */
   editNewRowsSticky: boolean;
   /** The generated row-number gutter - `enableRowNumbers`. Off by default. */
@@ -211,8 +218,9 @@ export function readFeatureFlags<TData extends RowData>(
     grouping: options.enableGrouping ?? options.manualPagination !== true,
     editing: options.editing !== undefined,
     editMode: options.editing?.mode ?? null,
+    editDraft: options.editing?.draft === true,
     editNewRowsSticky:
-      options.editing?.mode === "draft" &&
+      options.editing?.draft === true &&
       options.editing.newRowsSticky === true,
     rowNumbers: options.enableRowNumbers === true,
     // A predicate counts as on - some rows may still pin.