1 | /// <reference types="react" />
|
2 | import { Boundary as PopperBoundary, Modifiers as PopperModifiers, Placement } from "popper.js";
|
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 | /**
|
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 | }
|