@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.
@@ -1,47 +1,62 @@
1
- import { Adapt, useAdaptParent } from "@tamagui/adapt";
2
- import { AnimatePresence } from "@tamagui/animate-presence";
3
- import { hideOthers } from "@tamagui/aria-hidden";
4
- import { useComposedRefs } from "@tamagui/compose-refs";
5
- import { isWeb } from "@tamagui/constants";
6
- import {
7
- Theme,
8
- View,
9
- spacedChildren,
10
- styled,
11
- useGet,
12
- useMedia,
13
- useThemeName
14
- } from "@tamagui/core";
15
- import { createContext, createContextScope } from "@tamagui/create-context";
16
- import { Dismissable } from "@tamagui/dismissable";
17
- import { FocusScope } from "@tamagui/focus-scope";
18
- import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
19
- import { PortalHost, PortalItem } from "@tamagui/portal";
20
- import { RemoveScroll } from "@tamagui/remove-scroll";
21
- import { Overlay, Sheet, SheetController } from "@tamagui/sheet";
22
- import {
23
- ButtonNestingContext,
24
- ThemeableStack,
25
- YStack
26
- } from "@tamagui/stacks";
27
- import { H2, Paragraph } from "@tamagui/text";
28
- import { useControllableState } from "@tamagui/use-controllable-state";
29
- import * as React from "react";
30
- const DIALOG_NAME = "Dialog", [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME), [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME), TRIGGER_NAME = "DialogTrigger", DialogTriggerFrame = styled(View, {
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 <ButtonNestingContext.Provider value={!0}><DialogTriggerFrame
36
- tag={isInsideButton ? "span" : "button"}
37
- aria-haspopup="dialog"
38
- aria-expanded={context.open}
39
- aria-controls={context.contentId}
40
- data-state={getState(context.open)}
41
- {...triggerProps}
42
- ref={composedTriggerRef}
43
- onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
44
- /></ButtonNestingContext.Provider>;
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 <PortalItem hostName={props.hostName}><DialogPortalItemContent {...props} themeName={themeName} context={context} /></PortalItem>;
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
- })), <DialogProvider scope={__scopeDialog} {...context}><Theme name={themeName}>{childrenSpaced}</Theme></DialogProvider>;
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 = <AnimatePresence
97
- onExitComplete={() => {
98
- setIsFullyHidden(!0);
99
- }}
100
- >{isShowing ? children : null}</AnimatePresence>;
101
- return useShowDialogSheet(context) ? children : context.modal ? isFullyHidden ? null : <DialogPortalItem __scopeDialog={__scopeDialog}><PortalProvider scope={__scopeDialog} forceMount={forceMount}><DialogPortalFrame pointerEvents={isShowing ? "auto" : "none"} {...frameProps}>{contents}</DialogPortalFrame></PortalProvider></DialogPortalItem> : contents;
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 : <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />;
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
- <DialogOverlayFrame
122
- data-state={getState(context.open)}
123
- pointerEvents={context.open ? "auto" : "none"}
124
- {...overlayProps}
125
- ref={forwardedRef}
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 ? <DialogContentModal context={context} {...contentProps} ref={forwardedRef} /> : <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />;
155
- return !isWeb || context.disableRemoveScroll ? contents : <RemoveScroll
156
- forwardProps
157
- enabled={context.open}
158
- allowPinchZoom={context.allowPinchZoom}
159
- shards={[context.contentRef]}
160
- removeScrollBar={!1}
161
- ><div data-remove-scroll-container className="_dsp_contents">{contents}</div></RemoveScroll>;
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]), <DialogContentImpl
176
- {...props}
177
- context={context}
178
- ref={composedRefs}
179
- trapFocus={context.open}
180
- disableOutsidePointerEvents
181
- onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
182
- var _a;
183
- event.preventDefault(), (_a = context.triggerRef.current) == null || _a.focus();
184
- })}
185
- onPointerDownOutside={composeEventHandlers(
186
- props.onPointerDownOutside,
187
- (event) => {
188
- const originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0;
189
- (originalEvent.button === 2 || ctrlLeftClick) && event.preventDefault();
190
- }
191
- )}
192
- onFocusOutside={composeEventHandlers(
193
- props.onFocusOutside,
194
- (event) => event.preventDefault()
195
- )}
196
- >{children}</DialogContentImpl>;
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 <DialogContentImpl
202
- {...props}
203
- ref={forwardedRef}
204
- trapFocus={!1}
205
- disableOutsidePointerEvents={!1}
206
- onCloseAutoFocus={(event) => {
207
- var _a, _b;
208
- (_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;
209
- }}
210
- onInteractOutside={(event) => {
211
- var _a;
212
- (_a = props.onInteractOutside) == null || _a.call(props, event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
213
- const target = event.target, trigger = props.context.triggerRef.current;
214
- if (!(trigger instanceof HTMLElement))
215
- return;
216
- trigger.contains(target) && event.preventDefault();
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 = <DialogContentFrame
235
- id={context.contentId}
236
- aria-describedby={context.descriptionId}
237
- aria-labelledby={context.titleId}
238
- data-state={getState(context.open)}
239
- {...contentProps}
240
- />;
241
- return showSheet ? <DialogPortalItem hostName={getSheetContentsName(context)}>{contentProps.children}</DialogPortalItem> : isWeb ? <>
242
- <FocusScope
243
- loop
244
- enabled={context.open}
245
- trapped={trapFocus}
246
- onMountAutoFocus={onOpenAutoFocus}
247
- forceUnmount={!context.open}
248
- onUnmountAutoFocus={onCloseAutoFocus}
249
- ><Dismissable
250
- disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}
251
- forceUnmount={!context.open}
252
- onEscapeKeyDown={onEscapeKeyDown}
253
- onPointerDownOutside={onPointerDownOutside}
254
- onFocusOutside={onFocusOutside}
255
- onInteractOutside={onInteractOutside}
256
- ref={composedRefs}
257
- onDismiss={() => context.onOpenChange(!1)}
258
- >{contents}</Dismissable></FocusScope>
259
- {process.env.NODE_ENV === "development" && <>
260
- <TitleWarning titleId={context.titleId} />
261
- <DescriptionWarning
262
- contentRef={contentRef}
263
- descriptionId={context.descriptionId}
264
- />
265
- </>}
266
- </> : contents;
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 <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />;
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 <DialogDescriptionFrame
283
- id={context.descriptionId}
284
- {...descriptionProps}
285
- ref={forwardedRef}
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 : <DialogCloseFrame
300
- accessibilityLabel="Dialog Close"
301
- tag={isInsideButton ? "span" : "button"}
302
- {...closeProps}
303
- ref={forwardedRef}
304
- onPress={composeEventHandlers(
305
- props.onPress,
306
- () => context.onOpenChange(!1)
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) => <PortalHost forwardProps={props2} name={sheetContentsName} />,
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
- ), <AdaptProvider><DialogProvider
388
- {...context}
389
- sheetBreakpoint={when}
390
- disableRemoveScroll={disableRemoveScroll}
391
- ><DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>{children}</DialogSheetController></DialogProvider></AdaptProvider>;
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
- }) => <PortalHost forwardProps={props} name={name} />;
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 <SheetController
415
- onOpenChange={(val) => {
416
- getShowSheet() && props.onOpenChange(val);
417
- }}
418
- open={context.open}
419
- hidden={breakpointActive === !1}
420
- >{props.children}</SheetController>;
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