import { PopoverTrigger } from './PopoverTrigger'; import { ComponentPropsWithoutRef } from 'react'; import { Placement } from '@floating-ui/react'; import { DisableCloseOnEscapeOrClickProps } from '../../types'; import { OpenCloseTransitionStateEffects } from '../../internal/hooks'; /** * Props for the Popover component * @property {ReactNode} [children] - The content to be rendered inside the popover * @property {string} [id] - Unique identifier for the popover * @property {boolean} [modal] - Whether the popover should be modal (traps focus) * @property {boolean} [openOnHover] - Changes interaction to use hover instead of click * @property {boolean} [fillAvailableHeight] - Changes height and positioning for select/combobox * @property {number | string} [maxHeight] - Maximum height of the popover content * @property {boolean} [fitScreen] - Whether the popover should fit within the screen bounds * @property {number | string} [minHeight] - Minimum height of the popover content * @property {boolean} [matchReferenceWidth] - Whether the popover width should match the trigger element * @property {boolean} [fixedWidth] - Whether the popover should have a fixed width * @property {string} [placement] - Placement of the popover relative to the trigger * @property {boolean} [open] - Controlled open state * @property {boolean} [defaultOpen] - Default open state for uncontrolled mode * @property {Function} [onOpenChange] - Callback when open state changes * @property {Function} [onClickOutside] - Callback when clicking outside the popover * @property {Function} [onClose] - Fires when the floating element is requested to be closed * @property {boolean} [disableCaret] - Whether to disable the caret/arrow indicator * @property {boolean} [noPadding] - Whether to remove default padding from content * @property {boolean} [disableAutoUpdate] - Whether to disable automatic position updates * @property {boolean} [disableTriggerFocus] - Whether to disable focus on the trigger element * @property {number} [delay] - Delay before opening the popover (for hover mode) * @property {boolean} [disableCloseOnClickOutside] - Whether to disable closing on outside click * @property {boolean} [disableCloseOnEscape] - Whether to disable closing on escape key */ /** * Props for the Popover component * @extends ComponentPropsWithoutRef<"div"> * @extends DisableCloseOnEscapeOrClickProps */ export type PopoverProps = { /** * The content to be rendered inside the popover */ children?: ComponentPropsWithoutRef<"div">["children"]; /** * Unique identifier for the popover */ id?: ComponentPropsWithoutRef<"div">["id"]; /** * Whether the popover should be modal (traps focus) * @default false */ modal?: boolean; /** * Disables the shift of floating element * @internal */ disableShift?: boolean; /** * Disables the flip of floating element * @internal */ disableFlip?: boolean; /** * Disables the flip cross-axis fallback of floating element * @internal */ disableFlipFallback?: boolean; /** * Changes interaction to use hover instead of click * @default false */ openOnHover?: boolean; /** * Changes height and positioning for select/combobox * @default false */ fillAvailableHeight?: boolean; /** * Maximum height of the popover content */ maxHeight?: number | string; /** * Whether the popover should fit within the screen bounds * @default false */ fitScreen?: boolean; /** * Minimum height of the popover content * @default "2.875rem" */ minHeight?: number | string; /** * Whether the popover width should match the trigger element * @default false */ matchReferenceWidth?: boolean; /** * Whether the popover should have a fixed width * @default false */ fixedWidth?: boolean; /** * Placement of the popover relative to the trigger * @default "bottom" */ placement?: Placement; /** * Controlled open state */ open?: boolean; /** * Default open state for uncontrolled mode * @default false */ defaultOpen?: boolean; /** * Callback when clicking outside the popover */ onClickOutside?: (e: globalThis.MouseEvent) => void; /** * Fires when the floating element is requested to be closed * Note: this does not fire when openOnHover is true and mouse leaves to close * eg. on click outside, [esc] to close, or by */ onClose?: () => void; /** * Whether to disable the caret/arrow indicator * @default false */ disableCaret?: boolean; /** * Whether to remove default padding from content * @default false */ noPadding?: boolean; /** * Whether to disable automatic position updates * @default false */ disableAutoUpdate?: boolean; /** * Whether to disable focus on the trigger element * @default false */ disableTriggerFocus?: boolean; /** * Delay before opening the popover (for hover mode) * @default 100 */ delay?: number; } & DisableCloseOnEscapeOrClickProps & OpenCloseTransitionStateEffects; /** * Popover component for displaying floating content relative to a trigger element. * * Features: * - Supports both controlled and uncontrolled modes * - Automatic positioning with fallback strategies * - Hover and click interaction modes * - Modal and non-modal variants * - Custom trigger elements * - Automatic height and width management * - Screen boundary detection and fitting * - Keyboard navigation and accessibility * - Outside click detection and handling * - Focus management and trapping * - Arrow/caret indicators * - Delay support for hover interactions * - Automatic tracking ID generation for analytics * * @example * * Click to open * *

This is the popover content

* Close *
*
* * @example * * Hover to open * Tooltip content * * * @example * * * {(props) => } * * * * Done * * */ export declare const Popover: import('react').ForwardRefExoticComponent<{ /** * The content to be rendered inside the popover */ children?: ComponentPropsWithoutRef<"div">["children"]; /** * Unique identifier for the popover */ id?: ComponentPropsWithoutRef<"div">["id"]; /** * Whether the popover should be modal (traps focus) * @default false */ modal?: boolean; /** * Disables the shift of floating element * @internal */ disableShift?: boolean; /** * Disables the flip of floating element * @internal */ disableFlip?: boolean; /** * Disables the flip cross-axis fallback of floating element * @internal */ disableFlipFallback?: boolean; /** * Changes interaction to use hover instead of click * @default false */ openOnHover?: boolean; /** * Changes height and positioning for select/combobox * @default false */ fillAvailableHeight?: boolean; /** * Maximum height of the popover content */ maxHeight?: number | string; /** * Whether the popover should fit within the screen bounds * @default false */ fitScreen?: boolean; /** * Minimum height of the popover content * @default "2.875rem" */ minHeight?: number | string; /** * Whether the popover width should match the trigger element * @default false */ matchReferenceWidth?: boolean; /** * Whether the popover should have a fixed width * @default false */ fixedWidth?: boolean; /** * Placement of the popover relative to the trigger * @default "bottom" */ placement?: Placement; /** * Controlled open state */ open?: boolean; /** * Default open state for uncontrolled mode * @default false */ defaultOpen?: boolean; /** * Callback when clicking outside the popover */ onClickOutside?: (e: globalThis.MouseEvent) => void; /** * Fires when the floating element is requested to be closed * Note: this does not fire when openOnHover is true and mouse leaves to close * eg. on click outside, [esc] to close, or by */ onClose?: () => void; /** * Whether to disable the caret/arrow indicator * @default false */ disableCaret?: boolean; /** * Whether to remove default padding from content * @default false */ noPadding?: boolean; /** * Whether to disable automatic position updates * @default false */ disableAutoUpdate?: boolean; /** * Whether to disable focus on the trigger element * @default false */ disableTriggerFocus?: boolean; /** * Delay before opening the popover (for hover mode) * @default 100 */ delay?: number; } & DisableCloseOnEscapeOrClickProps & OpenCloseTransitionStateEffects & import('react').RefAttributes> & { /** * PopoverTrigger component for creating custom trigger elements. * * Features: * - Supports custom trigger elements via render prop pattern * - Automatic focus management and keyboard interaction * - Hover and click event handling * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details) * - Context integration with parent popover * - Automatic tracking ID generation for analytics * * @example * * {(props) => ( * * )} * */ Trigger: typeof PopoverTrigger; /** * PopoverContent component for the main popover content area. * * Features: * - Automatic positioning and sizing based on trigger * - Screen boundary detection and fitting * - Scroll handling with custom scroller reference * - Focus management and keyboard navigation * - Hover interaction support for tooltip mode * - Escape key handling for closing * - Tab key trapping for modal popovers * - Arrow/caret indicator with automatic positioning * - Context integration with parent popover * - Accessibility support with proper ARIA roles * * @example * *

This is the popover content

* Close *
*/ Content: import('react').ForwardRefExoticComponent, HTMLDivElement>, "ref">, "popover"> & { scrollerRef?: import('react').RefObject; hideWhileClosed?: boolean; } & import('react').RefAttributes>; /** * PopoverClose component for closing the popover. * * Features: * - Automatic popover closing on click * - Supports all Button component props and styling * - Controlled and uncontrolled mode support * - Context integration with parent popover * - Accessibility support with proper button semantics * - Delayed closing for controlled mode * - Automatic tracking ID generation for analytics * * @example * Close */ Close: import('react').ForwardRefExoticComponent>; /** * PopoverButton component for creating button-style triggers. * * Features: * - Button styling and behavior with all Button props * - Automatic popover opening on click * - Hover interaction support for tooltip mode * - Focus management and keyboard navigation * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details) * - Context integration with parent popover * - Event handling for mouse, keyboard, and focus events * - Automatic tracking ID generation for analytics * * @example * Click to open */ Button: import('react').ForwardRefExoticComponent>; };