import { jsx as _jsx } from "react/jsx-runtime";
import { useStyleConfig, v, vui } from '../core';
import { cs, mergeRefs } from '../utils';
import { usePopoverContext } from './context';
/**
 * Displays a trigger component to toggle display of the popover content.
 * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
 */
export const PopoverTrigger = vui((props, ref) => {
    // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
    const { as, className, onClick: onClickProp, ...rest } = props;
    const { setReference, ...popoverProps } = usePopoverContext() ?? {};
    const styles = useStyleConfig('Popover', { ...popoverProps, ...props });
    const Element = as || v.button;
    const onClick = (e) => {
        // Avoids triggering parent's onClick, like when inside a ListItem
        e.stopPropagation();
        onClickProp?.(e);
    };
    return (_jsx(Element, { className: cs('vui-popoverTrigger', className), onClick: onClick, ref: mergeRefs(setReference, ref), ...styles.trigger, ...rest }));
});
PopoverTrigger.displayName = 'PopoverTrigger';
export default PopoverTrigger;
//# sourceMappingURL=popoverTrigger.js.map