@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -1,7 +1,9 @@
-import { fireEvent } from "@testing-library/react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { useForm } from "@tanstack/react-form";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { MentionInput } from "./index";
+import { Form } from "../../Form";
+import { MentionInput, parseMentionValue } from "./index";
 
 const userMentions = {
   trigger: "@",
@@ -20,6 +22,27 @@ const userMentions = {
   ],
 };
 
+function typeTrigger(textArea: HTMLTextAreaElement, value: string) {
+  fireEvent.change(textArea, {
+    target: { value, selectionStart: value.length, selectionEnd: value.length },
+  });
+  Object.defineProperty(textArea, "selectionStart", { value: value.length, configurable: true });
+  Object.defineProperty(textArea, "selectionEnd", { value: value.length, configurable: true });
+  fireEvent.select(textArea);
+}
+
+describe("parseMentionValue", () => {
+  it("normalizes strings, objects, and empty input into MentionValue", () => {
+    expect(parseMentionValue("hello")).toEqual({ text: "hello", mentions: [] });
+    expect(parseMentionValue({ text: "hi", mentions: [{ id: "u1" }] })).toEqual({
+      text: "hi",
+      mentions: [{ id: "u1" }],
+    });
+    expect(parseMentionValue(undefined)).toEqual({ text: "", mentions: [] });
+    expect(parseMentionValue(null)).toEqual({ text: "", mentions: [] });
+  });
+});
+
 describe("MentionInput", () => {
   it("should render with label and placeholder", () => {
     const result = renderWithProviders(
@@ -41,7 +64,7 @@ describe("MentionInput", () => {
     expect(textArea?.getAttribute("placeholder")).toBe("Type @ to mention");
   });
 
-  it("fires canonical onChange and the deprecated onTextChange alias once per change", () => {
+  it("fires canonical onChange(MentionValue) and the deprecated onTextChange alias once per change", () => {
     const onChange = vi.fn();
     const onTextChange = vi.fn();
     const result = renderWithProviders(
@@ -64,11 +87,93 @@ describe("MentionInput", () => {
     if (textArea) fireEvent.change(textArea, { target: { value: "hello" } });
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith("hello");
+    expect(onChange).toHaveBeenCalledWith({ text: "hello", mentions: [] });
     expect(onTextChange).toHaveBeenCalledTimes(1);
     expect(onTextChange).toHaveBeenCalledWith("hello");
   });
 
+  it("renders defaultValue text on first paint", () => {
+    const result = renderWithProviders(
+      <MentionInput label="Comment" mentions={[userMentions]} defaultValue="hello there" />,
+    );
+    expect(result.container.querySelector("textarea")?.value).toBe("hello there");
+  });
+
+  it("does not emit onChange on mount (LC-14: seed is not a user edit)", () => {
+    const onChange = vi.fn();
+    renderWithProviders(
+      <MentionInput
+        label="Comment"
+        mentions={[userMentions]}
+        defaultValue="hello"
+        onChange={onChange}
+      />,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("skeleton keeps the FieldLayout label and omits the textarea (LC-20)", () => {
+    const result = renderWithProviders(
+      <MentionInput label="Comment" name="comment" mentions={[userMentions]} skeleton />,
+    );
+    expect(result.findTextElement("Comment")).toBeDefined();
+    expect(result.container.querySelector("textarea")).toBeNull();
+  });
+
+  it("standalone controlled: a value arriving after mount displays without onChange", async () => {
+    const onChange = vi.fn();
+    const onTextChange = vi.fn();
+    const result = renderWithProviders(
+      <MentionInput label="Comment" mentions={[userMentions]} value="" onChange={onChange} />,
+    );
+    expect(result.container.querySelector("textarea")?.value).toBe("");
+
+    result.rerender(
+      <MentionInput
+        label="Comment"
+        mentions={[userMentions]}
+        value="seeded"
+        onChange={onChange}
+        onTextChange={onTextChange}
+      />,
+    );
+    await waitFor(() => {
+      expect(result.container.querySelector("textarea")?.value).toBe("seeded");
+    });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onTextChange).not.toHaveBeenCalled();
+  });
+
+  it("form-integrated: a field value set after mount displays without onChange", async () => {
+    const onChange = vi.fn();
+    let formApi:
+      | { setFieldValue: (name: "comment", value: { text: string; mentions: unknown[] }) => void }
+      | undefined;
+    const TestComponent = () => {
+      const form = useForm({ defaultValues: { comment: { text: "", mentions: [] } } });
+      formApi = form as unknown as typeof formApi;
+      return (
+        <Form form={form}>
+          <MentionInput
+            label="Comment"
+            name="comment"
+            mentions={[userMentions]}
+            onChange={onChange}
+          />
+        </Form>
+      );
+    };
+    const result = renderWithProviders(<TestComponent />);
+
+    await act(async () => {
+      formApi?.setFieldValue("comment", { text: "seeded later", mentions: [] });
+    });
+    await waitFor(() => {
+      expect(result.container.querySelector("textarea")?.value).toBe("seeded later");
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it("opens a flush listbox with media-slot rows when typing @", () => {
     const result = renderWithProviders(
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} />,
@@ -78,11 +183,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    // Web caret tracking also listens to select — keep both in sync like the browser.
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
@@ -102,6 +203,10 @@ describe("MentionInput", () => {
     expect(result.findTextElement("Engineer")).toBeDefined();
     expect(result.findTextElement("Designer")).toBeDefined();
     expect(result.findTextElement("B")).toBeDefined(); // Bob initials fallback
+    // LC-73: overlay rows paint nestedControl (32px at medium), not a raw 28.
+    const slots = listbox.querySelectorAll("[data-media-slot]");
+    expect(slots.length).toBe(2);
+    expect(slots[0]?.getAttribute("data-media-slot")).toBe("32");
   });
 
   // Same contract every other FloatingPanel consumer honors, reached by a
@@ -119,10 +224,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     expect(result.container.ownerDocument.querySelector('[role="listbox"]')).toBeNull();
   });
@@ -148,16 +250,14 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "#", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "#");
 
     const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
     expect(result.findTextElement("react")).toBeDefined();
     // No avatar / initials glyphs for an all-text list.
     expect(result.container.ownerDocument.querySelector("img")).toBeNull();
+    expect(listbox?.querySelector("[data-media-slot]")).toBeNull();
   });
 
   it("keeps the listbox open with an empty state when the query matches nothing", () => {
@@ -169,12 +269,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, {
-      target: { value: "@zzzz", selectionStart: 5, selectionEnd: 5 },
-    });
-    Object.defineProperty(textArea, "selectionStart", { value: 5, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 5, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@zzzz");
 
     const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
@@ -192,13 +287,21 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     fireEvent.keyDown(textArea, { key: "Tab" });
-    expect(onChange).toHaveBeenCalledWith("@Alice ");
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        text: "@Alice ",
+        mentions: [
+          expect.objectContaining({
+            type: "@",
+            id: "u1",
+            display: "Alice",
+          }),
+        ],
+      }),
+    );
   });
 
   it("paints the LC-71 keyboard ring on the active option after typing, not after hover", () => {
@@ -210,10 +313,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     const options = result.container.ownerDocument.querySelectorAll('[role="option"]');
     expect(options.length).toBe(2);
@@ -235,13 +335,15 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
     fireEvent.keyDown(textArea, { key: "Enter" });
 
-    expect(onChange).toHaveBeenCalledWith("@Alice ");
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        text: "@Alice ",
+        mentions: [expect.objectContaining({ id: "u1", display: "Alice" })],
+      }),
+    );
 
     const mentionEnd = "@Alice".length;
     Object.defineProperty(textArea, "selectionStart", { value: mentionEnd, configurable: true });
@@ -249,6 +351,6 @@ describe("MentionInput", () => {
     fireEvent.select(textArea);
     fireEvent.keyDown(textArea, { key: "Backspace" });
 
-    expect(onChange).toHaveBeenLastCalledWith(" ");
+    expect(onChange).toHaveBeenLastCalledWith({ text: " ", mentions: [] });
   });
 });

package/src/fields/MentionInput/MentionInput.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -208,8 +209,8 @@ export const Interactive: Story = {
           <MentionInput
             label="Comment"
             defaultValue={value}
-            onChange={(val: string) => {
-              setValue(val);
+            onChange={(val) => {
+              setValue(val.text);
               action("onChange")(val);
             }}
             mentions={[userMentions]}
@@ -269,3 +270,39 @@ export const MultipleTriggersStory: Story = {
 export const SkeletonState: Story = {
   render: () => <MentionInput label="Comment" mentions={[userMentions]} skeleton />,
 };
+
+// >5 users so the mention list clears `select-too-few-options` (UX-P19).
+const inTableMentionUsers = [
+  ...userMentions.data,
+  { id: "6", display: "Dana Lee", description: "Support" },
+];
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "Ping @John Doe about the launch" },
+      { id: "2", label: "Beta", value: "Waiting on @Jane Smith for the API keys" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Mention",
+        field: "mentioninput",
+        fieldProps: {
+          mentions: inTableMentionUsers,
+          placeholder: "Type @ to mention someone",
+        },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};