@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
58 lines • 2.06 kB
JavaScript
import React, { useState } from "react";
import { useControllableState } from "../util/hooks/useControllableState.js";
import Menu from "./Menu/index.js";
import Toggle from "./Toggle.js";
import { DropdownContext } from "./context.js";
/**
* 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 const Dropdown = (({ children, onSelect, closeOnSelect = true, defaultOpen = false, open, onOpenChange, }) => {
const [anchorEl, setAnchorEl] = useState(null);
const [_open, _setOpen] = useControllableState({
defaultValue: defaultOpen,
value: open,
onChange: onOpenChange,
});
return (React.createElement(DropdownContext.Provider, { value: {
isOpen: _open,
handleToggle: _setOpen,
anchorEl,
setAnchorEl,
onSelect: (event) => {
onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
closeOnSelect && _setOpen(false);
},
} }, children));
});
Dropdown.Toggle = Toggle;
Dropdown.Menu = Menu;
export default Dropdown;
//# sourceMappingURL=Dropdown.js.map