@jielga/tmdatagrid 2.0.0-beta.8 → 2.0.0

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

@@ -1,4 +1,4 @@
-import { ActionIcon } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import { FieldApi } from "@tanstack/react-form";
 import type { Cell, Row } from "@tanstack/react-table";
 import {
@@ -11,6 +11,7 @@ import {
 } from "react";
 import classes from "./TMDataGridTable.module.css";
 import { type TMDataGridRowData, useTMDataGridContext } from "../TMDataGridContext";
+import { isButtonElement, isInputElement, isNode } from "../core/dom";
 import {
   getEditFieldName,
   normalizeFieldValidate,
@@ -19,6 +20,7 @@ import {
   type TMDataGridEditValueMap,
 } from "../core/editEngine";
 import type { TMDataGridFeatures } from "../useTMDataGrid";
+import { FOCUSABLE_IN_CELL } from "../core/editorFocus";
 import { CheckIcon, CloseIcon } from "./icons";
 import { TMDataGridBooleanEditor } from "./editors/TMDataGridBooleanEditor";
 import { TMDataGridDateEditor } from "./editors/TMDataGridDateEditor";
@@ -26,6 +28,7 @@ import { TMDataGridMultiSelectEditor } from "./editors/TMDataGridMultiSelectEdit
 import { TMDataGridNumberEditor } from "./editors/TMDataGridNumberEditor";
 import { TMDataGridSelectEditor } from "./editors/TMDataGridSelectEditor";
 import { TMDataGridStringEditor } from "./editors/TMDataGridStringEditor";
+import { useFieldError } from "./editors/editorShared";
 
 const BUILT_IN_EDITORS: Record<
   string,
@@ -137,6 +140,17 @@ export function TMDataGridCellEditor({
   });
   useEffect(() => field.mount(), [field]);
 
+  // The field's message, read here rather than in each editor: the tooltip
+  // below is the host's, so a column's own `meta.edit.editor` gets it too.
+  const error = useFieldError(field);
+  // When that tooltip is up, held here rather than left to Tooltip's own
+  // `events`: those bring floating-ui's dismiss interaction with them, which
+  // puts an `onKeyDown` on the anchor and stops Escape inside the editor
+  // before the host's handler below can cancel on it. A controlled `opened`
+  // turns the interaction off, so hover and focus are tracked here instead.
+  const [messageHovered, setMessageHovered] = useState(false);
+  const [messageFocused, setMessageFocused] = useState(false);
+
   // Type-to-edit: the seed replaces the value, as it does in a spreadsheet.
   // Only for the types where keystrokes are the input.
   useEffect(() => {
@@ -186,6 +200,13 @@ export function TMDataGridCellEditor({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    // Enter on the ✓ or ✕ is the button's own press, and does what a click on
+    // it does: commit and stay, or cancel. Left to the branch below it would
+    // commit and move down, and the same button would mean two things.
+    if (event.key === "Enter" && isButtonElement(event.target)) {
+      event.stopPropagation();
+      return;
+    }
     if (event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
@@ -201,8 +222,20 @@ export function TMDataGridCellEditor({
       event.preventDefault();
       event.stopPropagation();
       // `cellConfirm` is the one mode where leaving a cell decides nothing:
-      // the caret moves on and the draft waits for its ✓.
+      // the caret moves on and the draft waits for its ✓. The ✓ and ✕ beside
+      // the input are the cell's own form, so Tab reaches them first - input,
+      // ✓, ✕ - and only past the last of them moves on.
       if (features.editMode === "cellConfirm") {
+        const tabbables = Array.from(
+          event.currentTarget.querySelectorAll<HTMLElement>(FOCUSABLE_IN_CELL),
+        ).filter((element) => element.tabIndex >= 0);
+        const index = tabbables.indexOf(event.target as HTMLElement);
+        const next = tabbables[index + (event.shiftKey ? -1 : 1)];
+        if (index >= 0 && next !== undefined) {
+          next.focus();
+          if (isInputElement(next)) next.select();
+          return;
+        }
         deferAndClose(event.shiftKey ? "defer-shift-tab" : "defer-tab");
       } else {
         void commitAndClose(event.shiftKey ? "shift-tab" : "tab");
@@ -214,8 +247,12 @@ export function TMDataGridCellEditor({
    * Focus left the editor entirely - a click somewhere else. Under `"cell"`
    * that commits (Sheets): a row the user has walked away from is a row they
    * are done typing into, and where the commit lands is `editing.draft`'s
-   * business. A commit blocked by validation keeps the form and its invalid
-   * marker, with the editor closed.
+   * business. A refused commit - validation, or `onCommit` rejecting - leaves
+   * the editor where it is, invalid, with the value still in it: closed, the
+   * cell would render the refused value as if it had landed, and the message
+   * would go with the editor. The engine holds the same line when another
+   * row is opened over a refused one (see `begin`). The user fixes the value,
+   * or Escapes.
    */
   const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
     if (closingRef.current) return;
@@ -224,7 +261,7 @@ export function TMDataGridCellEditor({
     // nothing there; the lane's buttons and the keys end the edit.
     if (isRowShaped) return;
     const next = event.relatedTarget;
-    if (next instanceof Node && event.currentTarget.contains(next)) return;
+    if (isNode(next) && event.currentTarget.contains(next)) return;
     closingRef.current = true;
     if (features.editMode === "cellConfirm") {
       // The draft stays, dirty-marked, waiting for its ✓.
@@ -232,7 +269,8 @@ export function TMDataGridCellEditor({
       return;
     }
     void edit.commit(row.id).then((ok) => {
-      if (!ok) edit.deactivate();
+      // Open for another try: the next blur or key has to be able to commit.
+      if (!ok) closingRef.current = false;
     });
   };
 
@@ -269,7 +307,35 @@ export function TMDataGridCellEditor({
       onMouseDown={(event) => event.stopPropagation()}
       onDoubleClick={(event) => event.stopPropagation()}
     >
-      <Editor {...args} />
+      {/* The validation message, on the editor rather than under it: inside a
+          narrow column Mantine's inline error wraps, grows the row and is
+          clipped, so the input keeps the invalid border and the text comes up
+          beside it. The editor gets a box of its own because Tooltip needs a
+          child that takes a ref, which a `meta.edit.editor` need not forward. */}
+      <Tooltip
+        label={error}
+        opened={error !== undefined && (messageHovered || messageFocused)}
+        withArrow
+        position="bottom-start"
+      >
+        <div
+          className={classes.cellEditorField}
+          onMouseEnter={() => setMessageHovered(true)}
+          onMouseLeave={() => setMessageHovered(false)}
+          onFocus={() => setMessageFocused(true)}
+          onBlur={(event) => {
+            // Focus moving inside the editor - into an open dropdown, say - is
+            // not focus leaving it.
+            const next = event.relatedTarget;
+            if (isNode(next) && event.currentTarget.contains(next)) {
+              return;
+            }
+            setMessageFocused(false);
+          }}
+        >
+          <Editor {...args} />
+        </div>
+      </Tooltip>
       {/* cellConfirm's chrome: the draft only commits through the ✓ (or
           Enter), so the pair sits right beside the input. */}
       {features.editMode === "cellConfirm" && (

package/src/{tmdatagrid/components → components}/TMDataGridColumnsPanel.module.css

@@ -12,7 +12,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--mantine-spacing-sm);
-  padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm);
+}
+
+.columnsPanelSearch + * .columnsPanelList {
+  padding-top: 0;
 }
 
 .columnsPanelFooter {

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

@@ -1,4 +1,6 @@
 import {
+  Box,
+  type BoxProps,
   Button,
   Checkbox,
   ScrollArea,
@@ -6,36 +8,42 @@ import {
   TextInput,
   Tooltip,
 } from "@mantine/core";
-import { useSelector } from "@tanstack/react-store";
 import { useState } from "react";
 import classes from "./TMDataGridColumnsPanel.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
-import { getColumnLabel } from "../core/columnUtils";
+import {
+  getColumnLabel,
+  showColumnSearch,
+  type TMDataGridColumnSearchable,
+} from "../core/columnUtils";
+import { useHideableColumns } from "./useHideableColumns";
 import { SearchIcon } from "./icons";
 
 /**
- * The "Manage columns" surface. Reachable from every column header menu and
- * from the grid's burger menu, so it lives on its own and is rendered by
- * `TMDataGrid.ColumnsButton`.
+ * The "Manage columns" surface as plain controls, for a host that is not a
+ * menu - a Popover, a Drawer, an inline layout. `TMDataGrid.Menu.Columns` is
+ * the same chooser as menu items.
  */
-export function TMDataGridColumnsPanel() {
-  const { table, labels, controlSize, resetSettings } = useTMDataGridContext();
+/** Mantine's style props (`w={320}`, `p="sm"`) are set on the panel block. */
+export type TMDataGridColumnsPanelProps = BoxProps & {
+  /**
+   * The search box over the list: `"auto"` (the default) from six hideable
+   * columns, `true` always, `false` never.
+   */
+  searchable?: TMDataGridColumnSearchable;
+};
+
+export function TMDataGridColumnsPanel({
+  className,
+  searchable = "auto",
+  ...others
+}: TMDataGridColumnsPanelProps = {}) {
+  const { labels, controlSize, resetSettings } = useTMDataGridContext();
   const [search, setSearch] = useState("");
 
-  const columnVisibility = useSelector(
-    table.store,
-    (state) => state.columnVisibility,
-  );
+  const { columns, columnVisibility, shownCount, setAllVisible } =
+    useHideableColumns();
 
-  // Only what can actually be hidden. A column with `enableHiding: false` is
-  // left out rather than listed and disabled: a box that cannot be ticked only
-  // invites the question, and every generated lane is one - the checkbox and
-  // edit lanes hold the controls the grid needs, the tree column follows the
-  // grouping state, the row-number gutter follows `enableRowNumbers`. None of
-  // them is a setting.
-  const columns = table
-    .getAllLeafColumns()
-    .filter((column) => column.getCanHide());
   const needle = search.trim().toLowerCase();
   const visibleInPanel = needle
     ? columns.filter((column) =>
@@ -43,41 +51,25 @@ export function TMDataGridColumnsPanel() {
       )
     : columns;
 
-  const shownCount = columns.filter(
-    (column) => columnVisibility[column.id] !== false,
-  ).length;
-
-  /**
-   * Show or hide every listed column.
-   *
-   * Not `table.toggleAllColumnsVisible`, which writes a visibility entry for
-   * *every* leaf column: showing all would publish the tree column - hidden
-   * because nothing is grouped, not because the user hid it - and hiding all
-   * would force the same column visible, since it writes `!getCanHide()` for
-   * the columns it will not touch. Either way a lane the panel never listed
-   * changes state, and persistence then keeps it that way.
-   */
-  const setAllVisible = (visible: boolean) => {
-    table.setColumnVisibility((previous) => {
-      const next = { ...previous };
-      for (const column of columns) next[column.id] = visible;
-      return next;
-    });
-  };
-
   return (
-    <div data-dg-part="columns-panel" className={classes.columnsPanel}>
-      <div className={classes.columnsPanelSearch}>
-        <TextInput
-          value={search}
-          onChange={(event) => setSearch(event.currentTarget.value)}
-          placeholder={labels.columnsSearchPlaceholder}
-          leftSection={<SearchIcon size={16} stroke={1.6} />}
-          size={controlSize}
-          data-dg-part="columns-search"
-          data-autofocus
-        />
-      </div>
+    <Box
+      data-dg-part="columns-panel"
+      className={[classes.columnsPanel, className].filter(Boolean).join(" ")}
+      {...others}
+    >
+      {showColumnSearch(searchable, columns.length) && (
+        <div className={classes.columnsPanelSearch}>
+          <TextInput
+            value={search}
+            onChange={(event) => setSearch(event.currentTarget.value)}
+            placeholder={labels.columnsSearchPlaceholder}
+            leftSection={<SearchIcon size={16} stroke={1.6} />}
+            size={controlSize}
+            data-dg-part="columns-search"
+            data-autofocus
+          />
+        </div>
+      )}
 
       <ScrollArea.Autosize mah={260} type="auto">
         <div className={classes.columnsPanelList}>
@@ -126,6 +118,6 @@ export function TMDataGridColumnsPanel() {
           </Button>
         </Tooltip>
       </div>
-    </div>
+    </Box>
   );
 }

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

@@ -1,9 +1,9 @@
 import { UnstyledButton } from "@mantine/core";
 import {
-  useCellControlTabIndex,
+  useBodyControlTabIndex,
   useTMDataGridContext,
 } from "../TMDataGridContext";
-import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import type { Row, RowData } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
 import classes from "./TMDataGridDetailsColumn.module.css";
 import { ChevronRightIcon } from "./icons";
@@ -20,16 +20,14 @@ export const DETAILS_COLUMN_ID = "__details__";
  * expand, so the React Compiler would cache the call along with it and the
  * chevron would never turn. Same reason the select checkbox subscribes.
  */
-function DetailsCell<TData extends RowData>({
+export function DetailsCell<TData extends RowData>({
   row,
 }: {
   row: Row<TMDataGridFeatures, TData>;
 }) {
   const { labels } = useTMDataGridContext();
+  const tabIndex = useBodyControlTabIndex();
   const expanded = useSelector(row.table.store, () => row.getIsExpanded());
-  // See useCellControlTabIndex: a body control is reached by stepping into its
-  // cell, not by Tab, or the grid would have one tab stop per mounted row.
-  const tabIndex = useCellControlTabIndex();
 
   // Group rows open into their children, not into a panel - see the body's
   // `showsDetails`. Their cells are aggregated, so this lane is already blank
@@ -39,6 +37,8 @@ function DetailsCell<TData extends RowData>({
   return (
     <UnstyledButton
       className={classes.detailsToggle}
+      // See useBodyControlTabIndex: under cell selection, reached by stepping
+      // into the cell or by the Tab walk within the row, not by the page.
       tabIndex={tabIndex}
       aria-expanded={expanded}
       aria-label={expanded ? labels.hideDetails : labels.showDetails}
@@ -51,7 +51,7 @@ function DetailsCell<TData extends RowData>({
         row.toggleExpanded();
       }}
     >
-      <span className={classes.chevron} data-expanded={expanded}>
+      <span className={classes.chevron} data-expanded={expanded || undefined}>
         <ChevronRightIcon size={16} stroke={1.6} />
       </span>
     </UnstyledButton>
@@ -67,7 +67,7 @@ function DetailsCell<TData extends RowData>({
  * so it would unfold every group as well. Only the data rows are touched here;
  * whatever the tree was showing, it goes on showing. See resolveExpandAll.
  */
-function DetailsHeader<TData extends RowData>({
+export function DetailsHeader<TData extends RowData>({
   table,
 }: {
   table: TMDataGridTable<TData>;
@@ -106,55 +106,9 @@ function DetailsHeader<TData extends RowData>({
         )
       }
     >
-      <span className={classes.chevron} data-expanded={allExpanded}>
+      <span className={classes.chevron} data-expanded={allExpanded || undefined}>
         <ChevronRightIcon size={16} stroke={1.6} />
       </span>
     </UnstyledButton>
   );
 }
-
-/**
- * The generated details lane, prepended whenever `renderDetails` is set.
- *
- * Structural, like the checkbox and tree columns: fixed width, pinned to the
- * left after both of them, not hideable, not movable and not resizable. Moving
- * or hiding the toggle would leave rows with panels that cannot be opened.
- *
- * Last of the three because it acts on a single record.
- *
- * A second toggle elsewhere is supported: `row.toggleExpanded()` is the entire
- * interface, and this lane is only the control the grid ships.
- */
-export function createDetailsColumn<TData extends RowData>(
-  label = "Details",
-): ColumnDef<TMDataGridFeatures, TData, unknown> {
-  return {
-    id: DETAILS_COLUMN_ID,
-    meta: {
-      label,
-      align: "center",
-      // Structurally the last of the generated lanes.
-      enableOrdering: false,
-    },
-    // A system lane: as wide as the control it holds and no wider. Fixed at
-    // every scale - the control does not grow with the font size, so neither
-    // should its track.
-    size: 36,
-    minSize: 36,
-    maxSize: 36,
-    enableResizing: false,
-    enableSorting: false,
-    enableColumnFilter: false,
-    enableGlobalFilter: false,
-    // Its visibility is not the user's to set: hiding it would strand every
-    // panel behind a control that is no longer there.
-    enableHiding: false,
-    // Structurally pinned to the left; users shouldn't be able to move it.
-    enablePinning: false,
-    header: ({ table }) => <DetailsHeader table={table} />,
-    cell: ({ row }) => <DetailsCell row={row} />,
-    // Deliberately no `aggregatedCell`: on a group row every cell outside the
-    // grouped column counts as aggregated, and blank is the right answer here -
-    // groups expand into their rows, not into a panel.
-  };
-}

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

@@ -3,7 +3,11 @@ import { useSelector } from "@tanstack/react-store";
 import { shallow } from "@tanstack/store";
 import type { ReactNode } from "react";
 import { useTMDataGridContext } from "../TMDataGridContext";
-import { getOpenRowIds } from "../core/editEngine";
+import {
+  getOpenRowIds,
+  type TMDataGridCommitAllResult,
+  type TMDataGridSaveDraftsResult,
+} from "../core/editEngine";
 import { getDisplayedRows } from "../core/rowSelection";
 import type {
   TMDataGridScrollAlign,
@@ -17,13 +21,20 @@ import type {
  */
 function useDraftCount(): number {
   const { edit } = useTMDataGridContext();
-  return useSelector(
-    edit.store,
-    (state) =>
-      state.committedRowIds.length +
+  return useSelector(edit.store, (state) => {
+    const deleted = new Set(state.deletedRowIds);
+    // An edited row that was then marked counts once: Save sends the
+    // deletion and leaves the edit behind.
+    const edited =
+      deleted.size === 0
+        ? state.committedRowIds.length
+        : state.committedRowIds.filter((rowId) => !deleted.has(rowId)).length;
+    return (
+      edited +
       state.newRows.filter((newRow) => newRow.committed).length +
-      state.deletedRowIds.length,
-  );
+      deleted.size
+    );
+  });
 }
 
 /**
@@ -55,15 +66,15 @@ function useOpenRowIds(): ReadonlyArray<string> {
 function EditSaveButton() {
   const { edit, labels } = useTMDataGridContext();
   const draftCount = useDraftCount();
-  const isSubmitting = useSelector(edit.store, (state) =>
-    state.openRowIds.some((rowId) => state.rows[rowId]?.isSubmitting === true),
-  );
+  // Save sends the draft store, so its loading state is the save in flight,
+  // not an open row's submit.
+  const isSaving = useSelector(edit.store, (state) => state.isSaving);
 
   return (
     <Button
       size="compact-sm"
       disabled={draftCount === 0}
-      loading={isSubmitting}
+      loading={isSaving}
       data-dg-part="save-all"
       data-draft-count={draftCount}
       onClick={() => void edit.saveDrafts()}
@@ -94,14 +105,14 @@ function EditDiscardButton() {
   const { edit, labels } = useTMDataGridContext();
   // Discard drops everything the grid is holding, open rows included, so it
   // stays live while anything is uncommitted.
-  const pendingCount = useDraftCount() + useOpenCount();
+  const uncommittedCount = useDraftCount() + useOpenCount();
 
   return (
     <Button
       variant="subtle"
       color="gray"
       size="compact-sm"
-      disabled={pendingCount === 0}
+      disabled={uncommittedCount === 0}
       data-dg-part="discard-all"
       onClick={() => edit.cancelAll()}
     >
@@ -139,21 +150,26 @@ export type TMDataGridDraftActionsState = {
    * in display order, so it need not be `openRowIds[0]`.
    */
   openRowIds: ReadonlyArray<string>;
-  /**
-   * @deprecated Was "everything uncommitted", which Save no longer sends.
-   * Reads as `draftCount + openCount`; use whichever you meant.
-   */
-  pendingCount: number;
-  /** Whether a submit is in flight. */
+  /** Whether a submit is in flight - any open row is submitting. */
   isSubmitting: boolean;
+  /** `true` while `saveDrafts` is in flight. */
+  isSaving: boolean;
 };
 
 /** What the edit chrome can do. */
 export type TMDataGridDraftActionsActions = {
-  /** Saves the draft store. Open rows are left alone. */
-  save: () => Promise<boolean>;
-  /** Submits every open row, committing the ones that validate. */
-  commitAll: () => Promise<boolean>;
+  /**
+   * Saves the draft store - `edit.saveDrafts()`. Open rows are left alone.
+   * Resolves which ids were saved, kept in the draft store for the next
+   * save, or reopened with an error; see {@link TMDataGridSaveDraftsResult}.
+   */
+  save: () => Promise<TMDataGridSaveDraftsResult>;
+  /**
+   * Submits every open row, committing the ones that validate -
+   * `edit.commitAll()`. Resolves which rows committed and which are still
+   * open; see {@link TMDataGridCommitAllResult}.
+   */
+  commitAll: () => Promise<TMDataGridCommitAllResult>;
   /** Drops everything - open form state and the draft store alike. */
   discard: () => void;
   /**
@@ -242,6 +258,7 @@ export function TMDataGridDraftActions({
   const isSubmitting = useSelector(edit.store, (state) =>
     state.openRowIds.some((rowId) => state.rows[rowId]?.isSubmitting === true),
   );
+  const isSaving = useSelector(edit.store, (state) => state.isSaving);
 
   if (!features.editing) return null;
 
@@ -251,8 +268,8 @@ export function TMDataGridDraftActions({
         draftCount,
         openCount: openRowIds.length,
         openRowIds,
-        pendingCount: draftCount + openRowIds.length,
         isSubmitting,
+        isSaving,
       },
       actions: {
         save: () => edit.saveDrafts(),