@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
43 lines (42 loc) • 1.42 kB
TypeScript
import DropdownItem from "./Dropdown.Item.js";
export type DropdownGroupProps = {
/** Label of the dropdown group button */
name?: Exclude<React.ReactNode, boolean | null>;
/** Content to show in the dropdown popup */
children?: React.ReactNode;
/** Font Awesome icon reference (or string if using library) */
icon?: React.ComponentProps<typeof DropdownItem>["icon"];
};
/**
* Nested group of dropdown items.
* Useful for dropdown menus with multiple levels, can be nested inside eachother.
* @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>
* */
export default function DropdownGroup({ icon, children, name, }: DropdownGroupProps): import("react/jsx-runtime").JSX.Element;