@tamagui/dialog 1.0.1-beta.100 → 1.0.1-beta.103

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.
@@ -31,6 +31,7 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
  import { AnimatePresence } from "@tamagui/animate-presence";
33
33
  import { useComposedRefs } from "@tamagui/compose-refs";
34
+ import { useGet } from "@tamagui/core";
34
35
  import {
35
36
  Slot,
36
37
  Theme,
@@ -38,13 +39,15 @@ import {
38
39
  isWeb,
39
40
  styled,
40
41
  useId,
42
+ useMedia,
41
43
  useThemeName,
42
44
  withStaticProperties
43
45
  } from "@tamagui/core";
44
46
  import { createContext, createContextScope } from "@tamagui/create-context";
45
47
  import { Dismissable } from "@tamagui/dismissable";
46
48
  import { FocusScope } from "@tamagui/focus-scope";
47
- import { Portal } from "@tamagui/portal";
49
+ import { PortalHost, PortalItem } from "@tamagui/portal";
50
+ import { Sheet, SheetController } from "@tamagui/sheet";
48
51
  import { ThemeableStack, YStack } from "@tamagui/stacks";
49
52
  import { H2, Paragraph } from "@tamagui/text";
50
53
  import { useControllableState } from "@tamagui/use-controllable-state";
@@ -78,32 +81,35 @@ const PORTAL_NAME = "DialogPortal";
78
81
  const [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
79
82
  forceMount: void 0
80
83
  });
81
- const DialogPortal = (props) => {
82
- const _a = props, { __scopeDialog, forceMount, children } = _a, rest = __objRest(_a, ["__scopeDialog", "forceMount", "children"]);
84
+ const DialogPortalFrame = styled(YStack, __spreadValues({
85
+ alignItems: "center",
86
+ justifyContent: "center",
87
+ fullscreen: true,
88
+ zIndex: 100
89
+ }, isWeb && {
90
+ maxHeight: "100vh"
91
+ }));
92
+ const DialogPortal = DialogPortalFrame.extractable((props) => {
93
+ const _a = props, { __scopeDialog, forceMount, children } = _a, frameProps = __objRest(_a, ["__scopeDialog", "forceMount", "children"]);
83
94
  const themeName = useThemeName();
84
95
  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
85
96
  const isShowing = forceMount || context.open;
86
97
  const contents = /* @__PURE__ */ React.createElement(AnimatePresence, null, isShowing ? children : null);
87
- if (!context.modal) {
98
+ const isSheet = useShowDialogSheet(context);
99
+ if (!context.modal || isSheet) {
88
100
  return contents;
89
101
  }
90
- if (!isWeb && !isShowing) {
91
- return contents;
92
- }
93
- return /* @__PURE__ */ React.createElement(PortalProvider, {
102
+ return /* @__PURE__ */ React.createElement(PortalItem, null, /* @__PURE__ */ React.createElement(DialogProvider, __spreadValues({
103
+ scope: __scopeDialog
104
+ }, context), /* @__PURE__ */ React.createElement(Theme, {
105
+ name: themeName
106
+ }, /* @__PURE__ */ React.createElement(PortalProvider, {
94
107
  scope: __scopeDialog,
95
108
  forceMount
96
- }, /* @__PURE__ */ React.createElement(Portal, __spreadValues(__spreadValues({
97
- alignItems: "center",
98
- justifyContent: "center",
99
- zIndex: 100,
109
+ }, /* @__PURE__ */ React.createElement(DialogPortalFrame, __spreadValues({
100
110
  pointerEvents: isShowing ? "auto" : "none"
101
- }, isWeb && {
102
- maxHeight: "100vh"
103
- }), rest), /* @__PURE__ */ React.createElement(Theme, {
104
- name: themeName
105
- }, contents)));
106
- };
111
+ }, frameProps), contents)))));
112
+ });
107
113
  DialogPortal.displayName = PORTAL_NAME;
108
114
  const OVERLAY_NAME = "DialogOverlay";
109
115
  const DialogOverlayFrame = styled(ThemeableStack, {
@@ -117,8 +123,11 @@ const DialogOverlay = React.forwardRef((_a, forwardedRef) => {
117
123
  const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
118
124
  const _a2 = props, { forceMount = portalContext.forceMount } = _a2, overlayProps = __objRest(_a2, ["forceMount"]);
119
125
  const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
120
- if (!context.modal) {
121
- return null;
126
+ const showSheet = useShowDialogSheet(context);
127
+ if (!forceMount) {
128
+ if (!context.modal || showSheet) {
129
+ return null;
130
+ }
122
131
  }
123
132
  return /* @__PURE__ */ React.createElement(DialogOverlayImpl, __spreadProps(__spreadValues({}, overlayProps), {
124
133
  ref: forwardedRef
@@ -164,7 +173,7 @@ const DialogContentFrame = styled(ThemeableStack, {
164
173
  size: "$4"
165
174
  }
166
175
  });
167
- const DialogContent = React.forwardRef((_c, forwardedRef) => {
176
+ const DialogContent = DialogContentFrame.extractable(React.forwardRef((_c, forwardedRef) => {
168
177
  var _d = _c, { __scopeDialog } = _d, props = __objRest(_d, ["__scopeDialog"]);
169
178
  const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
170
179
  const _a = props, { forceMount = portalContext.forceMount } = _a, contentProps = __objRest(_a, ["forceMount"]);
@@ -174,10 +183,10 @@ const DialogContent = React.forwardRef((_c, forwardedRef) => {
174
183
  })) : /* @__PURE__ */ React.createElement(DialogContentNonModal, __spreadProps(__spreadValues({}, contentProps), {
175
184
  ref: forwardedRef
176
185
  })));
177
- });
186
+ }));
178
187
  DialogContent.displayName = CONTENT_NAME;
179
188
  const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
180
- var _f = _e, { __scopeDialog } = _f, props = __objRest(_f, ["__scopeDialog"]);
189
+ var _f = _e, { __scopeDialog, children } = _f, props = __objRest(_f, ["__scopeDialog", "children"]);
181
190
  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
182
191
  const contentRef = React.useRef(null);
183
192
  const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
@@ -205,7 +214,7 @@ const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
205
214
  event.preventDefault();
206
215
  }),
207
216
  onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())
208
- }));
217
+ }), children);
209
218
  });
210
219
  const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
211
220
  const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
@@ -264,6 +273,21 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
264
273
  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
265
274
  const contentRef = React.useRef(null);
266
275
  const composedRefs = useComposedRefs(forwardedRef, contentRef);
276
+ const showSheet = useShowDialogSheet(context);
277
+ const contents = /* @__PURE__ */ React.createElement(DialogContentFrame, __spreadValues({
278
+ id: context.contentId,
279
+ "aria-describedby": context.descriptionId,
280
+ "aria-labelledby": context.titleId,
281
+ "data-state": getState(context.open)
282
+ }, contentProps));
283
+ if (showSheet) {
284
+ return /* @__PURE__ */ React.createElement(PortalItem, {
285
+ hostName: `${context.scopeKey}SheetContents`
286
+ }, contentProps.children);
287
+ }
288
+ if (!isWeb) {
289
+ return contents;
290
+ }
267
291
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FocusScope, {
268
292
  loop: true,
269
293
  trapped: trapFocus,
@@ -277,18 +301,21 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
277
301
  onInteractOutside,
278
302
  ref: composedRefs,
279
303
  onDismiss: () => context.onOpenChange(false)
280
- }, /* @__PURE__ */ React.createElement(DialogContentFrame, __spreadValues({
281
- id: context.contentId,
282
- "aria-describedby": context.descriptionId,
283
- "aria-labelledby": context.titleId,
284
- "data-state": getState(context.open)
285
- }, contentProps)))), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
304
+ }, contents)), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
286
305
  titleId: context.titleId
287
306
  }), /* @__PURE__ */ React.createElement(DescriptionWarning, {
288
307
  contentRef,
289
308
  descriptionId: context.descriptionId
290
309
  })));
291
310
  });
311
+ const SHEET_CONTENTS_NAME = "DialogSheetContents";
312
+ const DialogSheetContents = ({ __scopeDialog }) => {
313
+ const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
314
+ return /* @__PURE__ */ React.createElement(PortalHost, {
315
+ name: `${context.scopeKey}SheetContents`
316
+ });
317
+ };
318
+ DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
292
319
  const TITLE_NAME = "DialogTitle";
293
320
  const DialogTitleFrame = styled(H2, {
294
321
  name: TITLE_NAME
@@ -321,6 +348,10 @@ const CLOSE_NAME = "DialogClose";
321
348
  const DialogClose = React.forwardRef((props, forwardedRef) => {
322
349
  const _a = props, { __scopeDialog } = _a, closeProps = __objRest(_a, ["__scopeDialog"]);
323
350
  const context = useDialogContext(CLOSE_NAME, __scopeDialog);
351
+ const isSheet = useShowDialogSheet(context);
352
+ if (isSheet) {
353
+ return null;
354
+ }
324
355
  return /* @__PURE__ */ React.createElement(YStack, __spreadProps(__spreadValues({
325
356
  tag: "button"
326
357
  }, closeProps), {
@@ -384,7 +415,8 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
384
415
  defaultOpen = false,
385
416
  onOpenChange,
386
417
  modal = true,
387
- allowPinchZoom = false
418
+ allowPinchZoom = false,
419
+ sheetBreakpoint = false
388
420
  } = props;
389
421
  const triggerRef = React.useRef(null);
390
422
  const contentRef = React.useRef(null);
@@ -398,6 +430,7 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
398
430
  }), [setOpen]);
399
431
  return /* @__PURE__ */ React.createElement(DialogProvider, {
400
432
  scope: __scopeDialog,
433
+ scopeKey: __scopeDialog ? Object.keys(__scopeDialog)[0] : "",
401
434
  triggerRef,
402
435
  contentRef,
403
436
  contentId: useId() || "",
@@ -407,8 +440,12 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
407
440
  onOpenChange: setOpen,
408
441
  onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
409
442
  modal,
410
- allowPinchZoom
411
- }, children);
443
+ allowPinchZoom,
444
+ sheetBreakpoint
445
+ }, /* @__PURE__ */ React.createElement(DialogSheetController, {
446
+ onChangeOpen: setOpen,
447
+ __scopeDialog
448
+ }, children));
412
449
  });
413
450
  const Dialog2 = withStaticProperties(DialogInner, {
414
451
  Trigger: DialogTrigger,
@@ -417,8 +454,33 @@ const Dialog2 = withStaticProperties(DialogInner, {
417
454
  Content: DialogContent,
418
455
  Title: DialogTitle,
419
456
  Description: DialogDescription,
420
- Close: DialogClose
457
+ Close: DialogClose,
458
+ SheetContents: DialogSheetContents,
459
+ Sheet
421
460
  });
461
+ const DialogSheetController = (props) => {
462
+ const context = useDialogContext("DialogSheetController", props.__scopeDialog);
463
+ const showSheet = useShowDialogSheet(context);
464
+ const breakpointActive = useDialogBreakpointActive(context);
465
+ const getShowSheet = useGet(showSheet);
466
+ return /* @__PURE__ */ React.createElement(SheetController, {
467
+ onChangeOpen: (val) => {
468
+ if (getShowSheet()) {
469
+ props.onChangeOpen(val);
470
+ }
471
+ },
472
+ open: context.open,
473
+ hidden: breakpointActive === false
474
+ }, props.children);
475
+ };
476
+ const useDialogBreakpointActive = (context) => {
477
+ const media = useMedia();
478
+ return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
479
+ };
480
+ const useShowDialogSheet = (context) => {
481
+ const breakpointActive = useDialogBreakpointActive(context);
482
+ return context.open === false ? false : breakpointActive;
483
+ };
422
484
  export {
423
485
  Dialog2 as Dialog,
424
486
  DialogClose,
@@ -426,6 +488,8 @@ export {
426
488
  DialogDescription,
427
489
  DialogOverlay,
428
490
  DialogPortal,
491
+ DialogPortalFrame,
492
+ DialogSheetContents,
429
493
  DialogTitle,
430
494
  DialogTrigger,
431
495
  WarningProvider,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Dialog.tsx"],
4
- "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useId,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { Portal, PortalProps } from '@tamagui/portal'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { View } from 'react-native'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\ntype TamaguiElement = HTMLElement | View\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n modal: boolean\n allowPinchZoom: boolean\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ninterface DialogPortalProps extends Omit<PortalProps, 'asChild'> {\n children?: React.ReactNode\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogPortal: React.FC<DialogPortalProps> = (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...rest } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n if (!context.modal) {\n return contents\n }\n if (!isWeb && !isShowing) {\n return contents\n }\n return (\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <Portal\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={100}\n pointerEvents={isShowing ? 'auto' : 'none'}\n {...(isWeb && {\n maxHeight: '100vh',\n })}\n {...rest}\n >\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n </PortalProvider>\n )\n}\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n pointerEvents: 'auto',\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n\n if (!context.modal) {\n return null\n }\n\n // <AnimatePresence>\n return <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n // </AnimatePresence>\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame>\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const content = (\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents=\"auto\"\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n\n if (!isWeb) {\n return content\n }\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <RemoveScroll as={Slot} allowPinchZoom={context.allowPinchZoom} shards={[context.contentRef]}>\n {content}\n </RemoveScroll>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n pointerEvents: 'auto',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps extends DialogContentFrameProps, DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n return (\n <>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </>\n )\n }\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog)\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus()\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n ...contentProps\n } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={disableOutsidePointerEvents}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) throw new Error(MESSAGE)\n }\n }, [MESSAGE, titleId])\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) console.warn(MESSAGE)\n }\n }, [MESSAGE, contentRef, descriptionId])\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n >\n {children}\n </DialogProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n})\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n WarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { useGet } from '@tamagui/core'\nimport {\n GetProps,\n MediaPropKeys,\n Slot,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { Sheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { View } from 'react-native'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\ntype TamaguiElement = HTMLElement | View\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ninterface DialogProps {\n sheetBreakpoint?: MediaPropKeys | false\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: NonNull<DialogProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem>\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\n)\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n pointerEvents: 'auto',\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame>\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const content = (\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents=\"auto\"\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n\n if (!isWeb) {\n return content\n }\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <RemoveScroll as={Slot} allowPinchZoom={context.allowPinchZoom} shards={[context.contentRef]}>\n {content}\n </RemoveScroll>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n pointerEvents: 'auto',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps extends DialogContentFrameProps, DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n return (\n <>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ __scopeDialog, children, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog)\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus()\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n ...contentProps\n } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={disableOutsidePointerEvents}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({ __scopeDialog }: ScopedProps<{}>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) throw new Error(MESSAGE)\n }\n }, [MESSAGE, titleId])\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) console.warn(MESSAGE)\n }\n }, [MESSAGE, contentRef, descriptionId])\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n sheetBreakpoint = false,\n } = props\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={__scopeDialog ? Object.keys(__scopeDialog)[0] : ''}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onChangeOpen={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n SheetContents: DialogSheetContents,\n Sheet,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{}> & {\n children: React.ReactNode\n onChangeOpen: React.Dispatch<React.SetStateAction<boolean>>\n }\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useDialogBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onChangeOpen={(val) => {\n if (getShowSheet()) {\n props.onChangeOpen(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useDialogBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useDialogBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n WarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,6 @@
1
1
  import { AnimatePresence } from "@tamagui/animate-presence";
2
2
  import { useComposedRefs } from "@tamagui/compose-refs";
3
+ import { useGet } from "@tamagui/core";
3
4
  import {
4
5
  Slot,
5
6
  Theme,
@@ -7,13 +8,15 @@ import {
7
8
  isWeb,
8
9
  styled,
9
10
  useId,
11
+ useMedia,
10
12
  useThemeName,
11
13
  withStaticProperties
12
14
  } from "@tamagui/core";
13
15
  import { createContext, createContextScope } from "@tamagui/create-context";
14
16
  import { Dismissable } from "@tamagui/dismissable";
15
17
  import { FocusScope } from "@tamagui/focus-scope";
16
- import { Portal } from "@tamagui/portal";
18
+ import { PortalHost, PortalItem } from "@tamagui/portal";
19
+ import { Sheet, SheetController } from "@tamagui/sheet";
17
20
  import { ThemeableStack, YStack } from "@tamagui/stacks";
18
21
  import { H2, Paragraph } from "@tamagui/text";
19
22
  import { useControllableState } from "@tamagui/use-controllable-state";
@@ -38,22 +41,27 @@ const PORTAL_NAME = "DialogPortal";
38
41
  const [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
39
42
  forceMount: void 0
40
43
  });
41
- const DialogPortal = (props) => {
42
- const { __scopeDialog, forceMount, children, ...rest } = props;
44
+ const DialogPortalFrame = styled(YStack, {
45
+ alignItems: "center",
46
+ justifyContent: "center",
47
+ fullscreen: true,
48
+ zIndex: 100,
49
+ ...isWeb && {
50
+ maxHeight: "100vh"
51
+ }
52
+ });
53
+ const DialogPortal = DialogPortalFrame.extractable((props) => {
54
+ const { __scopeDialog, forceMount, children, ...frameProps } = props;
43
55
  const themeName = useThemeName();
44
56
  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
45
57
  const isShowing = forceMount || context.open;
46
58
  const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>;
47
- if (!context.modal) {
59
+ const isSheet = useShowDialogSheet(context);
60
+ if (!context.modal || isSheet) {
48
61
  return contents;
49
62
  }
50
- if (!isWeb && !isShowing) {
51
- return contents;
52
- }
53
- return <PortalProvider scope={__scopeDialog} forceMount={forceMount}><Portal alignItems="center" justifyContent="center" zIndex={100} pointerEvents={isShowing ? "auto" : "none"} {...isWeb && {
54
- maxHeight: "100vh"
55
- }} {...rest}><Theme name={themeName}>{contents}</Theme></Portal></PortalProvider>;
56
- };
63
+ return <PortalItem><DialogProvider scope={__scopeDialog} {...context}><Theme name={themeName}><PortalProvider scope={__scopeDialog} forceMount={forceMount}><DialogPortalFrame pointerEvents={isShowing ? "auto" : "none"} {...frameProps}>{contents}</DialogPortalFrame></PortalProvider></Theme></DialogProvider></PortalItem>;
64
+ });
57
65
  DialogPortal.displayName = PORTAL_NAME;
58
66
  const OVERLAY_NAME = "DialogOverlay";
59
67
  const DialogOverlayFrame = styled(ThemeableStack, {
@@ -66,8 +74,11 @@ const DialogOverlay = React.forwardRef(({ __scopeDialog, ...props }, forwardedRe
66
74
  const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
67
75
  const { forceMount = portalContext.forceMount, ...overlayProps } = props;
68
76
  const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
69
- if (!context.modal) {
70
- return null;
77
+ const showSheet = useShowDialogSheet(context);
78
+ if (!forceMount) {
79
+ if (!context.modal || showSheet) {
80
+ return null;
81
+ }
71
82
  }
72
83
  return <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />;
73
84
  });
@@ -102,14 +113,14 @@ const DialogContentFrame = styled(ThemeableStack, {
102
113
  size: "$4"
103
114
  }
104
115
  });
105
- const DialogContent = React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
116
+ const DialogContent = DialogContentFrame.extractable(React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
106
117
  const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
107
118
  const { forceMount = portalContext.forceMount, ...contentProps } = props;
108
119
  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
109
120
  return <>{context.modal ? <DialogContentModal {...contentProps} ref={forwardedRef} /> : <DialogContentNonModal {...contentProps} ref={forwardedRef} />}</>;
110
- });
121
+ }));
111
122
  DialogContent.displayName = CONTENT_NAME;
112
- const DialogContentModal = React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
123
+ const DialogContentModal = React.forwardRef(({ __scopeDialog, children, ...props }, forwardedRef) => {
113
124
  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
114
125
  const contentRef = React.useRef(null);
115
126
  const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
@@ -130,7 +141,7 @@ const DialogContentModal = React.forwardRef(({ __scopeDialog, ...props }, forwar
130
141
  const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
131
142
  if (isRightClick)
132
143
  event.preventDefault();
133
- })} onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())} />;
144
+ })} onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())}>{children}</DialogContentImpl>;
134
145
  });
135
146
  const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
136
147
  const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
@@ -174,14 +185,28 @@ const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
174
185
  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
175
186
  const contentRef = React.useRef(null);
176
187
  const composedRefs = useComposedRefs(forwardedRef, contentRef);
188
+ const showSheet = useShowDialogSheet(context);
189
+ const contents = <DialogContentFrame id={context.contentId} aria-describedby={context.descriptionId} aria-labelledby={context.titleId} data-state={getState(context.open)} {...contentProps} />;
190
+ if (showSheet) {
191
+ return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{contentProps.children}</PortalItem>;
192
+ }
193
+ if (!isWeb) {
194
+ return contents;
195
+ }
177
196
  return <>
178
- <FocusScope loop trapped={trapFocus} onMountAutoFocus={onOpenAutoFocus} onUnmountAutoFocus={onCloseAutoFocus}><Dismissable disableOutsidePointerEvents={disableOutsidePointerEvents} onEscapeKeyDown={onEscapeKeyDown} onPointerDownOutside={onPointerDownOutside} onFocusOutside={onFocusOutside} onInteractOutside={onInteractOutside} ref={composedRefs} onDismiss={() => context.onOpenChange(false)}><DialogContentFrame id={context.contentId} aria-describedby={context.descriptionId} aria-labelledby={context.titleId} data-state={getState(context.open)} {...contentProps} /></Dismissable></FocusScope>
197
+ <FocusScope loop trapped={trapFocus} onMountAutoFocus={onOpenAutoFocus} onUnmountAutoFocus={onCloseAutoFocus}><Dismissable disableOutsidePointerEvents={disableOutsidePointerEvents} onEscapeKeyDown={onEscapeKeyDown} onPointerDownOutside={onPointerDownOutside} onFocusOutside={onFocusOutside} onInteractOutside={onInteractOutside} ref={composedRefs} onDismiss={() => context.onOpenChange(false)}>{contents}</Dismissable></FocusScope>
179
198
  {process.env.NODE_ENV === "development" && <>
180
199
  <TitleWarning titleId={context.titleId} />
181
200
  <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />
182
201
  </>}
183
202
  </>;
184
203
  });
204
+ const SHEET_CONTENTS_NAME = "DialogSheetContents";
205
+ const DialogSheetContents = ({ __scopeDialog }) => {
206
+ const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
207
+ return <PortalHost name={`${context.scopeKey}SheetContents`} />;
208
+ };
209
+ DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
185
210
  const TITLE_NAME = "DialogTitle";
186
211
  const DialogTitleFrame = styled(H2, {
187
212
  name: TITLE_NAME
@@ -206,6 +231,10 @@ const CLOSE_NAME = "DialogClose";
206
231
  const DialogClose = React.forwardRef((props, forwardedRef) => {
207
232
  const { __scopeDialog, ...closeProps } = props;
208
233
  const context = useDialogContext(CLOSE_NAME, __scopeDialog);
234
+ const isSheet = useShowDialogSheet(context);
235
+ if (isSheet) {
236
+ return null;
237
+ }
209
238
  return <YStack tag="button" {...closeProps} ref={forwardedRef} onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))} />;
210
239
  });
211
240
  DialogClose.displayName = CLOSE_NAME;
@@ -264,7 +293,8 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
264
293
  defaultOpen = false,
265
294
  onOpenChange,
266
295
  modal = true,
267
- allowPinchZoom = false
296
+ allowPinchZoom = false,
297
+ sheetBreakpoint = false
268
298
  } = props;
269
299
  const triggerRef = React.useRef(null);
270
300
  const contentRef = React.useRef(null);
@@ -276,7 +306,7 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
276
306
  React.useImperativeHandle(ref, () => ({
277
307
  open: setOpen
278
308
  }), [setOpen]);
279
- return <DialogProvider scope={__scopeDialog} triggerRef={triggerRef} contentRef={contentRef} contentId={useId() || ""} titleId={useId() || ""} descriptionId={useId() || ""} open={open} onOpenChange={setOpen} onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])} modal={modal} allowPinchZoom={allowPinchZoom}>{children}</DialogProvider>;
309
+ return <DialogProvider scope={__scopeDialog} scopeKey={__scopeDialog ? Object.keys(__scopeDialog)[0] : ""} triggerRef={triggerRef} contentRef={contentRef} contentId={useId() || ""} titleId={useId() || ""} descriptionId={useId() || ""} open={open} onOpenChange={setOpen} onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])} modal={modal} allowPinchZoom={allowPinchZoom} sheetBreakpoint={sheetBreakpoint}><DialogSheetController onChangeOpen={setOpen} __scopeDialog={__scopeDialog}>{children}</DialogSheetController></DialogProvider>;
280
310
  });
281
311
  const Dialog2 = withStaticProperties(DialogInner, {
282
312
  Trigger: DialogTrigger,
@@ -285,8 +315,29 @@ const Dialog2 = withStaticProperties(DialogInner, {
285
315
  Content: DialogContent,
286
316
  Title: DialogTitle,
287
317
  Description: DialogDescription,
288
- Close: DialogClose
318
+ Close: DialogClose,
319
+ SheetContents: DialogSheetContents,
320
+ Sheet
289
321
  });
322
+ const DialogSheetController = (props) => {
323
+ const context = useDialogContext("DialogSheetController", props.__scopeDialog);
324
+ const showSheet = useShowDialogSheet(context);
325
+ const breakpointActive = useDialogBreakpointActive(context);
326
+ const getShowSheet = useGet(showSheet);
327
+ return <SheetController onChangeOpen={(val) => {
328
+ if (getShowSheet()) {
329
+ props.onChangeOpen(val);
330
+ }
331
+ }} open={context.open} hidden={breakpointActive === false}>{props.children}</SheetController>;
332
+ };
333
+ const useDialogBreakpointActive = (context) => {
334
+ const media = useMedia();
335
+ return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
336
+ };
337
+ const useShowDialogSheet = (context) => {
338
+ const breakpointActive = useDialogBreakpointActive(context);
339
+ return context.open === false ? false : breakpointActive;
340
+ };
290
341
  export {
291
342
  Dialog2 as Dialog,
292
343
  DialogClose,
@@ -294,6 +345,8 @@ export {
294
345
  DialogDescription,
295
346
  DialogOverlay,
296
347
  DialogPortal,
348
+ DialogPortalFrame,
349
+ DialogSheetContents,
297
350
  DialogTitle,
298
351
  DialogTrigger,
299
352
  WarningProvider,