@multiplatform.one/components 7.4.1 → 7.6.0

package/src/CopyField/CopyField.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { NotifyHost } from "../feedback";
+import { CopyField } from "./index";
+
+const meta: Meta<typeof CopyField> = {
+  title: "Components/CopyField",
+  component: CopyField,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Declared copy on a read-only Input. The end-cap is a real Input.Button tab stop that rings its glyph (chip-dismiss). Confirm is notify(): Copied to clipboard.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    value: { control: "text" },
+    helperText: { control: "text" },
+    disabled: { control: "boolean" },
+    size: { control: "select", options: ["$3", "$4", "$5"] },
+  },
+  decorators: [
+    (Story) => (
+      <NotifyHost>
+        <Story />
+      </NotifyHost>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof CopyField>;
+
+export const Main: Story = {
+  args: {
+    label: "API token",
+    value: "mpo_live_4f2a9c81e0b3",
+    helperText: "Read-only. The value is the identifier register (mono).",
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    label: "Webhook URL",
+    value: "",
+    helperText: "Nothing to copy — the end-cap is omitted, one tab stop.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "API token",
+    value: "mpo_live_4f2a9c81e0b3",
+    disabled: true,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <CopyField label="API token" value="mpo_live_4f2a9c81e0b3" size="$3" />
+      <CopyField label="API token" value="mpo_live_4f2a9c81e0b3" size="$4" />
+      <CopyField label="API token" value="mpo_live_4f2a9c81e0b3" size="$5" />
+    </YStack>
+  ),
+};

package/src/CopyField/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * CopyField — declared copy on a read-only Input.
+ *
+ * Second consumer of the MPO-52 reveal's Input.Button end-cap (LC-16).
+ * Confirm is notify() success → toast "Copied to clipboard." Failure is
+ * field-scoped "Copy failed." — an inline alert, never a toast.
+ *
+ * MPO-81 removed the copy/onCopyResult pass while the forms half was
+ * missing; the forms cap is implemented again (Input `copy` +
+ * Input.Button `glyphRing`), so the pass is back.
+ */
+import { Input, type InputProps } from "@multiplatform.one/forms";
+import { YStack } from "tamagui";
+import { NotifyRegion } from "../feedback/NotifyHost";
+import { reportCopy } from "../feedback/copy";
+
+export type CopyFieldProps = Omit<InputProps, "copy" | "onCopyResult" | "secureTextEntry">;
+
+export function CopyField(props: CopyFieldProps) {
+  return (
+    <YStack width="100%">
+      <Input {...props} readOnly copy onCopyResult={reportCopy} />
+      <NotifyRegion scope="field" compact />
+    </YStack>
+  );
+}

package/src/DotIndicator/dotIndicator.spec.tsx

@@ -169,4 +169,16 @@ describe("DotIndicator", () => {
     expect(active.className).toContain("_bg-accentBackg");
     expect(idle.className).not.toContain("_bg-accentBackg");
   });
+
+  it("picks completed-check ink from luminance, never hardcoded white", () => {
+    const { container } = renderWithProviders(
+      <DotIndicator total={3} activeIndex={2} completedSteps={new Set([0])} />,
+    );
+    const check = container.querySelector("svg");
+    expect(check).toBeTruthy();
+    const fill = check?.getAttribute("color") || check?.getAttribute("fill") || "";
+    expect(fill.toLowerCase()).not.toBe("white");
+    expect(fill.toLowerCase()).not.toBe("#ffffff");
+    expect(fill.toLowerCase()).not.toBe("#fff");
+  });
 });

package/src/DotIndicator/index.tsx

@@ -3,6 +3,7 @@ import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   radiusClassProps,
+  useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
 } from "@multiplatform.one/theme";
@@ -280,6 +281,7 @@ export function DotIndicator({
 }: DotIndicatorProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
+  const onCompleted = useReadableTextOn(componentColors.indicator.completed);
   const rootRef = useRef<HTMLElement | null>(null);
   const [kbFocusIndex, setKbFocusIndex] = useState<number | null>(null);
   if (isWeb) ensureKeyboardModalityTracking();
@@ -451,7 +453,12 @@ export function DotIndicator({
               {...(kbRing ? ({ "data-dot-ring": "true" } as Record<string, unknown>) : undefined)}
             >
               {isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && (
-                <CheckIcon size={8} color="white" weight="bold" />
+                <CheckIcon
+                  size={8}
+                  color={onCompleted ?? "$color1"}
+                  weight="bold"
+                  data-check-ink={onCompleted ?? "$color1"}
+                />
               )}
             </Dot>
           </DotTarget>

package/src/DropdownMenu/DropdownMenu.spec.tsx

@@ -392,3 +392,120 @@ describe("DropdownMenu LC-71 keyboard ring", () => {
     });
   });
 });
+
+describe("DropdownMenu FloatingPanel cover contract", () => {
+  function renderOpen() {
+    return renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        items={[
+          { label: "Edit" },
+          { label: "List", checked: true },
+          { separator: true },
+          { label: "Delete", destructive: true },
+        ]}
+      >
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+  }
+
+  it("uses FloatingPanel, not a second overlay stack", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeTruthy();
+    expect(document.querySelector("[data-mp-tint]")).toBeNull();
+  });
+
+  it("declares the cover contract and LC-21 COMMIT host", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const menu = document.querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.getAttribute("data-mp-width-mode")).toBe("at-least-trigger");
+    expect(menu.getAttribute("data-dismiss-class")).toBe("commit");
+  });
+
+  it("renders the design-law row grammar (44 / padX 13 / weight 400 / $color3 hover)", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const edit = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+      (el) => el.textContent?.includes("Edit"),
+    ) as HTMLElement;
+    expect(edit.className).toMatch(/_pl-t-space-3/);
+    expect(edit.className).toMatch(/_pr-t-space-3/);
+    expect(edit.getAttribute("data-mp-pad-x")).toBe("13");
+    expect(edit.getAttribute("data-mp-row-height")).toBe("44");
+    expect(edit.getAttribute("data-mp-font-weight")).toBe("400");
+    expect(edit.getAttribute("data-mp-hover-fill")).toBe("$color3");
+    expect(edit.className).toMatch(/_btlr-0px/);
+  });
+
+  it("trails the check on the selected row at $color2", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitemcheckbox"]')).toBeTruthy();
+    });
+    const selected = document.querySelector<HTMLElement>('[role="menuitemcheckbox"]');
+    expect(selected?.getAttribute("aria-checked")).toBe("true");
+    expect(selected?.getAttribute("data-mp-selected-fill")).toBe("$color2");
+    const check = selected?.querySelector("[data-mp-check]");
+    expect(check?.getAttribute("data-mp-check")).toBe("trailing");
+    expect(selected?.lastElementChild).toBe(check);
+  });
+
+  it("opens as a sheet at the overlay breakpoint (≤640)", async () => {
+    const width = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 500 });
+    renderWithProviders(
+      <DropdownMenu defaultOpen items={[{ label: "Edit" }]}>
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeFalsy();
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: width,
+    });
+  });
+
+  it("accepts Content maxHeight and maxWidth from table callers", async () => {
+    renderWithProviders(
+      <DropdownMenu defaultOpen>
+        <DropdownMenu.Trigger asChild>
+          <Button>View</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content maxHeight={240} maxWidth={320}>
+          <DropdownMenu.Item>Col</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const menu = document.querySelector('[role="menu"]') as HTMLElement;
+    expect(menu.style.maxHeight || getComputedStyle(menu).maxHeight).toBeTruthy();
+  });
+
+  it("paints the keyboard ring at 2px offset 0 on keyboard focus", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const edit = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+      (el) => el.textContent?.includes("Edit"),
+    ) as HTMLElement;
+    fireEvent.focus(edit);
+    expect(edit.getAttribute("data-highlighted")).toBe("true");
+    expect(edit.getAttribute("data-mp-ring-offset")).toBe("0");
+  });
+});

package/src/DropdownMenu/DropdownMenu.stories.tsx

@@ -23,7 +23,7 @@ const meta: Meta<typeof DropdownMenu> = {
     docs: {
       description: {
         component:
-          "Standalone action menu: trigger + elevated overlay of action rows. Edge-to-edge rows (SP-EDGE), keyboard operable (arrows/Enter/Escape/typeahead), destructive rows on the error intent. Composable parts plus a convenience items=[] prop.",
+          "Standalone action menu on the FloatingPanel overlay stack (cover contract: attach gap 0, at-least-trigger). Edge-to-edge rows (SP-EDGE), keyboard operable (arrows/Enter/Escape/typeahead), destructive rows on the error intent. Composable parts plus a convenience items=[] prop.",
       },
     },
   },