@ozen-ui/kit/__inner__/esm/components/Header/modules/HeaderMenuButton/HeaderMenuButton.js

React component library

import { __assign, __read, __rest } from "tslib";
import React, { useRef } from 'react';
import { ChevronDownIcon } from '@ozen-ui/icons';
import { useControlled } from '../../../../hooks/useControlled';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn, polymorphicComponentWithRef } from '../../../../utils';
import { List } from '../../../List';
import { Paper } from '../../../Paper';
import { Popover } from '../../../Popover';
import { HeaderButton } from '../HeaderButton';
import { HEADER_MENU_BUTTON_DEFAULT_TAG } from './constants';
export var cnHeaderMenuButton = cn('HeaderMenuButton');
export var HeaderMenuButton = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'HeaderMenuButton',
    });
    var _a = props.as, as = _a === void 0 ? HEADER_MENU_BUTTON_DEFAULT_TAG : _a, label = props.label, open = props.open, onOpenChange = props.onOpenChange, className = props.className, children = props.children, onClick = props.onClick, popoverProps = props.popoverProps, other = __rest(props, ["as", "label", "open", "onOpenChange", "className", "children", "onClick", "popoverProps"]);
    var internalRef = useRef(null);
    var _b = __read(useControlled({
        name: 'HeaderMenuButton',
        value: open,
        defaultValue: false,
        state: 'open',
    }), 2), isOpen = _b[0], setIsOpenState = _b[1];
    var setIsOpen = function (isOpen) {
        setIsOpenState(isOpen);
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(HeaderButton, __assign({}, other, { as: as, ref: useMultiRef([internalRef, ref]), onClick: function (event) {
                setIsOpen(!isOpen);
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
            }, className: cnHeaderMenuButton({ open: isOpen }, [className]), iconRight: React.createElement(ChevronDownIcon, { className: cnHeaderMenuButton('Chevron') }) }), label),
        React.createElement(Popover, __assign({ open: isOpen, as: Paper, offset: [0, 4], radius: "l", onClose: function () { return setIsOpen(false); }, anchorRef: internalRef, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
            React.createElement(List, { as: "ul", size: "s" }, children))));
});