import { ComponentPropsWithRef, ReactNode } from 'react'; import { Placement } from '@floating-ui/react'; export type MenuProps = ComponentPropsWithRef<'div'> & { /** Use a button element */ triggerButton: ReactNode; children: ReactNode; /** An optional tooltip to use on the trigger button */ tooltip?: string; /** Where to mount the popover portal */ mountNodeId?: string; /** Preferred placement of the popover. [See options](https://floating-ui.com/docs/usefloating#placement) */ placement?: Placement; }; /** * ```tsx * import { Menu, MenuItem, MenuHeading } from '@companycam/slab-web'; * ``` * - To match the behavior of our existing menu, `Menu` is an uncontrolled component (it manages its own open/close state). * - Our menu uses a combination of [Headless UI's menu](https://headlessui.com/react/menu) and [Floating UI](https://floating-ui.com). * - `triggerButton` is required to open the menu. Use a slab-web button unless you have a good reason not to. * - `placement` ([see options](https://floating-ui.com/docs/usefloating#placement)) is the position of the menu relative to the `triggerButton`. If the menu is too close to the edge of the screen, it will flip to the other side. * * ## MenuItem * - Renders a button unless `href` is provided. * - `contentAfter` can be used for badges or other brief content after the item label (see code example below). * * > Use outline icon variants whenever possible in MenuItem. Refer to [this website](https://pictogrammers.com/library/mdi/) for a list of available icons. * * ## Item Ordering * - Menus should be ordered **alphabetically** * - _Exception:_ delete/destroy options should always be at the end, with a [HorizontalRule](/docs/horizontalrule--docs) above them * - For lengthy menus, reduce cognitive load by using [MenuHeading](/docs/menuheading--docs) to group items. Menu items inside groups should also be ordered alphabetically. * */ export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element; export default Menu;