@tamagui/dialog 1.89.26 → 1.89.27-1708113113238

package/dist/esm/Dialog.native.js

@@ -3,15 +3,7 @@ import { AnimatePresence } from "@tamagui/animate-presence";
 import { hideOthers } from "@tamagui/aria-hidden";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb } from "@tamagui/constants";
-import {
-  Theme,
-  View,
-  spacedChildren,
-  styled,
-  useGet,
-  useMedia,
-  useThemeName
-} from "@tamagui/core";
+import { Theme, View, spacedChildren, styled, useGet, useMedia, useThemeName } from "@tamagui/core";
 import { createContext, createContextScope } from "@tamagui/create-context";
 import { Dismissable } from "@tamagui/dismissable";
 import { FocusScope } from "@tamagui/focus-scope";
@@ -23,133 +15,250 @@ import { ButtonNestingContext, ThemeableStack, YStack } from "@tamagui/stacks";
 import { H2, Paragraph } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const DIALOG_NAME = "Dialog", [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME), [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME), TRIGGER_NAME = "DialogTrigger", DialogTriggerFrame = styled(View, {
-  name: TRIGGER_NAME
-}), DialogTrigger = DialogTriggerFrame.styleable(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...triggerProps } = props, isInsideButton = React.useContext(ButtonNestingContext), context = useDialogContext(TRIGGER_NAME, __scopeDialog), composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-    return /* @__PURE__ */ jsx(ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ jsx(
-      DialogTriggerFrame,
-      {
-        tag: isInsideButton ? "span" : "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": context.open,
-        "aria-controls": context.contentId,
-        "data-state": getState(context.open),
-        ...triggerProps,
-        ref: composedTriggerRef,
-        onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+function _array_like_to_array(arr, len) {
+  (len == null || len > arr.length) && (len = arr.length);
+  for (var i = 0, arr2 = new Array(len); i < len; i++)
+    arr2[i] = arr[i];
+  return arr2;
+}
+function _array_with_holes(arr) {
+  if (Array.isArray(arr))
+    return arr;
+}
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _instanceof(left, right) {
+  return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
+}
+function _iterable_to_array_limit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i != null) {
+    var _arr = [], _n = !0, _d = !1, _s, _e;
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
+        ;
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        !_n && _i.return != null && _i.return();
+      } finally {
+        if (_d)
+          throw _e;
       }
-    ) });
+    }
+    return _arr;
   }
-);
-DialogTrigger.displayName = TRIGGER_NAME;
-const PORTAL_NAME = "DialogPortal", [PortalProvider, usePortalContext] = createDialogContext(
-  PORTAL_NAME,
-  {
-    forceMount: void 0
+}
+function _non_iterable_rest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  }), target;
+}
+function _object_without_properties(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _object_without_properties_loose(source, excluded), key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++)
+      key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
+  }
+  return target;
+}
+function _object_without_properties_loose(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {}, sourceKeys = Object.keys(source), key, i;
+  for (i = 0; i < sourceKeys.length; i++)
+    key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
+  return target;
+}
+function _sliced_to_array(arr, i) {
+  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+  if (o) {
+    if (typeof o == "string")
+      return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set")
+      return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+      return _array_like_to_array(o, minLen);
   }
-), DialogPortalFrame = styled(YStack, {
+}
+var DIALOG_NAME = "Dialog", _createContextScope = _sliced_to_array(createContextScope(DIALOG_NAME), 2), createDialogContext = _createContextScope[0], createDialogScope = _createContextScope[1], _createDialogContext = _sliced_to_array(createDialogContext(DIALOG_NAME), 2), DialogProvider = _createDialogContext[0], useDialogContext = _createDialogContext[1], TRIGGER_NAME = "DialogTrigger", DialogTriggerFrame = styled(View, {
+  name: TRIGGER_NAME
+}), DialogTrigger = DialogTriggerFrame.styleable(function(props, forwardedRef) {
+  var __scopeDialog = props.__scopeDialog, triggerProps = _object_without_properties(props, [
+    "__scopeDialog"
+  ]), isInsideButton = React.useContext(ButtonNestingContext), context = useDialogContext(TRIGGER_NAME, __scopeDialog), composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+  return /* @__PURE__ */ React.createElement(ButtonNestingContext.Provider, {
+    value: !0
+  }, /* @__PURE__ */ React.createElement(DialogTriggerFrame, _object_spread_props(_object_spread({
+    tag: isInsideButton ? "span" : "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": context.open,
+    "aria-controls": context.contentId,
+    "data-state": getState(context.open)
+  }, triggerProps), {
+    ref: composedTriggerRef,
+    onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+  })));
+});
+DialogTrigger.displayName = TRIGGER_NAME;
+var PORTAL_NAME = "DialogPortal", _createDialogContext1 = _sliced_to_array(createDialogContext(PORTAL_NAME, {
+  forceMount: void 0
+}), 2), PortalProvider = _createDialogContext1[0], usePortalContext = _createDialogContext1[1], DialogPortalFrame = styled(YStack, {
   variants: {
     unstyled: {
-      false: {
+      false: _object_spread({
         alignItems: "center",
         justifyContent: "center",
         fullscreen: !0,
-        zIndex: 1e5,
-        ...isWeb && {
-          maxHeight: "100vh",
-          position: "fixed"
-        }
-      }
+        zIndex: 1e5
+      }, isWeb && {
+        maxHeight: "100vh",
+        position: "fixed"
+      })
     }
   },
   defaultVariants: {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
-}), DialogPortalItem = (props) => {
-  const themeName = useThemeName(), context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
-  return /* @__PURE__ */ jsx(PortalItem, { hostName: props.hostName, children: /* @__PURE__ */ jsx(DialogPortalItemContent, { ...props, themeName, context }) });
+}), DialogPortalItem = function(props) {
+  var themeName = useThemeName(), context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
+  return /* @__PURE__ */ React.createElement(PortalItem, {
+    hostName: props.hostName
+  }, /* @__PURE__ */ React.createElement(DialogPortalItemContent, _object_spread_props(_object_spread({}, props), {
+    themeName,
+    context
+  })));
 };
 function DialogPortalItemContent(props) {
-  const {
-    __scopeDialog,
-    children,
-    context,
-    themeName,
-    space,
-    spaceDirection,
-    separator
-  } = props;
-  let childrenSpaced = children;
+  var __scopeDialog = props.__scopeDialog, children = props.children, context = props.context, themeName = props.themeName, space = props.space, spaceDirection = props.spaceDirection, separator = props.separator, childrenSpaced = children;
   return (space || separator) && (childrenSpaced = spacedChildren({
     children,
     separator,
     space,
     direction: spaceDirection
-  })), /* @__PURE__ */ jsx(DialogProvider, { scope: __scopeDialog, ...context, children: /* @__PURE__ */ jsx(Theme, { name: themeName, children: childrenSpaced }) });
+  })), /* @__PURE__ */ React.createElement(DialogProvider, _object_spread({
+    scope: __scopeDialog
+  }, context), /* @__PURE__ */ React.createElement(Theme, {
+    name: themeName
+  }, childrenSpaced));
 }
-const DialogPortal = (props) => {
-  const { __scopeDialog, forceMount, children, ...frameProps } = props, context = useDialogContext(PORTAL_NAME, __scopeDialog), isShowing = forceMount || context.open, [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
+var DialogPortal = function(props) {
+  var __scopeDialog = props.__scopeDialog, forceMount = props.forceMount, children = props.children, frameProps = _object_without_properties(props, [
+    "__scopeDialog",
+    "forceMount",
+    "children"
+  ]), context = useDialogContext(PORTAL_NAME, __scopeDialog), isShowing = forceMount || context.open, _React_useState = _sliced_to_array(React.useState(!isShowing), 2), isFullyHidden = _React_useState[0], setIsFullyHidden = _React_useState[1];
   isShowing && isFullyHidden && setIsFullyHidden(!1);
-  const contents = /* @__PURE__ */ jsx(
-    AnimatePresence,
-    {
-      onExitComplete: () => {
-        setIsFullyHidden(!0);
-      },
-      children: isShowing ? children : null
+  var contents = /* @__PURE__ */ React.createElement(AnimatePresence, {
+    onExitComplete: function() {
+      setIsFullyHidden(!0);
     }
-  );
-  if (useShowDialogSheet(context))
+  }, isShowing ? children : null), isSheet = useShowDialogSheet(context);
+  if (isSheet)
     return children;
   if (context.modal) {
     if (isFullyHidden)
       return null;
-    const framedContents = /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: /* @__PURE__ */ jsx(DialogPortalFrame, { pointerEvents: isShowing ? "auto" : "none", ...frameProps, children: contents }) });
-    return isWeb ? /* @__PURE__ */ jsx(Portal, { zIndex: props.zIndex ?? 1e5, children: /* @__PURE__ */ jsx(PassthroughTheme, { children: framedContents }) }) : /* @__PURE__ */ jsx(DialogPortalItem, { __scopeDialog, children: framedContents });
+    var framedContents = /* @__PURE__ */ React.createElement(PortalProvider, {
+      scope: __scopeDialog,
+      forceMount
+    }, /* @__PURE__ */ React.createElement(DialogPortalFrame, _object_spread({
+      pointerEvents: isShowing ? "auto" : "none"
+    }, frameProps), contents));
+    if (isWeb) {
+      var _props_zIndex;
+      return /* @__PURE__ */ React.createElement(Portal, {
+        zIndex: (_props_zIndex = props.zIndex) !== null && _props_zIndex !== void 0 ? _props_zIndex : 1e5
+      }, /* @__PURE__ */ React.createElement(PassthroughTheme, null, framedContents));
+    }
+    return /* @__PURE__ */ React.createElement(DialogPortalItem, {
+      __scopeDialog
+    }, framedContents);
   }
   return contents;
 };
 DialogPortal.displayName = PORTAL_NAME;
-const PassthroughTheme = ({ children }) => {
-  const themeName = useThemeName();
-  return /* @__PURE__ */ jsx(Theme, { name: themeName, forceClassName: !0, children });
+var PassthroughTheme = function(param) {
+  var children = param.children, themeName = useThemeName();
+  return /* @__PURE__ */ React.createElement(Theme, {
+    name: themeName,
+    forceClassName: !0
+  }, children);
 }, OVERLAY_NAME = "DialogOverlay", DialogOverlayFrame = styled(Overlay, {
   name: OVERLAY_NAME
-}), DialogOverlay = DialogOverlayFrame.extractable(
-  React.forwardRef(
-    ({ __scopeDialog, ...props }, forwardedRef) => {
-      const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog), { forceMount = portalContext.forceMount, ...overlayProps } = props, context = useDialogContext(OVERLAY_NAME, __scopeDialog), showSheet = useShowDialogSheet(context);
-      return !forceMount && (!context.modal || showSheet) ? null : /* @__PURE__ */ jsx(DialogOverlayImpl, { context, ...overlayProps, ref: forwardedRef });
-    }
-  )
-);
+}), DialogOverlay = DialogOverlayFrame.extractable(/* @__PURE__ */ React.forwardRef(function(_param, forwardedRef) {
+  var __scopeDialog = _param.__scopeDialog, props = _object_without_properties(_param, [
+    "__scopeDialog"
+  ]), portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog), _props_forceMount = props.forceMount, forceMount = _props_forceMount === void 0 ? portalContext.forceMount : _props_forceMount, overlayProps = _object_without_properties(props, [
+    "forceMount"
+  ]), context = useDialogContext(OVERLAY_NAME, __scopeDialog), showSheet = useShowDialogSheet(context);
+  return !forceMount && (!context.modal || showSheet) ? null : /* @__PURE__ */ React.createElement(DialogOverlayImpl, _object_spread_props(_object_spread({
+    context
+  }, overlayProps), {
+    ref: forwardedRef
+  }));
+}));
 DialogOverlay.displayName = OVERLAY_NAME;
-const DialogOverlayImpl = React.forwardRef(
-  (props, forwardedRef) => {
-    const { context, ...overlayProps } = props;
-    return (
-      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
-      // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ jsx(
-        DialogOverlayFrame,
-        {
-          "data-state": getState(context.open),
-          pointerEvents: context.open ? "auto" : "none",
-          ...overlayProps,
-          ref: forwardedRef
-        }
-      )
-    );
-  }
-), CONTENT_NAME = "DialogContent", DialogContentFrame = styled(ThemeableStack, {
+var DialogOverlayImpl = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var context = props.context, overlayProps = _object_without_properties(props, [
+    "context"
+  ]);
+  return (
+    // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
+    // ie. when `Overlay` and `Content` are siblings
+    /* @__PURE__ */ React.createElement(DialogOverlayFrame, _object_spread_props(_object_spread({
+      "data-state": getState(context.open),
+      // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
+      pointerEvents: context.open ? "auto" : "none"
+    }, overlayProps), {
+      ref: forwardedRef
+    }))
+  );
+}), CONTENT_NAME = "DialogContent", DialogContentFrame = styled(ThemeableStack, {
   name: CONTENT_NAME,
   tag: "dialog",
   variants: {
     size: {
-      "...size": (val, extras) => ({})
+      "...size": function(val, extras) {
+        return {};
+      }
     },
     unstyled: {
       false: {
@@ -166,323 +275,321 @@ const DialogOverlayImpl = React.forwardRef(
     size: "$true",
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
-}), DialogContent = DialogContentFrame.extractable(
-  React.forwardRef(
-    ({ __scopeDialog, ...props }, forwardedRef) => {
-      const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog), { forceMount = portalContext.forceMount, ...contentProps } = props, context = useDialogContext(CONTENT_NAME, __scopeDialog), contents = context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { context, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { context, ...contentProps, ref: forwardedRef });
-      return !isWeb || context.disableRemoveScroll ? contents : /* @__PURE__ */ jsx(
-        RemoveScroll,
-        {
-          forwardProps: !0,
-          enabled: context.open,
-          allowPinchZoom: context.allowPinchZoom,
-          shards: [context.contentRef],
-          removeScrollBar: !1,
-          children: /* @__PURE__ */ jsx("div", { "data-remove-scroll-container": !0, className: "_dsp_contents", children: contents })
-        }
-      );
-    }
-  )
-);
+}), DialogContent = DialogContentFrame.extractable(/* @__PURE__ */ React.forwardRef(function(_param, forwardedRef) {
+  var __scopeDialog = _param.__scopeDialog, props = _object_without_properties(_param, [
+    "__scopeDialog"
+  ]), portalContext = usePortalContext(CONTENT_NAME, __scopeDialog), _props_forceMount = props.forceMount, forceMount = _props_forceMount === void 0 ? portalContext.forceMount : _props_forceMount, contentProps = _object_without_properties(props, [
+    "forceMount"
+  ]), context = useDialogContext(CONTENT_NAME, __scopeDialog), contents = context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, _object_spread_props(_object_spread({
+    context
+  }, contentProps), {
+    ref: forwardedRef
+  })) : /* @__PURE__ */ React.createElement(DialogContentNonModal, _object_spread_props(_object_spread({
+    context
+  }, contentProps), {
+    ref: forwardedRef
+  }));
+  return !isWeb || context.disableRemoveScroll ? contents : /* @__PURE__ */ React.createElement(RemoveScroll, {
+    forwardProps: !0,
+    enabled: context.open,
+    allowPinchZoom: context.allowPinchZoom,
+    shards: [
+      context.contentRef
+    ],
+    // causes lots of bugs on touch web on site
+    removeScrollBar: !1
+  }, /* @__PURE__ */ React.createElement("div", {
+    "data-remove-scroll-container": !0,
+    className: "_dsp_contents"
+  }, contents));
+}));
 DialogContent.displayName = CONTENT_NAME;
-const DialogContentModal = React.forwardRef(
-  ({ children, context, ...props }, forwardedRef) => {
-    const contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
-    return isWeb && React.useEffect(() => {
-      if (!context.open)
-        return;
-      const content = contentRef.current;
+var DialogContentModal = /* @__PURE__ */ React.forwardRef(function(_param, forwardedRef) {
+  var children = _param.children, context = _param.context, props = _object_without_properties(_param, [
+    "children",
+    "context"
+  ]), contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+  return isWeb && React.useEffect(function() {
+    if (context.open) {
+      var content = contentRef.current;
       if (content)
         return hideOthers(content);
-    }, [context.open]), /* @__PURE__ */ jsx(
-      DialogContentImpl,
-      {
-        ...props,
-        context,
-        ref: composedRefs,
-        trapFocus: context.open,
-        disableOutsidePointerEvents: !0,
-        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
-          var _a;
-          event.preventDefault(), (_a = context.triggerRef.current) == null || _a.focus();
-        }),
-        onPointerDownOutside: composeEventHandlers(
-          props.onPointerDownOutside,
-          (event) => {
-            const originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0;
-            (originalEvent.button === 2 || ctrlLeftClick) && event.preventDefault();
-          }
-        ),
-        onFocusOutside: composeEventHandlers(
-          props.onFocusOutside,
-          (event) => event.preventDefault()
-        ),
-        ...!props.unstyled && {
-          outlineStyle: "none"
-        },
-        children
-      }
-    );
-  }
-), DialogContentNonModal = React.forwardRef(
-  (props, forwardedRef) => {
-    const hasInteractedOutsideRef = React.useRef(!1);
-    return /* @__PURE__ */ jsx(
-      DialogContentImpl,
-      {
-        ...props,
-        ref: forwardedRef,
-        trapFocus: !1,
-        disableOutsidePointerEvents: !1,
-        onCloseAutoFocus: (event) => {
-          var _a, _b;
-          (_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;
-        },
-        onInteractOutside: (event) => {
-          var _a;
-          (_a = props.onInteractOutside) == null || _a.call(props, event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
-          const target = event.target, trigger = props.context.triggerRef.current;
-          if (!(trigger instanceof HTMLElement))
-            return;
-          trigger.contains(target) && event.preventDefault();
+    }
+  }, [
+    context.open
+  ]), /* @__PURE__ */ React.createElement(DialogContentImpl, _object_spread(_object_spread_props(_object_spread({}, props), {
+    context,
+    ref: composedRefs,
+    // we make sure focus isn't trapped once `DialogContent` has been closed
+    // (closed !== unmounted when animating out)
+    trapFocus: context.open,
+    disableOutsidePointerEvents: !0,
+    onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, function(event) {
+      var _context_triggerRef_current;
+      event.preventDefault(), (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus();
+    }),
+    onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, function(event) {
+      var originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0, isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+      isRightClick && event.preventDefault();
+    }),
+    // When focus is trapped, a `focusout` event may still happen.
+    // We make sure we don't trigger our `onDismiss` in such case.
+    onFocusOutside: composeEventHandlers(props.onFocusOutside, function(event) {
+      return event.preventDefault();
+    })
+  }), !props.unstyled && {
+    outlineStyle: "none"
+  }), children);
+}), DialogContentNonModal = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var hasInteractedOutsideRef = React.useRef(!1);
+  return /* @__PURE__ */ React.createElement(DialogContentImpl, _object_spread_props(_object_spread({}, props), {
+    ref: forwardedRef,
+    trapFocus: !1,
+    disableOutsidePointerEvents: !1,
+    onCloseAutoFocus: function(event) {
+      var _props_onCloseAutoFocus;
+      if ((_props_onCloseAutoFocus = props.onCloseAutoFocus) === null || _props_onCloseAutoFocus === void 0 || _props_onCloseAutoFocus.call(props, event), !event.defaultPrevented) {
+        if (!hasInteractedOutsideRef.current) {
+          var _props_context_triggerRef_current;
+          (_props_context_triggerRef_current = props.context.triggerRef.current) === null || _props_context_triggerRef_current === void 0 || _props_context_triggerRef_current.focus();
         }
+        event.preventDefault();
       }
-    );
-  }
-), DialogContentImpl = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeDialog,
-      trapFocus,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      disableOutsidePointerEvents,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      context,
-      ...contentProps
-    } = props, contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, contentRef), showSheet = useShowDialogSheet(context), contents = /* @__PURE__ */ jsx(
-      DialogContentFrame,
-      {
-        id: context.contentId,
-        "aria-describedby": context.descriptionId,
-        "aria-labelledby": context.titleId,
-        "data-state": getState(context.open),
-        ...contentProps
+      hasInteractedOutsideRef.current = !1;
+    },
+    onInteractOutside: function(event) {
+      var _props_onInteractOutside;
+      (_props_onInteractOutside = props.onInteractOutside) === null || _props_onInteractOutside === void 0 || _props_onInteractOutside.call(props, event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
+      var target = event.target, trigger = props.context.triggerRef.current;
+      if (_instanceof(trigger, HTMLElement)) {
+        var targetIsTrigger = trigger.contains(target);
+        targetIsTrigger && event.preventDefault();
       }
-    );
-    return showSheet ? /* @__PURE__ */ jsx(DialogPortalItem, { hostName: getSheetContentsName(context), children: contentProps.children }) : isWeb ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Dismissable,
-        {
-          disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
-          forceUnmount: !context.open,
-          onEscapeKeyDown,
-          onPointerDownOutside,
-          onFocusOutside,
-          onInteractOutside,
-          ref: composedRefs,
-          onDismiss: () => context.onOpenChange(!1),
-          children: /* @__PURE__ */ jsx(
-            FocusScope,
-            {
-              loop: !0,
-              enabled: context.open,
-              trapped: trapFocus,
-              onMountAutoFocus: onOpenAutoFocus,
-              forceUnmount: !context.open,
-              onUnmountAutoFocus: onCloseAutoFocus,
-              children: contents
-            }
-          )
-        }
-      ),
-      process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TitleWarning, { titleId: context.titleId }),
-        /* @__PURE__ */ jsx(
-          DescriptionWarning,
-          {
-            contentRef,
-            descriptionId: context.descriptionId
-          }
-        )
-      ] })
-    ] }) : contents;
-  }
-), TITLE_NAME = "DialogTitle", DialogTitleFrame = styled(H2, {
+    }
+  }));
+}), DialogContentImpl = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var __scopeDialog = props.__scopeDialog, trapFocus = props.trapFocus, onOpenAutoFocus = props.onOpenAutoFocus, onCloseAutoFocus = props.onCloseAutoFocus, disableOutsidePointerEvents = props.disableOutsidePointerEvents, onEscapeKeyDown = props.onEscapeKeyDown, onPointerDownOutside = props.onPointerDownOutside, onFocusOutside = props.onFocusOutside, onInteractOutside = props.onInteractOutside, context = props.context, contentProps = _object_without_properties(props, [
+    "__scopeDialog",
+    "trapFocus",
+    "onOpenAutoFocus",
+    "onCloseAutoFocus",
+    "disableOutsidePointerEvents",
+    "onEscapeKeyDown",
+    "onPointerDownOutside",
+    "onFocusOutside",
+    "onInteractOutside",
+    "context"
+  ]), contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, contentRef), showSheet = useShowDialogSheet(context), contents = /* @__PURE__ */ React.createElement(DialogContentFrame, _object_spread({
+    id: context.contentId,
+    "aria-describedby": context.descriptionId,
+    "aria-labelledby": context.titleId,
+    "data-state": getState(context.open)
+  }, contentProps));
+  return showSheet ? /* @__PURE__ */ React.createElement(DialogPortalItem, {
+    hostName: getSheetContentsName(context)
+  }, contentProps.children) : isWeb ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Dismissable, {
+    disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+    forceUnmount: !context.open,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    // @ts-ignore
+    ref: composedRefs,
+    onDismiss: function() {
+      return context.onOpenChange(!1);
+    }
+  }, /* @__PURE__ */ React.createElement(FocusScope, {
+    loop: !0,
+    enabled: context.open,
+    trapped: trapFocus,
+    onMountAutoFocus: onOpenAutoFocus,
+    forceUnmount: !context.open,
+    onUnmountAutoFocus: onCloseAutoFocus
+  }, contents)), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
+    titleId: context.titleId
+  }), /* @__PURE__ */ React.createElement(DescriptionWarning, {
+    contentRef,
+    descriptionId: context.descriptionId
+  }))) : contents;
+}), TITLE_NAME = "DialogTitle", DialogTitleFrame = styled(H2, {
   name: TITLE_NAME
-}), DialogTitle = DialogTitleFrame.styleable(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...titleProps } = props, context = useDialogContext(TITLE_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
-  }
-);
+}), DialogTitle = DialogTitleFrame.styleable(function(props, forwardedRef) {
+  var __scopeDialog = props.__scopeDialog, titleProps = _object_without_properties(props, [
+    "__scopeDialog"
+  ]), context = useDialogContext(TITLE_NAME, __scopeDialog);
+  return /* @__PURE__ */ React.createElement(DialogTitleFrame, _object_spread_props(_object_spread({
+    id: context.titleId
+  }, titleProps), {
+    ref: forwardedRef
+  }));
+});
 DialogTitle.displayName = TITLE_NAME;
-const DialogDescriptionFrame = styled(Paragraph, {
+var DialogDescriptionFrame = styled(Paragraph, {
   name: "DialogDescription"
-}), DESCRIPTION_NAME = "DialogDescription", DialogDescription = DialogDescriptionFrame.styleable(
-  (props, forwardedRef) => {
-    const { __scopeDialog, ...descriptionProps } = props, context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(
-      DialogDescriptionFrame,
-      {
-        id: context.descriptionId,
-        ...descriptionProps,
-        ref: forwardedRef
-      }
-    );
-  }
-);
+}), DESCRIPTION_NAME = "DialogDescription", DialogDescription = DialogDescriptionFrame.styleable(function(props, forwardedRef) {
+  var __scopeDialog = props.__scopeDialog, descriptionProps = _object_without_properties(props, [
+    "__scopeDialog"
+  ]), context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+  return /* @__PURE__ */ React.createElement(DialogDescriptionFrame, _object_spread_props(_object_spread({
+    id: context.descriptionId
+  }, descriptionProps), {
+    ref: forwardedRef
+  }));
+});
 DialogDescription.displayName = DESCRIPTION_NAME;
-const CLOSE_NAME = "DialogClose", DialogCloseFrame = styled(View, {
+var CLOSE_NAME = "DialogClose", DialogCloseFrame = styled(View, {
   name: CLOSE_NAME,
   tag: "button"
-}), DialogClose = DialogCloseFrame.styleable(
-  (props, forwardedRef) => {
-    const { __scopeDialog, displayWhenAdapted, ...closeProps } = props, context = useDialogContext(CLOSE_NAME, __scopeDialog, {
-      warn: !1,
-      fallback: {}
-    }), isSheet = useShowDialogSheet(context), isInsideButton = React.useContext(ButtonNestingContext);
-    return isSheet && !displayWhenAdapted ? null : /* @__PURE__ */ jsx(
-      DialogCloseFrame,
-      {
-        accessibilityLabel: "Dialog Close",
-        tag: isInsideButton ? "span" : "button",
-        ...closeProps,
-        ref: forwardedRef,
-        onPress: composeEventHandlers(
-          props.onPress,
-          () => context.onOpenChange(!1)
-        )
-      }
-    );
-  }
-);
+}), DialogClose = DialogCloseFrame.styleable(function(props, forwardedRef) {
+  var __scopeDialog = props.__scopeDialog, displayWhenAdapted = props.displayWhenAdapted, closeProps = _object_without_properties(props, [
+    "__scopeDialog",
+    "displayWhenAdapted"
+  ]), context = useDialogContext(CLOSE_NAME, __scopeDialog, {
+    warn: !1,
+    fallback: {}
+  }), isSheet = useShowDialogSheet(context), isInsideButton = React.useContext(ButtonNestingContext);
+  return isSheet && !displayWhenAdapted ? null : /* @__PURE__ */ React.createElement(DialogCloseFrame, _object_spread_props(_object_spread({
+    accessibilityLabel: "Dialog Close",
+    tag: isInsideButton ? "span" : "button"
+  }, closeProps), {
+    ref: forwardedRef,
+    onPress: composeEventHandlers(props.onPress, function() {
+      return context.onOpenChange(!1);
+    })
+  }));
+});
 function getState(open) {
   return open ? "open" : "closed";
 }
-const TITLE_WARNING_NAME = "DialogTitleWarning", [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
+var TITLE_WARNING_NAME = "DialogTitleWarning", _createContext = _sliced_to_array(createContext(TITLE_WARNING_NAME, {
   contentName: CONTENT_NAME,
   titleName: TITLE_NAME,
   docsSlug: "dialog"
-}), TitleWarning = ({ titleId }) => {
+}), 2), DialogWarningProvider = _createContext[0], useWarningContext = _createContext[1], TitleWarning = function(param) {
+  var titleId = param.titleId;
   if (process.env.NODE_ENV === "development") {
-    const titleWarningContext = useWarningContext(TITLE_WARNING_NAME), MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
-
-If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.`;
-    React.useEffect(() => {
-      isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
-    }, [MESSAGE, titleId]);
+    var titleWarningContext = useWarningContext(TITLE_WARNING_NAME), MESSAGE = "`".concat(titleWarningContext.contentName, "` requires a `").concat(titleWarningContext.titleName, "` for the component to be accessible for screen reader users.\n\nIf you want to hide the `").concat(titleWarningContext.titleName, "`, you can wrap it with our VisuallyHidden component.");
+    React.useEffect(function() {
+      if (isWeb && titleId) {
+        var hasTitle = document.getElementById(titleId);
+        hasTitle || console.warn(MESSAGE);
+      }
+    }, [
+      MESSAGE,
+      titleId
+    ]);
   }
   return null;
-}, DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning", DescriptionWarning = ({
-  contentRef,
-  descriptionId
-}) => {
+}, DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning", DescriptionWarning = function(param) {
+  var contentRef = param.contentRef, descriptionId = param.descriptionId;
   if (process.env.NODE_ENV === "development") {
-    const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${useWarningContext(DESCRIPTION_WARNING_NAME).contentName}}.`;
-    React.useEffect(() => {
-      if (!isWeb)
-        return;
-      const contentNode = contentRef.current;
-      if (!(contentNode instanceof HTMLElement))
-        return;
-      const describedById = contentNode.getAttribute("aria-describedby");
-      descriptionId && describedById && (document.getElementById(descriptionId) || console.warn(MESSAGE));
-    }, [MESSAGE, contentRef, descriptionId]);
+    var descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME), MESSAGE = "Warning: Missing `Description` or `aria-describedby={undefined}` for {".concat(descriptionWarningContext.contentName, "}.");
+    React.useEffect(function() {
+      if (isWeb) {
+        var contentNode = contentRef.current;
+        if (_instanceof(contentNode, HTMLElement)) {
+          var describedById = contentNode.getAttribute("aria-describedby");
+          if (descriptionId && describedById) {
+            var hasDescription = document.getElementById(descriptionId);
+            hasDescription || console.warn(MESSAGE);
+          }
+        }
+      }
+    }, [
+      MESSAGE,
+      contentRef,
+      descriptionId
+    ]);
   }
   return null;
-}, Dialog = withStaticProperties(
-  React.forwardRef(function(props, ref) {
-    const {
-      __scopeDialog,
-      children,
-      open: openProp,
-      defaultOpen = !1,
-      onOpenChange,
-      modal = !0,
-      allowPinchZoom = !1,
-      disableRemoveScroll = !1
-    } = 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({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChange
-    }), onOpenToggle = React.useCallback(() => {
-      setOpen((prevOpen) => !prevOpen);
-    }, [setOpen]), context = {
-      scope: __scopeDialog,
-      scopeKey,
-      triggerRef,
-      contentRef,
-      contentId,
-      titleId,
-      descriptionId,
-      open,
-      onOpenChange: setOpen,
-      onOpenToggle,
-      modal,
-      allowPinchZoom
-    }, { when, AdaptProvider } = useAdaptParent({
-      Contents: React.useCallback(
-        (props2) => /* @__PURE__ */ jsx(PortalHost, { forwardProps: props2, name: sheetContentsName }),
-        [sheetContentsName]
-      )
+}, Dialog = withStaticProperties(/* @__PURE__ */ React.forwardRef(function(props, ref) {
+  var __scopeDialog = props.__scopeDialog, children = props.children, openProp = props.open, _props_defaultOpen = props.defaultOpen, defaultOpen = _props_defaultOpen === void 0 ? !1 : _props_defaultOpen, onOpenChange = props.onOpenChange, _props_modal = props.modal, modal = _props_modal === void 0 ? !0 : _props_modal, _props_allowPinchZoom = props.allowPinchZoom, allowPinchZoom = _props_allowPinchZoom === void 0 ? !1 : _props_allowPinchZoom, _props_disableRemoveScroll = props.disableRemoveScroll, disableRemoveScroll = _props_disableRemoveScroll === void 0 ? !1 : _props_disableRemoveScroll, baseId = React.useId(), scopeId = "scope-".concat(baseId), contentId = "content-".concat(baseId), titleId = "title-".concat(baseId), descriptionId = "description-".concat(baseId), scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId, sheetContentsName = getSheetContentsName({
+    scopeKey,
+    contentId
+  }), triggerRef = React.useRef(null), contentRef = React.useRef(null), _useControllableState = _sliced_to_array(useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  }), 2), open = _useControllableState[0], setOpen = _useControllableState[1], onOpenToggle = React.useCallback(function() {
+    setOpen(function(prevOpen) {
+      return !prevOpen;
     });
-    return React.useImperativeHandle(
-      ref,
-      () => ({
-        open: setOpen
-      }),
-      [setOpen]
-    ), /* @__PURE__ */ jsx(AdaptProvider, { children: /* @__PURE__ */ jsx(
-      DialogProvider,
-      {
-        ...context,
-        sheetBreakpoint: when,
-        disableRemoveScroll,
-        children: /* @__PURE__ */ jsx(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children })
-      }
-    ) });
-  }),
-  {
-    Trigger: DialogTrigger,
-    Portal: DialogPortal,
-    Overlay: DialogOverlay,
-    Content: DialogContent,
-    Title: DialogTitle,
-    Description: DialogDescription,
-    Close: DialogClose,
-    Sheet: Sheet.Controlled,
-    Adapt
-  }
-), SHEET_CONTENTS_NAME = "DialogSheetContents", DialogSheetContents = ({
-  name,
-  ...props
-}) => /* @__PURE__ */ jsx(PortalHost, { forwardProps: props, name });
+  }, [
+    setOpen
+  ]), context = {
+    scope: __scopeDialog,
+    scopeKey,
+    triggerRef,
+    contentRef,
+    contentId,
+    titleId,
+    descriptionId,
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle,
+    modal,
+    allowPinchZoom
+  }, _useAdaptParent = useAdaptParent({
+    Contents: React.useCallback(function(props2) {
+      return /* @__PURE__ */ React.createElement(PortalHost, {
+        forwardProps: props2,
+        name: sheetContentsName
+      });
+    }, [
+      sheetContentsName
+    ])
+  }), when = _useAdaptParent.when, AdaptProvider = _useAdaptParent.AdaptProvider;
+  return React.useImperativeHandle(ref, function() {
+    return {
+      open: setOpen
+    };
+  }, [
+    setOpen
+  ]), /* @__PURE__ */ React.createElement(AdaptProvider, null, /* @__PURE__ */ React.createElement(DialogProvider, _object_spread_props(_object_spread({}, context), {
+    sheetBreakpoint: when,
+    disableRemoveScroll
+  }), /* @__PURE__ */ React.createElement(DialogSheetController, {
+    onOpenChange: setOpen,
+    __scopeDialog
+  }, children)));
+}), {
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  Sheet: Sheet.Controlled,
+  Adapt
+}), SHEET_CONTENTS_NAME = "DialogSheetContents", DialogSheetContents = function(_param) {
+  var name = _param.name, props = _object_without_properties(_param, [
+    "name"
+  ]);
+  return /* @__PURE__ */ React.createElement(PortalHost, {
+    forwardProps: props,
+    name
+  });
+};
 DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
-const getSheetContentsName = ({
-  scopeKey,
-  contentId
-}) => `${scopeKey || contentId}SheetContents`, DialogSheetController = (props) => {
-  const context = useDialogContext("DialogSheetController", props.__scopeDialog), showSheet = useShowDialogSheet(context), breakpointActive = useSheetBreakpointActive(context), getShowSheet = useGet(showSheet);
-  return /* @__PURE__ */ jsx(
-    SheetController,
-    {
-      onOpenChange: (val) => {
-        getShowSheet() && props.onOpenChange(val);
-      },
-      open: context.open,
-      hidden: breakpointActive === !1,
-      children: props.children
-    }
-  );
-}, useSheetBreakpointActive = (context) => {
-  const media = useMedia();
+var getSheetContentsName = function(param) {
+  var scopeKey = param.scopeKey, contentId = param.contentId;
+  return "".concat(scopeKey || contentId, "SheetContents");
+}, DialogSheetController = function(props) {
+  var context = useDialogContext("DialogSheetController", props.__scopeDialog), showSheet = useShowDialogSheet(context), breakpointActive = useSheetBreakpointActive(context), getShowSheet = useGet(showSheet);
+  return /* @__PURE__ */ React.createElement(SheetController, {
+    onOpenChange: function(val) {
+      getShowSheet() && props.onOpenChange(val);
+    },
+    open: context.open,
+    hidden: breakpointActive === !1
+  }, props.children);
+}, useSheetBreakpointActive = function(context) {
+  var media = useMedia();
   return context.sheetBreakpoint ? context.sheetBreakpoint === !0 ? !0 : media[context.sheetBreakpoint] : !1;
-}, useShowDialogSheet = (context) => {
-  const breakpointActive = useSheetBreakpointActive(context);
+}, useShowDialogSheet = function(context) {
+  var breakpointActive = useSheetBreakpointActive(context);
   return context.open === !1 ? !1 : breakpointActive;
 };
 export {