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