@hanzogui/popper 3.0.2 → 7.3.0

package/dist/esm/Popper.native.js

@@ -4,140 +4,138 @@ import { useComposedRefs } from "@hanzogui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@hanzogui/constants";
 import { LayoutMeasurementController, View as GuiView, createStyledContext, getVariableValue, registerLayoutNode, styled } from "@hanzogui/core";
 import { FloatingOverrideContext } from "@hanzogui/floating";
-import { arrow, flip, getOverflowAncestors, offset as offsetFn, platform, shift, useFloating } from "@hanzogui/floating";
+import { arrow, flip, getOverflowAncestors, offset as offsetFn, platform, shift, size as sizeMiddleware, useFloating } from "@hanzogui/floating";
 import { getSpace } from "@hanzogui/get-token";
 import { YStack } from "@hanzogui/stacks";
 import { startTransition } from "@hanzogui/start-transition";
 import * as React from "react";
 import { Keyboard, useWindowDimensions } from "react-native";
 function _instanceof(left, right) {
-  return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) return !!right[Symbol.hasInstance](left);else return left instanceof right;
 }
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var 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 = function (param) {
-    var {
-        scope,
-        children,
-        ...context
-      } = param,
-      fns = React.useRef(context);
-    fns.current = context;
-    var [slowContext] = React.useState(function () {
-      return {
-        refs: context.refs,
-        triggerElements: context.triggerElements,
-        update() {
-          for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) a[_key] = arguments[_key];
-          fns.current.update(...a);
-        },
-        getReferenceProps(p) {
-          var _fns_current_getReferenceProps, _fns_current;
-          return (_fns_current_getReferenceProps = (_fns_current = fns.current).getReferenceProps) === null || _fns_current_getReferenceProps === void 0 ? void 0 : _fns_current_getReferenceProps.call(_fns_current, p);
-        },
-        onHoverReference(e) {
-          var _fns_current_onHoverReference, _fns_current;
-          (_fns_current_onHoverReference = (_fns_current = fns.current).onHoverReference) === null || _fns_current_onHoverReference === void 0 || _fns_current_onHoverReference.call(_fns_current, e);
-        },
-        onLeaveReference() {
-          var _fns_current_onLeaveReference, _fns_current;
-          (_fns_current_onLeaveReference = (_fns_current = fns.current).onLeaveReference) === null || _fns_current_onLeaveReference === void 0 || _fns_current_onLeaveReference.call(_fns_current);
-        }
-      };
-    });
-    return /* @__PURE__ */_jsx(PopperProviderFast, {
+// since we always provide this we can avoid setting here
+{}, "Popper__");
+var PopperPositionContext = createStyledContext;
+var {
+  useStyledContext: usePopperContext,
+  Provider: PopperProviderFast
+} = PopperContextFast;
+var PopperContextSlow = createStyledContext(
+// since we always provide this we can avoid setting here
+{}, "PopperSlow__");
+var {
+  useStyledContext: usePopperContextSlow,
+  Provider: PopperProviderSlow
+} = PopperContextSlow;
+var PopperProvider = function (param) {
+  var {
+    scope,
+    children,
+    ...context
+  } = param;
+  var fns = React.useRef(context);
+  fns.current = context;
+  var [slowContext] = React.useState(function () {
+    return {
+      refs: context.refs,
+      triggerElements: context.triggerElements,
+      update() {
+        for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) a[_key] = arguments[_key];
+        fns.current.update(...a);
+      },
+      getReferenceProps(p) {
+        var _fns_current_getReferenceProps, _fns_current;
+        return (_fns_current_getReferenceProps = (_fns_current = fns.current).getReferenceProps) === null || _fns_current_getReferenceProps === void 0 ? void 0 : _fns_current_getReferenceProps.call(_fns_current, p);
+      },
+      onHoverReference(e) {
+        var _fns_current_onHoverReference, _fns_current;
+        (_fns_current_onHoverReference = (_fns_current = fns.current).onHoverReference) === null || _fns_current_onHoverReference === void 0 || _fns_current_onHoverReference.call(_fns_current, e);
+      },
+      onLeaveReference() {
+        var _fns_current_onLeaveReference, _fns_current;
+        (_fns_current_onLeaveReference = (_fns_current = fns.current).onLeaveReference) === null || _fns_current_onLeaveReference === void 0 || _fns_current_onLeaveReference.call(_fns_current);
+      }
+    };
+  });
+  return /* @__PURE__ */_jsx(PopperProviderFast, {
+    scope,
+    ...context,
+    children: /* @__PURE__ */_jsx(PopperProviderSlow, {
       scope,
-      ...context,
-      children: /* @__PURE__ */_jsx(PopperProviderSlow, {
-        scope,
-        ...slowContext,
-        children
-      })
-    });
-  },
-  checkFloating = {
-    name: "checkFloating",
-    fn(data) {
-      return {
-        data: {
-          hasFloating: !!data.rects.floating.width
-        }
-      };
-    }
-  },
-  setupOptions = {};
+      ...slowContext,
+      children
+    })
+  });
+};
+var checkFloating = {
+  name: "checkFloating",
+  fn(data) {
+    return {
+      data: {
+        hasFloating: !!data.rects.floating.width
+      }
+    };
+  }
+};
+var setupOptions = {};
 function setupPopper(options) {
   Object.assign(setupOptions, options);
 }
-function tamaguiAutoUpdate(reference, floating, update) {
+function guiAutoUpdate(reference, floating, update) {
   update();
   var rafId = requestAnimationFrame(function () {
-      update(), rafId = 0;
-    }),
-    cleanups = [function () {
-      rafId && cancelAnimationFrame(rafId);
-    }];
-  _instanceof(reference, HTMLElement) && cleanups.push(registerLayoutNode(reference, update));
-  var refAncestors = _instanceof(reference, Element) ? getOverflowAncestors(reference) : [],
-    ancestors = [...refAncestors, ...getOverflowAncestors(floating)],
-    uniqueAncestors = [...new Set(ancestors)],
-    _iteratorNormalCompletion = !0,
-    _didIteratorError = !1,
+    update();
+    rafId = 0;
+  });
+  var cleanups = [function () {
+    if (rafId) cancelAnimationFrame(rafId);
+  }];
+  if (_instanceof(reference, HTMLElement)) cleanups.push(registerLayoutNode(reference, update));
+  var ancestors = [...(_instanceof(reference, Element) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)];
+  var uniqueAncestors = [...new Set(ancestors)];
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
     _iteratorError = void 0;
   try {
-    for (var _iterator = uniqueAncestors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-      var ancestor = _step.value;
-      ancestor.addEventListener("scroll", update, {
-        passive: !0
-      });
-    }
+    for (var _iterator = uniqueAncestors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _step.value.addEventListener("scroll", update, {
+      passive: true
+    });
   } catch (err) {
-    _didIteratorError = !0, _iteratorError = err;
+    _didIteratorError = true;
+    _iteratorError = err;
   } finally {
     try {
-      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+      if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
     } finally {
       if (_didIteratorError) throw _iteratorError;
     }
   }
-  return window.addEventListener("resize", update), cleanups.push(function () {
-    var _iteratorNormalCompletion2 = !0,
-      _didIteratorError2 = !1,
+  window.addEventListener("resize", update);
+  cleanups.push(function () {
+    var _iteratorNormalCompletion2 = true,
+      _didIteratorError2 = false,
       _iteratorError2 = void 0;
     try {
-      for (var _iterator2 = uniqueAncestors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
-        var ancestor2 = _step2.value;
-        ancestor2.removeEventListener("scroll", update);
-      }
+      for (var _iterator2 = uniqueAncestors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) _step2.value.removeEventListener("scroll", update);
     } catch (err) {
-      _didIteratorError2 = !0, _iteratorError2 = err;
+      _didIteratorError2 = true;
+      _iteratorError2 = err;
     } finally {
       try {
-        !_iteratorNormalCompletion2 && _iterator2.return != null && _iterator2.return();
+        if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
       } finally {
         if (_didIteratorError2) throw _iteratorError2;
       }
     }
     window.removeEventListener("resize", update);
-  }), function () {
+  });
+  return function () {
     return cleanups.forEach(function (fn) {
       return fn();
     });
@@ -145,437 +143,433 @@ function tamaguiAutoUpdate(reference, floating, update) {
 }
 function Popper(props) {
   var {
-      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,
-    middlewareRef = React.useRef([]);
-  isOpen && (middlewareRef.current = [
-  // order matters: offset first, then flip, then shift, then arrow
-  typeof offsetOptions < "u" ? offsetFn(offsetOptions) : null, allowFlip ? flip(typeof allowFlip == "boolean" ? {} : allowFlip) : null,
-  // NOTE: shift's axis terminology is reversed vs flip/offset:
-  // for top/bottom placements: mainAxis = horizontal, crossAxis = vertical
-  // for left/right placements: mainAxis = vertical, crossAxis = horizontal
-  // default to horizontal shift only (mainAxis: true, crossAxis: false)
-  stayInFrame ? shift({
+    children,
+    size,
+    strategy = "absolute",
+    placement = "bottom",
+    stayInFrame,
+    allowFlip,
+    offset,
+    disableRTL,
+    resize,
+    passThrough,
+    open,
+    scope
+  } = props;
+  var [arrowEl, setArrow] = React.useState(null);
+  var [arrowSize, setArrowSize] = React.useState(0);
+  var offsetOptions = offset !== null && offset !== void 0 ? offset : arrowSize;
+  React.useRef({});
+  var isOpen = passThrough ? false : open !== null && open !== void 0 ? open : true;
+  var 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: !0,
-    crossAxis: !1,
-    ...((typeof stayInFrame > "u" ? "undefined" : _type_of(stayInFrame)) === "object" ? stayInFrame : null)
+    mainAxis: true,
+    crossAxis: false,
+    ...((typeof stayInFrame === "undefined" ? "undefined" : _type_of(stayInFrame)) === "object" ? stayInFrame : null)
   }) : null, arrowEl ? arrow({
     element: arrowEl
-  }) : null, checkFloating, null, null, null].filter(Boolean));
+  }) : null, checkFloating, null, null, null].filter(Boolean);
   var floating = useFloating({
-      open: isOpen,
-      strategy,
-      placement,
-      sameScrollView: !1,
-      // this only takes effect on native
-      whileElementsMounted: isOpen ? tamaguiAutoUpdate : void 0,
-      platform: disableRTL ?? setupOptions.disableRTL ? {
-        ...platform,
-        isRTL(element) {
-          return !1;
-        }
-      } : platform,
-      middleware: middlewareRef.current
-    }),
-    {
-      middlewareData
-    } = floating,
-    dimensions = useWindowDimensions(),
-    [keyboardOpen, setKeyboardOpen] = React.useState(!1);
+    open: isOpen,
+    strategy,
+    placement,
+    sameScrollView: false,
+    whileElementsMounted: !isOpen ? void 0 : guiAutoUpdate,
+    platform: (disableRTL !== null && disableRTL !== void 0 ? disableRTL : setupOptions.disableRTL) ? {
+      ...platform,
+      isRTL(element) {
+        return false;
+      }
+    } : platform,
+    middleware: middlewareRef.current
+  });
+  var {
+    middlewareData
+  } = floating;
+  var dimensions = useWindowDimensions();
+  var [keyboardOpen, setKeyboardOpen] = React.useState(false);
   React.useEffect(function () {
     var showSubscription = Keyboard.addListener("keyboardDidShow", function () {
-        startTransition(function () {
-          setKeyboardOpen(!0);
-        });
-      }),
-      hideSubscription = Keyboard.addListener("keyboardDidHide", function () {
-        startTransition(function () {
-          setKeyboardOpen(!1);
-        });
+      startTransition(function () {
+        setKeyboardOpen(true);
+      });
+    });
+    var hideSubscription = Keyboard.addListener("keyboardDidHide", function () {
+      startTransition(function () {
+        setKeyboardOpen(false);
       });
+    });
     return function () {
-      showSubscription.remove(), hideSubscription.remove();
+      showSubscription.remove();
+      hideSubscription.remove();
     };
-  }, []), useIsomorphicLayoutEffect(function () {
-    passThrough || floating.update();
+  }, []);
+  useIsomorphicLayoutEffect(function () {
+    if (passThrough) return;
+    floating.update();
   }, [passThrough, dimensions, keyboardOpen]);
-  var popperContext = React.useMemo(function () {
-    var _middlewareData_checkFloating;
-    return {
-      size,
-      arrowRef: setArrow,
-      arrowStyle: middlewareData.arrow,
-      onArrowSize: setArrowSize,
-      hasFloating: (_middlewareData_checkFloating = middlewareData.checkFloating) === null || _middlewareData_checkFloating === void 0 ? void 0 : _middlewareData_checkFloating.hasFloating,
-      transformOrigin: middlewareData.transformOrigin,
-      open: !!open,
-      ...floating
-    };
-  }, [open, size, floating, JSON.stringify(middlewareData.arrow || null), JSON.stringify(middlewareData.transformOrigin || null)]);
   return /* @__PURE__ */_jsx(PopperProvider, {
     scope,
-    ...popperContext,
-    children: (
-    /* reset FloatingOverrideContext so it doesn't leak into nested Poppers —
-    each Popper consumes the override for its own useFloating, children
-    should not inherit it (e.g. a Menu inside a Tooltip's tree) */
-    /* @__PURE__ */
-    _jsx(FloatingOverrideContext.Provider, {
+    ...React.useMemo(function () {
+      var _middlewareData_checkFloating;
+      return {
+        size,
+        arrowRef: setArrow,
+        arrowStyle: middlewareData.arrow,
+        onArrowSize: setArrowSize,
+        hasFloating: (_middlewareData_checkFloating = middlewareData.checkFloating) === null || _middlewareData_checkFloating === void 0 ? void 0 : _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
-    }))
+    })
   });
 }
-var PopperAnchor = YStack.styleable(function (props, forwardedRef) {
-    var {
-        virtualRef,
-        scope,
-        ...rest
-      } = props,
-      context = usePopperContextSlow(scope),
-      {
-        getReferenceProps,
-        refs,
-        update
-      } = context,
-      ref = React.useRef(null),
-      triggerId = React.useId();
-    React.useEffect(function () {
-      if (!(!scope || !context.triggerElements || !ref.current) && _instanceof(ref.current, Element)) {
-        var el = ref.current;
-        return context.triggerElements.add(triggerId, el), function () {
-          var _context_triggerElements;
-          (_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 || _context_triggerElements.delete(triggerId);
-        };
-      }
-    }, [scope, triggerId, context.triggerElements]), React.useEffect(function () {
-      virtualRef && (refs.setReference(virtualRef.current), update());
-    }, [virtualRef]);
-    var refProps = getReferenceProps?.({
-        ...rest,
-        ref
-      }) || null,
-      safeSetReference = React.useCallback(function (node) {
-        startTransition(function () {
-          refs.setReference(node);
-        });
-      },
-      // it was refs.setRefernce but its stable and refs is undefined on server
-      [refs]),
-      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(GuiView, {
-      ...rest,
-      ...refProps,
-      ref: composedRefs,
-      ...(shouldHandleInHover && {
-        // scoped poppers with multiple triggers: set the reference on
-        // mouseEnter so floating-ui positions relative to the hovered
-        // trigger, not the last one rendered.
-        //
-        // flushSync is critical here: without it, setReference batches
-        // with React's async state updates and the arrow/content position
-        // computes against the OLD reference element. this causes the
-        // arrow to flash at x=0 (top-left) during trigger switches.
-        // flushSync forces synchronous commit so update() below reads
-        // the correct reference element immediately.
-        onMouseEnter: function (e) {
-          var _e_currentTarget,
-            el = (_e_currentTarget = e.currentTarget) !== null && _e_currentTarget !== void 0 ? _e_currentTarget : ref.current;
-          if (_instanceof(el, HTMLElement)) {
-            var _refProps_onPointerEnter, _context_onHoverReference;
-            if (flushSync(function () {
-              return refs.setReference(el);
-            }), update(), !refProps) return;
-            (_refProps_onPointerEnter = refProps.onPointerEnter) === null || _refProps_onPointerEnter === void 0 || _refProps_onPointerEnter.call(refProps, e), (_context_onHoverReference = context.onHoverReference) === null || _context_onHoverReference === void 0 || _context_onHoverReference.call(context, e.nativeEvent);
-          }
-        },
-        onMouseLeave: function (e) {
-          var _context_onLeaveReference, _refProps_onMouseLeave;
-          (_context_onLeaveReference = context.onLeaveReference) === null || _context_onLeaveReference === void 0 || _context_onLeaveReference.call(context), refProps == null || (_refProps_onMouseLeave = refProps.onMouseLeave) === null || _refProps_onMouseLeave === void 0 || _refProps_onMouseLeave.call(refProps, e);
-        }
-      })
+var PopperAnchor = YStack.styleable(function PopperAnchor2(props, forwardedRef) {
+  var {
+    virtualRef,
+    scope,
+    ...rest
+  } = props;
+  var context = usePopperContextSlow(scope);
+  var {
+    getReferenceProps,
+    refs,
+    update
+  } = context;
+  var ref = React.useRef(null);
+  var triggerId = React.useId();
+  React.useEffect(function () {
+    if (!scope || !context.triggerElements || !ref.current) return;
+    if (!_instanceof(ref.current, Element)) return;
+    var el = ref.current;
+    context.triggerElements.add(triggerId, el);
+    return function () {
+      var _context_triggerElements;
+      (_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 || _context_triggerElements.delete(triggerId);
+    };
+  }, [scope, triggerId, context.triggerElements]);
+  React.useEffect(function () {
+    if (virtualRef) {
+      refs.setReference(virtualRef.current);
+      update();
+    }
+  }, [virtualRef]);
+  var refProps = (getReferenceProps === null || getReferenceProps === void 0 ? void 0 : getReferenceProps({
+    ...rest,
+    ref
+  })) || null;
+  var safeSetReference = React.useCallback(function (node) {
+    startTransition(function () {
+      refs.setReference(node);
     });
-  }),
-  PopperContentFrame = styled(YStack, {
-    name: "PopperContent",
-    variants: {
-      unstyled: {
-        true: {}
-      },
-      size: {
-        "...size": function (val, param) {
-          var {
-            tokens
-          } = param;
-          return {
-            padding: tokens.space[val],
-            borderRadius: tokens.radius[val]
-          };
+  },
+  // it was refs.setRefernce but its stable and refs is undefined on server
+  [refs]);
+  var shouldHandleInHover = isWeb && scope;
+  var composedRefs = useComposedRefs(forwardedRef, ref,
+  // web handles this onMouseEnter below so it can support multiple targets + hovering
+  shouldHandleInHover ? void 0 : safeSetReference);
+  return /* @__PURE__ */_jsx(GuiView, {
+    ...rest,
+    ...refProps,
+    ref: composedRefs,
+    ...(shouldHandleInHover && {
+      onMouseEnter: function (e) {
+        var _e_currentTarget;
+        var el = (_e_currentTarget = e.currentTarget) !== null && _e_currentTarget !== void 0 ? _e_currentTarget : ref.current;
+        if (_instanceof(el, HTMLElement)) {
+          var _refProps_onPointerEnter, _context_onHoverReference;
+          flushSync(function () {
+            return refs.setReference(el);
+          });
+          update();
+          if (!refProps) return;
+          (_refProps_onPointerEnter = refProps.onPointerEnter) === null || _refProps_onPointerEnter === void 0 || _refProps_onPointerEnter.call(refProps, e);
+          (_context_onHoverReference = context.onHoverReference) === null || _context_onHoverReference === void 0 || _context_onHoverReference.call(context, e.nativeEvent);
         }
+      },
+      onMouseLeave: function (e) {
+        var _context_onLeaveReference, _refProps_onMouseLeave;
+        (_context_onLeaveReference = context.onLeaveReference) === null || _context_onLeaveReference === void 0 || _context_onLeaveReference.call(context);
+        refProps === null || refProps === void 0 || (_refProps_onMouseLeave = refProps.onMouseLeave) == null || _refProps_onMouseLeave.call(refProps, e);
+      }
+    })
+  });
+});
+var PopperContentFrame = styled(YStack, {
+  name: "PopperContent",
+  variants: {
+    unstyled: {
+      true: {}
+    },
+    size: {
+      "...size": function (val, param) {
+        var {
+          tokens
+        } = param;
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val]
+        };
       }
     }
-  }),
-  PopperContent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-        scope,
-        animatePosition,
-        enableAnimationForPositionChange,
-        children,
-        passThrough,
-        unstyled,
-        ...rest
-      } = props,
-      animatePos = animatePosition ?? enableAnimationForPositionChange,
-      context = usePopperContext(scope),
-      {
-        strategy,
-        placement,
-        refs,
-        x,
-        y,
-        getFloatingProps,
-        size,
-        isPositioned,
-        transformOrigin,
-        update
-      } = context,
-      updateRef = React.useRef(update);
-    updateRef.current = update;
-    var lastNodeRef = React.useRef(null),
-      safeSetFloating = React.useCallback(function (node) {
-        var isNewNode = node !== lastNodeRef.current;
-        if (node && (lastNodeRef.current = node, refs.setFloating(node), !isNewNode)) {
-          var _updateRef_current;
-          (_updateRef_current = updateRef.current) === null || _updateRef_current === void 0 || _updateRef_current.call(updateRef);
-        }
-      },
-      // null calls are blocked: cycling nulls are transient, genuine unmount
-      // is handled by the useEffect cleanup below
-      [refs.setFloating]);
-    React.useEffect(function () {
-      return function () {
-        var ourNode = lastNodeRef.current;
-        ourNode && refs.floating.current === ourNode && refs.setFloating(null), lastNodeRef.current = null;
-      };
-    }, []);
-    var contentRefs = useComposedRefs(safeSetFloating, forwardedRef),
-      [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
-    useIsomorphicLayoutEffect(function () {
-      needsMeasure && x && y && setNeedsMeasure(!1);
-    }, [needsMeasure, animatePos, x, y]);
-    var hasBeenPositioned = React.useRef(!1),
-      lastGoodPosition = React.useRef({
-        x: 0,
-        y: 0
-      });
-    (x !== 0 || y !== 0) && (lastGoodPosition.current = {
+  }
+});
+var PopperContent = /* @__PURE__ */React.forwardRef(function PopperContent2(props, forwardedRef) {
+  var {
+    scope,
+    animatePosition,
+    enableAnimationForPositionChange,
+    children,
+    passThrough,
+    unstyled,
+    ...rest
+  } = props;
+  var animatePos = animatePosition !== null && animatePosition !== void 0 ? animatePosition : enableAnimationForPositionChange;
+  var context = usePopperContext(scope);
+  var {
+    strategy,
+    placement,
+    refs,
+    x,
+    y,
+    getFloatingProps,
+    size,
+    isPositioned,
+    transformOrigin,
+    update
+  } = context;
+  var updateRef = React.useRef(update);
+  updateRef.current = update;
+  var lastNodeRef = React.useRef(null);
+  var safeSetFloating = React.useCallback(function (node) {
+    var isNewNode = node !== lastNodeRef.current;
+    if (node) {
+      lastNodeRef.current = node;
+      refs.setFloating(node);
+      if (!isNewNode) {
+        var _updateRef_current;
+        (_updateRef_current = updateRef.current) === null || _updateRef_current === void 0 || _updateRef_current.call(updateRef);
+      }
+    }
+  },
+  // null calls are blocked: cycling nulls are transient, genuine unmount
+  // is handled by the useEffect cleanup below
+  [refs.setFloating]);
+  React.useEffect(function () {
+    return function () {
+      var ourNode = lastNodeRef.current;
+      if (ourNode && refs.floating.current === ourNode) refs.setFloating(null);
+      lastNodeRef.current = null;
+    };
+  }, []);
+  var contentRefs = useComposedRefs(safeSetFloating, forwardedRef);
+  var [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
+  useIsomorphicLayoutEffect(function () {
+    if (needsMeasure && x && y) setNeedsMeasure(false);
+  }, [needsMeasure, animatePos, x, y]);
+  var hasBeenPositioned = React.useRef(false);
+  var lastGoodPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+  if (x !== 0 || y !== 0) {
+    lastGoodPosition.current = {
       x,
       y
-    }, isPositioned && (hasBeenPositioned.current = !0));
-    var brieflyZero = hasBeenPositioned.current && x === 0 && y === 0,
-      effectiveX = brieflyZero ? lastGoodPosition.current.x : x,
-      effectiveY = brieflyZero ? lastGoodPosition.current.y : y,
-      hide = !hasBeenPositioned.current && effectiveX === 0 && effectiveY === 0,
-      disableAnimationProp =
-      // if they want to animate also when re-positioning allow it
-      animatePos === "even-when-repositioning" ? needsMeasure : !hasBeenPositioned.current && !isPositioned || needsMeasure,
-      [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
-    React.useEffect(function () {
-      setDisableAnimation(disableAnimationProp);
-    }, [disableAnimationProp]);
-    var positionProps = hide ? {} :
-      // omit x/y when hiding - prevents motion driver from animating from origin
-      {
-        x: effectiveX || 0,
-        y: effectiveY || 0
-      },
-      frameProps = {
-        ref: contentRefs,
-        ...positionProps,
-        top: 0,
-        left: 0,
-        position: strategy,
-        opacity: hide ? 0 : 1,
-        ...(animatePos && {
-          transition: rest.transition,
-          // animateOnly: [] turns off transitions while keeping styles applied,
-          // letting the element move to its position silently before animations start
-          animateOnly: disableAnimation ? [] : rest.animateOnly,
-          animatePresence: !1
-        })
-      },
-      {
-        style,
-        ...floatingProps
-      } = getFloatingProps ? getFloatingProps(frameProps) : frameProps,
-      transformOriginStyle = isWeb && transformOrigin ? {
-        transformOrigin: `${transformOrigin.x} ${transformOrigin.y}`
-      } : void 0;
-    return /* @__PURE__ */_jsx(LayoutMeasurementController, {
-      disable: !context.open,
-      children: /* @__PURE__ */_jsx(GuiView, {
+    };
+    if (isPositioned) hasBeenPositioned.current = true;
+  }
+  var brieflyZero = hasBeenPositioned.current && x === 0 && y === 0;
+  var effectiveX = brieflyZero ? lastGoodPosition.current.x : x;
+  var effectiveY = brieflyZero ? lastGoodPosition.current.y : y;
+  var hide = !hasBeenPositioned.current && effectiveX === 0 && effectiveY === 0;
+  var disableAnimationProp = animatePos === "even-when-repositioning" ? needsMeasure : !hasBeenPositioned.current && !isPositioned || needsMeasure;
+  var [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
+  React.useEffect(function () {
+    setDisableAnimation(disableAnimationProp);
+  }, [disableAnimationProp]);
+  var frameProps = {
+    ref: contentRefs,
+    ...(hide ? {} :
+    // omit x/y when hiding - prevents motion driver from animating from origin
+    {
+      x: effectiveX || 0,
+      y: effectiveY || 0
+    }),
+    top: 0,
+    left: 0,
+    position: strategy,
+    opacity: hide ? 0 : 1,
+    ...(animatePos && {
+      transition: rest.transition,
+      animateOnly: disableAnimation ? [] : rest.animateOnly,
+      animatePresence: false
+    })
+  };
+  var {
+    style,
+    ...floatingProps
+  } = getFloatingProps ? getFloatingProps(frameProps) : frameProps;
+  var transformOriginStyle = isWeb && transformOrigin ? {
+    transformOrigin: `${transformOrigin.x} ${transformOrigin.y}`
+  } : void 0;
+  return /* @__PURE__ */_jsx(LayoutMeasurementController, {
+    disable: !context.open,
+    children: /* @__PURE__ */_jsx(GuiView, {
+      passThrough,
+      ref: contentRefs,
+      direction: rest.direction,
+      ...(passThrough ? null : floatingProps),
+      ...(!passThrough && animatePos && {
+        "data-popper-animate-position": "true"
+      }),
+      children: /* @__PURE__ */_jsx(PopperContentFrame, {
         passThrough,
-        ref: contentRefs,
-        direction: rest.direction,
-        ...(passThrough ? null : floatingProps),
-        ...(!passThrough && animatePos && {
-          "data-popper-animate-position": "true"
+        unstyled,
+        ...(!passThrough && {
+          "data-placement": placement,
+          "data-strategy": strategy,
+          size,
+          ...style,
+          ...transformOriginStyle,
+          ...rest
         }),
-        children: /* @__PURE__ */_jsx(PopperContentFrame, {
-          passThrough,
-          unstyled,
-          ...(!passThrough && {
-            "data-placement": placement,
-            "data-strategy": strategy,
-            size,
-            ...style,
-            ...transformOriginStyle,
-            ...rest
-          }),
-          children
-        }, "popper-content-frame")
-      })
-    });
-  }),
-  PopperArrowFrame = styled(YStack, {
-    name: "PopperArrow",
-    variants: {
-      unstyled: {
-        false: {
-          borderColor: "$borderColor",
-          backgroundColor: "$background",
-          position: "relative"
-        }
+        children
+      }, "popper-content-frame")
+    })
+  });
+});
+var PopperArrowFrame = styled(YStack, {
+  name: "PopperArrow",
+  variants: {
+    unstyled: {
+      false: {
+        borderColor: "$borderColor",
+        backgroundColor: "$background",
+        position: "relative"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.HANZO_GUI_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.GUI_HEADLESS === "1"
+  }
+});
+var PopperArrowOuterFrame = styled(YStack, {
+  name: "PopperArrowOuter",
+  variants: {
+    unstyled: {
+      false: {
+        position: "absolute",
+        zIndex: 1e6,
+        pointerEvents: "none",
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
     }
-  }),
-  opposites = {
-    top: "bottom",
-    right: "left",
-    bottom: "top",
-    left: "right"
   },
-  PopperArrow = /* @__PURE__ */React.forwardRef(function (propsIn, forwardedRef) {
-    var _context_arrowStyle,
-      _context_arrowStyle1,
-      {
-        scope,
-        animatePosition,
-        transition,
-        ...rest
-      } = propsIn,
-      {
-        offset,
-        size: sizeProp,
-        borderWidth = 0,
-        ...arrowProps
-      } = rest,
-      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 = context.arrowStyle) === null || _context_arrowStyle === void 0 ? void 0 : _context_arrowStyle.x) || 0,
-      y = ((_context_arrowStyle1 = context.arrowStyle) === null || _context_arrowStyle1 === void 0 ? void 0 : _context_arrowStyle1.y) || 0,
-      arrowPositioned = context.arrowStyle != null,
-      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;
-      var 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(function () {
-        var _context_onArrowSize;
-        (_context_onArrowSize = context.onArrowSize) === null || _context_onArrowSize === void 0 || _context_onArrowSize.call(context, size);
-      }, [size, context.onArrowSize]);
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+var opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+var PopperArrow = /* @__PURE__ */React.forwardRef(function PopperArrow2(propsIn, forwardedRef) {
+  var _context_arrowStyle, _context_arrowStyle1;
+  var {
+    scope,
+    animatePosition,
+    transition,
+    ...rest
+  } = propsIn;
+  var {
+    offset,
+    size: sizeProp,
+    borderWidth = 0,
+    ...arrowProps
+  } = rest;
+  var context = usePopperContext(scope);
+  var sizeVal = typeof sizeProp === "number" ? sizeProp : getVariableValue(getSpace(sizeProp !== null && sizeProp !== void 0 ? sizeProp : context.size, {
+    shift: -2,
+    bounds: [2]
+  }));
+  var size = Math.max(0, +sizeVal);
+  var {
+    placement
+  } = context;
+  var refs = useComposedRefs(context.arrowRef, forwardedRef);
+  var x = ((_context_arrowStyle = context.arrowStyle) === null || _context_arrowStyle === void 0 ? void 0 : _context_arrowStyle.x) || 0;
+  var y = ((_context_arrowStyle1 = context.arrowStyle) === null || _context_arrowStyle1 === void 0 ? void 0 : _context_arrowStyle1.y) || 0;
+  var arrowPositioned = context.arrowStyle != null;
+  var primaryPlacement = placement ? placement.split("-")[0] : "top";
+  var arrowStyle = {
+    x,
+    y,
+    width: size,
+    height: size
+  };
+  var innerArrowStyle = {};
+  var isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+  if (primaryPlacement) {
+    arrowStyle[isVertical ? "width" : "height"] = size * 2;
+    var oppSide = opposites[primaryPlacement];
+    if (oppSide) {
+      arrowStyle[oppSide] = -size;
+      innerArrowStyle[oppSide] = size / 2;
     }
-    return /* @__PURE__ */_jsx(PopperArrowOuterFrame, {
-      ref: refs,
-      ...arrowStyle,
-      ...(!arrowPositioned && {
-        opacity: 0
+    if (oppSide === "top" || oppSide === "bottom") arrowStyle.left = 0;
+    if (oppSide === "left" || oppSide === "right") arrowStyle.top = 0;
+    useIsomorphicLayoutEffect(function () {
+      var _context_onArrowSize;
+      (_context_onArrowSize = context.onArrowSize) === null || _context_onArrowSize === void 0 || _context_onArrowSize.call(context, size);
+    }, [size, context.onArrowSize]);
+  }
+  return /* @__PURE__ */_jsx(PopperArrowOuterFrame, {
+    ref: refs,
+    ...arrowStyle,
+    ...(!arrowPositioned && {
+      opacity: 0
+    }),
+    ...(animatePosition && {
+      transition,
+      animateOnly: ["transform"],
+      animatePresence: false
+    }),
+    children: /* @__PURE__ */_jsx(PopperArrowFrame, {
+      width: size,
+      height: size,
+      ...arrowProps,
+      ...innerArrowStyle,
+      rotate: "45deg",
+      ...(primaryPlacement === "bottom" && {
+        borderLeftWidth: borderWidth,
+        borderTopWidth: borderWidth
       }),
-      ...(animatePosition && {
-        transition,
-        animateOnly: ["transform"],
-        animatePresence: !1
+      ...(primaryPlacement === "top" && {
+        borderBottomWidth: borderWidth,
+        borderRightWidth: 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 === "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.native.js.map