@tamagui/dialog 1.13.3 → 1.13.4

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.
@@ -1,645 +1,6 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], 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", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var Dialog_exports = {};
30
- __export(Dialog_exports, {
31
- Dialog: () => Dialog,
32
- DialogClose: () => DialogClose,
33
- DialogContent: () => DialogContent,
34
- DialogDescription: () => DialogDescription,
35
- DialogOverlay: () => DialogOverlay,
36
- DialogOverlayFrame: () => DialogOverlayFrame,
37
- DialogPortal: () => DialogPortal,
38
- DialogPortalFrame: () => DialogPortalFrame,
39
- DialogSheetContents: () => DialogSheetContents,
40
- DialogTitle: () => DialogTitle,
41
- DialogTrigger: () => DialogTrigger,
42
- DialogWarningProvider: () => DialogWarningProvider,
43
- createDialogScope: () => createDialogScope
44
- });
45
- module.exports = __toCommonJS(Dialog_exports);
46
- var import_jsx_runtime = require("react/jsx-runtime");
47
- var import_adapt = require("@tamagui/adapt");
48
- var import_animate_presence = require("@tamagui/animate-presence");
49
- var import_aria_hidden = require("@tamagui/aria-hidden");
50
- var import_compose_refs = require("@tamagui/compose-refs");
51
- var import_core = require("@tamagui/core");
52
- var import_create_context = require("@tamagui/create-context");
53
- var import_dismissable = require("@tamagui/dismissable");
54
- var import_focus_scope = require("@tamagui/focus-scope");
55
- var import_portal = require("@tamagui/portal");
56
- var import_remove_scroll = require("@tamagui/remove-scroll");
57
- var import_sheet = require("@tamagui/sheet");
58
- var import_stacks = require("@tamagui/stacks");
59
- var import_text = require("@tamagui/text");
60
- var import_use_controllable_state = require("@tamagui/use-controllable-state");
61
- var React = __toESM(require("react"));
62
- const DIALOG_NAME = "Dialog";
63
- const [createDialogContext, createDialogScope] = (0, import_create_context.createContextScope)(DIALOG_NAME);
64
- const [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
65
- const TRIGGER_NAME = "DialogTrigger";
66
- const DialogTriggerFrame = (0, import_core.styled)(import_stacks.YStack, {
67
- name: TRIGGER_NAME
68
- });
69
- const DialogTrigger = React.forwardRef(
70
- (props, forwardedRef) => {
71
- const { __scopeDialog, ...triggerProps } = props;
72
- const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
73
- const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
74
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
- DialogTriggerFrame,
76
- {
77
- tag: "button",
78
- "aria-haspopup": "dialog",
79
- "aria-expanded": context.open,
80
- "aria-controls": context.contentId,
81
- "data-state": getState(context.open),
82
- ...triggerProps,
83
- ref: composedTriggerRef,
84
- onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
85
- }
86
- );
87
- }
88
- );
89
- DialogTrigger.displayName = TRIGGER_NAME;
90
- const PORTAL_NAME = "DialogPortal";
91
- const [PortalProvider, usePortalContext] = createDialogContext(
92
- PORTAL_NAME,
93
- {
94
- forceMount: void 0
95
- }
96
- );
97
- const DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
98
- alignItems: "center",
99
- justifyContent: "center",
100
- fullscreen: true,
101
- zIndex: 100,
102
- ...import_core.isWeb && {
103
- maxHeight: "100vh",
104
- position: "fixed"
105
- }
106
- });
107
- const DialogPortalItem = (props) => {
108
- const themeName = (0, import_core.useThemeName)();
109
- const context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
110
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, { hostName: props.hostName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItemContent, { ...props, themeName, context }) });
111
- };
112
- function DialogPortalItemContent(props) {
113
- const {
114
- __scopeDialog,
115
- children,
116
- context,
117
- themeName,
118
- space,
119
- spaceDirection,
120
- separator
121
- } = props;
122
- let childrenSpaced = children;
123
- if (space || separator) {
124
- childrenSpaced = (0, import_core.spacedChildren)({
125
- children,
126
- separator,
127
- space,
128
- direction: spaceDirection
129
- });
130
- }
131
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { scope: __scopeDialog, ...context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, { name: themeName, children: childrenSpaced }) });
132
- }
133
- const DialogPortal = (props) => {
134
- const { __scopeDialog, forceMount, children, ...frameProps } = props;
135
- const context = useDialogContext(PORTAL_NAME, __scopeDialog);
136
- const isShowing = forceMount || context.open;
137
- const [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
138
- if (isShowing && isFullyHidden) {
139
- setIsFullyHidden(false);
140
- }
141
- const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
142
- import_animate_presence.AnimatePresence,
143
- {
144
- onExitComplete: () => {
145
- setIsFullyHidden(true);
146
- },
147
- children: isShowing ? children : null
148
- }
149
- );
150
- const isSheet = useShowDialogSheet(context);
151
- if (isSheet) {
152
- return children;
153
- }
154
- if (context.modal) {
155
- if (isFullyHidden) {
156
- return null;
157
- }
158
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, { __scopeDialog, children: /* @__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 }) }) });
159
- }
160
- return contents;
161
- };
162
- DialogPortal.displayName = PORTAL_NAME;
163
- const OVERLAY_NAME = "DialogOverlay";
164
- const DialogOverlayFrame = (0, import_core.styled)(import_sheet.SheetOverlayFrame, {
165
- name: OVERLAY_NAME
166
- });
167
- const DialogOverlay = DialogOverlayFrame.extractable(
168
- React.forwardRef(
169
- ({ __scopeDialog, ...props }, forwardedRef) => {
170
- const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
171
- const { forceMount = portalContext.forceMount, ...overlayProps } = props;
172
- const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
173
- const showSheet = useShowDialogSheet(context);
174
- if (!forceMount) {
175
- if (!context.modal || showSheet) {
176
- return null;
177
- }
178
- }
179
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayImpl, { context, ...overlayProps, ref: forwardedRef });
180
- }
181
- )
182
- );
183
- DialogOverlay.displayName = OVERLAY_NAME;
184
- const DialogOverlayImpl = React.forwardRef(
185
- (props, forwardedRef) => {
186
- const { context, ...overlayProps } = props;
187
- return (
188
- // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
189
- // ie. when `Overlay` and `Content` are siblings
190
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
191
- DialogOverlayFrame,
192
- {
193
- "data-state": getState(context.open),
194
- pointerEvents: context.open ? "auto" : "none",
195
- ...overlayProps,
196
- ref: forwardedRef
197
- }
198
- )
199
- );
200
- }
201
- );
202
- const CONTENT_NAME = "DialogContent";
203
- const DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
204
- name: CONTENT_NAME,
205
- tag: "dialog",
206
- position: "relative",
207
- backgrounded: true,
208
- padded: true,
209
- radiused: true,
210
- elevate: true,
211
- variants: {
212
- size: {
213
- "...size": (val, extras) => {
214
- return {};
215
- }
216
- }
217
- },
218
- defaultVariants: {
219
- size: "$true"
220
- }
221
- });
222
- const DialogContent = DialogContentFrame.extractable(
223
- React.forwardRef(
224
- ({ __scopeDialog, ...props }, forwardedRef) => {
225
- const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
226
- const { forceMount = portalContext.forceMount, ...contentProps } = props;
227
- const context = useDialogContext(CONTENT_NAME, __scopeDialog);
228
- const 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 });
229
- if (!import_core.isWeb) {
230
- return contents;
231
- }
232
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
233
- import_remove_scroll.RemoveScroll,
234
- {
235
- forwardProps: true,
236
- enabled: context.open,
237
- allowPinchZoom: context.allowPinchZoom,
238
- shards: [context.contentRef],
239
- removeScrollBar: false,
240
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "_dsp_contents", children: contents })
241
- }
242
- );
243
- }
244
- )
245
- );
246
- DialogContent.displayName = CONTENT_NAME;
247
- const DialogContentModal = React.forwardRef(
248
- ({ children, context, ...props }, forwardedRef) => {
249
- const contentRef = React.useRef(null);
250
- const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
251
- if (import_core.isWeb) {
252
- React.useEffect(() => {
253
- if (!context.open)
254
- return;
255
- const content = contentRef.current;
256
- if (content)
257
- return (0, import_aria_hidden.hideOthers)(content);
258
- }, [context.open]);
259
- }
260
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
261
- DialogContentImpl,
262
- {
263
- ...props,
264
- context,
265
- ref: composedRefs,
266
- disableOutsidePointerEvents: true,
267
- onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
268
- var _a;
269
- event.preventDefault();
270
- (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
271
- }),
272
- onPointerDownOutside: (0, import_core.composeEventHandlers)(
273
- props.onPointerDownOutside,
274
- (event) => {
275
- const originalEvent = event["detail"].originalEvent;
276
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
277
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
278
- if (isRightClick)
279
- event.preventDefault();
280
- }
281
- ),
282
- onFocusOutside: (0, import_core.composeEventHandlers)(
283
- props.onFocusOutside,
284
- (event) => event.preventDefault()
285
- ),
286
- children
287
- }
288
- );
289
- }
290
- );
291
- const DialogContentNonModal = React.forwardRef(
292
- (props, forwardedRef) => {
293
- const hasInteractedOutsideRef = React.useRef(false);
294
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
295
- DialogContentImpl,
296
- {
297
- ...props,
298
- ref: forwardedRef,
299
- trapFocus: false,
300
- disableOutsidePointerEvents: false,
301
- onCloseAutoFocus: (event) => {
302
- var _a, _b;
303
- (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
304
- if (!event.defaultPrevented) {
305
- if (!hasInteractedOutsideRef.current) {
306
- (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
307
- }
308
- event.preventDefault();
309
- }
310
- hasInteractedOutsideRef.current = false;
311
- },
312
- onInteractOutside: (event) => {
313
- var _a;
314
- (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
315
- if (!event.defaultPrevented)
316
- hasInteractedOutsideRef.current = true;
317
- const target = event.target;
318
- const trigger = props.context.triggerRef.current;
319
- if (!(trigger instanceof HTMLElement))
320
- return;
321
- const targetIsTrigger = trigger.contains(target);
322
- if (targetIsTrigger)
323
- event.preventDefault();
324
- }
325
- }
326
- );
327
- }
328
- );
329
- const DialogContentImpl = React.forwardRef(
330
- (props, forwardedRef) => {
331
- const {
332
- __scopeDialog,
333
- trapFocus,
334
- onOpenAutoFocus,
335
- onCloseAutoFocus,
336
- disableOutsidePointerEvents,
337
- onEscapeKeyDown,
338
- onPointerDownOutside,
339
- onFocusOutside,
340
- onInteractOutside,
341
- context,
342
- ...contentProps
343
- } = props;
344
- const contentRef = React.useRef(null);
345
- const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
346
- const showSheet = useShowDialogSheet(context);
347
- const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
348
- DialogContentFrame,
349
- {
350
- id: context.contentId,
351
- "aria-describedby": context.descriptionId,
352
- "aria-labelledby": context.titleId,
353
- "data-state": getState(context.open),
354
- ...contentProps
355
- }
356
- );
357
- if (showSheet) {
358
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, { hostName: getSheetContentsName(context), children: contentProps.children });
359
- }
360
- if (!import_core.isWeb) {
361
- return contents;
362
- }
363
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
364
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
365
- import_focus_scope.FocusScope,
366
- {
367
- loop: true,
368
- trapped: trapFocus,
369
- onMountAutoFocus: onOpenAutoFocus,
370
- forceUnmount: !context.open,
371
- onUnmountAutoFocus: onCloseAutoFocus,
372
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
373
- import_dismissable.Dismissable,
374
- {
375
- disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
376
- forceUnmount: !context.open,
377
- onEscapeKeyDown,
378
- onPointerDownOutside,
379
- onFocusOutside,
380
- onInteractOutside,
381
- ref: composedRefs,
382
- onDismiss: () => context.onOpenChange(false),
383
- children: contents
384
- }
385
- )
386
- }
387
- ),
388
- process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
389
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }),
390
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
391
- DescriptionWarning,
392
- {
393
- contentRef,
394
- descriptionId: context.descriptionId
395
- }
396
- )
397
- ] })
398
- ] });
399
- }
400
- );
401
- const TITLE_NAME = "DialogTitle";
402
- const DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
403
- name: TITLE_NAME
404
- });
405
- const DialogTitle = React.forwardRef(
406
- (props, forwardedRef) => {
407
- const { __scopeDialog, ...titleProps } = props;
408
- const context = useDialogContext(TITLE_NAME, __scopeDialog);
409
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
410
- }
411
- );
412
- DialogTitle.displayName = TITLE_NAME;
413
- const DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
414
- name: "DialogDescription"
415
- });
416
- const DESCRIPTION_NAME = "DialogDescription";
417
- const DialogDescription = React.forwardRef(
418
- (props, forwardedRef) => {
419
- const { __scopeDialog, ...descriptionProps } = props;
420
- const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
421
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
422
- DialogDescriptionFrame,
423
- {
424
- id: context.descriptionId,
425
- ...descriptionProps,
426
- ref: forwardedRef
427
- }
428
- );
429
- }
430
- );
431
- DialogDescription.displayName = DESCRIPTION_NAME;
432
- const CLOSE_NAME = "DialogClose";
433
- const DialogClose = React.forwardRef(
434
- (props, forwardedRef) => {
435
- const { __scopeDialog, displayWhenAdapted, ...closeProps } = props;
436
- const context = useDialogContext(CLOSE_NAME, __scopeDialog, {
437
- warn: false,
438
- fallback: {}
439
- });
440
- const isSheet = useShowDialogSheet(context);
441
- if (isSheet && !displayWhenAdapted) {
442
- return null;
443
- }
444
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
445
- import_stacks.YStack,
446
- {
447
- tag: "button",
448
- accessibilityLabel: "Dialog Close",
449
- ...closeProps,
450
- ref: forwardedRef,
451
- onPress: (0, import_core.composeEventHandlers)(
452
- props.onPress,
453
- () => context.onOpenChange(false)
454
- )
455
- }
456
- );
457
- }
458
- );
459
- DialogClose.displayName = CLOSE_NAME;
460
- function getState(open) {
461
- return open ? "open" : "closed";
462
- }
463
- const TITLE_WARNING_NAME = "DialogTitleWarning";
464
- const [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
465
- contentName: CONTENT_NAME,
466
- titleName: TITLE_NAME,
467
- docsSlug: "dialog"
468
- });
469
- const TitleWarning = ({ titleId }) => {
470
- if (process.env.NODE_ENV === "development") {
471
- const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
472
- const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
1
+ "use strict";var Ee=Object.create;var R=Object.defineProperty;var Oe=Object.getOwnPropertyDescriptor;var ve=Object.getOwnPropertyNames;var Ne=Object.getPrototypeOf,Re=Object.prototype.hasOwnProperty;var xe=(e,o)=>{for(var t in o)R(e,t,{get:o[t],enumerable:!0})},K=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of ve(o))!Re.call(e,r)&&r!==t&&R(e,r,{get:()=>o[r],enumerable:!(n=Oe(o,r))||n.enumerable});return e};var Ie=(e,o,t)=>(t=e!=null?Ee(Ne(e)):{},K(o||!e||!e.__esModule?R(t,"default",{value:e,enumerable:!0}):t,e)),be=e=>K(R({},"__esModule",{value:!0}),e);var Ze={};xe(Ze,{Dialog:()=>fe,DialogClose:()=>V,DialogContent:()=>M,DialogDescription:()=>W,DialogOverlay:()=>_,DialogOverlayFrame:()=>$,DialogPortal:()=>w,DialogPortalFrame:()=>de,DialogSheetContents:()=>De,DialogTitle:()=>k,DialogTrigger:()=>A,DialogWarningProvider:()=>me,createDialogScope:()=>ge});module.exports=be(Ze);var a=require("react/jsx-runtime"),H=require("@tamagui/adapt"),se=require("@tamagui/animate-presence"),ie=require("@tamagui/aria-hidden"),F=require("@tamagui/compose-refs"),s=require("@tamagui/core"),L=require("@tamagui/create-context"),le=require("@tamagui/dismissable"),ce=require("@tamagui/focus-scope"),S=require("@tamagui/portal"),pe=require("@tamagui/remove-scroll"),P=require("@tamagui/sheet"),D=require("@tamagui/stacks"),G=require("@tamagui/text"),ue=require("@tamagui/use-controllable-state"),p=Ie(require("react"));const j="Dialog",[z,ge]=(0,L.createContextScope)(j),[U,d]=z(j),Y="DialogTrigger",Fe=(0,s.styled)(D.YStack,{name:Y}),A=p.forwardRef((e,o)=>{const{__scopeDialog:t,...n}=e,r=d(Y,t),l=(0,F.useComposedRefs)(o,r.triggerRef);return(0,a.jsx)(Fe,{tag:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":Z(r.open),...n,ref:l,onPress:(0,s.composeEventHandlers)(e.onPress,r.onOpenToggle)})});A.displayName=Y;const x="DialogPortal",[Ae,q]=z(x,{forceMount:void 0}),de=(0,s.styled)(D.YStack,{alignItems:"center",justifyContent:"center",fullscreen:!0,zIndex:100,...s.isWeb&&{maxHeight:"100vh",position:"fixed"}}),J=e=>{const o=(0,s.useThemeName)(),t=d(x,e.__scopeDialog);return(0,a.jsx)(S.PortalItem,{hostName:e.hostName,children:(0,a.jsx)(we,{...e,themeName:o,context:t})})};function we(e){const{__scopeDialog:o,children:t,context:n,themeName:r,space:l,spaceDirection:i,separator:c}=e;let g=t;return(l||c)&&(g=(0,s.spacedChildren)({children:t,separator:c,space:l,direction:i})),(0,a.jsx)(U,{scope:o,...n,children:(0,a.jsx)(s.Theme,{name:r,children:g})})}const w=e=>{const{__scopeDialog:o,forceMount:t,children:n,...r}=e,l=d(x,o),i=t||l.open,[c,g]=p.useState(!i);i&&c&&g(!1);const m=(0,a.jsx)(se.AnimatePresence,{onExitComplete:()=>{g(!0)},children:i?n:null});return h(l)?n:l.modal?c?null:(0,a.jsx)(J,{__scopeDialog:o,children:(0,a.jsx)(Ae,{scope:o,forceMount:t,children:(0,a.jsx)(de,{pointerEvents:i?"auto":"none",...r,children:m})})}):m};w.displayName=x;const I="DialogOverlay",$=(0,s.styled)(P.SheetOverlayFrame,{name:I}),_=$.extractable(p.forwardRef(({__scopeDialog:e,...o},t)=>{const n=q(I,e),{forceMount:r=n.forceMount,...l}=o,i=d(I,e),c=h(i);return!r&&(!i.modal||c)?null:(0,a.jsx)(_e,{context:i,...l,ref:t})}));_.displayName=I;const _e=p.forwardRef((e,o)=>{const{context:t,...n}=e;return(0,a.jsx)($,{"data-state":Z(t.open),pointerEvents:t.open?"auto":"none",...n,ref:o})}),C="DialogContent",Q=(0,s.styled)(D.ThemeableStack,{name:C,tag:"dialog",position:"relative",backgrounded:!0,padded:!0,radiused:!0,elevate:!0,variants:{size:{"...size":(e,o)=>({})}},defaultVariants:{size:"$true"}}),M=Q.extractable(p.forwardRef(({__scopeDialog:e,...o},t)=>{const n=q(C,e),{forceMount:r=n.forceMount,...l}=o,i=d(C,e),c=i.modal?(0,a.jsx)(Me,{context:i,...l,ref:t}):(0,a.jsx)(ke,{context:i,...l,ref:t});return s.isWeb?(0,a.jsx)(pe.RemoveScroll,{forwardProps:!0,enabled:i.open,allowPinchZoom:i.allowPinchZoom,shards:[i.contentRef],removeScrollBar:!1,children:(0,a.jsx)("div",{className:"_dsp_contents",children:c})}):c}));M.displayName=C;const Me=p.forwardRef(({children:e,context:o,...t},n)=>{const r=p.useRef(null),l=(0,F.useComposedRefs)(n,o.contentRef,r);return s.isWeb&&p.useEffect(()=>{if(!o.open)return;const i=r.current;if(i)return(0,ie.hideOthers)(i)},[o.open]),(0,a.jsx)(X,{...t,context:o,ref:l,disableOutsidePointerEvents:!0,onCloseAutoFocus:(0,s.composeEventHandlers)(t.onCloseAutoFocus,i=>{var c;i.preventDefault(),(c=o.triggerRef.current)==null||c.focus()}),onPointerDownOutside:(0,s.composeEventHandlers)(t.onPointerDownOutside,i=>{const c=i.detail.originalEvent,g=c.button===0&&c.ctrlKey===!0;(c.button===2||g)&&i.preventDefault()}),onFocusOutside:(0,s.composeEventHandlers)(t.onFocusOutside,i=>i.preventDefault()),children:e})}),ke=p.forwardRef((e,o)=>{const t=p.useRef(!1);return(0,a.jsx)(X,{...e,ref:o,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var r,l;(r=e.onCloseAutoFocus)==null||r.call(e,n),n.defaultPrevented||(t.current||(l=e.context.triggerRef.current)==null||l.focus(),n.preventDefault()),t.current=!1},onInteractOutside:n=>{var c;(c=e.onInteractOutside)==null||c.call(e,n),n.defaultPrevented||(t.current=!0);const r=n.target,l=e.context.triggerRef.current;if(!(l instanceof HTMLElement))return;l.contains(r)&&n.preventDefault()}})}),X=p.forwardRef((e,o)=>{const{__scopeDialog:t,trapFocus:n,onOpenAutoFocus:r,onCloseAutoFocus:l,disableOutsidePointerEvents:i,onEscapeKeyDown:c,onPointerDownOutside:g,onFocusOutside:m,onInteractOutside:y,context:u,...T}=e,E=p.useRef(null),O=(0,F.useComposedRefs)(o,E),v=h(u),N=(0,a.jsx)(Q,{id:u.contentId,"aria-describedby":u.descriptionId,"aria-labelledby":u.titleId,"data-state":Z(u.open),...T});return v?(0,a.jsx)(J,{hostName:re(u),children:T.children}):s.isWeb?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(ce.FocusScope,{loop:!0,trapped:n,onMountAutoFocus:r,forceUnmount:!u.open,onUnmountAutoFocus:l,children:(0,a.jsx)(le.Dismissable,{disableOutsidePointerEvents:u.open&&i,forceUnmount:!u.open,onEscapeKeyDown:c,onPointerDownOutside:g,onFocusOutside:m,onInteractOutside:y,ref:O,onDismiss:()=>u.onOpenChange(!1),children:N})}),process.env.NODE_ENV==="development"&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(He,{titleId:u.titleId}),(0,a.jsx)(Ge,{contentRef:E,descriptionId:u.descriptionId})]})]}):N}),b="DialogTitle",We=(0,s.styled)(G.H2,{name:b}),k=p.forwardRef((e,o)=>{const{__scopeDialog:t,...n}=e,r=d(b,t);return(0,a.jsx)(We,{id:r.titleId,...n,ref:o})});k.displayName=b;const Ve=(0,s.styled)(G.Paragraph,{name:"DialogDescription"}),ee="DialogDescription",W=p.forwardRef((e,o)=>{const{__scopeDialog:t,...n}=e,r=d(ee,t);return(0,a.jsx)(Ve,{id:r.descriptionId,...n,ref:o})});W.displayName=ee;const oe="DialogClose",V=p.forwardRef((e,o)=>{const{__scopeDialog:t,displayWhenAdapted:n,...r}=e,l=d(oe,t,{warn:!1,fallback:{}});return h(l)&&!n?null:(0,a.jsx)(D.YStack,{tag:"button",accessibilityLabel:"Dialog Close",...r,ref:o,onPress:(0,s.composeEventHandlers)(e.onPress,()=>l.onOpenChange(!1))})});V.displayName=oe;function Z(e){return e?"open":"closed"}const te="DialogTitleWarning",[me,ne]=(0,L.createContext)(te,{contentName:C,titleName:b,docsSlug:"dialog"}),He=({titleId:e})=>{if(process.env.NODE_ENV==="development"){const o=ne(te),t=`\`${o.contentName}\` requires a \`${o.titleName}\` for the component to be accessible for screen reader users.
473
2
 
474
- If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
3
+ If you want to hide the \`${o.titleName}\`, you can wrap it with our VisuallyHidden component.
475
4
 
476
- For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
477
- React.useEffect(() => {
478
- if (!import_core.isWeb)
479
- return;
480
- if (titleId) {
481
- const hasTitle = document.getElementById(titleId);
482
- if (!hasTitle) {
483
- console.warn(MESSAGE);
484
- }
485
- }
486
- }, [MESSAGE, titleId]);
487
- }
488
- return null;
489
- };
490
- const DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
491
- const DescriptionWarning = ({
492
- contentRef,
493
- descriptionId
494
- }) => {
495
- if (process.env.NODE_ENV === "development") {
496
- const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
497
- const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
498
- React.useEffect(() => {
499
- if (!import_core.isWeb)
500
- return;
501
- const contentNode = contentRef.current;
502
- if (!(contentNode instanceof HTMLElement)) {
503
- return;
504
- }
505
- const describedById = contentNode.getAttribute("aria-describedby");
506
- if (descriptionId && describedById) {
507
- const hasDescription = document.getElementById(descriptionId);
508
- if (!hasDescription) {
509
- console.warn(MESSAGE);
510
- }
511
- }
512
- }, [MESSAGE, contentRef, descriptionId]);
513
- }
514
- return null;
515
- };
516
- const Dialog = (0, import_core.withStaticProperties)(
517
- React.forwardRef(function Dialog2(props, ref) {
518
- const {
519
- __scopeDialog,
520
- children,
521
- open: openProp,
522
- defaultOpen = false,
523
- onOpenChange,
524
- modal = true,
525
- allowPinchZoom = false
526
- } = props;
527
- const scopeId = (0, import_core.useId)();
528
- const contentId = (0, import_core.useId)();
529
- const titleId = (0, import_core.useId)();
530
- const descriptionId = (0, import_core.useId)();
531
- const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId;
532
- const sheetContentsName = getSheetContentsName({ scopeKey, contentId });
533
- const triggerRef = React.useRef(null);
534
- const contentRef = React.useRef(null);
535
- const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
536
- prop: openProp,
537
- defaultProp: defaultOpen,
538
- onChange: onOpenChange
539
- });
540
- const onOpenToggle = React.useCallback(() => {
541
- setOpen((prevOpen) => !prevOpen);
542
- }, [setOpen]);
543
- const context = {
544
- scope: __scopeDialog,
545
- scopeKey,
546
- triggerRef,
547
- contentRef,
548
- contentId,
549
- titleId,
550
- descriptionId,
551
- open,
552
- onOpenChange: setOpen,
553
- onOpenToggle,
554
- modal,
555
- allowPinchZoom
556
- };
557
- const { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
558
- Contents: React.useCallback(
559
- (props2) => {
560
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props2, name: sheetContentsName });
561
- },
562
- [sheetContentsName]
563
- )
564
- });
565
- React.useImperativeHandle(
566
- ref,
567
- () => ({
568
- open: setOpen
569
- }),
570
- [setOpen]
571
- );
572
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { ...context, sheetBreakpoint: when, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children }) }) });
573
- }),
574
- {
575
- Trigger: DialogTrigger,
576
- Portal: DialogPortal,
577
- Overlay: DialogOverlay,
578
- Content: DialogContent,
579
- Title: DialogTitle,
580
- Description: DialogDescription,
581
- Close: DialogClose,
582
- Sheet: import_sheet.ControlledSheet,
583
- Adapt: import_adapt.Adapt
584
- }
585
- );
586
- const SHEET_CONTENTS_NAME = "DialogSheetContents";
587
- const DialogSheetContents = ({
588
- name,
589
- ...props
590
- }) => {
591
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props, name });
592
- };
593
- DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
594
- const getSheetContentsName = ({
595
- scopeKey,
596
- contentId
597
- }) => `${scopeKey || contentId}SheetContents`;
598
- const DialogSheetController = (props) => {
599
- const context = useDialogContext("DialogSheetController", props.__scopeDialog);
600
- const showSheet = useShowDialogSheet(context);
601
- const breakpointActive = useSheetBreakpointActive(context);
602
- const getShowSheet = (0, import_core.useGet)(showSheet);
603
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
604
- import_sheet.SheetController,
605
- {
606
- onOpenChange: (val) => {
607
- if (getShowSheet()) {
608
- props.onOpenChange(val);
609
- }
610
- },
611
- open: context.open,
612
- hidden: breakpointActive === false,
613
- children: props.children
614
- }
615
- );
616
- };
617
- const useSheetBreakpointActive = (context) => {
618
- const media = (0, import_core.useMedia)();
619
- if (!context.sheetBreakpoint)
620
- return false;
621
- if (context.sheetBreakpoint === true)
622
- return true;
623
- return media[context.sheetBreakpoint];
624
- };
625
- const useShowDialogSheet = (context) => {
626
- const breakpointActive = useSheetBreakpointActive(context);
627
- return context.open === false ? false : breakpointActive;
628
- };
629
- // Annotate the CommonJS export names for ESM import in node:
630
- 0 && (module.exports = {
631
- Dialog,
632
- DialogClose,
633
- DialogContent,
634
- DialogDescription,
635
- DialogOverlay,
636
- DialogOverlayFrame,
637
- DialogPortal,
638
- DialogPortalFrame,
639
- DialogSheetContents,
640
- DialogTitle,
641
- DialogTrigger,
642
- DialogWarningProvider,
643
- createDialogScope
644
- });
5
+ For more information, see https://radix-ui.com/primitives/docs/components/${o.docsSlug}`;p.useEffect(()=>{s.isWeb&&e&&(document.getElementById(e)||console.warn(t))},[t,e])}return null},Le="DialogDescriptionWarning",Ge=({contentRef:e,descriptionId:o})=>{if(process.env.NODE_ENV==="development"){const n=`Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${ne(Le).contentName}}.`;p.useEffect(()=>{if(!s.isWeb)return;const r=e.current;if(!(r instanceof HTMLElement))return;const l=r.getAttribute("aria-describedby");o&&l&&(document.getElementById(o)||console.warn(n))},[n,e,o])}return null},fe=(0,s.withStaticProperties)(p.forwardRef(function(o,t){const{__scopeDialog:n,children:r,open:l,defaultOpen:i=!1,onOpenChange:c,modal:g=!0,allowPinchZoom:m=!1}=o,y=(0,s.useId)(),u=(0,s.useId)(),T=(0,s.useId)(),E=(0,s.useId)(),O=n?Object.keys(n)[0]:y,v=re({scopeKey:O,contentId:u}),N=p.useRef(null),Pe=p.useRef(null),[Ce,f]=(0,ue.useControllableState)({prop:l,defaultProp:i,onChange:c}),he=p.useCallback(()=>{f(B=>!B)},[f]),Se={scope:n,scopeKey:O,triggerRef:N,contentRef:Pe,contentId:u,titleId:T,descriptionId:E,open:Ce,onOpenChange:f,onOpenToggle:he,modal:g,allowPinchZoom:m},{when:ye,AdaptProvider:Te}=(0,H.useAdaptParent)({Contents:p.useCallback(B=>(0,a.jsx)(S.PortalHost,{forwardProps:B,name:v}),[v])});return p.useImperativeHandle(t,()=>({open:f}),[f]),(0,a.jsx)(Te,{children:(0,a.jsx)(U,{...Se,sheetBreakpoint:ye,children:(0,a.jsx)(Ye,{onOpenChange:f,__scopeDialog:n,children:r})})})}),{Trigger:A,Portal:w,Overlay:_,Content:M,Title:k,Description:W,Close:V,Sheet:P.ControlledSheet,Adapt:H.Adapt}),Be="DialogSheetContents",De=({name:e,...o})=>(0,a.jsx)(S.PortalHost,{forwardProps:o,name:e});De.displayName=Be;const re=({scopeKey:e,contentId:o})=>`${e||o}SheetContents`,Ye=e=>{const o=d("DialogSheetController",e.__scopeDialog),t=h(o),n=ae(o),r=(0,s.useGet)(t);return(0,a.jsx)(P.SheetController,{onOpenChange:l=>{r()&&e.onOpenChange(l)},open:o.open,hidden:n===!1,children:e.children})},ae=e=>{const o=(0,s.useMedia)();return e.sheetBreakpoint?e.sheetBreakpoint===!0?!0:o[e.sheetBreakpoint]:!1},h=e=>{const o=ae(e);return e.open===!1?!1:o};0&&(module.exports={Dialog,DialogClose,DialogContent,DialogDescription,DialogOverlay,DialogOverlayFrame,DialogPortal,DialogPortalFrame,DialogSheetContents,DialogTitle,DialogTrigger,DialogWarningProvider,createDialogScope});
645
6
  //# sourceMappingURL=Dialog.js.map