UNPKG

5.77 kBTypeScriptView Raw
1import type { State as PopperState, PositioningStrategy } from "@popperjs/core";
2import * as React from "react";
3import { AbstractPureComponent } from "../../common";
4import type { DefaultPopoverTargetHTMLProps, PopoverSharedProps } from "./popoverSharedProps";
5import type { PopupKind } from "./popupKind";
6export declare const PopoverInteractionKind: {
7 CLICK: "click";
8 CLICK_TARGET_ONLY: "click-target";
9 HOVER: "hover";
10 HOVER_TARGET_ONLY: "hover-target";
11};
12export type PopoverInteractionKind = (typeof PopoverInteractionKind)[keyof typeof PopoverInteractionKind];
13export interface PopoverProps<TProps extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps> extends PopoverSharedProps<TProps> {
14 /**
15 * Whether the popover/tooltip should acquire application focus when it first opens.
16 *
17 * @default true for click interactions, false for hover interactions
18 */
19 autoFocus?: boolean;
20 /** HTML props for the backdrop element. Can be combined with `backdropClassName`. */
21 backdropProps?: React.HTMLProps<HTMLDivElement>;
22 /**
23 * The kind of interaction that triggers the display of the popover.
24 *
25 * @default "click"
26 */
27 interactionKind?: PopoverInteractionKind;
28 /**
29 * The kind of popup displayed by the popover. Gets directly applied to the
30 * `aria-haspopup` attribute of the target element. This property is
31 * ignored if `interactionKind` is {@link PopoverInteractionKind.HOVER_TARGET_ONLY}.
32 *
33 * @default "menu" or undefined
34 */
35 popupKind?: PopupKind;
36 /**
37 * Enables an invisible overlay beneath the popover that captures clicks and
38 * prevents interaction with the rest of the document until the popover is
39 * closed. This prop is only available when `interactionKind` is
40 * `PopoverInteractionKind.CLICK`. When popovers with backdrop are opened,
41 * they become focused.
42 *
43 * @default false
44 */
45 hasBackdrop?: boolean;
46 /**
47 * Whether the application should return focus to the last active element in the
48 * document after this popover closes.
49 *
50 * This is automatically set (overridden) to:
51 * - `false` for hover interaction popovers
52 * - `true` when a popover closes due to an ESC keypress
53 *
54 * If you are attaching a popover _and_ a tooltip to the same target, you must take
55 * care to either disable this prop for the popover _or_ disable the tooltip's
56 * `openOnTargetFocus` prop.
57 *
58 * @default false
59 */
60 shouldReturnFocusOnClose?: boolean;
61 /**
62 * Popper.js positioning strategy.
63 *
64 * @see https://popper.js.org/docs/v2/constructors/#strategy
65 * @default "absolute"
66 */
67 positioningStrategy?: PositioningStrategy;
68}
69export interface PopoverState {
70 hasDarkParent: boolean;
71 isClosingViaEscapeKeypress: boolean;
72 isOpen: boolean;
73}
74/**
75 * Popover component, used to display a floating UI next to and tethered to a target element.
76 *
77 * @template T target element props interface. Consumers wishing to stay in sync with Blueprint's default target HTML
78 * props interface should use the `DefaultPopoverTargetHTMLProps` type (although this is already the default type for
79 * this type param).
80 * @see https://blueprintjs.com/docs/#core/components/popover
81 */
82export declare class Popover<T extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps> extends AbstractPureComponent<PopoverProps<T>, PopoverState> {
83 static displayName: string;
84 static defaultProps: PopoverProps;
85 state: PopoverState;
86 /**
87 * DOM element that contains the popover.
88 * When `usePortal={true}`, this element will be portaled outside the usual DOM flow,
89 * so this reference can be very useful for testing.
90 *
91 * @public for testing
92 */
93 popoverElement: HTMLElement | null;
94 /** Popover ref handler */
95 private popoverRef;
96 /**
97 * Target DOM element ref.
98 *
99 * N.B. this must be a ref object since we pass it to `<ResizeSensor>`, which needs to know about the target
100 * DOM element in order to observe its dimensions.
101 *
102 * @public for testing
103 */
104 targetRef: React.RefObject<HTMLElement>;
105 /**
106 * Overlay2 transition container element ref.
107 */
108 private transitionContainerElement;
109 private cancelOpenTimeout?;
110 private isMouseInTargetOrPopover;
111 private lostFocusOnSamePage;
112 private popperScheduleUpdate?;
113 private isControlled;
114 private isArrowEnabled;
115 private isHoverInteractionKind;
116 private getPopoverElement;
117 private getIsOpen;
118 render(): React.JSX.Element | null;
119 componentDidMount(): void;
120 componentDidUpdate(props: PopoverProps<T>, state: PopoverState): void;
121 protected validateProps(props: PopoverProps<T>): void;
122 /**
123 * Instance method to instruct the `Popover` to recompute its position.
124 *
125 * This method should only be used if you are updating the target in a way
126 * that does not cause it to re-render, such as changing its _position_
127 * without changing its _size_ (since `Popover` already repositions when it
128 * detects a resize).
129 */
130 reposition: () => Promise<Partial<PopperState> | null> | undefined;
131 private renderTarget;
132 private renderPopover;
133 private getPopperModifiers;
134 private handleTargetFocus;
135 private handleTargetBlur;
136 private handleTargetContextMenu;
137 private handleMouseEnter;
138 private handleMouseLeave;
139 private handlePopoverClick;
140 private handleOverlayClose;
141 private handleKeyDown;
142 private handleTargetClick;
143 private isSimulatedButtonClick;
144 private setOpenState;
145 private updateDarkParent;
146 private isElementInPopover;
147 private getIsContentEmpty;
148}