@tamagui/popover 1.88.13 → 1.89.0-1706308641099

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/esm/Popover.mjs

@@ -0,0 +1,391 @@
+import "@tamagui/polyfill-dev";
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
+import { Animate } from "@tamagui/animate";
+import { ResetPresence } from "@tamagui/animate-presence";
+import { hideOthers } from "@tamagui/aria-hidden";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb } from "@tamagui/constants";
+import { Stack, Theme, View, createStyledContext, useEvent, useGet, useMedia, useThemeName } from "@tamagui/core";
+import { FloatingOverrideContext } from "@tamagui/floating";
+import { FocusScope } from "@tamagui/focus-scope";
+import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import { Popper, PopperAnchor, PopperArrow, PopperContent, PopperContentFrame, PopperContext, usePopperContext } from "@tamagui/popper";
+import { Portal, PortalHost, PortalItem } from "@tamagui/portal";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { Sheet, SheetController } from "@tamagui/sheet";
+import { YStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import { Platform, ScrollView } from "react-native-web";
+import { useFloatingContext } from "./useFloatingContext.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const POPOVER_SCOPE = "PopoverScope",
+  PopoverContext = createStyledContext({}),
+  usePopoverContext = PopoverContext.useStyledContext,
+  PopoverAnchor = React.forwardRef(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      {
+        onCustomAnchorAdd,
+        onCustomAnchorRemove
+      } = context || {};
+    return React.useEffect(() => (onCustomAnchorAdd(), () => onCustomAnchorRemove()), [onCustomAnchorAdd, onCustomAnchorRemove]), /* @__PURE__ */jsx(PopperAnchor, {
+      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      ...rest,
+      ref: forwardedRef
+    });
+  }),
+  PopoverTrigger = React.forwardRef(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      anchorTo = context.anchorTo,
+      composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    if (anchorTo) {
+      let virtualRef = {
+        current: {
+          getBoundingClientRect: () => isWeb ? DOMRect.fromRect(anchorTo) : anchorTo,
+          ...(!isWeb && {
+            measure: c => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height),
+            measureInWindow: c => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height)
+          })
+        }
+      };
+      return /* @__PURE__ */jsx(PopperAnchor, {
+        virtualRef,
+        __scopePopper: __scopePopover || POPOVER_SCOPE
+      });
+    }
+    if (!props.children) return null;
+    const trigger = /* @__PURE__ */jsx(View, {
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "data-state": getState(context.open),
+      ...rest,
+      ref: composedTriggerRef,
+      onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+    });
+    return context.hasCustomAnchor ? trigger : /* @__PURE__ */jsx(PopperAnchor, {
+      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      asChild: !0,
+      children: trigger
+    });
+  }),
+  PopoverContent = PopperContentFrame.extractable(React.forwardRef(function (props, forwardedRef) {
+    const {
+        allowPinchZoom,
+        trapFocus,
+        disableRemoveScroll = !0,
+        zIndex,
+        __scopePopover,
+        ...contentImplProps
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      contentRef = React.useRef(null),
+      composedRefs = useComposedRefs(forwardedRef, contentRef),
+      isRightClickOutsideRef = React.useRef(!1);
+    return React.useEffect(() => {
+      if (!context.open) return;
+      const content = contentRef.current;
+      if (content) return hideOthers(content);
+    }, [context.open]), /* @__PURE__ */jsx(PopoverContentPortal, {
+      __scopePopover,
+      zIndex: props.zIndex,
+      children: /* @__PURE__ */jsx(Stack, {
+        pointerEvents: context.open ? "auto" : "none",
+        children: /* @__PURE__ */jsx(PopoverContentImpl, {
+          ...contentImplProps,
+          disableRemoveScroll,
+          ref: composedRefs,
+          __scopePopover,
+          trapFocus: trapFocus ?? context.open,
+          disableOutsidePointerEvents: !0,
+          onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, event => {
+            event.preventDefault(), isRightClickOutsideRef.current || context.triggerRef.current?.focus();
+          }),
+          onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, event => {
+            const originalEvent = event.detail.originalEvent,
+              ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
+              isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            isRightClickOutsideRef.current = isRightClick;
+          }, {
+            checkDefaultPrevented: !1
+          }),
+          onFocusOutside: composeEventHandlers(props.onFocusOutside, event => event.preventDefault(), {
+            checkDefaultPrevented: !1
+          })
+        })
+      })
+    });
+  }));
+function PopoverRepropagateContext(props) {
+  return /* @__PURE__ */jsx(PopperContext.Provider, {
+    scope: props.scope,
+    ...props.popperContext,
+    children: /* @__PURE__ */jsx(PopoverContext.Provider, {
+      ...props.context,
+      children: props.children
+    })
+  });
+}
+function PopoverContentPortal(props) {
+  const {
+      __scopePopover
+    } = props,
+    zIndex = props.zIndex ?? 15e4,
+    context = usePopoverContext(__scopePopover),
+    popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE),
+    themeName = useThemeName();
+  let contents = props.children;
+  return (Platform.OS === "android" || Platform.OS === "ios") && (contents = /* @__PURE__ */jsx(PopoverRepropagateContext, {
+    scope: __scopePopover || POPOVER_SCOPE,
+    popperContext,
+    context,
+    children: props.children
+  })), /* @__PURE__ */jsx(Portal, {
+    zIndex,
+    children: /* @__PURE__ */jsxs(Theme, {
+      forceClassName: !0,
+      name: themeName,
+      children: [!!context.open && !context.breakpointActive && /* @__PURE__ */jsx(YStack, {
+        fullscreen: !0,
+        onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+      }), contents]
+    })
+  });
+}
+const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
+    const {
+        trapFocus,
+        __scopePopover,
+        onOpenAutoFocus,
+        onCloseAutoFocus,
+        disableOutsidePointerEvents,
+        disableFocusScope,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onFocusOutside,
+        onInteractOutside,
+        children,
+        disableRemoveScroll,
+        freezeContentsWhenHidden,
+        ...contentProps
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      {
+        open,
+        keepChildrenMounted
+      } = context,
+      popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE),
+      [isFullyHidden, setIsFullyHidden] = React.useState(!context.open),
+      contents = React.useMemo(() => isWeb ? /* @__PURE__ */jsx("div", {
+        style: {
+          display: "contents"
+        },
+        children
+      }) : children, [children]);
+    if (open && isFullyHidden && setIsFullyHidden(!1), !keepChildrenMounted && isFullyHidden) return null;
+    if (context.breakpointActive) {
+      const childrenWithoutScrollView = React.Children.toArray(children).map(child => React.isValidElement(child) && child.type === ScrollView ? child.props.children : child);
+      let content = childrenWithoutScrollView;
+      return Platform.OS === "android" || Platform.OS === "ios" ? content = /* @__PURE__ */jsx(PopperContext.Provider, {
+        scope: __scopePopover || POPOVER_SCOPE,
+        ...popperContext,
+        children: /* @__PURE__ */jsx(ResetPresence, {
+          children: childrenWithoutScrollView
+        })
+      }) : content = /* @__PURE__ */jsx(ResetPresence, {
+        children: content
+      }), /* @__PURE__ */jsx(PortalItem, {
+        hostName: `${context.id}PopoverContents`,
+        children: content
+      });
+    }
+    return /* @__PURE__ */jsx(Animate, {
+      type: "presence",
+      present: !!open,
+      keepChildrenMounted,
+      onExitComplete: () => {
+        setIsFullyHidden(!0);
+      },
+      children: /* @__PURE__ */jsx(PopperContent, {
+        __scopePopper: __scopePopover || POPOVER_SCOPE,
+        "data-state": getState(open),
+        id: context.contentId,
+        ref: forwardedRef,
+        ...contentProps,
+        children: /* @__PURE__ */jsx(RemoveScroll, {
+          enabled: disableRemoveScroll ? !1 : open,
+          allowPinchZoom: !0,
+          removeScrollBar: !1,
+          style: {
+            display: "contents"
+          },
+          children: /* @__PURE__ */jsx(ResetPresence, {
+            children: /* @__PURE__ */jsx(FocusScope, {
+              loop: !0,
+              enabled: disableFocusScope ? !1 : open,
+              trapped: trapFocus,
+              onMountAutoFocus: onOpenAutoFocus,
+              onUnmountAutoFocus: onCloseAutoFocus,
+              children: contents
+            })
+          })
+        })
+      }, context.contentId)
+    });
+  }),
+  PopoverClose = React.forwardRef(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover);
+    return /* @__PURE__ */jsx(YStack, {
+      ...rest,
+      ref: forwardedRef,
+      componentName: "PopoverClose",
+      onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(!1, "press"))
+    });
+  }),
+  PopoverArrow = PopperArrow.styleable(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover);
+    return useSheetBreakpointActive(context.sheetBreakpoint) ? null : /* @__PURE__ */jsx(PopperArrow, {
+      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      componentName: "PopoverArrow",
+      ...rest,
+      ref: forwardedRef
+    });
+  }),
+  Popover = withStaticProperties(React.forwardRef((props, forwardedRef) => {
+    const {
+        children,
+        open: openProp,
+        defaultOpen,
+        onOpenChange,
+        __scopePopover,
+        keepChildrenMounted,
+        hoverable,
+        disableFocus,
+        ...restProps
+      } = props,
+      id = React.useId(),
+      {
+        when,
+        AdaptProvider
+      } = useAdaptParent({
+        Contents: React.useCallback(() => /* @__PURE__ */jsx(PortalHost, {
+          name: `${id}PopoverContents`
+        }), [])
+      }),
+      sheetBreakpoint = when,
+      triggerRef = React.useRef(null),
+      [hasCustomAnchor, setHasCustomAnchor] = React.useState(!1),
+      viaRef = React.useRef(),
+      [open, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: defaultOpen || !1,
+        onChange: val => {
+          onOpenChange?.(val, viaRef.current);
+        }
+      }),
+      sheetActive = useSheetBreakpointActive(sheetBreakpoint),
+      floatingContext = useFloatingContext({
+        open,
+        setOpen: (val, via) => {
+          viaRef.current = via, setOpen(val);
+        },
+        disable: sheetActive,
+        hoverable,
+        disableFocus
+      }),
+      [anchorTo, setAnchorTo] = React.useState();
+    React.useImperativeHandle(forwardedRef, () => ({
+      anchorTo: setAnchorTo
+    }));
+    const popoverContext = {
+        id,
+        sheetBreakpoint,
+        contentId: React.useId(),
+        triggerRef,
+        open,
+        breakpointActive: sheetActive,
+        onOpenChange: (val, via) => {
+          viaRef.current = via, setOpen(val);
+        },
+        onOpenToggle: useEvent(() => {
+          open && sheetActive || setOpen(!open);
+        }),
+        hasCustomAnchor,
+        anchorTo,
+        onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(!0), []),
+        onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(!1), []),
+        keepChildrenMounted
+      },
+      contents = /* @__PURE__ */jsx(Popper, {
+        __scopePopper: __scopePopover || POPOVER_SCOPE,
+        stayInFrame: !0,
+        ...restProps,
+        children: /* @__PURE__ */jsx(PopoverContext.Provider, {
+          scope: __scopePopover,
+          ...popoverContext,
+          children: /* @__PURE__ */jsx(PopoverSheetController, {
+            onOpenChange: setOpen,
+            children
+          })
+        })
+      });
+    return /* @__PURE__ */jsx(AdaptProvider, {
+      children: isWeb ? /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
+        value: floatingContext,
+        children: contents
+      }) : contents
+    });
+  }), {
+    Anchor: PopoverAnchor,
+    Arrow: PopoverArrow,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+    Close: PopoverClose,
+    Adapt,
+    ScrollView,
+    Sheet: Sheet.Controlled
+  });
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const PopoverSheetController = ({
+    __scopePopover,
+    ...props
+  }) => {
+    const context = usePopoverContext(__scopePopover),
+      showSheet = useShowPopoverSheet(context),
+      breakpointActive = context.breakpointActive,
+      getShowSheet = useGet(showSheet);
+    return /* @__PURE__ */jsx(SheetController, {
+      onOpenChange: val => {
+        getShowSheet() && props.onOpenChange(val);
+      },
+      open: context.open,
+      hidden: breakpointActive === !1,
+      children: props.children
+    });
+  },
+  useSheetBreakpointActive = breakpoint => {
+    const media = useMedia();
+    return typeof breakpoint == "boolean" || !breakpoint ? !!breakpoint : media[breakpoint];
+  },
+  useShowPopoverSheet = context => {
+    const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
+    return context.open === !1 ? !1 : breakpointActive;
+  };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverContext, PopoverTrigger, usePopoverContext };

package/dist/esm/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Popover.mjs";
+export * from "./useFloatingContext.mjs";

package/dist/esm/useFloatingContext.mjs

@@ -0,0 +1,46 @@
+import { safePolygon, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { useCallback } from "react";
+const useFloatingContext = ({
+  open,
+  setOpen,
+  disable,
+  disableFocus,
+  hoverable
+}) => useCallback(props => {
+  const floating = useFloating({
+      ...props,
+      open,
+      onOpenChange: (val, event) => {
+        const type = event?.type === "mousemove" || event?.type === "mouseenter" || event?.type === "mouseleave" ? "hover" : "press";
+        setOpen(val, type);
+      }
+    }),
+    {
+      getReferenceProps,
+      getFloatingProps
+    } = useInteractions([hoverable ? useHover(floating.context, {
+      enabled: !disable && hoverable,
+      handleClose: safePolygon({
+        requireIntent: !0,
+        blockPointerEvents: !0,
+        buffer: 1
+      }),
+      ...(hoverable && typeof hoverable == "object" && hoverable)
+    }) : useHover(floating.context, {
+      enabled: !1
+    }), useFocus(floating.context, {
+      enabled: !disable && !disableFocus,
+      visibleOnly: !0
+    }), useRole(floating.context, {
+      role: "dialog"
+    }), useDismiss(floating.context, {
+      enabled: !disable
+    })]);
+  return {
+    ...floating,
+    open,
+    getReferenceProps,
+    getFloatingProps
+  };
+}, [open, setOpen, disable, disableFocus, hoverable]);
+export { useFloatingContext };

package/dist/jsx/Popover.mjs

@@ -0,0 +1,391 @@
+import "@tamagui/polyfill-dev";
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
+import { Animate } from "@tamagui/animate";
+import { ResetPresence } from "@tamagui/animate-presence";
+import { hideOthers } from "@tamagui/aria-hidden";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb } from "@tamagui/constants";
+import { Stack, Theme, View, createStyledContext, useEvent, useGet, useMedia, useThemeName } from "@tamagui/core";
+import { FloatingOverrideContext } from "@tamagui/floating";
+import { FocusScope } from "@tamagui/focus-scope";
+import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import { Popper, PopperAnchor, PopperArrow, PopperContent, PopperContentFrame, PopperContext, usePopperContext } from "@tamagui/popper";
+import { Portal, PortalHost, PortalItem } from "@tamagui/portal";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { Sheet, SheetController } from "@tamagui/sheet";
+import { YStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import { Platform, ScrollView } from "react-native-web";
+import { useFloatingContext } from "./useFloatingContext.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const POPOVER_SCOPE = "PopoverScope",
+  PopoverContext = createStyledContext({}),
+  usePopoverContext = PopoverContext.useStyledContext,
+  PopoverAnchor = React.forwardRef(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      {
+        onCustomAnchorAdd,
+        onCustomAnchorRemove
+      } = context || {};
+    return React.useEffect(() => (onCustomAnchorAdd(), () => onCustomAnchorRemove()), [onCustomAnchorAdd, onCustomAnchorRemove]), /* @__PURE__ */jsx(PopperAnchor, {
+      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      ...rest,
+      ref: forwardedRef
+    });
+  }),
+  PopoverTrigger = React.forwardRef(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      anchorTo = context.anchorTo,
+      composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    if (anchorTo) {
+      let virtualRef = {
+        current: {
+          getBoundingClientRect: () => isWeb ? DOMRect.fromRect(anchorTo) : anchorTo,
+          ...(!isWeb && {
+            measure: c => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height),
+            measureInWindow: c => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height)
+          })
+        }
+      };
+      return /* @__PURE__ */jsx(PopperAnchor, {
+        virtualRef,
+        __scopePopper: __scopePopover || POPOVER_SCOPE
+      });
+    }
+    if (!props.children) return null;
+    const trigger = /* @__PURE__ */jsx(View, {
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "data-state": getState(context.open),
+      ...rest,
+      ref: composedTriggerRef,
+      onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+    });
+    return context.hasCustomAnchor ? trigger : /* @__PURE__ */jsx(PopperAnchor, {
+      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      asChild: !0,
+      children: trigger
+    });
+  }),
+  PopoverContent = PopperContentFrame.extractable(React.forwardRef(function (props, forwardedRef) {
+    const {
+        allowPinchZoom,
+        trapFocus,
+        disableRemoveScroll = !0,
+        zIndex,
+        __scopePopover,
+        ...contentImplProps
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      contentRef = React.useRef(null),
+      composedRefs = useComposedRefs(forwardedRef, contentRef),
+      isRightClickOutsideRef = React.useRef(!1);
+    return React.useEffect(() => {
+      if (!context.open) return;
+      const content = contentRef.current;
+      if (content) return hideOthers(content);
+    }, [context.open]), /* @__PURE__ */jsx(PopoverContentPortal, {
+      __scopePopover,
+      zIndex: props.zIndex,
+      children: /* @__PURE__ */jsx(Stack, {
+        pointerEvents: context.open ? "auto" : "none",
+        children: /* @__PURE__ */jsx(PopoverContentImpl, {
+          ...contentImplProps,
+          disableRemoveScroll,
+          ref: composedRefs,
+          __scopePopover,
+          trapFocus: trapFocus ?? context.open,
+          disableOutsidePointerEvents: !0,
+          onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, event => {
+            event.preventDefault(), isRightClickOutsideRef.current || context.triggerRef.current?.focus();
+          }),
+          onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, event => {
+            const originalEvent = event.detail.originalEvent,
+              ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
+              isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            isRightClickOutsideRef.current = isRightClick;
+          }, {
+            checkDefaultPrevented: !1
+          }),
+          onFocusOutside: composeEventHandlers(props.onFocusOutside, event => event.preventDefault(), {
+            checkDefaultPrevented: !1
+          })
+        })
+      })
+    });
+  }));
+function PopoverRepropagateContext(props) {
+  return /* @__PURE__ */jsx(PopperContext.Provider, {
+    scope: props.scope,
+    ...props.popperContext,
+    children: /* @__PURE__ */jsx(PopoverContext.Provider, {
+      ...props.context,
+      children: props.children
+    })
+  });
+}
+function PopoverContentPortal(props) {
+  const {
+      __scopePopover
+    } = props,
+    zIndex = props.zIndex ?? 15e4,
+    context = usePopoverContext(__scopePopover),
+    popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE),
+    themeName = useThemeName();
+  let contents = props.children;
+  return (Platform.OS === "android" || Platform.OS === "ios") && (contents = /* @__PURE__ */jsx(PopoverRepropagateContext, {
+    scope: __scopePopover || POPOVER_SCOPE,
+    popperContext,
+    context,
+    children: props.children
+  })), /* @__PURE__ */jsx(Portal, {
+    zIndex,
+    children: /* @__PURE__ */jsxs(Theme, {
+      forceClassName: !0,
+      name: themeName,
+      children: [!!context.open && !context.breakpointActive && /* @__PURE__ */jsx(YStack, {
+        fullscreen: !0,
+        onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+      }), contents]
+    })
+  });
+}
+const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
+    const {
+        trapFocus,
+        __scopePopover,
+        onOpenAutoFocus,
+        onCloseAutoFocus,
+        disableOutsidePointerEvents,
+        disableFocusScope,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onFocusOutside,
+        onInteractOutside,
+        children,
+        disableRemoveScroll,
+        freezeContentsWhenHidden,
+        ...contentProps
+      } = props,
+      context = usePopoverContext(__scopePopover),
+      {
+        open,
+        keepChildrenMounted
+      } = context,
+      popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE),
+      [isFullyHidden, setIsFullyHidden] = React.useState(!context.open),
+      contents = React.useMemo(() => isWeb ? /* @__PURE__ */jsx("div", {
+        style: {
+          display: "contents"
+        },
+        children
+      }) : children, [children]);
+    if (open && isFullyHidden && setIsFullyHidden(!1), !keepChildrenMounted && isFullyHidden) return null;
+    if (context.breakpointActive) {
+      const childrenWithoutScrollView = React.Children.toArray(children).map(child => React.isValidElement(child) && child.type === ScrollView ? child.props.children : child);
+      let content = childrenWithoutScrollView;
+      return Platform.OS === "android" || Platform.OS === "ios" ? content = /* @__PURE__ */jsx(PopperContext.Provider, {
+        scope: __scopePopover || POPOVER_SCOPE,
+        ...popperContext,
+        children: /* @__PURE__ */jsx(ResetPresence, {
+          children: childrenWithoutScrollView
+        })
+      }) : content = /* @__PURE__ */jsx(ResetPresence, {
+        children: content
+      }), /* @__PURE__ */jsx(PortalItem, {
+        hostName: `${context.id}PopoverContents`,
+        children: content
+      });
+    }
+    return /* @__PURE__ */jsx(Animate, {
+      type: "presence",
+      present: !!open,
+      keepChildrenMounted,
+      onExitComplete: () => {
+        setIsFullyHidden(!0);
+      },
+      children: /* @__PURE__ */jsx(PopperContent, {
+        __scopePopper: __scopePopover || POPOVER_SCOPE,
+        "data-state": getState(open),
+        id: context.contentId,
+        ref: forwardedRef,
+        ...contentProps,
+        children: /* @__PURE__ */jsx(RemoveScroll, {
+          enabled: disableRemoveScroll ? !1 : open,
+          allowPinchZoom: !0,
+          removeScrollBar: !1,
+          style: {
+            display: "contents"
+          },
+          children: /* @__PURE__ */jsx(ResetPresence, {
+            children: /* @__PURE__ */jsx(FocusScope, {
+              loop: !0,
+              enabled: disableFocusScope ? !1 : open,
+              trapped: trapFocus,
+              onMountAutoFocus: onOpenAutoFocus,
+              onUnmountAutoFocus: onCloseAutoFocus,
+              children: contents
+            })
+          })
+        })
+      }, context.contentId)
+    });
+  }),
+  PopoverClose = React.forwardRef(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover);
+    return /* @__PURE__ */jsx(YStack, {
+      ...rest,
+      ref: forwardedRef,
+      componentName: "PopoverClose",
+      onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(!1, "press"))
+    });
+  }),
+  PopoverArrow = PopperArrow.styleable(function (props, forwardedRef) {
+    const {
+        __scopePopover,
+        ...rest
+      } = props,
+      context = usePopoverContext(__scopePopover);
+    return useSheetBreakpointActive(context.sheetBreakpoint) ? null : /* @__PURE__ */jsx(PopperArrow, {
+      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      componentName: "PopoverArrow",
+      ...rest,
+      ref: forwardedRef
+    });
+  }),
+  Popover = withStaticProperties(React.forwardRef((props, forwardedRef) => {
+    const {
+        children,
+        open: openProp,
+        defaultOpen,
+        onOpenChange,
+        __scopePopover,
+        keepChildrenMounted,
+        hoverable,
+        disableFocus,
+        ...restProps
+      } = props,
+      id = React.useId(),
+      {
+        when,
+        AdaptProvider
+      } = useAdaptParent({
+        Contents: React.useCallback(() => /* @__PURE__ */jsx(PortalHost, {
+          name: `${id}PopoverContents`
+        }), [])
+      }),
+      sheetBreakpoint = when,
+      triggerRef = React.useRef(null),
+      [hasCustomAnchor, setHasCustomAnchor] = React.useState(!1),
+      viaRef = React.useRef(),
+      [open, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: defaultOpen || !1,
+        onChange: val => {
+          onOpenChange?.(val, viaRef.current);
+        }
+      }),
+      sheetActive = useSheetBreakpointActive(sheetBreakpoint),
+      floatingContext = useFloatingContext({
+        open,
+        setOpen: (val, via) => {
+          viaRef.current = via, setOpen(val);
+        },
+        disable: sheetActive,
+        hoverable,
+        disableFocus
+      }),
+      [anchorTo, setAnchorTo] = React.useState();
+    React.useImperativeHandle(forwardedRef, () => ({
+      anchorTo: setAnchorTo
+    }));
+    const popoverContext = {
+        id,
+        sheetBreakpoint,
+        contentId: React.useId(),
+        triggerRef,
+        open,
+        breakpointActive: sheetActive,
+        onOpenChange: (val, via) => {
+          viaRef.current = via, setOpen(val);
+        },
+        onOpenToggle: useEvent(() => {
+          open && sheetActive || setOpen(!open);
+        }),
+        hasCustomAnchor,
+        anchorTo,
+        onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(!0), []),
+        onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(!1), []),
+        keepChildrenMounted
+      },
+      contents = /* @__PURE__ */jsx(Popper, {
+        __scopePopper: __scopePopover || POPOVER_SCOPE,
+        stayInFrame: !0,
+        ...restProps,
+        children: /* @__PURE__ */jsx(PopoverContext.Provider, {
+          scope: __scopePopover,
+          ...popoverContext,
+          children: /* @__PURE__ */jsx(PopoverSheetController, {
+            onOpenChange: setOpen,
+            children
+          })
+        })
+      });
+    return /* @__PURE__ */jsx(AdaptProvider, {
+      children: isWeb ? /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
+        value: floatingContext,
+        children: contents
+      }) : contents
+    });
+  }), {
+    Anchor: PopoverAnchor,
+    Arrow: PopoverArrow,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+    Close: PopoverClose,
+    Adapt,
+    ScrollView,
+    Sheet: Sheet.Controlled
+  });
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const PopoverSheetController = ({
+    __scopePopover,
+    ...props
+  }) => {
+    const context = usePopoverContext(__scopePopover),
+      showSheet = useShowPopoverSheet(context),
+      breakpointActive = context.breakpointActive,
+      getShowSheet = useGet(showSheet);
+    return /* @__PURE__ */jsx(SheetController, {
+      onOpenChange: val => {
+        getShowSheet() && props.onOpenChange(val);
+      },
+      open: context.open,
+      hidden: breakpointActive === !1,
+      children: props.children
+    });
+  },
+  useSheetBreakpointActive = breakpoint => {
+    const media = useMedia();
+    return typeof breakpoint == "boolean" || !breakpoint ? !!breakpoint : media[breakpoint];
+  },
+  useShowPopoverSheet = context => {
+    const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
+    return context.open === !1 ? !1 : breakpointActive;
+  };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverContext, PopoverTrigger, usePopoverContext };

package/dist/jsx/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Popover.mjs";
+export * from "./useFloatingContext.mjs";

package/dist/jsx/useFloatingContext.mjs

@@ -0,0 +1,46 @@
+import { safePolygon, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { useCallback } from "react";
+const useFloatingContext = ({
+  open,
+  setOpen,
+  disable,
+  disableFocus,
+  hoverable
+}) => useCallback(props => {
+  const floating = useFloating({
+      ...props,
+      open,
+      onOpenChange: (val, event) => {
+        const type = event?.type === "mousemove" || event?.type === "mouseenter" || event?.type === "mouseleave" ? "hover" : "press";
+        setOpen(val, type);
+      }
+    }),
+    {
+      getReferenceProps,
+      getFloatingProps
+    } = useInteractions([hoverable ? useHover(floating.context, {
+      enabled: !disable && hoverable,
+      handleClose: safePolygon({
+        requireIntent: !0,
+        blockPointerEvents: !0,
+        buffer: 1
+      }),
+      ...(hoverable && typeof hoverable == "object" && hoverable)
+    }) : useHover(floating.context, {
+      enabled: !1
+    }), useFocus(floating.context, {
+      enabled: !disable && !disableFocus,
+      visibleOnly: !0
+    }), useRole(floating.context, {
+      role: "dialog"
+    }), useDismiss(floating.context, {
+      enabled: !disable
+    })]);
+  return {
+    ...floating,
+    open,
+    getReferenceProps,
+    getFloatingProps
+  };
+}, [open, setOpen, disable, disableFocus, hoverable]);
+export { useFloatingContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/popover",
-  "version": "1.88.13",
+  "version": "1.89.0-1706308641099",
   "sideEffects": [
     "*.css"
   ],
@@ -33,24 +33,24 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.6",
-    "@tamagui/adapt": "1.88.13",
-    "@tamagui/animate": "1.88.13",
-    "@tamagui/aria-hidden": "1.88.13",
-    "@tamagui/compose-refs": "1.88.13",
-    "@tamagui/constants": "1.88.13",
-    "@tamagui/core": "1.88.13",
-    "@tamagui/dismissable": "1.88.13",
-    "@tamagui/floating": "1.88.13",
-    "@tamagui/focus-scope": "1.88.13",
-    "@tamagui/helpers": "1.88.13",
-    "@tamagui/polyfill-dev": "1.88.13",
-    "@tamagui/popper": "1.88.13",
-    "@tamagui/portal": "1.88.13",
-    "@tamagui/remove-scroll": "1.88.13",
-    "@tamagui/scroll-view": "1.88.13",
-    "@tamagui/sheet": "1.88.13",
-    "@tamagui/stacks": "1.88.13",
-    "@tamagui/use-controllable-state": "1.88.13",
+    "@tamagui/adapt": "1.89.0-1706308641099",
+    "@tamagui/animate": "1.89.0-1706308641099",
+    "@tamagui/aria-hidden": "1.89.0-1706308641099",
+    "@tamagui/compose-refs": "1.89.0-1706308641099",
+    "@tamagui/constants": "1.89.0-1706308641099",
+    "@tamagui/core": "1.89.0-1706308641099",
+    "@tamagui/dismissable": "1.89.0-1706308641099",
+    "@tamagui/floating": "1.89.0-1706308641099",
+    "@tamagui/focus-scope": "1.89.0-1706308641099",
+    "@tamagui/helpers": "1.89.0-1706308641099",
+    "@tamagui/polyfill-dev": "1.89.0-1706308641099",
+    "@tamagui/popper": "1.89.0-1706308641099",
+    "@tamagui/portal": "1.89.0-1706308641099",
+    "@tamagui/remove-scroll": "1.89.0-1706308641099",
+    "@tamagui/scroll-view": "1.89.0-1706308641099",
+    "@tamagui/sheet": "1.89.0-1706308641099",
+    "@tamagui/stacks": "1.89.0-1706308641099",
+    "@tamagui/use-controllable-state": "1.89.0-1706308641099",
     "react-freeze": "^1.0.3"
   },
   "peerDependencies": {
@@ -58,7 +58,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.89.0-1706308641099",
     "react": "^18.2.0",
     "react-native": "^0.72.6"
   },