@tamagui/dialog 1.111.7 → 1.111.9

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