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

Gravity UI base styling and components

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Ellipsis } from '@gravity-ui/icons';
import { useActionHandlers } from "../../hooks/useActionHandlers/index.js";
import { Button } from "../Button/index.js";
import { Icon } from "../Icon/index.js";
import { cnDropdownMenu } from "./DropdownMenu.classname.js";
import { DropdownMenuContext } from "./DropdownMenuContext.js";
import { DropdownMenuItem as DropdownMenuItemComponent } from "./DropdownMenuItem.js";
import { DropdownMenuNavigationContextProvider } from "./DropdownMenuNavigationContext.js";
import { DropdownMenuPopup } from "./DropdownMenuPopup.js";
import { dropdownMenuSeparator } from "./constants.js";
import { usePopupVisibility } from "./hooks/usePopupVisibility.js";
import { useScrollHandler } from "./hooks/useScrollHandler.js";
import { toItemList } from "./utils/toItemList.js";
import "./DropdownMenu.css";
const DropdownMenu = ({ items = [], size = 'm', icon = _jsx(Icon, { data: 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 } = usePopupVisibility(open, onOpenToggle, disabled);
    useScrollHandler(closePopup, anchorRef, !isPopupShown || !hideOnScroll);
    const contextValue = React.useMemo(() => ({
        toggle: togglePopup,
        data,
    }), [data, togglePopup]);
    const itemsList = React.useMemo(() => toItemList(items, dropdownMenuSeparator), [items]);
    const handleSwitcherClick = React.useCallback((event) => {
        if (disabled) {
            return;
        }
        onSwitcherClick?.(event);
        togglePopup();
    }, [disabled, onSwitcherClick, togglePopup]);
    const { onKeyDown: handleSwitcherKeyDown } = useActionHandlers(handleSwitcherClick);
    const switcherProps = React.useMemo(() => ({
        onClick: handleSwitcherClick,
        onKeyDown: handleSwitcherKeyDown,
    }), [handleSwitcherClick, handleSwitcherKeyDown]);
    return (_jsxs(DropdownMenuContext.Provider, { value: contextValue, children: [_jsx("div", { ref: anchorRef, className: cnDropdownMenu('switcher-wrapper', switcherWrapperClassName), ...(renderSwitcher ? {} : switcherProps), children: renderSwitcher?.(switcherProps) || switcher || (_jsx(Button, { view: "flat", size: size, ...defaultSwitcherProps, className: cnDropdownMenu('switcher-button', defaultSwitcherClassName), disabled: disabled, children: icon })) }), _jsx(DropdownMenuNavigationContextProvider, { anchorRef: anchorRef, disabled: !isPopupShown, children: _jsx(DropdownMenuPopup, { items: itemsList, open: isPopupShown, size: size, menuProps: menuProps, anchorRef: anchorRef, onClose: closePopup, popupProps: popupProps, children: children }) })] }));
};
const DropdownMenuExport = Object.assign(DropdownMenu, { Item: DropdownMenuItemComponent });
export { DropdownMenuExport as DropdownMenu };
//# sourceMappingURL=DropdownMenu.js.map