@multiplatform.one/components 6.1.0 → 6.4.0

package/src/DropdownMenu/DropdownMenu.spec.tsx

@@ -0,0 +1,222 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+import { __resetDevWarnSeen } from "@multiplatform.one/theme";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Button } from "tamagui";
+import { DropdownMenu } from "./index";
+
+function renderMenu(onSelect = vi.fn(), onDelete = vi.fn()) {
+  const result = renderWithProviders(
+    <DropdownMenu defaultOpen>
+      <DropdownMenu.Trigger asChild>
+        <Button>Actions</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onSelect={onSelect}>Edit</DropdownMenu.Item>
+        <DropdownMenu.Item disabled disabledReason="Nothing to duplicate yet">
+          Duplicate
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item destructive onSelect={onDelete}>
+          Delete
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>,
+  );
+  return result;
+}
+
+describe("DropdownMenu", () => {
+  it("renders menu items when open", async () => {
+    renderMenu();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const items = document.querySelectorAll('[role="menuitem"]');
+    expect(items.length).toBe(3);
+    expect(items[0].textContent).toContain("Edit");
+    expect(items[2].textContent).toContain("Delete");
+  });
+
+  it("marks disabled items with aria-disabled and skips them in nav", async () => {
+    renderMenu();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const disabled = Array.from(document.querySelectorAll('[role="menuitem"]')).find((el) =>
+      el.textContent?.includes("Duplicate"),
+    );
+    expect(disabled?.getAttribute("aria-disabled")).toBe("true");
+  });
+
+  it("selects an item on click and closes the menu", async () => {
+    const onSelect = vi.fn();
+    renderMenu(onSelect);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const edit = Array.from(document.querySelectorAll('[role="menuitem"]')).find((el) =>
+      el.textContent?.includes("Edit"),
+    ) as HTMLElement;
+    fireEvent.click(edit);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+  });
+
+  it("navigates with ArrowDown and selects with Enter", async () => {
+    const onSelect = vi.fn();
+    const onDelete = vi.fn();
+    renderMenu(onSelect, onDelete);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const menu = document.querySelector('[role="menu"]') as HTMLElement;
+    const items = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])'),
+    );
+    items[0].focus();
+    // ArrowDown skips the disabled item (not in the enabled query) to Delete
+    fireEvent.keyDown(menu, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(items[1]);
+    fireEvent.keyDown(items[1], { key: "Enter" });
+    expect(onDelete).toHaveBeenCalledTimes(1);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("wraps ArrowUp from the first item to the last", async () => {
+    renderMenu();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const menu = document.querySelector('[role="menu"]') as HTMLElement;
+    const items = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])'),
+    );
+    items[0].focus();
+    fireEvent.keyDown(menu, { key: "ArrowUp" });
+    expect(document.activeElement).toBe(items[items.length - 1]);
+  });
+
+  it("toggles checkbox items without closing the menu", async () => {
+    const onCheckedChange = vi.fn();
+    renderWithProviders(
+      <DropdownMenu defaultOpen>
+        <DropdownMenu.Trigger asChild>
+          <Button>View</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.CheckboxItem checked={false} onCheckedChange={onCheckedChange}>
+            Show grid
+          </DropdownMenu.CheckboxItem>
+        </DropdownMenu.Content>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitemcheckbox"]')).toBeTruthy();
+    });
+    const item = document.querySelector('[role="menuitemcheckbox"]') as HTMLElement;
+    expect(item.getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(item);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    // menu stays open (closeOnSelect defaults to false for checkbox items)
+    expect(document.querySelector('[role="menu"]')).toBeTruthy();
+  });
+
+  it("renders the convenience items=[] API with separators", async () => {
+    renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        items={[{ label: "One" }, { separator: true }, { label: "Two", destructive: true }]}
+      >
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelectorAll('[role="menuitem"]').length).toBe(2);
+    expect(document.querySelectorAll('[role="separator"]').length).toBe(1);
+  });
+
+  it("exposes aria-haspopup and aria-expanded on the trigger", async () => {
+    renderWithProviders(
+      <DropdownMenu items={[{ label: "One" }]}>
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    const trigger = document.querySelector('[aria-haspopup="menu"]');
+    expect(trigger).toBeTruthy();
+    expect(trigger?.getAttribute("aria-expanded")).toBe("false");
+  });
+});
+
+describe("DropdownMenu disabledReason (DG-ST-03)", () => {
+  let warnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    __resetDevWarnSeen();
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    __resetDevWarnSeen();
+  });
+
+  it("explains disabled items inline (no hover) and blocks selection", async () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        items={[
+          {
+            label: "Archive",
+            disabled: true,
+            disabledReason: "Requires the owner role",
+            onSelect,
+          },
+        ]}
+      >
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const item = document.querySelector('[role="menuitem"]') as HTMLElement;
+    expect(item.getAttribute("aria-disabled")).toBe("true");
+    const reason = item.querySelector("[data-mp-disabled-reason]");
+    expect(reason?.textContent).toBe("Requires the owner role");
+
+    fireEvent.click(item);
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("bare-disabled"));
+  });
+
+  it("DEV-warns bare-disabled for disabled items without a reason", async () => {
+    renderWithProviders(
+      <DropdownMenu defaultOpen items={[{ label: "Publish", disabled: true }]}>
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("bare-disabled"));
+  });
+
+  it("does not render a reason node for enabled items", async () => {
+    renderWithProviders(
+      <DropdownMenu defaultOpen items={[{ label: "Open", disabledReason: "unused" }]}>
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector("[data-mp-disabled-reason]")).toBeNull();
+  });
+});

package/src/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import {
+  ArrowSquareOutIcon,
+  CopyIcon,
+  DotsThreeVerticalIcon,
+  DownloadSimpleIcon,
+  PencilSimpleIcon,
+  ShareNetworkIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+// Catalog Button (G-15 story honesty / LC-18, UX-P06).
+import { Button } from "@multiplatform.one/forms";
+import { Text, XStack, YStack } from "tamagui";
+import { DropdownMenu, type DropdownMenuEntry } from "./index";
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  parameters: {
+    status: { type: "beta" },
+    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.",
+      },
+    },
+  },
+  argTypes: {
+    placement: {
+      control: "select",
+      options: ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"],
+      description: "Menu placement relative to the trigger",
+    },
+    defaultOpen: { control: "boolean", description: "Uncontrolled initial open state" },
+    maxHeight: { control: "number", description: "Max menu height before scrolling (items path)" },
+    onOpenChange: { action: "openChange" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+const basicItems: DropdownMenuEntry[] = [
+  { label: "Edit", onSelect: () => console.log("edit") },
+  { label: "Duplicate", onSelect: () => console.log("duplicate") },
+  { label: "Archive", onSelect: () => console.log("archive") },
+  { separator: true },
+  { label: "Delete", destructive: true, onSelect: () => console.log("delete") },
+];
+
+export const Default: Story = {
+  name: "Main",
+  args: { defaultOpen: true, placement: "bottom-start" },
+  render: (args) => (
+    <YStack minHeight={340} paddingTop="$4" alignItems="center">
+      <DropdownMenu {...args} items={basicItems}>
+        <Button>Actions</Button>
+      </DropdownMenu>
+    </YStack>
+  ),
+};
+
+export const IconsAndShortcuts: Story = {
+  args: { defaultOpen: true },
+  render: (args) => (
+    <YStack minHeight={380} paddingTop="$4" alignItems="center">
+      <DropdownMenu {...args}>
+        <DropdownMenu.Trigger asChild>
+          <Button icon={<DotsThreeVerticalIcon size={16} />}>More</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item icon={<PencilSimpleIcon size={16} />} shortcut="⌘E">
+            Edit
+          </DropdownMenu.Item>
+          <DropdownMenu.Item icon={<CopyIcon size={16} />} shortcut="⌘C">
+            Copy link
+          </DropdownMenu.Item>
+          <DropdownMenu.Item icon={<ShareNetworkIcon size={16} />}>Share</DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={<DownloadSimpleIcon size={16} />}
+            shortcut="⌘S"
+            disabled
+            disabledReason="Export is still generating"
+          >
+            Download
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item icon={<TrashIcon size={16} />} shortcut="⌫" destructive>
+            Delete
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </YStack>
+  ),
+};
+
+export const Checkable: Story = {
+  args: { defaultOpen: true },
+  render: (args) => {
+    const [showGrid, setShowGrid] = useState(true);
+    const [showRulers, setShowRulers] = useState(false);
+    const [snap, setSnap] = useState(true);
+    return (
+      <YStack minHeight={340} paddingTop="$4" alignItems="center">
+        <DropdownMenu {...args}>
+          <DropdownMenu.Trigger asChild>
+            <Button>View options</Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            <DropdownMenu.Label>Canvas</DropdownMenu.Label>
+            <DropdownMenu.CheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
+              Show grid
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>
+              Show rulers
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Separator />
+            <DropdownMenu.CheckboxItem checked={snap} onCheckedChange={setSnap}>
+              Snap to grid
+            </DropdownMenu.CheckboxItem>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </YStack>
+    );
+  },
+};
+
+export const Destructive: Story = {
+  args: { defaultOpen: true },
+  render: (args) => (
+    <YStack minHeight={300} paddingTop="$4" alignItems="center">
+      <DropdownMenu
+        {...args}
+        items={[
+          { label: "Open", icon: <ArrowSquareOutIcon size={16} /> },
+          { separator: true },
+          { label: "Remove member", destructive: true, icon: <TrashIcon size={16} /> },
+          {
+            label: "Delete workspace",
+            destructive: true,
+            disabled: true,
+            disabledReason: "Transfer ownership first",
+          },
+        ]}
+      >
+        <Button>Danger zone</Button>
+      </DropdownMenu>
+    </YStack>
+  ),
+};
+
+export const LongListScroll: Story = {
+  args: { defaultOpen: true, maxHeight: 240 },
+  render: (args) => (
+    <YStack minHeight={380} paddingTop="$4" alignItems="center">
+      <DropdownMenu
+        {...args}
+        items={Array.from({ length: 24 }, (_, i) => ({
+          key: `item-${i}`,
+          label: `Menu item ${i + 1}`,
+          onSelect: () => console.log(`item ${i + 1}`),
+        }))}
+      >
+        <Button>Long list</Button>
+      </DropdownMenu>
+    </YStack>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [last, setLast] = useState<string | null>(null);
+    return (
+      <YStack minHeight={340} paddingTop="$4" alignItems="center" gap="$3">
+        <XStack gap="$3" alignItems="center">
+          <DropdownMenu
+            open={open}
+            onOpenChange={setOpen}
+            items={[
+              { label: "First action", onSelect: () => setLast("First action") },
+              { label: "Second action", onSelect: () => setLast("Second action") },
+            ]}
+          >
+            <Button>Controlled menu</Button>
+          </DropdownMenu>
+          <Button variant="outlined" onPress={() => setOpen(!open)}>
+            Toggle from outside
+          </Button>
+        </XStack>
+        <Text color="$color11" fontSize="$2">
+          {last ? `Last action: ${last}` : "No action selected yet"}
+        </Text>
+      </YStack>
+    );
+  },
+};