@tamagui/dialog 1.88.1 → 1.88.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 +20 -36
- package/dist/cjs/Dialog.js.map +1 -1
- package/dist/cjs/Dialog.native.js +17 -14
- package/dist/cjs/Dialog.native.js.map +1 -1
- package/dist/cjs/index.js +0 -4
- package/dist/esm/Dialog.js +17 -14
- package/dist/esm/Dialog.js.map +1 -1
- package/dist/esm/Dialog.native.js +127 -109
- 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 +186 -133
- package/dist/jsx/Dialog.js.map +1 -1
- package/dist/jsx/Dialog.native.js +257 -192
- 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 +20 -17
- 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,71 +173,85 @@ 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
|
-
|
|
196
|
-
|
|
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
|
+
...!props.unstyled && {
|
|
225
|
+
outlineStyle: "none"
|
|
226
|
+
},
|
|
227
|
+
children
|
|
228
|
+
}
|
|
229
|
+
);
|
|
197
230
|
}
|
|
198
231
|
), DialogContentNonModal = React.forwardRef(
|
|
199
232
|
(props, forwardedRef) => {
|
|
200
233
|
const hasInteractedOutsideRef = React.useRef(!1);
|
|
201
|
-
return
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
235
|
+
DialogContentImpl,
|
|
236
|
+
{
|
|
237
|
+
...props,
|
|
238
|
+
ref: forwardedRef,
|
|
239
|
+
trapFocus: !1,
|
|
240
|
+
disableOutsidePointerEvents: !1,
|
|
241
|
+
onCloseAutoFocus: (event) => {
|
|
242
|
+
var _a, _b;
|
|
243
|
+
(_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;
|
|
244
|
+
},
|
|
245
|
+
onInteractOutside: (event) => {
|
|
246
|
+
var _a;
|
|
247
|
+
(_a = props.onInteractOutside) == null || _a.call(props, event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
|
|
248
|
+
const target = event.target, trigger = props.context.triggerRef.current;
|
|
249
|
+
if (!(trigger instanceof HTMLElement))
|
|
250
|
+
return;
|
|
251
|
+
trigger.contains(target) && event.preventDefault();
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
);
|
|
219
255
|
}
|
|
220
256
|
), DialogContentImpl = React.forwardRef(
|
|
221
257
|
(props, forwardedRef) => {
|
|
@@ -231,63 +267,80 @@ const DialogContentModal = React.forwardRef(
|
|
|
231
267
|
onInteractOutside,
|
|
232
268
|
context,
|
|
233
269
|
...contentProps
|
|
234
|
-
} = props, contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, contentRef), showSheet = useShowDialogSheet(context), contents =
|
|
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
|
-
|
|
266
|
-
|
|
270
|
+
} = props, contentRef = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef), showSheet = useShowDialogSheet(context), contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
271
|
+
DialogContentFrame,
|
|
272
|
+
{
|
|
273
|
+
id: context.contentId,
|
|
274
|
+
"aria-describedby": context.descriptionId,
|
|
275
|
+
"aria-labelledby": context.titleId,
|
|
276
|
+
"data-state": getState(context.open),
|
|
277
|
+
...contentProps
|
|
278
|
+
}
|
|
279
|
+
);
|
|
280
|
+
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: [
|
|
281
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
282
|
+
import_dismissable.Dismissable,
|
|
283
|
+
{
|
|
284
|
+
disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
|
|
285
|
+
forceUnmount: !context.open,
|
|
286
|
+
onEscapeKeyDown,
|
|
287
|
+
onPointerDownOutside,
|
|
288
|
+
onFocusOutside,
|
|
289
|
+
onInteractOutside,
|
|
290
|
+
ref: composedRefs,
|
|
291
|
+
onDismiss: () => context.onOpenChange(!1),
|
|
292
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
293
|
+
import_focus_scope.FocusScope,
|
|
294
|
+
{
|
|
295
|
+
loop: !0,
|
|
296
|
+
enabled: context.open,
|
|
297
|
+
trapped: trapFocus,
|
|
298
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
299
|
+
forceUnmount: !context.open,
|
|
300
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
301
|
+
children: contents
|
|
302
|
+
}
|
|
303
|
+
)
|
|
304
|
+
}
|
|
305
|
+
),
|
|
306
|
+
process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
307
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }),
|
|
308
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
309
|
+
DescriptionWarning,
|
|
310
|
+
{
|
|
311
|
+
contentRef,
|
|
312
|
+
descriptionId: context.descriptionId
|
|
313
|
+
}
|
|
314
|
+
)
|
|
315
|
+
] })
|
|
316
|
+
] }) : contents;
|
|
267
317
|
}
|
|
268
|
-
), TITLE_NAME = "DialogTitle", DialogTitleFrame = styled(H2, {
|
|
318
|
+
), TITLE_NAME = "DialogTitle", DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
|
|
269
319
|
name: TITLE_NAME
|
|
270
320
|
}), DialogTitle = DialogTitleFrame.styleable(
|
|
271
321
|
(props, forwardedRef) => {
|
|
272
322
|
const { __scopeDialog, ...titleProps } = props, context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
273
|
-
return
|
|
323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
|
274
324
|
}
|
|
275
325
|
);
|
|
276
326
|
DialogTitle.displayName = TITLE_NAME;
|
|
277
|
-
const DialogDescriptionFrame = styled(Paragraph, {
|
|
327
|
+
const DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
|
|
278
328
|
name: "DialogDescription"
|
|
279
329
|
}), DESCRIPTION_NAME = "DialogDescription", DialogDescription = DialogDescriptionFrame.styleable(
|
|
280
330
|
(props, forwardedRef) => {
|
|
281
331
|
const { __scopeDialog, ...descriptionProps } = props, context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
282
|
-
return
|
|
283
|
-
|
|
284
|
-
{
|
|
285
|
-
|
|
286
|
-
|
|
332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
333
|
+
DialogDescriptionFrame,
|
|
334
|
+
{
|
|
335
|
+
id: context.descriptionId,
|
|
336
|
+
...descriptionProps,
|
|
337
|
+
ref: forwardedRef
|
|
338
|
+
}
|
|
339
|
+
);
|
|
287
340
|
}
|
|
288
341
|
);
|
|
289
342
|
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
290
|
-
const CLOSE_NAME = "DialogClose", DialogCloseFrame = styled(View, {
|
|
343
|
+
const CLOSE_NAME = "DialogClose", DialogCloseFrame = (0, import_core.styled)(import_core.View, {
|
|
291
344
|
name: CLOSE_NAME,
|
|
292
345
|
tag: "button"
|
|
293
346
|
}), DialogClose = DialogCloseFrame.styleable(
|
|
@@ -295,23 +348,26 @@ const CLOSE_NAME = "DialogClose", DialogCloseFrame = styled(View, {
|
|
|
295
348
|
const { __scopeDialog, displayWhenAdapted, ...closeProps } = props, context = useDialogContext(CLOSE_NAME, __scopeDialog, {
|
|
296
349
|
warn: !1,
|
|
297
350
|
fallback: {}
|
|
298
|
-
}), isSheet = useShowDialogSheet(context), isInsideButton = React.useContext(ButtonNestingContext);
|
|
299
|
-
return isSheet && !displayWhenAdapted ? null :
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
(
|
|
307
|
-
|
|
308
|
-
|
|
351
|
+
}), isSheet = useShowDialogSheet(context), isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
|
|
352
|
+
return isSheet && !displayWhenAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
353
|
+
DialogCloseFrame,
|
|
354
|
+
{
|
|
355
|
+
accessibilityLabel: "Dialog Close",
|
|
356
|
+
tag: isInsideButton ? "span" : "button",
|
|
357
|
+
...closeProps,
|
|
358
|
+
ref: forwardedRef,
|
|
359
|
+
onPress: (0, import_helpers.composeEventHandlers)(
|
|
360
|
+
props.onPress,
|
|
361
|
+
() => context.onOpenChange(!1)
|
|
362
|
+
)
|
|
363
|
+
}
|
|
364
|
+
);
|
|
309
365
|
}
|
|
310
366
|
);
|
|
311
367
|
function getState(open) {
|
|
312
368
|
return open ? "open" : "closed";
|
|
313
369
|
}
|
|
314
|
-
const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
|
|
370
|
+
const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
|
|
315
371
|
contentName: CONTENT_NAME,
|
|
316
372
|
titleName: TITLE_NAME,
|
|
317
373
|
docsSlug: "dialog"
|
|
@@ -321,7 +377,7 @@ const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarn
|
|
|
321
377
|
|
|
322
378
|
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.`;
|
|
323
379
|
React.useEffect(() => {
|
|
324
|
-
isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
|
|
380
|
+
import_constants.isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
|
|
325
381
|
}, [MESSAGE, titleId]);
|
|
326
382
|
}
|
|
327
383
|
return null;
|
|
@@ -332,7 +388,7 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
332
388
|
if (process.env.NODE_ENV === "development") {
|
|
333
389
|
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${useWarningContext(DESCRIPTION_WARNING_NAME).contentName}}.`;
|
|
334
390
|
React.useEffect(() => {
|
|
335
|
-
if (!isWeb)
|
|
391
|
+
if (!import_constants.isWeb)
|
|
336
392
|
return;
|
|
337
393
|
const contentNode = contentRef.current;
|
|
338
394
|
if (!(contentNode instanceof HTMLElement))
|
|
@@ -342,7 +398,7 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
342
398
|
}, [MESSAGE, contentRef, descriptionId]);
|
|
343
399
|
}
|
|
344
400
|
return null;
|
|
345
|
-
}, Dialog = withStaticProperties(
|
|
401
|
+
}, Dialog = (0, import_helpers.withStaticProperties)(
|
|
346
402
|
React.forwardRef(function(props, ref) {
|
|
347
403
|
const {
|
|
348
404
|
__scopeDialog,
|
|
@@ -353,7 +409,7 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
353
409
|
modal = !0,
|
|
354
410
|
allowPinchZoom = !1,
|
|
355
411
|
disableRemoveScroll = !1
|
|
356
|
-
} = 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({
|
|
412
|
+
} = 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)({
|
|
357
413
|
prop: openProp,
|
|
358
414
|
defaultProp: defaultOpen,
|
|
359
415
|
onChange: onOpenChange
|
|
@@ -372,9 +428,9 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
372
428
|
onOpenToggle,
|
|
373
429
|
modal,
|
|
374
430
|
allowPinchZoom
|
|
375
|
-
}, { when, AdaptProvider } = useAdaptParent({
|
|
431
|
+
}, { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
|
|
376
432
|
Contents: React.useCallback(
|
|
377
|
-
(props2) =>
|
|
433
|
+
(props2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props2, name: sheetContentsName }),
|
|
378
434
|
[sheetContentsName]
|
|
379
435
|
)
|
|
380
436
|
});
|
|
@@ -384,11 +440,15 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
384
440
|
open: setOpen
|
|
385
441
|
}),
|
|
386
442
|
[setOpen]
|
|
387
|
-
),
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
443
|
+
), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
444
|
+
DialogProvider,
|
|
445
|
+
{
|
|
446
|
+
...context,
|
|
447
|
+
sheetBreakpoint: when,
|
|
448
|
+
disableRemoveScroll,
|
|
449
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children })
|
|
450
|
+
}
|
|
451
|
+
) });
|
|
392
452
|
}),
|
|
393
453
|
{
|
|
394
454
|
Trigger: DialogTrigger,
|
|
@@ -398,34 +458,39 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
|
|
|
398
458
|
Title: DialogTitle,
|
|
399
459
|
Description: DialogDescription,
|
|
400
460
|
Close: DialogClose,
|
|
401
|
-
Sheet: Sheet.Controlled,
|
|
402
|
-
Adapt
|
|
461
|
+
Sheet: import_sheet.Sheet.Controlled,
|
|
462
|
+
Adapt: import_adapt.Adapt
|
|
403
463
|
}
|
|
404
464
|
), SHEET_CONTENTS_NAME = "DialogSheetContents", DialogSheetContents = ({
|
|
405
465
|
name,
|
|
406
466
|
...props
|
|
407
|
-
}) =>
|
|
467
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props, name });
|
|
408
468
|
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
409
469
|
const getSheetContentsName = ({
|
|
410
470
|
scopeKey,
|
|
411
471
|
contentId
|
|
412
472
|
}) => `${scopeKey || contentId}SheetContents`, DialogSheetController = (props) => {
|
|
413
|
-
const context = useDialogContext("DialogSheetController", props.__scopeDialog), showSheet = useShowDialogSheet(context), breakpointActive = useSheetBreakpointActive(context), getShowSheet = useGet(showSheet);
|
|
414
|
-
return
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
473
|
+
const context = useDialogContext("DialogSheetController", props.__scopeDialog), showSheet = useShowDialogSheet(context), breakpointActive = useSheetBreakpointActive(context), getShowSheet = (0, import_core.useGet)(showSheet);
|
|
474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
475
|
+
import_sheet.SheetController,
|
|
476
|
+
{
|
|
477
|
+
onOpenChange: (val) => {
|
|
478
|
+
getShowSheet() && props.onOpenChange(val);
|
|
479
|
+
},
|
|
480
|
+
open: context.open,
|
|
481
|
+
hidden: breakpointActive === !1,
|
|
482
|
+
children: props.children
|
|
483
|
+
}
|
|
484
|
+
);
|
|
421
485
|
}, useSheetBreakpointActive = (context) => {
|
|
422
|
-
const media = useMedia();
|
|
486
|
+
const media = (0, import_core.useMedia)();
|
|
423
487
|
return context.sheetBreakpoint ? context.sheetBreakpoint === !0 ? !0 : media[context.sheetBreakpoint] : !1;
|
|
424
488
|
}, useShowDialogSheet = (context) => {
|
|
425
489
|
const breakpointActive = useSheetBreakpointActive(context);
|
|
426
490
|
return context.open === !1 ? !1 : breakpointActive;
|
|
427
491
|
};
|
|
428
|
-
export
|
|
492
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
493
|
+
0 && (module.exports = {
|
|
429
494
|
Dialog,
|
|
430
495
|
DialogClose,
|
|
431
496
|
DialogContent,
|
|
@@ -439,5 +504,5 @@ export {
|
|
|
439
504
|
DialogTrigger,
|
|
440
505
|
DialogWarningProvider,
|
|
441
506
|
createDialogScope
|
|
442
|
-
};
|
|
507
|
+
});
|
|
443
508
|
//# sourceMappingURL=Dialog.js.map
|