@jielga/tmdatagrid 2.0.0-beta.1 → 2.0.0-beta.2

package/src/tmdatagrid/components/TMDataGridEntryRows.tsx

@@ -53,7 +53,7 @@ function isEntryCellEditable(
  * every other draft, keyed by their temporary ids.
  *
  * Enter commits the entry (`onRowAdd`) under the immediate modes and parks
- * it under batch, where `submitAll` reports it in `added`; Escape discards
+ * it under draft, where `submitAll` reports it in `added`; Escape discards
  * it. The edit lane, when present, offers the same pair as buttons.
  */
 export function TMDataGridEntryRows({
@@ -65,11 +65,23 @@ export function TMDataGridEntryRows({
   layoutFor: (columnId: string) => TMDataGridColumnLayout;
   rowHeight: number;
 }) {
-  const { table, edit } = useTMDataGridContext();
+  const { table, edit, features } = useTMDataGridContext();
   const newRows = useSelector(edit.store, (state) => state.newRows);
+  // The reopen gesture: `begin` on a confirmed entry row flips it back to
+  // editors and names the cell double-clicked - where the caret goes.
+  const activeEntry = useSelector(edit.store, (state) =>
+    state.active !== null &&
+    state.newRows.some(
+      (newRow) => newRow.tempId === state.active?.rowId && !newRow.confirmed,
+    )
+      ? state.active
+      : null,
+  );
   const blockRef = useRef<HTMLDivElement>(null);
   /** The entry row the caret has already been placed in. */
   const focusedTempIdRef = useRef<string | null>(null);
+  /** The reopen target (`rowId:columnId`) the caret has already landed in. */
+  const focusedActiveRef = useRef<string | null>(null);
 
   /**
    * The caret goes into a row the moment `edit.addRow()` opens it, landing in
@@ -96,14 +108,44 @@ export function TMDataGridEntryRows({
     focusEditorContent(editor);
   });
 
-  // The seed values, frozen at addRow: the live values belong to the forms,
-  // which the editors read directly - this table only provides row and cell
-  // identity.
+  /**
+   * The caret for a reopen: `begin` on a confirmed row re-arms its editors
+   * and the double-clicked cell's editor should hold the caret, not the
+   * row's first. Keyed separately from the add effect above - the row was
+   * already focused once when it was added.
+   */
+  useLayoutEffect(() => {
+    if (activeEntry === null) {
+      focusedActiveRef.current = null;
+      return;
+    }
+    const key = `${activeEntry.rowId}:${activeEntry.columnId ?? ""}`;
+    if (focusedActiveRef.current === key) return;
+    const block = blockRef.current;
+    if (block === null) return;
+    const editor = block.querySelector<HTMLElement>(
+      activeEntry.columnId !== null
+        ? `[data-dg-part="editor"][data-row-id="${CSS.escape(activeEntry.rowId)}"][data-column-id="${CSS.escape(activeEntry.columnId)}"]`
+        : `[data-dg-part="editor"][data-row-id="${CSS.escape(activeEntry.rowId)}"]`,
+    );
+    // Not mounted yet; the next render tries again, as the add effect does.
+    if (editor === null) return;
+    focusedActiveRef.current = key;
+    focusEditorContent(editor);
+  });
+
+  // Unconfirmed rows keep the seed values frozen at addRow - the live values
+  // belong to the forms, which the editors read directly, and this table only
+  // provides row and cell identity. A confirmed row's cells render values, so
+  // there the draft itself is the row; the memo recomputes on every
+  // confirm/reopen because either flips `newRows`' identity.
   const data = useMemo(
     () =>
       newRows.map(
-        ({ tempId }) =>
-          (edit.getForm(tempId)?.options.defaultValues ??
+        ({ tempId, confirmed }) =>
+          ((confirmed
+            ? edit.getForm(tempId)?.state.values
+            : edit.getForm(tempId)?.options.defaultValues) ??
             {}) as TMDataGridRowData,
       ),
     [newRows, edit],
@@ -119,77 +161,134 @@ export function TMDataGridEntryRows({
   if (newRows.length === 0) return null;
 
   const entryRows = entryTable.getCoreRowModel().rows;
+  const confirmedById = new Map(
+    newRows.map((newRow) => [newRow.tempId, newRow.confirmed]),
+  );
+  // A row being *typed* into is always sticky - it exists nowhere else to
+  // scroll back to. A confirmed row joins the scrolling flow unless
+  // `newRowsSticky` keeps it pinned, so entering many rows cannot fill the
+  // viewport with sticky chrome.
+  const stickyRows = entryRows.filter(
+    (entryRow) =>
+      features.editNewRowsSticky || confirmedById.get(entryRow.id) !== true,
+  );
+  const flowRows = features.editNewRowsSticky
+    ? []
+    : entryRows.filter((entryRow) => confirmedById.get(entryRow.id) === true);
+
+  const renderEntryRow = (
+    entryRow: (typeof entryRows)[number],
+    pinnedZ: string,
+  ) => {
+    const cellsById = new Map(
+      entryRow.getAllCells().map((cell) => [cell.column.id, cell]),
+    );
+    const confirmed = confirmedById.get(entryRow.id) === true;
+    return (
+      <div
+        key={entryRow.id}
+        role="row"
+        data-dg-part="entry-row"
+        data-row-id={entryRow.id}
+        data-new
+        data-confirmed={confirmed}
+        className={classes.entryRow}
+      >
+        {orderedColumns.map((column) => {
+          const cell = cellsById.get(column.id);
+          const layout = layoutFor(column.id);
+          const editable =
+            cell !== undefined && isEntryCellEditable(entryRow, column);
+          return (
+            <div
+              key={column.id}
+              role="cell"
+              data-column-id={column.id}
+              data-align={getColumnAlign(column)}
+              data-control-column={isControlColumn(column.id)}
+              // A confirmed row re-opens where it is double-clicked, the
+              // same gesture a body cell answers.
+              onDoubleClick={
+                confirmed && !isControlColumn(column.id)
+                  ? () =>
+                      edit.begin({
+                        rowId: entryRow.id,
+                        columnId: editable ? column.id : null,
+                      })
+                  : undefined
+              }
+              className={[
+                classes.entryCell,
+                layout.isBoundary && layout.pinnedAt === "left"
+                  ? sticky.stickyLeft
+                  : "",
+                layout.isBoundary && layout.pinnedAt === "right"
+                  ? sticky.stickyRight
+                  : "",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+              style={{
+                minHeight: rowHeight,
+                left: layout.pinnedAt === "left" ? layout.offset : undefined,
+                right: layout.pinnedAt === "right" ? layout.offset : undefined,
+                position: layout.pinnedAt ? "sticky" : undefined,
+                zIndex: layout.pinnedAt ? pinnedZ : undefined,
+              }}
+            >
+              {cell !== undefined && column.id === EDIT_COLUMN_ID ? (
+                // The lane's cell - the entry row's controls.
+                flexRender(cell.column.columnDef.cell, cell.getContext())
+              ) : confirmed && cell !== undefined ? (
+                // Entered, awaiting Save all: a value row through the
+                // columns' own renderers, over the draft the memo above
+                // fed this table.
+                <span className={classes.cellContent}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </span>
+              ) : editable && cell !== undefined ? (
+                <TMDataGridCellEditor
+                  cell={cell}
+                  row={entryRow}
+                  takeSeedText={() => undefined}
+                  onClose={() => {}}
+                  inEntryBlock
+                />
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
 
   return (
-    <div
-      ref={blockRef}
-      role="rowgroup"
-      data-dg-entry-block
-      className={classes.entryBlock}
-    >
-      {entryRows.map((entryRow) => {
-        const cellsById = new Map(
-          entryRow.getAllCells().map((cell) => [cell.column.id, cell]),
-        );
-        return (
-          <div
-            key={entryRow.id}
-            role="row"
-            data-dg-part="entry-row"
-            data-row-id={entryRow.id}
-            className={classes.entryRow}
-          >
-            {orderedColumns.map((column) => {
-              const cell = cellsById.get(column.id);
-              const layout = layoutFor(column.id);
-              const editable =
-                cell !== undefined && isEntryCellEditable(entryRow, column);
-              return (
-                <div
-                  key={column.id}
-                  role="cell"
-                  data-column-id={column.id}
-                  data-align={getColumnAlign(column)}
-                  data-control-column={isControlColumn(column.id)}
-                  className={[
-                    classes.entryCell,
-                    layout.isBoundary && layout.pinnedAt === "left"
-                      ? sticky.stickyLeft
-                      : "",
-                    layout.isBoundary && layout.pinnedAt === "right"
-                      ? sticky.stickyRight
-                      : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" ")}
-                  style={{
-                    minHeight: rowHeight,
-                    left: layout.pinnedAt === "left" ? layout.offset : undefined,
-                    right:
-                      layout.pinnedAt === "right" ? layout.offset : undefined,
-                    position: layout.pinnedAt ? "sticky" : undefined,
-                    zIndex: layout.pinnedAt
-                      ? "var(--dg-z-pinned-row-pinned-cell, 5)"
-                      : undefined,
-                  }}
-                >
-                  {editable && cell !== undefined ? (
-                    <TMDataGridCellEditor
-                      cell={cell}
-                      row={entryRow}
-                      takeSeedText={() => undefined}
-                      onClose={() => {}}
-                    />
-                  ) : cell !== undefined && column.id === EDIT_COLUMN_ID ? (
-                    // The lane's cell - the entry row's ✓/✕ pair.
-                    flexRender(cell.column.columnDef.cell, cell.getContext())
-                  ) : null}
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
+    <>
+      {stickyRows.length > 0 && (
+        <div
+          ref={blockRef}
+          role="rowgroup"
+          data-dg-entry-block
+          className={classes.entryBlock}
+        >
+          {stickyRows.map((entryRow) =>
+            renderEntryRow(entryRow, "var(--dg-z-pinned-row-pinned-cell, 5)"),
+          )}
+        </div>
+      )}
+      {flowRows.length > 0 && (
+        <div
+          role="rowgroup"
+          data-dg-entry-flow-block
+          className={classes.entryFlowBlock}
+        >
+          {/* In flow, so a pinned cell stacks like a body row's, under the
+              sticky blocks it scrolls past. */}
+          {flowRows.map((entryRow) =>
+            renderEntryRow(entryRow, "var(--dg-z-pinned-cell, 2)"),
+          )}
+        </div>
+      )}
+    </>
   );
 }

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

@@ -329,12 +329,18 @@
   padding: var(--mantine-spacing-xl);
 }
 
-/* Marked deleted under batch: struck through and inert until submitAll
-   reports it. Interaction off wholesale - a row about to go away must not
-   keep taking edits. */
+/* Marked deleted under draft: struck through and inert until submitAll
+   reports it - a row about to go away must not keep taking edits. Interaction
+   comes off the data cells, not the row: `pointer-events: none` on the row
+   would also kill the edit lane's Restore, which is the one control the row
+   still needs (jsdom does not enforce pointer-events, so only a real browser
+   ever saw that bug). */
 .bodyRow[data-deleted="true"] {
   text-decoration: line-through;
   opacity: 0.55;
+}
+
+.bodyRow[data-deleted="true"] .bodyCell:not([data-control-column="true"]) {
   pointer-events: none;
 }
 
@@ -359,6 +365,15 @@
   grid-template-columns: subgrid;
 }
 
+/* Confirmed entry rows in the scrolling flow (the default; `newRowsSticky`
+   keeps them in the sticky block instead). Same tracks, no stickiness - they
+   sit above the body rows and scroll with them. */
+.entryFlowBlock {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
 /* The pinned edge blocks - user-pinned rows held at the top or bottom of the
    body, on the entry block's sticky mechanics: the block is the sticky
    element, its rows flow normally inside it. The top block stacks under the
@@ -407,6 +422,35 @@
   justify-content: center;
 }
 
+/* A confirmed entry row - entered, awaiting Save all. It reads as a value
+   row: text padding, the body's border weight, and the "new" tint instead of
+   the editing underline. */
+.entryRow[data-confirmed="true"] .entryCell {
+  padding: 0 var(--dg-padding);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  background-color: var(--dg-row-new-bg, var(--mantine-color-body));
+}
+
+.entryRow[data-confirmed="true"] .entryCell[data-control-column="true"] {
+  padding: 0;
+}
+
+/* Draft mode's change marker in the edit lane - dimmed beside the buttons
+   that act, red when validation blocks the row. */
+.rowStateIndicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+  color: var(--mantine-color-dimmed);
+}
+
+.rowStateIndicator[data-error] {
+  color: var(--mantine-color-error);
+}
+
 .entryCell[data-align="right"] {
   justify-content: flex-end;
 }

package/src/tmdatagrid/components/TMDataGridTable.tsx

@@ -35,6 +35,7 @@ import {
 } from "./TMDataGridCellEditor";
 import { TMDataGridEntryRows } from "./TMDataGridEntryRows";
 import { getColumnAlign, isControlColumn } from "../core/columnUtils";
+import { draftCellContext } from "../core/draftCellContext";
 import {
   getEditFieldName,
   type TMDataGridEditState,
@@ -266,6 +267,7 @@ function TMDataGridBodyCell({
   const { table, edit } = useTMDataGridContext();
   const fieldName = getEditFieldName(cell.column);
   const cellRowId = cell.row.id;
+  const isControl = isControlColumn(cell.column.id);
   const isDirty = useSelector(edit.store, (state) => {
     if (fieldName === null) return false;
     const projection = state.rows[cellRowId];
@@ -276,6 +278,13 @@ function TMDataGridBodyCell({
     const projection = state.rows[cellRowId];
     return projection !== undefined && projection.errorFields.includes(fieldName);
   });
+  // The whole draft, not one field: a computed or custom renderer may read any
+  // field off the row, so every data cell of a drafted row repaints together
+  // when its draft moves - and only then, `values` being reference-stable
+  // across meta-only form events. `undefined` everywhere else.
+  const draftValues = useSelector(edit.store, (state) =>
+    isControl ? undefined : state.rows[cellRowId]?.values,
+  );
   return (
     <div
       // `gridcell` rather than `cell` is what tells a screen reader the arrow
@@ -319,7 +328,7 @@ function TMDataGridBodyCell({
       data-align={getColumnAlign(cell.column)}
       // A control lane is a fixed track, so it cannot take the cell padding the
       // scale grows for text. See isControlColumn.
-      data-control-column={isControlColumn(cell.column.id)}
+      data-control-column={isControl}
       onContextMenu={onContextMenu}
       className={[
         classes.bodyCell,
@@ -354,6 +363,17 @@ function TMDataGridBodyCell({
       {editor ?? (
         <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.
+            const draftContext =
+              draftValues !== undefined &&
+              contentOverride === undefined &&
+              !cell.getIsPlaceholder() &&
+              !cell.getIsAggregated()
+                ? draftCellContext(cell, draftValues)
+                : undefined;
             // Highlighting reproduces the *default* renderer, value then
             // `toString`, with the matched parts marked. A column with its own
             // `cell` is excluded: its renderer is not the default one, and the
@@ -365,11 +385,17 @@ function TMDataGridBodyCell({
               !cell.getIsAggregated() &&
               cell.column.columnDef.cell === table.getDefaultColumnDef().cell
             ) {
-              const value = cell.renderValue();
+              const value =
+                draftContext !== undefined
+                  ? draftContext.renderValue()
+                  : cell.renderValue();
               if (typeof value === "string" || typeof value === "number") {
                 return withMatchHighlights(String(value), highlightNeedles);
               }
             }
+            if (draftContext !== undefined) {
+              return flexRender(cell.column.columnDef.cell, draftContext);
+            }
             return contentOverride ?? renderCellContent(cell);
           })()}
         </span>
@@ -716,6 +742,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   const editOpenRowIds = useSelector(edit.store, (state) => state.openRowIds);
   const newRowCount = useSelector(edit.store, (state) => state.newRows.length);
   const deletedRowIds = useSelector(edit.store, (state) => state.deletedRowIds);
+  // Rows carrying a dirty draft, for the row-level marker. Derived from the
+  // same projections the cells subscribe to; the array's identity churns with
+  // `openRowIds`' own per-publish churn, so this adds no new render class.
+  const editDirtyRowIds = useSelector(edit.store, (state) =>
+    state.openRowIds.filter(
+      (id) => (state.rows[id]?.dirtyFields.length ?? 0) > 0,
+    ),
+  );
 
   const { loading, noResultsLabel = labels.noResults } =
     table.options.meta ?? {};
@@ -1497,7 +1531,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 batch variants move the same way, draft in tow) -
+    // cell (the deferring draft variants move the same way, draft in tow) -
     // everything else, and a saved row, goes back to where the edit was.
     const move =
       close.via === "enter"
@@ -2188,11 +2222,17 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   data-highlighted={
                     features.highlightRow && row.id === highlightedRowId
                   }
-                  // Marked deleted under batch: struck through and inert
+                  // Marked deleted under draft: struck through and inert
                   // until submitAll reports it, or the mark is toggled back.
                   data-deleted={
                     deletedRowIds.length > 0 && deletedRowIds.includes(row.id)
                   }
+                  // Carrying a dirty draft - the row-level face of the cells'
+                  // own data-dirty markers, for row-scoped styling.
+                  data-dirty={
+                    editDirtyRowIds.length > 0 &&
+                    editDirtyRowIds.includes(row.id)
+                  }
                   // The menu is anchored to the rowgroup, so Mantine's own
                   // `data-expanded` lands there rather than on a row. This is
                   // what says which row the open menu is about.

package/src/tmdatagrid/components/icons.ts

@@ -27,6 +27,7 @@ export {
   IconArrowBackUp as RestoreIcon,
   IconCheck as CheckIcon,
   IconMenu2 as BurgerIcon,
+  IconPlus as PlusIcon,
   IconTrash as TrashIcon,
   IconPencil as PencilIcon,
   IconPinnedOff as PinOffIcon,

package/src/tmdatagrid/core/capabilities.ts

@@ -122,6 +122,13 @@ export type TMDataGridFeatureFlags = {
   editing: boolean;
   /** The commit policy, 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.
+   */
+  editNewRowsSticky: boolean;
   /** The generated row-number gutter - `enableRowNumbers`. Off by default. */
   rowNumbers: boolean;
   /**
@@ -204,6 +211,9 @@ export function readFeatureFlags<TData extends RowData>(
     grouping: options.enableGrouping ?? options.manualPagination !== true,
     editing: options.editing !== undefined,
     editMode: options.editing?.mode ?? null,
+    editNewRowsSticky:
+      options.editing?.mode === "draft" &&
+      options.editing.newRowsSticky === true,
     rowNumbers: options.enableRowNumbers === true,
     // A predicate counts as on - some rows may still pin.
     rowPinning:

package/src/tmdatagrid/core/draftCellContext.ts

@@ -0,0 +1,68 @@
+import type { Cell, CellContext, Row } from "@tanstack/react-table";
+import type { TMDataGridRowData } from "../TMDataGridContext";
+import type { TMDataGridFeatures } from "../useTMDataGrid";
+
+type ErasedCell = Cell<TMDataGridFeatures, TMDataGridRowData, unknown>;
+type ErasedRow = Row<TMDataGridFeatures, TMDataGridRowData>;
+type ErasedCellContext = CellContext<
+  TMDataGridFeatures,
+  TMDataGridRowData,
+  unknown
+>;
+
+/**
+ * The row internals the draft wrapper overrides. Private to table-core, but
+ * load-bearing for it: `row.getValue` reads `_valuesCache` before running
+ * `column.accessorFn(row.original, row.index)`, so owning fresh caches and a
+ * draft `original` is what makes every accessor - key, function, dot path -
+ * re-derive from the draft. Pinned by draftCellContext.test.ts, which is the
+ * tripwire for a beta bump moving these.
+ */
+type RowInternals = {
+  original: TMDataGridRowData;
+  _valuesCache: Record<string, unknown>;
+  _uniqueValuesCache: Record<string, unknown>;
+};
+
+/**
+ * A cell render context whose values come from a row's edit draft instead of
+ * `data` - how a parked draft is shown through the column's own `cell`
+ * renderer.
+ *
+ * v9 constructs rows and cells as `Object.create(prototype)` instances whose
+ * API methods dispatch on `this`, so a wrapper inheriting the real object but
+ * owning `original` and empty value caches serves draft values from the same
+ * code paths the real row uses. The context is hand-built rather than taken
+ * from the wrapper's `getContext()`, which is memoized per instance and would
+ * be inherited from the real cell.
+ *
+ * Limitation, accepted: instance-memoized traversals (`row.getAllCells()` and
+ * friends) are inherited already-bound to the real row, so a renderer walking
+ * `ctx.row` beyond `original` / `getValue()` / `renderValue()` sees committed
+ * values. The documented renderer surface sees the draft.
+ */
+export function draftCellContext(
+  cell: ErasedCell,
+  draftValues: TMDataGridRowData,
+): ErasedCellContext {
+  const draftRow = Object.create(cell.row) as ErasedRow;
+  const internals = draftRow as unknown as RowInternals;
+  internals.original = draftValues;
+  internals._valuesCache = Object.create(null) as Record<string, unknown>;
+  internals._uniqueValuesCache = Object.create(null) as Record<string, unknown>;
+
+  const draftCell = Object.create(cell) as ErasedCell;
+  (draftCell as { row: ErasedRow }).row = draftRow;
+
+  return {
+    table: cell.table,
+    column: cell.column,
+    row: draftRow,
+    cell: draftCell,
+    getValue: () => draftRow.getValue(cell.column.id),
+    renderValue: () =>
+      draftRow.getValue(cell.column.id) ??
+      cell.table.options.renderFallbackValue ??
+      null,
+  };
+}