import { jsx as _jsx } from "react/jsx-runtime";
import { useStyleConfig, vui } from '../core';
import { ListItem } from '../list';
import { usePopoverContext } from '../popover';
import { cs, useCallbackRef } from '../utils';
import { useMenuContext } from './context';
/** Displays a list item and by default closes the menu on click. */
export const MenuItem = vui((props, ref) => {
    const { className, onClick: onClickProp, ...rest } = props;
    const { instance } = usePopoverContext() ?? {};
    const { closeOnSelect, ...menuProps } = useMenuContext() ?? {};
    const styles = useStyleConfig('Menu', { ...menuProps, ...props });
    const onClick = useCallbackRef((e) => {
        onClickProp?.(e);
        closeOnSelect && instance?.hide();
    });
    return _jsx(ListItem, { className: cs('vui-menuItem', className), onClick: onClick, ref: ref, ...styles.item, ...rest });
});
MenuItem.displayName = 'MenuItem';
export default MenuItem;
//# sourceMappingURL=menuItem.js.map