@tamagui/popper 2.0.0-rc.8 → 2.0.0

package/dist/esm/Popper.mjs

@@ -1,61 +1,65 @@
+import { flushSync } from "react-dom";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { LayoutMeasurementController, View as TamaguiView, createStyledContext, getVariableValue, styled, useProps } from "@tamagui/core";
-import { arrow, autoUpdate, flip, offset as offsetFn, platform, shift, size as sizeMiddleware, useFloating } from "@tamagui/floating";
+import { LayoutMeasurementController, View as TamaguiView, createStyledContext, getVariableValue, registerLayoutNode, styled } from "@tamagui/core";
+import { FloatingOverrideContext } from "@tamagui/floating";
+import { arrow, flip, getOverflowAncestors, offset as offsetFn, platform, shift, size as sizeMiddleware, useFloating } from "@tamagui/floating";
 import { getSpace } from "@tamagui/get-token";
 import { YStack } from "@tamagui/stacks";
 import { startTransition } from "@tamagui/start-transition";
 import * as React from "react";
+import { Keyboard, useWindowDimensions } from "react-native-web";
 import { jsx } from "react/jsx-runtime";
 const PopperContextFast = createStyledContext(
-  // since we always provide this we can avoid setting here
-  {}, "Popper__"),
-  PopperPositionContext = createStyledContext,
-  {
-    useStyledContext: usePopperContext,
-    Provider: PopperProviderFast
-  } = PopperContextFast,
-  PopperContextSlow = createStyledContext(
-  // since we always provide this we can avoid setting here
-  {}, "PopperSlow__"),
-  {
-    useStyledContext: usePopperContextSlow,
-    Provider: PopperProviderSlow
-  } = PopperContextSlow,
-  PopperProvider = ({
+// since we always provide this we can avoid setting here
+{}, "Popper__");
+const PopperPositionContext = createStyledContext;
+const {
+  useStyledContext: usePopperContext,
+  Provider: PopperProviderFast
+} = PopperContextFast;
+const PopperContextSlow = createStyledContext(
+// since we always provide this we can avoid setting here
+{}, "PopperSlow__");
+const {
+  useStyledContext: usePopperContextSlow,
+  Provider: PopperProviderSlow
+} = PopperContextSlow;
+const PopperProvider = ({
+  scope,
+  children,
+  ...context
+}) => {
+  const fns = React.useRef(context);
+  fns.current = context;
+  const [slowContext] = React.useState(() => ({
+    refs: context.refs,
+    triggerElements: context.triggerElements,
+    update(...a) {
+      fns.current.update(...a);
+    },
+    getReferenceProps(p) {
+      return fns.current.getReferenceProps?.(p);
+    },
+    onHoverReference(e) {
+      fns.current.onHoverReference?.(e);
+    },
+    onLeaveReference() {
+      fns.current.onLeaveReference?.();
+    }
+  }));
+  return /* @__PURE__ */jsx(PopperProviderFast, {
     scope,
-    children,
-    ...context
-  }) => {
-    const slowContext = getContextSlow(context);
-    return /* @__PURE__ */jsx(PopperProviderFast, {
+    ...context,
+    children: /* @__PURE__ */jsx(PopperProviderSlow, {
       scope,
-      ...context,
-      children: /* @__PURE__ */jsx(PopperProviderSlow, {
-        scope,
-        ...slowContext,
-        children
-      })
-    });
-  };
-function getContextSlow(context) {
-  return {
-    refs: context.refs,
-    size: context.size,
-    arrowRef: context.arrowRef,
-    arrowStyle: context.arrowStyle,
-    onArrowSize: context.onArrowSize,
-    hasFloating: context.hasFloating,
-    strategy: context.strategy,
-    update: context.update,
-    context: context.context,
-    getFloatingProps: context.getFloatingProps,
-    getReferenceProps: context.getReferenceProps,
-    open: context.open
-  };
-}
-const checkFloating = void 0,
-  setupOptions = {};
+      ...slowContext,
+      children
+    })
+  });
+};
+const checkFloating = void 0;
+const setupOptions = {};
 function setupPopper(options) {
   Object.assign(setupOptions, options);
 }
@@ -68,24 +72,37 @@ const transformOriginMiddleware = options => ({
   options,
   fn(data) {
     const {
-        placement,
-        rects,
-        middlewareData
-      } = data,
-      isArrowHidden = middlewareData.arrow?.centerOffset !== 0,
-      arrowWidth = isArrowHidden ? 0 : options.arrowWidth,
-      arrowHeight = isArrowHidden ? 0 : options.arrowHeight,
-      [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement),
-      noArrowAlign = {
-        start: "0%",
-        center: "50%",
-        end: "100%"
-      }[placedAlign],
-      arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2,
-      arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
-    let x = "",
-      y = "";
-    return placedSide === "bottom" ? (x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`, y = `${-arrowHeight}px`) : placedSide === "top" ? (x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`, y = `${rects.floating.height + arrowHeight}px`) : placedSide === "right" ? (x = `${-arrowHeight}px`, y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`) : placedSide === "left" && (x = `${rects.floating.width + arrowHeight}px`, y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`), {
+      placement,
+      rects,
+      middlewareData
+    } = data;
+    const isArrowHidden = middlewareData.arrow?.centerOffset !== 0;
+    const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+    const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+    const noArrowAlign = {
+      start: "0%",
+      center: "50%",
+      end: "100%"
+    }[placedAlign];
+    const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+    const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+    let x = "";
+    let y = "";
+    if (placedSide === "bottom") {
+      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      y = `${-arrowHeight}px`;
+    } else if (placedSide === "top") {
+      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      y = `${rects.floating.height + arrowHeight}px`;
+    } else if (placedSide === "right") {
+      x = `${-arrowHeight}px`;
+      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+    } else if (placedSide === "left") {
+      x = `${rects.floating.width + arrowHeight}px`;
+      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+    }
+    return {
       data: {
         x,
         y
@@ -93,258 +110,331 @@ const transformOriginMiddleware = options => ({
     };
   }
 });
+function tamaguiAutoUpdate(reference, floating, update) {
+  update();
+  let rafId = requestAnimationFrame(() => {
+    update();
+    rafId = 0;
+  });
+  const cleanups = [() => {
+    if (rafId) cancelAnimationFrame(rafId);
+  }];
+  if (reference instanceof HTMLElement) cleanups.push(registerLayoutNode(reference, update));
+  const ancestors = [...(reference instanceof Element ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)];
+  const uniqueAncestors = [...new Set(ancestors)];
+  for (const ancestor of uniqueAncestors) ancestor.addEventListener("scroll", update, {
+    passive: true
+  });
+  window.addEventListener("resize", update);
+  cleanups.push(() => {
+    for (const ancestor of uniqueAncestors) ancestor.removeEventListener("scroll", update);
+    window.removeEventListener("resize", update);
+  });
+  return () => cleanups.forEach(fn => fn());
+}
 function Popper(props) {
   const {
-      children,
-      size,
-      strategy = "absolute",
-      placement = "bottom",
-      stayInFrame,
-      allowFlip,
-      offset,
-      disableRTL,
-      resize,
-      passThrough,
-      open,
-      scope
-    } = props,
-    [arrowEl, setArrow] = React.useState(null),
-    [arrowSize, setArrowSize] = React.useState(0),
-    offsetOptions = offset ?? arrowSize,
-    floatingStyle = React.useRef({}),
-    isOpen = passThrough ? !1 : open || !0;
+    children,
+    size,
+    strategy = "absolute",
+    placement = "bottom",
+    stayInFrame,
+    allowFlip,
+    offset,
+    disableRTL,
+    resize,
+    passThrough,
+    open,
+    scope
+  } = props;
+  const [arrowEl, setArrow] = React.useState(null);
+  const [arrowSize, setArrowSize] = React.useState(0);
+  const offsetOptions = offset ?? arrowSize;
+  const floatingStyle = React.useRef({});
+  const isOpen = passThrough ? false : open ?? true;
+  const middlewareRef = React.useRef([]);
+  if (isOpen) middlewareRef.current = [typeof offsetOptions !== "undefined" ? offsetFn(offsetOptions) : null, allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null, stayInFrame ? shift({
+    padding: 10,
+    mainAxis: true,
+    crossAxis: false,
+    ...(typeof stayInFrame === "object" ? stayInFrame : null)
+  }) : null, arrowEl ? arrow({
+    element: arrowEl
+  }) : null, checkFloating, resize ? sizeMiddleware({
+    padding: typeof stayInFrame === "object" ? stayInFrame.padding : 10,
+    apply({
+      availableHeight,
+      availableWidth
+    }) {
+      if (passThrough) return;
+      Object.assign(floatingStyle.current, {
+        maxHeight: `${availableHeight}px`,
+        maxWidth: `${availableWidth}px`
+      });
+      const floatingChild = floating.refs.floating.current?.firstChild;
+      if (floatingChild && floatingChild instanceof HTMLElement) Object.assign(floatingChild.style, floatingStyle.current);
+    },
+    ...(typeof resize === "object" && resize)
+  }) : null, sizeMiddleware({
+    apply({
+      elements,
+      rects,
+      availableWidth,
+      availableHeight
+    }) {
+      const {
+        width: anchorWidth,
+        height: anchorHeight
+      } = rects.reference;
+      const contentStyle = elements.floating.style;
+      contentStyle.setProperty("--tamagui-popper-available-width", `${availableWidth}px`);
+      contentStyle.setProperty("--tamagui-popper-available-height", `${availableHeight}px`);
+      contentStyle.setProperty("--tamagui-popper-anchor-width", `${anchorWidth}px`);
+      contentStyle.setProperty("--tamagui-popper-anchor-height", `${anchorHeight}px`);
+    }
+  }), transformOriginMiddleware({
+    arrowHeight: arrowSize,
+    arrowWidth: arrowSize
+  })].filter(Boolean);
   let floating = useFloating({
     open: isOpen,
     strategy,
     placement,
-    sameScrollView: !1,
-    // this only takes effect on native
-    whileElementsMounted: isOpen ? autoUpdate : void 0,
+    sameScrollView: false,
+    whileElementsMounted: !isOpen ? void 0 : tamaguiAutoUpdate,
     platform: disableRTL ?? setupOptions.disableRTL ? {
       ...platform,
       isRTL(element) {
-        return !1;
+        return false;
       }
     } : platform,
-    middleware: [stayInFrame ? shift(typeof stayInFrame == "boolean" ? {} : stayInFrame) : null, allowFlip ? flip(typeof allowFlip == "boolean" ? {} : allowFlip) : null, arrowEl ? arrow({
-      element: arrowEl
-    }) : null, typeof offsetOptions < "u" ? offsetFn(offsetOptions) : null, checkFloating, resize ? sizeMiddleware({
-      apply({
-        availableHeight,
-        availableWidth
-      }) {
-        if (passThrough) return;
-        Object.assign(floatingStyle.current, {
-          maxHeight: `${availableHeight}px`,
-          maxWidth: `${availableWidth}px`
-        });
-        const floatingChild = floating.refs.floating.current?.firstChild;
-        floatingChild && floatingChild instanceof HTMLElement && Object.assign(floatingChild.style, floatingStyle.current);
-      },
-      ...(typeof resize == "object" && resize)
-    }) : null, sizeMiddleware({
-      apply({
-        elements,
-        rects,
-        availableWidth,
-        availableHeight
-      }) {
-        const {
-            width: anchorWidth,
-            height: anchorHeight
-          } = rects.reference,
-          contentStyle = elements.floating.style;
-        contentStyle.setProperty("--tamagui-popper-available-width", `${availableWidth}px`), contentStyle.setProperty("--tamagui-popper-available-height", `${availableHeight}px`), contentStyle.setProperty("--tamagui-popper-anchor-width", `${anchorWidth}px`), contentStyle.setProperty("--tamagui-popper-anchor-height", `${anchorHeight}px`);
-      }
-    }), transformOriginMiddleware({
-      arrowHeight: arrowSize,
-      arrowWidth: arrowSize
-    })].filter(Boolean)
+    middleware: middlewareRef.current
   });
   floating = React.useMemo(() => {
     const og = floating.getFloatingProps;
-    return resize && og && (floating.getFloatingProps = props2 => og({
-      ...props2,
-      style: {
-        ...props2.style,
-        ...floatingStyle.current
-      }
-    })), floating;
+    if (resize && og) floating.getFloatingProps = props2 => {
+      return og({
+        ...props2,
+        style: {
+          ...props2.style,
+          ...floatingStyle.current
+        }
+      });
+    };
+    return floating;
   }, [floating, resize ? JSON.stringify(resize) : null]);
   const {
-      middlewareData
-    } = floating,
-    popperContext = React.useMemo(() => ({
-      size,
-      arrowRef: setArrow,
-      arrowStyle: middlewareData.arrow,
-      onArrowSize: setArrowSize,
-      hasFloating: middlewareData.checkFloating?.hasFloating,
-      transformOrigin: middlewareData.transformOrigin,
-      open: !!open,
-      ...floating
-    }), [open, size, floating.x, floating.y, floating.placement, JSON.stringify(middlewareData.arrow || null), JSON.stringify(middlewareData.transformOrigin || null), floating.isPositioned]);
-  return /* @__PURE__ */jsx(LayoutMeasurementController, {
-    disable: !isOpen,
-    children: /* @__PURE__ */jsx(PopperProvider, {
-      scope,
-      ...popperContext,
+    middlewareData
+  } = floating;
+  return /* @__PURE__ */jsx(PopperProvider, {
+    scope,
+    ...React.useMemo(() => {
+      return {
+        size,
+        arrowRef: setArrow,
+        arrowStyle: middlewareData.arrow,
+        onArrowSize: setArrowSize,
+        hasFloating: middlewareData.checkFloating?.hasFloating,
+        transformOrigin: middlewareData.transformOrigin,
+        open: !!open,
+        ...floating
+      };
+    }, [open, size, floating, JSON.stringify(middlewareData.arrow || null), JSON.stringify(middlewareData.transformOrigin || null)]),
+    children: /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
+      value: null,
       children
     })
   });
 }
-const PopperAnchor = YStack.styleable(function (props, forwardedRef) {
-    const {
-        virtualRef,
-        scope,
-        ...rest
-      } = props,
-      context = usePopperContextSlow(scope),
-      {
-        getReferenceProps,
-        refs,
-        update
-      } = context,
-      ref = React.useRef(null);
-    React.useEffect(() => {
-      virtualRef && refs.setReference(virtualRef.current);
-    }, [virtualRef]);
-    const refProps = getReferenceProps?.({
-        ...rest,
-        ref
-      }) || null,
-      safeSetReference = React.useCallback(node => {
-        startTransition(() => {
-          refs.setReference(node);
-        });
-      }, [refs.setReference]),
-      shouldHandleInHover = isWeb && scope,
-      composedRefs = useComposedRefs(forwardedRef, ref,
-      // web handles this onMouseEnter below so it can support multiple targets + hovering
-      shouldHandleInHover ? void 0 : safeSetReference);
-    return /* @__PURE__ */jsx(TamaguiView, {
-      ...rest,
-      ...refProps,
-      ref: composedRefs,
-      ...(shouldHandleInHover && {
-        // this helps us with handling scoped poppers with many different targets
-        // basically we wait for mouseEnter to ever set a reference and remove it on leave
-        // otherwise floating ui gets confused by having >1 reference
-        onMouseEnter: e => {
-          if (ref.current instanceof HTMLElement) {
-            if (refs.setReference(ref.current), !refProps) return;
-            refProps.onPointerEnter?.(e), update();
-          }
-        },
-        onMouseLeave: e => {
-          refProps?.onMouseLeave?.(e);
-        }
-      })
+const PopperAnchor = YStack.styleable(function PopperAnchor2(props, forwardedRef) {
+  const {
+    virtualRef,
+    scope,
+    ...rest
+  } = props;
+  const context = usePopperContextSlow(scope);
+  const {
+    getReferenceProps,
+    refs,
+    update
+  } = context;
+  const ref = React.useRef(null);
+  const triggerId = React.useId();
+  React.useEffect(() => {
+    if (!scope || !context.triggerElements || !ref.current) return;
+    if (!(ref.current instanceof Element)) return;
+    const el = ref.current;
+    context.triggerElements.add(triggerId, el);
+    return () => {
+      context.triggerElements?.delete(triggerId);
+    };
+  }, [scope, triggerId, context.triggerElements]);
+  React.useEffect(() => {
+    if (virtualRef) {
+      refs.setReference(virtualRef.current);
+      update();
+    }
+  }, [virtualRef]);
+  const refProps = getReferenceProps?.({
+    ...rest,
+    ref
+  }) || null;
+  const safeSetReference = React.useCallback(node => {
+    startTransition(() => {
+      refs.setReference(node);
     });
-  }),
-  PopperContentFrame = styled(YStack, {
-    name: "PopperContent",
-    variants: {
-      unstyled: {
-        false: {
-          size: "$true",
-          backgroundColor: "$background",
-          alignItems: "center"
+  },
+  // it was refs.setRefernce but its stable and refs is undefined on server
+  [refs]);
+  const shouldHandleInHover = isWeb && scope;
+  const composedRefs = useComposedRefs(forwardedRef, ref,
+  // web handles this onMouseEnter below so it can support multiple targets + hovering
+  shouldHandleInHover ? void 0 : safeSetReference);
+  return /* @__PURE__ */jsx(TamaguiView, {
+    ...rest,
+    ...refProps,
+    ref: composedRefs,
+    ...(shouldHandleInHover && {
+      onMouseEnter: e => {
+        const el = e.currentTarget ?? ref.current;
+        if (el instanceof HTMLElement) {
+          flushSync(() => refs.setReference(el));
+          update();
+          if (!refProps) return;
+          refProps.onPointerEnter?.(e);
+          context.onHoverReference?.(e.nativeEvent);
         }
       },
-      size: {
-        "...size": (val, {
-          tokens
-        }) => ({
+      onMouseLeave: e => {
+        context.onLeaveReference?.();
+        refProps?.onMouseLeave?.(e);
+      }
+    })
+  });
+});
+const PopperContentFrame = styled(YStack, {
+  name: "PopperContent",
+  variants: {
+    unstyled: {
+      true: {}
+    },
+    size: {
+      "...size": (val, {
+        tokens
+      }) => {
+        return {
           padding: tokens.space[val],
           borderRadius: tokens.radius[val]
-        })
+        };
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  PopperContent = React.forwardRef(function (props, forwardedRef) {
-    const {
-        scope,
-        animatePosition,
-        enableAnimationForPositionChange,
-        children,
-        passThrough,
-        ...rest
-      } = props,
-      animatePos = animatePosition ?? enableAnimationForPositionChange,
-      context = usePopperContext(scope),
-      {
-        strategy,
-        placement,
-        refs,
-        x,
-        y,
-        getFloatingProps,
-        size,
-        isPositioned,
-        transformOrigin
-      } = context,
-      safeSetFloating = React.useCallback(node => {
-        startTransition(() => {
-          refs.setFloating(node);
-        });
-      }, [refs.setFloating]),
-      contentRefs = useComposedRefs(safeSetFloating, forwardedRef),
-      [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
-    useIsomorphicLayoutEffect(() => {
-      needsMeasure && x && y && setNeedsMeasure(!1);
-    }, [needsMeasure, animatePos, x, y]);
-    const hide = x === 0 && y === 0,
-      disableAnimationProp =
-      // if they want to animate also when re-positioning allow it
-      animatePos === "even-when-repositioning" ? needsMeasure : !isPositioned || needsMeasure,
-      [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
-    React.useEffect(() => {
-      setDisableAnimation(disableAnimationProp);
-    }, [disableAnimationProp]);
-    const frameProps = {
-        ref: contentRefs,
-        ...(hide ? {} : {
-          x: x || 0,
-          y: y || 0
-        }),
-        top: 0,
-        left: 0,
-        position: strategy,
-        opacity: 1,
-        ...(animatePos && {
-          transition: rest.transition,
-          animateOnly: disableAnimation ? [] : rest.animateOnly,
-          // apply animation but disable it on initial render to avoid animating from 0 to the first position
-          animatePresence: !1
-        }),
-        ...(hide && {
-          opacity: 0,
-          animateOnly: []
-        })
-      },
-      {
-        style,
-        ...floatingProps
-      } = getFloatingProps ? getFloatingProps(frameProps) : frameProps,
-      transformOriginStyle = isWeb && transformOrigin ? {
-        transformOrigin: `${transformOrigin.x} ${transformOrigin.y}`
-      } : void 0;
-    return /* @__PURE__ */jsx(TamaguiView, {
+  }
+});
+const PopperContent = React.forwardRef(function PopperContent2(props, forwardedRef) {
+  const isAnimatePosControlled = "animatePosition" in props || "enableAnimationForPositionChange" in props;
+  const {
+    scope,
+    animatePosition,
+    enableAnimationForPositionChange,
+    children,
+    passThrough,
+    unstyled,
+    ...rest
+  } = props;
+  const animatePos = animatePosition ?? enableAnimationForPositionChange;
+  const context = usePopperContext(scope);
+  const {
+    strategy,
+    placement,
+    refs,
+    x,
+    y,
+    getFloatingProps,
+    size,
+    isPositioned,
+    transformOrigin,
+    update
+  } = context;
+  const updateRef = React.useRef(update);
+  updateRef.current = update;
+  const lastNodeRef = React.useRef(null);
+  const safeSetFloating = React.useCallback(node => {
+    const isNewNode = node !== lastNodeRef.current;
+    if (node) {
+      lastNodeRef.current = node;
+      refs.setFloating(node);
+      if (!isNewNode) updateRef.current?.();
+    }
+  }, [refs.setFloating]);
+  React.useEffect(() => {
+    return () => {
+      const ourNode = lastNodeRef.current;
+      if (ourNode && refs.floating.current === ourNode) refs.setFloating(null);
+      lastNodeRef.current = null;
+    };
+  }, []);
+  const contentRefs = useComposedRefs(safeSetFloating, forwardedRef);
+  const [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
+  useIsomorphicLayoutEffect(() => {
+    if (needsMeasure && x && y) setNeedsMeasure(false);
+  }, [needsMeasure, animatePos, x, y]);
+  const hasBeenPositioned = React.useRef(false);
+  const lastGoodPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+  if (x !== 0 || y !== 0) {
+    lastGoodPosition.current = {
+      x,
+      y
+    };
+    if (isPositioned) hasBeenPositioned.current = true;
+  }
+  const brieflyZero = hasBeenPositioned.current && x === 0 && y === 0;
+  const effectiveX = brieflyZero ? lastGoodPosition.current.x : x;
+  const effectiveY = brieflyZero ? lastGoodPosition.current.y : y;
+  const hide = !hasBeenPositioned.current && effectiveX === 0 && effectiveY === 0;
+  const disableAnimationProp = animatePos === "even-when-repositioning" ? needsMeasure : !hasBeenPositioned.current && !isPositioned || needsMeasure;
+  const [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
+  React.useEffect(() => {
+    setDisableAnimation(disableAnimationProp);
+  }, [disableAnimationProp]);
+  const frameProps = {
+    ref: contentRefs,
+    ...(hide ? {} : {
+      x: effectiveX || 0,
+      y: effectiveY || 0
+    }),
+    top: 0,
+    left: 0,
+    position: strategy,
+    opacity: hide ? 0 : 1,
+    ...(isAnimatePosControlled && {
+      transition: animatePos ? rest.transition : void 0,
+      animateOnly: animatePos && !disableAnimation ? rest.animateOnly : [],
+      animatePresence: false
+    })
+  };
+  const {
+    style,
+    ...floatingProps
+  } = getFloatingProps ? getFloatingProps(frameProps) : frameProps;
+  const transformOriginStyle = isWeb && transformOrigin ? {
+    transformOrigin: `${transformOrigin.x} ${transformOrigin.y}`
+  } : void 0;
+  return /* @__PURE__ */jsx(LayoutMeasurementController, {
+    disable: !context.open,
+    children: /* @__PURE__ */jsx(TamaguiView, {
       passThrough,
       ref: contentRefs,
-      contain: "layout style",
+      direction: rest.direction,
       ...(passThrough ? null : floatingProps),
       ...(!passThrough && animatePos && {
-        // marker for animation driver to know this is a popper element
-        // that needs special handling for position animation interruption
         "data-popper-animate-position": "true"
       }),
       children: /* @__PURE__ */jsx(PopperContentFrame, {
         passThrough,
+        unstyled,
         ...(!passThrough && {
           "data-placement": placement,
           "data-strategy": strategy,
@@ -355,121 +445,132 @@ const PopperAnchor = YStack.styleable(function (props, forwardedRef) {
         }),
         children
       }, "popper-content-frame")
-    });
-  }),
-  PopperArrowFrame = styled(YStack, {
-    name: "PopperArrow",
-    variants: {
-      unstyled: {
-        false: {
-          borderColor: "$borderColor",
-          backgroundColor: "$background",
-          position: "relative"
-        }
+    })
+  });
+});
+const PopperArrowFrame = styled(YStack, {
+  name: "PopperArrow",
+  variants: {
+    unstyled: {
+      false: {
+        borderColor: "$borderColor",
+        backgroundColor: "$background",
+        position: "relative"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  PopperArrowOuterFrame = styled(YStack, {
-    name: "PopperArrowOuter",
-    variants: {
-      unstyled: {
-        false: {
-          position: "absolute",
-          zIndex: 1e6,
-          pointerEvents: "none",
-          overflow: "hidden",
-          alignItems: "center",
-          justifyContent: "center"
-        }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const PopperArrowOuterFrame = styled(YStack, {
+  name: "PopperArrowOuter",
+  variants: {
+    unstyled: {
+      false: {
+        position: "absolute",
+        zIndex: 1e6,
+        pointerEvents: "none",
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  opposites = {
-    top: "bottom",
-    right: "left",
-    bottom: "top",
-    left: "right"
   },
-  PopperArrow = React.forwardRef(function (propsIn, forwardedRef) {
-    const {
-        scope,
-        animatePosition,
-        transition,
-        ...rest
-      } = propsIn,
-      props = useProps(rest),
-      {
-        offset,
-        size: sizeProp,
-        borderWidth = 0,
-        ...arrowProps
-      } = props,
-      context = usePopperContext(scope),
-      sizeVal = typeof sizeProp == "number" ? sizeProp : getVariableValue(getSpace(sizeProp ?? context.size, {
-        shift: -2,
-        bounds: [2]
-      })),
-      size = Math.max(0, +sizeVal),
-      {
-        placement
-      } = context,
-      refs = useComposedRefs(context.arrowRef, forwardedRef),
-      x = context.arrowStyle?.x || 0,
-      y = context.arrowStyle?.y || 0,
-      primaryPlacement = placement ? placement.split("-")[0] : "top",
-      arrowStyle = {
-        x,
-        y,
-        width: size,
-        height: size
-      },
-      innerArrowStyle = {},
-      isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
-    if (primaryPlacement) {
-      arrowStyle[isVertical ? "width" : "height"] = size * 2;
-      const oppSide = opposites[primaryPlacement];
-      oppSide && (arrowStyle[oppSide] = -size, innerArrowStyle[oppSide] = size / 2), (oppSide === "top" || oppSide === "bottom") && (arrowStyle.left = 0), (oppSide === "left" || oppSide === "right") && (arrowStyle.top = 0), useIsomorphicLayoutEffect(() => {
-        context.onArrowSize?.(size);
-      }, [size, context.onArrowSize]);
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const PopperArrow = React.forwardRef(function PopperArrow2(propsIn, forwardedRef) {
+  const isAnimatePosControlled = "animatePosition" in propsIn;
+  const {
+    scope,
+    animatePosition,
+    transition,
+    ...rest
+  } = propsIn;
+  const {
+    offset,
+    size: sizeProp,
+    borderWidth = 0,
+    ...arrowProps
+  } = rest;
+  const context = usePopperContext(scope);
+  const sizeVal = typeof sizeProp === "number" ? sizeProp : getVariableValue(getSpace(sizeProp ?? context.size, {
+    shift: -2,
+    bounds: [2]
+  }));
+  const size = Math.max(0, +sizeVal);
+  const {
+    placement
+  } = context;
+  const refs = useComposedRefs(context.arrowRef, forwardedRef);
+  const x = context.arrowStyle?.x || 0;
+  const y = context.arrowStyle?.y || 0;
+  const arrowPositioned = context.arrowStyle != null;
+  const primaryPlacement = placement ? placement.split("-")[0] : "top";
+  const arrowStyle = {
+    x,
+    y,
+    width: size,
+    height: size
+  };
+  const innerArrowStyle = {};
+  const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+  if (primaryPlacement) {
+    arrowStyle[isVertical ? "width" : "height"] = size * 2;
+    const oppSide = opposites[primaryPlacement];
+    if (oppSide) {
+      arrowStyle[oppSide] = -size;
+      innerArrowStyle[oppSide] = size / 2;
     }
-    return /* @__PURE__ */jsx(PopperArrowOuterFrame, {
-      ref: refs,
-      ...arrowStyle,
-      ...(animatePosition && {
-        transition,
-        animateOnly: ["transform"],
-        animatePresence: !1
+    if (oppSide === "top" || oppSide === "bottom") arrowStyle.left = 0;
+    if (oppSide === "left" || oppSide === "right") arrowStyle.top = 0;
+    useIsomorphicLayoutEffect(() => {
+      context.onArrowSize?.(size);
+    }, [size, context.onArrowSize]);
+  }
+  return /* @__PURE__ */jsx(PopperArrowOuterFrame, {
+    ref: refs,
+    ...arrowStyle,
+    ...(!arrowPositioned && {
+      opacity: 0
+    }),
+    ...(isAnimatePosControlled && {
+      transition: animatePosition ? transition : void 0,
+      animateOnly: animatePosition ? ["transform"] : [],
+      animatePresence: false
+    }),
+    children: /* @__PURE__ */jsx(PopperArrowFrame, {
+      width: size,
+      height: size,
+      ...arrowProps,
+      ...innerArrowStyle,
+      rotate: "45deg",
+      ...(primaryPlacement === "bottom" && {
+        borderLeftWidth: borderWidth,
+        borderTopWidth: borderWidth
       }),
-      children: /* @__PURE__ */jsx(PopperArrowFrame, {
-        width: size,
-        height: size,
-        ...arrowProps,
-        ...innerArrowStyle,
-        rotate: "45deg",
-        ...(primaryPlacement === "bottom" && {
-          borderLeftWidth: borderWidth,
-          borderTopWidth: borderWidth
-        }),
-        ...(primaryPlacement === "top" && {
-          borderBottomWidth: borderWidth,
-          borderRightWidth: borderWidth
-        }),
-        ...(primaryPlacement === "right" && {
-          borderLeftWidth: borderWidth,
-          borderBottomWidth: borderWidth
-        }),
-        ...(primaryPlacement === "left" && {
-          borderTopWidth: borderWidth,
-          borderRightWidth: borderWidth
-        })
+      ...(primaryPlacement === "top" && {
+        borderBottomWidth: borderWidth,
+        borderRightWidth: borderWidth
+      }),
+      ...(primaryPlacement === "right" && {
+        borderLeftWidth: borderWidth,
+        borderBottomWidth: borderWidth
+      }),
+      ...(primaryPlacement === "left" && {
+        borderTopWidth: borderWidth,
+        borderRightWidth: borderWidth
       })
-    });
+    })
   });
+});
 export { Popper, PopperAnchor, PopperArrow, PopperArrowFrame, PopperContent, PopperContentFrame, PopperContextFast, PopperContextSlow, PopperPositionContext, PopperProvider, PopperProviderFast, PopperProviderSlow, setupPopper, usePopperContext, usePopperContextSlow };
 //# sourceMappingURL=Popper.mjs.map