Dropdown Menu

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  toast,
} from 'ferry-ui'
import { Archive, ChevronDown, Copy, Pencil, Share2 } from 'lucide-react'

export default function DropdownMenuHero() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button iconRight={<ChevronDown />}>Actions</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        <DropdownMenuLabel>Project</DropdownMenuLabel>
        <DropdownMenuItem onSelect={() => toast('Edit the project')}>
          <Pencil /> Edit
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => toast.success('Project duplicated')}>
          <Copy /> Duplicate
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => toast('Share the project')}>
          <Share2 /> Share
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onSelect={() => toast.success('Project archived')}>
          <Archive /> Archive
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
  toast,
  useModKey,
} from 'ferry-ui'
import { Copy, Download, MoreHorizontal, Send } from 'lucide-react'

export default function DropdownMenuItems() {
  const mod = useModKey()
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" icon={<MoreHorizontal />} aria-label="Actions for INV-2041" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-56">
        <DropdownMenuLabel>Invoice INV-2041</DropdownMenuLabel>
        <DropdownMenuGroup>
          <DropdownMenuItem onSelect={() => toast.success('Invoice duplicated')}>
            <Copy /> Duplicate
            <DropdownMenuShortcut>{mod} D</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => toast('The download starts')}>
            <Download /> Download PDF
          </DropdownMenuItem>
          {/* The customer paid this invoice: the action is not available. */}
          <DropdownMenuItem disabled>
            <Send /> Send a reminder
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem onSelect={() => toast('Open the customer')}>View customer</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import * as React from 'react'
import {
  Button,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from 'ferry-ui'
import { Settings2 } from 'lucide-react'

const DEFAULT_COLUMNS = { email: true, role: true, status: false }

export default function DropdownMenuCheckboxItems() {
  const [columns, setColumns] = React.useState(DEFAULT_COLUMNS)

  function toggle(key: keyof typeof DEFAULT_COLUMNS) {
    return (checked: boolean) => setColumns((current) => ({ ...current, [key]: checked }))
  }

  // `preventDefault` keeps the menu open, so the user can change more than one column.
  const keepOpen = (event: Event) => event.preventDefault()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button icon={<Settings2 />}>View</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        <DropdownMenuLabel inset>Columns</DropdownMenuLabel>
        <DropdownMenuCheckboxItem checked disabled>
          Name
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={columns.email} onCheckedChange={toggle('email')} onSelect={keepOpen}>
          Email
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={columns.role} onCheckedChange={toggle('role')} onSelect={keepOpen}>
          Role
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={columns.status} onCheckedChange={toggle('status')} onSelect={keepOpen}>
          Status
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        {/* `inset` aligns the text of a plain item with the checkbox items. */}
        <DropdownMenuItem inset onSelect={() => setColumns(DEFAULT_COLUMNS)}>
          Reset columns
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import * as React from 'react'
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from 'ferry-ui'
import { ArrowUpDown } from 'lucide-react'

const LABELS: Record<string, string> = {
  newest: 'Newest first',
  oldest: 'Oldest first',
  name: 'Name (A to Z)',
}

export default function DropdownMenuRadioItems() {
  const [sort, setSort] = React.useState('newest')

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button icon={<ArrowUpDown />}>Sort: {LABELS[sort]}</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        <DropdownMenuLabel inset>Sort by</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
          <DropdownMenuRadioItem value="newest">Newest first</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="oldest">Oldest first</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="name">Name (A to Z)</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="amount" disabled>
            Amount
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  toast,
} from 'ferry-ui'
import { ChevronDown, FolderInput, Pencil } from 'lucide-react'

const TEAMS = ['Marketing', 'Product', 'Finance']

export default function DropdownMenuSubmenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button iconRight={<ChevronDown />}>Document</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        <DropdownMenuItem onSelect={() => toast('Rename the document')}>
          <Pencil /> Rename
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <FolderInput /> Move to
          </DropdownMenuSubTrigger>
          {/* The portal makes sure that the first panel does not cut the submenu. */}
          <DropdownMenuPortal>
            <DropdownMenuSubContent className="w-40">
              {TEAMS.map((team) => (
                <DropdownMenuItem key={team} onSelect={() => toast.success(`Document moved to ${team}`)}>
                  {team}
                </DropdownMenuItem>
              ))}
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ferry-ui'

const ALIGNMENTS = ['start', 'center', 'end'] as const

export default function DropdownMenuAlign() {
  return (
    <>
      {ALIGNMENTS.map((align) => (
        <DropdownMenu key={align}>
          <DropdownMenuTrigger asChild>
            <Button>{align}</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align={align} className="w-48">
            <DropdownMenuItem>Open</DropdownMenuItem>
            <DropdownMenuItem>Duplicate</DropdownMenuItem>
            <DropdownMenuItem>Archive</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ))}
    </>
  )
}

import * as React from 'react'
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, toast } from 'ferry-ui'
import { ChevronDown, ChevronUp } from 'lucide-react'

export default function DropdownMenuControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
        {/* The trigger reads the state: the arrow changes while the menu is open. */}
        <Button iconRight={open ? <ChevronUp /> : <ChevronDown />}>Export</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-40">
        <DropdownMenuItem onSelect={() => toast.success('CSV export ready')}>CSV file</DropdownMenuItem>
        <DropdownMenuItem onSelect={() => toast.success('PDF export ready')}>PDF file</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import * as React from 'react'
import {
  Button,
  ConfirmDialog,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  toast,
} from 'ferry-ui'
import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react'

export default function DropdownMenuConfirm() {
  const [confirmOpen, setConfirmOpen] = React.useState(false)

  return (
    <>
      <span className="font-mono text-[13px] text-foreground">Analytics export</span>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="icon-tiny"
            icon={<MoreHorizontal />}
            aria-label="Actions for the API key Analytics export"
          />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem onSelect={() => toast('Rename the API key')}>
            <Pencil /> Rename
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          {/* The item opens the confirmation. It does not revoke the key on a click. */}
          <DropdownMenuItem variant="destructive" onSelect={() => setConfirmOpen(true)}>
            <Trash2 /> Revoke key
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <ConfirmDialog
        open={confirmOpen}
        onOpenChange={setConfirmOpen}
        title="Revoke the API key “Analytics export”?"
        description="Requests with this key fail from now on. This cannot be undone."
        confirmLabel="Revoke key"
        onConfirm={() => {
          toast.success('API key revoked')
        }}
      />
    </>
  )
}