@tamagui/popper 2.7.7 → 3.0.0-beta.1091.1

package/dist/esm/Popper.mjs

@@ -1,590 +1,474 @@
 import { flushSync } from "react-dom";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { LayoutMeasurementController, View, createStyledContext, getVariableValue, registerLayoutNode, styled } from "@tamagui/core";
+import { LayoutMeasurementController, View, createRefComponent, createStyledContext, createStyledHOC, getVariableValue, registerLayoutNode, styled } from "@tamagui/core";
 import { FloatingOverrideContext, arrow, flip, getOverflowAncestors, offset, platform, shift, size, useFloating } from "@tamagui/floating";
-import { getSpace } from "@tamagui/get-token";
-import { YStack } from "@tamagui/stacks";
+import { getSize } from "@tamagui/get-token";
 import { startTransition } from "@tamagui/start-transition";
 import * as React from "react";
+import { useRepositionOnNative } from "./useRepositionOnNative.mjs";
 import { jsx } from "react/jsx-runtime";
+
 const PopperContextFast = createStyledContext({}, "Popper__");
 const PopperPositionContext = createStyledContext;
-const {
-  useStyledContext: usePopperContext,
-  Provider: PopperProviderFast
-} = PopperContextFast;
+const { useStyledContext: usePopperContext, Provider: PopperProviderFast } = PopperContextFast;
 const PopperContextSlow = createStyledContext({}, "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,
-    ...context,
-    children: /* @__PURE__ */jsx(PopperProviderSlow, {
-      scope,
-      ...slowContext,
-      children
-    })
-  });
+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,
+		...context,
+		children: /* @__PURE__ */ jsx(PopperProviderSlow, {
+			scope,
+			...slowContext,
+			children
+		})
+	});
 };
 const checkFloating = void 0;
 const setupOptions = {};
 function setupPopper(options) {
-  Object.assign(setupOptions, options);
+	Object.assign(setupOptions, options);
 }
 function getSideAndAlignFromPlacement(placement) {
-  const [side, align = "center"] = placement.split("-");
-  return [side, align];
+	const [side, align = "center"] = placement.split("-");
+	return [side, align];
 }
-const transformOriginMiddleware = options => ({
-  name: "transformOrigin",
-  options,
-  fn(data) {
-    const {
-      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
-      }
-    };
-  }
+const transformOriginMiddleware = (options) => ({
+	name: "transformOrigin",
+	options,
+	fn(data) {
+		const { 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
+		} };
+	}
 });
 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));
-  if (typeof ResizeObserver !== "undefined") {
-    let lastWidth = -1;
-    let lastHeight = -1;
-    const ro = new ResizeObserver(entries => {
-      const entry = entries[entries.length - 1];
-      if (!entry) return;
-      const {
-        width,
-        height
-      } = entry.contentRect;
-      if (lastWidth === -1) {
-        lastWidth = width;
-        lastHeight = height;
-        return;
-      }
-      if (width !== lastWidth || height !== lastHeight) {
-        lastWidth = width;
-        lastHeight = height;
-        update();
-      }
-    });
-    ro.observe(floating);
-    cleanups.push(() => ro.disconnect());
-  }
-  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());
+	update();
+	let rafId = requestAnimationFrame(() => {
+		update();
+		rafId = 0;
+	});
+	const cleanups = [() => {
+		if (rafId) cancelAnimationFrame(rafId);
+	}];
+	if (reference instanceof HTMLElement) cleanups.push(registerLayoutNode(reference, update));
+	if (typeof ResizeObserver !== "undefined") {
+		let lastWidth = -1;
+		let lastHeight = -1;
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[entries.length - 1];
+			if (!entry) return;
+			const { width, height } = entry.contentRect;
+			if (lastWidth === -1) {
+				lastWidth = width;
+				lastHeight = height;
+				return;
+			}
+			if (width !== lastWidth || height !== lastHeight) {
+				lastWidth = width;
+				lastHeight = height;
+				update();
+			}
+		});
+		ro.observe(floating);
+		cleanups.push(() => ro.disconnect());
+	}
+	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: size$1,
-    strategy = "absolute",
-    placement = "bottom",
-    stayInFrame,
-    allowFlip,
-    offset: offset$1,
-    disableRTL,
-    resize,
-    passThrough,
-    open,
-    scope
-  } = props;
-  const [arrowEl, setArrow] = React.useState(null);
-  const [arrowSize, setArrowSize] = React.useState(0);
-  const offsetOptions = offset$1 ?? arrowSize;
-  const floatingStyle = React.useRef({});
-  const isOpen = passThrough ? false : open ?? true;
-  const middlewareRef = React.useRef([]);
-  if (isOpen) middlewareRef.current = [typeof offsetOptions !== "undefined" ? offset(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 ? size({
-    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, size({
-    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: false,
-    whileElementsMounted: !isOpen ? void 0 : tamaguiAutoUpdate,
-    platform: disableRTL ?? setupOptions.disableRTL ? {
-      ...platform,
-      isRTL(element) {
-        return false;
-      }
-    } : platform,
-    middleware: middlewareRef.current
-  });
-  floating = React.useMemo(() => {
-    const og = floating.getFloatingProps;
-    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;
-  return /* @__PURE__ */jsx(PopperProvider, {
-    scope,
-    ...React.useMemo(() => {
-      return {
-        size: size$1,
-        arrowRef: setArrow,
-        arrowStyle: middlewareData.arrow,
-        onArrowSize: setArrowSize,
-        hasFloating: middlewareData.checkFloating?.hasFloating,
-        transformOrigin: middlewareData.transformOrigin,
-        open: !!open,
-        ...floating
-      };
-    }, [open, size$1, floating, JSON.stringify(middlewareData.arrow || null), JSON.stringify(middlewareData.transformOrigin || null)]),
-    children: /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
-      value: null,
-      children
-    })
-  });
+	const { children, size: size$1, strategy = "absolute", placement = "bottom", stayInFrame, allowFlip, offset: offset$1, disableRTL, resize, passThrough, open, scope } = props;
+	const [arrowEl, setArrow] = React.useState(null);
+	const [arrowSize, setArrowSize] = React.useState(0);
+	const offsetOptions = offset$1 ?? arrowSize;
+	const floatingStyle = React.useRef({});
+	const isOpen = passThrough ? false : open ?? true;
+	const middlewareRef = React.useRef([]);
+	if (isOpen) middlewareRef.current = [
+		typeof offsetOptions !== "undefined" ? offset(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 ? size({
+			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,
+		size({ 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: false,
+		whileElementsMounted: !isOpen ? void 0 : tamaguiAutoUpdate,
+		platform: disableRTL ?? setupOptions.disableRTL ? {
+			...platform,
+			isRTL(element) {
+				return false;
+			}
+		} : platform,
+		middleware: middlewareRef.current
+	});
+	floating = React.useMemo(() => {
+		const og = floating.getFloatingProps;
+		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;
+	useRepositionOnNative(floating.update, passThrough);
+	return /* @__PURE__ */ jsx(PopperProvider, {
+		scope,
+		...React.useMemo(() => {
+			return {
+				size: size$1,
+				arrowRef: setArrow,
+				arrowStyle: middlewareData.arrow,
+				onArrowSize: setArrowSize,
+				hasFloating: middlewareData.checkFloating?.hasFloating,
+				transformOrigin: middlewareData.transformOrigin,
+				open: !!open,
+				...floating
+			};
+		}, [
+			open,
+			size$1,
+			floating,
+			JSON.stringify(middlewareData.arrow || null),
+			JSON.stringify(middlewareData.transformOrigin || null)
+		]),
+		children: /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, {
+			value: null,
+			children
+		})
+	});
 }
-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);
-    });
-  }, [refs]);
-  const shouldHandleInHover = isWeb && scope;
-  const composedRefs = useComposedRefs(forwardedRef, ref, shouldHandleInHover ? void 0 : safeSetReference);
-  return /* @__PURE__ */jsx(View, {
-    ...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);
-        }
-      },
-      onMouseLeave: e => {
-        context.onLeaveReference?.();
-        refProps?.onMouseLeave?.(e);
-      }
-    })
-  });
+const PopperAnchor = createStyledHOC(View, 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);
+		});
+	}, [refs]);
+	const shouldHandleInHover = isWeb && scope;
+	const composedRefs = useComposedRefs(forwardedRef, ref, shouldHandleInHover ? void 0 : safeSetReference);
+	return /* @__PURE__ */ jsx(View, {
+		...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);
+				}
+			},
+			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]
-        };
-      }
-    }
-  }
+const PopperContentFrame = styled(View, { displayName: "PopperContent" });
+const PopperContent = createRefComponent(function PopperContent2(props, forwardedRef) {
+	const isAnimatePosControlled = "animatePosition" in props;
+	const { scope, animatePosition, children, passThrough, ...rest } = props;
+	const animatePos = animatePosition;
+	const context = usePopperContext(scope);
+	const { strategy, placement, refs, x, y, getFloatingProps, 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 && !disableAnimation ? rest.transition : "none",
+			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(View, {
+			passThrough,
+			ref: contentRefs,
+			direction: rest.direction,
+			...passThrough ? null : floatingProps,
+			...!passThrough && animatePos && { "data-popper-animate-position": "true" },
+			children: /* @__PURE__ */ jsx(PopperContentFrame, {
+				passThrough,
+				...!passThrough && {
+					"data-placement": placement,
+					"data-strategy": strategy,
+					...style,
+					...transformOriginStyle,
+					...rest
+				},
+				children
+			}, "popper-content-frame")
+		})
+	});
 });
-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(View, {
-      passThrough,
-      ref: contentRefs,
-      direction: rest.direction,
-      ...(passThrough ? null : floatingProps),
-      ...(!passThrough && animatePos && {
-        "data-popper-animate-position": "true"
-      }),
-      children: /* @__PURE__ */jsx(PopperContentFrame, {
-        passThrough,
-        unstyled,
-        ...(!passThrough && {
-          "data-placement": placement,
-          "data-strategy": strategy,
-          size,
-          ...style,
-          ...transformOriginStyle,
-          ...rest
-        }),
-        children
-      }, "popper-content-frame")
-    })
-  });
+const PopperArrowFrame = styled(View, {
+	displayName: "PopperArrow",
+	position: "relative"
 });
-const PopperArrowFrame = styled(YStack, {
-  name: "PopperArrow",
-  variants: {
-    unstyled: {
-      false: {
-        borderColor: "$borderColor",
-        backgroundColor: "$background",
-        position: "relative"
-      }
-    }
-  },
-  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"
-  }
+const PopperArrowOuterFrame = styled(View, {
+	displayName: "PopperArrowOuter",
+	position: "absolute",
+	zIndex: 1e6,
+	pointerEvents: "none",
+	overflow: "hidden",
+	alignItems: "center",
+	justifyContent: "center"
 });
 const opposites = {
-  top: "bottom",
-  right: "left",
-  bottom: "top",
-  left: "right"
+	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;
-    }
-    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
-      }),
-      ...(primaryPlacement === "top" && {
-        borderBottomWidth: borderWidth,
-        borderRightWidth: borderWidth
-      }),
-      ...(primaryPlacement === "right" && {
-        borderLeftWidth: borderWidth,
-        borderBottomWidth: borderWidth
-      }),
-      ...(primaryPlacement === "left" && {
-        borderTopWidth: borderWidth,
-        borderRightWidth: borderWidth
-      })
-    })
-  });
+const PopperArrow = createRefComponent(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(getSize(sizeProp ?? context.size ?? true)) * .52 - 11.5;
+	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;
+		}
+		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 ? { transform: transition } : "none",
+			animatePresence: false
+		},
+		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
+			}
+		})
+	});
 });
+
 export { Popper, PopperAnchor, PopperArrow, PopperArrowFrame, PopperContent, PopperContentFrame, PopperContextFast, PopperContextSlow, PopperPositionContext, PopperProvider, PopperProviderFast, PopperProviderSlow, setupPopper, usePopperContext, usePopperContextSlow };
 //# sourceMappingURL=Popper.mjs.map