@hanzogui/dialog 3.0.2 → 7.3.0

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