{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu-story",
  "title": "Dropdown Menu Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating dropdown menu component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/ui/dropdown-menu-story/dropdown-menu-base.stories.tsx",
      "content": "import { expect, userEvent, waitFor, within } from \"storybook/test\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { Mail, Plus, PlusCircle, Search, UserPlus } from \"lucide-react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\n/**\n * Displays a menu to the user — such as a set of actions or functions —\n * triggered by a button.\n */\nconst meta = {\n  title: \"ui/base/DropdownMenu\",\n  component: DropdownMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  render: (args) => (\n    <DropdownMenu {...args}>\n      <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-44\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>Profile</DropdownMenuItem>\n          <DropdownMenuItem>Billing</DropdownMenuItem>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuItem>Subscription</DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof DropdownMenu>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the dropdown menu.\n */\nexport const Default: Story = {};\n\n/**\n * A dropdown menu with shortcuts.\n */\nexport const WithShortcuts: Story = {\n  render: (args) => (\n    <DropdownMenu {...args}>\n      <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-44\">\n        <DropdownMenuLabel>Controls</DropdownMenuLabel>\n        <DropdownMenuItem>\n          Back\n          <DropdownMenuShortcut>⌘[</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled>\n          Forward\n          <DropdownMenuShortcut>⌘]</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n};\n\n/**\n * A dropdown menu with submenus.\n */\nexport const WithSubmenus: Story = {\n  render: (args) => (\n    <DropdownMenu {...args}>\n      <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-44\">\n        <DropdownMenuItem>\n          <Search className=\"mr-2 size-4\" />\n          <span>Search</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Plus className=\"mr-2 size-4\" />\n            <span>New Team</span>\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <UserPlus className=\"mr-2 size-4\" />\n              <span>Invite users</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>\n                  <Mail className=\"mr-2 size-4\" />\n                  <span>Email</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <PlusCircle className=\"mr-2 size-4\" />\n                  <span>More...</span>\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n};\n\n/**\n * A dropdown menu with radio items.\n */\nexport const WithRadioItems: Story = {\n  render: (args) => (\n    <DropdownMenu {...args}>\n      <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-44\">\n        <DropdownMenuLabel inset>Status</DropdownMenuLabel>\n        <DropdownMenuRadioGroup value=\"warning\">\n          <DropdownMenuRadioItem value=\"info\">Info</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"warning\">Warning</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"error\">Error</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n};\n\n/**\n * A dropdown menu with checkboxes.\n */\nexport const WithCheckboxes: Story = {\n  render: (args) => (\n    <DropdownMenu {...args}>\n      <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-44\">\n        <DropdownMenuCheckboxItem checked>\n          Autosave\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem>Show Comments</DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n};\n\nexport const ShouldOpenClose: Story = {\n  name: \"when clicking an item, should close the dropdown menu\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const body = within(canvasElement.ownerDocument.body);\n\n    await step(\"Open the dropdown menu\", async () => {\n      await userEvent.click(await body.findByRole(\"button\", { name: /open/i }));\n      expect(await body.findByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    await step(\"Click the first menu item\", async () => {\n      const items = await body.findAllByRole(\"menuitem\");\n      expect(items).toHaveLength(4);\n      await userEvent.click(items[0], { delay: 100 });\n      await waitFor(() => {\n        expect(body.queryByRole(\"menu\")).not.toBeInTheDocument();\n      });\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "dropdown",
    "menu"
  ],
  "type": "registry:component"
}