@tamagui/dialog 1.0.1-beta.101 → 1.0.1-beta.104
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/LICENSE +21 -0
- package/dist/cjs/Dialog.js +30 -22
- package/dist/cjs/Dialog.js.map +2 -2
- package/dist/esm/Dialog.js +29 -21
- package/dist/esm/Dialog.js.map +2 -2
- package/dist/jsx/Dialog.js +20 -19
- package/dist/jsx/Dialog.js.map +2 -2
- package/package.json +14 -14
- package/src/Dialog.tsx +41 -30
- package/types/Dialog.d.ts +24 -11
- package/types/Dialog.d.ts.map +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 WorkOS
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/cjs/Dialog.js
CHANGED
|
@@ -59,11 +59,10 @@ __export(Dialog_exports, {
|
|
|
59
59
|
DialogSheetContents: () => DialogSheetContents,
|
|
60
60
|
DialogTitle: () => DialogTitle,
|
|
61
61
|
DialogTrigger: () => DialogTrigger,
|
|
62
|
-
|
|
62
|
+
DialogWarningProvider: () => DialogWarningProvider,
|
|
63
63
|
createDialogScope: () => createDialogScope
|
|
64
64
|
});
|
|
65
65
|
module.exports = __toCommonJS(Dialog_exports);
|
|
66
|
-
var import_portal = require("@gorhom/portal");
|
|
67
66
|
var import_animate_presence = require("@tamagui/animate-presence");
|
|
68
67
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
69
68
|
var import_core = require("@tamagui/core");
|
|
@@ -71,6 +70,7 @@ var import_core2 = require("@tamagui/core");
|
|
|
71
70
|
var import_create_context = require("@tamagui/create-context");
|
|
72
71
|
var import_dismissable = require("@tamagui/dismissable");
|
|
73
72
|
var import_focus_scope = require("@tamagui/focus-scope");
|
|
73
|
+
var import_portal = require("@tamagui/portal");
|
|
74
74
|
var import_sheet = require("@tamagui/sheet");
|
|
75
75
|
var import_stacks = require("@tamagui/stacks");
|
|
76
76
|
var import_text = require("@tamagui/text");
|
|
@@ -120,10 +120,10 @@ const DialogPortal = DialogPortalFrame.extractable((props) => {
|
|
|
120
120
|
const isShowing = forceMount || context.open;
|
|
121
121
|
const contents = /* @__PURE__ */ React.createElement(import_animate_presence.AnimatePresence, null, isShowing ? children : null);
|
|
122
122
|
const isSheet = useShowDialogSheet(context);
|
|
123
|
-
if (!context.modal || isSheet
|
|
123
|
+
if (!context.modal || isSheet) {
|
|
124
124
|
return contents;
|
|
125
125
|
}
|
|
126
|
-
return /* @__PURE__ */ React.createElement(import_portal.
|
|
126
|
+
return /* @__PURE__ */ React.createElement(import_portal.PortalItem, null, /* @__PURE__ */ React.createElement(DialogProvider, __spreadValues({
|
|
127
127
|
scope: __scopeDialog
|
|
128
128
|
}, context), /* @__PURE__ */ React.createElement(import_core2.Theme, {
|
|
129
129
|
name: themeName
|
|
@@ -153,14 +153,15 @@ const DialogOverlay = React.forwardRef((_a, forwardedRef) => {
|
|
|
153
153
|
return null;
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
|
-
return /* @__PURE__ */ React.createElement(DialogOverlayImpl, __spreadProps(__spreadValues({
|
|
156
|
+
return /* @__PURE__ */ React.createElement(DialogOverlayImpl, __spreadProps(__spreadValues({
|
|
157
|
+
context
|
|
158
|
+
}, overlayProps), {
|
|
157
159
|
ref: forwardedRef
|
|
158
160
|
}));
|
|
159
161
|
});
|
|
160
162
|
DialogOverlay.displayName = OVERLAY_NAME;
|
|
161
163
|
const DialogOverlayImpl = React.forwardRef((props, forwardedRef) => {
|
|
162
|
-
const _a = props, {
|
|
163
|
-
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
164
|
+
const _a = props, { context } = _a, overlayProps = __objRest(_a, ["context"]);
|
|
164
165
|
const content = /* @__PURE__ */ React.createElement(DialogOverlayFrame, __spreadProps(__spreadValues({
|
|
165
166
|
"data-state": getState(context.open),
|
|
166
167
|
pointerEvents: "auto"
|
|
@@ -202,16 +203,19 @@ const DialogContent = DialogContentFrame.extractable(React.forwardRef((_c, forwa
|
|
|
202
203
|
const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
|
|
203
204
|
const _a = props, { forceMount = portalContext.forceMount } = _a, contentProps = __objRest(_a, ["forceMount"]);
|
|
204
205
|
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
205
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, __spreadProps(__spreadValues({
|
|
206
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, __spreadProps(__spreadValues({
|
|
207
|
+
context
|
|
208
|
+
}, contentProps), {
|
|
206
209
|
ref: forwardedRef
|
|
207
|
-
})) : /* @__PURE__ */ React.createElement(DialogContentNonModal, __spreadProps(__spreadValues({
|
|
210
|
+
})) : /* @__PURE__ */ React.createElement(DialogContentNonModal, __spreadProps(__spreadValues({
|
|
211
|
+
context
|
|
212
|
+
}, contentProps), {
|
|
208
213
|
ref: forwardedRef
|
|
209
214
|
})));
|
|
210
215
|
}));
|
|
211
216
|
DialogContent.displayName = CONTENT_NAME;
|
|
212
217
|
const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
213
|
-
var _f = _e, {
|
|
214
|
-
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
218
|
+
var _f = _e, { children, context } = _f, props = __objRest(_f, ["children", "context"]);
|
|
215
219
|
const contentRef = React.useRef(null);
|
|
216
220
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
|
|
217
221
|
React.useEffect(() => {
|
|
@@ -222,6 +226,7 @@ const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
|
222
226
|
return (0, import_aria_hidden.hideOthers)(content);
|
|
223
227
|
}, [context.open]);
|
|
224
228
|
return /* @__PURE__ */ React.createElement(DialogContentImpl, __spreadProps(__spreadValues({}, props), {
|
|
229
|
+
context,
|
|
225
230
|
ref: composedRefs,
|
|
226
231
|
trapFocus: context.open,
|
|
227
232
|
disableOutsidePointerEvents: true,
|
|
@@ -241,7 +246,6 @@ const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
|
241
246
|
}), children);
|
|
242
247
|
});
|
|
243
248
|
const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
244
|
-
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
245
249
|
const hasInteractedOutsideRef = React.useRef(false);
|
|
246
250
|
return /* @__PURE__ */ React.createElement(DialogContentImpl, __spreadProps(__spreadValues({}, props), {
|
|
247
251
|
ref: forwardedRef,
|
|
@@ -251,8 +255,9 @@ const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
|
251
255
|
var _a, _b;
|
|
252
256
|
(_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
|
|
253
257
|
if (!event.defaultPrevented) {
|
|
254
|
-
if (!hasInteractedOutsideRef.current)
|
|
255
|
-
(_b = context.triggerRef.current) == null ? void 0 : _b.focus();
|
|
258
|
+
if (!hasInteractedOutsideRef.current) {
|
|
259
|
+
(_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
|
|
260
|
+
}
|
|
256
261
|
event.preventDefault();
|
|
257
262
|
}
|
|
258
263
|
hasInteractedOutsideRef.current = false;
|
|
@@ -263,7 +268,7 @@ const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
|
263
268
|
if (!event.defaultPrevented)
|
|
264
269
|
hasInteractedOutsideRef.current = true;
|
|
265
270
|
const target = event.target;
|
|
266
|
-
const trigger = context.triggerRef.current;
|
|
271
|
+
const trigger = props.context.triggerRef.current;
|
|
267
272
|
if (!(trigger instanceof HTMLElement))
|
|
268
273
|
return;
|
|
269
274
|
const targetIsTrigger = trigger.contains(target);
|
|
@@ -282,7 +287,8 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
282
287
|
onEscapeKeyDown,
|
|
283
288
|
onPointerDownOutside,
|
|
284
289
|
onFocusOutside,
|
|
285
|
-
onInteractOutside
|
|
290
|
+
onInteractOutside,
|
|
291
|
+
context
|
|
286
292
|
} = _a, contentProps = __objRest(_a, [
|
|
287
293
|
"__scopeDialog",
|
|
288
294
|
"trapFocus",
|
|
@@ -292,9 +298,9 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
292
298
|
"onEscapeKeyDown",
|
|
293
299
|
"onPointerDownOutside",
|
|
294
300
|
"onFocusOutside",
|
|
295
|
-
"onInteractOutside"
|
|
301
|
+
"onInteractOutside",
|
|
302
|
+
"context"
|
|
296
303
|
]);
|
|
297
|
-
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
298
304
|
const contentRef = React.useRef(null);
|
|
299
305
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
300
306
|
const showSheet = useShowDialogSheet(context);
|
|
@@ -305,10 +311,13 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
305
311
|
"data-state": getState(context.open)
|
|
306
312
|
}, contentProps));
|
|
307
313
|
if (showSheet) {
|
|
308
|
-
return /* @__PURE__ */ React.createElement(import_portal.
|
|
314
|
+
return /* @__PURE__ */ React.createElement(import_portal.PortalItem, {
|
|
309
315
|
hostName: `${context.scopeKey}SheetContents`
|
|
310
316
|
}, contentProps.children);
|
|
311
317
|
}
|
|
318
|
+
if (!import_core2.isWeb) {
|
|
319
|
+
return contents;
|
|
320
|
+
}
|
|
312
321
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_focus_scope.FocusScope, {
|
|
313
322
|
loop: true,
|
|
314
323
|
trapped: trapFocus,
|
|
@@ -385,7 +394,7 @@ function getState(open) {
|
|
|
385
394
|
return open ? "open" : "closed";
|
|
386
395
|
}
|
|
387
396
|
const TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
388
|
-
const [
|
|
397
|
+
const [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
|
|
389
398
|
contentName: CONTENT_NAME,
|
|
390
399
|
titleName: TITLE_NAME,
|
|
391
400
|
docsSlug: "dialog"
|
|
@@ -485,7 +494,6 @@ const DialogSheetController = (props) => {
|
|
|
485
494
|
const breakpointActive = useDialogBreakpointActive(context);
|
|
486
495
|
const getShowSheet = (0, import_core.useGet)(showSheet);
|
|
487
496
|
return /* @__PURE__ */ React.createElement(import_sheet.SheetController, {
|
|
488
|
-
disableDrag: true,
|
|
489
497
|
onChangeOpen: (val) => {
|
|
490
498
|
if (getShowSheet()) {
|
|
491
499
|
props.onChangeOpen(val);
|
|
@@ -515,7 +523,7 @@ const useShowDialogSheet = (context) => {
|
|
|
515
523
|
DialogSheetContents,
|
|
516
524
|
DialogTitle,
|
|
517
525
|
DialogTrigger,
|
|
518
|
-
|
|
526
|
+
DialogWarningProvider,
|
|
519
527
|
createDialogScope
|
|
520
528
|
});
|
|
521
529
|
//# sourceMappingURL=Dialog.js.map
|
package/dist/cjs/Dialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Dialog.tsx"],
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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 TamaguiElement,\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 { RemoveScroll } from 'react-remove-scroll'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\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 context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n 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\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n return (\n <>\n {context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...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 context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ children, context, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\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 context={context}\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 hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n 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 [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n 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 DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Dialog.js
CHANGED
|
@@ -29,7 +29,6 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
-
import { Portal, PortalHost } from "@gorhom/portal";
|
|
33
32
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
34
33
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
35
34
|
import { useGet } from "@tamagui/core";
|
|
@@ -47,6 +46,7 @@ import {
|
|
|
47
46
|
import { createContext, createContextScope } from "@tamagui/create-context";
|
|
48
47
|
import { Dismissable } from "@tamagui/dismissable";
|
|
49
48
|
import { FocusScope } from "@tamagui/focus-scope";
|
|
49
|
+
import { PortalHost, PortalItem } from "@tamagui/portal";
|
|
50
50
|
import { Sheet, SheetController } from "@tamagui/sheet";
|
|
51
51
|
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
52
52
|
import { H2, Paragraph } from "@tamagui/text";
|
|
@@ -96,10 +96,10 @@ const DialogPortal = DialogPortalFrame.extractable((props) => {
|
|
|
96
96
|
const isShowing = forceMount || context.open;
|
|
97
97
|
const contents = /* @__PURE__ */ React.createElement(AnimatePresence, null, isShowing ? children : null);
|
|
98
98
|
const isSheet = useShowDialogSheet(context);
|
|
99
|
-
if (!context.modal || isSheet
|
|
99
|
+
if (!context.modal || isSheet) {
|
|
100
100
|
return contents;
|
|
101
101
|
}
|
|
102
|
-
return /* @__PURE__ */ React.createElement(
|
|
102
|
+
return /* @__PURE__ */ React.createElement(PortalItem, null, /* @__PURE__ */ React.createElement(DialogProvider, __spreadValues({
|
|
103
103
|
scope: __scopeDialog
|
|
104
104
|
}, context), /* @__PURE__ */ React.createElement(Theme, {
|
|
105
105
|
name: themeName
|
|
@@ -129,14 +129,15 @@ const DialogOverlay = React.forwardRef((_a, forwardedRef) => {
|
|
|
129
129
|
return null;
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
return /* @__PURE__ */ React.createElement(DialogOverlayImpl, __spreadProps(__spreadValues({
|
|
132
|
+
return /* @__PURE__ */ React.createElement(DialogOverlayImpl, __spreadProps(__spreadValues({
|
|
133
|
+
context
|
|
134
|
+
}, overlayProps), {
|
|
133
135
|
ref: forwardedRef
|
|
134
136
|
}));
|
|
135
137
|
});
|
|
136
138
|
DialogOverlay.displayName = OVERLAY_NAME;
|
|
137
139
|
const DialogOverlayImpl = React.forwardRef((props, forwardedRef) => {
|
|
138
|
-
const _a = props, {
|
|
139
|
-
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
140
|
+
const _a = props, { context } = _a, overlayProps = __objRest(_a, ["context"]);
|
|
140
141
|
const content = /* @__PURE__ */ React.createElement(DialogOverlayFrame, __spreadProps(__spreadValues({
|
|
141
142
|
"data-state": getState(context.open),
|
|
142
143
|
pointerEvents: "auto"
|
|
@@ -178,16 +179,19 @@ const DialogContent = DialogContentFrame.extractable(React.forwardRef((_c, forwa
|
|
|
178
179
|
const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
|
|
179
180
|
const _a = props, { forceMount = portalContext.forceMount } = _a, contentProps = __objRest(_a, ["forceMount"]);
|
|
180
181
|
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
181
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, __spreadProps(__spreadValues({
|
|
182
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, __spreadProps(__spreadValues({
|
|
183
|
+
context
|
|
184
|
+
}, contentProps), {
|
|
182
185
|
ref: forwardedRef
|
|
183
|
-
})) : /* @__PURE__ */ React.createElement(DialogContentNonModal, __spreadProps(__spreadValues({
|
|
186
|
+
})) : /* @__PURE__ */ React.createElement(DialogContentNonModal, __spreadProps(__spreadValues({
|
|
187
|
+
context
|
|
188
|
+
}, contentProps), {
|
|
184
189
|
ref: forwardedRef
|
|
185
190
|
})));
|
|
186
191
|
}));
|
|
187
192
|
DialogContent.displayName = CONTENT_NAME;
|
|
188
193
|
const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
189
|
-
var _f = _e, {
|
|
190
|
-
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
194
|
+
var _f = _e, { children, context } = _f, props = __objRest(_f, ["children", "context"]);
|
|
191
195
|
const contentRef = React.useRef(null);
|
|
192
196
|
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
193
197
|
React.useEffect(() => {
|
|
@@ -198,6 +202,7 @@ const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
|
198
202
|
return hideOthers(content);
|
|
199
203
|
}, [context.open]);
|
|
200
204
|
return /* @__PURE__ */ React.createElement(DialogContentImpl, __spreadProps(__spreadValues({}, props), {
|
|
205
|
+
context,
|
|
201
206
|
ref: composedRefs,
|
|
202
207
|
trapFocus: context.open,
|
|
203
208
|
disableOutsidePointerEvents: true,
|
|
@@ -217,7 +222,6 @@ const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
|
|
|
217
222
|
}), children);
|
|
218
223
|
});
|
|
219
224
|
const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
220
|
-
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
221
225
|
const hasInteractedOutsideRef = React.useRef(false);
|
|
222
226
|
return /* @__PURE__ */ React.createElement(DialogContentImpl, __spreadProps(__spreadValues({}, props), {
|
|
223
227
|
ref: forwardedRef,
|
|
@@ -227,8 +231,9 @@ const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
|
227
231
|
var _a, _b;
|
|
228
232
|
(_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
|
|
229
233
|
if (!event.defaultPrevented) {
|
|
230
|
-
if (!hasInteractedOutsideRef.current)
|
|
231
|
-
(_b = context.triggerRef.current) == null ? void 0 : _b.focus();
|
|
234
|
+
if (!hasInteractedOutsideRef.current) {
|
|
235
|
+
(_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
|
|
236
|
+
}
|
|
232
237
|
event.preventDefault();
|
|
233
238
|
}
|
|
234
239
|
hasInteractedOutsideRef.current = false;
|
|
@@ -239,7 +244,7 @@ const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
|
239
244
|
if (!event.defaultPrevented)
|
|
240
245
|
hasInteractedOutsideRef.current = true;
|
|
241
246
|
const target = event.target;
|
|
242
|
-
const trigger = context.triggerRef.current;
|
|
247
|
+
const trigger = props.context.triggerRef.current;
|
|
243
248
|
if (!(trigger instanceof HTMLElement))
|
|
244
249
|
return;
|
|
245
250
|
const targetIsTrigger = trigger.contains(target);
|
|
@@ -258,7 +263,8 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
258
263
|
onEscapeKeyDown,
|
|
259
264
|
onPointerDownOutside,
|
|
260
265
|
onFocusOutside,
|
|
261
|
-
onInteractOutside
|
|
266
|
+
onInteractOutside,
|
|
267
|
+
context
|
|
262
268
|
} = _a, contentProps = __objRest(_a, [
|
|
263
269
|
"__scopeDialog",
|
|
264
270
|
"trapFocus",
|
|
@@ -268,9 +274,9 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
268
274
|
"onEscapeKeyDown",
|
|
269
275
|
"onPointerDownOutside",
|
|
270
276
|
"onFocusOutside",
|
|
271
|
-
"onInteractOutside"
|
|
277
|
+
"onInteractOutside",
|
|
278
|
+
"context"
|
|
272
279
|
]);
|
|
273
|
-
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
274
280
|
const contentRef = React.useRef(null);
|
|
275
281
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
276
282
|
const showSheet = useShowDialogSheet(context);
|
|
@@ -281,10 +287,13 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
281
287
|
"data-state": getState(context.open)
|
|
282
288
|
}, contentProps));
|
|
283
289
|
if (showSheet) {
|
|
284
|
-
return /* @__PURE__ */ React.createElement(
|
|
290
|
+
return /* @__PURE__ */ React.createElement(PortalItem, {
|
|
285
291
|
hostName: `${context.scopeKey}SheetContents`
|
|
286
292
|
}, contentProps.children);
|
|
287
293
|
}
|
|
294
|
+
if (!isWeb) {
|
|
295
|
+
return contents;
|
|
296
|
+
}
|
|
288
297
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FocusScope, {
|
|
289
298
|
loop: true,
|
|
290
299
|
trapped: trapFocus,
|
|
@@ -361,7 +370,7 @@ function getState(open) {
|
|
|
361
370
|
return open ? "open" : "closed";
|
|
362
371
|
}
|
|
363
372
|
const TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
364
|
-
const [
|
|
373
|
+
const [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
|
|
365
374
|
contentName: CONTENT_NAME,
|
|
366
375
|
titleName: TITLE_NAME,
|
|
367
376
|
docsSlug: "dialog"
|
|
@@ -461,7 +470,6 @@ const DialogSheetController = (props) => {
|
|
|
461
470
|
const breakpointActive = useDialogBreakpointActive(context);
|
|
462
471
|
const getShowSheet = useGet(showSheet);
|
|
463
472
|
return /* @__PURE__ */ React.createElement(SheetController, {
|
|
464
|
-
disableDrag: true,
|
|
465
473
|
onChangeOpen: (val) => {
|
|
466
474
|
if (getShowSheet()) {
|
|
467
475
|
props.onChangeOpen(val);
|
|
@@ -490,7 +498,7 @@ export {
|
|
|
490
498
|
DialogSheetContents,
|
|
491
499
|
DialogTitle,
|
|
492
500
|
DialogTrigger,
|
|
493
|
-
|
|
501
|
+
DialogWarningProvider,
|
|
494
502
|
createDialogScope
|
|
495
503
|
};
|
|
496
504
|
//# sourceMappingURL=Dialog.js.map
|