DropdownMenu

Source code
import { DropdownMenu } from "rfui-package";

#Basic

<DropdownMenu
  buttonText="Basic example"
  items={[
    {
      type: "button",
      text: "Foo",
      onClick: () => {
        alert("Foo");
      },
    },
    {
      type: "button",
      text: "Bar",
      onClick: () => {
        alert("Bar");
      },
    },
  ]}
/>

#Button styling

Whatever you pass to buttonProps will be passed through to a Button component that DropdownMenu uses internally.
<DropdownMenu
  buttonText="Button styling example"
  buttonProps={{ variant: "primary" }}
  items={[
    {
      type: "button",
      text: "Foo",
      onClick: () => {
        alert("Foo");
      },
    },
    {
      type: "button",
      text: "Bar",
      onClick: () => {
        alert("Bar");
      },
    },
  ]}
/>

#Links

<DropdownMenu
  buttonText="Links example"
  items={[
    {
      type: "link",
      text: "Foo",
      href: "/foo",
    },
    {
      type: "link",
      text: "Bar",
      href: "/bar",
    },
  ]}
/>

#Separator

<DropdownMenu
  buttonText="Separator example"
  items={[
    {
      type: "button",
      text: "Foo",
      onClick: () => {
        alert("Foo");
      },
    },
    { type: "separator" },
    {
      type: "button",
      text: "Bar",
      onClick: () => {
        alert("Bar");
      },
    },
  ]}
/>

#Disabled item

<DropdownMenu
  buttonText="Disabled item example"
  items={[
    {
      type: "button",
      text: "Foo",
      disabled: true,
      onClick: () => {
        alert("Foo");
      },
    },
    {
      type: "button",
      text: "Bar",
      onClick: () => {
        alert("Bar");
      },
    },
  ]}
/>

#Sections

<DropdownMenu
  buttonText="Example of sections"
  items={[
    {
      type: "section",
      heading: "Fruits",
      items: [
        {
          type: "button",
          text: "Apple",
          onClick: () => {
            alert("Apple");
          },
        },
        {
          type: "button",
          text: "Banana",
          onClick: () => {
            alert("Banana");
          },
        },
      ],
    },
    {
      type: "section",
      heading: "Vegetables",
      items: [
        {
          type: "button",
          text: "Onion",
          onClick: () => {
            alert("Onion");
          },
        },
        {
          type: "button",
          text: "Carrot",
          onClick: () => {
            alert("Carrot");
          },
        },
      ],
    },
  ]}
/>

#Props

PropRequiredDefaultType and notes
buttonText-
string
buttonProps--
Partial<ButtonType>
See the docs for the Button component.
items-
{
  buttonText: string;
  items: DropdownMenuItemType[];
}
The type for DropdownMenuItemType is:
type DropdownMenuItemType =
  | { type: "link"; text: string; href: string; disabled?: boolean }
  | { type: "button"; text: string; onClick: () => void; disabled?: boolean }
  | { type: "separator" }
  | { type: "section"; heading: string; items: DropdownMenuItemType[] };