@tamagui/dialog 1.135.3 → 1.135.4-1761748186554

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