1 | import { Placement, Boundary as PopperBoundary, Modifiers as PopperModifiers } from "popper.js";
|
2 | import * as React from "react";
|
3 | import { Props } from "../../common/props";
|
4 | import { OverlayableProps } from "../overlay/overlay";
|
5 | export { PopperBoundary, PopperModifiers };
|
6 | /** `Position` with `"auto"` values, used by `Popover` and `Tooltip`. */
|
7 | export declare const PopoverPosition: {
|
8 | AUTO: "auto";
|
9 | AUTO_END: "auto-end";
|
10 | AUTO_START: "auto-start";
|
11 | BOTTOM: "bottom";
|
12 | BOTTOM_LEFT: "bottom-left";
|
13 | BOTTOM_RIGHT: "bottom-right";
|
14 | LEFT: "left";
|
15 | LEFT_BOTTOM: "left-bottom";
|
16 | LEFT_TOP: "left-top";
|
17 | RIGHT: "right";
|
18 | RIGHT_BOTTOM: "right-bottom";
|
19 | RIGHT_TOP: "right-top";
|
20 | TOP: "top";
|
21 | TOP_LEFT: "top-left";
|
22 | TOP_RIGHT: "top-right";
|
23 | };
|
24 | export declare type PopoverPosition = (typeof PopoverPosition)[keyof typeof PopoverPosition];
|
25 | /** Props shared between `Popover` and `Tooltip`. */
|
26 | export interface IPopoverSharedProps extends OverlayableProps, Props {
|
27 | children?: React.ReactNode;
|
28 | /**
|
29 | * Determines the boundary element used by Popper for its `flip` and
|
30 | * `preventOverflow` modifiers. Three shorthand keywords are supported;
|
31 | * Popper will find the correct DOM element itself.
|
32 | *
|
33 | * @default "scrollParent"
|
34 | */
|
35 | boundary?: PopperBoundary;
|
36 | /**
|
37 | * When enabled, clicks inside a `Classes.POPOVER_DISMISS` element
|
38 | * will only close the current popover and not outer popovers.
|
39 | * When disabled, the current popover and any ancestor popovers will be closed.
|
40 | *
|
41 | * @see http://blueprintjs.com/docs/#core/components/popover.closing-on-click
|
42 | * @default false
|
43 | */
|
44 | captureDismiss?: boolean;
|
45 | /**
|
46 | * Initial opened state when uncontrolled.
|
47 | *
|
48 | * @default false
|
49 | */
|
50 | defaultIsOpen?: boolean;
|
51 | /**
|
52 | * Prevents the popover from appearing when `true`.
|
53 | *
|
54 | * @default false
|
55 | */
|
56 | disabled?: boolean;
|
57 | /**
|
58 | * The amount of time in milliseconds the popover should remain open after
|
59 | * the user hovers off the trigger. The timer is canceled if the user mouses
|
60 | * over the target before it expires.
|
61 | *
|
62 | * @default 300
|
63 | */
|
64 | hoverCloseDelay?: number;
|
65 | /**
|
66 | * The amount of time in milliseconds the popover should wait before opening
|
67 | * after the user hovers over the trigger. The timer is canceled if the user
|
68 | * mouses away from the target before it expires.
|
69 | *
|
70 | * @default 150
|
71 | */
|
72 | hoverOpenDelay?: number;
|
73 | /**
|
74 | * Whether a popover that uses a `Portal` should automatically inherit the
|
75 | * dark theme from its parent.
|
76 | *
|
77 | * @default true
|
78 | */
|
79 | inheritDarkTheme?: boolean;
|
80 | /**
|
81 | * Whether the popover is visible. Passing this prop puts the popover in
|
82 | * controlled mode, where the only way to change visibility is by updating
|
83 | * this property. If `disabled={true}`, this prop will be ignored, and the
|
84 | * popover will remain closed.
|
85 | *
|
86 | * @default undefined
|
87 | */
|
88 | isOpen?: boolean;
|
89 | /**
|
90 | * Whether to apply minimal styling to this popover or tooltip. Minimal popovers
|
91 | * do not have an arrow pointing to their target and use a subtler animation.
|
92 | *
|
93 | * @default false
|
94 | */
|
95 | minimal?: boolean;
|
96 | /**
|
97 | * Popper modifier options, passed directly to internal Popper instance. See
|
98 | * https://popper.js.org/docs/modifiers/ for complete
|
99 | * details.
|
100 | */
|
101 | modifiers?: PopperModifiers;
|
102 | /**
|
103 | * Callback invoked in controlled mode when the popover open state *would*
|
104 | * change due to user interaction.
|
105 | */
|
106 | onInteraction?: (nextOpenState: boolean, e?: React.SyntheticEvent<HTMLElement>) => void;
|
107 | /**
|
108 | * Whether the popover should open when its target is focused. If `true`,
|
109 | * target will render with `tabindex="0"` to make it focusable via keyboard
|
110 | * navigation.
|
111 | *
|
112 | * Note that this functionality is only enabled for hover interaction
|
113 | * popovers/tooltips.
|
114 | *
|
115 | * @default true
|
116 | */
|
117 | openOnTargetFocus?: boolean;
|
118 | /**
|
119 | * The placement (relative to the target) at which the popover should appear.
|
120 | * Mutually exclusive with `position` prop.
|
121 | *
|
122 | * The default value of `"auto"` will choose the best placement when opened
|
123 | * and will allow the popover to reposition itself to remain onscreen as the
|
124 | * user scrolls around.
|
125 | *
|
126 | * @see https://popper.js.org/docs/v1/#Popper.placements
|
127 | * @default "auto"
|
128 | */
|
129 | placement?: Placement;
|
130 | /**
|
131 | * A space-delimited string of class names applied to the popover element.
|
132 | */
|
133 | popoverClassName?: string;
|
134 | /**
|
135 | * The position (relative to the target) at which the popover should appear.
|
136 | * Mutually exclusive with `placement` prop.
|
137 | *
|
138 | * The default value of `"auto"` will choose the best position when opened
|
139 | * and will allow the popover to reposition itself to remain onscreen as the
|
140 | * user scrolls around.
|
141 | *
|
142 | * @default "auto"
|
143 | */
|
144 | position?: PopoverPosition;
|
145 | /**
|
146 | * Space-delimited string of class names applied to the target element.
|
147 | */
|
148 | targetClassName?: string;
|
149 | /**
|
150 | * HTML props to spread to target element. Use `targetTagName` to change
|
151 | * the type of element rendered. Note that `ref` is not supported.
|
152 | */
|
153 | targetProps?: React.HTMLAttributes<HTMLElement>;
|
154 | /**
|
155 | * HTML tag name for the target element. This must be an HTML element to
|
156 | * ensure that it supports the necessary DOM event handlers.
|
157 | *
|
158 | * By default, a `<span>` tag is used so popovers appear as inline-block
|
159 | * elements and can be nested in text. Use `<div>` tag for a block element.
|
160 | *
|
161 | * @default "span"
|
162 | */
|
163 | targetTagName?: keyof JSX.IntrinsicElements;
|
164 | /**
|
165 | * Whether the popover should be rendered inside a `Portal` attached to
|
166 | * `portalContainer` prop.
|
167 | *
|
168 | * Rendering content inside a `Portal` allows the popover content to escape
|
169 | * the physical bounds of its parent while still being positioned correctly
|
170 | * relative to its target. Using a `Portal` is necessary if any ancestor of
|
171 | * the target hides overflow or uses very complex positioning.
|
172 | *
|
173 | * Not using a `Portal` can result in smoother performance when scrolling
|
174 | * and allows the popover content to inherit CSS styles from surrounding
|
175 | * elements, but it remains subject to the overflow bounds of its ancestors.
|
176 | *
|
177 | * @default true
|
178 | */
|
179 | usePortal?: boolean;
|
180 | /**
|
181 | * HTML tag name for the wrapper element, which also receives the
|
182 | * `className` prop.
|
183 | *
|
184 | * @default "span"
|
185 | */
|
186 | wrapperTagName?: keyof JSX.IntrinsicElements;
|
187 | }
|