import React, { useState } from "react";
import { useControllableState } from "../utils/hooks/index.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