import { AriaLabelingProps, GlobalDOMAttributes, RefObject } from '@react-types/shared'; import { AriaPopoverProps } from 'react-aria/usePopover'; import { ClassNameOrFunction, ContextValue, RenderProps, SlotProps } from './utils'; import { OverlayTriggerProps } from 'react-stately/useOverlayTriggerState'; import { PlacementAxis, PositionProps } from 'react-aria/useOverlayPosition'; import React, { Context } from 'react'; export interface PopoverProps extends Omit, Omit, OverlayTriggerProps, RenderProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Popover' */ className?: ClassNameOrFunction; /** * The name of the component that triggered the popover. This is reflected on the element * as the `data-trigger` attribute, and can be used to provide specific * styles for the popover depending on which element triggered it. */ trigger?: string; /** * The ref for the element which the popover positions itself with respect to. * * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., * this is set automatically. It is only required when used standalone. */ triggerRef?: RefObject; /** * Whether the popover is currently performing an entry animation. */ isEntering?: boolean; /** * Whether the popover is currently performing an exit animation. */ isExiting?: boolean; /** * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. * @default document.body * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead. */ UNSTABLE_portalContainer?: Element; /** * The additional offset applied along the main axis between the element and its * anchor element. * @default 8 */ offset?: number; } export interface PopoverRenderProps { /** * The name of the component that triggered the popover, e.g. "DialogTrigger" or "ComboBox". * @selector [data-trigger="..."] */ trigger: string | null; /** * The placement of the popover relative to the trigger. * @selector [data-placement="left | right | top | bottom"] */ placement: PlacementAxis | null; /** * Whether the popover is currently entering. Use this to apply animations. * @selector [data-entering] */ isEntering: boolean; /** * Whether the popover is currently exiting. Use this to apply animations. * @selector [data-exiting] */ isExiting: boolean; } interface PopoverContextValue extends PopoverProps { /** Contexts to clear. */ clearContexts?: Context[]; } export declare const PopoverContext: Context>; /** * A popover is an overlay element positioned relative to a trigger. */ export declare const Popover: (props: PopoverProps & React.RefAttributes) => React.ReactElement> | null; export {};