import type { RefObject } from "react"; import { OverlayTriggerProps } from "@react-types/overlays"; import { PopoverPlacement } from "./utils"; import { PopoverContentVariantsProps } from "./popover.styles"; export interface UsePopoverProps extends OverlayTriggerProps, PopoverContentVariantsProps { ref?: RefObject; /** * The ref for the element which the overlay positions itself with respect to. */ triggerRef?: RefObject; /** * A ref for the scrollable region within the overlay. * @default overlayRef */ scrollRef?: RefObject; /** * The placement of the element with respect to its anchor element. * @default 'bottom' */ placement?: PopoverPlacement; /** * Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. * @default true */ shouldFlip?: boolean; offset?: number; /** Handler that is called when the overlay should close. */ onClose?: () => void; /** * Whether to close the overlay when the user interacts outside it. * @default false */ isDismissable?: boolean; /** * Type of overlay that is opened by the trigger. */ triggerType?: "dialog" | "menu" | "listbox" | "tree" | "grid"; /** * Whether the popover is animated. */ disableAnimation?: boolean; /** Whether the overlay should close when focus is lost or moves outside it. */ shouldCloseOnBlur?: boolean; /** * Whether pressing the escape key to close the overlay should be disabled. * @default false */ isKeyboardDismissDisabled?: boolean; /** * When user interacts with the argument element outside of the overlay ref, * return true if onClose should be called. This gives you a chance to filter * out interaction with elements that should not dismiss the overlay. * By default, onClose will always be called on interaction outside the overlay ref. */ shouldCloseOnInteractOutside?: (element: HTMLElement) => boolean; } /** * @internal */ export declare function usePopover(props?: UsePopoverProps): { state: import("@react-stately/overlays").OverlayTriggerState; exited: boolean; overlayRef: RefObject; triggerRef: RefObject; placement: PopoverPlacement; disableShadow: boolean | "true" | ({ "@xs"?: boolean | "true" | undefined; "@sm"?: boolean | "true" | undefined; "@md"?: boolean | "true" | undefined; "@lg"?: boolean | "true" | undefined; "@xl"?: boolean | "true" | undefined; "@dark"?: boolean | "true" | undefined; "@light"?: boolean | "true" | undefined; "@hover"?: boolean | "true" | undefined; "@motion"?: boolean | "true" | undefined; "@xsMin"?: boolean | "true" | undefined; "@smMin"?: boolean | "true" | undefined; "@mdMin"?: boolean | "true" | undefined; "@lgMin"?: boolean | "true" | undefined; "@xlMin"?: boolean | "true" | undefined; "@xsMax"?: boolean | "true" | undefined; "@smMax"?: boolean | "true" | undefined; "@mdMax"?: boolean | "true" | undefined; "@lgMax"?: boolean | "true" | undefined; "@xlMax"?: boolean | "true" | undefined; "@safari"?: boolean | "true" | undefined; "@initial"?: boolean | "true" | undefined; } & { [x: string]: boolean | "true" | undefined; }) | undefined; disableAnimation: boolean; shouldCloseOnBlur: boolean; isDismissable: boolean; isBordered: boolean | "true" | ({ "@xs"?: boolean | "true" | undefined; "@sm"?: boolean | "true" | undefined; "@md"?: boolean | "true" | undefined; "@lg"?: boolean | "true" | undefined; "@xl"?: boolean | "true" | undefined; "@dark"?: boolean | "true" | undefined; "@light"?: boolean | "true" | undefined; "@hover"?: boolean | "true" | undefined; "@motion"?: boolean | "true" | undefined; "@xsMin"?: boolean | "true" | undefined; "@smMin"?: boolean | "true" | undefined; "@mdMin"?: boolean | "true" | undefined; "@lgMin"?: boolean | "true" | undefined; "@xlMin"?: boolean | "true" | undefined; "@xsMax"?: boolean | "true" | undefined; "@smMax"?: boolean | "true" | undefined; "@mdMax"?: boolean | "true" | undefined; "@lgMax"?: boolean | "true" | undefined; "@xlMax"?: boolean | "true" | undefined; "@safari"?: boolean | "true" | undefined; "@initial"?: boolean | "true" | undefined; } & { [x: string]: boolean | "true" | undefined; }) | undefined; borderWeight: "light" | "normal" | "bold" | "extrabold" | "black" | ({ "@xs"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@sm"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@md"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@lg"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@xl"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@dark"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@light"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@hover"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@motion"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@xsMin"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@smMin"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@mdMin"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@lgMin"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@xlMin"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@xsMax"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@smMax"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@mdMax"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@lgMax"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@xlMax"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@safari"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; "@initial"?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; } & { [x: string]: "light" | "normal" | "bold" | "extrabold" | "black" | undefined; }) | undefined; isKeyboardDismissDisabled: boolean; shouldCloseOnInteractOutside: ((element: HTMLElement) => boolean) | undefined; isOpen: boolean; onClose: () => void; onExited: () => void; onEntered: () => void; triggerProps: import("@react-types/button").AriaButtonProps<"button">; overlayProps: import("@react-types/shared/src/dom").DOMAttributes; positionProps: import("@react-types/shared/src/dom").DOMAttributes; getTriggerProps: (props?: any, _ref?: any) => any; getPopoverProps: (props?: any, css?: any) => any; isPositioned: boolean; }; export declare type UsePopoverReturn = ReturnType;