@tamagui/dialog 1.1.8 → 1.1.9

package/dist/cjs/Dialog.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -66,16 +70,19 @@ const DialogTrigger = React.forwardRef(
     const { __scopeDialog, ...triggerProps } = props;
     const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
     const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
-      tag: "button",
-      "aria-haspopup": "dialog",
-      "aria-expanded": context.open,
-      "aria-controls": context.contentId,
-      "data-state": getState(context.open),
-      ...triggerProps,
-      ref: composedTriggerRef,
-      onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DialogTriggerFrame,
+      {
+        tag: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": context.open,
+        "aria-controls": context.contentId,
+        "data-state": getState(context.open),
+        ...triggerProps,
+        ref: composedTriggerRef,
+        onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
+      }
+    );
   }
 );
 DialogTrigger.displayName = TRIGGER_NAME;
@@ -99,14 +106,7 @@ const DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
 const DialogPortalItem = (props) => {
   const themeName = (0, import_core.useThemeName)();
   const context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
-    hostName: props.hostName,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItemContent, {
-      ...props,
-      themeName,
-      context
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, { hostName: props.hostName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItemContent, { ...props, themeName, context }) });
 };
 function DialogPortalItemContent(props) {
   const {
@@ -127,14 +127,7 @@ function DialogPortalItemContent(props) {
       direction: spaceDirection
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
-    scope: __scopeDialog,
-    ...context,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
-      name: themeName,
-      children: childrenSpaced
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { scope: __scopeDialog, ...context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, { name: themeName, children: childrenSpaced }) });
 }
 const DialogPortal = (props) => {
   const { __scopeDialog, forceMount, children, ...frameProps } = props;
@@ -144,12 +137,15 @@ const DialogPortal = (props) => {
   if (isShowing && isFullyHidden) {
     setIsFullyHidden(false);
   }
-  const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
-    onExitComplete: () => {
-      setIsFullyHidden(true);
-    },
-    children: isShowing ? children : null
-  });
+  const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_animate_presence.AnimatePresence,
+    {
+      onExitComplete: () => {
+        setIsFullyHidden(true);
+      },
+      children: isShowing ? children : null
+    }
+  );
   const isSheet = useShowDialogSheet(context);
   if (isSheet) {
     return children;
@@ -158,18 +154,7 @@ const DialogPortal = (props) => {
     if (isFullyHidden) {
       return null;
     }
-    return /* @__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
-        })
-      })
-    });
+    return /* @__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 }) }) });
   }
   return contents;
 };
@@ -191,23 +176,26 @@ const DialogOverlay = React.forwardRef(
         return null;
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayImpl, {
-      context,
-      ...overlayProps,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayImpl, { context, ...overlayProps, ref: forwardedRef });
   }
 );
 DialogOverlay.displayName = OVERLAY_NAME;
 const DialogOverlayImpl = React.forwardRef(
   (props, forwardedRef) => {
     const { context, ...overlayProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
-      "data-state": getState(context.open),
-      pointerEvents: context.open ? "auto" : "none",
-      ...overlayProps,
-      ref: forwardedRef
-    });
+    return (
+      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
+      // ie. when `Overlay` and `Content` are siblings
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DialogOverlayFrame,
+        {
+          "data-state": getState(context.open),
+          pointerEvents: context.open ? "auto" : "none",
+          ...overlayProps,
+          ref: forwardedRef
+        }
+      )
+    );
   }
 );
 const CONTENT_NAME = "DialogContent";
@@ -236,29 +224,21 @@ const DialogContent = DialogContentFrame.extractable(
       const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
       const { forceMount = portalContext.forceMount, ...contentProps } = props;
       const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-      const 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
-      });
+      const 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 });
       if (!import_core.isWeb) {
         return contents;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
-        forwardProps: true,
-        enabled: context.open,
-        allowPinchZoom: context.allowPinchZoom,
-        shards: [context.contentRef],
-        removeScrollBar: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-          className: "_dsp_contents",
-          children: contents
-        })
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_remove_scroll.RemoveScroll,
+        {
+          forwardProps: true,
+          enabled: context.open,
+          allowPinchZoom: context.allowPinchZoom,
+          shards: [context.contentRef],
+          removeScrollBar: false,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "_dsp_contents", children: contents })
+        }
+      );
     }
   )
 );
@@ -276,67 +256,73 @@ const DialogContentModal = React.forwardRef(
           return (0, import_aria_hidden.hideOthers)(content);
       }, [context.open]);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentImpl, {
-      ...props,
-      context,
-      ref: composedRefs,
-      disableOutsidePointerEvents: true,
-      onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
-        var _a;
-        event.preventDefault();
-        (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
-      }),
-      onPointerDownOutside: (0, import_core.composeEventHandlers)(
-        props.onPointerDownOutside,
-        (event) => {
-          const originalEvent = event["detail"].originalEvent;
-          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-          if (isRightClick)
-            event.preventDefault();
-        }
-      ),
-      onFocusOutside: (0, import_core.composeEventHandlers)(
-        props.onFocusOutside,
-        (event) => event.preventDefault()
-      ),
-      children
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DialogContentImpl,
+      {
+        ...props,
+        context,
+        ref: composedRefs,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+          var _a;
+          event.preventDefault();
+          (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
+        }),
+        onPointerDownOutside: (0, import_core.composeEventHandlers)(
+          props.onPointerDownOutside,
+          (event) => {
+            const originalEvent = event["detail"].originalEvent;
+            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            if (isRightClick)
+              event.preventDefault();
+          }
+        ),
+        onFocusOutside: (0, import_core.composeEventHandlers)(
+          props.onFocusOutside,
+          (event) => event.preventDefault()
+        ),
+        children
+      }
+    );
   }
 );
 const DialogContentNonModal = React.forwardRef(
   (props, forwardedRef) => {
     const hasInteractedOutsideRef = React.useRef(false);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentImpl, {
-      ...props,
-      ref: forwardedRef,
-      trapFocus: false,
-      disableOutsidePointerEvents: false,
-      onCloseAutoFocus: (event) => {
-        var _a, _b;
-        (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
-        if (!event.defaultPrevented) {
-          if (!hasInteractedOutsideRef.current) {
-            (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DialogContentImpl,
+      {
+        ...props,
+        ref: forwardedRef,
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        onCloseAutoFocus: (event) => {
+          var _a, _b;
+          (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
+          if (!event.defaultPrevented) {
+            if (!hasInteractedOutsideRef.current) {
+              (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+            }
+            event.preventDefault();
           }
-          event.preventDefault();
+          hasInteractedOutsideRef.current = false;
+        },
+        onInteractOutside: (event) => {
+          var _a;
+          (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
+          if (!event.defaultPrevented)
+            hasInteractedOutsideRef.current = true;
+          const target = event.target;
+          const trigger = props.context.triggerRef.current;
+          if (!(trigger instanceof HTMLElement))
+            return;
+          const targetIsTrigger = trigger.contains(target);
+          if (targetIsTrigger)
+            event.preventDefault();
         }
-        hasInteractedOutsideRef.current = false;
-      },
-      onInteractOutside: (event) => {
-        var _a;
-        (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
-        if (!event.defaultPrevented)
-          hasInteractedOutsideRef.current = true;
-        const target = event.target;
-        const trigger = props.context.triggerRef.current;
-        if (!(trigger instanceof HTMLElement))
-          return;
-        const targetIsTrigger = trigger.contains(target);
-        if (targetIsTrigger)
-          event.preventDefault();
       }
-    });
+    );
   }
 );
 const DialogContentImpl = React.forwardRef(
@@ -357,55 +343,58 @@ const DialogContentImpl = React.forwardRef(
     const contentRef = React.useRef(null);
     const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
     const showSheet = useShowDialogSheet(context);
-    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentFrame, {
-      id: context.contentId,
-      "aria-describedby": context.descriptionId,
-      "aria-labelledby": context.titleId,
-      "data-state": getState(context.open),
-      ...contentProps
-    });
+    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DialogContentFrame,
+      {
+        id: context.contentId,
+        "aria-describedby": context.descriptionId,
+        "aria-labelledby": context.titleId,
+        "data-state": getState(context.open),
+        ...contentProps
+      }
+    );
     if (showSheet) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, {
-        hostName: getSheetContentsName(context),
-        children: contentProps.children
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalItem, { hostName: getSheetContentsName(context), children: contentProps.children });
     }
     if (!import_core.isWeb) {
       return contents;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_focus_scope.FocusScope,
+        {
           loop: true,
           trapped: trapFocus,
           onMountAutoFocus: onOpenAutoFocus,
           forceUnmount: !context.open,
           onUnmountAutoFocus: onCloseAutoFocus,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
-            disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
-            forceUnmount: !context.open,
-            onEscapeKeyDown,
-            onPointerDownOutside,
-            onFocusOutside,
-            onInteractOutside,
-            ref: composedRefs,
-            onDismiss: () => context.onOpenChange(false),
-            children: contents
-          })
-        }),
-        process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, {
-              titleId: context.titleId
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, {
-              contentRef,
-              descriptionId: context.descriptionId
-            })
-          ]
-        })
-      ]
-    });
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dismissable.Dismissable,
+            {
+              disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+              forceUnmount: !context.open,
+              onEscapeKeyDown,
+              onPointerDownOutside,
+              onFocusOutside,
+              onInteractOutside,
+              ref: composedRefs,
+              onDismiss: () => context.onOpenChange(false),
+              children: contents
+            }
+          )
+        }
+      ),
+      process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DescriptionWarning,
+          {
+            contentRef,
+            descriptionId: context.descriptionId
+          }
+        )
+      ] })
+    ] });
   }
 );
 const TITLE_NAME = "DialogTitle";
@@ -416,11 +405,7 @@ const DialogTitle = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...titleProps } = props;
     const context = useDialogContext(TITLE_NAME, __scopeDialog);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, {
-      id: context.titleId,
-      ...titleProps,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
   }
 );
 DialogTitle.displayName = TITLE_NAME;
@@ -432,11 +417,14 @@ const DialogDescription = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...descriptionProps } = props;
     const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
-      id: context.descriptionId,
-      ...descriptionProps,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DialogDescriptionFrame,
+      {
+        id: context.descriptionId,
+        ...descriptionProps,
+        ref: forwardedRef
+      }
+    );
   }
 );
 DialogDescription.displayName = DESCRIPTION_NAME;
@@ -449,15 +437,18 @@ const DialogClose = React.forwardRef(
     if (isSheet && !displayWhenAdapted) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
-      tag: "button",
-      ...closeProps,
-      ref: forwardedRef,
-      onPress: (0, import_core.composeEventHandlers)(
-        props.onPress,
-        () => context.onOpenChange(false)
-      )
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stacks.YStack,
+      {
+        tag: "button",
+        ...closeProps,
+        ref: forwardedRef,
+        onPress: (0, import_core.composeEventHandlers)(
+          props.onPress,
+          () => context.onOpenChange(false)
+        )
+      }
+    );
   }
 );
 DialogClose.displayName = CLOSE_NAME;
@@ -562,10 +553,7 @@ const Dialog = (0, import_core.withStaticProperties)(
     const { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
       Contents: React.useCallback(
         (props2) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
-            forwardProps: props2,
-            name: sheetContentsName
-          });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props2, name: sheetContentsName });
         },
         [sheetContentsName]
       )
@@ -577,17 +565,7 @@ const Dialog = (0, import_core.withStaticProperties)(
       }),
       [setOpen]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
-        ...context,
-        sheetBreakpoint: when,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, {
-          onOpenChange: setOpen,
-          __scopeDialog,
-          children
-        })
-      })
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { ...context, sheetBreakpoint: when, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children }) }) });
   }),
   {
     Trigger: DialogTrigger,
@@ -606,10 +584,7 @@ const DialogSheetContents = ({
   name,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
-    forwardProps: props,
-    name
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, { forwardProps: props, name });
 };
 DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
 const getSheetContentsName = ({
@@ -621,16 +596,19 @@ const DialogSheetController = (props) => {
   const showSheet = useShowDialogSheet(context);
   const breakpointActive = useSheetBreakpointActive(context);
   const getShowSheet = (0, import_core.useGet)(showSheet);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
-    onOpenChange: (val) => {
-      if (getShowSheet()) {
-        props.onOpenChange(val);
-      }
-    },
-    open: context.open,
-    hidden: breakpointActive === false,
-    children: props.children
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_sheet.SheetController,
+    {
+      onOpenChange: (val) => {
+        if (getShowSheet()) {
+          props.onOpenChange(val);
+        }
+      },
+      open: context.open,
+      hidden: breakpointActive === false,
+      children: props.children
+    }
+  );
 };
 const useSheetBreakpointActive = (context) => {
   const media = (0, import_core.useMedia)();