UNPKG

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