import { FC, ReactNode } from 'react';
import { Placement } from '@popperjs/core';
import { BackgroundColor } from '../../types';
import { BoxProps } from '../Box/Box';
export declare type PopoverProps = {
    /**
     * Custom class to apply to the alert.
     */
    className?: string;
    /**
     * The trigger element
     */
    children: ReactNode;
    /**
     * Content of the tooltip. Can be any JSX node.
     */
    content: ReactNode;
    /**
     * The Popover is a controlled input, and will be shown when `isOpen === true`.
     */
    isOpen: boolean;
    /**
     * Color of the arrow background. NOTE: That the arrowColor will default to the
     * `background` color applied in the `contentContainerProps`, but can be overwritten
     * by passing a specific value here.
     */
    arrowColor?: BackgroundColor;
    /**
     * An object matching the interface of the `Box` component props.
     * This is useful for styling the tooltip container using all the options available in
     * a `Box`.
     */
    contentContainerProps?: BoxProps;
    /**
     * Whether the arrow is shown.
     */
    hasArrow?: boolean;
    /**
     * How far (in pixels) the Popover element will be from the target.
     * Note that this is from the edge of the target to the edge of the popover content,
     * and it DOES NOT include the arrow element.
     */
    offsetFromTarget?: number;
    /**
     * Callback function to handle when a user clicks outside the Popover
     */
    onClickOutside?: (event: MouseEvent | KeyboardEvent) => void;
    /**
     * The placement (position) of the Popover relative to its trigger.
     */
    placement?: Placement;
    /**
     * Whether you want to trap focus in the Popover element when it is open.
     * Read more about focus traps:
     * [Here](https://allyjs.io/tutorials/accessible-dialog.html#trapping-focus-inside-the-dialog)
     */
    trapFocus?: boolean;
    /**
     * Additional props to be spread to rendered element
     */
    [x: string]: any;
} & ({
    /**
     * Whether the element should be rendered outside its DOM structure
     * for reasons of placement. Use this when the element is being cut-off or
     * re-positioned due to lack of space in the parent container.
     * NOTE: `portalTarget` is required if this is true.
     */
    withPortal: true;
    /**
    * The target element where the Popover will be portaled to, when `withPortal === true`.
    * `document.body` will work for many cases, but you can also use a custom container for this.
    * Only required if withPortal is true.
    */
    portalTarget: HTMLElement;
} | {
    withPortal?: false;
    portalTarget?: never;
});
export declare const Popover: FC<PopoverProps>;