@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/DataTableCell/cellDraftPolicy.spec.tsx

@@ -0,0 +1,638 @@
+/**
+ * DataTableCell draft-until-commit policy tests (Escape-revert for pickers).
+ *
+ * Category (a) — single-tap discrete pickers (Select, DatePicker day-tap…)
+ * commit immediately on selection; Escape/close just closes.
+ * Category (b) — multi-step / free-entry editors (Stepper, PhoneInput, OTP,
+ * MultiDatePicker) buffer edits as a draft in the cell layer and
+ * only commit on explicit confirm (Enter in a text input, or focus leaving
+ * the cell); Escape discards the draft. DateRangePicker commits complete
+ * ranges immediately (its only emit) but Escape discards a half-picked range.
+ *
+ * The forms components are mocked with functional fakes that mirror the real
+ * emit contracts (uncontrolled Stepper committing on blur, per-keystroke
+ * PhoneInput, controlled OTP/MultiDate, complete-range-only DateRange), so
+ * these tests exercise the CELL adapter's draft buffer — the real component
+ * integration is browser-verified against Storybook.
+ */
+
+import React from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+// ── Mock form components ──────────────────────────────────────
+
+function createMock(name: string) {
+  const Comp = React.forwardRef((_props: any, ref: any) =>
+    React.createElement("div", {
+      "data-testid": `mock-${name}`,
+      "data-component": name,
+      ref,
+    }),
+  );
+  Comp.displayName = `Mock${name}`;
+  return Comp;
+}
+
+/** Uncontrolled like the real standalone Stepper: typing stays internal and
+ * onChange fires the parsed number on blur (commitStandalone). */
+function MockStepper({ defaultValue, onChange }: any) {
+  const [text, setText] = React.useState(defaultValue != null ? String(defaultValue) : "");
+  return (
+    <input
+      data-testid="stepper-input"
+      value={text}
+      onChange={(event) => setText(event.target.value)}
+      onBlur={() => onChange?.(text === "" ? null : Number(text))}
+    />
+  );
+}
+
+/** Uncontrolled like the real standalone PhoneInput: emits per keystroke. */
+function MockPhoneInput({ defaultValue, onChange }: any) {
+  const [text, setText] = React.useState(defaultValue ?? "");
+  return (
+    <input
+      data-testid="phone-input"
+      value={text}
+      onChange={(event) => {
+        setText(event.target.value);
+        onChange?.(event.target.value);
+      }}
+    />
+  );
+}
+
+/** Controlled like the real OTPInput: emits the code per digit change. */
+function MockOTPInput({ value, onChange }: any) {
+  return (
+    <input
+      data-testid="otp-input"
+      value={value ?? ""}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  );
+}
+
+/** Single-select commits immediately on option click (category a). */
+function MockSelect({ value, onValueChange }: any) {
+  return (
+    <button type="button" data-testid="select-trigger" onClick={() => onValueChange?.("beta")}>
+      {String(value ?? "")}
+    </button>
+  );
+}
+
+/** Controlled like the real TextArea: emits text per change. */
+function MockTextArea({ value, onChangeText }: any) {
+  return (
+    <textarea
+      data-testid="textarea-input"
+      value={value ?? ""}
+      onChange={(event) => onChangeText?.(event.target.value)}
+    />
+  );
+}
+
+/** Options render as one role=radio button per option (mirrors the real
+ * anatomy: onValueChange fires only when the value CHANGES). */
+function MockRadioGroup({ value, onValueChange, options }: any) {
+  return (
+    <div data-testid="radio-group" data-value={String(value ?? "")}>
+      {(options ?? []).map((option: any) => (
+        <button
+          key={option.value}
+          type="button"
+          role="radio"
+          aria-checked={option.value === value}
+          data-testid={`radio-${option.value}`}
+          onClick={() => {
+            if (option.value !== value) onValueChange?.(option.value);
+          }}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Functional FloatingPanel fake: trigger toggles open; children render only
+ * while open (mirrors the popover/sheet contract CellOptionsEditor relies on).
+ */
+function MockFloatingPanel({ open, onOpenChange, trigger, children, disabled }: any) {
+  return (
+    <div data-testid="mock-FloatingPanel">
+      <div
+        data-testid="floating-panel-trigger"
+        onClick={() => {
+          if (!disabled) onOpenChange?.(!open);
+        }}
+      >
+        {trigger}
+      </div>
+      {open ? <div data-testid="floating-panel-content">{children}</div> : null}
+    </div>
+  );
+}
+
+/** Mirrors the real DateRangePicker: picking a start date is internal-only
+ * (no emit); onChange fires only when the range completes. */
+function MockDateRangePicker({ value, onChange }: any) {
+  const [pendingStart, setPendingStart] = React.useState<string | null>(null);
+  const display = pendingStart
+    ? `${pendingStart} – end date`
+    : value
+      ? `${value.start} – ${value.end}`
+      : "empty";
+  return (
+    <div>
+      <span data-testid="daterange-display">{display}</span>
+      <button
+        type="button"
+        data-testid="daterange-pick-start"
+        onClick={() => setPendingStart("2026-08-18")}
+      />
+      <button
+        type="button"
+        data-testid="daterange-complete"
+        onClick={() => {
+          setPendingStart(null);
+          onChange?.({ start: "2026-08-18", end: "2026-08-22" });
+        }}
+      />
+    </div>
+  );
+}
+
+/** Controlled like the real MultiDatePicker: emits the accumulated array on
+ * every toggle. */
+function MockMultiDatePicker({ value, onChange }: any) {
+  const dates: string[] = Array.isArray(value) ? value : [];
+  return (
+    <div>
+      <span data-testid="multidate-display">{dates.join(",")}</span>
+      <button
+        type="button"
+        data-testid="multidate-toggle-a"
+        onClick={() => onChange?.([...dates, "A"])}
+      />
+      <button
+        type="button"
+        data-testid="multidate-toggle-b"
+        onClick={() => onChange?.([...dates, "B"])}
+      />
+    </div>
+  );
+}
+
+vi.mock("@multiplatform.one/forms", () => ({
+  Checkbox: createMock("Checkbox"),
+  Switch: createMock("Switch"),
+  Select: MockSelect,
+  Combobox: createMock("Combobox"),
+  Input: createMock("Input"),
+  TextArea: MockTextArea,
+  Slider: createMock("Slider"),
+  Progress: createMock("Progress"),
+  RadioGroup: MockRadioGroup,
+  FloatingPanel: MockFloatingPanel,
+  ToggleGroup: createMock("ToggleGroup"),
+  DatePicker: createMock("DatePicker"),
+  DatetimePicker: createMock("DatetimePicker"),
+  TimePicker: createMock("TimePicker"),
+  DateRangePicker: MockDateRangePicker,
+  MultiDatePicker: MockMultiDatePicker,
+  Stepper: MockStepper,
+  Duration: createMock("Duration"),
+  PhoneInput: MockPhoneInput,
+  Barcode: createMock("Barcode"),
+  BarcodePreview: createMock("BarcodePreview"),
+  MentionInput: createMock("MentionInput"),
+  OTPInput: MockOTPInput,
+  Rating: createMock("Rating"),
+  FileUpload: createMock("FileUpload"),
+  ImageField: createMock("ImageField"),
+  Signature: createMock("Signature"),
+  Geolocation: createMock("Geolocation"),
+  ColorPicker: createMock("ColorPicker"),
+  Button: createMock("Button"),
+  FieldDisplay: (props: any) =>
+    React.createElement("div", {
+      "data-testid": "mock-FieldDisplay",
+      "data-component": "FieldDisplay",
+      "data-field": props.field,
+    }),
+}));
+
+vi.mock("@multiplatform.one/rich-text", () => ({
+  RichTextEditor: createMock("RichTextEditor"),
+}));
+
+vi.mock("@multiplatform.one/theme", () => ({
+  useResolvedKnobs: () => ({
+    knobProps: {
+      sizeToken: "$3",
+      borderRadius: { borderRadius: 4 },
+      gap: { gap: 4 },
+      body: {},
+      surface: {},
+      inputSurface: {},
+      panelPadding: {},
+      control: {},
+      transition: "quick",
+    },
+    control: {
+      focusVisibleKnobProps: {
+        outlineWidth: 2,
+        outlineStyle: "solid",
+        outlineColor: "$outlineColor",
+        outlineOffset: 2,
+      },
+    },
+  }),
+}));
+
+// ── Import after mocks ────────────────────────────────────────
+
+import { DataTableCell } from "./index";
+
+function renderCell(props: Partial<React.ComponentProps<typeof DataTableCell>>) {
+  return renderWithProviders(
+    <DataTableCell
+      value={props.value ?? ""}
+      onChange={props.onChange ?? vi.fn()}
+      columnId={props.columnId ?? "test-col"}
+      rowIndex={props.rowIndex ?? 0}
+      {...props}
+    />,
+  );
+}
+
+/** Give the DraftFieldEditor's 0ms focus-out timer a chance to run. */
+function flushBlurTimer() {
+  return act(() => new Promise<void>((resolve) => setTimeout(resolve, 15)));
+}
+
+describe("DataTableCell draft policy — category (a) immediate commit", () => {
+  it("select commits immediately on selection", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({ field: "select", value: "alpha", onChange });
+    fireEvent.click(getByTestId("select-trigger"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("beta");
+  });
+});
+
+describe("DataTableCell draft policy — stepper (free-entry numeric)", () => {
+  it("buffers the typed value and commits once on Enter", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({ field: "stepper", value: 42, onChange });
+    const input = getByTestId("stepper-input") as HTMLInputElement;
+
+    act(() => input.focus());
+    fireEvent.change(input, { target: { value: "77" } });
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(77);
+  });
+
+  it("commits once when focus leaves the cell", async () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({ field: "stepper", value: 42, onChange });
+    const input = getByTestId("stepper-input") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "77" } });
+    fireEvent.blur(input);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith(77));
+    await flushBlurTimer();
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("Escape reverts the typed value without committing", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({ field: "stepper", value: 42, onChange });
+    let input = getByTestId("stepper-input") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "77" } });
+    expect(input.value).toBe("77");
+
+    fireEvent.keyDown(input, { key: "Escape" });
+    input = getByTestId("stepper-input") as HTMLInputElement;
+    expect(input.value).toBe("42");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DataTableCell draft policy — phoneinput (free entry)", () => {
+  it("buffers keystrokes and commits once on blur", async () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({
+      field: "phoneinput",
+      value: "+15125551234",
+      onChange,
+    });
+    const input = getByTestId("phone-input") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "5125559999" } });
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.blur(input);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("5125559999"));
+    await flushBlurTimer();
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("Escape discards the draft and restores the committed value", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({
+      field: "phoneinput",
+      value: "+15125551234",
+      onChange,
+    });
+    let input = getByTestId("phone-input") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "5125559999" } });
+    expect(input.value).toBe("5125559999");
+
+    fireEvent.keyDown(input, { key: "Escape" });
+    input = getByTestId("phone-input") as HTMLInputElement;
+    expect(input.value).toBe("+15125551234");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DataTableCell draft policy — otp (multi-digit accumulation)", () => {
+  it("does not commit while focus moves within the cell, commits on leave", async () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({ field: "otp", value: "111111", onChange });
+    const input = getByTestId("otp-input") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "123456" } });
+    expect(onChange).not.toHaveBeenCalled();
+
+    // Focus bouncing between elements inside the cell (auto-advance) must
+    // not commit: the focus-in cancels the pending focus-out commit.
+    fireEvent.blur(input);
+    fireEvent.focus(input);
+    await flushBlurTimer();
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.blur(input);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("123456"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("Escape reverts the digits without committing", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({ field: "otp", value: "111111", onChange });
+    let input = getByTestId("otp-input") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "123456" } });
+    expect(input.value).toBe("123456");
+
+    fireEvent.keyDown(input, { key: "Escape" });
+    input = getByTestId("otp-input") as HTMLInputElement;
+    expect(input.value).toBe("111111");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DataTableCell draft policy — daterangepicker", () => {
+  const committedRange = { start: "2026-01-01", end: "2026-01-05" };
+
+  it("mid-pick Escape discards the half-picked range without committing", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({
+      field: "daterangepicker",
+      value: committedRange,
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("daterange-pick-start"));
+    expect(getByTestId("daterange-display").textContent).toBe("2026-08-18 – end date");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(getByTestId("daterange-display"), { key: "Escape" });
+    expect(getByTestId("daterange-display").textContent).toBe("2026-01-01 – 2026-01-05");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("commits immediately when the range completes", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({
+      field: "daterangepicker",
+      value: committedRange,
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("daterange-complete"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith({ start: "2026-08-18", end: "2026-08-22" });
+  });
+});
+
+describe("DataTableCell draft policy — multidatepicker (accumulation)", () => {
+  it("accumulates toggles as a draft and commits once when focus leaves", async () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({
+      field: "multidatepicker",
+      value: ["D0"],
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("multidate-toggle-a"));
+    expect(getByTestId("multidate-display").textContent).toBe("D0,A");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.click(getByTestId("multidate-toggle-b"));
+    expect(getByTestId("multidate-display").textContent).toBe("D0,A,B");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.blur(getByTestId("multidate-toggle-b"));
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith(["D0", "A", "B"]));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("Escape discards the accumulated draft without committing", () => {
+    const onChange = vi.fn();
+    const { getByTestId } = renderCell({
+      field: "multidatepicker",
+      value: ["D0"],
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("multidate-toggle-a"));
+    expect(getByTestId("multidate-display").textContent).toBe("D0,A");
+
+    fireEvent.keyDown(getByTestId("multidate-display"), { key: "Escape" });
+    expect(getByTestId("multidate-display").textContent).toBe("D0");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+// ── Modal editor staging (UX-023 / Axiom 7 AGENCY) ────────────
+//
+// The modal is a staging buffer: edits stay in a local draft while the
+// modal is open; Done commits once; Cancel and Escape discard.
+
+describe("CellModalEditor staging — markdowneditor", () => {
+  async function openModal(onChange: (value: any) => void) {
+    const utils = renderCell({
+      field: "markdowneditor",
+      value: "# Heading",
+      onChange,
+    });
+    fireEvent.click(utils.baseElement.querySelector('[data-testid="mock-FieldDisplay"]')!);
+    await waitFor(() =>
+      expect(utils.baseElement.querySelector('[data-testid="textarea-input"]')).not.toBeNull(),
+    );
+    return utils;
+  }
+
+  it("edits stay in the draft; Done commits once", async () => {
+    const onChange = vi.fn();
+    const { baseElement, getByText } = await openModal(onChange);
+    const textarea = baseElement.querySelector(
+      '[data-testid="textarea-input"]',
+    ) as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: "# Changed" } });
+    expect(textarea.value).toBe("# Changed");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.click(getByText("Done"));
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("# Changed"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("Cancel discards the draft (LC-30: exit never commit-gated)", async () => {
+    const onChange = vi.fn();
+    const { baseElement, getByText } = await openModal(onChange);
+    const textarea = baseElement.querySelector(
+      '[data-testid="textarea-input"]',
+    ) as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: "# Changed" } });
+    fireEvent.click(getByText("Cancel"));
+
+    await waitFor(() =>
+      expect(baseElement.querySelector('[data-testid="textarea-input"]')).toBeNull(),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("Escape discards the draft", async () => {
+    const onChange = vi.fn();
+    const { baseElement } = await openModal(onChange);
+    const textarea = baseElement.querySelector(
+      '[data-testid="textarea-input"]',
+    ) as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: "# Changed" } });
+    fireEvent.keyDown(textarea, { key: "Escape" });
+
+    await waitFor(() =>
+      expect(baseElement.querySelector('[data-testid="textarea-input"]')).toBeNull(),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("reopening after Cancel shows the committed value, not the discarded draft", async () => {
+    const onChange = vi.fn();
+    const { baseElement, getByText } = await openModal(onChange);
+    let textarea = baseElement.querySelector(
+      '[data-testid="textarea-input"]',
+    ) as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: "# Changed" } });
+    fireEvent.click(getByText("Cancel"));
+    await waitFor(() =>
+      expect(baseElement.querySelector('[data-testid="textarea-input"]')).toBeNull(),
+    );
+
+    fireEvent.click(baseElement.querySelector('[data-testid="mock-FieldDisplay"]')!);
+    await waitFor(() =>
+      expect(baseElement.querySelector('[data-testid="textarea-input"]')).not.toBeNull(),
+    );
+    textarea = baseElement.querySelector('[data-testid="textarea-input"]') as HTMLTextAreaElement;
+    expect(textarea.value).toBe("# Heading");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+// ── Radio options popover (UX-022 / LC-06 OVERSIZED-EDIT) ─────
+//
+// The radio option list escapes the cell anchor: the cell face is the
+// current option label; options live in a popover/sheet; a pick commits
+// and closes (LC-21 COMMIT class).
+
+describe("DataTableCell radiogroup — options escape the anchor", () => {
+  const options = [
+    { label: "Low", value: "low" },
+    { label: "Medium", value: "medium" },
+    { label: "High", value: "high" },
+  ];
+
+  it("renders a compact face; options only mount in the panel after click", async () => {
+    const onChange = vi.fn();
+    const { baseElement, getByTestId, queryByTestId } = renderCell({
+      field: "radiogroup",
+      value: "medium",
+      fieldProps: { options },
+      onChange,
+    });
+
+    // Closed: face only, no inline radio options (nothing to clip at 150px).
+    expect(queryByTestId("radio-group")).toBeNull();
+    expect(getByTestId("mock-FieldDisplay").getAttribute("data-field")).toBe("radiogroup");
+
+    fireEvent.click(getByTestId("floating-panel-trigger"));
+    await waitFor(() => expect(queryByTestId("radio-group")).not.toBeNull());
+
+    // Seeded at the cell's current value; every option reachable.
+    expect(getByTestId("radio-group").getAttribute("data-value")).toBe("medium");
+    expect(baseElement.querySelector('[data-testid="radio-high"]')).not.toBeNull();
+  });
+
+  it("a pick commits immediately and closes the panel (LC-21 COMMIT)", async () => {
+    const onChange = vi.fn();
+    const { getByTestId, queryByTestId } = renderCell({
+      field: "radiogroup",
+      value: "medium",
+      fieldProps: { options },
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("floating-panel-trigger"));
+    await waitFor(() => expect(queryByTestId("radio-group")).not.toBeNull());
+
+    fireEvent.click(getByTestId("radio-high"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("high");
+    await waitFor(() => expect(queryByTestId("radio-group")).toBeNull());
+  });
+
+  it("re-picking the already-selected option still closes (picking IS the exit)", async () => {
+    const onChange = vi.fn();
+    const { getByTestId, queryByTestId } = renderCell({
+      field: "radiogroup",
+      value: "medium",
+      fieldProps: { options },
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("floating-panel-trigger"));
+    await waitFor(() => expect(queryByTestId("radio-group")).not.toBeNull());
+
+    // Same-value pick: no onValueChange fires (real Tamagui radio contract) —
+    // the host's option-press close must still dismiss the panel.
+    fireEvent.pointerUp(getByTestId("radio-medium"));
+    await waitFor(() => expect(queryByTestId("radio-group")).toBeNull());
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});