@gravity-ui/uikit/build/cjs/components/DropdownMenu/DropdownMenu.js

Gravity UI base styling and components

'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownMenu = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const useActionHandlers_1 = require("../../hooks/useActionHandlers/index.js");
const Button_1 = require("../Button/index.js");
const Icon_1 = require("../Icon/index.js");
const DropdownMenu_classname_1 = require("./DropdownMenu.classname.js");
const DropdownMenuContext_1 = require("./DropdownMenuContext.js");
const DropdownMenuItem_1 = require("./DropdownMenuItem.js");
const DropdownMenuNavigationContext_1 = require("./DropdownMenuNavigationContext.js");
const DropdownMenuPopup_1 = require("./DropdownMenuPopup.js");
const constants_1 = require("./constants.js");
const usePopupVisibility_1 = require("./hooks/usePopupVisibility.js");
const useScrollHandler_1 = require("./hooks/useScrollHandler.js");
const toItemList_1 = require("./utils/toItemList.js");
require("./DropdownMenu.css");
const DropdownMenu = ({ items = [], size = 'm', icon = (0, jsx_runtime_1.jsx)(Icon_1.Icon, { data: icons_1.Ellipsis }), open, onOpenToggle, hideOnScroll = true, data, disabled, switcher, renderSwitcher, switcherWrapperClassName, defaultSwitcherProps, defaultSwitcherClassName, onSwitcherClick, menuProps, popupProps, children, }) => {
    const anchorRef = React.useRef(null);
    const { isPopupShown, togglePopup, closePopup } = (0, usePopupVisibility_1.usePopupVisibility)(open, onOpenToggle, disabled);
    (0, useScrollHandler_1.useScrollHandler)(closePopup, anchorRef, !isPopupShown || !hideOnScroll);
    const contextValue = React.useMemo(() => ({
        toggle: togglePopup,
        data,
    }), [data, togglePopup]);
    const itemsList = React.useMemo(() => (0, toItemList_1.toItemList)(items, constants_1.dropdownMenuSeparator), [items]);
    const handleSwitcherClick = React.useCallback((event) => {
        if (disabled) {
            return;
        }
        onSwitcherClick?.(event);
        togglePopup();
    }, [disabled, onSwitcherClick, togglePopup]);
    const { onKeyDown: handleSwitcherKeyDown } = (0, useActionHandlers_1.useActionHandlers)(handleSwitcherClick);
    const switcherProps = React.useMemo(() => ({
        onClick: handleSwitcherClick,
        onKeyDown: handleSwitcherKeyDown,
    }), [handleSwitcherClick, handleSwitcherKeyDown]);
    return ((0, jsx_runtime_1.jsxs)(DropdownMenuContext_1.DropdownMenuContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, DropdownMenu_classname_1.cnDropdownMenu)('switcher-wrapper', switcherWrapperClassName), ...(renderSwitcher ? {} : switcherProps), children: renderSwitcher?.(switcherProps) || switcher || ((0, jsx_runtime_1.jsx)(Button_1.Button, { view: "flat", size: size, ...defaultSwitcherProps, className: (0, DropdownMenu_classname_1.cnDropdownMenu)('switcher-button', defaultSwitcherClassName), disabled: disabled, children: icon })) }), (0, jsx_runtime_1.jsx)(DropdownMenuNavigationContext_1.DropdownMenuNavigationContextProvider, { anchorRef: anchorRef, disabled: !isPopupShown, children: (0, jsx_runtime_1.jsx)(DropdownMenuPopup_1.DropdownMenuPopup, { items: itemsList, open: isPopupShown, size: size, menuProps: menuProps, anchorRef: anchorRef, onClose: closePopup, popupProps: popupProps, children: children }) })] }));
};
const DropdownMenuExport = Object.assign(DropdownMenu, { Item: DropdownMenuItem_1.DropdownMenuItem });
exports.DropdownMenu = DropdownMenuExport;
//# sourceMappingURL=DropdownMenu.js.map