1 | /**
|
2 | * @reach/dialog v0.18.0
|
3 | *
|
4 | * Copyright (c) 2018-2022, React Training LLC
|
5 | *
|
6 | * This source code is licensed under the MIT license found in the
|
7 | * LICENSE.md file in the root directory of this source tree.
|
8 | *
|
9 | * @license MIT
|
10 | */
|
11 |
|
12 | import * as React from 'react';
|
13 | import { PortalProps } from '@reach/portal';
|
14 | import * as Polymorphic from '@reach/polymorphic';
|
15 |
|
16 | /**
|
17 | * Welcome to @reach/dialog!
|
18 | *
|
19 | * An accessible dialog or "modal" window.
|
20 | *
|
21 | * @see Docs https://reach.tech/dialog
|
22 | * @see Source https://github.com/reach/reach-ui/tree/main/packages/dialog
|
23 | * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal
|
24 | */
|
25 |
|
26 | /**
|
27 | * DialogWrapper
|
28 | *
|
29 | * Low-level component if you need direct access to the portaled dialog wrapper.
|
30 | *
|
31 | * Note: You must render a `DialogInner` inside.
|
32 | */
|
33 | declare function DialogWrapper({ isOpen, children, ...props }: DialogWrapperProps): JSX.Element;
|
34 | declare namespace DialogWrapper {
|
35 | var displayName: string;
|
36 | }
|
37 | interface DialogWrapperProps extends PortalProps {
|
38 | /**
|
39 | * Controls whether or not the dialog is open.
|
40 | */
|
41 | isOpen?: boolean;
|
42 | }
|
43 | /**
|
44 | * DialogInner
|
45 | *
|
46 | * Low-level component if you need direct access to the portaled dialog wrapper.
|
47 | *
|
48 | * Note: Must be rendered inside of a `DialogWrapper`.
|
49 | *
|
50 | * @see Docs https://reach.tech/dialog#dialoginner
|
51 | */
|
52 | declare const DialogInner: Polymorphic.ForwardRefComponent<"div", DialogOverlayProps>;
|
53 | /**
|
54 | * DialogOverlay
|
55 | *
|
56 | * Low-level component if you need more control over the styles or rendering of
|
57 | * the dialog overlay.
|
58 | *
|
59 | * Note: You must render a `DialogContent` inside.
|
60 | *
|
61 | * @see Docs https://reach.tech/dialog#dialogoverlay
|
62 | */
|
63 | declare const DialogOverlay: Polymorphic.ForwardRefComponent<"div", DialogOverlayProps>;
|
64 | interface DialogOverlayProps extends DialogProps {
|
65 | /**
|
66 | * By default the dialog locks the focus inside it. Normally this is what you
|
67 | * want. This prop is provided so that this feature can be disabled. This,
|
68 | * however, is strongly discouraged.
|
69 | *
|
70 | * The reason it is provided is not to disable the focus lock entirely.
|
71 | * Rather, there are certain situations where you may need more control on how
|
72 | * the focus lock works. This should be complemented by setting up a focus
|
73 | * lock yourself that would allow more flexibility for your specific use case.
|
74 | *
|
75 | * If you do set this prop to `true`, make sure you set up your own
|
76 | * `FocusLock` component. You can likely use
|
77 | * `react-focus-lock`, which is what Reach uses internally by default. It has
|
78 | * various settings to allow more customization, but it takes care of a lot of
|
79 | * hard work that you probably don't want or need to do.
|
80 | *
|
81 | * @see Docs https://reach.tech/dialog#dialogoverlay-dangerouslybypassfocuslock
|
82 | * @see https://github.com/theKashey/react-focus-lock
|
83 | * @see https://github.com/reach/reach-ui/issues/615
|
84 | */
|
85 | dangerouslyBypassFocusLock?: boolean;
|
86 | /**
|
87 | * By default the dialog locks scrolling with `react-remove-scroll`, which
|
88 | * also injects some styles on the body element to remove the scrollbar while
|
89 | * maintaining its gap to prevent jank when the dialog's open state is
|
90 | * toggled. This is almost always what you want in a dialog, but in some cases
|
91 | * you may have the need to customize this behavior further.
|
92 | *
|
93 | * This prop will disable `react-remove-scroll` and allow you to compose your
|
94 | * own scroll lock component to meet your needs. Like the
|
95 | * `dangerouslyBypassFocusLock` prop, this is generally discouraged and should
|
96 | * only be used if a proper fallback for managing scroll behavior is provided.
|
97 | *
|
98 | * @see Docs https://reach.tech/dialog#dialogoverlay-dangerouslybypassscrolllock
|
99 | * @see https://github.com/theKashey/react-remove-scroll
|
100 | */
|
101 | dangerouslyBypassScrollLock?: boolean;
|
102 | }
|
103 | /**
|
104 | * DialogContent
|
105 | *
|
106 | * Low-level component if you need more control over the styles or rendering of
|
107 | * the dialog content.
|
108 | *
|
109 | * Note: Must be a child of `DialogOverlay`.
|
110 | *
|
111 | * Note: You only need to use this when you are also styling `DialogOverlay`,
|
112 | * otherwise you can use the high-level `Dialog` component and pass the props
|
113 | * to it. Any props passed to `Dialog` component (besides `isOpen` and
|
114 | * `onDismiss`) will be spread onto `DialogContent`.
|
115 | *
|
116 | * @see Docs https://reach.tech/dialog#dialogcontent
|
117 | */
|
118 | declare const DialogContent: Polymorphic.ForwardRefComponent<"div", DialogContentProps>;
|
119 | /**
|
120 | * @see Docs https://reach.tech/dialog#dialogcontent-props
|
121 | */
|
122 | interface DialogContentProps {
|
123 | /**
|
124 | * Accepts any renderable content.
|
125 | *
|
126 | * @see Docs https://reach.tech/dialog#dialogcontent-children
|
127 | */
|
128 | children?: React.ReactNode;
|
129 | }
|
130 | /**
|
131 | * Dialog
|
132 | *
|
133 | * High-level component to render a modal dialog window over the top of the page
|
134 | * (or another dialog).
|
135 | *
|
136 | * @see Docs https://reach.tech/dialog#dialog
|
137 | */
|
138 | declare const Dialog: Polymorphic.ForwardRefComponent<"div", DialogProps>;
|
139 | /**
|
140 | * @see Docs https://reach.tech/dialog#dialog-props
|
141 | */
|
142 | interface DialogProps {
|
143 | /**
|
144 | * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
|
145 | * Defaults to `false`.
|
146 | *
|
147 | * @see Docs https://reach.tech/dialog#dialog-allowpinchzoom
|
148 | */
|
149 | allowPinchZoom?: boolean;
|
150 | /**
|
151 | * Accepts any renderable content.
|
152 | *
|
153 | * @see Docs https://reach.tech/dialog#dialog-children
|
154 | */
|
155 | children?: React.ReactNode;
|
156 | /**
|
157 | * By default the first focusable element will receive focus when the dialog
|
158 | * opens but you can provide a ref to focus instead.
|
159 | *
|
160 | * @see Docs https://reach.tech/dialog#dialog-initialfocusref
|
161 | */
|
162 | initialFocusRef?: React.RefObject<any>;
|
163 | /**
|
164 | * Controls whether or not the dialog is open.
|
165 | *
|
166 | * @see Docs https://reach.tech/dialog#dialog-isopen
|
167 | */
|
168 | isOpen?: boolean;
|
169 | /**
|
170 | * This function is called whenever the user hits "Escape" or clicks outside
|
171 | * the dialog. _It's important to close the dialog `onDismiss`_.
|
172 | *
|
173 | * The only time you shouldn't close the dialog on dismiss is when the dialog
|
174 | * requires a choice and none of them are "cancel". For example, perhaps two
|
175 | * records need to be merged and the user needs to pick the surviving record.
|
176 | * Neither choice is less destructive than the other, so in these cases you
|
177 | * may want to alert the user they need to a make a choice on dismiss instead
|
178 | * of closing the dialog.
|
179 | *
|
180 | * @see Docs https://reach.tech/dialog#dialog-ondismiss
|
181 | */
|
182 | onDismiss?(event: React.MouseEvent | React.KeyboardEvent): void;
|
183 | /**
|
184 | * By default, React Focus Lock prevents focus from being moved outside of the
|
185 | * locked element even if the thing trying to take focus is in another frame.
|
186 | * Normally this is what you want, as an iframe is typically going to be a
|
187 | * part of your page content. But in some situations, like when using Code
|
188 | * Sandbox, you can't use any of the controls or the editor in the sandbox
|
189 | * while dialog is open because of the focus lock.
|
190 | *
|
191 | * This prop may have some negative side effects and unintended consequences,
|
192 | * and it opens questions about how we might distinguish frames that *should*
|
193 | * steal focus from those that shouldn't. Perhaps it's best for app devs to
|
194 | * decide, and if they use this prop we should advise them to imperatively
|
195 | * assign a -1 tabIndex to other iframes that are a part of the page content
|
196 | * when the dialog is open.
|
197 | *
|
198 | * https://github.com/reach/reach-ui/issues/536
|
199 | *
|
200 | * @deprecated
|
201 | */
|
202 | unstable_lockFocusAcrossFrames?: boolean;
|
203 | }
|
204 |
|
205 | export { Dialog, DialogContent, DialogContentProps, DialogInner, DialogOverlayProps as DialogInnerProps, DialogOverlay, DialogOverlayProps, DialogProps, DialogWrapper as unstable_DialogWrapper, DialogWrapperProps as unstable_DialogWrapperProps };
|