@tamagui/dialog 1.0.1-beta.100 → 1.0.1-beta.103
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 +117 -52
- package/dist/cjs/Dialog.js.map +2 -2
- package/dist/esm/Dialog.js +98 -34
- package/dist/esm/Dialog.js.map +2 -2
- package/dist/jsx/Dialog.js +74 -21
- package/dist/jsx/Dialog.js.map +2 -2
- package/package.json +15 -15
- package/src/Dialog.tsx +184 -83
- package/types/Dialog.d.ts +128 -6
- package/types/Dialog.d.ts.map +1 -1
package/dist/esm/Dialog.js
CHANGED
|
@@ -31,6 +31,7 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
33
33
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
34
|
+
import { useGet } from "@tamagui/core";
|
|
34
35
|
import {
|
|
35
36
|
Slot,
|
|
36
37
|
Theme,
|
|
@@ -38,13 +39,15 @@ import {
|
|
|
38
39
|
isWeb,
|
|
39
40
|
styled,
|
|
40
41
|
useId,
|
|
42
|
+
useMedia,
|
|
41
43
|
useThemeName,
|
|
42
44
|
withStaticProperties
|
|
43
45
|
} from "@tamagui/core";
|
|
44
46
|
import { createContext, createContextScope } from "@tamagui/create-context";
|
|
45
47
|
import { Dismissable } from "@tamagui/dismissable";
|
|
46
48
|
import { FocusScope } from "@tamagui/focus-scope";
|
|
47
|
-
import {
|
|
49
|
+
import { PortalHost, PortalItem } from "@tamagui/portal";
|
|
50
|
+
import { Sheet, SheetController } from "@tamagui/sheet";
|
|
48
51
|
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
49
52
|
import { H2, Paragraph } from "@tamagui/text";
|
|
50
53
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
@@ -78,32 +81,35 @@ const PORTAL_NAME = "DialogPortal";
|
|
|
78
81
|
const [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
|
|
79
82
|
forceMount: void 0
|
|
80
83
|
});
|
|
81
|
-
const
|
|
82
|
-
|
|
84
|
+
const DialogPortalFrame = styled(YStack, __spreadValues({
|
|
85
|
+
alignItems: "center",
|
|
86
|
+
justifyContent: "center",
|
|
87
|
+
fullscreen: true,
|
|
88
|
+
zIndex: 100
|
|
89
|
+
}, isWeb && {
|
|
90
|
+
maxHeight: "100vh"
|
|
91
|
+
}));
|
|
92
|
+
const DialogPortal = DialogPortalFrame.extractable((props) => {
|
|
93
|
+
const _a = props, { __scopeDialog, forceMount, children } = _a, frameProps = __objRest(_a, ["__scopeDialog", "forceMount", "children"]);
|
|
83
94
|
const themeName = useThemeName();
|
|
84
95
|
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
85
96
|
const isShowing = forceMount || context.open;
|
|
86
97
|
const contents = /* @__PURE__ */ React.createElement(AnimatePresence, null, isShowing ? children : null);
|
|
87
|
-
|
|
98
|
+
const isSheet = useShowDialogSheet(context);
|
|
99
|
+
if (!context.modal || isSheet) {
|
|
88
100
|
return contents;
|
|
89
101
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
102
|
+
return /* @__PURE__ */ React.createElement(PortalItem, null, /* @__PURE__ */ React.createElement(DialogProvider, __spreadValues({
|
|
103
|
+
scope: __scopeDialog
|
|
104
|
+
}, context), /* @__PURE__ */ React.createElement(Theme, {
|
|
105
|
+
name: themeName
|
|
106
|
+
}, /* @__PURE__ */ React.createElement(PortalProvider, {
|
|
94
107
|
scope: __scopeDialog,
|
|
95
108
|
forceMount
|
|
96
|
-
}, /* @__PURE__ */ React.createElement(
|
|
97
|
-
alignItems: "center",
|
|
98
|
-
justifyContent: "center",
|
|
99
|
-
zIndex: 100,
|
|
109
|
+
}, /* @__PURE__ */ React.createElement(DialogPortalFrame, __spreadValues({
|
|
100
110
|
pointerEvents: isShowing ? "auto" : "none"
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
}), rest), /* @__PURE__ */ React.createElement(Theme, {
|
|
104
|
-
name: themeName
|
|
105
|
-
}, contents)));
|
|
106
|
-
};
|
|
111
|
+
}, frameProps), contents)))));
|
|
112
|
+
});
|
|
107
113
|
DialogPortal.displayName = PORTAL_NAME;
|
|
108
114
|
const OVERLAY_NAME = "DialogOverlay";
|
|
109
115
|
const DialogOverlayFrame = styled(ThemeableStack, {
|
|
@@ -117,8 +123,11 @@ const DialogOverlay = React.forwardRef((_a, forwardedRef) => {
|
|
|
117
123
|
const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
|
|
118
124
|
const _a2 = props, { forceMount = portalContext.forceMount } = _a2, overlayProps = __objRest(_a2, ["forceMount"]);
|
|
119
125
|
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
120
|
-
|
|
121
|
-
|
|
126
|
+
const showSheet = useShowDialogSheet(context);
|
|
127
|
+
if (!forceMount) {
|
|
128
|
+
if (!context.modal || showSheet) {
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
122
131
|
}
|
|
123
132
|
return /* @__PURE__ */ React.createElement(DialogOverlayImpl, __spreadProps(__spreadValues({}, overlayProps), {
|
|
124
133
|
ref: forwardedRef
|
|
@@ -164,7 +173,7 @@ const DialogContentFrame = styled(ThemeableStack, {
|
|
|
164
173
|
size: "$4"
|
|
165
174
|
}
|
|
166
175
|
});
|
|
167
|
-
const DialogContent = React.forwardRef((_c, forwardedRef) => {
|
|
176
|
+
const DialogContent = DialogContentFrame.extractable(React.forwardRef((_c, forwardedRef) => {
|
|
168
177
|
var _d = _c, { __scopeDialog } = _d, props = __objRest(_d, ["__scopeDialog"]);
|
|
169
178
|
const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
|
|
170
179
|
const _a = props, { forceMount = portalContext.forceMount } = _a, contentProps = __objRest(_a, ["forceMount"]);
|
|
@@ -174,10 +183,10 @@ const DialogContent = React.forwardRef((_c, forwardedRef) => {
|
|
|
174
183
|
})) : /* @__PURE__ */ React.createElement(DialogContentNonModal, __spreadProps(__spreadValues({}, contentProps), {
|
|
175
184
|
ref: forwardedRef
|
|
176
185
|
})));
|
|
177
|
-
});
|
|
186
|
+
}));
|
|
178
187
|
DialogContent.displayName = CONTENT_NAME;
|
|
179
188
|
const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
180
|
-
var _f = _e, { __scopeDialog } = _f, props = __objRest(_f, ["__scopeDialog"]);
|
|
189
|
+
var _f = _e, { __scopeDialog, children } = _f, props = __objRest(_f, ["__scopeDialog", "children"]);
|
|
181
190
|
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
182
191
|
const contentRef = React.useRef(null);
|
|
183
192
|
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
@@ -205,7 +214,7 @@ const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
|
205
214
|
event.preventDefault();
|
|
206
215
|
}),
|
|
207
216
|
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())
|
|
208
|
-
}));
|
|
217
|
+
}), children);
|
|
209
218
|
});
|
|
210
219
|
const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
211
220
|
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
@@ -264,6 +273,21 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
264
273
|
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
265
274
|
const contentRef = React.useRef(null);
|
|
266
275
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
276
|
+
const showSheet = useShowDialogSheet(context);
|
|
277
|
+
const contents = /* @__PURE__ */ React.createElement(DialogContentFrame, __spreadValues({
|
|
278
|
+
id: context.contentId,
|
|
279
|
+
"aria-describedby": context.descriptionId,
|
|
280
|
+
"aria-labelledby": context.titleId,
|
|
281
|
+
"data-state": getState(context.open)
|
|
282
|
+
}, contentProps));
|
|
283
|
+
if (showSheet) {
|
|
284
|
+
return /* @__PURE__ */ React.createElement(PortalItem, {
|
|
285
|
+
hostName: `${context.scopeKey}SheetContents`
|
|
286
|
+
}, contentProps.children);
|
|
287
|
+
}
|
|
288
|
+
if (!isWeb) {
|
|
289
|
+
return contents;
|
|
290
|
+
}
|
|
267
291
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FocusScope, {
|
|
268
292
|
loop: true,
|
|
269
293
|
trapped: trapFocus,
|
|
@@ -277,18 +301,21 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
277
301
|
onInteractOutside,
|
|
278
302
|
ref: composedRefs,
|
|
279
303
|
onDismiss: () => context.onOpenChange(false)
|
|
280
|
-
}, /* @__PURE__ */ React.createElement(
|
|
281
|
-
id: context.contentId,
|
|
282
|
-
"aria-describedby": context.descriptionId,
|
|
283
|
-
"aria-labelledby": context.titleId,
|
|
284
|
-
"data-state": getState(context.open)
|
|
285
|
-
}, contentProps)))), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
|
|
304
|
+
}, contents)), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
|
|
286
305
|
titleId: context.titleId
|
|
287
306
|
}), /* @__PURE__ */ React.createElement(DescriptionWarning, {
|
|
288
307
|
contentRef,
|
|
289
308
|
descriptionId: context.descriptionId
|
|
290
309
|
})));
|
|
291
310
|
});
|
|
311
|
+
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
312
|
+
const DialogSheetContents = ({ __scopeDialog }) => {
|
|
313
|
+
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
|
|
314
|
+
return /* @__PURE__ */ React.createElement(PortalHost, {
|
|
315
|
+
name: `${context.scopeKey}SheetContents`
|
|
316
|
+
});
|
|
317
|
+
};
|
|
318
|
+
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
292
319
|
const TITLE_NAME = "DialogTitle";
|
|
293
320
|
const DialogTitleFrame = styled(H2, {
|
|
294
321
|
name: TITLE_NAME
|
|
@@ -321,6 +348,10 @@ const CLOSE_NAME = "DialogClose";
|
|
|
321
348
|
const DialogClose = React.forwardRef((props, forwardedRef) => {
|
|
322
349
|
const _a = props, { __scopeDialog } = _a, closeProps = __objRest(_a, ["__scopeDialog"]);
|
|
323
350
|
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
351
|
+
const isSheet = useShowDialogSheet(context);
|
|
352
|
+
if (isSheet) {
|
|
353
|
+
return null;
|
|
354
|
+
}
|
|
324
355
|
return /* @__PURE__ */ React.createElement(YStack, __spreadProps(__spreadValues({
|
|
325
356
|
tag: "button"
|
|
326
357
|
}, closeProps), {
|
|
@@ -384,7 +415,8 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
384
415
|
defaultOpen = false,
|
|
385
416
|
onOpenChange,
|
|
386
417
|
modal = true,
|
|
387
|
-
allowPinchZoom = false
|
|
418
|
+
allowPinchZoom = false,
|
|
419
|
+
sheetBreakpoint = false
|
|
388
420
|
} = props;
|
|
389
421
|
const triggerRef = React.useRef(null);
|
|
390
422
|
const contentRef = React.useRef(null);
|
|
@@ -398,6 +430,7 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
398
430
|
}), [setOpen]);
|
|
399
431
|
return /* @__PURE__ */ React.createElement(DialogProvider, {
|
|
400
432
|
scope: __scopeDialog,
|
|
433
|
+
scopeKey: __scopeDialog ? Object.keys(__scopeDialog)[0] : "",
|
|
401
434
|
triggerRef,
|
|
402
435
|
contentRef,
|
|
403
436
|
contentId: useId() || "",
|
|
@@ -407,8 +440,12 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
407
440
|
onOpenChange: setOpen,
|
|
408
441
|
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
409
442
|
modal,
|
|
410
|
-
allowPinchZoom
|
|
411
|
-
|
|
443
|
+
allowPinchZoom,
|
|
444
|
+
sheetBreakpoint
|
|
445
|
+
}, /* @__PURE__ */ React.createElement(DialogSheetController, {
|
|
446
|
+
onChangeOpen: setOpen,
|
|
447
|
+
__scopeDialog
|
|
448
|
+
}, children));
|
|
412
449
|
});
|
|
413
450
|
const Dialog2 = withStaticProperties(DialogInner, {
|
|
414
451
|
Trigger: DialogTrigger,
|
|
@@ -417,8 +454,33 @@ const Dialog2 = withStaticProperties(DialogInner, {
|
|
|
417
454
|
Content: DialogContent,
|
|
418
455
|
Title: DialogTitle,
|
|
419
456
|
Description: DialogDescription,
|
|
420
|
-
Close: DialogClose
|
|
457
|
+
Close: DialogClose,
|
|
458
|
+
SheetContents: DialogSheetContents,
|
|
459
|
+
Sheet
|
|
421
460
|
});
|
|
461
|
+
const DialogSheetController = (props) => {
|
|
462
|
+
const context = useDialogContext("DialogSheetController", props.__scopeDialog);
|
|
463
|
+
const showSheet = useShowDialogSheet(context);
|
|
464
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
465
|
+
const getShowSheet = useGet(showSheet);
|
|
466
|
+
return /* @__PURE__ */ React.createElement(SheetController, {
|
|
467
|
+
onChangeOpen: (val) => {
|
|
468
|
+
if (getShowSheet()) {
|
|
469
|
+
props.onChangeOpen(val);
|
|
470
|
+
}
|
|
471
|
+
},
|
|
472
|
+
open: context.open,
|
|
473
|
+
hidden: breakpointActive === false
|
|
474
|
+
}, props.children);
|
|
475
|
+
};
|
|
476
|
+
const useDialogBreakpointActive = (context) => {
|
|
477
|
+
const media = useMedia();
|
|
478
|
+
return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
|
|
479
|
+
};
|
|
480
|
+
const useShowDialogSheet = (context) => {
|
|
481
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
482
|
+
return context.open === false ? false : breakpointActive;
|
|
483
|
+
};
|
|
422
484
|
export {
|
|
423
485
|
Dialog2 as Dialog,
|
|
424
486
|
DialogClose,
|
|
@@ -426,6 +488,8 @@ export {
|
|
|
426
488
|
DialogDescription,
|
|
427
489
|
DialogOverlay,
|
|
428
490
|
DialogPortal,
|
|
491
|
+
DialogPortalFrame,
|
|
492
|
+
DialogSheetContents,
|
|
429
493
|
DialogTitle,
|
|
430
494
|
DialogTrigger,
|
|
431
495
|
WarningProvider,
|
package/dist/esm/Dialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Dialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useId,\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 { Portal, PortalProps } from '@tamagui/portal'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { View } from 'react-native'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\ntype TamaguiElement = HTMLElement | View\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n modal: boolean\n allowPinchZoom: boolean\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(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\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, 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>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ninterface DialogPortalProps extends Omit<PortalProps, 'asChild'> {\n children?: React.ReactNode\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 DialogPortal: React.FC<DialogPortalProps> = (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...rest } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n if (!context.modal) {\n return contents\n }\n if (!isWeb && !isShowing) {\n return contents\n }\n return (\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <Portal\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={100}\n pointerEvents={isShowing ? 'auto' : 'none'}\n {...(isWeb && {\n maxHeight: '100vh',\n })}\n {...rest}\n >\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n </PortalProvider>\n )\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 pointerEvents: 'auto',\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\n if (!context.modal) {\n return null\n }\n\n // <AnimatePresence>\n return <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n // </AnimatePresence>\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame>\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const content = (\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=\"auto\"\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n\n if (!isWeb) {\n return content\n }\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 <RemoveScroll as={Slot} allowPinchZoom={context.allowPinchZoom} shards={[context.contentRef]}>\n {content}\n </RemoveScroll>\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 pointerEvents: 'auto',\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 },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps extends DialogContentFrameProps, DialogContentTypeProps {\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 = 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 return (\n <>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </>\n )\n }\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\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 React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = 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 // 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 )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog)\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) context.triggerRef.current?.focus()\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 = 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\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 ...contentProps\n } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={disableOutsidePointerEvents}\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 <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 </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\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 id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}\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 [WarningProvider, 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 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) throw new Error(MESSAGE)\n }\n }, [MESSAGE, titleId])\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> = ({ contentRef, descriptionId }) => {\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) console.warn(MESSAGE)\n }\n }, [MESSAGE, contentRef, descriptionId])\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = 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 const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n >\n {children}\n </DialogProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n})\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n WarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { useGet } from '@tamagui/core'\nimport {\n GetProps,\n MediaPropKeys,\n Slot,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\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 { Sheet, 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 { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { View } from 'react-native'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\ntype TamaguiElement = HTMLElement | View\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ninterface DialogProps {\n sheetBreakpoint?: MediaPropKeys | false\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: NonNull<DialogProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\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, 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>(PORTAL_NAME, {\n forceMount: undefined,\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 }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem>\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\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 pointerEvents: 'auto',\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 {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame>\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const content = (\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=\"auto\"\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n\n if (!isWeb) {\n return content\n }\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 <RemoveScroll as={Slot} allowPinchZoom={context.allowPinchZoom} shards={[context.contentRef]}>\n {content}\n </RemoveScroll>\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 pointerEvents: 'auto',\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 },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps extends DialogContentFrameProps, DialogContentTypeProps {\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 return (\n <>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ __scopeDialog, children, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\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 React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = 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 // 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 context = useDialogContext(CONTENT_NAME, props.__scopeDialog)\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) context.triggerRef.current?.focus()\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 = 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\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 ...contentProps\n } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\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 <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\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 onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={disableOutsidePointerEvents}\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 contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({ __scopeDialog }: ScopedProps<{}>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\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 id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}\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 [WarningProvider, 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 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) throw new Error(MESSAGE)\n }\n }, [MESSAGE, titleId])\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> = ({ contentRef, descriptionId }) => {\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) console.warn(MESSAGE)\n }\n }, [MESSAGE, contentRef, descriptionId])\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = 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 sheetBreakpoint = false,\n } = props\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={__scopeDialog ? Object.keys(__scopeDialog)[0] : ''}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onChangeOpen={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n SheetContents: DialogSheetContents,\n Sheet,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useDialogBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useDialogBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useDialogBreakpointActive(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 WarningProvider,\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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Dialog.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
2
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
+
import { useGet } from "@tamagui/core";
|
|
3
4
|
import {
|
|
4
5
|
Slot,
|
|
5
6
|
Theme,
|
|
@@ -7,13 +8,15 @@ import {
|
|
|
7
8
|
isWeb,
|
|
8
9
|
styled,
|
|
9
10
|
useId,
|
|
11
|
+
useMedia,
|
|
10
12
|
useThemeName,
|
|
11
13
|
withStaticProperties
|
|
12
14
|
} from "@tamagui/core";
|
|
13
15
|
import { createContext, createContextScope } from "@tamagui/create-context";
|
|
14
16
|
import { Dismissable } from "@tamagui/dismissable";
|
|
15
17
|
import { FocusScope } from "@tamagui/focus-scope";
|
|
16
|
-
import {
|
|
18
|
+
import { PortalHost, PortalItem } from "@tamagui/portal";
|
|
19
|
+
import { Sheet, SheetController } from "@tamagui/sheet";
|
|
17
20
|
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
18
21
|
import { H2, Paragraph } from "@tamagui/text";
|
|
19
22
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
@@ -38,22 +41,27 @@ const PORTAL_NAME = "DialogPortal";
|
|
|
38
41
|
const [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
|
|
39
42
|
forceMount: void 0
|
|
40
43
|
});
|
|
41
|
-
const
|
|
42
|
-
|
|
44
|
+
const DialogPortalFrame = styled(YStack, {
|
|
45
|
+
alignItems: "center",
|
|
46
|
+
justifyContent: "center",
|
|
47
|
+
fullscreen: true,
|
|
48
|
+
zIndex: 100,
|
|
49
|
+
...isWeb && {
|
|
50
|
+
maxHeight: "100vh"
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
const DialogPortal = DialogPortalFrame.extractable((props) => {
|
|
54
|
+
const { __scopeDialog, forceMount, children, ...frameProps } = props;
|
|
43
55
|
const themeName = useThemeName();
|
|
44
56
|
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
45
57
|
const isShowing = forceMount || context.open;
|
|
46
58
|
const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>;
|
|
47
|
-
|
|
59
|
+
const isSheet = useShowDialogSheet(context);
|
|
60
|
+
if (!context.modal || isSheet) {
|
|
48
61
|
return contents;
|
|
49
62
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
return <PortalProvider scope={__scopeDialog} forceMount={forceMount}><Portal alignItems="center" justifyContent="center" zIndex={100} pointerEvents={isShowing ? "auto" : "none"} {...isWeb && {
|
|
54
|
-
maxHeight: "100vh"
|
|
55
|
-
}} {...rest}><Theme name={themeName}>{contents}</Theme></Portal></PortalProvider>;
|
|
56
|
-
};
|
|
63
|
+
return <PortalItem><DialogProvider scope={__scopeDialog} {...context}><Theme name={themeName}><PortalProvider scope={__scopeDialog} forceMount={forceMount}><DialogPortalFrame pointerEvents={isShowing ? "auto" : "none"} {...frameProps}>{contents}</DialogPortalFrame></PortalProvider></Theme></DialogProvider></PortalItem>;
|
|
64
|
+
});
|
|
57
65
|
DialogPortal.displayName = PORTAL_NAME;
|
|
58
66
|
const OVERLAY_NAME = "DialogOverlay";
|
|
59
67
|
const DialogOverlayFrame = styled(ThemeableStack, {
|
|
@@ -66,8 +74,11 @@ const DialogOverlay = React.forwardRef(({ __scopeDialog, ...props }, forwardedRe
|
|
|
66
74
|
const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
|
|
67
75
|
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
68
76
|
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
69
|
-
|
|
70
|
-
|
|
77
|
+
const showSheet = useShowDialogSheet(context);
|
|
78
|
+
if (!forceMount) {
|
|
79
|
+
if (!context.modal || showSheet) {
|
|
80
|
+
return null;
|
|
81
|
+
}
|
|
71
82
|
}
|
|
72
83
|
return <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />;
|
|
73
84
|
});
|
|
@@ -102,14 +113,14 @@ const DialogContentFrame = styled(ThemeableStack, {
|
|
|
102
113
|
size: "$4"
|
|
103
114
|
}
|
|
104
115
|
});
|
|
105
|
-
const DialogContent = React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
|
|
116
|
+
const DialogContent = DialogContentFrame.extractable(React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
|
|
106
117
|
const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
|
|
107
118
|
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
108
119
|
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
109
120
|
return <>{context.modal ? <DialogContentModal {...contentProps} ref={forwardedRef} /> : <DialogContentNonModal {...contentProps} ref={forwardedRef} />}</>;
|
|
110
|
-
});
|
|
121
|
+
}));
|
|
111
122
|
DialogContent.displayName = CONTENT_NAME;
|
|
112
|
-
const DialogContentModal = React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
|
|
123
|
+
const DialogContentModal = React.forwardRef(({ __scopeDialog, children, ...props }, forwardedRef) => {
|
|
113
124
|
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
114
125
|
const contentRef = React.useRef(null);
|
|
115
126
|
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
@@ -130,7 +141,7 @@ const DialogContentModal = React.forwardRef(({ __scopeDialog, ...props }, forwar
|
|
|
130
141
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
131
142
|
if (isRightClick)
|
|
132
143
|
event.preventDefault();
|
|
133
|
-
})} onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())}
|
|
144
|
+
})} onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())}>{children}</DialogContentImpl>;
|
|
134
145
|
});
|
|
135
146
|
const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
136
147
|
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
@@ -174,14 +185,28 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
174
185
|
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
175
186
|
const contentRef = React.useRef(null);
|
|
176
187
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
188
|
+
const showSheet = useShowDialogSheet(context);
|
|
189
|
+
const contents = <DialogContentFrame id={context.contentId} aria-describedby={context.descriptionId} aria-labelledby={context.titleId} data-state={getState(context.open)} {...contentProps} />;
|
|
190
|
+
if (showSheet) {
|
|
191
|
+
return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{contentProps.children}</PortalItem>;
|
|
192
|
+
}
|
|
193
|
+
if (!isWeb) {
|
|
194
|
+
return contents;
|
|
195
|
+
}
|
|
177
196
|
return <>
|
|
178
|
-
<FocusScope loop trapped={trapFocus} onMountAutoFocus={onOpenAutoFocus} onUnmountAutoFocus={onCloseAutoFocus}><Dismissable disableOutsidePointerEvents={disableOutsidePointerEvents} onEscapeKeyDown={onEscapeKeyDown} onPointerDownOutside={onPointerDownOutside} onFocusOutside={onFocusOutside} onInteractOutside={onInteractOutside} ref={composedRefs} onDismiss={() => context.onOpenChange(false)}
|
|
197
|
+
<FocusScope loop trapped={trapFocus} onMountAutoFocus={onOpenAutoFocus} onUnmountAutoFocus={onCloseAutoFocus}><Dismissable disableOutsidePointerEvents={disableOutsidePointerEvents} onEscapeKeyDown={onEscapeKeyDown} onPointerDownOutside={onPointerDownOutside} onFocusOutside={onFocusOutside} onInteractOutside={onInteractOutside} ref={composedRefs} onDismiss={() => context.onOpenChange(false)}>{contents}</Dismissable></FocusScope>
|
|
179
198
|
{process.env.NODE_ENV === "development" && <>
|
|
180
199
|
<TitleWarning titleId={context.titleId} />
|
|
181
200
|
<DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />
|
|
182
201
|
</>}
|
|
183
202
|
</>;
|
|
184
203
|
});
|
|
204
|
+
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
205
|
+
const DialogSheetContents = ({ __scopeDialog }) => {
|
|
206
|
+
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
|
|
207
|
+
return <PortalHost name={`${context.scopeKey}SheetContents`} />;
|
|
208
|
+
};
|
|
209
|
+
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
185
210
|
const TITLE_NAME = "DialogTitle";
|
|
186
211
|
const DialogTitleFrame = styled(H2, {
|
|
187
212
|
name: TITLE_NAME
|
|
@@ -206,6 +231,10 @@ const CLOSE_NAME = "DialogClose";
|
|
|
206
231
|
const DialogClose = React.forwardRef((props, forwardedRef) => {
|
|
207
232
|
const { __scopeDialog, ...closeProps } = props;
|
|
208
233
|
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
234
|
+
const isSheet = useShowDialogSheet(context);
|
|
235
|
+
if (isSheet) {
|
|
236
|
+
return null;
|
|
237
|
+
}
|
|
209
238
|
return <YStack tag="button" {...closeProps} ref={forwardedRef} onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))} />;
|
|
210
239
|
});
|
|
211
240
|
DialogClose.displayName = CLOSE_NAME;
|
|
@@ -264,7 +293,8 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
264
293
|
defaultOpen = false,
|
|
265
294
|
onOpenChange,
|
|
266
295
|
modal = true,
|
|
267
|
-
allowPinchZoom = false
|
|
296
|
+
allowPinchZoom = false,
|
|
297
|
+
sheetBreakpoint = false
|
|
268
298
|
} = props;
|
|
269
299
|
const triggerRef = React.useRef(null);
|
|
270
300
|
const contentRef = React.useRef(null);
|
|
@@ -276,7 +306,7 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
276
306
|
React.useImperativeHandle(ref, () => ({
|
|
277
307
|
open: setOpen
|
|
278
308
|
}), [setOpen]);
|
|
279
|
-
return <DialogProvider scope={__scopeDialog} triggerRef={triggerRef} contentRef={contentRef} contentId={useId() || ""} titleId={useId() || ""} descriptionId={useId() || ""} open={open} onOpenChange={setOpen} onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])} modal={modal} allowPinchZoom={allowPinchZoom}>{children}</DialogProvider>;
|
|
309
|
+
return <DialogProvider scope={__scopeDialog} scopeKey={__scopeDialog ? Object.keys(__scopeDialog)[0] : ""} triggerRef={triggerRef} contentRef={contentRef} contentId={useId() || ""} titleId={useId() || ""} descriptionId={useId() || ""} open={open} onOpenChange={setOpen} onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])} modal={modal} allowPinchZoom={allowPinchZoom} sheetBreakpoint={sheetBreakpoint}><DialogSheetController onChangeOpen={setOpen} __scopeDialog={__scopeDialog}>{children}</DialogSheetController></DialogProvider>;
|
|
280
310
|
});
|
|
281
311
|
const Dialog2 = withStaticProperties(DialogInner, {
|
|
282
312
|
Trigger: DialogTrigger,
|
|
@@ -285,8 +315,29 @@ const Dialog2 = withStaticProperties(DialogInner, {
|
|
|
285
315
|
Content: DialogContent,
|
|
286
316
|
Title: DialogTitle,
|
|
287
317
|
Description: DialogDescription,
|
|
288
|
-
Close: DialogClose
|
|
318
|
+
Close: DialogClose,
|
|
319
|
+
SheetContents: DialogSheetContents,
|
|
320
|
+
Sheet
|
|
289
321
|
});
|
|
322
|
+
const DialogSheetController = (props) => {
|
|
323
|
+
const context = useDialogContext("DialogSheetController", props.__scopeDialog);
|
|
324
|
+
const showSheet = useShowDialogSheet(context);
|
|
325
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
326
|
+
const getShowSheet = useGet(showSheet);
|
|
327
|
+
return <SheetController onChangeOpen={(val) => {
|
|
328
|
+
if (getShowSheet()) {
|
|
329
|
+
props.onChangeOpen(val);
|
|
330
|
+
}
|
|
331
|
+
}} open={context.open} hidden={breakpointActive === false}>{props.children}</SheetController>;
|
|
332
|
+
};
|
|
333
|
+
const useDialogBreakpointActive = (context) => {
|
|
334
|
+
const media = useMedia();
|
|
335
|
+
return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
|
|
336
|
+
};
|
|
337
|
+
const useShowDialogSheet = (context) => {
|
|
338
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
339
|
+
return context.open === false ? false : breakpointActive;
|
|
340
|
+
};
|
|
290
341
|
export {
|
|
291
342
|
Dialog2 as Dialog,
|
|
292
343
|
DialogClose,
|
|
@@ -294,6 +345,8 @@ export {
|
|
|
294
345
|
DialogDescription,
|
|
295
346
|
DialogOverlay,
|
|
296
347
|
DialogPortal,
|
|
348
|
+
DialogPortalFrame,
|
|
349
|
+
DialogSheetContents,
|
|
297
350
|
DialogTitle,
|
|
298
351
|
DialogTrigger,
|
|
299
352
|
WarningProvider,
|