@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.
- package/LICENSE +42 -21
- package/dist/cjs/Dialog.cjs +623 -538
- package/dist/cjs/Dialog.native.js +659 -596
- package/dist/cjs/Dialog.native.js.map +1 -1
- package/dist/cjs/index.cjs +7 -5
- package/dist/cjs/index.native.js +7 -5
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/Dialog.mjs +580 -497
- package/dist/esm/Dialog.mjs.map +1 -1
- package/dist/esm/Dialog.native.js +616 -555
- package/dist/esm/Dialog.native.js.map +1 -1
- package/dist/jsx/Dialog.mjs +580 -497
- package/dist/jsx/Dialog.mjs.map +1 -1
- package/dist/jsx/Dialog.native.js +659 -596
- package/dist/jsx/Dialog.native.js.map +1 -1
- package/dist/jsx/index.native.js +7 -5
- package/package.json +27 -25
- package/src/Dialog.tsx +48 -5
- package/types/Dialog.d.ts +102 -102
- package/types/Dialog.d.ts.map +1 -0
- package/types/index.d.ts.map +1 -0
package/dist/cjs/Dialog.cjs
CHANGED
|
@@ -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
|
-
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
7
|
var __export = (target, all) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
19
|
-
|
|
19
|
+
}
|
|
20
|
+
return to;
|
|
21
|
+
};
|
|
20
22
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
const DialogContext = (0,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
})
|
|
99
|
-
})
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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
|
-
|
|
137
|
-
|
|
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
|
-
})
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
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
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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
|
-
}, [
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
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
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
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
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
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
|
-
|
|
257
|
-
|
|
258
|
-
fullscreen: !0,
|
|
259
|
-
position: "absolute",
|
|
260
|
-
backgroundColor: "$background",
|
|
261
|
-
pointerEvents: "auto"
|
|
262
|
-
}
|
|
271
|
+
false: {
|
|
272
|
+
pointerEvents: "none"
|
|
263
273
|
}
|
|
264
274
|
},
|
|
265
|
-
|
|
266
|
-
|
|
275
|
+
unstyled: {
|
|
276
|
+
false: {
|
|
277
|
+
fullscreen: true,
|
|
278
|
+
position: "absolute",
|
|
279
|
+
backgroundColor: "$background",
|
|
280
|
+
pointerEvents: "auto"
|
|
281
|
+
}
|
|
267
282
|
}
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
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
|
-
|
|
309
|
-
|
|
310
|
-
|
|
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
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
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
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
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
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
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
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
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
|
-
|
|
420
|
-
|
|
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
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
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
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
},
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
691
|
+
if (isAdapted) {
|
|
692
|
+
props.onOpenChange?.(val);
|
|
693
|
+
}
|
|
613
694
|
},
|
|
695
|
+
onAnimationComplete: handleSheetAnimationComplete,
|
|
614
696
|
open: context.open,
|
|
615
697
|
hidden: !isAdapted,
|
|
616
|
-
children:
|
|
698
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogAdaptHiddenContext.Provider, {
|
|
699
|
+
value: isAdaptFullyHidden,
|
|
700
|
+
children: props.children
|
|
701
|
+
})
|
|
617
702
|
});
|
|
618
703
|
};
|