import React, { useRef } from "react";
import { List } from "@rmwc/list";
import { MenuSurfaceAnchor, MenuSurface } from "@rmwc/menu";
import { RootContainer, ListContainer, DropdownContainer, OpenerIcon } from "./styled";
export const Dropdown = ({ title, children, className, renderTitle, isOpen = false, onMenuToggle, anchorCorner = "bottomStart", renderOpener, }) => {
    var _a;
    const ref = useRef();
    const handleOpenState = () => {
        onMenuToggle(!isOpen);
    };
    const handleClose = () => {
        onMenuToggle(false);
    };
    return (React.createElement(DropdownContainer, { className: className },
        React.createElement(MenuSurfaceAnchor, null,
            React.createElement(MenuSurface, { ref: ref, open: isOpen, onClose: handleClose, anchorCorner: anchorCorner }, typeof children === "function" ? (isOpen && (React.createElement(ListContainer, null,
                React.createElement(List, null, children({ maxHeight: (_a = ref.current) === null || _a === void 0 ? void 0 : _a.root.ref.style.maxHeight }))))) : (React.createElement(ListContainer, null,
                React.createElement(List, null, children)))),
            React.createElement(RootContainer, { onClick: handleOpenState },
                title || (renderTitle && renderTitle()),
                renderOpener ? (renderOpener()) : (React.createElement(OpenerIcon, { name: "triangle_down", noMargin: Boolean(renderTitle) }))))));
};
//# sourceMappingURL=dropdown.js.map