@tamagui/dialog 1.88.0 → 1.88.2

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