import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as DropdownMenuStories from "./DropdownMenu.stories";

<Meta of={DropdownMenuStories} />

# Dropdown Menu

The Dropdown Menu component provides a way to display a menu of options that appears when a user clicks on a trigger element. It's designed to present related actions or navigation options in a consistent and accessible format.

## Usage

<Canvas of={DropdownMenuStories.Documentation} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as User } from "@webiny/icons/person.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
import { ReactComponent as Users } from "@webiny/icons/people.svg";
import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
import { ReactComponent as Plus } from "@webiny/icons/add.svg";
import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";

const { Label, Separator, Group, Item, Link } = DropdownMenu;

const DropdownMenuExample = () => {
return (

<DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
  <Label text={"My Account"} />
  <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
  <Group>
    <Item icon={<Item.Icon element={<CreditCard />} label={"Billing"} />} text={"Billing"} />
    <Item icon={<Item.Icon element={<Settings />} label={"Settings"} />} text={"Settings"} />
    <Item
      icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
      text={"Keyboard shortcuts"}
    />
  </Group>
  <Separator />
  <Group>
    <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
    <Item
      icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
      text={"Invite users"}
    />
    <Item icon={<Item.Icon label={"New Team"} element={<Plus />} />} text={"New Team"} />
  </Group>
  <Separator />
  <Item icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />} text={"Support"} />
  <Item icon={<Item.Icon label={"API"} element={<Cloud />} />} text={"API"} disabled />
  <Separator />
  <Item icon={<Item.Icon label={"Log out"} element={<LogOut />} />} text={"Log out"} />
  <Separator />
  <Label text={"Links"} />
  <Link text={"Link 1"} to={"#link-1"} icon={<Link.Icon label="Link 1" element={<LinkIcon />} />} />
  <Link text={"Link 2"} to={"#link-2"} icon={<Link.Icon label="Link 2" element={<LinkIcon />} />} />
  <Link text={"Link 3"} to={"#link-3"} icon={<Link.Icon label="Link 3" element={<LinkIcon />} />} />
</DropdownMenu>
); };

export default DropdownMenuExample;

` }}
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={DropdownMenuStories.Documentation} />

```tsx
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as User } from "@webiny/icons/person.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
import { ReactComponent as Users } from "@webiny/icons/people.svg";
import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
import { ReactComponent as Plus } from "@webiny/icons/add.svg";
import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";

const { Label, Separator, Group, Item, Link } = DropdownMenu;

const DropdownMenuExample = () => {
  return (
    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
      <Label text={"My Account"} />
      <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
      <Group>
        <Item icon={<Item.Icon element={<CreditCard />} label={"Billing"} />} text={"Billing"} />
        <Item icon={<Item.Icon element={<Settings />} label={"Settings"} />} text={"Settings"} />
        <Item
          icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
          text={"Keyboard shortcuts"}
        />
      </Group>
      <Separator />
      <Group>
        <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
        <Item
          icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
          text={"Invite users"}
        />
        <Item icon={<Item.Icon label={"New Team"} element={<Plus />} />} text={"New Team"} />
      </Group>
      <Separator />
      <Item icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />} text={"Support"} />
      <Item icon={<Item.Icon label={"API"} element={<Cloud />} />} text={"API"} disabled />
      <Separator />
      <Item icon={<Item.Icon label={"Log out"} element={<LogOut />} />} text={"Log out"} />
      <Separator />
      <Label text={"Links"} />
      <Link
        text={"Link 1"}
        to={"#link-1"}
        icon={<Link.Icon label="Link 1" element={<LinkIcon />} />}
      />
      <Link
        text={"Link 2"}
        to={"#link-2"}
        icon={<Link.Icon label="Link 2" element={<LinkIcon />} />}
      />
      <Link
        text={"Link 3"}
        to={"#link-3"}
        icon={<Link.Icon label="Link 3" element={<LinkIcon />} />}
      />
    </DropdownMenu>
  );
};

export default DropdownMenuExample;
```

## Examples

### Simple Menu with Icons

<Canvas of={DropdownMenuStories.SimpleMenuWithIcons} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";

const { Item } = DropdownMenu;

const SimpleMenuWithIconsExample = () => {
return (

<DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
  <Item icon={<Item.Icon label={"Billing"} element={<CreditCard />} />} text={"Billing"} />
  <Item icon={<Item.Icon label={"Settings"} element={<Settings />} />} text={"Settings"} />
  <Item
    icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
    text={"Keyboard shortcuts"}
  />
</DropdownMenu>
); };

export default SimpleMenuWithIconsExample;
` }} />

### With Sub Menus

<Canvas of={DropdownMenuStories.WithSubMenus} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as User } from "@webiny/icons/person.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
import { ReactComponent as Users } from "@webiny/icons/people.svg";
import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
import { ReactComponent as Plus } from "@webiny/icons/add.svg";
import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
import { ReactComponent as Mail } from "@webiny/icons/mail.svg";
import { ReactComponent as MessageSquare } from "@webiny/icons/chat_bubble.svg";
import { ReactComponent as PlusCircle } from "@webiny/icons/add_circle.svg";

const { Label, Separator, Group, Item } = DropdownMenu;

const WithSubMenusExample = () => {
return (

<DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
  <Label text={"My Account"} />
  <Item icon={<Item.Icon element={<User />} label={"Profile"} />} text={"Profile"} />
  <Group>
    <Item icon={<Item.Icon label={"Billing"} element={<CreditCard />} />} text={"Billing"} />
    <Item icon={<Item.Icon label={"Settings"} element={<Settings />} />} text={"Settings"} />
    <Item
      icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
      text={"Keyboard shortcuts"}
    />
  </Group>
  <Separator />
  <Group>
    <Item icon={<Item.Icon label={"Team"} element={<Users />} />} text={"Team"} />
    <Item icon={<Item.Icon label={"Invite user"} element={<UserPlus />} />} text={"Invite users"}>
      <Item icon={<Item.Icon label={"Email"} element={<Mail />} />} text={"Email"} />
      <Item icon={<Item.Icon label={"Message"} element={<MessageSquare />} />} text={"Message"} />
      <Separator />
      <Item icon={<Item.Icon label={"More..."} element={<PlusCircle />} />} text={"More..."}>
        <Item icon={<Item.Icon label={"Email"} element={<Mail />} />} text={"Email"} />
        <Item icon={<Item.Icon label={"Message"} element={<MessageSquare />} />} text={"Message"} />
        <Separator />
        <Item icon={<Item.Icon label={"More..."} element={<PlusCircle />} />} text={"More..."} />
      </Item>
    </Item>
    <Item icon={<Item.Icon label={"New Team"} element={<Plus />} />} text={"New Team"} />
  </Group>
  <Separator />
  <Item icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />} text={"Support"} />
  <Item icon={<Item.Icon label={"API"} element={<Cloud />} />} text={"API"} disabled />
  <Separator />
  <Item icon={<Item.Icon label={"Log out"} element={<LogOut />} />} text={"Log out"} />
</DropdownMenu>
); };

export default WithSubMenusExample;
` }} />

### With Checkbox Items

<Canvas of={DropdownMenuStories.WithCheckboxItems} source={{ code: `
import React from "react";
import { DropdownMenu, Button, Text } from "@webiny/admin-ui";

const TARGET_LEVELS = [
{
id: "viewer",
label: "Viewer",
description: "Can view content, but not modify it"
},
{
id: "editor",
label: "Editor",
description: "Can view and modify content"
},
{
id: "owner",
label: "Owner",
description: "Can edit and manage content permissions"
}
];

const WithCheckboxItemsExample = () => {
return (

<DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
  {TARGET_LEVELS.map(level => (
    <DropdownMenu.CheckboxItem
      key={level.id}
      checked={level.id === "viewer"}
      text={
        <div>
          <Text as={"div"}>{level.label}</Text>
          <Text as={"div"} size={"sm"} className={"text-neutral-strong"}>
            {level.description}
          </Text>
        </div>
      }
      onClick={() => {
        console.log("Selected level:", level.id);
      }}
    />
  ))}
  <DropdownMenu.Separator />
  <DropdownMenu.Item text={"Remove access"} />
</DropdownMenu>
); };

export default WithCheckboxItemsExample;
` }} />

### With Open Change Handler

With Open Change Handler, you can listen to the menu's open state changes.
For this you can use the `onOpenChange` prop.

<Canvas of={DropdownMenuStories.WithOnOpenChange} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";

const { Item } = DropdownMenu;

const WithOnOpenChangeExample = () => {
return (

<DropdownMenu
  trigger={<Button variant="primary" text={"Open"} />}
  onOpenChange={opened => {
    console.log("On Open Change");
  }}
>
  <Item icon={<Item.Icon element={<CreditCard />} label={"Billing"} />} text={"Billing"} />
  <Item icon={<Item.Icon element={<Settings />} label={"Settings"} />} text={"Settings"} />
  <Item
    icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
    text={"Keyboard shortcuts"}
  />
</DropdownMenu>
); };

export default WithOnOpenChangeExample;
` }} />