1 | import { State as PopperState, PositioningStrategy } from "@popperjs/core";
|
2 | import * as React from "react";
|
3 | import { AbstractPureComponent } from "../../common";
|
4 | import { DefaultPopoverTargetHTMLProps, PopoverSharedProps } from "./popoverSharedProps";
|
5 | import { 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 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 | }
|
73 | export 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 | */
|
85 | export 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 | }
|