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