import type * as React from 'react'; import type { Override } from '../helpers/overrides'; import type { TetherPlacement } from '../layer'; import type { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants'; export type { PopperDataObject, PopperOffset, PopperOptions } from '../layer'; export declare type PopoverPlacement = TetherPlacement; export declare type TriggerType = keyof typeof TRIGGER_TYPE; export declare type AccessibilityType = keyof typeof ACCESSIBILITY_TYPE; export declare type State = { isOpen: boolean; }; export declare type StateChangeType = keyof typeof STATE_CHANGE_TYPE; export declare type StateReducer = (stateChangeType: StateChangeType, nextState: State, currentState: State) => State; export declare type ContentRenderProp = () => React.ReactNode; export declare type StatefulContentRenderProp = (a: { close: () => void; }) => React.ReactNode; export declare type PopoverOverrides = { Body?: Override; Arrow?: Override; Inner?: Override; }; export declare type Child = React.ReactNode; export declare type Children = Array | Child; export declare type BasePopoverProps = { /** Controls how this popover behaves for screen readers and other assistive devices. * See the A11Y section at the bottom of this document for more details. */ accessibilityType?: AccessibilityType; /** How long should be fade out animation in ms, default 0ms */ animateOutTime?: number; /** If true, focus will shift to the first interactive element within the popover. * If false, the popover container itself will receive focus. * Moving focus into a newly opened popover is important for accessibility purposes, so please be careful! */ autoFocus?: boolean; /** If true, focus will be locked to elements within the popover. */ focusLock?: boolean; 'data-baseweb'?: string; id?: string; /** If true, popover element will not avoid element boundaries. */ ignoreBoundary?: boolean; /** Where to mount the popover */ mountNode?: HTMLElement; /** Handler for blur events on trigger element. */ onBlur?: (e: React.FocusEvent) => unknown; /** Handler for click events on trigger element. */ onClick?: (e: React.SyntheticEvent) => unknown; /** Handler for 'Esc' keypress events */ onFocus?: (e: React.FocusEvent) => unknown; /** Pass FocusOptions for focusing (used as `HtmlElement.focus(focusOptions)`) */ focusOptions?: FocusOptions; /** Handler for mouseenter events on trigger element. */ onMouseEnter?: (e: React.MouseEvent) => unknown; /** Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType `hover`). */ onMouseEnterDelay?: number; /** Handler for mouseleave events on trigger element. */ onMouseLeave?: (e: React.MouseEvent) => unknown; /** Number of milliseconds to wait before showing the popover after mouse leaves the trigger element (for triggerType `hover`). */ onMouseLeaveDelay?: number; overrides?: PopoverOverrides; /** How to position the popover relative to the target. */ placement?: TetherPlacement; /** Popper options override * https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md */ popperOptions?: any; /** Renders all popover content for SEO purposes regardless of popover isOpen state */ renderAll?: boolean; /** If true, focus will shift back to the original element that triggered the popover * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close! */ returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions); /** Whether or not to show the arrow pointing from the popover to the trigger. */ showArrow?: boolean; /** Whether to toggle the popover when trigger is clicked or hovered. */ triggerType?: TriggerType; /** Margin of the popover */ popoverMargin?: number; /** Reposition popover whenever dimension of popup content or targetElement changes **/ repositionOnResize?: boolean; }; export declare type PopoverProps = BasePopoverProps & { /** Content that should trigger the popover to be shown (also acts as the anchor against * which the popover will be positioned). */ children: React.ReactNode; /** Content to render within the popover when it's shown. */ content: React.ReactNode | ContentRenderProp; /** Whether or not to show the popover. */ isOpen: boolean; /** Handler for clicks outside the anchor/popover elements. */ onClickOutside?: (event: MouseEvent) => unknown; /** Handler for click events on trigger element. */ onEsc?: () => unknown; }; export declare type StatefulPopoverProps = BasePopoverProps & { /** Content that should trigger the popover to be shown (also acts as the anchor against * which the popover will be positioned). */ children: React.ReactNode; /** Content to render within the popover when it's shown. */ content: React.ReactNode | StatefulContentRenderProp; /** Whether to hide the popover when the user clicks anywhere outside the trigger/popover. */ dismissOnClickOutside?: boolean; /** Whether to hide the popover when the user presses the escape key. */ dismissOnEsc?: boolean; /** Initial state populated into the component */ initialState?: State; /** Event handler when popover is hidden. */ onClose?: () => unknown; /** Event handler when popover is shown. */ onOpen?: () => unknown; /** Reducer function to manipulate internal state updates. */ stateReducer?: StateReducer; }; export declare type StatefulPopoverContainerProps = Omit & { children: (props: Omit) => React.ReactNode; }; export declare type PopoverPropsWithoutChildren = Omit; export declare type Offset = { top: number; left: number; }; export declare type PopoverPrivateState = { isAnimating: boolean; arrowOffset: Offset; popoverOffset: Offset; placement: TetherPlacement; isLayerMounted: boolean; isMounted: boolean; autoFocusAfterPositioning: boolean; }; export declare type ArrowStylePropsArg = { $arrowOffset: Offset; $placement: TetherPlacement; }; export declare type BodyStylePropsArg = { $animationDuration: number; $isAnimating: boolean; $isHoverTrigger: boolean; $isOpen: boolean; $popoverOffset: Offset; $placement: TetherPlacement; $showArrow: boolean; $popoverMargin: number; }; export declare type InnerStylePropsArg = {}; export declare type SharedStylePropsArg = {} & ArrowStylePropsArg & BodyStylePropsArg; export declare type AnchorProps = { 'aria-controls'?: string | null; 'aria-describedby'?: string | null; 'aria-expanded'?: boolean; 'aria-haspopup'?: boolean; 'aria-owns'?: string | null; id?: string | null; onBlur?: (e: React.FocusEvent) => unknown; onClick?: (e: React.MouseEvent) => unknown; onFocus?: (e: React.FocusEvent) => unknown; onMouseEnter?: (e: React.MouseEvent) => unknown; onMouseLeave?: (e: React.MouseEvent) => unknown; ref?: React.Ref; tabIndex?: number; };