@multiplatform.one/components 7.4.0 → 7.5.0

package/dist/cjs/Tooltip/index.cjs

@@ -33,132 +33,38 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Tooltip_exports = {};
 __export(Tooltip_exports, {
-  TOOLTIP_COLLISION_PADDING_PX: () => TOOLTIP_COLLISION_PADDING_PX,
-  TOOLTIP_DEFAULT_DELAY_MS: () => TOOLTIP_DEFAULT_DELAY_MS,
-  TOOLTIP_OFFSET_PX: () => TOOLTIP_OFFSET_PX,
-  TOOLTIP_SKIP_DELAY_MS: () => TOOLTIP_SKIP_DELAY_MS,
+  TOOLTIP_COLLISION_PADDING_PX: () => import_tooltipShared2.TOOLTIP_COLLISION_PADDING_PX,
+  TOOLTIP_DEFAULT_DELAY_MS: () => import_tooltipShared2.TOOLTIP_DEFAULT_DELAY_MS,
+  TOOLTIP_NATIVE_LONG_PRESS_MS: () => import_nativePress.TOOLTIP_NATIVE_LONG_PRESS_MS,
+  TOOLTIP_SKIP_DELAY_MS: () => import_tooltipShared2.TOOLTIP_SKIP_DELAY_MS,
   Tooltip: () => Tooltip,
-  __resetTooltipSkipForTests: () => __resetTooltipSkipForTests,
-  noteTooltipClosed: () => noteTooltipClosed,
-  resolveTooltipDelay: () => resolveTooltipDelay,
-  resolveTooltipPadRecipe: () => resolveTooltipPadRecipe,
-  resolveTooltipSizeRecipe: () => resolveTooltipSizeRecipe,
-  tooltipPadRecipes: () => tooltipPadRecipes,
-  tooltipSizeRecipes: () => tooltipSizeRecipes,
-  wrapTooltipContent: () => wrapTooltipContent
+  TooltipArrow: () => import_tooltipShared2.TooltipArrow,
+  TooltipContent: () => import_tooltipShared2.TooltipContent,
+  TooltipText: () => import_tooltipShared2.TooltipText,
+  __resetTooltipSkipForTests: () => import_tooltipShared2.__resetTooltipSkipForTests,
+  createNativeTooltipPressHandlers: () => import_nativePress.createNativeTooltipPressHandlers,
+  noteTooltipClosed: () => import_tooltipShared2.noteTooltipClosed,
+  resolveTooltipDelay: () => import_tooltipShared2.resolveTooltipDelay,
+  resolveTooltipPadRecipe: () => import_tooltipShared2.resolveTooltipPadRecipe,
+  resolveTooltipSizeRecipe: () => import_tooltipShared2.resolveTooltipSizeRecipe,
+  tooltipPadRecipes: () => import_tooltipShared2.tooltipPadRecipes,
+  tooltipSizeRecipes: () => import_tooltipShared2.tooltipSizeRecipes,
+  wrapTooltipContent: () => import_tooltipShared2.wrapTooltipContent
 });
 module.exports = __toCommonJS(Tooltip_exports);
 var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = __toESM(require("react"));
 var import_tamagui = require("tamagui");
-var import_textRidesText = require("../shared/textRidesText.cjs");
+var import_tooltipShared = require("./tooltipShared.cjs");
+var import_tooltipShared2 = require("./tooltipShared.cjs");
+var import_nativePress = require("./nativePress.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const tooltipSizeRecipes = {
-  small: {
-    maxWidth: 160
-  },
-  medium: {
-    maxWidth: 250
-  },
-  large: {
-    maxWidth: 320
-  }
-};
-const tooltipPadRecipes = {
-  small: {
-    paddingHorizontal: "$1.5",
-    paddingVertical: "$1"
-  },
-  medium: {
-    paddingHorizontal: "$2",
-    paddingVertical: "$1.5"
-  },
-  large: {
-    paddingHorizontal: "$3",
-    paddingVertical: "$2"
-  }
-};
-const TOOLTIP_OFFSET_PX = 4;
-const TOOLTIP_COLLISION_PADDING_PX = 8;
-const TOOLTIP_SKIP_DELAY_MS = 300;
-const TOOLTIP_DEFAULT_DELAY_MS = 300;
-let tooltipSkipUntil = 0;
-const tooltipSkipListeners = /* @__PURE__ */new Set();
-function noteTooltipClosed(now = Date.now()) {
-  tooltipSkipUntil = now + TOOLTIP_SKIP_DELAY_MS;
-  for (const listener of tooltipSkipListeners) listener();
-}
-function resolveTooltipDelay(delay, now = Date.now()) {
-  return now < tooltipSkipUntil ? 0 : delay;
-}
-function resolveTooltipSizeRecipe(size) {
-  return tooltipSizeRecipes[size] ?? tooltipSizeRecipes.medium;
-}
-function resolveTooltipPadRecipe(space) {
-  return tooltipPadRecipes[space] ?? tooltipPadRecipes.medium;
-}
-function __resetTooltipSkipForTests() {
-  tooltipSkipUntil = 0;
-}
-function useTooltipSkipDelay(delay) {
-  const [, bump] = import_react.default.useState(0);
-  import_react.default.useEffect(() => {
-    const listener = () => bump(n => n + 1);
-    tooltipSkipListeners.add(listener);
-    return () => {
-      tooltipSkipListeners.delete(listener);
-    };
-  }, []);
-  return resolveTooltipDelay(delay);
-}
-const TooltipContent = (0, import_tamagui.styled)(import_tamagui.Tooltip.Content, {
-  name: "TooltipContent",
-  // Surface, radius, elevation, pad, and type come from knob recipes on
-  // the instance (LC-18). enterStyle/exitStyle need a transition token (LC-24).
-  opacity: 1,
-  enterStyle: {
-    opacity: 0,
-    y: -4,
-    scale: 0.96
-  },
-  exitStyle: {
-    opacity: 0,
-    y: -4,
-    scale: 0.96
-  }
-});
-const TooltipArrow = (0, import_tamagui.styled)(import_tamagui.Tooltip.Arrow, {
-  name: "TooltipArrow",
-  backgroundColor: "$color1",
-  borderColor: "$color1"
-});
-const TooltipText = (0, import_tamagui.styled)(import_tamagui.Text, {
-  name: "TooltipText"
-});
-function wrapTooltipContent(content, bodyProps) {
-  return (0, import_textRidesText.wrapBareTextChildren)(content, (label, key) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(TooltipText, {
-    ...bodyProps,
-    children: label
-  }, key));
-}
-function resolveThemeColor(token, fallback) {
-  const raw = token?.val ?? token?.get?.() ?? fallback;
-  if (typeof raw === "string" && raw.startsWith("var(") && typeof document !== "undefined") {
-    const name = raw.slice(4, -1).trim();
-    const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-    if (value) return value;
-  }
-  return typeof raw === "string" ? raw : fallback;
-}
-function preventTooltipFocus(event) {
-  event.preventDefault?.();
-}
 function Tooltip({
   children,
   content,
   placement = "top",
-  delay = TOOLTIP_DEFAULT_DELAY_MS,
+  delay = import_tooltipShared.TOOLTIP_DEFAULT_DELAY_MS,
   disabled = false,
   open: openProp,
   onOpenChange: onOpenChangeProp
@@ -169,17 +75,17 @@ function Tooltip({
     component: "Tooltip"
   });
   const theme = (0, import_tamagui.useTheme)();
-  const surfaceFill = resolveThemeColor(theme.color1, "$color1");
-  const pad = resolveTooltipPadRecipe(knobProps.space);
-  const sizeRecipe = resolveTooltipSizeRecipe(knobProps.size);
-  const delayMs = useTooltipSkipDelay(delay);
+  const surfaceFill = (0, import_tooltipShared.resolveThemeColor)(theme.color1, "$color1");
+  const pad = (0, import_tooltipShared.resolveTooltipPadRecipe)(knobProps.space);
+  const sizeRecipe = (0, import_tooltipShared.resolveTooltipSizeRecipe)(knobProps.size);
+  const delayMs = (0, import_tooltipShared.useTooltipSkipDelay)(delay);
   const [uncontrolledOpen, setUncontrolledOpen] = import_react.default.useState(false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : uncontrolledOpen;
   const setOpen = import_react.default.useCallback(next => {
     if (!isControlled) setUncontrolledOpen(next);
     onOpenChangeProp?.(next);
-    if (!next) noteTooltipClosed();
+    if (!next) (0, import_tooltipShared.noteTooltipClosed)();
   }, [isControlled, onOpenChangeProp]);
   if (import_react.default.isValidElement(children)) {
     const childProps = children.props;
@@ -224,14 +130,14 @@ function Tooltip({
       close: 0
     },
     restMs: 100,
-    offset: TOOLTIP_OFFSET_PX,
+    offset: import_theme.OVERLAY_ANCHOR_GAP,
     zIndex: import_forms.zIndex.dropdown,
     open,
     onOpenChange: setOpen,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tooltip.Trigger, {
       asChild: true,
       children: trigger
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TooltipContent, {
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tooltipShared.TooltipContent, {
       ...elevated,
       paddingHorizontal: pad.paddingHorizontal,
       paddingVertical: pad.paddingVertical,
@@ -243,16 +149,16 @@ function Tooltip({
       "data-tooltip-space": knobProps.space,
       "data-tooltip-density": knobProps.density,
       "data-tooltip-fill": surfaceFill,
-      onOpenAutoFocus: preventTooltipFocus,
-      onCloseAutoFocus: preventTooltipFocus,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TooltipArrow, {
+      onOpenAutoFocus: import_tooltipShared.preventTooltipFocus,
+      onCloseAutoFocus: import_tooltipShared.preventTooltipFocus,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tooltipShared.TooltipArrow, {
         backgroundColor: surfaceFill,
         borderColor: surfaceFill,
         style: {
           backgroundColor: surfaceFill,
           borderColor: surfaceFill
         }
-      }), wrapTooltipContent(content, {
+      }), (0, import_tooltipShared.wrapTooltipContent)(content, {
         ...knobProps.body,
         ...knobProps.label,
         color: "$color12",
@@ -261,8 +167,8 @@ function Tooltip({
     })]
   });
 }
-Tooltip.Content = TooltipContent;
-Tooltip.Arrow = TooltipArrow;
-Tooltip.Text = TooltipText;
+Tooltip.Content = import_tooltipShared.TooltipContent;
+Tooltip.Arrow = import_tooltipShared.TooltipArrow;
+Tooltip.Text = import_tooltipShared.TooltipText;
 Tooltip.Trigger = import_tamagui.Tooltip.Trigger;
 Tooltip.Group = import_tamagui.TooltipGroup;

package/dist/cjs/Tooltip/index.native.js

@@ -33,169 +33,43 @@ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
-var Tooltip_exports = {};
-__export(Tooltip_exports, {
-  TOOLTIP_COLLISION_PADDING_PX: () => TOOLTIP_COLLISION_PADDING_PX,
-  TOOLTIP_DEFAULT_DELAY_MS: () => TOOLTIP_DEFAULT_DELAY_MS,
-  TOOLTIP_OFFSET_PX: () => TOOLTIP_OFFSET_PX,
-  TOOLTIP_SKIP_DELAY_MS: () => TOOLTIP_SKIP_DELAY_MS,
+var index_native_exports = {};
+__export(index_native_exports, {
+  TOOLTIP_COLLISION_PADDING_PX: () => import_tooltipShared2.TOOLTIP_COLLISION_PADDING_PX,
+  TOOLTIP_DEFAULT_DELAY_MS: () => import_tooltipShared2.TOOLTIP_DEFAULT_DELAY_MS,
+  TOOLTIP_NATIVE_LONG_PRESS_MS: () => import_nativePress2.TOOLTIP_NATIVE_LONG_PRESS_MS,
+  TOOLTIP_SKIP_DELAY_MS: () => import_tooltipShared2.TOOLTIP_SKIP_DELAY_MS,
   Tooltip: () => Tooltip,
-  __resetTooltipSkipForTests: () => __resetTooltipSkipForTests,
-  noteTooltipClosed: () => noteTooltipClosed,
-  resolveTooltipDelay: () => resolveTooltipDelay,
-  resolveTooltipPadRecipe: () => resolveTooltipPadRecipe,
-  resolveTooltipSizeRecipe: () => resolveTooltipSizeRecipe,
-  tooltipPadRecipes: () => tooltipPadRecipes,
-  tooltipSizeRecipes: () => tooltipSizeRecipes,
-  wrapTooltipContent: () => wrapTooltipContent
+  TooltipArrow: () => import_tooltipShared2.TooltipArrow,
+  TooltipContent: () => import_tooltipShared2.TooltipContent,
+  TooltipText: () => import_tooltipShared2.TooltipText,
+  __resetTooltipSkipForTests: () => import_tooltipShared2.__resetTooltipSkipForTests,
+  createNativeTooltipPressHandlers: () => import_nativePress2.createNativeTooltipPressHandlers,
+  noteTooltipClosed: () => import_tooltipShared2.noteTooltipClosed,
+  resolveTooltipDelay: () => import_tooltipShared2.resolveTooltipDelay,
+  resolveTooltipPadRecipe: () => import_tooltipShared2.resolveTooltipPadRecipe,
+  resolveTooltipSizeRecipe: () => import_tooltipShared2.resolveTooltipSizeRecipe,
+  tooltipPadRecipes: () => import_tooltipShared2.tooltipPadRecipes,
+  tooltipSizeRecipes: () => import_tooltipShared2.tooltipSizeRecipes,
+  wrapTooltipContent: () => import_tooltipShared2.wrapTooltipContent
 });
-module.exports = __toCommonJS(Tooltip_exports);
+module.exports = __toCommonJS(index_native_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
-var import_textRidesText = require("../shared/textRidesText.native.js");
-var tooltipSizeRecipes = {
-  small: {
-    maxWidth: 160
-  },
-  medium: {
-    maxWidth: 250
-  },
-  large: {
-    maxWidth: 320
-  }
-};
-var tooltipPadRecipes = {
-  small: {
-    paddingHorizontal: "$1.5",
-    paddingVertical: "$1"
-  },
-  medium: {
-    paddingHorizontal: "$2",
-    paddingVertical: "$1.5"
-  },
-  large: {
-    paddingHorizontal: "$3",
-    paddingVertical: "$2"
-  }
-};
-var TOOLTIP_OFFSET_PX = 4;
-var TOOLTIP_COLLISION_PADDING_PX = 8;
-var TOOLTIP_SKIP_DELAY_MS = 300;
-var TOOLTIP_DEFAULT_DELAY_MS = 300;
-var tooltipSkipUntil = 0;
-var tooltipSkipListeners = /* @__PURE__ */new Set();
-function noteTooltipClosed() {
-  var now = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Date.now();
-  tooltipSkipUntil = now + TOOLTIP_SKIP_DELAY_MS;
-  var _iteratorNormalCompletion = true,
-    _didIteratorError = false,
-    _iteratorError = void 0;
-  try {
-    for (var _iterator = tooltipSkipListeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var listener = _step.value;
-      listener();
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return != null) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
-  }
-}
-function resolveTooltipDelay(delay) {
-  var now = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : Date.now();
-  return now < tooltipSkipUntil ? 0 : delay;
-}
-function resolveTooltipSizeRecipe(size) {
-  var _tooltipSizeRecipes_size;
-  return (_tooltipSizeRecipes_size = tooltipSizeRecipes[size]) !== null && _tooltipSizeRecipes_size !== void 0 ? _tooltipSizeRecipes_size : tooltipSizeRecipes.medium;
-}
-function resolveTooltipPadRecipe(space) {
-  var _tooltipPadRecipes_space;
-  return (_tooltipPadRecipes_space = tooltipPadRecipes[space]) !== null && _tooltipPadRecipes_space !== void 0 ? _tooltipPadRecipes_space : tooltipPadRecipes.medium;
-}
-function __resetTooltipSkipForTests() {
-  tooltipSkipUntil = 0;
-}
-function useTooltipSkipDelay(delay) {
-  var [, bump] = import_react.default.useState(0);
-  import_react.default.useEffect(function () {
-    var listener = function listener2() {
-      return bump(function (n) {
-        return n + 1;
-      });
-    };
-    tooltipSkipListeners.add(listener);
-    return function () {
-      tooltipSkipListeners.delete(listener);
-    };
-  }, []);
-  return resolveTooltipDelay(delay);
-}
-var TooltipContent = (0, import_tamagui.styled)(import_tamagui.Tooltip.Content, {
-  name: "TooltipContent",
-  // Surface, radius, elevation, pad, and type come from knob recipes on
-  // the instance (LC-18). enterStyle/exitStyle need a transition token (LC-24).
-  opacity: 1,
-  enterStyle: {
-    opacity: 0,
-    y: -4,
-    scale: 0.96
-  },
-  exitStyle: {
-    opacity: 0,
-    y: -4,
-    scale: 0.96
-  }
-});
-var TooltipArrow = (0, import_tamagui.styled)(import_tamagui.Tooltip.Arrow, {
-  name: "TooltipArrow",
-  backgroundColor: "$color1",
-  borderColor: "$color1"
-});
-var TooltipText = (0, import_tamagui.styled)(import_tamagui.Text, {
-  name: "TooltipText"
-});
-function wrapTooltipContent(content, bodyProps) {
-  return (0, import_textRidesText.wrapBareTextChildren)(content, function (label, key) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TooltipText, {
-      ...bodyProps,
-      children: label
-    }, key);
-  });
-}
-function resolveThemeColor(token, fallback) {
-  var _ref, _ref1;
-  var _token_get;
-  var raw = (_ref = (_ref1 = token === null || token === void 0 ? void 0 : token.val) !== null && _ref1 !== void 0 ? _ref1 : token === null || token === void 0 ? void 0 : (_token_get = token.get) === null || _token_get === void 0 ? void 0 : _token_get.call(token)) !== null && _ref !== void 0 ? _ref : fallback;
-  if (typeof raw === "string" && raw.startsWith("var(") && typeof document !== "undefined") {
-    var name = raw.slice(4, -1).trim();
-    var value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-    if (value) return value;
-  }
-  return typeof raw === "string" ? raw : fallback;
-}
-function preventTooltipFocus(event) {
-  var _event_preventDefault;
-  (_event_preventDefault = event.preventDefault) === null || _event_preventDefault === void 0 ? void 0 : _event_preventDefault.call(event);
-}
+var import_nativePress = require("./nativePress.native.js");
+var import_tooltipShared = require("./tooltipShared.native.js");
+var import_tooltipShared2 = require("./tooltipShared.native.js");
+var import_nativePress2 = require("./nativePress.native.js");
 function Tooltip(param) {
   var {
     children,
     content,
     placement = "top",
-    delay = TOOLTIP_DEFAULT_DELAY_MS,
+    delay = import_nativePress.TOOLTIP_NATIVE_LONG_PRESS_MS,
     disabled = false,
     open: openProp,
     onOpenChange: onOpenChangeProp
@@ -206,18 +80,38 @@ function Tooltip(param) {
     component: "Tooltip"
   });
   var theme = (0, import_tamagui.useTheme)();
-  var surfaceFill = resolveThemeColor(theme.color1, "$color1");
-  var pad = resolveTooltipPadRecipe(knobProps.space);
-  var sizeRecipe = resolveTooltipSizeRecipe(knobProps.size);
-  var delayMs = useTooltipSkipDelay(delay);
+  var surfaceFill = (0, import_tooltipShared.resolveThemeColor)(theme.color1, "$color1");
+  var pad = (0, import_tooltipShared.resolveTooltipPadRecipe)(knobProps.space);
+  var sizeRecipe = (0, import_tooltipShared.resolveTooltipSizeRecipe)(knobProps.size);
   var [uncontrolledOpen, setUncontrolledOpen] = import_react.default.useState(false);
   var isControlled = openProp !== void 0;
   var open = isControlled ? openProp : uncontrolledOpen;
+  var [outsideArmed, setOutsideArmed] = import_react.default.useState(false);
   var setOpen = import_react.default.useCallback(function (next) {
     if (!isControlled) setUncontrolledOpen(next);
     onOpenChangeProp === null || onOpenChangeProp === void 0 ? void 0 : onOpenChangeProp(next);
-    if (!next) noteTooltipClosed();
+    if (!next) (0, import_tooltipShared.noteTooltipClosed)();
   }, [isControlled, onOpenChangeProp]);
+  var press = import_react.default.useMemo(function () {
+    return (0, import_nativePress.createNativeTooltipPressHandlers)(setOpen, delay);
+  }, [setOpen, delay]);
+  import_react.default.useEffect(function () {
+    return function () {
+      return press.dispose();
+    };
+  }, [press]);
+  import_react.default.useEffect(function () {
+    if (!open) {
+      setOutsideArmed(false);
+      return;
+    }
+    var arm = setTimeout(function () {
+      return setOutsideArmed(true);
+    }, 50);
+    return function () {
+      return clearTimeout(arm);
+    };
+  }, [open]);
   if (/* @__PURE__ */import_react.default.isValidElement(children)) {
     var childProps = children.props;
     var childDisabled = childProps.disabled === true || childProps["aria-disabled"] === true || childProps["aria-disabled"] === "true";
@@ -226,30 +120,22 @@ function Tooltip(param) {
       childDisabled
     });
   }
-  import_react.default.useEffect(function () {
-    if (!open || typeof document === "undefined") return;
-    var onKeyDown = function onKeyDown2(event) {
-      if (event.key !== "Escape") return;
-      event.stopPropagation();
-      setOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return function () {
-      return document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open, setOpen]);
   var trigger = /* @__PURE__ */import_react.default.isValidElement(children) ? /* @__PURE__ */import_react.default.cloneElement(children, {
-    onFocus: function onFocus(e) {
-      var _children_props_onFocus, _children_props, _e_target;
-      (_children_props_onFocus = (_children_props = children.props).onFocus) === null || _children_props_onFocus === void 0 ? void 0 : _children_props_onFocus.call(_children_props, e);
-      if (typeof ((_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.matches) !== "function" || e.target.matches(":focus-visible")) {
-        setOpen(true);
-      }
+    delayLongPress: delay,
+    onPressIn: function onPressIn(event) {
+      var _children_props_onPressIn, _children_props;
+      (_children_props_onPressIn = (_children_props = children.props).onPressIn) === null || _children_props_onPressIn === void 0 ? void 0 : _children_props_onPressIn.call(_children_props, event);
+      press.pressIn();
     },
-    onBlur: function onBlur(e) {
-      var _children_props_onBlur, _children_props;
-      (_children_props_onBlur = (_children_props = children.props).onBlur) === null || _children_props_onBlur === void 0 ? void 0 : _children_props_onBlur.call(_children_props, e);
-      setOpen(false);
+    onPressOut: function onPressOut(event) {
+      var _children_props_onPressOut, _children_props;
+      (_children_props_onPressOut = (_children_props = children.props).onPressOut) === null || _children_props_onPressOut === void 0 ? void 0 : _children_props_onPressOut.call(_children_props, event);
+      press.pressOut();
+    },
+    onLongPress: function onLongPress(event) {
+      var _children_props_onLongPress, _children_props;
+      (_children_props_onLongPress = (_children_props = children.props).onLongPress) === null || _children_props_onLongPress === void 0 ? void 0 : _children_props_onLongPress.call(_children_props, event);
+      press.longPress();
     }
   }) : children;
   if (disabled) {
@@ -258,54 +144,64 @@ function Tooltip(param) {
     });
   }
   var elevated = knobProps.elevatedSurface;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tooltip, {
-    placement,
-    delay: {
-      open: delayMs,
-      close: 0
-    },
-    restMs: 100,
-    offset: TOOLTIP_OFFSET_PX,
-    zIndex: import_forms.zIndex.dropdown,
-    open,
-    onOpenChange: setOpen,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tooltip.Trigger, {
-      asChild: true,
-      children: trigger
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TooltipContent, {
-      ...elevated,
-      paddingHorizontal: pad.paddingHorizontal,
-      paddingVertical: pad.paddingVertical,
-      maxWidth: sizeRecipe.maxWidth,
-      transition: knobProps.transition,
-      role: "tooltip",
-      "data-tooltip": "content",
-      "data-tooltip-size": knobProps.size,
-      "data-tooltip-space": knobProps.space,
-      "data-tooltip-density": knobProps.density,
-      "data-tooltip-fill": surfaceFill,
-      onOpenAutoFocus: preventTooltipFocus,
-      onCloseAutoFocus: preventTooltipFocus,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TooltipArrow, {
-        backgroundColor: surfaceFill,
-        borderColor: surfaceFill,
-        style: {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [open ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Portal, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+        accessibilityLabel: "Dismiss tooltip",
+        disabled: !outsideArmed,
+        onPress: function onPress() {
+          if (outsideArmed) press.tapOutside();
+        },
+        style: [import_react_native.StyleSheet.absoluteFill, {
+          zIndex: import_forms.zIndex.dropdown - 1
+        }]
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tooltip, {
+      placement,
+      delay: 0,
+      restMs: 0,
+      offset: import_theme.OVERLAY_ANCHOR_GAP,
+      zIndex: import_forms.zIndex.dropdown,
+      open,
+      onOpenChange: setOpen,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tooltip.Trigger, {
+        asChild: true,
+        children: trigger
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tooltipShared.TooltipContent, {
+        ...elevated,
+        paddingHorizontal: pad.paddingHorizontal,
+        paddingVertical: pad.paddingVertical,
+        maxWidth: sizeRecipe.maxWidth,
+        transition: knobProps.transition,
+        role: "tooltip",
+        "data-tooltip": "content",
+        "data-tooltip-size": knobProps.size,
+        "data-tooltip-space": knobProps.space,
+        "data-tooltip-density": knobProps.density,
+        "data-tooltip-fill": surfaceFill,
+        pointerEvents: "none",
+        onOpenAutoFocus: import_tooltipShared.preventTooltipFocus,
+        onCloseAutoFocus: import_tooltipShared.preventTooltipFocus,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tooltipShared.TooltipArrow, {
           backgroundColor: surfaceFill,
-          borderColor: surfaceFill
-        }
-      }), /* Nested type: label (size) + body family/weight. $color12 clears AA at caption size. */
-      wrapTooltipContent(content, {
-        ...knobProps.body,
-        ...knobProps.label,
-        color: "$color12",
-        lineHeight: knobProps.label.fontSize
+          borderColor: surfaceFill,
+          style: {
+            backgroundColor: surfaceFill,
+            borderColor: surfaceFill
+          }
+        }), (0, import_tooltipShared.wrapTooltipContent)(content, {
+          ...knobProps.body,
+          ...knobProps.label,
+          color: "$color12",
+          lineHeight: knobProps.label.fontSize
+        })]
       })]
     })]
   });
 }
-Tooltip.Content = TooltipContent;
-Tooltip.Arrow = TooltipArrow;
-Tooltip.Text = TooltipText;
+Tooltip.Content = import_tooltipShared.TooltipContent;
+Tooltip.Arrow = import_tooltipShared.TooltipArrow;
+Tooltip.Text = import_tooltipShared.TooltipText;
 Tooltip.Trigger = import_tamagui.Tooltip.Trigger;
 Tooltip.Group = import_tamagui.TooltipGroup;
 //# sourceMappingURL=index.native.js.map