UNPKG

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