@tamagui/dialog 1.114.4 → 1.115.0

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.
@@ -0,0 +1,603 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf,
6
+ __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all) __defProp(target, name, {
9
+ get: all[name],
10
+ enumerable: !0
11
+ });
12
+ },
13
+ __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
15
+ get: () => from[key],
16
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
17
+ });
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
26
+ value: mod,
27
+ enumerable: !0
28
+ }) : target, mod)),
29
+ __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
30
+ value: !0
31
+ }), mod);
32
+ var Dialog_exports = {};
33
+ __export(Dialog_exports, {
34
+ Dialog: () => Dialog,
35
+ DialogClose: () => DialogClose,
36
+ DialogContent: () => DialogContent,
37
+ DialogDescription: () => DialogDescription,
38
+ DialogOverlay: () => DialogOverlay,
39
+ DialogOverlayFrame: () => DialogOverlayFrame,
40
+ DialogPortal: () => DialogPortal,
41
+ DialogPortalFrame: () => DialogPortalFrame,
42
+ DialogSheetContents: () => DialogSheetContents,
43
+ DialogTitle: () => DialogTitle,
44
+ DialogTrigger: () => DialogTrigger,
45
+ DialogWarningProvider: () => DialogWarningProvider,
46
+ createDialogScope: () => createDialogScope
47
+ });
48
+ module.exports = __toCommonJS(Dialog_exports);
49
+ var import_adapt = require("@tamagui/adapt"),
50
+ import_animate_presence = require("@tamagui/animate-presence"),
51
+ import_aria_hidden = require("@tamagui/aria-hidden"),
52
+ import_compose_refs = require("@tamagui/compose-refs"),
53
+ import_constants = require("@tamagui/constants"),
54
+ import_core = require("@tamagui/core"),
55
+ import_create_context = require("@tamagui/create-context"),
56
+ import_dismissable = require("@tamagui/dismissable"),
57
+ import_focus_scope = require("@tamagui/focus-scope"),
58
+ import_helpers = require("@tamagui/helpers"),
59
+ import_portal = require("@tamagui/portal"),
60
+ import_remove_scroll = require("@tamagui/remove-scroll"),
61
+ import_sheet = require("@tamagui/sheet"),
62
+ import_stacks = require("@tamagui/stacks"),
63
+ import_text = require("@tamagui/text"),
64
+ import_use_controllable_state = require("@tamagui/use-controllable-state"),
65
+ React = __toESM(require("react")),
66
+ import_jsx_runtime = require("react/jsx-runtime");
67
+ const DIALOG_NAME = "Dialog",
68
+ [createDialogContext, createDialogScope] = (0, import_create_context.createContextScope)(DIALOG_NAME),
69
+ [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME),
70
+ TRIGGER_NAME = "DialogTrigger",
71
+ DialogTriggerFrame = (0, import_core.styled)(import_core.View, {
72
+ name: TRIGGER_NAME
73
+ }),
74
+ DialogTrigger = DialogTriggerFrame.styleable(function (props, forwardedRef) {
75
+ const {
76
+ __scopeDialog,
77
+ ...triggerProps
78
+ } = props,
79
+ isInsideButton = React.useContext(import_stacks.ButtonNestingContext),
80
+ context = useDialogContext(TRIGGER_NAME, __scopeDialog),
81
+ composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
82
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
83
+ value: !0,
84
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
85
+ tag: isInsideButton ? "span" : "button",
86
+ "aria-haspopup": "dialog",
87
+ "aria-expanded": context.open,
88
+ "aria-controls": context.contentId,
89
+ "data-state": getState(context.open),
90
+ ...triggerProps,
91
+ ref: composedTriggerRef,
92
+ onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
93
+ })
94
+ });
95
+ }),
96
+ PORTAL_NAME = "DialogPortal",
97
+ [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
98
+ forceMount: void 0
99
+ }),
100
+ DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
101
+ pointerEvents: "none",
102
+ variants: {
103
+ unstyled: {
104
+ false: {
105
+ alignItems: "center",
106
+ justifyContent: "center",
107
+ fullscreen: !0,
108
+ zIndex: 1e5,
109
+ ...(import_constants.isWeb && {
110
+ maxHeight: "100vh",
111
+ position: "fixed"
112
+ })
113
+ }
114
+ }
115
+ },
116
+ defaultVariants: {
117
+ unstyled: process.env.TAMAGUI_HEADLESS === "1"
118
+ }
119
+ }),
120
+ DialogPortalItem = props => {
121
+ const themeName = (0, import_core.useThemeName)(),
122
+ context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
123
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
124
+ hostName: props.hostName,
125
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItemContent, {
126
+ ...props,
127
+ themeName,
128
+ context
129
+ })
130
+ });
131
+ };
132
+ function DialogPortalItemContent(props) {
133
+ const {
134
+ __scopeDialog,
135
+ children,
136
+ context,
137
+ themeName,
138
+ space,
139
+ spaceDirection,
140
+ separator
141
+ } = props;
142
+ let childrenSpaced = children;
143
+ return (space || separator) && (childrenSpaced = (0, import_core.spacedChildren)({
144
+ children,
145
+ separator,
146
+ space,
147
+ direction: spaceDirection
148
+ })), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
149
+ scope: __scopeDialog,
150
+ ...context,
151
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
152
+ name: themeName,
153
+ children: childrenSpaced
154
+ })
155
+ });
156
+ }
157
+ const DialogPortal = props => {
158
+ const {
159
+ __scopeDialog,
160
+ forceMount,
161
+ children,
162
+ ...frameProps
163
+ } = props,
164
+ context = useDialogContext(PORTAL_NAME, __scopeDialog),
165
+ isShowing = forceMount || context.open,
166
+ [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
167
+ isShowing && isFullyHidden && setIsFullyHidden(!1);
168
+ const handleExitComplete = React.useCallback(() => {
169
+ setIsFullyHidden(!0);
170
+ }, []),
171
+ contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
172
+ onExitComplete: handleExitComplete,
173
+ children: isShowing ? children : null
174
+ });
175
+ if (useShowDialogSheet(context)) return children;
176
+ if (context.modal) {
177
+ if (isFullyHidden) return null;
178
+ const framedContents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(PortalProvider, {
179
+ scope: __scopeDialog,
180
+ forceMount,
181
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalFrame, {
182
+ pointerEvents: isShowing ? "auto" : "none",
183
+ ...frameProps,
184
+ children: contents
185
+ })
186
+ });
187
+ return import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
188
+ zIndex: props.zIndex ?? 1e5,
189
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PassthroughTheme, {
190
+ children: framedContents
191
+ })
192
+ }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
193
+ __scopeDialog,
194
+ children: framedContents
195
+ });
196
+ }
197
+ return contents;
198
+ },
199
+ PassthroughTheme = ({
200
+ children
201
+ }) => {
202
+ const themeName = (0, import_core.useThemeName)();
203
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
204
+ name: themeName,
205
+ forceClassName: !0,
206
+ children
207
+ });
208
+ },
209
+ OVERLAY_NAME = "DialogOverlay",
210
+ DialogOverlayFrame = (0, import_core.styled)(import_sheet.Overlay, {
211
+ name: OVERLAY_NAME
212
+ }),
213
+ DialogOverlay = DialogOverlayFrame.extractable(React.forwardRef(function ({
214
+ __scopeDialog,
215
+ ...props
216
+ }, forwardedRef) {
217
+ const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog),
218
+ {
219
+ forceMount = portalContext.forceMount,
220
+ ...overlayProps
221
+ } = props,
222
+ context = useDialogContext(OVERLAY_NAME, __scopeDialog),
223
+ showSheet = useShowDialogSheet(context);
224
+ return !forceMount && (!context.modal || showSheet) ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
225
+ "data-state": getState(context.open),
226
+ pointerEvents: context.open ? "auto" : "none",
227
+ ...overlayProps,
228
+ ref: forwardedRef
229
+ });
230
+ })),
231
+ CONTENT_NAME = "DialogContent",
232
+ DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
233
+ name: CONTENT_NAME,
234
+ tag: "dialog",
235
+ variants: {
236
+ size: {
237
+ "...size": (val, extras) => ({})
238
+ },
239
+ unstyled: {
240
+ false: {
241
+ position: "relative",
242
+ backgrounded: !0,
243
+ padded: !0,
244
+ radiused: !0,
245
+ elevate: !0,
246
+ zIndex: 1e5
247
+ }
248
+ }
249
+ },
250
+ defaultVariants: {
251
+ size: "$true",
252
+ unstyled: process.env.TAMAGUI_HEADLESS === "1"
253
+ }
254
+ }),
255
+ DialogContent = DialogContentFrame.extractable(React.forwardRef(function ({
256
+ __scopeDialog,
257
+ ...props
258
+ }, forwardedRef) {
259
+ const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog),
260
+ {
261
+ forceMount = portalContext.forceMount,
262
+ ...contentProps
263
+ } = props,
264
+ context = useDialogContext(CONTENT_NAME, __scopeDialog),
265
+ contents = context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentModal, {
266
+ context,
267
+ ...contentProps,
268
+ ref: forwardedRef
269
+ }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentNonModal, {
270
+ context,
271
+ ...contentProps,
272
+ ref: forwardedRef
273
+ });
274
+ return !import_constants.isWeb || context.disableRemoveScroll ? contents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
275
+ forwardProps: !0,
276
+ enabled: context.open,
277
+ allowPinchZoom: context.allowPinchZoom,
278
+ shards: [context.contentRef],
279
+ removeScrollBar: !1,
280
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
281
+ "data-remove-scroll-container": !0,
282
+ className: "_dsp_contents",
283
+ children: contents
284
+ })
285
+ });
286
+ })),
287
+ DialogContentModal = React.forwardRef(({
288
+ children,
289
+ context,
290
+ ...props
291
+ }, forwardedRef) => {
292
+ const contentRef = React.useRef(null),
293
+ composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
294
+ return import_constants.isWeb && React.useEffect(() => {
295
+ if (!context.open) return;
296
+ const content = contentRef.current;
297
+ if (content) return (0, import_aria_hidden.hideOthers)(content);
298
+ }, [context.open]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
299
+ ...props,
300
+ context,
301
+ ref: composedRefs,
302
+ trapFocus: context.open,
303
+ disableOutsidePointerEvents: !0,
304
+ onCloseAutoFocus: (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, event => {
305
+ event.preventDefault(), context.triggerRef.current?.focus();
306
+ }),
307
+ onPointerDownOutside: (0, import_helpers.composeEventHandlers)(props.onPointerDownOutside, event => {
308
+ const originalEvent = event.detail.originalEvent,
309
+ ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0;
310
+ (originalEvent.button === 2 || ctrlLeftClick) && event.preventDefault();
311
+ }),
312
+ onFocusOutside: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, event => event.preventDefault()),
313
+ ...(!props.unstyled && {
314
+ outlineStyle: "none"
315
+ }),
316
+ children
317
+ });
318
+ }),
319
+ DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
320
+ const hasInteractedOutsideRef = React.useRef(!1);
321
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
322
+ ...props,
323
+ ref: forwardedRef,
324
+ trapFocus: !1,
325
+ disableOutsidePointerEvents: !1,
326
+ onCloseAutoFocus: event => {
327
+ props.onCloseAutoFocus?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current || props.context.triggerRef.current?.focus(), event.preventDefault()), hasInteractedOutsideRef.current = !1;
328
+ },
329
+ onInteractOutside: event => {
330
+ props.onInteractOutside?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
331
+ const target = event.target,
332
+ trigger = props.context.triggerRef.current;
333
+ if (!(trigger instanceof HTMLElement)) return;
334
+ trigger.contains(target) && event.preventDefault();
335
+ }
336
+ });
337
+ }),
338
+ DialogContentImpl = React.forwardRef((props, forwardedRef) => {
339
+ const {
340
+ __scopeDialog,
341
+ trapFocus,
342
+ onOpenAutoFocus,
343
+ onCloseAutoFocus,
344
+ disableOutsidePointerEvents,
345
+ onEscapeKeyDown,
346
+ onPointerDownOutside,
347
+ onFocusOutside,
348
+ onInteractOutside,
349
+ context,
350
+ ...contentProps
351
+ } = props,
352
+ contentRef = React.useRef(null),
353
+ composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef),
354
+ showSheet = useShowDialogSheet(context),
355
+ contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentFrame, {
356
+ id: context.contentId,
357
+ "aria-describedby": context.descriptionId,
358
+ "aria-labelledby": context.titleId,
359
+ "data-state": getState(context.open),
360
+ ...contentProps
361
+ });
362
+ return showSheet ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
363
+ hostName: getSheetContentsName(context),
364
+ children: contentProps.children
365
+ }) : import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
366
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
367
+ disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
368
+ forceUnmount: !context.open,
369
+ onEscapeKeyDown,
370
+ onPointerDownOutside,
371
+ onFocusOutside,
372
+ onInteractOutside,
373
+ ref: composedRefs,
374
+ onDismiss: () => context.onOpenChange(!1),
375
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
376
+ loop: !0,
377
+ enabled: context.open,
378
+ trapped: trapFocus,
379
+ onMountAutoFocus: onOpenAutoFocus,
380
+ forceUnmount: !context.open,
381
+ onUnmountAutoFocus: onCloseAutoFocus,
382
+ children: contents
383
+ })
384
+ }), process.env.NODE_ENV === "development" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
385
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TitleWarning, {
386
+ titleId: context.titleId
387
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionWarning, {
388
+ contentRef,
389
+ descriptionId: context.descriptionId
390
+ })]
391
+ })]
392
+ }) : contents;
393
+ }),
394
+ DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
395
+ name: "DialogTitle"
396
+ }),
397
+ DialogTitle = DialogTitleFrame.styleable(function (props, forwardedRef) {
398
+ const {
399
+ __scopeDialog,
400
+ ...titleProps
401
+ } = props,
402
+ context = useDialogContext("DialogTitle", __scopeDialog);
403
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTitleFrame, {
404
+ id: context.titleId,
405
+ ...titleProps,
406
+ ref: forwardedRef
407
+ });
408
+ }),
409
+ DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
410
+ name: "DialogDescription"
411
+ }),
412
+ DESCRIPTION_NAME = "DialogDescription",
413
+ DialogDescription = DialogDescriptionFrame.styleable(function (props, forwardedRef) {
414
+ const {
415
+ __scopeDialog,
416
+ ...descriptionProps
417
+ } = props,
418
+ context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
419
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
420
+ id: context.descriptionId,
421
+ ...descriptionProps,
422
+ ref: forwardedRef
423
+ });
424
+ }),
425
+ CLOSE_NAME = "DialogClose",
426
+ DialogCloseFrame = (0, import_core.styled)(import_core.View, {
427
+ name: CLOSE_NAME,
428
+ tag: "button"
429
+ }),
430
+ DialogClose = DialogCloseFrame.styleable((props, forwardedRef) => {
431
+ const {
432
+ __scopeDialog,
433
+ displayWhenAdapted,
434
+ ...closeProps
435
+ } = props,
436
+ context = useDialogContext(CLOSE_NAME, __scopeDialog, {
437
+ warn: !1,
438
+ fallback: {}
439
+ }),
440
+ isSheet = useShowDialogSheet(context),
441
+ isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
442
+ return isSheet && !displayWhenAdapted ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogCloseFrame, {
443
+ accessibilityLabel: "Dialog Close",
444
+ tag: isInsideButton ? "span" : "button",
445
+ ...closeProps,
446
+ ref: forwardedRef,
447
+ onPress: (0, import_helpers.composeEventHandlers)(props.onPress, () => {
448
+ context.onOpenChange(!1);
449
+ })
450
+ });
451
+ });
452
+ function getState(open) {
453
+ return open ? "open" : "closed";
454
+ }
455
+ const TITLE_WARNING_NAME = "DialogTitleWarning",
456
+ [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
457
+ contentName: CONTENT_NAME,
458
+ titleName: "DialogTitle",
459
+ docsSlug: "dialog"
460
+ }),
461
+ TitleWarning = ({
462
+ titleId
463
+ }) => {
464
+ if (process.env.NODE_ENV === "development") {
465
+ const titleWarningContext = useWarningContext(TITLE_WARNING_NAME),
466
+ MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
467
+
468
+ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.`;
469
+ React.useEffect(() => {
470
+ import_constants.isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
471
+ }, [MESSAGE, titleId]);
472
+ }
473
+ return null;
474
+ },
475
+ DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning",
476
+ DescriptionWarning = ({
477
+ contentRef,
478
+ descriptionId
479
+ }) => {
480
+ if (process.env.NODE_ENV === "development") {
481
+ const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${useWarningContext(DESCRIPTION_WARNING_NAME).contentName}}.`;
482
+ React.useEffect(() => {
483
+ if (!import_constants.isWeb) return;
484
+ const contentNode = contentRef.current;
485
+ if (!(contentNode instanceof HTMLElement)) return;
486
+ const describedById = contentNode.getAttribute("aria-describedby");
487
+ descriptionId && describedById && (document.getElementById(descriptionId) || console.warn(MESSAGE));
488
+ }, [MESSAGE, contentRef, descriptionId]);
489
+ }
490
+ return null;
491
+ },
492
+ Dialog = (0, import_helpers.withStaticProperties)(React.forwardRef(function (props, ref) {
493
+ const {
494
+ __scopeDialog,
495
+ children,
496
+ open: openProp,
497
+ defaultOpen = !1,
498
+ onOpenChange,
499
+ modal = !0,
500
+ allowPinchZoom = !1,
501
+ disableRemoveScroll = !1
502
+ } = props,
503
+ baseId = React.useId(),
504
+ scopeId = `scope-${baseId}`,
505
+ contentId = `content-${baseId}`,
506
+ titleId = `title-${baseId}`,
507
+ descriptionId = `description-${baseId}`,
508
+ scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId,
509
+ sheetContentsName = getSheetContentsName({
510
+ scopeKey,
511
+ contentId
512
+ }),
513
+ triggerRef = React.useRef(null),
514
+ contentRef = React.useRef(null),
515
+ [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
516
+ prop: openProp,
517
+ defaultProp: defaultOpen,
518
+ onChange: onOpenChange
519
+ }),
520
+ onOpenToggle = React.useCallback(() => {
521
+ setOpen(prevOpen => !prevOpen);
522
+ }, [setOpen]),
523
+ context = {
524
+ scope: __scopeDialog,
525
+ scopeKey,
526
+ triggerRef,
527
+ contentRef,
528
+ contentId,
529
+ titleId,
530
+ descriptionId,
531
+ open,
532
+ onOpenChange: setOpen,
533
+ onOpenToggle,
534
+ modal,
535
+ allowPinchZoom
536
+ },
537
+ {
538
+ when,
539
+ AdaptProvider
540
+ } = (0, import_adapt.useAdaptParent)({
541
+ Contents: React.useCallback(props2 => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
542
+ forwardProps: props2,
543
+ name: sheetContentsName
544
+ }), [sheetContentsName])
545
+ });
546
+ return React.useImperativeHandle(ref, () => ({
547
+ open: setOpen
548
+ }), [setOpen]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(AdaptProvider, {
549
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
550
+ ...context,
551
+ sheetBreakpoint: when,
552
+ disableRemoveScroll,
553
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogSheetController, {
554
+ onOpenChange: setOpen,
555
+ __scopeDialog,
556
+ children
557
+ })
558
+ })
559
+ });
560
+ }), {
561
+ Trigger: DialogTrigger,
562
+ Portal: DialogPortal,
563
+ Overlay: DialogOverlay,
564
+ Content: DialogContent,
565
+ Title: DialogTitle,
566
+ Description: DialogDescription,
567
+ Close: DialogClose,
568
+ Sheet: import_sheet.Sheet.Controlled,
569
+ Adapt: import_adapt.Adapt
570
+ });
571
+ const DialogSheetContents = ({
572
+ name,
573
+ ...props
574
+ }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
575
+ forwardProps: props,
576
+ name
577
+ }),
578
+ getSheetContentsName = ({
579
+ scopeKey,
580
+ contentId
581
+ }) => `${scopeKey || contentId}SheetContents`,
582
+ DialogSheetController = props => {
583
+ const context = useDialogContext("DialogSheetController", props.__scopeDialog),
584
+ showSheet = useShowDialogSheet(context),
585
+ breakpointActive = useSheetBreakpointActive(context),
586
+ getShowSheet = (0, import_core.useGet)(showSheet);
587
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
588
+ onOpenChange: val => {
589
+ getShowSheet() && props.onOpenChange?.(val);
590
+ },
591
+ open: context.open,
592
+ hidden: breakpointActive === !1,
593
+ children: props.children
594
+ });
595
+ },
596
+ useSheetBreakpointActive = context => {
597
+ const media = (0, import_core.useMedia)();
598
+ return context.sheetBreakpoint ? context.sheetBreakpoint === !0 ? !0 : media[context.sheetBreakpoint] : !1;
599
+ },
600
+ useShowDialogSheet = context => {
601
+ const breakpointActive = useSheetBreakpointActive(context);
602
+ return context.open === !1 ? !1 : breakpointActive;
603
+ };
@@ -0,0 +1,18 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
7
+ get: () => from[key],
8
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
9
+ });
10
+ return to;
11
+ },
12
+ __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
13
+ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
14
+ value: !0
15
+ }), mod);
16
+ var src_exports = {};
17
+ module.exports = __toCommonJS(src_exports);
18
+ __reExport(src_exports, require("./Dialog.cjs"), module.exports);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/dialog",
3
- "version": "1.114.4",
3
+ "version": "1.115.0",
4
4
  "source": "src/index.ts",
5
5
  "types": "./types/index.d.ts",
6
6
  "main": "dist/cjs",
@@ -29,34 +29,35 @@
29
29
  "react-native": "./dist/cjs/index.native.js",
30
30
  "types": "./types/index.d.ts",
31
31
  "import": "./dist/esm/index.mjs",
32
- "require": "./dist/cjs/index.js"
32
+ "require": "./dist/cjs/index.cjs",
33
+ "default": "./dist/cjs/index.native.js"
33
34
  }
34
35
  },
35
36
  "dependencies": {
36
- "@tamagui/adapt": "1.114.4",
37
- "@tamagui/animate-presence": "1.114.4",
38
- "@tamagui/aria-hidden": "1.114.4",
39
- "@tamagui/compose-refs": "1.114.4",
40
- "@tamagui/constants": "1.114.4",
41
- "@tamagui/core": "1.114.4",
42
- "@tamagui/create-context": "1.114.4",
43
- "@tamagui/dismissable": "1.114.4",
44
- "@tamagui/focus-scope": "1.114.4",
45
- "@tamagui/helpers": "1.114.4",
46
- "@tamagui/polyfill-dev": "1.114.4",
47
- "@tamagui/popper": "1.114.4",
48
- "@tamagui/portal": "1.114.4",
49
- "@tamagui/remove-scroll": "1.114.4",
50
- "@tamagui/sheet": "1.114.4",
51
- "@tamagui/stacks": "1.114.4",
52
- "@tamagui/text": "1.114.4",
53
- "@tamagui/use-controllable-state": "1.114.4"
37
+ "@tamagui/adapt": "1.115.0",
38
+ "@tamagui/animate-presence": "1.115.0",
39
+ "@tamagui/aria-hidden": "1.115.0",
40
+ "@tamagui/compose-refs": "1.115.0",
41
+ "@tamagui/constants": "1.115.0",
42
+ "@tamagui/core": "1.115.0",
43
+ "@tamagui/create-context": "1.115.0",
44
+ "@tamagui/dismissable": "1.115.0",
45
+ "@tamagui/focus-scope": "1.115.0",
46
+ "@tamagui/helpers": "1.115.0",
47
+ "@tamagui/polyfill-dev": "1.115.0",
48
+ "@tamagui/popper": "1.115.0",
49
+ "@tamagui/portal": "1.115.0",
50
+ "@tamagui/remove-scroll": "1.115.0",
51
+ "@tamagui/sheet": "1.115.0",
52
+ "@tamagui/stacks": "1.115.0",
53
+ "@tamagui/text": "1.115.0",
54
+ "@tamagui/use-controllable-state": "1.115.0"
54
55
  },
55
56
  "peerDependencies": {
56
57
  "react": "*"
57
58
  },
58
59
  "devDependencies": {
59
- "@tamagui/build": "1.114.4",
60
+ "@tamagui/build": "1.115.0",
60
61
  "react": "^18.2.0 || ^19.0.0",
61
62
  "react-native": "0.74.1"
62
63
  },
@@ -1,457 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: !0 });
9
- }, __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from == "object" || typeof from == "function")
11
- for (let key of __getOwnPropNames(from))
12
- !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
13
- return to;
14
- };
15
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
16
- // If the importer is in node compatibility mode or this is not an ESM
17
- // file that has been converted to a CommonJS file using a Babel-
18
- // compatible transform (i.e. "__esModule" has not been set), then set
19
- // "default" to the CommonJS "module.exports" for node compatibility.
20
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
21
- mod
22
- )), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
23
- var Dialog_exports = {};
24
- __export(Dialog_exports, {
25
- Dialog: () => Dialog,
26
- DialogClose: () => DialogClose,
27
- DialogContent: () => DialogContent,
28
- DialogDescription: () => DialogDescription,
29
- DialogOverlay: () => DialogOverlay,
30
- DialogOverlayFrame: () => DialogOverlayFrame,
31
- DialogPortal: () => DialogPortal,
32
- DialogPortalFrame: () => DialogPortalFrame,
33
- DialogSheetContents: () => DialogSheetContents,
34
- DialogTitle: () => DialogTitle,
35
- DialogTrigger: () => DialogTrigger,
36
- DialogWarningProvider: () => DialogWarningProvider,
37
- createDialogScope: () => createDialogScope
38
- });
39
- module.exports = __toCommonJS(Dialog_exports);
40
- var import_adapt = require("@tamagui/adapt"), import_animate_presence = require("@tamagui/animate-presence"), import_aria_hidden = require("@tamagui/aria-hidden"), import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_core = require("@tamagui/core"), import_create_context = require("@tamagui/create-context"), import_dismissable = require("@tamagui/dismissable"), import_focus_scope = require("@tamagui/focus-scope"), import_helpers = require("@tamagui/helpers"), import_portal = require("@tamagui/portal"), import_remove_scroll = require("@tamagui/remove-scroll"), import_sheet = require("@tamagui/sheet"), import_stacks = require("@tamagui/stacks"), import_text = require("@tamagui/text"), import_use_controllable_state = require("@tamagui/use-controllable-state"), React = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
41
- const DIALOG_NAME = "Dialog", [createDialogContext, createDialogScope] = (0, import_create_context.createContextScope)(DIALOG_NAME), [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME), TRIGGER_NAME = "DialogTrigger", DialogTriggerFrame = (0, import_core.styled)(import_core.View, {
42
- name: TRIGGER_NAME
43
- }), DialogTrigger = DialogTriggerFrame.styleable(function(props, forwardedRef) {
44
- const { __scopeDialog, ...triggerProps } = props, isInsideButton = React.useContext(import_stacks.ButtonNestingContext), context = useDialogContext(TRIGGER_NAME, __scopeDialog), composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
45
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
46
- DialogTriggerFrame,
47
- {
48
- tag: isInsideButton ? "span" : "button",
49
- "aria-haspopup": "dialog",
50
- "aria-expanded": context.open,
51
- "aria-controls": context.contentId,
52
- "data-state": getState(context.open),
53
- ...triggerProps,
54
- ref: composedTriggerRef,
55
- onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
56
- }
57
- ) });
58
- }), PORTAL_NAME = "DialogPortal", [PortalProvider, usePortalContext] = createDialogContext(
59
- PORTAL_NAME,
60
- {
61
- forceMount: void 0
62
- }
63
- ), DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
64
- pointerEvents: "none",
65
- variants: {
66
- unstyled: {
67
- false: {
68
- alignItems: "center",
69
- justifyContent: "center",
70
- fullscreen: !0,
71
- zIndex: 1e5,
72
- ...import_constants.isWeb && {
73
- maxHeight: "100vh",
74
- position: "fixed"
75
- }
76
- }
77
- }
78
- },
79
- defaultVariants: {
80
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
81
- }
82
- }), DialogPortalItem = (props) => {
83
- const themeName = (0, import_core.useThemeName)(), context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
84
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, { hostName: props.hostName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItemContent, { ...props, themeName, context }) });
85
- };
86
- function DialogPortalItemContent(props) {
87
- const {
88
- __scopeDialog,
89
- children,
90
- context,
91
- themeName,
92
- space,
93
- spaceDirection,
94
- separator
95
- } = props;
96
- let childrenSpaced = children;
97
- return (space || separator) && (childrenSpaced = (0, import_core.spacedChildren)({
98
- children,
99
- separator,
100
- space,
101
- direction: spaceDirection
102
- })), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { scope: __scopeDialog, ...context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, { name: themeName, children: childrenSpaced }) });
103
- }
104
- const DialogPortal = (props) => {
105
- const { __scopeDialog, forceMount, children, ...frameProps } = props, context = useDialogContext(PORTAL_NAME, __scopeDialog), isShowing = forceMount || context.open, [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
106
- isShowing && isFullyHidden && setIsFullyHidden(!1);
107
- const handleExitComplete = React.useCallback(() => {
108
- setIsFullyHidden(!0);
109
- }, []), contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { onExitComplete: handleExitComplete, children: isShowing ? children : null });
110
- if (useShowDialogSheet(context))
111
- return children;
112
- if (context.modal) {
113
- if (isFullyHidden)
114
- return null;
115
- const framedContents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopeDialog, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalFrame, { pointerEvents: isShowing ? "auto" : "none", ...frameProps, children: contents }) });
116
- return import_constants.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { zIndex: props.zIndex ?? 1e5, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PassthroughTheme, { children: framedContents }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, { __scopeDialog, children: framedContents });
117
- }
118
- return contents;
119
- }, PassthroughTheme = ({ children }) => {
120
- const themeName = (0, import_core.useThemeName)();
121
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, { name: themeName, forceClassName: !0, children });
122
- }, OVERLAY_NAME = "DialogOverlay", DialogOverlayFrame = (0, import_core.styled)(import_sheet.Overlay, {
123
- name: OVERLAY_NAME
124
- }), DialogOverlay = DialogOverlayFrame.extractable(
125
- React.forwardRef(function({ __scopeDialog, ...props }, forwardedRef) {
126
- const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog), { forceMount = portalContext.forceMount, ...overlayProps } = props, context = useDialogContext(OVERLAY_NAME, __scopeDialog), showSheet = useShowDialogSheet(context);
127
- return !forceMount && (!context.modal || showSheet) ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
128
- DialogOverlayFrame,
129
- {
130
- "data-state": getState(context.open),
131
- pointerEvents: context.open ? "auto" : "none",
132
- ...overlayProps,
133
- ref: forwardedRef
134
- }
135
- );
136
- })
137
- ), CONTENT_NAME = "DialogContent", DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
138
- name: CONTENT_NAME,
139
- tag: "dialog",
140
- variants: {
141
- size: {
142
- "...size": (val, extras) => ({})
143
- },
144
- unstyled: {
145
- false: {
146
- position: "relative",
147
- backgrounded: !0,
148
- padded: !0,
149
- radiused: !0,
150
- elevate: !0,
151
- zIndex: 1e5
152
- }
153
- }
154
- },
155
- defaultVariants: {
156
- size: "$true",
157
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
158
- }
159
- }), DialogContent = DialogContentFrame.extractable(
160
- React.forwardRef(function({ __scopeDialog, ...props }, forwardedRef) {
161
- const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog), { forceMount = portalContext.forceMount, ...contentProps } = props, context = useDialogContext(CONTENT_NAME, __scopeDialog), contents = context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentModal, { context, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentNonModal, { context, ...contentProps, ref: forwardedRef });
162
- return !import_constants.isWeb || context.disableRemoveScroll ? contents : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
163
- import_remove_scroll.RemoveScroll,
164
- {
165
- forwardProps: !0,
166
- enabled: context.open,
167
- allowPinchZoom: context.allowPinchZoom,
168
- shards: [context.contentRef],
169
- removeScrollBar: !1,
170
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-remove-scroll-container": !0, className: "_dsp_contents", children: contents })
171
- }
172
- );
173
- })
174
- ), DialogContentModal = React.forwardRef(
175
- ({ children, context, ...props }, forwardedRef) => {
176
- const contentRef = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
177
- return import_constants.isWeb && React.useEffect(() => {
178
- if (!context.open) return;
179
- const content = contentRef.current;
180
- if (content) return (0, import_aria_hidden.hideOthers)(content);
181
- }, [context.open]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
182
- DialogContentImpl,
183
- {
184
- ...props,
185
- context,
186
- ref: composedRefs,
187
- trapFocus: context.open,
188
- disableOutsidePointerEvents: !0,
189
- onCloseAutoFocus: (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
190
- event.preventDefault(), context.triggerRef.current?.focus();
191
- }),
192
- onPointerDownOutside: (0, import_helpers.composeEventHandlers)(
193
- props.onPointerDownOutside,
194
- (event) => {
195
- const originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0;
196
- (originalEvent.button === 2 || ctrlLeftClick) && event.preventDefault();
197
- }
198
- ),
199
- onFocusOutside: (0, import_helpers.composeEventHandlers)(
200
- props.onFocusOutside,
201
- (event) => event.preventDefault()
202
- ),
203
- ...!props.unstyled && {
204
- outlineStyle: "none"
205
- },
206
- children
207
- }
208
- );
209
- }
210
- ), DialogContentNonModal = React.forwardRef(
211
- (props, forwardedRef) => {
212
- const hasInteractedOutsideRef = React.useRef(!1);
213
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
214
- DialogContentImpl,
215
- {
216
- ...props,
217
- ref: forwardedRef,
218
- trapFocus: !1,
219
- disableOutsidePointerEvents: !1,
220
- onCloseAutoFocus: (event) => {
221
- props.onCloseAutoFocus?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current || props.context.triggerRef.current?.focus(), event.preventDefault()), hasInteractedOutsideRef.current = !1;
222
- },
223
- onInteractOutside: (event) => {
224
- props.onInteractOutside?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
225
- const target = event.target, trigger = props.context.triggerRef.current;
226
- if (!(trigger instanceof HTMLElement)) return;
227
- trigger.contains(target) && event.preventDefault();
228
- }
229
- }
230
- );
231
- }
232
- ), DialogContentImpl = React.forwardRef(
233
- (props, forwardedRef) => {
234
- const {
235
- __scopeDialog,
236
- trapFocus,
237
- onOpenAutoFocus,
238
- onCloseAutoFocus,
239
- disableOutsidePointerEvents,
240
- onEscapeKeyDown,
241
- onPointerDownOutside,
242
- onFocusOutside,
243
- onInteractOutside,
244
- context,
245
- ...contentProps
246
- } = props, contentRef = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef), showSheet = useShowDialogSheet(context), contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
247
- DialogContentFrame,
248
- {
249
- id: context.contentId,
250
- "aria-describedby": context.descriptionId,
251
- "aria-labelledby": context.titleId,
252
- "data-state": getState(context.open),
253
- ...contentProps
254
- }
255
- );
256
- return showSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, { hostName: getSheetContentsName(context), children: contentProps.children }) : import_constants.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
257
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
258
- import_dismissable.Dismissable,
259
- {
260
- disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
261
- forceUnmount: !context.open,
262
- onEscapeKeyDown,
263
- onPointerDownOutside,
264
- onFocusOutside,
265
- onInteractOutside,
266
- ref: composedRefs,
267
- onDismiss: () => context.onOpenChange(!1),
268
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
269
- import_focus_scope.FocusScope,
270
- {
271
- loop: !0,
272
- enabled: context.open,
273
- trapped: trapFocus,
274
- onMountAutoFocus: onOpenAutoFocus,
275
- forceUnmount: !context.open,
276
- onUnmountAutoFocus: onCloseAutoFocus,
277
- children: contents
278
- }
279
- )
280
- }
281
- ),
282
- process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
283
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }),
284
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
285
- DescriptionWarning,
286
- {
287
- contentRef,
288
- descriptionId: context.descriptionId
289
- }
290
- )
291
- ] })
292
- ] }) : contents;
293
- }
294
- ), DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
295
- name: "DialogTitle"
296
- }), DialogTitle = DialogTitleFrame.styleable(function(props, forwardedRef) {
297
- const { __scopeDialog, ...titleProps } = props, context = useDialogContext("DialogTitle", __scopeDialog);
298
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
299
- }), DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
300
- name: "DialogDescription"
301
- }), DESCRIPTION_NAME = "DialogDescription", DialogDescription = DialogDescriptionFrame.styleable(function(props, forwardedRef) {
302
- const { __scopeDialog, ...descriptionProps } = props, context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
303
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
304
- DialogDescriptionFrame,
305
- {
306
- id: context.descriptionId,
307
- ...descriptionProps,
308
- ref: forwardedRef
309
- }
310
- );
311
- }), CLOSE_NAME = "DialogClose", DialogCloseFrame = (0, import_core.styled)(import_core.View, {
312
- name: CLOSE_NAME,
313
- tag: "button"
314
- }), DialogClose = DialogCloseFrame.styleable(
315
- (props, forwardedRef) => {
316
- const { __scopeDialog, displayWhenAdapted, ...closeProps } = props, context = useDialogContext(CLOSE_NAME, __scopeDialog, {
317
- warn: !1,
318
- fallback: {}
319
- }), isSheet = useShowDialogSheet(context), isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
320
- return isSheet && !displayWhenAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
321
- DialogCloseFrame,
322
- {
323
- accessibilityLabel: "Dialog Close",
324
- tag: isInsideButton ? "span" : "button",
325
- ...closeProps,
326
- ref: forwardedRef,
327
- onPress: (0, import_helpers.composeEventHandlers)(props.onPress, () => {
328
- context.onOpenChange(!1);
329
- })
330
- }
331
- );
332
- }
333
- );
334
- function getState(open) {
335
- return open ? "open" : "closed";
336
- }
337
- const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
338
- contentName: CONTENT_NAME,
339
- titleName: "DialogTitle",
340
- docsSlug: "dialog"
341
- }), TitleWarning = ({ titleId }) => {
342
- if (process.env.NODE_ENV === "development") {
343
- const titleWarningContext = useWarningContext(TITLE_WARNING_NAME), MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
344
-
345
- If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.`;
346
- React.useEffect(() => {
347
- import_constants.isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
348
- }, [MESSAGE, titleId]);
349
- }
350
- return null;
351
- }, DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning", DescriptionWarning = ({
352
- contentRef,
353
- descriptionId
354
- }) => {
355
- if (process.env.NODE_ENV === "development") {
356
- const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${useWarningContext(DESCRIPTION_WARNING_NAME).contentName}}.`;
357
- React.useEffect(() => {
358
- if (!import_constants.isWeb) return;
359
- const contentNode = contentRef.current;
360
- if (!(contentNode instanceof HTMLElement))
361
- return;
362
- const describedById = contentNode.getAttribute("aria-describedby");
363
- descriptionId && describedById && (document.getElementById(descriptionId) || console.warn(MESSAGE));
364
- }, [MESSAGE, contentRef, descriptionId]);
365
- }
366
- return null;
367
- }, Dialog = (0, import_helpers.withStaticProperties)(
368
- React.forwardRef(function(props, ref) {
369
- const {
370
- __scopeDialog,
371
- children,
372
- open: openProp,
373
- defaultOpen = !1,
374
- onOpenChange,
375
- modal = !0,
376
- allowPinchZoom = !1,
377
- disableRemoveScroll = !1
378
- } = props, baseId = React.useId(), scopeId = `scope-${baseId}`, contentId = `content-${baseId}`, titleId = `title-${baseId}`, descriptionId = `description-${baseId}`, scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId, sheetContentsName = getSheetContentsName({ scopeKey, contentId }), triggerRef = React.useRef(null), contentRef = React.useRef(null), [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
379
- prop: openProp,
380
- defaultProp: defaultOpen,
381
- onChange: onOpenChange
382
- }), onOpenToggle = React.useCallback(() => {
383
- setOpen((prevOpen) => !prevOpen);
384
- }, [setOpen]), context = {
385
- scope: __scopeDialog,
386
- scopeKey,
387
- triggerRef,
388
- contentRef,
389
- contentId,
390
- titleId,
391
- descriptionId,
392
- open,
393
- onOpenChange: setOpen,
394
- onOpenToggle,
395
- modal,
396
- allowPinchZoom
397
- }, { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
398
- Contents: React.useCallback(
399
- (props2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props2, name: sheetContentsName }),
400
- [sheetContentsName]
401
- )
402
- });
403
- return React.useImperativeHandle(
404
- ref,
405
- () => ({
406
- open: setOpen
407
- }),
408
- [setOpen]
409
- ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
410
- DialogProvider,
411
- {
412
- ...context,
413
- sheetBreakpoint: when,
414
- disableRemoveScroll,
415
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children })
416
- }
417
- ) });
418
- }),
419
- {
420
- Trigger: DialogTrigger,
421
- Portal: DialogPortal,
422
- Overlay: DialogOverlay,
423
- Content: DialogContent,
424
- Title: DialogTitle,
425
- Description: DialogDescription,
426
- Close: DialogClose,
427
- Sheet: import_sheet.Sheet.Controlled,
428
- Adapt: import_adapt.Adapt
429
- }
430
- );
431
- const DialogSheetContents = ({
432
- name,
433
- ...props
434
- }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props, name }), getSheetContentsName = ({
435
- scopeKey,
436
- contentId
437
- }) => `${scopeKey || contentId}SheetContents`, DialogSheetController = (props) => {
438
- const context = useDialogContext("DialogSheetController", props.__scopeDialog), showSheet = useShowDialogSheet(context), breakpointActive = useSheetBreakpointActive(context), getShowSheet = (0, import_core.useGet)(showSheet);
439
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
440
- import_sheet.SheetController,
441
- {
442
- onOpenChange: (val) => {
443
- getShowSheet() && props.onOpenChange?.(val);
444
- },
445
- open: context.open,
446
- hidden: breakpointActive === !1,
447
- children: props.children
448
- }
449
- );
450
- }, useSheetBreakpointActive = (context) => {
451
- const media = (0, import_core.useMedia)();
452
- return context.sheetBreakpoint ? context.sheetBreakpoint === !0 ? !0 : media[context.sheetBreakpoint] : !1;
453
- }, useShowDialogSheet = (context) => {
454
- const breakpointActive = useSheetBreakpointActive(context);
455
- return context.open === !1 ? !1 : breakpointActive;
456
- };
457
- //# sourceMappingURL=Dialog.js.map
package/dist/cjs/index.js DELETED
@@ -1,15 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __copyProps = (to, from, except, desc) => {
6
- if (from && typeof from == "object" || typeof from == "function")
7
- for (let key of __getOwnPropNames(from))
8
- !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
9
- return to;
10
- }, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
11
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
12
- var src_exports = {};
13
- module.exports = __toCommonJS(src_exports);
14
- __reExport(src_exports, require("./Dialog"), module.exports);
15
- //# sourceMappingURL=index.js.map
File without changes
File without changes