@tamagui/dialog 1.88.0 → 1.88.2
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 +4 -22
- package/dist/cjs/Dialog.js.map +1 -1
- package/dist/cjs/Dialog.native.js +1 -0
- package/dist/cjs/Dialog.native.js.map +1 -1
- package/dist/cjs/index.js +0 -4
- package/dist/esm/Dialog.js +1 -0
- package/dist/esm/Dialog.js.map +1 -1
- package/dist/esm/Dialog.native.js +113 -97
- package/dist/esm/Dialog.native.js.map +1 -1
- package/dist/esm/index.native.js +19 -1
- package/dist/esm/index.native.js.map +1 -1
- package/dist/jsx/Dialog.js +183 -132
- package/dist/jsx/Dialog.js.map +1 -1
- package/dist/jsx/Dialog.native.js +254 -191
- package/dist/jsx/Dialog.native.js.map +1 -1
- package/dist/jsx/index.native.js +19 -1
- package/dist/jsx/index.native.js.map +1 -1
- package/package.json +20 -20
- package/src/Dialog.tsx +3 -0
- package/types/Dialog.d.ts.map +1 -1
|
@@ -1,47 +1,62 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
10
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
22
|
+
mod
|
|
23
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
24
|
+
var Dialog_exports = {};
|
|
25
|
+
__export(Dialog_exports, {
|
|
26
|
+
Dialog: () => Dialog,
|
|
27
|
+
DialogClose: () => DialogClose,
|
|
28
|
+
DialogContent: () => DialogContent,
|
|
29
|
+
DialogDescription: () => DialogDescription,
|
|
30
|
+
DialogOverlay: () => DialogOverlay,
|
|
31
|
+
DialogOverlayFrame: () => DialogOverlayFrame,
|
|
32
|
+
DialogPortal: () => DialogPortal,
|
|
33
|
+
DialogPortalFrame: () => DialogPortalFrame,
|
|
34
|
+
DialogSheetContents: () => DialogSheetContents,
|
|
35
|
+
DialogTitle: () => DialogTitle,
|
|
36
|
+
DialogTrigger: () => DialogTrigger,
|
|
37
|
+
DialogWarningProvider: () => DialogWarningProvider,
|
|
38
|
+
createDialogScope: () => createDialogScope
|
|
39
|
+
});
|
|
40
|
+
module.exports = __toCommonJS(Dialog_exports);
|
|
41
|
+
var import_adapt = require("@tamagui/adapt"), import_animate_presence = require("@tamagui/animate-presence"), import_aria_hidden = require("@tamagui/aria-hidden"), import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_core = require("@tamagui/core"), import_create_context = require("@tamagui/create-context"), import_dismissable = require("@tamagui/dismissable"), import_focus_scope = require("@tamagui/focus-scope"), import_helpers = require("@tamagui/helpers"), import_portal = require("@tamagui/portal"), import_remove_scroll = require("@tamagui/remove-scroll"), import_sheet = require("@tamagui/sheet"), import_stacks = require("@tamagui/stacks"), import_text = require("@tamagui/text"), import_use_controllable_state = require("@tamagui/use-controllable-state"), React = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
const DIALOG_NAME = "Dialog", [createDialogContext, createDialogScope] = (0, import_create_context.createContextScope)(DIALOG_NAME), [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME), TRIGGER_NAME = "DialogTrigger", DialogTriggerFrame = (0, import_core.styled)(import_core.View, {
|
|
31
43
|
name: TRIGGER_NAME
|
|
32
44
|
}), DialogTrigger = DialogTriggerFrame.styleable(
|
|
33
45
|
(props, forwardedRef) => {
|
|
34
|
-
const { __scopeDialog, ...triggerProps } = props, isInsideButton = React.useContext(ButtonNestingContext), context = useDialogContext(TRIGGER_NAME, __scopeDialog), composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
35
|
-
return
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
const { __scopeDialog, ...triggerProps } = props, isInsideButton = React.useContext(import_stacks.ButtonNestingContext), context = useDialogContext(TRIGGER_NAME, __scopeDialog), composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
|
|
47
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
48
|
+
DialogTriggerFrame,
|
|
49
|
+
{
|
|
50
|
+
tag: isInsideButton ? "span" : "button",
|
|
51
|
+
"aria-haspopup": "dialog",
|
|
52
|
+
"aria-expanded": context.open,
|
|
53
|
+
"aria-controls": context.contentId,
|
|
54
|
+
"data-state": getState(context.open),
|
|
55
|
+
...triggerProps,
|
|
56
|
+
ref: composedTriggerRef,
|
|
57
|
+
onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
|
|
58
|
+
}
|
|
59
|
+
) });
|
|
45
60
|
}
|
|
46
61
|
);
|
|
47
62
|
DialogTrigger.displayName = TRIGGER_NAME;
|
|
@@ -50,7 +65,7 @@ const PORTAL_NAME = "DialogPortal", [PortalProvider, usePortalContext] = createD
|
|
|
50
65
|
{
|
|
51
66
|
forceMount: void 0
|
|
52
67
|
}
|
|
53
|
-
), DialogPortalFrame = styled(YStack, {
|
|
68
|
+
), DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
54
69
|
variants: {
|
|
55
70
|
unstyled: {
|
|
56
71
|
false: {
|
|
@@ -58,7 +73,7 @@ const PORTAL_NAME = "DialogPortal", [PortalProvider, usePortalContext] = createD
|
|
|
58
73
|
justifyContent: "center",
|
|
59
74
|
fullscreen: !0,
|
|
60
75
|
zIndex: 1e5,
|
|
61
|
-
...isWeb && {
|
|
76
|
+
...import_constants.isWeb && {
|
|
62
77
|
maxHeight: "100vh",
|
|
63
78
|
position: "fixed"
|
|
64
79
|
}
|
|
@@ -69,8 +84,8 @@ const PORTAL_NAME = "DialogPortal", [PortalProvider, usePortalContext] = createD
|
|
|
69
84
|
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
70
85
|
}
|
|
71
86
|
}), DialogPortalItem = (props) => {
|
|
72
|
-
const themeName = useThemeName(), context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
|
|
73
|
-
return
|
|
87
|
+
const themeName = (0, import_core.useThemeName)(), context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, { hostName: props.hostName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItemContent, { ...props, themeName, context }) });
|
|
74
89
|
};
|
|
75
90
|
function DialogPortalItemContent(props) {
|
|
76
91
|
const {
|
|
@@ -83,31 +98,35 @@ function DialogPortalItemContent(props) {
|
|
|
83
98
|
separator
|
|
84
99
|
} = props;
|
|
85
100
|
let childrenSpaced = children;
|
|
86
|
-
return (space || separator) && (childrenSpaced = spacedChildren({
|
|
101
|
+
return (space || separator) && (childrenSpaced = (0, import_core.spacedChildren)({
|
|
87
102
|
children,
|
|
88
103
|
separator,
|
|
89
104
|
space,
|
|
90
105
|
direction: spaceDirection
|
|
91
|
-
})),
|
|
106
|
+
})), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { scope: __scopeDialog, ...context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, { name: themeName, children: childrenSpaced }) });
|
|
92
107
|
}
|
|
93
108
|
const DialogPortal = (props) => {
|
|
94
109
|
const { __scopeDialog, forceMount, children, ...frameProps } = props, context = useDialogContext(PORTAL_NAME, __scopeDialog), isShowing = forceMount || context.open, [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
|
|
95
110
|
isShowing && isFullyHidden && setIsFullyHidden(!1);
|
|
96
|
-
const contents =
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
111
|
+
const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
+
import_animate_presence.AnimatePresence,
|
|
113
|
+
{
|
|
114
|
+
onExitComplete: () => {
|
|
115
|
+
setIsFullyHidden(!0);
|
|
116
|
+
},
|
|
117
|
+
children: isShowing ? children : null
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
return useShowDialogSheet(context) ? children : context.modal ? isFullyHidden ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, { __scopeDialog, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopeDialog, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalFrame, { pointerEvents: isShowing ? "auto" : "none", ...frameProps, children: contents }) }) }) : contents;
|
|
102
121
|
};
|
|
103
122
|
DialogPortal.displayName = PORTAL_NAME;
|
|
104
|
-
const OVERLAY_NAME = "DialogOverlay", DialogOverlayFrame = styled(Overlay, {
|
|
123
|
+
const OVERLAY_NAME = "DialogOverlay", DialogOverlayFrame = (0, import_core.styled)(import_sheet.Overlay, {
|
|
105
124
|
name: OVERLAY_NAME
|
|
106
125
|
}), DialogOverlay = DialogOverlayFrame.extractable(
|
|
107
126
|
React.forwardRef(
|
|
108
127
|
({ __scopeDialog, ...props }, forwardedRef) => {
|
|
109
128
|
const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog), { forceMount = portalContext.forceMount, ...overlayProps } = props, context = useDialogContext(OVERLAY_NAME, __scopeDialog), showSheet = useShowDialogSheet(context);
|
|
110
|
-
return !forceMount && (!context.modal || showSheet) ? null :
|
|
129
|
+
return !forceMount && (!context.modal || showSheet) ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayImpl, { context, ...overlayProps, ref: forwardedRef });
|
|
111
130
|
}
|
|
112
131
|
)
|
|
113
132
|
);
|
|
@@ -118,15 +137,18 @@ const DialogOverlayImpl = React.forwardRef(
|
|
|
118
137
|
return (
|
|
119
138
|
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
120
139
|
// ie. when `Overlay` and `Content` are siblings
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
140
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
141
|
+
DialogOverlayFrame,
|
|
142
|
+
{
|
|
143
|
+
"data-state": getState(context.open),
|
|
144
|
+
pointerEvents: context.open ? "auto" : "none",
|
|
145
|
+
...overlayProps,
|
|
146
|
+
ref: forwardedRef
|
|
147
|
+
}
|
|
148
|
+
)
|
|
127
149
|
);
|
|
128
150
|
}
|
|
129
|
-
), CONTENT_NAME = "DialogContent", DialogContentFrame = styled(ThemeableStack, {
|
|
151
|
+
), CONTENT_NAME = "DialogContent", DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
130
152
|
name: CONTENT_NAME,
|
|
131
153
|
tag: "dialog",
|
|
132
154
|
variants: {
|
|
@@ -151,70 +173,82 @@ const DialogOverlayImpl = React.forwardRef(
|
|
|
151
173
|
}), DialogContent = DialogContentFrame.extractable(
|
|
152
174
|
React.forwardRef(
|
|
153
175
|
({ __scopeDialog, ...props }, forwardedRef) => {
|
|
154
|
-
const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog), { forceMount = portalContext.forceMount, ...contentProps } = props, context = useDialogContext(CONTENT_NAME, __scopeDialog), contents = context.modal ?
|
|
155
|
-
return !isWeb || context.disableRemoveScroll ? contents :
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
176
|
+
const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog), { forceMount = portalContext.forceMount, ...contentProps } = props, context = useDialogContext(CONTENT_NAME, __scopeDialog), contents = context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentModal, { context, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentNonModal, { context, ...contentProps, ref: forwardedRef });
|
|
177
|
+
return !import_constants.isWeb || context.disableRemoveScroll ? contents : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
178
|
+
import_remove_scroll.RemoveScroll,
|
|
179
|
+
{
|
|
180
|
+
forwardProps: !0,
|
|
181
|
+
enabled: context.open,
|
|
182
|
+
allowPinchZoom: context.allowPinchZoom,
|
|
183
|
+
shards: [context.contentRef],
|
|
184
|
+
removeScrollBar: !1,
|
|
185
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-remove-scroll-container": !0, className: "_dsp_contents", children: contents })
|
|
186
|
+
}
|
|
187
|
+
);
|
|
162
188
|
}
|
|
163
189
|
)
|
|
164
190
|
);
|
|
165
191
|
DialogContent.displayName = CONTENT_NAME;
|
|
166
192
|
const DialogContentModal = React.forwardRef(
|
|
167
193
|
({ children, context, ...props }, forwardedRef) => {
|
|
168
|
-
const contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
169
|
-
return isWeb && React.useEffect(() => {
|
|
194
|
+
const contentRef = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
|
|
195
|
+
return import_constants.isWeb && React.useEffect(() => {
|
|
170
196
|
if (!context.open)
|
|
171
197
|
return;
|
|
172
198
|
const content = contentRef.current;
|
|
173
199
|
if (content)
|
|
174
|
-
return hideOthers(content);
|
|
175
|
-
}, [context.open]),
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
200
|
+
return (0, import_aria_hidden.hideOthers)(content);
|
|
201
|
+
}, [context.open]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
202
|
+
DialogContentImpl,
|
|
203
|
+
{
|
|
204
|
+
...props,
|
|
205
|
+
context,
|
|
206
|
+
ref: composedRefs,
|
|
207
|
+
trapFocus: context.open,
|
|
208
|
+
disableOutsidePointerEvents: !0,
|
|
209
|
+
onCloseAutoFocus: (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
210
|
+
var _a;
|
|
211
|
+
event.preventDefault(), (_a = context.triggerRef.current) == null || _a.focus();
|
|
212
|
+
}),
|
|
213
|
+
onPointerDownOutside: (0, import_helpers.composeEventHandlers)(
|
|
214
|
+
props.onPointerDownOutside,
|
|
215
|
+
(event) => {
|
|
216
|
+
const originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0;
|
|
217
|
+
(originalEvent.button === 2 || ctrlLeftClick) && event.preventDefault();
|
|
218
|
+
}
|
|
219
|
+
),
|
|
220
|
+
onFocusOutside: (0, import_helpers.composeEventHandlers)(
|
|
221
|
+
props.onFocusOutside,
|
|
222
|
+
(event) => event.preventDefault()
|
|
223
|
+
),
|
|
224
|
+
children
|
|
225
|
+
}
|
|
226
|
+
);
|
|
196
227
|
}
|
|
197
228
|
), DialogContentNonModal = React.forwardRef(
|
|
198
229
|
(props, forwardedRef) => {
|
|
199
230
|
const hasInteractedOutsideRef = React.useRef(!1);
|
|
200
|
-
return
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
232
|
+
DialogContentImpl,
|
|
233
|
+
{
|
|
234
|
+
...props,
|
|
235
|
+
ref: forwardedRef,
|
|
236
|
+
trapFocus: !1,
|
|
237
|
+
disableOutsidePointerEvents: !1,
|
|
238
|
+
onCloseAutoFocus: (event) => {
|
|
239
|
+
var _a, _b;
|
|
240
|
+
(_a = props.onCloseAutoFocus) == null || _a.call(props, event), event.defaultPrevented || (hasInteractedOutsideRef.current || (_b = props.context.triggerRef.current) == null || _b.focus(), event.preventDefault()), hasInteractedOutsideRef.current = !1;
|
|
241
|
+
},
|
|
242
|
+
onInteractOutside: (event) => {
|
|
243
|
+
var _a;
|
|
244
|
+
(_a = props.onInteractOutside) == null || _a.call(props, event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
|
|
245
|
+
const target = event.target, trigger = props.context.triggerRef.current;
|
|
246
|
+
if (!(trigger instanceof HTMLElement))
|
|
247
|
+
return;
|
|
248
|
+
trigger.contains(target) && event.preventDefault();
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
);
|
|
218
252
|
}
|
|
219
253
|
), DialogContentImpl = React.forwardRef(
|
|
220
254
|
(props, forwardedRef) => {
|
|
@@ -230,63 +264,80 @@ const DialogContentModal = React.forwardRef(
|
|
|
230
264
|
onInteractOutside,
|
|
231
265
|
context,
|
|
232
266
|
...contentProps
|
|
233
|
-
} = props, contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, contentRef), showSheet = useShowDialogSheet(context), contents =
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
267
|
+
} = props, contentRef = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef), showSheet = useShowDialogSheet(context), contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
268
|
+
DialogContentFrame,
|
|
269
|
+
{
|
|
270
|
+
id: context.contentId,
|
|
271
|
+
"aria-describedby": context.descriptionId,
|
|
272
|
+
"aria-labelledby": context.titleId,
|
|
273
|
+
"data-state": getState(context.open),
|
|
274
|
+
...contentProps
|
|
275
|
+
}
|
|
276
|
+
);
|
|
277
|
+
return showSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, { hostName: getSheetContentsName(context), children: contentProps.children }) : import_constants.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
278
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
279
|
+
import_focus_scope.FocusScope,
|
|
280
|
+
{
|
|
281
|
+
loop: !0,
|
|
282
|
+
enabled: context.open,
|
|
283
|
+
trapped: trapFocus,
|
|
284
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
285
|
+
forceUnmount: !context.open,
|
|
286
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
287
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
288
|
+
import_dismissable.Dismissable,
|
|
289
|
+
{
|
|
290
|
+
disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
|
|
291
|
+
forceUnmount: !context.open,
|
|
292
|
+
onEscapeKeyDown,
|
|
293
|
+
onPointerDownOutside,
|
|
294
|
+
onFocusOutside,
|
|
295
|
+
onInteractOutside,
|
|
296
|
+
ref: composedRefs,
|
|
297
|
+
onDismiss: () => context.onOpenChange(!1),
|
|
298
|
+
children: contents
|
|
299
|
+
}
|
|
300
|
+
)
|
|
301
|
+
}
|
|
302
|
+
),
|
|
303
|
+
process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
304
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }),
|
|
305
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
306
|
+
DescriptionWarning,
|
|
307
|
+
{
|
|
308
|
+
contentRef,
|
|
309
|
+
descriptionId: context.descriptionId
|
|
310
|
+
}
|
|
311
|
+
)
|
|
312
|
+
] })
|
|
313
|
+
] }) : contents;
|
|
266
314
|
}
|
|
267
|
-
), TITLE_NAME = "DialogTitle", DialogTitleFrame = styled(H2, {
|
|
315
|
+
), TITLE_NAME = "DialogTitle", DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
|
|
268
316
|
name: TITLE_NAME
|
|
269
317
|
}), DialogTitle = DialogTitleFrame.styleable(
|
|
270
318
|
(props, forwardedRef) => {
|
|
271
319
|
const { __scopeDialog, ...titleProps } = props, context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
272
|
-
return
|
|
320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
|
273
321
|
}
|
|
274
322
|
);
|
|
275
323
|
DialogTitle.displayName = TITLE_NAME;
|
|
276
|
-
const DialogDescriptionFrame = styled(Paragraph, {
|
|
324
|
+
const DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
|
|
277
325
|
name: "DialogDescription"
|
|
278
326
|
}), DESCRIPTION_NAME = "DialogDescription", DialogDescription = DialogDescriptionFrame.styleable(
|
|
279
327
|
(props, forwardedRef) => {
|
|
280
328
|
const { __scopeDialog, ...descriptionProps } = props, context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
281
|
-
return
|
|
282
|
-
|
|
283
|
-
{
|
|
284
|
-
|
|
285
|
-
|
|
329
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
330
|
+
DialogDescriptionFrame,
|
|
331
|
+
{
|
|
332
|
+
id: context.descriptionId,
|
|
333
|
+
...descriptionProps,
|
|
334
|
+
ref: forwardedRef
|
|
335
|
+
}
|
|
336
|
+
);
|
|
286
337
|
}
|
|
287
338
|
);
|
|
288
339
|
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
289
|
-
const CLOSE_NAME = "DialogClose", DialogCloseFrame = styled(View, {
|
|
340
|
+
const CLOSE_NAME = "DialogClose", DialogCloseFrame = (0, import_core.styled)(import_core.View, {
|
|
290
341
|
name: CLOSE_NAME,
|
|
291
342
|
tag: "button"
|
|
292
343
|
}), DialogClose = DialogCloseFrame.styleable(
|
|
@@ -294,23 +345,26 @@ const CLOSE_NAME = "DialogClose", DialogCloseFrame = styled(View, {
|
|
|
294
345
|
const { __scopeDialog, displayWhenAdapted, ...closeProps } = props, context = useDialogContext(CLOSE_NAME, __scopeDialog, {
|
|
295
346
|
warn: !1,
|
|
296
347
|
fallback: {}
|
|
297
|
-
}), isSheet = useShowDialogSheet(context), isInsideButton = React.useContext(ButtonNestingContext);
|
|
298
|
-
return isSheet && !displayWhenAdapted ? null :
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
(
|
|
306
|
-
|
|
307
|
-
|
|
348
|
+
}), isSheet = useShowDialogSheet(context), isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
|
|
349
|
+
return isSheet && !displayWhenAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
350
|
+
DialogCloseFrame,
|
|
351
|
+
{
|
|
352
|
+
accessibilityLabel: "Dialog Close",
|
|
353
|
+
tag: isInsideButton ? "span" : "button",
|
|
354
|
+
...closeProps,
|
|
355
|
+
ref: forwardedRef,
|
|
356
|
+
onPress: (0, import_helpers.composeEventHandlers)(
|
|
357
|
+
props.onPress,
|
|
358
|
+
() => context.onOpenChange(!1)
|
|
359
|
+
)
|
|
360
|
+
}
|
|
361
|
+
);
|
|
308
362
|
}
|
|
309
363
|
);
|
|
310
364
|
function getState(open) {
|
|
311
365
|
return open ? "open" : "closed";
|
|
312
366
|
}
|
|
313
|
-
const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
|
|
367
|
+
const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
|
|
314
368
|
contentName: CONTENT_NAME,
|
|
315
369
|
titleName: TITLE_NAME,
|
|
316
370
|
docsSlug: "dialog"
|
|
@@ -320,7 +374,7 @@ const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarn
|
|
|
320
374
|
|
|
321
375
|
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.`;
|
|
322
376
|
React.useEffect(() => {
|
|
323
|
-
isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
|
|
377
|
+
import_constants.isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
|
|
324
378
|
}, [MESSAGE, titleId]);
|
|
325
379
|
}
|
|
326
380
|
return null;
|
|
@@ -331,7 +385,7 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
331
385
|
if (process.env.NODE_ENV === "development") {
|
|
332
386
|
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${useWarningContext(DESCRIPTION_WARNING_NAME).contentName}}.`;
|
|
333
387
|
React.useEffect(() => {
|
|
334
|
-
if (!isWeb)
|
|
388
|
+
if (!import_constants.isWeb)
|
|
335
389
|
return;
|
|
336
390
|
const contentNode = contentRef.current;
|
|
337
391
|
if (!(contentNode instanceof HTMLElement))
|
|
@@ -341,7 +395,7 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
341
395
|
}, [MESSAGE, contentRef, descriptionId]);
|
|
342
396
|
}
|
|
343
397
|
return null;
|
|
344
|
-
}, Dialog = withStaticProperties(
|
|
398
|
+
}, Dialog = (0, import_helpers.withStaticProperties)(
|
|
345
399
|
React.forwardRef(function(props, ref) {
|
|
346
400
|
const {
|
|
347
401
|
__scopeDialog,
|
|
@@ -352,7 +406,7 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
352
406
|
modal = !0,
|
|
353
407
|
allowPinchZoom = !1,
|
|
354
408
|
disableRemoveScroll = !1
|
|
355
|
-
} = props, baseId = React.useId(), scopeId = `scope-${baseId}`, contentId = `content-${baseId}`, titleId = `title-${baseId}`, descriptionId = `description-${baseId}`, scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId, sheetContentsName = getSheetContentsName({ scopeKey, contentId }), triggerRef = React.useRef(null), contentRef = React.useRef(null), [open, setOpen] = useControllableState({
|
|
409
|
+
} = props, baseId = React.useId(), scopeId = `scope-${baseId}`, contentId = `content-${baseId}`, titleId = `title-${baseId}`, descriptionId = `description-${baseId}`, scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId, sheetContentsName = getSheetContentsName({ scopeKey, contentId }), triggerRef = React.useRef(null), contentRef = React.useRef(null), [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
356
410
|
prop: openProp,
|
|
357
411
|
defaultProp: defaultOpen,
|
|
358
412
|
onChange: onOpenChange
|
|
@@ -371,9 +425,9 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
371
425
|
onOpenToggle,
|
|
372
426
|
modal,
|
|
373
427
|
allowPinchZoom
|
|
374
|
-
}, { when, AdaptProvider } = useAdaptParent({
|
|
428
|
+
}, { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
|
|
375
429
|
Contents: React.useCallback(
|
|
376
|
-
(props2) =>
|
|
430
|
+
(props2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props2, name: sheetContentsName }),
|
|
377
431
|
[sheetContentsName]
|
|
378
432
|
)
|
|
379
433
|
});
|
|
@@ -383,11 +437,15 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
383
437
|
open: setOpen
|
|
384
438
|
}),
|
|
385
439
|
[setOpen]
|
|
386
|
-
),
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
440
|
+
), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
441
|
+
DialogProvider,
|
|
442
|
+
{
|
|
443
|
+
...context,
|
|
444
|
+
sheetBreakpoint: when,
|
|
445
|
+
disableRemoveScroll,
|
|
446
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children })
|
|
447
|
+
}
|
|
448
|
+
) });
|
|
391
449
|
}),
|
|
392
450
|
{
|
|
393
451
|
Trigger: DialogTrigger,
|
|
@@ -397,34 +455,39 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
397
455
|
Title: DialogTitle,
|
|
398
456
|
Description: DialogDescription,
|
|
399
457
|
Close: DialogClose,
|
|
400
|
-
Sheet: Sheet.Controlled,
|
|
401
|
-
Adapt
|
|
458
|
+
Sheet: import_sheet.Sheet.Controlled,
|
|
459
|
+
Adapt: import_adapt.Adapt
|
|
402
460
|
}
|
|
403
461
|
), SHEET_CONTENTS_NAME = "DialogSheetContents", DialogSheetContents = ({
|
|
404
462
|
name,
|
|
405
463
|
...props
|
|
406
|
-
}) =>
|
|
464
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props, name });
|
|
407
465
|
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
408
466
|
const getSheetContentsName = ({
|
|
409
467
|
scopeKey,
|
|
410
468
|
contentId
|
|
411
469
|
}) => `${scopeKey || contentId}SheetContents`, DialogSheetController = (props) => {
|
|
412
|
-
const context = useDialogContext("DialogSheetController", props.__scopeDialog), showSheet = useShowDialogSheet(context), breakpointActive = useSheetBreakpointActive(context), getShowSheet = useGet(showSheet);
|
|
413
|
-
return
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
470
|
+
const context = useDialogContext("DialogSheetController", props.__scopeDialog), showSheet = useShowDialogSheet(context), breakpointActive = useSheetBreakpointActive(context), getShowSheet = (0, import_core.useGet)(showSheet);
|
|
471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
472
|
+
import_sheet.SheetController,
|
|
473
|
+
{
|
|
474
|
+
onOpenChange: (val) => {
|
|
475
|
+
getShowSheet() && props.onOpenChange(val);
|
|
476
|
+
},
|
|
477
|
+
open: context.open,
|
|
478
|
+
hidden: breakpointActive === !1,
|
|
479
|
+
children: props.children
|
|
480
|
+
}
|
|
481
|
+
);
|
|
420
482
|
}, useSheetBreakpointActive = (context) => {
|
|
421
|
-
const media = useMedia();
|
|
483
|
+
const media = (0, import_core.useMedia)();
|
|
422
484
|
return context.sheetBreakpoint ? context.sheetBreakpoint === !0 ? !0 : media[context.sheetBreakpoint] : !1;
|
|
423
485
|
}, useShowDialogSheet = (context) => {
|
|
424
486
|
const breakpointActive = useSheetBreakpointActive(context);
|
|
425
487
|
return context.open === !1 ? !1 : breakpointActive;
|
|
426
488
|
};
|
|
427
|
-
export
|
|
489
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
490
|
+
0 && (module.exports = {
|
|
428
491
|
Dialog,
|
|
429
492
|
DialogClose,
|
|
430
493
|
DialogContent,
|
|
@@ -438,5 +501,5 @@ export {
|
|
|
438
501
|
DialogTrigger,
|
|
439
502
|
DialogWarningProvider,
|
|
440
503
|
createDialogScope
|
|
441
|
-
};
|
|
504
|
+
});
|
|
442
505
|
//# sourceMappingURL=Dialog.js.map
|