@ozen-ui/kit

Version:
React component library
42 lines (41 loc) • 2.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderMenuButton = exports.cnHeaderMenuButton = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ozen-ui/icons");
var useControlled_1 = require("../../../../hooks/useControlled");
var useMultiRef_1 = require("../../../../hooks/useMultiRef");
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var utils_1 = require("../../../../utils");
var List_1 = require("../../../List");
var Paper_1 = require("../../../Paper");
var Popover_1 = require("../../../Popover");
var HeaderButton_1 = require("../HeaderButton");
var constants_1 = require("./constants");
exports.cnHeaderMenuButton = (0, utils_1.cn)('HeaderMenuButton');
exports.HeaderMenuButton = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'HeaderMenuButton',
    });
    var _a = props.as, as = _a === void 0 ? constants_1.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 = tslib_1.__rest(props, ["as", "label", "open", "onOpenChange", "className", "children", "onClick", "popoverProps"]);
    var internalRef = (0, react_1.useRef)(null);
    var _b = tslib_1.__read((0, useControlled_1.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_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(HeaderButton_1.HeaderButton, tslib_1.__assign({}, other, { as: as, ref: (0, useMultiRef_1.useMultiRef)([internalRef, ref]), onClick: function (event) {
                setIsOpen(!isOpen);
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
            }, className: (0, exports.cnHeaderMenuButton)({ open: isOpen }, [className]), iconRight: react_1.default.createElement(icons_1.ChevronDownIcon, { className: (0, exports.cnHeaderMenuButton)('Chevron') }) }), label),
        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ open: isOpen, as: Paper_1.Paper, offset: [0, 4], radius: "l", onClose: function () { return setIsOpen(false); }, anchorRef: internalRef, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
            react_1.default.createElement(List_1.List, { as: "ul", size: "s" }, children))));
});