@intility/bifrost-react/dist/components/Dropdown/index.js

React library for Intility's design system, Bifrost.

import Dropdown from "./Dropdown.js";
import DropdownItem from "./Dropdown.Item.js";
import DropdownGroup from "./Dropdown.Group.js";
import { wrapClientComponent } from "../../utils/wrapClientComponent.js";

/**
 * Display a dropdown on click.
 * The nested content of `<Dropdown>` needs to be a single element able to hold
 * a `ref`, unless an element reference is passed to the `reference` prop.
 *
 * @see https://bifrost.intility.com/react/dropdown
 *
 * @example
 * <Dropdown content={<div>Dropdown content</div>}>
 *   <Button>Click to show dropdown</Button>
 * </Dropdown>
 */
export default Object.assign(wrapClientComponent(Dropdown, "Dropdown"), {
  /** Use inside a link or button to style an item of a dropdown menu.
   *
   * Meant to be used as part of the `content` of a `<Dropdown>`
   *
   * @see https://bifrost.intility.com/react/dropdown#dropdownitem
   *
   * @example
   * <button type="button">
   *   <Dropdown.Item>Button</Dropdown.Item>
   * </button>
   */
  Item: DropdownItem,
  /**
   * Nested group of dropdown items.
   *
   * Useful for dropdown menus with multiple levels, can be nested inside
   * one another.
   *
   * @see https://bifrost.intility.com/react/dropdown#dropdowngroup
   *
   * @example
   * <Dropdown
   *   content={
   *     <Dropdown.Group name="Group">
   *       <Dropdown.Item>Item 1</Dropdown.Item>
   *       <Dropdown.Item>Item 2</Dropdown.Item>
   *     </Dropdown.Group>
   *   }
   * >
   *   <Button>Two levels</Button>
   * </Dropdown>
   *
   * @example
   * <Dropdown
   *   content={
   *     <Dropdown.Group name="Group">
   *       <Dropdown.Group name="Nested Group A">
   *         <Dropdown.Item>Item A1</Dropdown.Item>
   *         <Dropdown.Item>Item A2</Dropdown.Item>
   *       </Dropdown.Group>
   *       <Dropdown.Group name="Nested Group B">
   *         <Dropdown.Item>Item B1</Dropdown.Item>
   *         <Dropdown.Item>Item B2</Dropdown.Item>
   *       </Dropdown.Group>
   *     </Dropdown.Group>
   *   }
   * >
   *   <Button>Three levels</Button>
   * </Dropdown>
   * */
  Group: DropdownGroup
});