@tamagui/popover 1.130.8 → 1.131.0

package/dist/cjs/Popover.cjs

@@ -61,34 +61,35 @@ var import_polyfill_dev = require("@tamagui/polyfill-dev"),
   import_use_controllable_state = require("@tamagui/use-controllable-state"),
   import_z_index_stack = require("@tamagui/z-index-stack"),
   React = __toESM(require("react")),
-  import_useFloatingContext = require("./useFloatingContext"),
+  import_useFloatingContext = require("./useFloatingContext.cjs"),
   import_jsx_runtime = require("react/jsx-runtime");
 const needsRepropagation = import_constants.isAndroid || import_constants.isIos && !import_portal.USE_NATIVE_PORTAL,
-  POPOVER_SCOPE = "PopoverScope",
-  PopoverContext = (0, import_core.createStyledContext)({}),
+  PopoverContext = (0, import_core.createStyledContext)(
+  // since we always provide this we can avoid setting here
+  {}, "Popover__"),
   usePopoverContext = PopoverContext.useStyledContext,
   PopoverAnchor = React.forwardRef(function (props, forwardedRef) {
     const {
-        __scopePopover,
+        scope,
         ...rest
       } = props,
-      context = usePopoverContext(__scopePopover || POPOVER_SCOPE),
+      context = usePopoverContext(scope),
       {
         onCustomAnchorAdd,
         onCustomAnchorRemove
       } = context || {};
     return React.useEffect(() => (onCustomAnchorAdd(), () => onCustomAnchorRemove()), [onCustomAnchorAdd, onCustomAnchorRemove]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
-      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      scope,
       ...rest,
       ref: forwardedRef
     });
   }),
   PopoverTrigger = React.forwardRef(function (props, forwardedRef) {
     const {
-        __scopePopover,
+        scope,
         ...rest
       } = props,
-      context = usePopoverContext(__scopePopover || POPOVER_SCOPE),
+      context = usePopoverContext(scope),
       anchorTo = context.anchorTo,
       composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
     if (!props.children) return null;
@@ -112,20 +113,23 @@ const needsRepropagation = import_constants.isAndroid || import_constants.isIos
       ...(virtualRef && {
         virtualRef
       }),
-      __scopePopper: __scopePopover || POPOVER_SCOPE,
+      scope,
       asChild: rest.asChild,
       children: trigger
     });
   }),
-  PopoverContent = import_popper.PopperContentFrame.extractable(React.forwardRef(function (props, forwardedRef) {
+  PopoverContentFrame = (0, import_core.styled)(import_popper.PopperContentFrame, {
+    name: "Popover"
+  }),
+  PopoverContent = PopoverContentFrame.extractable(React.forwardRef(function (props, forwardedRef) {
     const {
         trapFocus,
         enableRemoveScroll = !1,
         zIndex,
-        __scopePopover,
+        scope,
         ...contentImplProps
       } = props,
-      context = usePopoverContext(__scopePopover || POPOVER_SCOPE),
+      context = usePopoverContext(scope),
       contentRef = React.useRef(null),
       composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef),
       isRightClickOutsideRef = React.useRef(!1),
@@ -136,17 +140,18 @@ const needsRepropagation = import_constants.isAndroid || import_constants.isIos
       if (content) return (0, import_aria_hidden.hideOthers)(content);
     }, [context.open]), !context.keepChildrenMounted && isFullyHidden ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverPortal, {
       passThrough: context.breakpointActive,
-      __scopePopover: __scopePopover || POPOVER_SCOPE,
+      context,
       zIndex,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Stack, {
         passThrough: context.breakpointActive,
         pointerEvents: context.open ? contentImplProps.pointerEvents ?? "auto" : "none",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContentImpl, {
           ...contentImplProps,
+          context,
           enableRemoveScroll,
           ref: composedRefs,
           setIsFullyHidden,
-          __scopePopover: __scopePopover || POPOVER_SCOPE,
+          scope,
           trapFocus: trapFocus ?? context.open,
           disableOutsidePointerEvents: !0,
           onCloseAutoFocus: props.onCloseAutoFocus === !1 ? void 0 : (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, event => {
@@ -168,9 +173,9 @@ const needsRepropagation = import_constants.isAndroid || import_constants.isIos
     });
   })),
   useParentContexts = scope => {
-    const popperContext = (0, import_popper.usePopperContext)(scope || POPOVER_SCOPE),
-      adaptContext = (0, import_adapt.useAdaptContext)(),
-      context = usePopoverContext(scope || POPOVER_SCOPE);
+    const context = usePopoverContext(scope),
+      popperContext = (0, import_popper.usePopperContext)(scope),
+      adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
     return {
       popperContext,
       adaptContext,
@@ -181,11 +186,10 @@ function RepropagateParentContexts({
   adaptContext,
   children,
   context,
-  popperContext,
-  scope
+  popperContext
 }) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperContext.Provider, {
-    scope,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperProvider, {
+    scope: context.popoverScope,
     ...popperContext,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContext.Provider, {
       ...context,
@@ -198,42 +202,44 @@ function RepropagateParentContexts({
 }
 const PortalAdaptSafe = ({
   children,
-  __scopePopover
+  context
 }) => {
   if (needsRepropagation) {
-    const scope = __scopePopover || POPOVER_SCOPE,
-      parentContexts = useParentContexts(scope);
+    const parentContexts = useParentContexts(context.popoverScope);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
+      scope: context.adaptScope,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RepropagateParentContexts, {
-        scope,
         ...parentContexts,
         children
       })
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
+    scope: context.adaptScope,
     children
   });
 };
-function PopoverPortal(props) {
-  const scope = props.__scopePopover || POPOVER_SCOPE,
-    zIndex = props.zIndex,
-    themeName = (0, import_core.useThemeName)();
-  let content = props.children;
+function PopoverPortal({
+  context,
+  zIndex,
+  passThrough,
+  children
+}) {
+  const themeName = (0, import_core.useThemeName)();
+  let content = children;
   if (needsRepropagation) {
-    const parentContexts = useParentContexts(scope);
+    const parentContexts = useParentContexts(context.popoverScope);
     content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(RepropagateParentContexts, {
-      scope,
       ...parentContexts,
       children: content
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
-    passThrough: props.passThrough,
+    passThrough,
     stackZIndex: !0,
     zIndex,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
-      passThrough: props.passThrough,
+      passThrough,
       contain: !0,
       forceClassName: !0,
       name: themeName,
@@ -247,7 +253,7 @@ function PopoverPortal(props) {
 const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
     const {
         trapFocus,
-        __scopePopover,
+        scope,
         onOpenAutoFocus,
         onCloseAutoFocus,
         disableOutsidePointerEvents,
@@ -261,9 +267,9 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
         freezeContentsWhenHidden,
         setIsFullyHidden,
         lazyMount,
+        context,
         ...contentProps
       } = props,
-      context = usePopoverContext(__scopePopover || POPOVER_SCOPE),
       {
         open,
         keepChildrenMounted
@@ -296,13 +302,14 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
       lazyMount,
       passThrough: context.breakpointActive,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperContent, {
-        __scopePopper: __scopePopover || POPOVER_SCOPE,
+        scope,
         "data-state": getState(open),
         id: context.contentId,
         ref: forwardedRef,
         passThrough: context.breakpointActive,
         ...contentProps,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PortalAdaptSafe, {
+          context,
           children: contents
         })
       }, context.contentId)
@@ -313,10 +320,10 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
   },
   PopoverClose = React.forwardRef(function (props, forwardedRef) {
     const {
-        __scopePopover,
+        scope,
         ...rest
       } = props,
-      context = usePopoverContext(__scopePopover || POPOVER_SCOPE);
+      context = usePopoverContext(scope);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
       ...rest,
       ref: forwardedRef,
@@ -324,20 +331,24 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
       onPress: (0, import_helpers.composeEventHandlers)(props.onPress, () => context?.onOpenChange?.(!1, "press"))
     });
   }),
-  PopoverArrow = import_popper.PopperArrow.styleable(function (props, forwardedRef) {
+  PopoverArrow = import_popper.PopperArrowFrame.styleable(function (props, forwardedRef) {
     const {
-      __scopePopover,
-      ...rest
-    } = props;
-    return (0, import_adapt.useAdaptIsActive)() ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperArrow, {
-      __scopePopper: __scopePopover || POPOVER_SCOPE,
+        scope,
+        ...rest
+      } = props,
+      context = usePopoverContext(scope);
+    return (0, import_adapt.useAdaptIsActive)(context.adaptScope) ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperArrow, {
+      scope,
       componentName: "PopoverArrow",
       ...rest,
       ref: forwardedRef
     });
   }),
-  PopoverScrollView = React.forwardRef((props, ref) => {
-    const context = usePopoverContext(POPOVER_SCOPE);
+  PopoverScrollView = React.forwardRef(({
+    scope,
+    ...props
+  }, ref) => {
+    const context = usePopoverContext(scope);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_scroll_view.ScrollView, {
       ref,
       pointerEvents: context.breakpointActive ? "none" : void 0,
@@ -346,14 +357,21 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
       ...props
     });
   }),
-  Popover = (0, import_helpers.withStaticProperties)(React.forwardRef(function (props, ref) {
-    const id = React.useId();
+  DEFAULT_SCOPE = "",
+  Popover = (0, import_helpers.withStaticProperties)(React.forwardRef(function ({
+    scope = DEFAULT_SCOPE,
+    ...props
+  }, ref) {
+    const id = React.useId(),
+      adaptScope = `PopoverAdapt${scope}`;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
-      scope: `${id}PopoverContents`,
+      scope: adaptScope,
       portal: !0,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverInner, {
+        adaptScope,
         ref,
         id,
+        scope,
         ...props
       })
     });
@@ -374,11 +392,12 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
         open: openProp,
         defaultOpen,
         onOpenChange,
-        __scopePopover,
+        scope = DEFAULT_SCOPE,
         keepChildrenMounted: keepChildrenMountedProp,
         hoverable,
         disableFocus,
         id,
+        adaptScope,
         ...restProps
       } = props,
       triggerRef = React.useRef(null),
@@ -399,7 +418,7 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
       handleOpenChange = (0, import_core.useEvent)((val, via) => {
         viaRef.current = via, setOpen(val);
       }),
-      isAdapted = (0, import_adapt.useAdaptIsActive)(),
+      isAdapted = (0, import_adapt.useAdaptIsActive)(adaptScope),
       floatingContext = (0, import_useFloatingContext.useFloatingContext)({
         open,
         setOpen: handleOpenChange,
@@ -417,6 +436,8 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
       setOpen
     }));
     const popoverContext = {
+        popoverScope: scope,
+        adaptScope,
         id,
         contentId: React.useId(),
         triggerRef,
@@ -433,17 +454,18 @@ const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
         keepChildrenMounted
       },
       memoizedChildren = React.useMemo(() => /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContext.Provider, {
-        scope: __scopePopover || POPOVER_SCOPE,
+        scope,
         ...popoverContext,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverSheetController, {
+          context: popoverContext,
           onOpenChange: setOpen,
           children
         })
-      }), [__scopePopover, setOpen, children, ...Object.values(popoverContext)]),
+      }), [scope, setOpen, children, ...Object.values(popoverContext)]),
       contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.Popper, {
         open,
         passThrough: isAdapted,
-        __scopePopper: __scopePopover || POPOVER_SCOPE,
+        scope,
         stayInFrame: !0,
         ...restProps,
         children: memoizedChildren
@@ -459,11 +481,10 @@ function getState(open) {
   return open ? "open" : "closed";
 }
 const PopoverSheetController = ({
-    __scopePopover,
+    context,
     ...props
   }) => {
-    const context = usePopoverContext(__scopePopover || POPOVER_SCOPE),
-      showSheet = useShowPopoverSheet(context),
+    const showSheet = useShowPopoverSheet(context),
       breakpointActive = context.breakpointActive,
       getShowSheet = (0, import_core.useGet)(showSheet);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
@@ -476,6 +497,6 @@ const PopoverSheetController = ({
     });
   },
   useShowPopoverSheet = context => {
-    const isAdapted = (0, import_adapt.useAdaptIsActive)();
+    const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
     return context.open === !1 ? !1 : isAdapted;
   };