@tamagui/dialog 1.0.1-beta.100 → 1.0.1-beta.101
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 +116 -53
- package/dist/cjs/Dialog.js.map +2 -2
- package/dist/esm/Dialog.js +96 -34
- package/dist/esm/Dialog.js.map +2 -2
- package/dist/jsx/Dialog.js +71 -21
- package/dist/jsx/Dialog.js.map +2 -2
- package/package.json +15 -15
- package/src/Dialog.tsx +179 -82
- package/types/Dialog.d.ts +130 -6
- package/types/Dialog.d.ts.map +1 -1
package/dist/esm/Dialog.js
CHANGED
|
@@ -29,8 +29,10 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
+
import { Portal, PortalHost } from "@gorhom/portal";
|
|
32
33
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
33
34
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
35
|
+
import { useGet } from "@tamagui/core";
|
|
34
36
|
import {
|
|
35
37
|
Slot,
|
|
36
38
|
Theme,
|
|
@@ -38,13 +40,14 @@ import {
|
|
|
38
40
|
isWeb,
|
|
39
41
|
styled,
|
|
40
42
|
useId,
|
|
43
|
+
useMedia,
|
|
41
44
|
useThemeName,
|
|
42
45
|
withStaticProperties
|
|
43
46
|
} from "@tamagui/core";
|
|
44
47
|
import { createContext, createContextScope } from "@tamagui/create-context";
|
|
45
48
|
import { Dismissable } from "@tamagui/dismissable";
|
|
46
49
|
import { FocusScope } from "@tamagui/focus-scope";
|
|
47
|
-
import {
|
|
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 || !isWeb && !isShowing) {
|
|
88
100
|
return contents;
|
|
89
101
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
102
|
+
return /* @__PURE__ */ React.createElement(Portal, 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,18 @@ 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(Portal, {
|
|
285
|
+
hostName: `${context.scopeKey}SheetContents`
|
|
286
|
+
}, contentProps.children);
|
|
287
|
+
}
|
|
267
288
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FocusScope, {
|
|
268
289
|
loop: true,
|
|
269
290
|
trapped: trapFocus,
|
|
@@ -277,18 +298,21 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
277
298
|
onInteractOutside,
|
|
278
299
|
ref: composedRefs,
|
|
279
300
|
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, {
|
|
301
|
+
}, contents)), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
|
|
286
302
|
titleId: context.titleId
|
|
287
303
|
}), /* @__PURE__ */ React.createElement(DescriptionWarning, {
|
|
288
304
|
contentRef,
|
|
289
305
|
descriptionId: context.descriptionId
|
|
290
306
|
})));
|
|
291
307
|
});
|
|
308
|
+
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
309
|
+
const DialogSheetContents = ({ __scopeDialog }) => {
|
|
310
|
+
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
|
|
311
|
+
return /* @__PURE__ */ React.createElement(PortalHost, {
|
|
312
|
+
name: `${context.scopeKey}SheetContents`
|
|
313
|
+
});
|
|
314
|
+
};
|
|
315
|
+
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
292
316
|
const TITLE_NAME = "DialogTitle";
|
|
293
317
|
const DialogTitleFrame = styled(H2, {
|
|
294
318
|
name: TITLE_NAME
|
|
@@ -321,6 +345,10 @@ const CLOSE_NAME = "DialogClose";
|
|
|
321
345
|
const DialogClose = React.forwardRef((props, forwardedRef) => {
|
|
322
346
|
const _a = props, { __scopeDialog } = _a, closeProps = __objRest(_a, ["__scopeDialog"]);
|
|
323
347
|
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
348
|
+
const isSheet = useShowDialogSheet(context);
|
|
349
|
+
if (isSheet) {
|
|
350
|
+
return null;
|
|
351
|
+
}
|
|
324
352
|
return /* @__PURE__ */ React.createElement(YStack, __spreadProps(__spreadValues({
|
|
325
353
|
tag: "button"
|
|
326
354
|
}, closeProps), {
|
|
@@ -384,7 +412,8 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
384
412
|
defaultOpen = false,
|
|
385
413
|
onOpenChange,
|
|
386
414
|
modal = true,
|
|
387
|
-
allowPinchZoom = false
|
|
415
|
+
allowPinchZoom = false,
|
|
416
|
+
sheetBreakpoint = false
|
|
388
417
|
} = props;
|
|
389
418
|
const triggerRef = React.useRef(null);
|
|
390
419
|
const contentRef = React.useRef(null);
|
|
@@ -398,6 +427,7 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
398
427
|
}), [setOpen]);
|
|
399
428
|
return /* @__PURE__ */ React.createElement(DialogProvider, {
|
|
400
429
|
scope: __scopeDialog,
|
|
430
|
+
scopeKey: __scopeDialog ? Object.keys(__scopeDialog)[0] : "",
|
|
401
431
|
triggerRef,
|
|
402
432
|
contentRef,
|
|
403
433
|
contentId: useId() || "",
|
|
@@ -407,8 +437,12 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
407
437
|
onOpenChange: setOpen,
|
|
408
438
|
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
409
439
|
modal,
|
|
410
|
-
allowPinchZoom
|
|
411
|
-
|
|
440
|
+
allowPinchZoom,
|
|
441
|
+
sheetBreakpoint
|
|
442
|
+
}, /* @__PURE__ */ React.createElement(DialogSheetController, {
|
|
443
|
+
onChangeOpen: setOpen,
|
|
444
|
+
__scopeDialog
|
|
445
|
+
}, children));
|
|
412
446
|
});
|
|
413
447
|
const Dialog2 = withStaticProperties(DialogInner, {
|
|
414
448
|
Trigger: DialogTrigger,
|
|
@@ -417,8 +451,34 @@ const Dialog2 = withStaticProperties(DialogInner, {
|
|
|
417
451
|
Content: DialogContent,
|
|
418
452
|
Title: DialogTitle,
|
|
419
453
|
Description: DialogDescription,
|
|
420
|
-
Close: DialogClose
|
|
454
|
+
Close: DialogClose,
|
|
455
|
+
SheetContents: DialogSheetContents,
|
|
456
|
+
Sheet
|
|
421
457
|
});
|
|
458
|
+
const DialogSheetController = (props) => {
|
|
459
|
+
const context = useDialogContext("DialogSheetController", props.__scopeDialog);
|
|
460
|
+
const showSheet = useShowDialogSheet(context);
|
|
461
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
462
|
+
const getShowSheet = useGet(showSheet);
|
|
463
|
+
return /* @__PURE__ */ React.createElement(SheetController, {
|
|
464
|
+
disableDrag: true,
|
|
465
|
+
onChangeOpen: (val) => {
|
|
466
|
+
if (getShowSheet()) {
|
|
467
|
+
props.onChangeOpen(val);
|
|
468
|
+
}
|
|
469
|
+
},
|
|
470
|
+
open: context.open,
|
|
471
|
+
hidden: breakpointActive === false
|
|
472
|
+
}, props.children);
|
|
473
|
+
};
|
|
474
|
+
const useDialogBreakpointActive = (context) => {
|
|
475
|
+
const media = useMedia();
|
|
476
|
+
return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
|
|
477
|
+
};
|
|
478
|
+
const useShowDialogSheet = (context) => {
|
|
479
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
480
|
+
return context.open === false ? false : breakpointActive;
|
|
481
|
+
};
|
|
422
482
|
export {
|
|
423
483
|
Dialog2 as Dialog,
|
|
424
484
|
DialogClose,
|
|
@@ -426,6 +486,8 @@ export {
|
|
|
426
486
|
DialogDescription,
|
|
427
487
|
DialogOverlay,
|
|
428
488
|
DialogPortal,
|
|
489
|
+
DialogPortalFrame,
|
|
490
|
+
DialogSheetContents,
|
|
429
491
|
DialogTitle,
|
|
430
492
|
DialogTrigger,
|
|
431
493
|
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 { Portal, PortalHost } from '@gorhom/portal'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { useEvent, 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 { 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 PortalType = typeof Portal\ntype PortalProps = PortalType extends (props: infer Props) => any ? Props : never\n\ntype DialogPortalProps = Omit<PortalProps, '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 || (!isWeb && !isShowing)) {\n return contents\n }\n return (\n <Portal>\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 </Portal>\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 <Portal hostName={`${context.scopeKey}SheetContents`}>{contentProps.children}</Portal>\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 disableDrag\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,7 @@
|
|
|
1
|
+
import { Portal, PortalHost } from "@gorhom/portal";
|
|
1
2
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
2
3
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
|
+
import { useGet } from "@tamagui/core";
|
|
3
5
|
import {
|
|
4
6
|
Slot,
|
|
5
7
|
Theme,
|
|
@@ -7,13 +9,14 @@ import {
|
|
|
7
9
|
isWeb,
|
|
8
10
|
styled,
|
|
9
11
|
useId,
|
|
12
|
+
useMedia,
|
|
10
13
|
useThemeName,
|
|
11
14
|
withStaticProperties
|
|
12
15
|
} from "@tamagui/core";
|
|
13
16
|
import { createContext, createContextScope } from "@tamagui/create-context";
|
|
14
17
|
import { Dismissable } from "@tamagui/dismissable";
|
|
15
18
|
import { FocusScope } from "@tamagui/focus-scope";
|
|
16
|
-
import {
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
if (!isWeb && !isShowing) {
|
|
59
|
+
const isSheet = useShowDialogSheet(context);
|
|
60
|
+
if (!context.modal || isSheet || !isWeb && !isShowing) {
|
|
51
61
|
return contents;
|
|
52
62
|
}
|
|
53
|
-
return <
|
|
54
|
-
|
|
55
|
-
}} {...rest}><Theme name={themeName}>{contents}</Theme></Portal></PortalProvider>;
|
|
56
|
-
};
|
|
63
|
+
return <Portal><DialogProvider scope={__scopeDialog} {...context}><Theme name={themeName}><PortalProvider scope={__scopeDialog} forceMount={forceMount}><DialogPortalFrame pointerEvents={isShowing ? "auto" : "none"} {...frameProps}>{contents}</DialogPortalFrame></PortalProvider></Theme></DialogProvider></Portal>;
|
|
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,25 @@ 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 <Portal hostName={`${context.scopeKey}SheetContents`}>{contentProps.children}</Portal>;
|
|
192
|
+
}
|
|
177
193
|
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)}
|
|
194
|
+
<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
195
|
{process.env.NODE_ENV === "development" && <>
|
|
180
196
|
<TitleWarning titleId={context.titleId} />
|
|
181
197
|
<DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />
|
|
182
198
|
</>}
|
|
183
199
|
</>;
|
|
184
200
|
});
|
|
201
|
+
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
202
|
+
const DialogSheetContents = ({ __scopeDialog }) => {
|
|
203
|
+
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
|
|
204
|
+
return <PortalHost name={`${context.scopeKey}SheetContents`} />;
|
|
205
|
+
};
|
|
206
|
+
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
185
207
|
const TITLE_NAME = "DialogTitle";
|
|
186
208
|
const DialogTitleFrame = styled(H2, {
|
|
187
209
|
name: TITLE_NAME
|
|
@@ -206,6 +228,10 @@ const CLOSE_NAME = "DialogClose";
|
|
|
206
228
|
const DialogClose = React.forwardRef((props, forwardedRef) => {
|
|
207
229
|
const { __scopeDialog, ...closeProps } = props;
|
|
208
230
|
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
231
|
+
const isSheet = useShowDialogSheet(context);
|
|
232
|
+
if (isSheet) {
|
|
233
|
+
return null;
|
|
234
|
+
}
|
|
209
235
|
return <YStack tag="button" {...closeProps} ref={forwardedRef} onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))} />;
|
|
210
236
|
});
|
|
211
237
|
DialogClose.displayName = CLOSE_NAME;
|
|
@@ -264,7 +290,8 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
264
290
|
defaultOpen = false,
|
|
265
291
|
onOpenChange,
|
|
266
292
|
modal = true,
|
|
267
|
-
allowPinchZoom = false
|
|
293
|
+
allowPinchZoom = false,
|
|
294
|
+
sheetBreakpoint = false
|
|
268
295
|
} = props;
|
|
269
296
|
const triggerRef = React.useRef(null);
|
|
270
297
|
const contentRef = React.useRef(null);
|
|
@@ -276,7 +303,7 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
|
|
|
276
303
|
React.useImperativeHandle(ref, () => ({
|
|
277
304
|
open: setOpen
|
|
278
305
|
}), [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>;
|
|
306
|
+
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
307
|
});
|
|
281
308
|
const Dialog2 = withStaticProperties(DialogInner, {
|
|
282
309
|
Trigger: DialogTrigger,
|
|
@@ -285,8 +312,29 @@ const Dialog2 = withStaticProperties(DialogInner, {
|
|
|
285
312
|
Content: DialogContent,
|
|
286
313
|
Title: DialogTitle,
|
|
287
314
|
Description: DialogDescription,
|
|
288
|
-
Close: DialogClose
|
|
315
|
+
Close: DialogClose,
|
|
316
|
+
SheetContents: DialogSheetContents,
|
|
317
|
+
Sheet
|
|
289
318
|
});
|
|
319
|
+
const DialogSheetController = (props) => {
|
|
320
|
+
const context = useDialogContext("DialogSheetController", props.__scopeDialog);
|
|
321
|
+
const showSheet = useShowDialogSheet(context);
|
|
322
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
323
|
+
const getShowSheet = useGet(showSheet);
|
|
324
|
+
return <SheetController disableDrag onChangeOpen={(val) => {
|
|
325
|
+
if (getShowSheet()) {
|
|
326
|
+
props.onChangeOpen(val);
|
|
327
|
+
}
|
|
328
|
+
}} open={context.open} hidden={breakpointActive === false}>{props.children}</SheetController>;
|
|
329
|
+
};
|
|
330
|
+
const useDialogBreakpointActive = (context) => {
|
|
331
|
+
const media = useMedia();
|
|
332
|
+
return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
|
|
333
|
+
};
|
|
334
|
+
const useShowDialogSheet = (context) => {
|
|
335
|
+
const breakpointActive = useDialogBreakpointActive(context);
|
|
336
|
+
return context.open === false ? false : breakpointActive;
|
|
337
|
+
};
|
|
290
338
|
export {
|
|
291
339
|
Dialog2 as Dialog,
|
|
292
340
|
DialogClose,
|
|
@@ -294,6 +342,8 @@ export {
|
|
|
294
342
|
DialogDescription,
|
|
295
343
|
DialogOverlay,
|
|
296
344
|
DialogPortal,
|
|
345
|
+
DialogPortalFrame,
|
|
346
|
+
DialogSheetContents,
|
|
297
347
|
DialogTitle,
|
|
298
348
|
DialogTrigger,
|
|
299
349
|
WarningProvider,
|