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

package/src/{tmdatagrid/components → components}/TMDataGridEntryRows.tsx

@@ -1,10 +1,12 @@
 import {
   flexRender,
   useTable,
+  type Cell,
   type Column,
   type Row,
 } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
+import { shallow } from "@tanstack/store";
 import { useLayoutEffect, useMemo, useRef } from "react";
 import classes from "./TMDataGridTable.module.css";
 import sticky from "./sticky.module.css";
@@ -14,7 +16,7 @@ import {
   isColumnEditableForRow,
   isControlColumn,
 } from "../core/columnUtils";
-import { getEditFieldName } from "../core/editEngine";
+import { getEditFieldName, type TMDataGridEditApi } from "../core/editEngine";
 import { focusEditorContent } from "../core/editorFocus";
 import {
   tmDataGridFeatures,
@@ -25,6 +27,8 @@ import { EDIT_COLUMN_ID } from "./TMDataGridEditColumn";
 import type { TMDataGridColumnLayout } from "./TMDataGridTable";
 
 type ErasedColumn = Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
+type EntryRow = Row<TMDataGridFeatures, TMDataGridRowData>;
+type EntryCellApi = Cell<TMDataGridFeatures, TMDataGridRowData, unknown>;
 
 /**
  * Whether an entry cell edits. `edit.canEditCell` asks the main table for
@@ -34,12 +38,98 @@ type ErasedColumn = Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
 function isEntryCellEditable(
   row: Row<TMDataGridFeatures, TMDataGridRowData>,
   column: ErasedColumn,
+  edit: TMDataGridEditApi,
 ): boolean {
-  if (isControlColumn(column.id)) return false;
-  if (getEditFieldName(column) === null) return false;
+  if (!edit.isColumnEditable(column)) return false;
   return isColumnEditableForRow(column, row);
 }
 
+/**
+ * One cell of an entry row: the lane's controls, a value once the row is
+ * committed, or an editor. The invalid marker subscribes here, per cell, as
+ * a body cell's does - a refused ✓ paints the cells its issues name and
+ * nothing else. No dirty marker: everything in an entry row is new.
+ */
+function EntryCell({
+  entryRow,
+  column,
+  cell,
+  committed,
+  layout,
+  rowHeight,
+  pinnedZ,
+}: {
+  entryRow: EntryRow;
+  column: ErasedColumn;
+  cell: EntryCellApi | undefined;
+  committed: boolean;
+  layout: TMDataGridColumnLayout;
+  rowHeight: number;
+  pinnedZ: string;
+}) {
+  const { edit } = useTMDataGridContext();
+  const fieldName = getEditFieldName(column);
+  const isInvalid = useSelector(edit.store, (state) => {
+    if (fieldName === null) return false;
+    const projection = state.rows[entryRow.id];
+    return projection !== undefined && projection.errorFields.includes(fieldName);
+  });
+  const editable =
+    cell !== undefined && isEntryCellEditable(entryRow, column, edit);
+  return (
+    <div
+      role="cell"
+      data-column-id={column.id}
+      data-align={getColumnAlign(column)}
+      data-control-column={isControlColumn(column.id)}
+      data-invalid={isInvalid || undefined}
+      // A committed row re-opens where it is double-clicked, the same
+      // gesture a body cell answers - and, like a body cell, a cell that
+      // takes no edit answers nothing.
+      onDoubleClick={
+        committed && editable
+          ? () => edit.begin({ rowId: entryRow.id, columnId: column.id })
+          : 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())
+      ) : committed && cell !== undefined ? (
+        // Entered, awaiting Save all: a value row through the columns' own
+        // renderers, over the draft the entry table was fed.
+        <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>
+  );
+}
+
 /**
  * The sticky entry block - one row of open editors per `edit.addRow()`,
  * pinned under the header. The one place stickiness is genuinely required:
@@ -52,9 +142,9 @@ function isEntryCellEditable(
  * validators all apply unchanged. The forms live in the same engine map as
  * every other draft, keyed by their temporary ids.
  *
- * Enter commits the entry (`onRowAdd`) under the immediate modes and parks
- * it under draft, where `submitAll` reports it in `added`; Escape discards
- * it. The edit lane, when present, offers the same pair as buttons.
+ * Enter commits the entry - `onRowAdd`, or a park under `editing.draft`,
+ * where `saveDrafts` reports it in `created`; Escape discards it. The edit
+ * lane, when present, offers the same pair as buttons.
  */
 export function TMDataGridEntryRows({
   orderedColumns,
@@ -66,13 +156,34 @@ export function TMDataGridEntryRows({
   rowHeight: number;
 }) {
   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
+  const sticky = features.editNewRowsSticky;
+  // A row being *typed* into is always here - it exists nowhere else to
+  // scroll back to. A committed row is a body row, sorted and filtered with
+  // the rest (the hook feeds it to the table as `data`), unless
+  // `newRowsSticky` keeps it pinned here until the save. Only the rows the
+  // block renders go into its table: after an import `newRows` runs to
+  // thousands, every one of them committed and in the body.
+  const newRows = useSelector(
+    edit.store,
+    (state) =>
+      sticky
+        ? state.newRows
+        : state.newRows.filter((newRow) => !newRow.committed),
+    { compare: shallow },
+  );
+  // What a committed row renders from. It has no form - its values are the
+  // draft store's - and this is the same snapshot the table feeds a
+  // committed row in the body.
+  const committedValues = useSelector(
+    edit.store,
+    (state) => state.committedValues,
+  );
+  // The reopen gesture: `begin` on a committed 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,
+      (newRow) => newRow.tempId === state.active?.rowId && !newRow.committed,
     )
       ? state.active
       : null,
@@ -109,7 +220,7 @@ export function TMDataGridEntryRows({
   });
 
   /**
-   * The caret for a reopen: `begin` on a confirmed row re-arms its editors
+   * The caret for a reopen: `begin` on a committed 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.
@@ -134,21 +245,21 @@ export function TMDataGridEntryRows({
     focusEditorContent(editor);
   });
 
-  // Unconfirmed rows keep the seed values frozen at addRow - the live values
+  // Open (uncommitted) 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.
+  // provides row and cell identity. A committed row's cells render values, and
+  // a committed row is data: its values come from the draft store, which is
+  // also what the row keeps while a reopen is undecided.
   const data = useMemo(
     () =>
       newRows.map(
-        ({ tempId, confirmed }) =>
-          ((confirmed
-            ? edit.getForm(tempId)?.state.values
+        ({ tempId, committed }) =>
+          ((committed
+            ? committedValues[tempId]
             : edit.getForm(tempId)?.options.defaultValues) ??
             {}) as TMDataGridRowData,
       ),
-    [newRows, edit],
+    [newRows, committedValues, edit],
   );
 
   const entryTable = useTable({
@@ -160,30 +271,16 @@ 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]),
+  const stickyRows = entryTable.getCoreRowModel().rows;
+  const committedById = new Map(
+    newRows.map((newRow) => [newRow.tempId, newRow.committed]),
   );
-  // 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 renderEntryRow = (entryRow: EntryRow, pinnedZ: string) => {
     const cellsById = new Map(
       entryRow.getAllCells().map((cell) => [cell.column.id, cell]),
     );
-    const confirmed = confirmedById.get(entryRow.id) === true;
+    const committed = committedById.get(entryRow.id) === true;
     return (
       <div
         key={entryRow.id}
@@ -191,73 +288,24 @@ export function TMDataGridEntryRows({
         data-dg-part="entry-row"
         data-row-id={entryRow.id}
         data-new
-        data-confirmed={confirmed}
+        data-committed={committed}
+        // The same marker body rows carry once committed, so one selector
+        // reaches everything parked in the draft store.
+        data-draft={committed}
         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>
-          );
-        })}
+        {orderedColumns.map((column) => (
+          <EntryCell
+            key={column.id}
+            entryRow={entryRow}
+            column={column}
+            cell={cellsById.get(column.id)}
+            committed={committed}
+            layout={layoutFor(column.id)}
+            rowHeight={rowHeight}
+            pinnedZ={pinnedZ}
+          />
+        ))}
       </div>
     );
   };
@@ -276,19 +324,6 @@ export function TMDataGridEntryRows({
           )}
         </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/components/TMDataGridExportPicker.module.css

@@ -0,0 +1,77 @@
+.title {
+  font-weight: 500;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-default);
+  overflow: hidden;
+}
+
+.listHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  background-color: var(--mantine-color-default-hover);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+.headerLabel {
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--mantine-spacing-xs) / 2) 0;
+}
+
+/* Each column is one full-width row: the label stretches over the free space
+   so the whole row toggles the box, and the row highlights on hover like a
+   menu item. */
+.row {
+  padding: 0 var(--mantine-spacing-sm);
+}
+
+.row:hover {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.rowBody {
+  align-items: center;
+}
+
+.rowLabelWrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.rowLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-sm);
+  padding-block: calc(var(--mantine-spacing-xs) * 0.75);
+  cursor: pointer;
+}
+
+.rowText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rowHint {
+  flex: none;
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+.empty {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+}

package/src/components/TMDataGridExportPicker.tsx

@@ -0,0 +1,234 @@
+import {
+  Button,
+  Checkbox,
+  Group,
+  type MantineSize,
+  Modal,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import { useState } from "react";
+import classes from "./TMDataGridExportPicker.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { getColumnLabel, showColumnSearch } from "../core/columnUtils";
+import {
+  countSelectedExportRows,
+  getExportableColumns,
+  resolveExportOptions,
+  type TMDataGridExportPickerRequest,
+} from "../core/export";
+import type { TMDataGridSize } from "../core/sizes";
+import { useTMDataGridExport } from "../useTMDataGridExport";
+import { SearchIcon } from "./icons";
+
+/**
+ * The column picker behind `columns="custom"` on the export menu items: a
+ * list of every exportable column, the visible ones ticked and the hidden
+ * ones marked, a select-all row over the list, a search box once the list is
+ * long, and an Export button that downloads the ticked ones.
+ *
+ * Mounted once by the root and driven by `ui.state.exportPicker`, because the
+ * menu item that opens it unmounts with the dropdown on the click. The form
+ * inside is keyed on the request, so each opening starts from the visible
+ * columns again rather than from the last choice.
+ */
+export function TMDataGridExportPicker() {
+  const { ui, labels, size, controlSize, exportOptions } =
+    useTMDataGridContext();
+  const request = useSelector(ui, (state) => state.exportPicker);
+  const format = request
+    ? resolveExportOptions(exportOptions, request.options).format
+    : null;
+
+  return (
+    <Modal
+      opened={request !== null}
+      onClose={() => ui.actions.closeExportPicker()}
+      title={
+        format && labels.exportPickerTitle(format.extension.toUpperCase())
+      }
+      size={MODAL_WIDTH[size]}
+      closeButtonProps={{ size: CLOSE_BUTTON_SIZE[controlSize] }}
+      classNames={{ title: classes.title }}
+      styles={{ title: { fontSize: `var(--mantine-font-size-${controlSize})` } }}
+    >
+      {request && <PickerForm request={request} />}
+    </Modal>
+  );
+}
+
+/** Dialog width per grid size: the same three steps as the controls. */
+const MODAL_WIDTH: Record<TMDataGridSize, MantineSize> = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "sm",
+  xl: "md",
+};
+
+/** The close button one step above the controls, which is Mantine's own ratio. */
+const CLOSE_BUTTON_SIZE: Record<string, MantineSize> = {
+  xs: "sm",
+  sm: "md",
+  md: "lg",
+};
+
+function PickerForm({ request }: { request: TMDataGridExportPickerRequest }) {
+  const { table, ui, labels, controlSize } = useTMDataGridContext();
+  const { exportAll, exportSelected } = useTMDataGridExport(request.options);
+  const columns = getExportableColumns(table);
+  const [search, setSearch] = useState("");
+  const [checked, setChecked] = useState<ReadonlySet<string>>(
+    () =>
+      new Set(
+        columns
+          .filter((column) => column.getIsVisible())
+          .map((column) => column.id),
+      ),
+  );
+
+  const searchable = showColumnSearch("auto", columns.length);
+  const needle = search.trim().toLowerCase();
+  const listed = needle
+    ? columns.filter((column) =>
+        getColumnLabel(column).toLowerCase().includes(needle),
+      )
+    : columns;
+
+  // Select all works on the listed columns: with a search active it ticks the
+  // matches and leaves the rest as they are, the way a filtered list reads.
+  const listedChecked = listed.filter((column) => checked.has(column.id));
+  const allListed = listed.length > 0 && listedChecked.length === listed.length;
+  const someListed = listedChecked.length > 0 && !allListed;
+
+  const toggle = (columnId: string, on: boolean) =>
+    setChecked((previous) => {
+      const next = new Set(previous);
+      if (on) next.add(columnId);
+      else next.delete(columnId);
+      return next;
+    });
+
+  const toggleListed = (on: boolean) =>
+    setChecked((previous) => {
+      const next = new Set(previous);
+      for (const column of listed) {
+        if (on) next.add(column.id);
+        else next.delete(column.id);
+      }
+      return next;
+    });
+
+  const confirm = async () => {
+    // Render order, whatever order the boxes were ticked in.
+    const ids = columns
+      .filter((column) => checked.has(column.id))
+      .map((column) => column.id);
+    const run = request.rows === "selected" ? exportSelected : exportAll;
+    await run({ columns: ids });
+    ui.actions.closeExportPicker();
+  };
+
+  const hint = labels.exportPickerHint(
+    request.rows === "selected" ? countSelectedExportRows(table) : null,
+  );
+
+  return (
+    <Stack gap="sm" data-dg-part="export-picker">
+      <Text size={controlSize} c="dimmed" data-dg-part="export-picker-hint">
+        {hint}
+      </Text>
+
+      {searchable && (
+        <TextInput
+          value={search}
+          onChange={(event) => setSearch(event.currentTarget.value)}
+          placeholder={labels.columnsSearchPlaceholder}
+          leftSection={<SearchIcon size={16} stroke={1.6} />}
+          size={controlSize}
+          data-dg-part="export-picker-search"
+          data-autofocus
+        />
+      )}
+
+      <div className={classes.list}>
+        <div className={classes.listHeader}>
+          <Checkbox
+            size={controlSize}
+            label={labels.exportPickerSelectAll}
+            checked={allListed}
+            indeterminate={someListed}
+            onChange={(event) => toggleListed(event.currentTarget.checked)}
+            classNames={{ label: classes.headerLabel }}
+            data-dg-part="export-column-all"
+          />
+          <Text size="xs" c="dimmed" data-dg-part="export-picker-count">
+            {labels.exportPickerCount(checked.size, columns.length)}
+          </Text>
+        </div>
+
+        <ScrollArea.Autosize mah="50vh" type="auto">
+          <div className={classes.rows}>
+            {listed.map((column) => (
+              <Checkbox
+                key={column.id}
+                size={controlSize}
+                label={
+                  <>
+                    <span className={classes.rowText}>
+                      {getColumnLabel(column)}
+                    </span>
+                    {!column.getIsVisible() && (
+                      <span className={classes.rowHint}>
+                        {labels.exportPickerHidden}
+                      </span>
+                    )}
+                  </>
+                }
+                checked={checked.has(column.id)}
+                onChange={(event) =>
+                  toggle(column.id, event.currentTarget.checked)
+                }
+                classNames={{
+                  root: classes.row,
+                  body: classes.rowBody,
+                  labelWrapper: classes.rowLabelWrapper,
+                  label: classes.rowLabel,
+                }}
+                data-dg-part="export-column"
+                data-column-id={column.id}
+              />
+            ))}
+            {listed.length === 0 && (
+              <Text size={controlSize} c="dimmed" className={classes.empty}>
+                {labels.columnsNoMatch(search)}
+              </Text>
+            )}
+          </div>
+        </ScrollArea.Autosize>
+      </div>
+
+      <Group justify="flex-end" gap="xs">
+        <Button
+          variant="default"
+          size={controlSize}
+          onClick={() => ui.actions.closeExportPicker()}
+          data-dg-part="export-picker-cancel"
+        >
+          {labels.exportPickerCancel}
+        </Button>
+        <Button
+          size={controlSize}
+          disabled={checked.size === 0}
+          onClick={() => void confirm()}
+          data-dg-part="export-picker-confirm"
+        >
+          {labels.exportPickerConfirm}
+        </Button>
+      </Group>
+    </Stack>
+  );
+}