@multiplatform.one/table 6.7.0 → 7.1.0

package/src/components/DataTableCell/CellOptionsEditor.tsx

@@ -8,8 +8,10 @@
  * label; pressing it opens a forms FloatingPanel — an anchored popover with
  * collision handling on desktop web, a bottom sheet on native and small
  * viewports — with the full option list, seeded at the cell's current value
- * (Axiom 11). A pick commits immediately and closes (LC-21 COMMIT class: one
- * value completes the contract); Escape / outside click just dismiss.
+ * (Axiom 11). COMMIT-class groups (`dismissOnPick`, default) close on a pick,
+ * including re-picking the current value; COMPOSE-class groups (multi-select
+ * toggles) stay open until Escape / outside click. The face is a keyboard
+ * stop; the ring lives on the parent cell chrome (LC-71), not this node.
  */
 
 import { FieldDisplay, FloatingPanel, type FieldDisplayType } from "@multiplatform.one/forms";
@@ -24,6 +26,12 @@ export interface CellOptionsEditorProps {
   disabled?: boolean;
   /** Accessible name for the chromeless cell trigger (column header). */
   label?: string;
+  /**
+   * LC-21 COMMIT class (default): a pick — including re-picking the current
+   * value — dismisses the panel. Set false for COMPOSE class (multi-select
+   * toggles stay open so several options can be composed).
+   */
+  dismissOnPick?: boolean;
   /**
    * Option-group editor rendered inside the panel. `close` dismisses the
    * panel — call it after committing a pick (COMMIT-class dismissal).
@@ -37,6 +45,7 @@ export function CellOptionsEditor({
   fieldProps,
   disabled,
   label,
+  dismissOnPick = true,
   children,
 }: CellOptionsEditorProps) {
   const [open, setOpen] = useState(false);
@@ -50,6 +59,10 @@ export function CellOptionsEditor({
       paddingVertical="$1"
       borderRadius="$2"
       opacity={disabled ? 0.5 : 1}
+      // LC-71: the parent CellWrapper paints the one ring; this face must
+      // not add a second outline on keyboard focus.
+      outlineWidth={0}
+      focusVisibleStyle={{ outlineWidth: 0 }}
       {...(!disabled
         ? {
             role: "button" as any,
@@ -68,16 +81,20 @@ export function CellOptionsEditor({
   if (disabled) return face;
 
   // LC-21 COMMIT class: picking IS the exit — including re-picking the
-  // already-selected option, which fires no onValueChange (Tamagui radio
-  // emits only on change), so the changed-pick close() alone would strand
-  // the panel open. Deferred so the option's own press/commit runs first.
-  const handlePanelPointerUp = isWeb
-    ? (event: { target?: unknown }) => {
-        const target = event?.target as { closest?: (sel: string) => unknown } | null;
-        if (!target?.closest?.('[role="radio"], label')) return;
-        setTimeout(() => setOpen(false), 0);
-      }
-    : undefined;
+  // already-selected option, which fires no onValueChange (Tamagui radio /
+  // single ToggleGroup emit only on change), so the changed-pick close()
+  // alone would strand the panel open. Deferred so the option's own
+  // press/commit runs first. COMPOSE class skips this (panel stays open).
+  const handlePanelPointerUp =
+    isWeb && dismissOnPick
+      ? (event: { target?: unknown }) => {
+          const target = event?.target as { closest?: (sel: string) => unknown } | null;
+          if (!target?.closest?.('[role="radio"], [role="checkbox"], [aria-pressed], label')) {
+            return;
+          }
+          setTimeout(() => setOpen(false), 0);
+        }
+      : undefined;
 
   return (
     <FloatingPanel open={open} onOpenChange={setOpen} fitContent trigger={face}>

package/src/components/DataTableCell/DataTableCell.stories.tsx

@@ -2,9 +2,9 @@
  * DataTableCell — per-field-type cell stories.
  *
  * Contract: every cell hosts any field; each field has a read (FieldDisplay)
- * and an edit rendering; edits too big for the cell open in a modal editor
- * (CellModalEditor). DataTableCell is standalone — value/onChange, no
- * DataTable context required.
+ * and an edit rendering; edits too big for the cell open in a popover (option
+ * groups) or modal editor (CellModalEditor) so the row never grows (LC-06).
+ * DataTableCell is standalone — value/onChange, no DataTable context required.
  *
  * Each *Field story renders the SAME state in edit mode and read mode inside
  * real table-primitive cells, and echoes the committed value (testID

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

@@ -95,8 +95,41 @@ function MockTextArea({ value, onChangeText }: any) {
   );
 }
 
-/** Options render as one role=radio button per option (mirrors the real
- * anatomy: onValueChange fires only when the value CHANGES). */
+/** Options render as toggle buttons with aria-pressed (mirrors Tamagui
+ * ToggleGroup items: single type emits only on change). */
+function MockToggleGroup({ value, onValueChange, options, type }: any) {
+  const selected = type === "multiple" ? (Array.isArray(value) ? value : []) : value;
+  return (
+    <div data-testid="toggle-group" data-value={JSON.stringify(selected)}>
+      {(options ?? []).map((option: any) => {
+        const pressed =
+          type === "multiple"
+            ? (selected as string[]).includes(option.value)
+            : option.value === selected;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            aria-pressed={pressed}
+            data-testid={`toggle-${option.value}`}
+            onClick={() => {
+              if (type === "multiple") {
+                const next = pressed
+                  ? (selected as string[]).filter((v) => v !== option.value)
+                  : [...(selected as string[]), option.value];
+                onValueChange?.(next);
+                return;
+              }
+              if (option.value !== selected) onValueChange?.(option.value);
+            }}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
 function MockRadioGroup({ value, onValueChange, options }: any) {
   return (
     <div data-testid="radio-group" data-value={String(value ?? "")}>
@@ -203,7 +236,7 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
   Progress: createMock("Progress"),
   RadioGroup: MockRadioGroup,
   FloatingPanel: MockFloatingPanel,
-  ToggleGroup: createMock("ToggleGroup"),
+  ToggleGroup: MockToggleGroup,
   DatePicker: createMock("DatePicker"),
   DatetimePicker: createMock("DatetimePicker"),
   TimePicker: createMock("TimePicker"),
@@ -257,7 +290,7 @@ vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
         outlineWidth: 2,
         outlineStyle: "solid",
         outlineColor: "$outlineColor",
-        outlineOffset: 2,
+        outlineOffset: -2,
       },
     },
   }),
@@ -644,3 +677,97 @@ describe("DataTableCell radiogroup — options escape the anchor", () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 });
+
+describe("DataTableCell togglegroup — options escape the anchor", () => {
+  const options = [
+    { label: "Bold", value: "bold" },
+    { label: "Italic", value: "italic" },
+    { label: "Underline", value: "underline" },
+  ];
+
+  it("renders a compact face; options only mount in the panel after click", async () => {
+    const onChange = vi.fn();
+    const { getByTestId, queryByTestId } = renderCell({
+      field: "togglegroup",
+      value: "bold",
+      fieldProps: { options },
+      onChange,
+    });
+
+    expect(queryByTestId("toggle-group")).toBeNull();
+    expect(getByTestId("mock-FieldDisplay").getAttribute("data-field")).toBe("togglegroup");
+
+    fireEvent.click(getByTestId("floating-panel-trigger"));
+    await waitFor(() => expect(queryByTestId("toggle-group")).not.toBeNull());
+    expect(getByTestId("toggle-group").getAttribute("data-value")).toBe(JSON.stringify("bold"));
+  });
+
+  it("a single pick commits immediately and closes the panel (LC-21 COMMIT)", async () => {
+    const onChange = vi.fn();
+    const { getByTestId, queryByTestId } = renderCell({
+      field: "togglegroup",
+      value: "bold",
+      fieldProps: { options },
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("floating-panel-trigger"));
+    await waitFor(() => expect(queryByTestId("toggle-group")).not.toBeNull());
+
+    fireEvent.click(getByTestId("toggle-italic"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("italic");
+    await waitFor(() => expect(queryByTestId("toggle-group")).toBeNull());
+  });
+
+  it("multi-select stays open so options can be composed (LC-21 COMPOSE)", async () => {
+    const onChange = vi.fn();
+    const { getByTestId, queryByTestId } = renderCell({
+      field: "togglegroup",
+      value: ["bold"],
+      fieldProps: { options, allowMultiple: true },
+      onChange,
+    });
+
+    fireEvent.click(getByTestId("floating-panel-trigger"));
+    await waitFor(() => expect(queryByTestId("toggle-group")).not.toBeNull());
+
+    fireEvent.click(getByTestId("toggle-italic"));
+    expect(onChange).toHaveBeenCalledWith(["bold", "italic"]);
+    expect(queryByTestId("toggle-group")).not.toBeNull();
+
+    fireEvent.pointerUp(getByTestId("toggle-italic"));
+    expect(queryByTestId("toggle-group")).not.toBeNull();
+  });
+});
+
+describe("CellModalEditor staging — textarea (LC-06 oversized edit)", () => {
+  async function openModal(onChange: (value: any) => void) {
+    const utils = renderCell({
+      field: "textarea",
+      value: "line one",
+      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("keeps a single-line face; edits stay in the draft until Done", 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: "line two" } });
+    expect(textarea.value).toBe("line two");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.click(getByText("Done"));
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("line two"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -120,7 +120,7 @@ vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
         outlineWidth: 2,
         outlineStyle: "solid",
         outlineColor: "$outlineColor",
-        outlineOffset: 2,
+        outlineOffset: -2,
       },
     },
   }),
@@ -344,4 +344,39 @@ describe("DataTableCell field type parity", () => {
     fireEvent.click(container.querySelector('[data-testid="floating-panel-trigger"]')!);
     await waitFor(() => expectRendered(baseElement, "RadioGroup"));
   });
+
+  it("togglegroup routes through the popover editor (LC-06), never inline in the cell", async () => {
+    const { container, baseElement } = renderCell({
+      field: "togglegroup",
+      value: "bold",
+      fieldProps: {
+        options: [
+          { label: "Bold", value: "bold" },
+          { label: "Italic", value: "italic" },
+          { label: "Underline", value: "underline" },
+        ],
+      },
+    });
+    const display = container.querySelector('[data-component="FieldDisplay"]');
+    expect(display?.getAttribute("data-field")).toBe("togglegroup");
+    expectNotRendered(baseElement, "ToggleGroup");
+    fireEvent.click(container.querySelector('[data-testid="floating-panel-trigger"]')!);
+    await waitFor(() => expectRendered(baseElement, "ToggleGroup"));
+  });
+
+  it("textarea routes through the modal editor (LC-06), never inline in the cell", async () => {
+    const { container, baseElement } = await expectModalEditor(
+      { field: "textarea", value: "line one\nline two" },
+      "textarea",
+      "TextArea",
+    );
+    expectNotRendered(container, "TextArea");
+    expectRendered(baseElement, "TextArea");
+  });
+
+  it("cell chrome carries the LC-71 composite ring class (keyboard-only, not mouse-within)", () => {
+    const { container } = renderCell({ field: "input", value: "acme" });
+    const ring = container.querySelector(".mp-composite-ring.mp-composite-ring-deep");
+    expect(ring).not.toBeNull();
+  });
 });