@jielga/tmdatagrid 2.0.0-beta.0 → 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/TMDataGridHeaderCell.tsx

@@ -15,6 +15,7 @@ import { autosizeColumn } from "../core/autosize";
 import {
   getColumnRegion,
   getStepTargetColumn,
+  keepGeneratedColumnsOutermost,
   moveColumn,
   moveColumnByStep,
   type TMDataGridDropSide,
@@ -238,6 +239,10 @@ export function TMDataGridHeaderCell({
       }
     }
     column.pin(position);
+    // `pin("right")` appends, which would leave the column outside the edit
+    // lane. Normalising after the pin rather than writing the lane by hand
+    // keeps TanStack's own handling of a header group's leaves.
+    table.setColumnPinning(keepGeneratedColumnsOutermost);
   }
 
   const menuItems: ReactNode[] = [];
@@ -497,8 +502,8 @@ export function TMDataGridHeaderCell({
       // 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(column.id)}
-      // Only meaningful on a sortable column: "none" advertises that this
-      // header sorts, which is a lie on one that doesn't.
+      // Only meaningful on a sortable column: "none" announces that this
+      // header sorts, which is wrong on one that does not.
       aria-sort={
         canSort
           ? isSorted
@@ -583,10 +588,10 @@ export function TMDataGridHeaderCell({
             <ActionIcon
               className={`${classes.headerAction} ${classes.sortAction}`}
               data-pinned-visible={isSorted}
-              // The arrow is the whole signal now that the title no longer
-              // tints, so it takes the colour while the sort holds. On an
-              // unsorted column it is only the hover affordance, and stays a
-              // faded grey so the two never read alike.
+              // The arrow is the only sort indicator now that the title no
+              // longer tints, so it takes the colour while the sort holds. On
+              // an unsorted column it is only the hover affordance, and stays a
+              // faded grey so the two are not confused.
               data-sorted={isSorted}
               variant="subtle"
               color={isSorted ? undefined : "gray"}

package/src/tmdatagrid/components/TMDataGridSelectColumn.tsx

@@ -87,11 +87,10 @@ function SelectRowCheckbox<TData extends RowData>({
   const tabIndex = useCellControlTabIndex();
   const isGroupRow = row.subRows.length > 0;
 
-  // A group row is never selected by id: `rowSelection` only ever holds the
-  // leaves, and TanStack's `getIsSelected()` is a plain lookup in that map. So
-  // a group asks about its descendants instead, which is also the honest
-  // reading - the box means "all of these", and it goes indeterminate as soon
-  // as that stops being true.
+  // A group row is never selected by id: `rowSelection` only holds the leaves,
+  // and TanStack's `getIsSelected()` is a plain lookup in that map. A group
+  // therefore asks about its descendants instead, so the box means "all of
+  // these" and goes indeterminate as soon as that stops being true.
   const selected = useSelector(row.table.store, () =>
     isGroupRow ? row.getIsAllSubRowsSelected() : row.getIsSelected(),
   );
@@ -177,6 +176,11 @@ export function createSelectColumn<TData extends RowData>(
     enableSorting: false,
     enableColumnFilter: false,
     enableGlobalFilter: false,
+    // Not a column the user chose, so not one they can switch off: hiding the
+    // lane would take the grid's only way to select a row with it, with the
+    // row-selection state left behind and no way back to it. Keeping it out of
+    // "Manage columns" follows from this - the panel lists what can be hidden.
+    enableHiding: false,
     // Structurally pinned to the left; users shouldn't be able to move it.
     enablePinning: false,
     header: ({ table }) => <SelectAllHeader table={table} />,

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;
 }