UNPKG

6.62 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent2 } from "../../common";
3import { Props } from "../../common/props";
4export declare type OverlayableProps = IOverlayableProps;
5/** @deprecated use OverlayableProps */
6export interface IOverlayableProps extends IOverlayLifecycleProps {
7 /**
8 * Whether the overlay should acquire application focus when it first opens.
9 *
10 * @default true
11 */
12 autoFocus?: boolean;
13 /**
14 * Whether pressing the `esc` key should invoke `onClose`.
15 *
16 * @default true
17 */
18 canEscapeKeyClose?: boolean;
19 /**
20 * Whether the overlay should prevent focus from leaving itself. That is, if the user attempts
21 * to focus an element outside the overlay and this prop is enabled, then the overlay will
22 * immediately bring focus back to itself. If you are nesting overlay components, either disable
23 * this prop on the "outermost" overlays or mark the nested ones `usePortal={false}`.
24 *
25 * @default true
26 */
27 enforceFocus?: boolean;
28 /**
29 * If `true` and `usePortal={true}`, the `Portal` containing the children is created and attached
30 * to the DOM when the overlay is opened for the first time; otherwise this happens when the
31 * component mounts. Lazy mounting provides noticeable performance improvements if you have lots
32 * of overlays at once, such as on each row of a table.
33 *
34 * @default true
35 */
36 lazy?: boolean;
37 /**
38 * Indicates how long (in milliseconds) the overlay's enter/leave transition takes.
39 * This is used by React `CSSTransition` to know when a transition completes and must match
40 * the duration of the animation in CSS. Only set this prop if you override Blueprint's default
41 * transitions with new transitions of a different length.
42 *
43 * @default 300
44 */
45 transitionDuration?: number;
46 /**
47 * Whether the overlay should be wrapped in a `Portal`, which renders its contents in a new
48 * element attached to `portalContainer` prop.
49 *
50 * This prop essentially determines which element is covered by the backdrop: if `false`,
51 * then only its parent is covered; otherwise, the entire page is covered (because the parent
52 * of the `Portal` is the `<body>` itself).
53 *
54 * Set this prop to `false` on nested overlays (such as `Dialog` or `Popover`) to ensure that they
55 * are rendered above their parents.
56 *
57 * @default true
58 */
59 usePortal?: boolean;
60 /**
61 * Space-delimited string of class names applied to the `Portal` element if
62 * `usePortal={true}`.
63 */
64 portalClassName?: string;
65 /**
66 * The container element into which the overlay renders its contents, when `usePortal` is `true`.
67 * This prop is ignored if `usePortal` is `false`.
68 *
69 * @default document.body
70 */
71 portalContainer?: HTMLElement;
72 /**
73 * A callback that is invoked when user interaction causes the overlay to close, such as
74 * clicking on the overlay or pressing the `esc` key (if enabled).
75 *
76 * Receives the event from the user's interaction, if there was an event (generally either a
77 * mouse or key event). Note that, since this component is controlled by the `isOpen` prop, it
78 * will not actually close itself until that prop becomes `false`.
79 */
80 onClose?: (event: React.SyntheticEvent<HTMLElement>) => void;
81}
82export declare type OverlayLifecycleProps = IOverlayLifecycleProps;
83export interface IOverlayLifecycleProps {
84 /**
85 * Lifecycle method invoked just before the CSS _close_ transition begins on
86 * a child. Receives the DOM element of the child being closed.
87 */
88 onClosing?: (node: HTMLElement) => void;
89 /**
90 * Lifecycle method invoked just after the CSS _close_ transition ends but
91 * before the child has been removed from the DOM. Receives the DOM element
92 * of the child being closed.
93 */
94 onClosed?: (node: HTMLElement) => void;
95 /**
96 * Lifecycle method invoked just after mounting the child in the DOM but
97 * just before the CSS _open_ transition begins. Receives the DOM element of
98 * the child being opened.
99 */
100 onOpening?: (node: HTMLElement) => void;
101 /**
102 * Lifecycle method invoked just after the CSS _open_ transition ends.
103 * Receives the DOM element of the child being opened.
104 */
105 onOpened?: (node: HTMLElement) => void;
106}
107export declare type BackdropProps = IBackdropProps;
108export interface IBackdropProps {
109 /** CSS class names to apply to backdrop element. */
110 backdropClassName?: string;
111 /** HTML props for the backdrop element. */
112 backdropProps?: React.HTMLProps<HTMLDivElement>;
113 /**
114 * Whether clicking outside the overlay element (either on backdrop when present or on document)
115 * should invoke `onClose`.
116 *
117 * @default true
118 */
119 canOutsideClickClose?: boolean;
120 /**
121 * Whether a container-spanning backdrop element should be rendered behind the contents.
122 *
123 * @default true
124 */
125 hasBackdrop?: boolean;
126}
127export declare type OverlayProps = IOverlayProps;
128/** @deprecated use OverlayProps */
129export interface IOverlayProps extends OverlayableProps, IBackdropProps, Props {
130 /**
131 * Toggles the visibility of the overlay and its children.
132 * This prop is required because the component is controlled.
133 */
134 isOpen: boolean;
135 /**
136 * Name of the transition for internal `CSSTransition`.
137 * Providing your own name here will require defining new CSS transition properties.
138 *
139 * @default Classes.OVERLAY
140 */
141 transitionName?: string;
142}
143export interface IOverlayState {
144 hasEverOpened?: boolean;
145}
146export declare class Overlay extends AbstractPureComponent2<OverlayProps, IOverlayState> {
147 static displayName: string;
148 static defaultProps: OverlayProps;
149 static getDerivedStateFromProps({ isOpen: hasEverOpened }: OverlayProps): {
150 hasEverOpened: true;
151 } | null;
152 private static openStack;
153 private static getLastOpened;
154 state: IOverlayState;
155 containerElement: HTMLElement | null;
156 private refHandlers;
157 render(): JSX.Element | null;
158 componentDidMount(): void;
159 componentDidUpdate(prevProps: OverlayProps): void;
160 componentWillUnmount(): void;
161 private maybeRenderChild;
162 private maybeRenderBackdrop;
163 private overlayWillClose;
164 private overlayWillOpen;
165 private handleBackdropMouseDown;
166 private handleDocumentClick;
167 private handleDocumentFocus;
168 private handleKeyDown;
169 private handleTransitionAddEnd;
170}