UNPKG

@navikt/ds-react

Version:

React components from the Norwegian Labour and Welfare Administration.

71 lines (70 loc) 1.99 kB
import React from "react"; import { MenuType } from "./Menu"; import Toggle from "./Toggle"; export interface DropdownProps { children: React.ReactNode; /** * Handler called when an item is selected. */ onSelect?: (element: React.MouseEvent) => void; /** * Whether the Menu closes when a selection is made. * @default true */ closeOnSelect?: boolean; /** * @default false */ defaultOpen?: boolean; /** * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually. */ open?: boolean; /** * Change handler for open */ onOpenChange?: (open: boolean) => void; } export interface DropdownType extends React.FC<DropdownProps> { /** * @see 🏷️ {@link ToggleProps} */ Toggle: typeof Toggle; /** * @see 🏷️ {@link MenuType} */ Menu: MenuType; } /** * A component that displays a dropdown menu when the user clicks on its toggle button. * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dropdown) * @see 🏷️ {@link DropdownProps} * * @example * ```jsx * <Dropdown> * <Button as={Dropdown.Toggle}>Toggle</Button> * <Dropdown.Menu> * <Dropdown.Menu.GroupedList> * <Dropdown.Menu.GroupedList.Heading> * Systemer og oppslagsverk * </Dropdown.Menu.GroupedList.Heading> * <Dropdown.Menu.GroupedList.Item> * Gosys * </Dropdown.Menu.GroupedList.Item> * <Dropdown.Menu.GroupedList.Item> * Infotrygd * </Dropdown.Menu.GroupedList.Item> * </Dropdown.Menu.GroupedList> * <Dropdown.Menu.Divider /> * <Dropdown.Menu.List> * <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item> * <Dropdown.Menu.List.Item>Infotrygd</Dropdown.Menu.List.Item> * </Dropdown.Menu.List> * </Dropdown.Menu> * </Dropdown> * ``` */ export declare const Dropdown: DropdownType; export default Dropdown;