@tamagui/dialog 2.7.7 → 3.0.0-beta.643.1

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,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+
3
4
  var __create = Object.create;
4
5
  var __defProp = Object.defineProperty;
5
6
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,48 +8,41 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
7
8
  var __getProtoOf = Object.getPrototypeOf;
8
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
10
  var __export = (target, all) => {
10
- for (var name in all) __defProp(target, name, {
11
- get: all[name],
12
- enumerable: true
13
- });
11
+ for (var name in all) __defProp(target, name, {
12
+ get: all[name],
13
+ enumerable: true
14
+ });
14
15
  };
15
16
  var __copyProps = (to, from, except, desc) => {
16
- if (from && typeof from === "object" || typeof from === "function") {
17
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
18
- get: () => from[key],
19
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
20
- });
21
- }
22
- return to;
17
+ if (from && typeof from === "object" || typeof from === "function") {
18
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
19
+ get: () => from[key],
20
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
21
+ });
22
+ }
23
+ return to;
23
24
  };
24
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
25
- // If the importer is in node compatibility mode or this is not an ESM
26
- // file that has been converted to a CommonJS file using a Babel-
27
- // compatible transform (i.e. "__esModule" has not been set), then set
28
- // "default" to the CommonJS "module.exports" for node compatibility.
29
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
30
- value: mod,
31
- enumerable: true
25
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
26
+ value: mod,
27
+ enumerable: true
32
28
  }) : target, mod));
33
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
34
- value: true
35
- }), mod);
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
36
30
  var Dialog_exports = {};
37
31
  __export(Dialog_exports, {
38
- Dialog: () => Dialog,
39
- DialogClose: () => DialogClose,
40
- DialogContent: () => DialogContent,
41
- DialogContext: () => DialogContext,
42
- DialogDescription: () => DialogDescription,
43
- DialogOverlay: () => DialogOverlay,
44
- DialogOverlayFrame: () => DialogOverlayFrame,
45
- DialogPortal: () => DialogPortal,
46
- DialogPortalFrame: () => DialogPortalFrame,
47
- DialogProvider: () => DialogProvider,
48
- DialogTitle: () => DialogTitle,
49
- DialogTrigger: () => DialogTrigger,
50
- DialogWarningProvider: () => DialogWarningProvider,
51
- useDialogContext: () => useDialogContext
32
+ Dialog: () => Dialog,
33
+ DialogClose: () => DialogClose,
34
+ DialogContent: () => DialogContent,
35
+ DialogContext: () => DialogContext,
36
+ DialogDescription: () => DialogDescription,
37
+ DialogOverlay: () => DialogOverlay,
38
+ DialogOverlayFrame: () => DialogOverlayFrame,
39
+ DialogPortal: () => DialogPortal,
40
+ DialogPortalFrame: () => DialogPortalFrame,
41
+ DialogProvider: () => DialogProvider,
42
+ DialogTitle: () => DialogTitle,
43
+ DialogTrigger: () => DialogTrigger,
44
+ DialogWarningProvider: () => DialogWarningProvider,
45
+ useDialogContext: () => useDialogContext
52
46
  });
53
47
  module.exports = __toCommonJS(Dialog_exports);
54
48
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -63,692 +57,630 @@ var import_focus_scope = require("@tamagui/focus-scope");
63
57
  var import_helpers = require("@tamagui/helpers");
64
58
  var import_portal = require("@tamagui/portal");
65
59
  var import_remove_scroll = require("@tamagui/remove-scroll");
66
- var import_controller = require("@tamagui/sheet/controller");
67
60
  var import_stacks = require("@tamagui/stacks");
68
61
  var import_text = require("@tamagui/text");
69
62
  var import_use_controllable_state = require("@tamagui/use-controllable-state");
70
63
  var import_z_index_stack = require("@tamagui/z-index-stack");
71
64
  var React = __toESM(require("react"), 1);
72
65
  function _instanceof(left, right) {
73
- if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
74
- return !!right[Symbol.hasInstance](left);
75
- } else {
76
- return left instanceof right;
77
- }
66
+ if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
67
+ return !!right[Symbol.hasInstance](left);
68
+ } else {
69
+ return left instanceof right;
70
+ }
78
71
  }
79
- var DialogContext = (0, import_core.createStyledContext)(
80
- // since we always provide this we can avoid setting here
81
- {}, "Dialog__");
82
- var {
83
- useStyledContext: useDialogContext,
84
- Provider: DialogProvider
85
- } = DialogContext;
86
- var DialogAdaptHiddenContext = /* @__PURE__ */React.createContext(true);
87
- var DialogTriggerFrame = (0, import_core.styled)(import_core.View, {
88
- name: "DialogTrigger"
89
- });
90
- var DialogTrigger = DialogTriggerFrame.styleable(function DialogTrigger2(props, forwardedRef) {
91
- var {
92
- scope,
93
- ...triggerProps
94
- } = props;
95
- var isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
96
- var context = useDialogContext(scope);
97
- var composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
98
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
99
- value: true,
100
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
101
- render: isInsideButton ? "span" : "button",
102
- "aria-haspopup": "dialog",
103
- "aria-expanded": context.open,
104
- "aria-controls": context.contentId,
105
- "data-state": getState(context.open),
106
- ...triggerProps,
107
- ref: composedTriggerRef,
108
- onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
109
- })
110
- });
72
+ var DialogContext = (0, import_core.createStyledContext)({}, "Dialog__");
73
+ var { useStyledContext: useDialogContext, Provider: DialogProvider } = DialogContext;
74
+ var DialogTriggerFrame = (0, import_core.styled)(import_core.View, { displayName: "DialogTrigger" });
75
+ var DialogTrigger = (0, import_core.createStyledHOC)(DialogTriggerFrame, function DialogTrigger2(props, forwardedRef) {
76
+ var { scope, ...triggerProps } = props;
77
+ var isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
78
+ var context = useDialogContext(scope);
79
+ var composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
80
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
81
+ value: props.asChild ? isInsideButton : true,
82
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
83
+ render: isInsideButton ? "span" : "button",
84
+ "aria-haspopup": "dialog",
85
+ "aria-expanded": context.open,
86
+ "aria-controls": context.contentId,
87
+ "data-state": getState(context.open),
88
+ ...triggerProps,
89
+ ref: composedTriggerRef,
90
+ onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
91
+ })
92
+ });
111
93
  });
112
94
  var DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
113
- pointerEvents: "none",
114
- render: "dialog",
115
- variants: {
116
- unstyled: {
117
- false: {
118
- alignItems: "center",
119
- justifyContent: "center",
120
- fullscreen: true,
121
- "$platform-web": {
122
- // undo dialog styles
123
- borderWidth: 0,
124
- backgroundColor: "transparent",
125
- color: "inherit",
126
- maxInlineSize: "none",
127
- margin: 0,
128
- width: "auto",
129
- height: "auto",
130
- // ensure always in frame and right height
131
- maxHeight: "100vh",
132
- position: "fixed",
133
- // ensure dialog inherits stacking context from portal wrapper
134
- zIndex: 1
135
- }
136
- }
137
- }
138
- },
139
- defaultVariants: {
140
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
141
- }
95
+ pointerEvents: "none",
96
+ alignItems: "center",
97
+ justifyContent: "center",
98
+ position: "absolute web:fixed",
99
+ inset: 0,
100
+ borderWidth: "web:0px",
101
+ backgroundColor: "web:transparent",
102
+ color: "web:inherit",
103
+ maxInlineSize: "web:none",
104
+ margin: "web:0px",
105
+ width: "web:auto",
106
+ height: "web:auto",
107
+ maxHeight: "web:100vh",
108
+ zIndex: "web:1",
109
+ render: "dialog"
142
110
  });
143
111
  var needsRepropagation = (0, import_portal.needsPortalRepropagation)();
144
- var DialogPortalItem = function (param) {
145
- var {
146
- context,
147
- children
148
- } = param;
149
- var themeName = (0, import_core.useThemeName)();
150
- var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
151
- var adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
152
- var content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
153
- name: themeName,
154
- children
155
- });
156
- if (needsRepropagation) {
157
- content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.ProvideAdaptContext, {
158
- ...adaptContext,
159
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
160
- ...context,
161
- children: content
162
- })
163
- });
164
- }
165
- return isAdapted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
166
- scope: context.adaptScope,
167
- children: content
168
- }) : context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
169
- hostName: context.modal ? "root" : context.adaptScope,
170
- children: content
171
- }) : content;
112
+ var DialogPortalItem = function(param) {
113
+ var { context, children } = param;
114
+ var themeName = (0, import_core.useThemeName)();
115
+ var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
116
+ var adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
117
+ var content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
118
+ name: themeName,
119
+ children
120
+ });
121
+ if (needsRepropagation) {
122
+ content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.ProvideAdaptContext, {
123
+ ...adaptContext,
124
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
125
+ ...context,
126
+ children: content
127
+ })
128
+ });
129
+ }
130
+ return isAdapted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
131
+ scope: context.adaptScope,
132
+ children: content
133
+ }) : context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
134
+ hostName: "root",
135
+ children: content
136
+ }) : content;
172
137
  };
173
- var DialogPortal = /* @__PURE__ */React.forwardRef(function (props, forwardRef) {
174
- var {
175
- scope,
176
- forceMount,
177
- children,
178
- ...frameProps
179
- } = props;
180
- var dialogRef = React.useRef(null);
181
- var ref = (0, import_compose_refs.composeRefs)(dialogRef, forwardRef);
182
- var context = useDialogContext(scope);
183
- var keepMounted = forceMount || context.keepChildrenMounted;
184
- var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
185
- var [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
186
- if (context.open && isFullyHidden) {
187
- setIsFullyHidden(false);
188
- }
189
- var isVisible = context.open ? true : !isFullyHidden;
190
- if (import_constants.isWeb) {
191
- (0, import_constants.useIsomorphicLayoutEffect)(function () {
192
- var node = dialogRef.current;
193
- if (!_instanceof(node, HTMLDialogElement)) return;
194
- if (isVisible) {
195
- var _node_show;
196
- (_node_show = node.show) === null || _node_show === void 0 ? void 0 : _node_show.call(node);
197
- } else {
198
- var _node_close;
199
- (_node_close = node.close) === null || _node_close === void 0 ? void 0 : _node_close.call(node);
200
- }
201
- }, [isVisible]);
202
- }
203
- var onAnimationCompleteRef = React.useRef(context.onAnimationComplete);
204
- onAnimationCompleteRef.current = context.onAnimationComplete;
205
- var handleExitComplete = React.useCallback(function () {
206
- var _onAnimationCompleteRef_current;
207
- setIsFullyHidden(true);
208
- (_onAnimationCompleteRef_current = onAnimationCompleteRef.current) === null || _onAnimationCompleteRef_current === void 0 ? void 0 : _onAnimationCompleteRef_current.call(onAnimationCompleteRef, {
209
- open: false
210
- });
211
- }, []);
212
- React.useEffect(function () {
213
- if (context.open && !isAdapted && onAnimationCompleteRef.current) {
214
- var tm = setTimeout(function () {
215
- var _onAnimationCompleteRef_current;
216
- (_onAnimationCompleteRef_current = onAnimationCompleteRef.current) === null || _onAnimationCompleteRef_current === void 0 ? void 0 : _onAnimationCompleteRef_current.call(onAnimationCompleteRef, {
217
- open: true
218
- });
219
- }, 350);
220
- return function () {
221
- return clearTimeout(tm);
222
- };
223
- }
224
- }, [context.open, isAdapted]);
225
- var zIndex = (0, import_core.getExpandedShorthand)("zIndex", props);
226
- var contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_z_index_stack.StackZIndexContext, {
227
- zIndex: (0, import_portal.resolveViewZIndex)(zIndex),
228
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate.Animate, {
229
- type: "presence",
230
- present: Boolean(context.open),
231
- keepChildrenMounted: Boolean(keepMounted),
232
- onExitComplete: handleExitComplete,
233
- passThrough: isAdapted,
234
- children
235
- })
236
- });
237
- var framedContents = isFullyHidden && !keepMounted && !isAdapted ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.LayoutMeasurementController, {
238
- disable: !context.open,
239
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalFrame, {
240
- ref,
241
- ...(import_constants.isWeb && context.open && {
242
- "aria-modal": true
243
- }),
244
- pointerEvents: context.open ? "auto" : "none",
245
- ...frameProps,
246
- className: `_no_backdrop ` + (frameProps.className || ""),
247
- children: contents
248
- })
249
- });
250
- if (import_constants.isWeb) {
251
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
252
- zIndex,
253
- // set to 100000 which ensures dialogs are above most fixed UI (headers, navs)
254
- // this makes sure its above typical stacking contexts
255
- stackZIndex: 1e5,
256
- passThrough: isAdapted,
257
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PassthroughTheme, {
258
- passThrough: isAdapted,
259
- children: framedContents
260
- })
261
- });
262
- }
263
- return isAdapted ? framedContents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
264
- context,
265
- children: framedContents
266
- });
138
+ var DialogPortal = (0, import_core.createRefComponent)(function(props, forwardedRef) {
139
+ var { scope, forceMount, children, ...frameProps } = props;
140
+ var dialogRef = React.useRef(null);
141
+ var ref = (0, import_compose_refs.composeRefs)(dialogRef, forwardedRef);
142
+ var context = useDialogContext(scope);
143
+ var portalContext = forceMount ? {
144
+ ...context,
145
+ forceMount: true
146
+ } : context;
147
+ var keepMounted = forceMount || context.keepChildrenMounted;
148
+ var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
149
+ var isVisible = context.open || context.hasPresentParts;
150
+ if (import_constants.isWeb) {
151
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
152
+ var node = dialogRef.current;
153
+ if (!_instanceof(node, HTMLDialogElement)) return;
154
+ if (isVisible) {
155
+ var _node_show;
156
+ (_node_show = node.show) === null || _node_show === void 0 ? void 0 : _node_show.call(node);
157
+ } else {
158
+ var _node_close;
159
+ (_node_close = node.close) === null || _node_close === void 0 ? void 0 : _node_close.call(node);
160
+ }
161
+ }, [isVisible]);
162
+ }
163
+ var zIndex = (0, import_core.getExpandedShorthand)("zIndex", props);
164
+ var contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_z_index_stack.StackZIndexContext, {
165
+ zIndex: (0, import_portal.resolveViewZIndex)(zIndex),
166
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
167
+ scope: context.dialogScope,
168
+ ...portalContext,
169
+ children
170
+ })
171
+ });
172
+ var framedContents = !isVisible && !keepMounted && !isAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.LayoutMeasurementController, {
173
+ disable: !context.open,
174
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalFrame, {
175
+ ref,
176
+ ...import_constants.isWeb && context.open && context.modal && { "aria-modal": true },
177
+ pointerEvents: context.open && context.modal ? "auto" : "none",
178
+ ...frameProps,
179
+ className: `_no_backdrop ` + (frameProps.className || ""),
180
+ children: contents
181
+ })
182
+ });
183
+ if (import_constants.isWeb) {
184
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, {
185
+ zIndex,
186
+ stackZIndex: 1e5,
187
+ passThrough: isAdapted,
188
+ hidden: !isVisible,
189
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PassthroughTheme, {
190
+ passThrough: isAdapted,
191
+ children: framedContents
192
+ })
193
+ });
194
+ }
195
+ return isAdapted ? framedContents : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, {
196
+ context: portalContext,
197
+ children: framedContents
198
+ });
267
199
  });
268
- var PassthroughTheme = function (param) {
269
- var {
270
- children,
271
- passThrough
272
- } = param;
273
- var themeName = (0, import_core.useThemeName)();
274
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
275
- passThrough,
276
- name: themeName,
277
- forceClassName: true,
278
- children
279
- });
200
+ var PassthroughTheme = function(param) {
201
+ var { children, passThrough } = param;
202
+ var themeName = (0, import_core.useThemeName)();
203
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
204
+ passThrough,
205
+ name: themeName,
206
+ forceClassName: true,
207
+ children
208
+ });
280
209
  };
210
+ function useDialogAnimationReporter(context) {
211
+ var onAnimationCompleteRef = React.useRef(context.onAnimationComplete);
212
+ onAnimationCompleteRef.current = context.onAnimationComplete;
213
+ var openRef = React.useRef(context.open);
214
+ var pendingTransitionRef = React.useRef(context.open ? true : null);
215
+ if (openRef.current !== context.open) {
216
+ openRef.current = context.open;
217
+ pendingTransitionRef.current = context.open;
218
+ }
219
+ var reportComplete = React.useCallback(function(open) {
220
+ var _onAnimationCompleteRef_current;
221
+ if (pendingTransitionRef.current !== open) return;
222
+ if (openRef.current !== open) return;
223
+ pendingTransitionRef.current = null;
224
+ (_onAnimationCompleteRef_current = onAnimationCompleteRef.current) === null || _onAnimationCompleteRef_current === void 0 ? void 0 : _onAnimationCompleteRef_current.call(onAnimationCompleteRef, { open });
225
+ }, []);
226
+ return React.useMemo(function() {
227
+ return {
228
+ onEnterComplete: function() {
229
+ return reportComplete(true);
230
+ },
231
+ onExitComplete: function() {
232
+ return reportComplete(false);
233
+ }
234
+ };
235
+ }, [reportComplete]);
236
+ }
237
+ function useDialogPartPresence(context, options) {
238
+ var [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
239
+ var reactId = React.useId();
240
+ var partPresenceId = `${context.contentId}-${options.id}-${reactId}`;
241
+ var keepMounted = options.forceMount || context.keepChildrenMounted;
242
+ var isPresent = context.open || !isFullyHidden;
243
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
244
+ if (context.open && isFullyHidden) {
245
+ setIsFullyHidden(false);
246
+ }
247
+ }, [context.open, isFullyHidden]);
248
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
249
+ if (options.disabled) return;
250
+ context.setPartPresence(partPresenceId, isPresent);
251
+ return function() {
252
+ context.setPartPresence(partPresenceId, false);
253
+ };
254
+ }, [
255
+ context.setPartPresence,
256
+ isPresent,
257
+ options.disabled,
258
+ partPresenceId
259
+ ]);
260
+ var onExitComplete = React.useCallback(function() {
261
+ var _options_onExitComplete;
262
+ setIsFullyHidden(true);
263
+ (_options_onExitComplete = options.onExitComplete) === null || _options_onExitComplete === void 0 ? void 0 : _options_onExitComplete.call(options);
264
+ }, [options.onExitComplete]);
265
+ return {
266
+ keepMounted,
267
+ onExitComplete,
268
+ shouldRender: Boolean(keepMounted || context.open || !isFullyHidden)
269
+ };
270
+ }
281
271
  var OVERLAY_NAME = "DialogOverlay";
282
272
  var DialogOverlayFrame = (0, import_core.styled)(import_stacks.YStack, {
283
- name: OVERLAY_NAME,
284
- zIndex: 1,
285
- variants: {
286
- open: {
287
- true: {
288
- pointerEvents: "auto"
289
- },
290
- false: {
291
- pointerEvents: "none"
292
- }
293
- },
294
- unstyled: {
295
- false: {
296
- fullscreen: true,
297
- position: "absolute",
298
- backgroundColor: "$background",
299
- pointerEvents: "auto"
300
- }
301
- }
302
- },
303
- defaultVariants: {
304
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
305
- }
273
+ displayName: OVERLAY_NAME,
274
+ zIndex: 1,
275
+ inset: 0,
276
+ position: "absolute",
277
+ pointerEvents: "auto",
278
+ variants: { open: {
279
+ true: { pointerEvents: "auto" },
280
+ false: { pointerEvents: "none" }
281
+ } }
306
282
  });
307
- var DialogOverlay = DialogOverlayFrame.styleable(function DialogOverlay2(param, forwardedRef) {
308
- var {
309
- scope,
310
- ...props
311
- } = param;
312
- var context = useDialogContext(scope);
313
- var {
314
- forceMount = context.forceMount,
315
- ...overlayProps
316
- } = props;
317
- var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
318
- if (!forceMount) {
319
- if (!context.modal || isAdapted) {
320
- return null;
321
- }
322
- }
323
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
324
- "data-state": getState(context.open),
325
- // TODO: this will be apply for v2
326
- // onPress={() => {
327
- // // if the overlay is pressed, close the dialog
328
- // context.onOpenChange(false)
329
- // }}
330
- // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
331
- pointerEvents: context.open ? "auto" : "none",
332
- ...overlayProps,
333
- ref: forwardedRef
334
- });
283
+ var DialogOverlay = (0, import_core.createStyledHOC)(DialogOverlayFrame, function DialogOverlay2(param, forwardedRef) {
284
+ var { scope, ...props } = param;
285
+ var context = useDialogContext(scope);
286
+ var { forceMount = context.forceMount, ...overlayProps } = props;
287
+ var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
288
+ var presence = useDialogPartPresence(context, {
289
+ disabled: isAdapted,
290
+ forceMount,
291
+ id: "overlay"
292
+ });
293
+ if (!forceMount && isAdapted) {
294
+ return null;
295
+ }
296
+ if (!presence.shouldRender) {
297
+ return null;
298
+ }
299
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate.Animate, {
300
+ type: "presence",
301
+ present: Boolean(context.open),
302
+ keepChildrenMounted: Boolean(presence.keepMounted),
303
+ onExitComplete: presence.onExitComplete,
304
+ passThrough: isAdapted,
305
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
306
+ "data-state": getState(context.open),
307
+ pointerEvents: context.open && context.modal ? "auto exit:none" : "none",
308
+ ...overlayProps,
309
+ ref: forwardedRef
310
+ }, `${context.contentId}-overlay`)
311
+ });
335
312
  });
336
313
  var CONTENT_NAME = "DialogContent";
337
- var DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
338
- name: CONTENT_NAME,
339
- zIndex: 2,
340
- variants: {
341
- size: {
342
- "...size": function (val, extras) {
343
- return {};
344
- }
345
- },
346
- unstyled: {
347
- false: {
348
- position: "relative",
349
- backgroundColor: "$background",
350
- borderWidth: 1,
351
- borderColor: "$borderColor",
352
- padding: "$true",
353
- borderRadius: "$true",
354
- elevate: true,
355
- // Ensure content receives pointer events (fixes React 19 + display:contents inheritance)
356
- pointerEvents: "auto"
357
- }
358
- }
359
- },
360
- defaultVariants: {
361
- size: "$true",
362
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
363
- }
314
+ var DialogContentFrame = (0, import_core.styled)(import_stacks.YStack, {
315
+ displayName: CONTENT_NAME,
316
+ zIndex: 2,
317
+ position: "relative",
318
+ pointerEvents: "auto",
319
+ variants: {
320
+ elevate: { true: {
321
+ shadowColor: "shadow-color",
322
+ shadowRadius: 24,
323
+ shadowOffset: {
324
+ width: 0,
325
+ height: 12
326
+ }
327
+ } },
328
+ bordered: { true: {
329
+ borderWidth: 1,
330
+ borderColor: "border-color"
331
+ } }
332
+ }
364
333
  });
365
- var DialogContent = DialogContentFrame.styleable(function DialogContent2(param, forwardedRef) {
366
- var {
367
- scope,
368
- ...props
369
- } = param;
370
- var context = useDialogContext(scope);
371
- var contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
372
- children: context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentModal, {
373
- context,
374
- ...props,
375
- ref: forwardedRef
376
- }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentNonModal, {
377
- context,
378
- ...props,
379
- ref: forwardedRef
380
- })
381
- });
382
- if (!import_constants.isWeb || context.disableRemoveScroll) {
383
- return contents;
384
- }
385
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
386
- enabled: context.open,
387
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
388
- "data-remove-scroll-container": true,
389
- className: "_dsp_contents",
390
- children: contents
391
- })
392
- });
334
+ var DialogContent = (0, import_core.createStyledHOC)(DialogContentFrame, function DialogContent2(param, forwardedRef) {
335
+ var { scope, ...props } = param;
336
+ var context = useDialogContext(scope);
337
+ var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
338
+ var reporter = useDialogAnimationReporter(context);
339
+ var onTransitionProp = props.onTransition;
340
+ var onTransition = React.useCallback(function(event) {
341
+ if (event.phase === "end" && event.cause === "enter") {
342
+ reporter.onEnterComplete();
343
+ }
344
+ onTransitionProp === null || onTransitionProp === void 0 ? void 0 : onTransitionProp(event);
345
+ }, [reporter.onEnterComplete, onTransitionProp]);
346
+ var presence = useDialogPartPresence(context, {
347
+ disabled: isAdapted,
348
+ forceMount: context.forceMount,
349
+ id: "content",
350
+ onExitComplete: reporter.onExitComplete
351
+ });
352
+ var contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentModal, {
353
+ context,
354
+ ...props,
355
+ onTransition,
356
+ ref: forwardedRef
357
+ }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentNonModal, {
358
+ context,
359
+ ...props,
360
+ onTransition,
361
+ ref: forwardedRef
362
+ }) });
363
+ if (isAdapted) {
364
+ if (!import_constants.isWeb || context.disableRemoveScroll) {
365
+ return contents;
366
+ }
367
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
368
+ enabled: context.open && context.modal,
369
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
370
+ "data-remove-scroll-container": true,
371
+ className: "_dsp_contents",
372
+ children: contents
373
+ })
374
+ });
375
+ }
376
+ if (!presence.shouldRender) {
377
+ return null;
378
+ }
379
+ var animated = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate.Animate, {
380
+ type: "presence",
381
+ present: Boolean(context.open),
382
+ keepChildrenMounted: Boolean(presence.keepMounted),
383
+ onExitComplete: presence.onExitComplete,
384
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Fragment, { children: contents }, context.contentId)
385
+ });
386
+ if (!import_constants.isWeb || context.disableRemoveScroll) {
387
+ return animated;
388
+ }
389
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
390
+ enabled: context.open && context.modal,
391
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
392
+ "data-remove-scroll-container": true,
393
+ className: "_dsp_contents",
394
+ children: animated
395
+ })
396
+ });
393
397
  });
394
- var DialogContentModal = /* @__PURE__ */React.forwardRef(function (param, forwardedRef) {
395
- var {
396
- children,
397
- context,
398
- ...props
399
- } = param;
400
- var contentRef = React.useRef(null);
401
- var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
402
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
403
- ...props,
404
- context,
405
- ref: composedRefs,
406
- // we make sure focus isn't trapped once `DialogContent` has been closed
407
- // (closed !== unmounted when animating out)
408
- trapFocus: context.open,
409
- disableOutsidePointerEvents: true,
410
- onCloseAutoFocus: (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, function (event) {
411
- var _context_triggerRef_current;
412
- event.preventDefault();
413
- (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 ? void 0 : _context_triggerRef_current.focus();
414
- }),
415
- onPointerDownOutside: (0, import_helpers.composeEventHandlers)(props.onPointerDownOutside, function (event) {
416
- var originalEvent = event["detail"].originalEvent;
417
- var ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
418
- var isRightClick = originalEvent.button === 2 || ctrlLeftClick;
419
- if (isRightClick) event.preventDefault();
420
- }),
421
- // When focus is trapped, a `focusout` event may still happen.
422
- // We make sure we don't trigger our `onDismiss` in such case.
423
- onFocusOutside: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, function (event) {
424
- return event.preventDefault();
425
- }),
426
- ...(!props.unstyled && {
427
- outlineStyle: "none"
428
- }),
429
- children
430
- });
398
+ var DialogContentModal = (0, import_core.createRefComponent)(function(param, forwardedRef) {
399
+ var { children, context: contextProp, ...props } = param;
400
+ var context = useDialogContext(contextProp.dialogScope);
401
+ var contentRef = React.useRef(null);
402
+ var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
403
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentImpl, {
404
+ ...props,
405
+ context,
406
+ ref: composedRefs,
407
+ trapFocus: context.open,
408
+ disableOutsidePointerEvents: true,
409
+ onCloseAutoFocus: (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, function(event) {
410
+ var _context_triggerRef_current;
411
+ event.cancel();
412
+ (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 ? void 0 : _context_triggerRef_current.focus();
413
+ }),
414
+ onPointerDownOutside: (0, import_helpers.composeEventHandlers)(props.onPointerDownOutside, function(event) {
415
+ var originalEvent = event.event;
416
+ if (!originalEvent) return;
417
+ var ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
418
+ var isRightClick = originalEvent.button === 2 || ctrlLeftClick;
419
+ if (isRightClick) event.cancel();
420
+ }),
421
+ onFocusOutside: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, function(event) {
422
+ return event.cancel();
423
+ }),
424
+ outlineStyle: "none",
425
+ children
426
+ });
431
427
  });
432
- var DialogContentNonModal = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
433
- var hasInteractedOutsideRef = React.useRef(false);
434
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
435
- ...props,
436
- ref: forwardedRef,
437
- trapFocus: false,
438
- disableOutsidePointerEvents: false,
439
- onCloseAutoFocus: function (event) {
440
- var _props_onCloseAutoFocus;
441
- (_props_onCloseAutoFocus = props.onCloseAutoFocus) === null || _props_onCloseAutoFocus === void 0 ? void 0 : _props_onCloseAutoFocus.call(props, event);
442
- if (!event.defaultPrevented) {
443
- if (!hasInteractedOutsideRef.current) {
444
- var _props_context_triggerRef_current;
445
- (_props_context_triggerRef_current = props.context.triggerRef.current) === null || _props_context_triggerRef_current === void 0 ? void 0 : _props_context_triggerRef_current.focus();
446
- }
447
- event.preventDefault();
448
- }
449
- hasInteractedOutsideRef.current = false;
450
- },
451
- onInteractOutside: function (event) {
452
- var _props_onInteractOutside;
453
- (_props_onInteractOutside = props.onInteractOutside) === null || _props_onInteractOutside === void 0 ? void 0 : _props_onInteractOutside.call(props, event);
454
- if (!event.defaultPrevented) hasInteractedOutsideRef.current = true;
455
- var target = event.target;
456
- var trigger = props.context.triggerRef.current;
457
- if (!_instanceof(trigger, HTMLElement)) return;
458
- var targetIsTrigger = trigger.contains(target);
459
- if (targetIsTrigger) event.preventDefault();
460
- }
461
- });
428
+ var DialogContentNonModal = (0, import_core.createRefComponent)(function(props, forwardedRef) {
429
+ var context = useDialogContext(props.context.dialogScope);
430
+ var hasInteractedOutsideRef = React.useRef(false);
431
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentImpl, {
432
+ ...props,
433
+ context,
434
+ ref: forwardedRef,
435
+ trapFocus: false,
436
+ disableOutsidePointerEvents: false,
437
+ onCloseAutoFocus: function(event) {
438
+ var _props_onCloseAutoFocus;
439
+ (_props_onCloseAutoFocus = props.onCloseAutoFocus) === null || _props_onCloseAutoFocus === void 0 ? void 0 : _props_onCloseAutoFocus.call(props, event);
440
+ if (!event.isCanceled) {
441
+ if (!hasInteractedOutsideRef.current) {
442
+ var _props_context_triggerRef_current;
443
+ (_props_context_triggerRef_current = props.context.triggerRef.current) === null || _props_context_triggerRef_current === void 0 ? void 0 : _props_context_triggerRef_current.focus();
444
+ }
445
+ event.cancel();
446
+ }
447
+ hasInteractedOutsideRef.current = false;
448
+ },
449
+ onInteractOutside: function(event) {
450
+ var _props_onInteractOutside, _event_event;
451
+ (_props_onInteractOutside = props.onInteractOutside) === null || _props_onInteractOutside === void 0 ? void 0 : _props_onInteractOutside.call(props, event);
452
+ if (!event.isCanceled) hasInteractedOutsideRef.current = true;
453
+ var target = (_event_event = event.event) === null || _event_event === void 0 ? void 0 : _event_event.target;
454
+ var trigger = props.context.triggerRef.current;
455
+ if (!target || !_instanceof(trigger, HTMLElement)) return;
456
+ var targetIsTrigger = trigger.contains(target);
457
+ if (targetIsTrigger) event.cancel();
458
+ }
459
+ });
462
460
  });
463
- var DialogContentImpl = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
464
- var {
465
- trapFocus,
466
- onOpenAutoFocus,
467
- onCloseAutoFocus,
468
- disableOutsidePointerEvents,
469
- onEscapeKeyDown,
470
- onPointerDownOutside,
471
- onFocusOutside,
472
- onInteractOutside,
473
- context,
474
- ...contentProps
475
- } = props;
476
- var contentRef = React.useRef(null);
477
- var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
478
- var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
479
- var isAdaptFullyHidden = React.useContext(DialogAdaptHiddenContext);
480
- if (isAdapted) {
481
- if (!context.open && !context.keepChildrenMounted && isAdaptFullyHidden) {
482
- return null;
483
- }
484
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
485
- context,
486
- children: contentProps.children
487
- });
488
- }
489
- var contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentFrame, {
490
- ref: composedRefs,
491
- id: context.contentId,
492
- role: "dialog",
493
- "aria-modal": context.modal,
494
- "aria-describedby": context.descriptionId,
495
- "aria-labelledby": context.titleId,
496
- "data-state": getState(context.open),
497
- // allow clicking through content during exit animation
498
- pointerEvents: context.open ? "auto" : "none",
499
- ...contentProps
500
- });
501
- if (!import_constants.isWeb) {
502
- return contents;
503
- }
504
- return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
505
- children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
506
- disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
507
- forceUnmount: !context.open,
508
- onEscapeKeyDown,
509
- onPointerDownOutside,
510
- onFocusOutside,
511
- onInteractOutside,
512
- onDismiss: function () {
513
- var _context_onOpenChange;
514
- return context === null || context === void 0 ? void 0 : (_context_onOpenChange = context.onOpenChange) === null || _context_onOpenChange === void 0 ? void 0 : _context_onOpenChange.call(context, false);
515
- },
516
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
517
- loop: true,
518
- enabled: context.open,
519
- trapped: trapFocus,
520
- onMountAutoFocus: onOpenAutoFocus,
521
- forceUnmount: !context.open,
522
- onUnmountAutoFocus: onCloseAutoFocus,
523
- children: contents
524
- })
525
- }), process.env.NODE_ENV === "development" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
526
- children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TitleWarning, {
527
- titleId: context.titleId
528
- }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionWarning, {
529
- contentRef,
530
- descriptionId: context.descriptionId
531
- })]
532
- })]
533
- });
461
+ var DialogContentImpl = (0, import_core.createRefComponent)(function(props, forwardedRef) {
462
+ var { trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, context, onTransition, ...contentProps } = props;
463
+ var contentRef = React.useRef(null);
464
+ var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
465
+ var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
466
+ var adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
467
+ if (isAdapted) {
468
+ if (!context.open && !context.keepChildrenMounted && adaptContext.targetFullyHidden) {
469
+ return null;
470
+ }
471
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, {
472
+ context,
473
+ children: contentProps.children
474
+ });
475
+ }
476
+ var contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentFrame, {
477
+ ref: composedRefs,
478
+ id: context.contentId,
479
+ role: "dialog",
480
+ "aria-modal": context.modal,
481
+ "aria-describedby": context.descriptionId,
482
+ "aria-labelledby": context.titleId,
483
+ "data-state": getState(context.open),
484
+ pointerEvents: context.open ? "auto" : "none",
485
+ onTransition,
486
+ ...contentProps
487
+ });
488
+ if (!import_constants.isWeb) {
489
+ return contents;
490
+ }
491
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
492
+ disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
493
+ forceUnmount: !context.open,
494
+ onEscapeKeyDown,
495
+ onPointerDownOutside,
496
+ onFocusOutside,
497
+ onInteractOutside,
498
+ onDismiss: function() {
499
+ var _context_onOpenChange;
500
+ return context === null || context === void 0 ? void 0 : (_context_onOpenChange = context.onOpenChange) === null || _context_onOpenChange === void 0 ? void 0 : _context_onOpenChange.call(context, false);
501
+ },
502
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
503
+ loop: true,
504
+ enabled: context.open,
505
+ trapped: trapFocus,
506
+ onMountAutoFocus: onOpenAutoFocus,
507
+ forceUnmount: !context.open,
508
+ onUnmountAutoFocus: onCloseAutoFocus,
509
+ children: contents
510
+ })
511
+ }), process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, {
512
+ contentRef,
513
+ descriptionId: context.descriptionId
514
+ })] })] });
534
515
  });
535
- var DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
536
- name: "DialogTitle"
516
+ var DialogTitleFrame = (0, import_core.styled)(import_text.H2, { displayName: "DialogTitle" });
517
+ var DialogTitle = (0, import_core.createStyledHOC)(DialogTitleFrame, function DialogTitle2(props, forwardedRef) {
518
+ var { scope, ...titleProps } = props;
519
+ var context = useDialogContext(scope);
520
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, {
521
+ id: context.titleId,
522
+ ...titleProps,
523
+ ref: forwardedRef
524
+ });
537
525
  });
538
- var DialogTitle = DialogTitleFrame.styleable(function DialogTitle2(props, forwardedRef) {
539
- var {
540
- scope,
541
- ...titleProps
542
- } = props;
543
- var context = useDialogContext(scope);
544
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTitleFrame, {
545
- id: context.titleId,
546
- ...titleProps,
547
- ref: forwardedRef
548
- });
549
- });
550
- var DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
551
- name: "DialogDescription"
552
- });
553
- var DialogDescription = DialogDescriptionFrame.styleable(function DialogDescription2(props, forwardedRef) {
554
- var {
555
- scope,
556
- ...descriptionProps
557
- } = props;
558
- var context = useDialogContext(scope);
559
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
560
- id: context.descriptionId,
561
- ...descriptionProps,
562
- ref: forwardedRef
563
- });
526
+ var DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, { displayName: "DialogDescription" });
527
+ var DialogDescription = (0, import_core.createStyledHOC)(DialogDescriptionFrame, function DialogDescription2(props, forwardedRef) {
528
+ var { scope, ...descriptionProps } = props;
529
+ var context = useDialogContext(scope);
530
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
531
+ id: context.descriptionId,
532
+ ...descriptionProps,
533
+ ref: forwardedRef
534
+ });
564
535
  });
565
536
  var CLOSE_NAME = "DialogClose";
566
537
  var DialogCloseFrame = (0, import_core.styled)(import_core.View, {
567
- name: CLOSE_NAME,
568
- render: "button"
538
+ displayName: CLOSE_NAME,
539
+ render: "button"
569
540
  });
570
- var DialogClose = DialogCloseFrame.styleable(function (props, forwardedRef) {
571
- var {
572
- scope,
573
- displayWhenAdapted,
574
- ...closeProps
575
- } = props;
576
- var context = useDialogContext(scope);
577
- var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
578
- var isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
579
- if (isAdapted && !displayWhenAdapted) {
580
- return null;
581
- }
582
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogCloseFrame, {
583
- "aria-label": "Dialog Close",
584
- render: isInsideButton ? "span" : "button",
585
- ...closeProps,
586
- ref: forwardedRef,
587
- onPress: (0, import_helpers.composeEventHandlers)(props.onPress, function () {
588
- context.onOpenChange(false);
589
- })
590
- });
541
+ var DialogClose = (0, import_core.createStyledHOC)(DialogCloseFrame, function(props, forwardedRef) {
542
+ var { scope, displayWhenAdapted, ...closeProps } = props;
543
+ var context = useDialogContext(scope);
544
+ var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
545
+ var isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
546
+ if (isAdapted && !displayWhenAdapted) {
547
+ return null;
548
+ }
549
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogCloseFrame, {
550
+ "aria-label": "Dialog Close",
551
+ render: isInsideButton ? "span" : "button",
552
+ ...closeProps,
553
+ ref: forwardedRef,
554
+ onPress: (0, import_helpers.composeEventHandlers)(props.onPress, function() {
555
+ context.onOpenChange(false);
556
+ })
557
+ });
591
558
  });
592
559
  function getState(open) {
593
- return open ? "open" : "closed";
560
+ return open ? "open" : "closed";
594
561
  }
595
562
  var TITLE_WARNING_NAME = "DialogTitleWarning";
596
563
  var [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
597
- contentName: CONTENT_NAME,
598
- titleName: "DialogTitle",
599
- docsSlug: "dialog"
564
+ contentName: CONTENT_NAME,
565
+ titleName: "DialogTitle",
566
+ docsSlug: "dialog"
600
567
  });
601
- var TitleWarning = function (param) {
602
- var {
603
- titleId
604
- } = param;
605
- if (process.env.NODE_ENV === "development") {
606
- var titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
607
- var MESSAGE = `\`${titleWarningContext.contentName}\` wants a \`${titleWarningContext.titleName}\` to be accessible. If you want to hide the \`${titleWarningContext.titleName}\`, wrap it with <VisuallyHidden />.`;
608
- React.useEffect(function () {
609
- if (!import_constants.isWeb) return;
610
- if (titleId) {
611
- var hasTitle = document.getElementById(titleId);
612
- if (!hasTitle) {
613
- console.warn(MESSAGE);
614
- }
615
- }
616
- }, [MESSAGE, titleId]);
617
- }
618
- return null;
568
+ var TitleWarning = function(param) {
569
+ var { titleId } = param;
570
+ if (process.env.NODE_ENV === "development") {
571
+ var titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
572
+ var MESSAGE = `\`${titleWarningContext.contentName}\` wants a \`${titleWarningContext.titleName}\` to be accessible. If you want to hide the \`${titleWarningContext.titleName}\`, wrap it with <VisuallyHidden />.`;
573
+ React.useEffect(function() {
574
+ if (!import_constants.isWeb) return;
575
+ if (titleId) {
576
+ var hasTitle = document.getElementById(titleId);
577
+ if (!hasTitle) {
578
+ console.warn(MESSAGE);
579
+ }
580
+ }
581
+ }, [MESSAGE, titleId]);
582
+ }
583
+ return null;
619
584
  };
620
585
  var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
621
- var DescriptionWarning = function (param) {
622
- var {
623
- contentRef,
624
- descriptionId
625
- } = param;
626
- if (process.env.NODE_ENV === "development") {
627
- var descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
628
- var MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
629
- React.useEffect(function () {
630
- if (!import_constants.isWeb) return;
631
- var contentNode = contentRef.current;
632
- if (!_instanceof(contentNode, HTMLElement)) {
633
- return;
634
- }
635
- var describedById = contentNode.getAttribute("aria-describedby");
636
- if (descriptionId && describedById) {
637
- var hasDescription = document.getElementById(descriptionId);
638
- if (!hasDescription) {
639
- console.warn(MESSAGE);
640
- }
641
- }
642
- }, [MESSAGE, contentRef, descriptionId]);
643
- }
644
- return null;
586
+ var DescriptionWarning = function(param) {
587
+ var { contentRef, descriptionId } = param;
588
+ if (process.env.NODE_ENV === "development") {
589
+ var descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
590
+ var MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
591
+ React.useEffect(function() {
592
+ if (!import_constants.isWeb) return;
593
+ var contentNode = contentRef.current;
594
+ if (!_instanceof(contentNode, HTMLElement)) {
595
+ return;
596
+ }
597
+ var describedById = contentNode.getAttribute("aria-describedby");
598
+ if (descriptionId && describedById) {
599
+ var hasDescription = document.getElementById(descriptionId);
600
+ if (!hasDescription) {
601
+ console.warn(MESSAGE);
602
+ }
603
+ }
604
+ }, [
605
+ MESSAGE,
606
+ contentRef,
607
+ descriptionId
608
+ ]);
609
+ }
610
+ return null;
645
611
  };
646
- var Dialog = (0, import_helpers.withStaticProperties)(/* @__PURE__ */React.forwardRef(function Dialog2(props, ref) {
647
- var {
648
- scope = "",
649
- children,
650
- open: openProp,
651
- defaultOpen = false,
652
- onOpenChange,
653
- modal = true,
654
- keepChildrenMounted,
655
- disableRemoveScroll = false,
656
- onAnimationComplete
657
- } = props;
658
- var baseId = React.useId();
659
- var dialogId = `Dialog-${scope}-${baseId}`;
660
- var contentId = `${dialogId}-content`;
661
- var titleId = `${dialogId}-title`;
662
- var descriptionId = `${dialogId}-description`;
663
- var triggerRef = React.useRef(null);
664
- var contentRef = React.useRef(null);
665
- var [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
666
- prop: openProp,
667
- defaultProp: defaultOpen,
668
- onChange: onOpenChange
669
- });
670
- var onOpenToggle = React.useCallback(function () {
671
- setOpen(function (prevOpen) {
672
- return !prevOpen;
673
- });
674
- }, [setOpen]);
675
- var adaptScope = `DialogAdapt${scope}`;
676
- var context = {
677
- dialogScope: scope,
678
- adaptScope,
679
- triggerRef,
680
- contentRef,
681
- contentId,
682
- titleId,
683
- descriptionId,
684
- open,
685
- onOpenChange: setOpen,
686
- onOpenToggle,
687
- modal,
688
- keepChildrenMounted,
689
- disableRemoveScroll,
690
- onAnimationComplete
691
- };
692
- React.useImperativeHandle(ref, function () {
693
- return {
694
- open: setOpen
695
- };
696
- }, [setOpen]);
697
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
698
- scope: adaptScope,
699
- portal: {
700
- forwardProps: props
701
- },
702
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
703
- scope,
704
- ...context,
705
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogSheetController, {
706
- onOpenChange: setOpen,
707
- scope,
708
- children
709
- })
710
- })
711
- });
612
+ var Dialog = (0, import_helpers.withStaticProperties)((0, import_core.createRefComponent)(function Dialog2(props) {
613
+ var { scope = "", children, open: openProp, defaultOpen = false, onOpenChange, modal = true, keepChildrenMounted, disableRemoveScroll = false, onAnimationComplete } = props;
614
+ var baseId = React.useId();
615
+ var dialogId = `Dialog-${scope}-${baseId}`;
616
+ var contentId = `${dialogId}-content`;
617
+ var titleId = `${dialogId}-title`;
618
+ var descriptionId = `${dialogId}-description`;
619
+ var triggerRef = React.useRef(null);
620
+ var contentRef = React.useRef(null);
621
+ var presentPartIdsRef = React.useRef(/* @__PURE__ */ new Set());
622
+ var [presentPartCount, setPresentPartCount] = React.useState(0);
623
+ var [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
624
+ prop: openProp,
625
+ defaultProp: defaultOpen,
626
+ onChange: onOpenChange
627
+ });
628
+ var onOpenToggle = React.useCallback(function() {
629
+ setOpen(function(prevOpen) {
630
+ return !prevOpen;
631
+ });
632
+ }, [setOpen]);
633
+ var adaptScope = `DialogAdapt${scope}`;
634
+ var setPartPresence = React.useCallback(function(id, present) {
635
+ var presentPartIds = presentPartIdsRef.current;
636
+ var hasPart = presentPartIds.has(id);
637
+ if (present && !hasPart) {
638
+ presentPartIds.add(id);
639
+ setPresentPartCount(presentPartIds.size);
640
+ } else if (!present && hasPart) {
641
+ presentPartIds.delete(id);
642
+ setPresentPartCount(presentPartIds.size);
643
+ }
644
+ }, []);
645
+ var context = {
646
+ dialogScope: scope,
647
+ adaptScope,
648
+ triggerRef,
649
+ contentRef,
650
+ contentId,
651
+ titleId,
652
+ descriptionId,
653
+ open,
654
+ onOpenChange: setOpen,
655
+ onOpenToggle,
656
+ modal,
657
+ keepChildrenMounted,
658
+ disableRemoveScroll,
659
+ hasPresentParts: presentPartCount > 0,
660
+ setPartPresence,
661
+ onAnimationComplete
662
+ };
663
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
664
+ scope: adaptScope,
665
+ open,
666
+ onOpenChange: setOpen,
667
+ state: context,
668
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
669
+ scope,
670
+ ...context,
671
+ children
672
+ })
673
+ });
712
674
  }), {
713
- Trigger: DialogTrigger,
714
- Portal: DialogPortal,
715
- Overlay: DialogOverlay,
716
- Content: DialogContent,
717
- Title: DialogTitle,
718
- Description: DialogDescription,
719
- Close: DialogClose,
720
- FocusScope: import_focus_scope.FocusScopeController,
721
- Adapt: import_adapt.Adapt
675
+ Trigger: DialogTrigger,
676
+ Portal: DialogPortal,
677
+ Overlay: DialogOverlay,
678
+ Content: DialogContent,
679
+ Title: DialogTitle,
680
+ Description: DialogDescription,
681
+ Close: DialogClose,
682
+ FocusScope: import_focus_scope.FocusScopeController,
683
+ Adapt: import_adapt.Adapt
722
684
  });
723
- var DialogSheetController = function (props) {
724
- var context = useDialogContext(props.scope);
725
- var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
726
- var [isAdaptFullyHidden, setIsAdaptFullyHidden] = React.useState(!context.open);
727
- if (context.open && isAdaptFullyHidden) {
728
- setIsAdaptFullyHidden(false);
729
- }
730
- var handleSheetAnimationComplete = React.useCallback(function (param) {
731
- var {
732
- open
733
- } = param;
734
- if (!open) {
735
- setIsAdaptFullyHidden(true);
736
- }
737
- }, []);
738
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_controller.SheetController, {
739
- onOpenChange: function (val) {
740
- if (isAdapted) {
741
- var _props_onOpenChange;
742
- (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, val);
743
- }
744
- },
745
- onAnimationComplete: handleSheetAnimationComplete,
746
- open: context.open,
747
- hidden: !isAdapted,
748
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogAdaptHiddenContext.Provider, {
749
- value: isAdaptFullyHidden,
750
- children: props.children
751
- })
752
- });
753
- };
685
+
754
686
  //# sourceMappingURL=Dialog.native.js.map