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

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,
@@ -43,8 +46,8 @@ const BUILT_IN_EDITORS: Record<
 export type TMDataGridCellEditorClose =
   | { committed: true; via: "enter" | "tab" | "shift-tab" | "pick" }
   | { committed: false; via: "escape" }
-  /** Draft: the editor closed, the draft stays - Enter parks, Tab moves on. */
-  | { committed: false; via: "defer" | "defer-tab" | "defer-shift-tab" };
+  /** `cellConfirm`: the editor closed, the draft stays, waiting for its ✓. */
+  | { committed: false; via: "defer-tab" | "defer-shift-tab" };
 
 /**
  * The host an editing cell mounts - it owns the field, the keys and the blur
@@ -68,10 +71,10 @@ export function TMDataGridCellEditor({
   /** After the editor closed itself - the table moves the focus. */
   onClose: (args: TMDataGridCellEditorClose) => void;
   /**
-   * Hosted by the entry block rather than a body cell. Under draft the keys
-   * change meaning there: Enter confirms the whole entry (the engine parks
-   * it), and Tab stays the browser's, walking the entry row's own inputs the
-   * way row mode's do.
+   * Hosted by the entry block rather than a body cell. An entry row is
+   * row-shaped in every mode: Enter enters the whole row, Tab stays the
+   * browser's - walking the row's own inputs the way row mode's do - and
+   * focus leaving decides nothing, because the ✓ is the decision.
    */
   inEntryBlock?: boolean;
 }) {
@@ -79,8 +82,9 @@ export function TMDataGridCellEditor({
   // Row mode mounts one host per editable cell of the row; every key that
   // commits or cancels acts on the whole row's form either way, but Tab must
   // stay the browser's (it walks the row's inputs) and blur must do nothing
-  // (focus moves between this row's own editors).
-  const isRowMode = features.editMode === "row";
+  // (focus moves between this row's own editors). The entry block is built
+  // the same way, in every mode, so it follows the same two rules.
+  const isRowShaped = features.editMode === "row" || inEntryBlock;
   const column = cell.column;
   const form = edit.getForm(row.id);
   const fieldName = getEditFieldName(column);
@@ -136,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(() => {
@@ -172,8 +187,12 @@ export function TMDataGridCellEditor({
     onClose({ committed: false, via: "escape" });
   };
 
-  /** Draft: the key closes the editor and leaves the draft for submitAll. */
-  const deferAndClose = (via: "defer" | "defer-tab" | "defer-shift-tab") => {
+  /**
+   * `cellConfirm`: the key closes the editor and leaves the draft where it
+   * is, waiting for the ✓. Moving along the row is not a decision about it;
+   * Enter is, and commits instead.
+   */
+  const deferAndClose = (via: "defer-tab" | "defer-shift-tab") => {
     if (closingRef.current) return;
     closingRef.current = true;
     edit.deactivate();
@@ -181,27 +200,42 @@ export function TMDataGridCellEditor({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const isDraft = features.editMode === "draft";
+    // 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();
-      // In row mode Enter (and Ctrl+Enter, the documented pair) saves the
-      // row; in draft nothing reaches a callback until submitAll, so Enter
-      // parks the draft - and in the entry block it confirms the entry, which
-      // the engine parks the same way.
-      if (isDraft && !inEntryBlock) deferAndClose("defer");
-      else void commitAndClose("enter");
+      // Enter is OK, in every mode: the row's form submits and has to pass
+      // validation. Where a commit *goes* is `editing.draft`'s business, not
+      // this key's - out to the consumer, or into the draft store.
+      void commitAndClose("enter");
     } else if (event.key === "Escape") {
       event.preventDefault();
       event.stopPropagation();
       cancelAndClose();
-    } else if (event.key === "Tab" && !isRowMode && !(isDraft && inEntryBlock)) {
-      // In the draft entry block Tab stays the browser's: every editable
-      // cell's editor is mounted, so it walks the row's inputs as row mode's
-      // does.
+    } else if (event.key === "Tab" && !isRowShaped) {
       event.preventDefault();
       event.stopPropagation();
-      if (isDraft) {
+      // `cellConfirm` is the one mode where leaving a cell decides nothing:
+      // 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");
@@ -211,27 +245,33 @@ export function TMDataGridCellEditor({
 
   /**
    * Focus left the editor entirely - a click somewhere else. Under `"cell"`
-   * that commits (Sheets); a commit blocked by validation keeps the form and
-   * its invalid marker, with the editor closed. The confirming modes keep
-   * the draft open-but-inactive, waiting for their explicit ✓.
+   * 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 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;
-    // Row mode: the row's other editors are outside this host, and focus
-    // moving between them is not leaving the edit. Blur means nothing here;
-    // the lane's Save/Cancel and the keys end the edit.
-    if (isRowMode) return;
+    // Row mode and the entry block: the row's other editors are outside this
+    // host, and focus moving between them is not leaving the edit. Blur means
+    // 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 === "cell") {
-      void edit.commit(row.id).then((ok) => {
-        if (!ok) edit.deactivate();
-      });
-    } else {
-      // cellConfirm: the draft stays, dirty-marked, waiting for its ✓.
+    if (features.editMode === "cellConfirm") {
+      // The draft stays, dirty-marked, waiting for its ✓.
       edit.deactivate();
+      return;
     }
+    void edit.commit(row.id).then((ok) => {
+      // Open for another try: the next blur or key has to be able to commit.
+      if (!ok) closingRef.current = false;
+    });
   };
 
   if (form === undefined || fieldName === null) return null;
@@ -267,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,6 +1,6 @@
 import { UnstyledButton } from "@mantine/core";
 import {
-  useCellControlTabIndex,
+  useBodyControlTabIndex,
   useTMDataGridContext,
 } from "../TMDataGridContext";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
@@ -26,10 +26,8 @@ function DetailsCell<TData extends RowData>({
   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}