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