@tamagui/dialog 1.2.9 → 1.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Dialog.js +5 -1
- package/dist/cjs/Dialog.js.map +2 -2
- package/dist/esm/Dialog.js +5 -1
- package/dist/esm/Dialog.js.map +2 -2
- package/dist/esm/Dialog.mjs +610 -0
- package/dist/esm/Dialog.mjs.map +7 -0
- package/dist/esm/index.mjs +2 -0
- package/dist/esm/index.mjs.map +7 -0
- package/dist/jsx/Dialog.js +5 -1
- package/dist/jsx/Dialog.js.map +2 -2
- package/dist/jsx/Dialog.mjs +561 -0
- package/dist/jsx/Dialog.mjs.map +7 -0
- package/dist/jsx/index.mjs +2 -0
- package/dist/jsx/index.mjs.map +7 -0
- package/package.json +19 -19
- package/src/Dialog.tsx +5 -1
- package/types/Dialog.d.ts.map +1 -1
|
@@ -0,0 +1,561 @@
|
|
|
1
|
+
import { Adapt, useAdaptParent } from "@tamagui/adapt";
|
|
2
|
+
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
3
|
+
import { hideOthers } from "@tamagui/aria-hidden";
|
|
4
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
5
|
+
import {
|
|
6
|
+
Theme,
|
|
7
|
+
composeEventHandlers,
|
|
8
|
+
isWeb,
|
|
9
|
+
spacedChildren,
|
|
10
|
+
styled,
|
|
11
|
+
useGet,
|
|
12
|
+
useId,
|
|
13
|
+
useMedia,
|
|
14
|
+
useThemeName,
|
|
15
|
+
withStaticProperties
|
|
16
|
+
} from "@tamagui/core";
|
|
17
|
+
import { createContext, createContextScope } from "@tamagui/create-context";
|
|
18
|
+
import { Dismissable } from "@tamagui/dismissable";
|
|
19
|
+
import { FocusScope } from "@tamagui/focus-scope";
|
|
20
|
+
import { PortalHost, PortalItem } from "@tamagui/portal";
|
|
21
|
+
import { RemoveScroll } from "@tamagui/remove-scroll";
|
|
22
|
+
import { ControlledSheet, SheetController } from "@tamagui/sheet";
|
|
23
|
+
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
24
|
+
import { H2, Paragraph } from "@tamagui/text";
|
|
25
|
+
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
26
|
+
import * as React from "react";
|
|
27
|
+
const DIALOG_NAME = "Dialog";
|
|
28
|
+
const [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
|
|
29
|
+
const [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
|
30
|
+
const TRIGGER_NAME = "DialogTrigger";
|
|
31
|
+
const DialogTriggerFrame = styled(YStack, {
|
|
32
|
+
name: TRIGGER_NAME
|
|
33
|
+
});
|
|
34
|
+
const DialogTrigger = React.forwardRef(
|
|
35
|
+
(props, forwardedRef) => {
|
|
36
|
+
const { __scopeDialog, ...triggerProps } = props;
|
|
37
|
+
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
|
|
38
|
+
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
39
|
+
return <DialogTriggerFrame
|
|
40
|
+
tag="button"
|
|
41
|
+
aria-haspopup="dialog"
|
|
42
|
+
aria-expanded={context.open}
|
|
43
|
+
aria-controls={context.contentId}
|
|
44
|
+
data-state={getState(context.open)}
|
|
45
|
+
{...triggerProps}
|
|
46
|
+
ref={composedTriggerRef}
|
|
47
|
+
onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
|
|
48
|
+
/>;
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
DialogTrigger.displayName = TRIGGER_NAME;
|
|
52
|
+
const PORTAL_NAME = "DialogPortal";
|
|
53
|
+
const [PortalProvider, usePortalContext] = createDialogContext(
|
|
54
|
+
PORTAL_NAME,
|
|
55
|
+
{
|
|
56
|
+
forceMount: void 0
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
const DialogPortalFrame = styled(YStack, {
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
justifyContent: "center",
|
|
62
|
+
fullscreen: true,
|
|
63
|
+
zIndex: 100,
|
|
64
|
+
...isWeb && {
|
|
65
|
+
maxHeight: "100vh",
|
|
66
|
+
position: "fixed"
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
const DialogPortalItem = (props) => {
|
|
70
|
+
const themeName = useThemeName();
|
|
71
|
+
const context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
|
|
72
|
+
return <PortalItem hostName={props.hostName}><DialogPortalItemContent {...props} themeName={themeName} context={context} /></PortalItem>;
|
|
73
|
+
};
|
|
74
|
+
function DialogPortalItemContent(props) {
|
|
75
|
+
const {
|
|
76
|
+
__scopeDialog,
|
|
77
|
+
children,
|
|
78
|
+
context,
|
|
79
|
+
themeName,
|
|
80
|
+
space,
|
|
81
|
+
spaceDirection,
|
|
82
|
+
separator
|
|
83
|
+
} = props;
|
|
84
|
+
let childrenSpaced = children;
|
|
85
|
+
if (space || separator) {
|
|
86
|
+
childrenSpaced = spacedChildren({
|
|
87
|
+
children,
|
|
88
|
+
separator,
|
|
89
|
+
space,
|
|
90
|
+
direction: spaceDirection
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
return <DialogProvider scope={__scopeDialog} {...context}><Theme name={themeName}>{childrenSpaced}</Theme></DialogProvider>;
|
|
94
|
+
}
|
|
95
|
+
const DialogPortal = (props) => {
|
|
96
|
+
const { __scopeDialog, forceMount, children, ...frameProps } = props;
|
|
97
|
+
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
98
|
+
const isShowing = forceMount || context.open;
|
|
99
|
+
const [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
|
|
100
|
+
if (isShowing && isFullyHidden) {
|
|
101
|
+
setIsFullyHidden(false);
|
|
102
|
+
}
|
|
103
|
+
const contents = <AnimatePresence
|
|
104
|
+
onExitComplete={() => {
|
|
105
|
+
setIsFullyHidden(true);
|
|
106
|
+
}}
|
|
107
|
+
>{isShowing ? children : null}</AnimatePresence>;
|
|
108
|
+
const isSheet = useShowDialogSheet(context);
|
|
109
|
+
if (isSheet) {
|
|
110
|
+
return children;
|
|
111
|
+
}
|
|
112
|
+
if (context.modal) {
|
|
113
|
+
if (isFullyHidden) {
|
|
114
|
+
return null;
|
|
115
|
+
}
|
|
116
|
+
return <DialogPortalItem __scopeDialog={__scopeDialog}><PortalProvider scope={__scopeDialog} forceMount={forceMount}><DialogPortalFrame pointerEvents={isShowing ? "auto" : "none"} {...frameProps}>{contents}</DialogPortalFrame></PortalProvider></DialogPortalItem>;
|
|
117
|
+
}
|
|
118
|
+
return contents;
|
|
119
|
+
};
|
|
120
|
+
DialogPortal.displayName = PORTAL_NAME;
|
|
121
|
+
const OVERLAY_NAME = "DialogOverlay";
|
|
122
|
+
const DialogOverlayFrame = styled(ThemeableStack, {
|
|
123
|
+
name: OVERLAY_NAME,
|
|
124
|
+
backgrounded: true,
|
|
125
|
+
fullscreen: true
|
|
126
|
+
});
|
|
127
|
+
const DialogOverlay = React.forwardRef(
|
|
128
|
+
({ __scopeDialog, ...props }, forwardedRef) => {
|
|
129
|
+
const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
|
|
130
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
131
|
+
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
132
|
+
const showSheet = useShowDialogSheet(context);
|
|
133
|
+
if (!forceMount) {
|
|
134
|
+
if (!context.modal || showSheet) {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />;
|
|
139
|
+
}
|
|
140
|
+
);
|
|
141
|
+
DialogOverlay.displayName = OVERLAY_NAME;
|
|
142
|
+
const DialogOverlayImpl = React.forwardRef(
|
|
143
|
+
(props, forwardedRef) => {
|
|
144
|
+
const { context, ...overlayProps } = props;
|
|
145
|
+
return (
|
|
146
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
147
|
+
// ie. when `Overlay` and `Content` are siblings
|
|
148
|
+
<DialogOverlayFrame
|
|
149
|
+
data-state={getState(context.open)}
|
|
150
|
+
pointerEvents={context.open ? "auto" : "none"}
|
|
151
|
+
{...overlayProps}
|
|
152
|
+
ref={forwardedRef}
|
|
153
|
+
/>
|
|
154
|
+
);
|
|
155
|
+
}
|
|
156
|
+
);
|
|
157
|
+
const CONTENT_NAME = "DialogContent";
|
|
158
|
+
const DialogContentFrame = styled(ThemeableStack, {
|
|
159
|
+
name: CONTENT_NAME,
|
|
160
|
+
tag: "dialog",
|
|
161
|
+
position: "relative",
|
|
162
|
+
backgrounded: true,
|
|
163
|
+
padded: true,
|
|
164
|
+
radiused: true,
|
|
165
|
+
elevate: true,
|
|
166
|
+
variants: {
|
|
167
|
+
size: {
|
|
168
|
+
"...size": (val, extras) => {
|
|
169
|
+
return {};
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
defaultVariants: {
|
|
174
|
+
size: "$true"
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
const DialogContent = DialogContentFrame.extractable(
|
|
178
|
+
React.forwardRef(
|
|
179
|
+
({ __scopeDialog, ...props }, forwardedRef) => {
|
|
180
|
+
const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
|
|
181
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
182
|
+
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
183
|
+
const contents = context.modal ? <DialogContentModal context={context} {...contentProps} ref={forwardedRef} /> : <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />;
|
|
184
|
+
if (!isWeb) {
|
|
185
|
+
return contents;
|
|
186
|
+
}
|
|
187
|
+
return <RemoveScroll
|
|
188
|
+
forwardProps
|
|
189
|
+
enabled={context.open}
|
|
190
|
+
allowPinchZoom={context.allowPinchZoom}
|
|
191
|
+
shards={[context.contentRef]}
|
|
192
|
+
removeScrollBar={false}
|
|
193
|
+
><div className="_dsp_contents">{contents}</div></RemoveScroll>;
|
|
194
|
+
}
|
|
195
|
+
)
|
|
196
|
+
);
|
|
197
|
+
DialogContent.displayName = CONTENT_NAME;
|
|
198
|
+
const DialogContentModal = React.forwardRef(
|
|
199
|
+
({ children, context, ...props }, forwardedRef) => {
|
|
200
|
+
const contentRef = React.useRef(null);
|
|
201
|
+
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
202
|
+
if (isWeb) {
|
|
203
|
+
React.useEffect(() => {
|
|
204
|
+
if (!context.open)
|
|
205
|
+
return;
|
|
206
|
+
const content = contentRef.current;
|
|
207
|
+
if (content)
|
|
208
|
+
return hideOthers(content);
|
|
209
|
+
}, [context.open]);
|
|
210
|
+
}
|
|
211
|
+
return <DialogContentImpl
|
|
212
|
+
{...props}
|
|
213
|
+
context={context}
|
|
214
|
+
ref={composedRefs}
|
|
215
|
+
disableOutsidePointerEvents
|
|
216
|
+
onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
217
|
+
event.preventDefault();
|
|
218
|
+
context.triggerRef.current?.focus();
|
|
219
|
+
})}
|
|
220
|
+
onPointerDownOutside={composeEventHandlers(
|
|
221
|
+
props.onPointerDownOutside,
|
|
222
|
+
(event) => {
|
|
223
|
+
const originalEvent = event["detail"].originalEvent;
|
|
224
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
225
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
226
|
+
if (isRightClick)
|
|
227
|
+
event.preventDefault();
|
|
228
|
+
}
|
|
229
|
+
)}
|
|
230
|
+
onFocusOutside={composeEventHandlers(
|
|
231
|
+
props.onFocusOutside,
|
|
232
|
+
(event) => event.preventDefault()
|
|
233
|
+
)}
|
|
234
|
+
>{children}</DialogContentImpl>;
|
|
235
|
+
}
|
|
236
|
+
);
|
|
237
|
+
const DialogContentNonModal = React.forwardRef(
|
|
238
|
+
(props, forwardedRef) => {
|
|
239
|
+
const hasInteractedOutsideRef = React.useRef(false);
|
|
240
|
+
return <DialogContentImpl
|
|
241
|
+
{...props}
|
|
242
|
+
ref={forwardedRef}
|
|
243
|
+
trapFocus={false}
|
|
244
|
+
disableOutsidePointerEvents={false}
|
|
245
|
+
onCloseAutoFocus={(event) => {
|
|
246
|
+
props.onCloseAutoFocus?.(event);
|
|
247
|
+
if (!event.defaultPrevented) {
|
|
248
|
+
if (!hasInteractedOutsideRef.current) {
|
|
249
|
+
props.context.triggerRef.current?.focus();
|
|
250
|
+
}
|
|
251
|
+
event.preventDefault();
|
|
252
|
+
}
|
|
253
|
+
hasInteractedOutsideRef.current = false;
|
|
254
|
+
}}
|
|
255
|
+
onInteractOutside={(event) => {
|
|
256
|
+
props.onInteractOutside?.(event);
|
|
257
|
+
if (!event.defaultPrevented)
|
|
258
|
+
hasInteractedOutsideRef.current = true;
|
|
259
|
+
const target = event.target;
|
|
260
|
+
const trigger = props.context.triggerRef.current;
|
|
261
|
+
if (!(trigger instanceof HTMLElement))
|
|
262
|
+
return;
|
|
263
|
+
const targetIsTrigger = trigger.contains(target);
|
|
264
|
+
if (targetIsTrigger)
|
|
265
|
+
event.preventDefault();
|
|
266
|
+
}}
|
|
267
|
+
/>;
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
const DialogContentImpl = React.forwardRef(
|
|
271
|
+
(props, forwardedRef) => {
|
|
272
|
+
const {
|
|
273
|
+
__scopeDialog,
|
|
274
|
+
trapFocus,
|
|
275
|
+
onOpenAutoFocus,
|
|
276
|
+
onCloseAutoFocus,
|
|
277
|
+
disableOutsidePointerEvents,
|
|
278
|
+
onEscapeKeyDown,
|
|
279
|
+
onPointerDownOutside,
|
|
280
|
+
onFocusOutside,
|
|
281
|
+
onInteractOutside,
|
|
282
|
+
context,
|
|
283
|
+
...contentProps
|
|
284
|
+
} = props;
|
|
285
|
+
const contentRef = React.useRef(null);
|
|
286
|
+
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
287
|
+
const showSheet = useShowDialogSheet(context);
|
|
288
|
+
const contents = <DialogContentFrame
|
|
289
|
+
id={context.contentId}
|
|
290
|
+
aria-describedby={context.descriptionId}
|
|
291
|
+
aria-labelledby={context.titleId}
|
|
292
|
+
data-state={getState(context.open)}
|
|
293
|
+
{...contentProps}
|
|
294
|
+
/>;
|
|
295
|
+
if (showSheet) {
|
|
296
|
+
return <DialogPortalItem hostName={getSheetContentsName(context)}>{contentProps.children}</DialogPortalItem>;
|
|
297
|
+
}
|
|
298
|
+
if (!isWeb) {
|
|
299
|
+
return contents;
|
|
300
|
+
}
|
|
301
|
+
return <>
|
|
302
|
+
<FocusScope
|
|
303
|
+
loop
|
|
304
|
+
trapped={trapFocus}
|
|
305
|
+
onMountAutoFocus={onOpenAutoFocus}
|
|
306
|
+
forceUnmount={!context.open}
|
|
307
|
+
onUnmountAutoFocus={onCloseAutoFocus}
|
|
308
|
+
><Dismissable
|
|
309
|
+
disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}
|
|
310
|
+
forceUnmount={!context.open}
|
|
311
|
+
onEscapeKeyDown={onEscapeKeyDown}
|
|
312
|
+
onPointerDownOutside={onPointerDownOutside}
|
|
313
|
+
onFocusOutside={onFocusOutside}
|
|
314
|
+
onInteractOutside={onInteractOutside}
|
|
315
|
+
ref={composedRefs}
|
|
316
|
+
onDismiss={() => context.onOpenChange(false)}
|
|
317
|
+
>{contents}</Dismissable></FocusScope>
|
|
318
|
+
{process.env.NODE_ENV === "development" && <>
|
|
319
|
+
<TitleWarning titleId={context.titleId} />
|
|
320
|
+
<DescriptionWarning
|
|
321
|
+
contentRef={contentRef}
|
|
322
|
+
descriptionId={context.descriptionId}
|
|
323
|
+
/>
|
|
324
|
+
</>}
|
|
325
|
+
</>;
|
|
326
|
+
}
|
|
327
|
+
);
|
|
328
|
+
const TITLE_NAME = "DialogTitle";
|
|
329
|
+
const DialogTitleFrame = styled(H2, {
|
|
330
|
+
name: TITLE_NAME
|
|
331
|
+
});
|
|
332
|
+
const DialogTitle = React.forwardRef(
|
|
333
|
+
(props, forwardedRef) => {
|
|
334
|
+
const { __scopeDialog, ...titleProps } = props;
|
|
335
|
+
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
336
|
+
return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />;
|
|
337
|
+
}
|
|
338
|
+
);
|
|
339
|
+
DialogTitle.displayName = TITLE_NAME;
|
|
340
|
+
const DialogDescriptionFrame = styled(Paragraph, {
|
|
341
|
+
name: "DialogDescription"
|
|
342
|
+
});
|
|
343
|
+
const DESCRIPTION_NAME = "DialogDescription";
|
|
344
|
+
const DialogDescription = React.forwardRef(
|
|
345
|
+
(props, forwardedRef) => {
|
|
346
|
+
const { __scopeDialog, ...descriptionProps } = props;
|
|
347
|
+
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
348
|
+
return <DialogDescriptionFrame
|
|
349
|
+
id={context.descriptionId}
|
|
350
|
+
{...descriptionProps}
|
|
351
|
+
ref={forwardedRef}
|
|
352
|
+
/>;
|
|
353
|
+
}
|
|
354
|
+
);
|
|
355
|
+
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
356
|
+
const CLOSE_NAME = "DialogClose";
|
|
357
|
+
const DialogClose = React.forwardRef(
|
|
358
|
+
(props, forwardedRef) => {
|
|
359
|
+
const { __scopeDialog, displayWhenAdapted, ...closeProps } = props;
|
|
360
|
+
const context = useDialogContext(CLOSE_NAME, __scopeDialog, {
|
|
361
|
+
warn: false,
|
|
362
|
+
fallback: {}
|
|
363
|
+
});
|
|
364
|
+
const isSheet = useShowDialogSheet(context);
|
|
365
|
+
if (isSheet && !displayWhenAdapted) {
|
|
366
|
+
return null;
|
|
367
|
+
}
|
|
368
|
+
return <YStack
|
|
369
|
+
tag="button"
|
|
370
|
+
accessibilityLabel="Dialog Close"
|
|
371
|
+
{...closeProps}
|
|
372
|
+
ref={forwardedRef}
|
|
373
|
+
onPress={composeEventHandlers(
|
|
374
|
+
props.onPress,
|
|
375
|
+
() => context.onOpenChange(false)
|
|
376
|
+
)}
|
|
377
|
+
/>;
|
|
378
|
+
}
|
|
379
|
+
);
|
|
380
|
+
DialogClose.displayName = CLOSE_NAME;
|
|
381
|
+
function getState(open) {
|
|
382
|
+
return open ? "open" : "closed";
|
|
383
|
+
}
|
|
384
|
+
const TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
385
|
+
const [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
|
|
386
|
+
contentName: CONTENT_NAME,
|
|
387
|
+
titleName: TITLE_NAME,
|
|
388
|
+
docsSlug: "dialog"
|
|
389
|
+
});
|
|
390
|
+
const TitleWarning = ({ titleId }) => {
|
|
391
|
+
if (process.env.NODE_ENV === "development") {
|
|
392
|
+
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
|
393
|
+
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
|
394
|
+
|
|
395
|
+
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
396
|
+
|
|
397
|
+
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
|
398
|
+
React.useEffect(() => {
|
|
399
|
+
if (!isWeb)
|
|
400
|
+
return;
|
|
401
|
+
if (titleId) {
|
|
402
|
+
const hasTitle = document.getElementById(titleId);
|
|
403
|
+
if (!hasTitle) {
|
|
404
|
+
console.warn(MESSAGE);
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
}, [MESSAGE, titleId]);
|
|
408
|
+
}
|
|
409
|
+
return null;
|
|
410
|
+
};
|
|
411
|
+
const DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
|
412
|
+
const DescriptionWarning = ({
|
|
413
|
+
contentRef,
|
|
414
|
+
descriptionId
|
|
415
|
+
}) => {
|
|
416
|
+
if (process.env.NODE_ENV === "development") {
|
|
417
|
+
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
|
418
|
+
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
|
419
|
+
React.useEffect(() => {
|
|
420
|
+
if (!isWeb)
|
|
421
|
+
return;
|
|
422
|
+
const contentNode = contentRef.current;
|
|
423
|
+
if (!(contentNode instanceof HTMLElement)) {
|
|
424
|
+
return;
|
|
425
|
+
}
|
|
426
|
+
const describedById = contentNode.getAttribute("aria-describedby");
|
|
427
|
+
if (descriptionId && describedById) {
|
|
428
|
+
const hasDescription = document.getElementById(descriptionId);
|
|
429
|
+
if (!hasDescription) {
|
|
430
|
+
console.warn(MESSAGE);
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
}, [MESSAGE, contentRef, descriptionId]);
|
|
434
|
+
}
|
|
435
|
+
return null;
|
|
436
|
+
};
|
|
437
|
+
const Dialog = withStaticProperties(
|
|
438
|
+
React.forwardRef(function Dialog2(props, ref) {
|
|
439
|
+
const {
|
|
440
|
+
__scopeDialog,
|
|
441
|
+
children,
|
|
442
|
+
open: openProp,
|
|
443
|
+
defaultOpen = false,
|
|
444
|
+
onOpenChange,
|
|
445
|
+
modal = true,
|
|
446
|
+
allowPinchZoom = false
|
|
447
|
+
} = props;
|
|
448
|
+
const scopeId = useId();
|
|
449
|
+
const contentId = useId();
|
|
450
|
+
const titleId = useId();
|
|
451
|
+
const descriptionId = useId();
|
|
452
|
+
const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId;
|
|
453
|
+
const sheetContentsName = getSheetContentsName({ scopeKey, contentId });
|
|
454
|
+
const triggerRef = React.useRef(null);
|
|
455
|
+
const contentRef = React.useRef(null);
|
|
456
|
+
const [open, setOpen] = useControllableState({
|
|
457
|
+
prop: openProp,
|
|
458
|
+
defaultProp: defaultOpen,
|
|
459
|
+
onChange: onOpenChange
|
|
460
|
+
});
|
|
461
|
+
const onOpenToggle = React.useCallback(
|
|
462
|
+
() => setOpen((prevOpen) => !prevOpen),
|
|
463
|
+
[setOpen]
|
|
464
|
+
);
|
|
465
|
+
const context = {
|
|
466
|
+
scope: __scopeDialog,
|
|
467
|
+
scopeKey,
|
|
468
|
+
triggerRef,
|
|
469
|
+
contentRef,
|
|
470
|
+
contentId,
|
|
471
|
+
titleId,
|
|
472
|
+
descriptionId,
|
|
473
|
+
open,
|
|
474
|
+
onOpenChange: setOpen,
|
|
475
|
+
onOpenToggle,
|
|
476
|
+
modal,
|
|
477
|
+
allowPinchZoom
|
|
478
|
+
};
|
|
479
|
+
const { when, AdaptProvider } = useAdaptParent({
|
|
480
|
+
Contents: React.useCallback(
|
|
481
|
+
(props2) => {
|
|
482
|
+
return <PortalHost forwardProps={props2} name={sheetContentsName} />;
|
|
483
|
+
},
|
|
484
|
+
[sheetContentsName]
|
|
485
|
+
)
|
|
486
|
+
});
|
|
487
|
+
React.useImperativeHandle(
|
|
488
|
+
ref,
|
|
489
|
+
() => ({
|
|
490
|
+
open: setOpen
|
|
491
|
+
}),
|
|
492
|
+
[setOpen]
|
|
493
|
+
);
|
|
494
|
+
return <AdaptProvider><DialogProvider {...context} sheetBreakpoint={when}><DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>{children}</DialogSheetController></DialogProvider></AdaptProvider>;
|
|
495
|
+
}),
|
|
496
|
+
{
|
|
497
|
+
Trigger: DialogTrigger,
|
|
498
|
+
Portal: DialogPortal,
|
|
499
|
+
Overlay: DialogOverlay,
|
|
500
|
+
Content: DialogContent,
|
|
501
|
+
Title: DialogTitle,
|
|
502
|
+
Description: DialogDescription,
|
|
503
|
+
Close: DialogClose,
|
|
504
|
+
Sheet: ControlledSheet,
|
|
505
|
+
Adapt
|
|
506
|
+
}
|
|
507
|
+
);
|
|
508
|
+
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
509
|
+
const DialogSheetContents = ({
|
|
510
|
+
name,
|
|
511
|
+
...props
|
|
512
|
+
}) => {
|
|
513
|
+
return <PortalHost forwardProps={props} name={name} />;
|
|
514
|
+
};
|
|
515
|
+
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
516
|
+
const getSheetContentsName = ({
|
|
517
|
+
scopeKey,
|
|
518
|
+
contentId
|
|
519
|
+
}) => `${scopeKey || contentId}SheetContents`;
|
|
520
|
+
const DialogSheetController = (props) => {
|
|
521
|
+
const context = useDialogContext("DialogSheetController", props.__scopeDialog);
|
|
522
|
+
const showSheet = useShowDialogSheet(context);
|
|
523
|
+
const breakpointActive = useSheetBreakpointActive(context);
|
|
524
|
+
const getShowSheet = useGet(showSheet);
|
|
525
|
+
return <SheetController
|
|
526
|
+
onOpenChange={(val) => {
|
|
527
|
+
if (getShowSheet()) {
|
|
528
|
+
props.onOpenChange(val);
|
|
529
|
+
}
|
|
530
|
+
}}
|
|
531
|
+
open={context.open}
|
|
532
|
+
hidden={breakpointActive === false}
|
|
533
|
+
>{props.children}</SheetController>;
|
|
534
|
+
};
|
|
535
|
+
const useSheetBreakpointActive = (context) => {
|
|
536
|
+
const media = useMedia();
|
|
537
|
+
if (!context.sheetBreakpoint)
|
|
538
|
+
return false;
|
|
539
|
+
if (context.sheetBreakpoint === true)
|
|
540
|
+
return true;
|
|
541
|
+
return media[context.sheetBreakpoint];
|
|
542
|
+
};
|
|
543
|
+
const useShowDialogSheet = (context) => {
|
|
544
|
+
const breakpointActive = useSheetBreakpointActive(context);
|
|
545
|
+
return context.open === false ? false : breakpointActive;
|
|
546
|
+
};
|
|
547
|
+
export {
|
|
548
|
+
Dialog,
|
|
549
|
+
DialogClose,
|
|
550
|
+
DialogContent,
|
|
551
|
+
DialogDescription,
|
|
552
|
+
DialogOverlay,
|
|
553
|
+
DialogPortal,
|
|
554
|
+
DialogPortalFrame,
|
|
555
|
+
DialogSheetContents,
|
|
556
|
+
DialogTitle,
|
|
557
|
+
DialogTrigger,
|
|
558
|
+
DialogWarningProvider,
|
|
559
|
+
createDialogScope
|
|
560
|
+
};
|
|
561
|
+
//# sourceMappingURL=Dialog.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Dialog.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n spacedChildren,\n styled,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: any\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] =\n createDialogContext<DialogContextValue>(DIALOG_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(\n PORTAL_NAME,\n {\n forceMount: undefined,\n }\n)\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n position: 'fixed' as any,\n }),\n})\n\nconst DialogPortalItem = (props: ScopedProps<DialogPortalProps>) => {\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, props.__scopeDialog)\n\n return (\n <PortalItem hostName={props.hostName}>\n <DialogPortalItemContent {...props} themeName={themeName} context={context} />\n </PortalItem>\n )\n}\n\nfunction DialogPortalItemContent(\n props: ScopedProps<DialogPortalProps> & {\n themeName: string\n context: DialogContextValue\n }\n) {\n const {\n __scopeDialog,\n children,\n context,\n themeName,\n space,\n spaceDirection,\n separator,\n } = props\n\n let childrenSpaced = children\n\n if (space || separator) {\n childrenSpaced = spacedChildren({\n children,\n separator,\n space,\n direction: spaceDirection,\n })\n }\n\n // until we can use react-native portals natively\n // have to re-propogate context, sketch\n\n return (\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>{childrenSpaced}</Theme>\n </DialogProvider>\n )\n}\n\nconst DialogPortal: React.FC<DialogPortalProps> = (\n props: ScopedProps<DialogPortalProps>\n) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing)\n\n if (isShowing && isFullyHidden) {\n setIsFullyHidden(false)\n }\n\n const contents = (\n <AnimatePresence\n onExitComplete={() => {\n setIsFullyHidden(true)\n }}\n >\n {isShowing ? children : null}\n </AnimatePresence>\n )\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return children\n }\n\n if (context.modal) {\n if (isFullyHidden) {\n return null\n }\n\n return (\n <DialogPortalItem __scopeDialog={__scopeDialog}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </DialogPortalItem>\n )\n }\n\n return contents\n}\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents={context.open ? 'auto' : 'none'}\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n const contents = context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />\n )\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <RemoveScroll\n forwardProps\n enabled={context.open}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <div className=\"_dsp_contents\">{contents}</div>\n </RemoveScroll>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (\n { children, context, ...props }: ScopedProps<DialogContentTypeProps>,\n forwardedRef\n ) => {\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n if (isWeb) {\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n }\n\n return (\n <DialogContentImpl\n {...props}\n context={context}\n ref={composedRefs}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <DialogPortalItem hostName={getSheetContentsName(context)}>\n {contentProps.children}\n </DialogPortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n forceUnmount={!context.open}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}\n forceUnmount={!context.open}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning\n contentRef={contentRef}\n descriptionId={context.descriptionId}\n />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame\n id={context.descriptionId}\n {...descriptionProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps & {\n displayWhenAdapted?: boolean\n}\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, displayWhenAdapted, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog, {\n warn: false,\n fallback: {},\n })\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet && !displayWhenAdapted) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n accessibilityLabel=\"Dialog Close\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n if (process.env.NODE_ENV === 'development') {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, titleId])\n }\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({\n contentRef,\n descriptionId,\n}) => {\n if (process.env.NODE_ENV === 'development') {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, contentRef, descriptionId])\n }\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst Dialog = withStaticProperties(\n React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n ) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n\n const scopeId = useId()\n const contentId = useId()\n const titleId = useId()\n const descriptionId = useId()\n const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId\n const sheetContentsName = getSheetContentsName({ scopeKey, contentId })\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n const onOpenToggle = React.useCallback(\n () => setOpen((prevOpen) => !prevOpen),\n [setOpen]\n )\n\n const context = {\n scope: __scopeDialog,\n scopeKey,\n triggerRef,\n contentRef,\n contentId,\n titleId,\n descriptionId,\n open,\n onOpenChange: setOpen,\n onOpenToggle,\n modal,\n allowPinchZoom,\n }\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(\n (props) => {\n return <PortalHost forwardProps={props} name={sheetContentsName} />\n },\n [sheetContentsName]\n ),\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n return (\n <AdaptProvider>\n <DialogProvider {...context} sheetBreakpoint={when}>\n <DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n </AdaptProvider>\n )\n }),\n {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Sheet: ControlledSheet,\n Adapt,\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({\n name,\n ...props\n}: {\n name: string\n context: Omit<DialogContextValue, 'sheetBreakpoint'>\n}) => {\n return <PortalHost forwardProps={props} name={name} />\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\nconst getSheetContentsName = ({\n scopeKey,\n contentId,\n}: Pick<DialogContextValue, 'scopeKey' | 'contentId'>) =>\n `${scopeKey || contentId}SheetContents`\n\nconst DialogSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useSheetBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n if (!context.sheetBreakpoint) return false\n if (context.sheetBreakpoint === true) return true\n return media[context.sheetBreakpoint]\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Dialog", "props"]
|
|
7
|
+
}
|