@multiplatform.one/table 7.29.0 → 7.30.0

package/src/components/TableInput/tableInput.cellIdentity.spec.tsx

@@ -0,0 +1,196 @@
+/**
+ * A row commit re-renders the grid's cells in place (MPO-475). TanStack's
+ * flexRender mounts each column's `cell` as a component, so a renderer that
+ * changes identity on a commit remounts every cell, and focus that a Tab or
+ * Enter just placed in the grid lands on a detached node.
+ */
+
+import React from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useForm } from "@multiplatform.one/forms";
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, DataTableData } from "../../types";
+import { ChildTable } from "../ChildTable";
+import { TableInput } from "./index";
+
+interface Line extends DataTableData {
+  id: string;
+  item: string;
+  qty: number;
+}
+
+const initial = (): Line[] => [
+  { id: "a", item: "Bracket", qty: 12 },
+  { id: "b", item: "Bolts", qty: 3 },
+];
+
+const columns: DataTableColumn<Line>[] = [
+  { accessorKey: "item", header: "Item", field: "input" },
+  { accessorKey: "qty", header: "Qty", field: "stepper", fieldProps: { min: 0 } },
+];
+
+function Harness({
+  onChange,
+  freshSchema = false,
+}: {
+  onChange?: (rows: Line[]) => void;
+  freshSchema?: boolean;
+}) {
+  const [rows, setRows] = React.useState(initial);
+  return (
+    <ChildTable<Line>
+      value={rows}
+      columns={freshSchema ? columns.map((col) => ({ ...col })) : columns}
+      isCellHidden={freshSchema ? () => false : undefined}
+      rowDetail
+      onChange={(next) => {
+        setRows(next);
+        onChange?.(next);
+      }}
+    />
+  );
+}
+
+function FormHarness({ onChange }: { onChange?: (rows: Line[]) => void }) {
+  const form = useForm({ defaultValues: { lines: initial() } });
+  return (
+    <TableInput<Line>
+      form={form as any}
+      name="lines"
+      columns={columns}
+      rowDetail
+      onChange={onChange}
+    />
+  );
+}
+
+function cell(rowIndex: number, label: string) {
+  const row = document.querySelector<HTMLElement>(`[data-child-row-index="${rowIndex}"]`);
+  if (!row) throw new Error(`no grid row ${rowIndex}`);
+  return within(row).getByLabelText(label) as HTMLInputElement;
+}
+
+function gridControls() {
+  return [cell(0, "Item"), cell(0, "Qty"), cell(1, "Item"), cell(1, "Qty")];
+}
+
+function expectConnected(nodes: HTMLElement[]) {
+  expect(nodes.map((node) => node.isConnected)).toEqual(nodes.map(() => true));
+}
+
+const flushBlurTimer = () => act(() => new Promise<void>((resolve) => setTimeout(resolve, 15)));
+
+describe("TableInput cells survive a row commit (MPO-475)", () => {
+  it("Enter commits an edit and focus stays on the same connected input", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<Harness onChange={onChange} />);
+    const before = gridControls();
+    const item = cell(0, "Item");
+
+    await userEvent.click(item);
+    await userEvent.type(item, "X");
+    fireEvent.keyDown(item, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0][0].item).toBe("BracketX");
+    expectConnected(before);
+    expect(document.activeElement).toBe(item);
+  });
+
+  it("Tab after an edit commits and lands on the next cell's connected control", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<Harness onChange={onChange} />);
+    const before = gridControls();
+    const item = cell(0, "Item");
+    const qty = cell(0, "Qty");
+
+    await userEvent.click(item);
+    await userEvent.type(item, "X");
+    await userEvent.tab();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0][0].item).toBe("BracketX");
+    expectConnected(before);
+    expect(document.activeElement).toBe(qty);
+  });
+
+  it("Shift+Tab after a Stepper edit commits and lands on the previous cell's connected control", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<Harness onChange={onChange} />);
+    const before = gridControls();
+    const item = cell(0, "Item");
+    const qty = cell(0, "Qty");
+
+    await userEvent.click(qty);
+    await userEvent.clear(qty);
+    await userEvent.type(qty, "7");
+    await userEvent.tab({ shift: true });
+    await flushBlurTimer();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0][0].qty).toBe(7);
+    expectConnected(before);
+    expect(document.activeElement).toBe(item);
+  });
+
+  it("a commit in one row leaves the other row's cells connected in the form branch", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<FormHarness onChange={onChange} />);
+    const before = gridControls();
+    const item = cell(1, "Item");
+
+    await userEvent.click(item);
+    await userEvent.type(item, "X");
+    fireEvent.keyDown(item, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0][1].item).toBe("BoltsX");
+    expectConnected(before);
+    expect(document.activeElement).toBe(item);
+  });
+
+  it("a caller that rebuilds columns and isCellHidden every render keeps the cells mounted", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<Harness onChange={onChange} freshSchema />);
+    const before = gridControls();
+    const item = cell(0, "Item");
+
+    await userEvent.click(item);
+    await userEvent.type(item, "X");
+    await userEvent.tab();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expectConnected(before);
+    expect(document.activeElement).toBe(cell(0, "Qty"));
+  });
+
+  it("a row detail Done leaves the grid mounted and shows the new values in its cells", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<Harness onChange={onChange} />);
+    const before = gridControls();
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit row 2" }));
+    const dialog = await waitFor(() => screen.getByRole("dialog", { name: "Row 2" }));
+    const detailItem = within(dialog).getByLabelText("Item") as HTMLInputElement;
+    fireEvent.focus(detailItem);
+    fireEvent.change(detailItem, { target: { value: "Hinge" } });
+    fireEvent.blur(detailItem);
+    const detailQty = within(dialog).getByLabelText("Qty") as HTMLInputElement;
+    fireEvent.focus(detailQty);
+    fireEvent.change(detailQty, { target: { value: "9" } });
+    fireEvent.blur(detailQty);
+    await flushBlurTimer();
+    fireEvent.click(within(dialog).getByRole("button", { name: "Done" }));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0][1]).toMatchObject({ item: "Hinge", qty: 9 });
+    await waitFor(() => expect(screen.queryByRole("dialog", { name: "Row 2" })).toBeNull(), {
+      timeout: 3000,
+    });
+    expectConnected(before.slice(0, 2));
+    expect(cell(1, "Item").value).toBe("Hinge");
+    expect(cell(1, "Qty").value).toBe("9");
+  });
+});

package/types/components/KnobDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KnobDialog.d.ts","sourceRoot":"","sources":["../../src/components/KnobDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAY,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAMzF;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAoC/E;AAGD,eAAO,MAAM,iBAAiB;;;;wFAAiB,CAAC;AAChD,eAAO,MAAM,eAAe;;;;;;;;;;6CAAe,CAAC;AAC5C,eAAO,MAAM,qBAAqB;;;;;;;;;;6CAAqB,CAAC;AACxD,eAAO,MAAM,eAAe;;;;;;;;wFAAe,CAAC"}
+{"version":3,"file":"KnobDialog.d.ts","sourceRoot":"","sources":["../../src/components/KnobDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAY,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAMzF;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAoC/E;AAGD,eAAO,MAAM,iBAAiB;;;;wFAAiB,CAAC;AAChD,eAAO,MAAM,eAAe;;;;;;;;;;6CAAe,CAAC;AAC5C,eAAO,MAAM,qBAAqB;;;;;;;;;;6CAAqB,CAAC;AACxD,eAAO,MAAM,eAAe;;;;;;;;wFAAe,CAAC"}

package/types/components/TableInput/RowDetailEditor.d.ts

@@ -7,6 +7,10 @@
  * copy of the row seeded on open. "Done" and an outside click commit the
  * draft once; "Cancel" and Escape discard it. A read-only row opens for
  * viewing with a single "Close".
+ *
+ * The pencil is the dialog's `Dialog.Trigger`: tamagui's modal close returns
+ * focus to the trigger ref and nowhere else, so without it every close
+ * dropped focus on <body> (MPO-471).
  */
 import type { DataTableColumn, DataTableData } from "../../types";
 import { type ChildCellHidden } from "./shared";

package/types/components/TableInput/RowDetailEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowDetailEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/RowDetailEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AASH,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EAGd,MAAM,aAAa,CAAC;AAIrB,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3E,MAAM,WAAW,oBAAoB,CAAC,KAAK,SAAS,aAAa;IAC/D,GAAG,EAAE,KAAK,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACtC,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,eAAe,CAAC,KAAK,SAAS,aAAa,EAAE,EAC3D,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,2CA4H7B"}
+{"version":3,"file":"RowDetailEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/RowDetailEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AASH,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EAGd,MAAM,aAAa,CAAC;AAIrB,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3E,MAAM,WAAW,oBAAoB,CAAC,KAAK,SAAS,aAAa;IAC/D,GAAG,EAAE,KAAK,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACtC,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,eAAe,CAAC,KAAK,SAAS,aAAa,EAAE,EAC3D,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,2CAyH7B"}

package/types/components/TableInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAQH,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,0BAA0B,CAAC;AAOlC,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,cAAc,EACf,MAAM,aAAa,CAAC;AAIrB,OAAO,EAML,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa;IAC1E,mFAAmF;IACnF,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,4DAA4D;IAC5D,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACvC,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5E,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IACzC,kEAAkE;IAClE,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACvC;AAED,wBAAgB,UAAU,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,EAAE,EACtE,IAAS,EACT,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,cAAqB,EACrB,UAAiB,EACjB,aAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,OAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,aAAa,EACb,YAAY,GACb,EAAE,eAAe,CAAC,KAAK,CAAC,2CA0ExB;AA2fD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAQH,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,0BAA0B,CAAC;AAalC,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,cAAc,EACf,MAAM,aAAa,CAAC;AAIrB,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AA+GlB,MAAM,WAAW,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa;IAC1E,mFAAmF;IACnF,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,4DAA4D;IAC5D,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACvC,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5E,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IACzC,kEAAkE;IAClE,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACvC;AAED,wBAAgB,UAAU,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,EAAE,EACtE,IAAS,EACT,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,cAAqB,EACrB,UAAiB,EACjB,aAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,OAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,aAAa,EACb,YAAY,GACb,EAAE,eAAe,CAAC,KAAK,CAAC,2CA0ExB;AAiZD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}