1 | import type { State as PopperState, PositioningStrategy } from "@popperjs/core";
|
2 | import * as React from "react";
|
3 | import { AbstractPureComponent } from "../../common";
|
4 | import type { DefaultPopoverTargetHTMLProps, PopoverSharedProps } from "./popoverSharedProps";
|
5 | import type { PopupKind } from "./popupKind";
|
6 | export declare const PopoverInteractionKind: {
|
7 | CLICK: "click";
|
8 | CLICK_TARGET_ONLY: "click-target";
|
9 | HOVER: "hover";
|
10 | HOVER_TARGET_ONLY: "hover-target";
|
11 | };
|
12 | export type PopoverInteractionKind = (typeof PopoverInteractionKind)[keyof typeof PopoverInteractionKind];
|
13 | export 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 | }
|
69 | export 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 | */
|
82 | export 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 | }
|