@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

package/dist/esm/components/core/ThreeDotPopover.js

@@ -1,37 +1,28 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useCallback, useId } from 'react';
 import { MoreVertical } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import ActionMenuSurface from './menu/ActionMenuSurface.js';
+import { renderIcon } from './menu/menuItems.js';
 
-var _excluded = ["items", "trigger", "className", "menuClass", "menuItemClass", "closeOnSelect", "ariaLabel", "wrapperClassName"];
+var _excluded = ["items", "trigger", "className", "menuClass", "menuItemClass", "closeOnSelect", "ariaLabel", "wrapperClassName", "presentation", "cancelLabel"];
 /**
- * ThreeDotPopover (Simple)
+ * ThreeDotPopover
  *
- * A minimal three-dot popover for your UI library.
+ * A kebab (three-dot) button that opens an action menu.
  *
- * Features (simple):
- * - Minimal, single-file React component (no animation libs, no portals).
- * - Click trigger toggles menu (default three-dot icon or custom trigger node).
- * - Close on outside click and Escape key.
- * - Menu items: { key, label, icon?, onClick?, disabled?, destructive? }.
+ * - Desktop (`presentation="popover"`): a portaled floating `role="menu"`
+ *   that flips/shifts to stay on screen, with roving focus (ArrowUp/Down,
+ *   Home/End, typeahead). Escape closes and returns focus to the trigger.
+ * - Phones (`presentation="sheet"`): an iOS-style action sheet with a
+ *   separate Cancel button.
+ * - `presentation="auto"` (default) picks the sheet on small touch screens.
  *
- * Props:
- * - items: Array of menu item objects (see above)
- * - trigger: optional React node to use as trigger (falls back to three-dot button)
- * - className: additional class for trigger wrapper
- * - menuClass: additional class for menu container
- * - menuItemClass: additional class for every menu item
- * - closeOnSelect: boolean (default true)
- *
- * Example:
- * const items = [
- *   { key: 'edit', label: 'Edit', icon: Edit2, onClick: () => {} },
- *   { key: 'view', label: 'View', icon: Eye, onClick: () => {} },
- *   { key: 'delete', label: 'Delete', destructive: true, onClick: () => {} },
- * ];
- * <ThreeDotPopoverSimple items={items} />
+ * Items: { key, label, icon?, onClick?, disabled?, destructive?, tone? }.
+ * `tone: 'destructive'` and `destructive: true` are equivalent.
  */
 var ThreeDotPopoverSimple = /*#__PURE__*/forwardRef(function ThreeDotPopoverSimple(_ref, ref) {
   var _ref$items = _ref.items,
@@ -50,108 +41,111 @@ var ThreeDotPopoverSimple = /*#__PURE__*/forwardRef(function ThreeDotPopoverSimp
     ariaLabel = _ref$ariaLabel === void 0 ? "More options" : _ref$ariaLabel,
     _ref$wrapperClassName = _ref.wrapperClassName,
     wrapperClassName = _ref$wrapperClassName === void 0 ? "" : _ref$wrapperClassName,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var triggerRef = useRef(null);
-  // Callback ref for a consumer-supplied trigger: handing a function (not the
-  // ref object) to cloneElement keeps ref access out of render.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  // Callback ref for the trigger (default or consumer-supplied): handing a
+  // function (not the ref object) to cloneElement keeps ref access out of render.
   var setTriggerNode = useCallback(function (node) {
     triggerRef.current = node;
+    setAnchorEl(node);
   }, []);
-  var menuRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  useEffect(function () {
-    function onDocClick(e) {
-      if (!open) return;
-      if (triggerRef.current && triggerRef.current.contains(e.target)) return;
-      if (menuRef.current && menuRef.current.contains(e.target)) return;
-      setOpen(false);
-    }
-    function onKey(e) {
-      if (!open) return;
-      if (e.key === "Escape") setOpen(false);
-    }
-    document.addEventListener("mousedown", onDocClick);
-    document.addEventListener("keydown", onKey);
-    return function () {
-      document.removeEventListener("mousedown", onDocClick);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [open]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var _useState5 = useState("first"),
+    _useState6 = _slicedToArray(_useState5, 2),
+    initialFocus = _useState6[0],
+    setInitialFocus = _useState6[1];
+  var menuId = "three-dot-menu-".concat(useId());
   function toggleOpen(e) {
     e && e.stopPropagation();
+    setInitialFocus("first");
     setOpen(function (v) {
       return !v;
     });
   }
-  function handleItemClick(item) {
-    if (item.disabled) return;
-    item.onClick && item.onClick(item);
-    if (closeOnSelect) setOpen(false);
-    // natural focus behavior: return focus to trigger
-    triggerRef.current && triggerRef.current.focus();
+  function onTriggerKeyDown(e) {
+    if (open || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    e.preventDefault();
+    setInitialFocus(e.key === "ArrowUp" ? "last" : "first");
+    setOpen(true);
   }
-  var DefaultTrigger = jsx("button", {
-    type: "button",
-    "aria-label": ariaLabel,
+  var menuItems = (Array.isArray(items) ? items : []).map(function (it, i) {
+    var _it$key, _renderIcon;
+    return {
+      key: (_it$key = it.key) !== null && _it$key !== void 0 ? _it$key : i,
+      label: it.label,
+      icon: (_renderIcon = renderIcon(it.icon, "w-5 h-5")) !== null && _renderIcon !== void 0 ? _renderIcon : jsx("span", {
+        className: "w-5 h-5"
+      }),
+      disabled: Boolean(it.disabled),
+      tone: it.tone,
+      destructive: it.destructive,
+      onSelect: function onSelect() {
+        return it.onClick && it.onClick(it);
+      }
+    };
+  });
+  var triggerA11y = {
+    "aria-haspopup": "menu",
     "aria-expanded": open,
-    ref: triggerRef,
+    "aria-controls": open ? menuId : undefined
+  };
+  var DefaultTrigger = jsx("button", _objectSpread2(_objectSpread2({
+    type: "button",
+    "aria-label": ariaLabel
+  }, triggerA11y), {}, {
+    ref: setTriggerNode,
     onClick: toggleOpen,
-    className: cn("inline-flex items-center justify-center rounded-md focus:outline-none", className),
-    children: jsx(MoreVertical, {})
-  });
+    onKeyDown: onTriggerKeyDown,
+    className: cn("inline-flex items-center justify-center rounded-md text-muted hover:text-foreground", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", TOUCH_TARGET, className),
+    children: jsx(MoreVertical, {
+      "aria-hidden": "true"
+    })
+  }));
   var triggerNode = trigger ?
   /*#__PURE__*/
   // eslint-disable-next-line react-hooks/refs -- setTriggerNode is a callback ref, run by React at commit
-  React.cloneElement(trigger, {
+  React.cloneElement(trigger, _objectSpread2({
     ref: setTriggerNode,
     onClick: function onClick(e) {
       trigger.props && trigger.props.onClick && trigger.props.onClick(e);
       toggleOpen(e);
     },
-    "aria-expanded": open,
-    "aria-haspopup": "menu"
-  }) : DefaultTrigger;
+    onKeyDown: function onKeyDown(e) {
+      trigger.props && trigger.props.onKeyDown && trigger.props.onKeyDown(e);
+      if (!e.defaultPrevented) onTriggerKeyDown(e);
+    }
+  }, triggerA11y)) : DefaultTrigger;
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn("inline-block relative", wrapperClassName)
   }, rest), {}, {
-    children: [triggerNode, jsx("div", {
-      ref: menuRef,
-      className: cn("absolute left-0 mt-2 min-w-[160px] rounded-lg bg-white border shadow-sm", menuClass),
-      style: {
-        display: open ? "block" : "none"
+    children: [triggerNode, jsx(ActionMenuSurface, {
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
       },
-      role: "menu",
-      "aria-hidden": !open,
-      children: jsx("ul", {
-        className: "py-1",
-        children: items.map(function (it, i) {
-          var _it$key;
-          var Icon = it.icon || null;
-          return jsx("li", {
-            children: jsxs("button", {
-              type: "button",
-              role: "menuitem",
-              onClick: function onClick() {
-                return handleItemClick(it);
-              },
-              disabled: it.disabled,
-              className: "w-full text-left px-4 py-3 flex items-center gap-3 text-sm leading-5 ".concat(it.destructive ? "text-error-600" : "text-primary-900", " ").concat(it.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50", " ").concat(menuItemClass),
-              children: [Icon ? jsx(Icon, {
-                className: "w-5 h-5"
-              }) : jsx("span", {
-                className: "w-5 h-5"
-              }), jsx("span", {
-                className: "flex-1",
-                children: it.label
-              })]
-            })
-          }, (_it$key = it.key) !== null && _it$key !== void 0 ? _it$key : i);
-        })
-      })
+      anchorEl: anchorEl,
+      items: menuItems,
+      presentation: presentation,
+      placement: "bottom-start",
+      initialFocus: initialFocus,
+      closeOnSelect: closeOnSelect,
+      id: menuId,
+      label: typeof ariaLabel === "string" ? ariaLabel : undefined,
+      cancelLabel: cancelLabel,
+      menuClassName: menuClass,
+      itemClassName: menuItemClass
     })]
   }));
 });

package/dist/esm/components/core/Tooltip.js

@@ -1,28 +1,30 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useRef, useState, useId, useCallback, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { useFloatingPosition } from '../../hooks/useFloatingPosition.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
 
-var _excluded = ["position", "trigger", "content", "customTrigger", "children", "open", "defaultOpen", "onChange", "delay", "offset", "textClass", "bgClass", "className", "portal", "id"];
+var _excluded = ["position", "trigger", "content", "customTrigger", "children", "open", "defaultOpen", "onChange", "delay", "offset", "textClass", "bgClass", "className", "portal", "id", "style"];
 // Grace period (ms) before a hover tooltip closes after the pointer leaves the
 // trigger, so the pointer can cross the `offset` gap onto the tooltip itself
 // (WCAG 1.4.13 "hoverable").
 var HOVER_CLOSE_GRACE = 100;
-/**
- * Nearest ancestor that establishes the containing block for an absolutely
- * positioned element. Uses `offsetParent` where the browser provides it and
- * falls back to walking computed styles (jsdom has no layout).
- */
-var getContainingBlock = function getContainingBlock(el) {
-  if (el.offsetParent) return el.offsetParent;
-  for (var p = el.parentElement; p && p !== document.body; p = p.parentElement) {
-    var cs = window.getComputedStyle(p);
-    if (cs.position && cs.position !== "static") return p;
-    if (cs.transform && cs.transform !== "none") return p;
-  }
-  return null;
+// Touch (pointerType "touch"): a hover/focus tooltip opens on a long-press
+// instead of on the emulated mouseenter/focus that follows every tap, and
+// hides on its own shortly after the finger lifts so it never sticks open.
+var LONG_PRESS_MS = 500;
+var TOUCH_HIDE_MS = 1500;
+// Emulated mouse/focus events fire right after a tap; ignore them this long.
+var TOUCH_COMPAT_MS = 800;
+// A finger that moves further than this (px) is scrolling, not pressing.
+var LONG_PRESS_SLOP = 10;
+// True right after a touch: the mouseenter/focus that follows is emulated.
+var isTouchEcho = function isTouchEcho(touch) {
+  return Date.now() - touch.lastAt < TOUCH_COMPAT_MS;
 };
 var NATIVE_FOCUSABLE_TAGS = new Set(["button", "input", "select", "textarea"]);
 /**
@@ -47,7 +49,8 @@ var isNativelyFocusable = function isNativelyFocusable(el) {
 };
 /**
  * Tooltip props
- * - position: 'auto' | 'top' | 'bottom' | 'left' | 'right' (default 'auto')
+ * - position: 'auto' | 'top' | 'bottom' | 'left' | 'right' (default 'auto';
+ *   'auto' prefers top and flips/shifts to stay in view)
  * - trigger: 'hover' | 'click' | 'focus' | Array of those (default 'hover')
  * - content: ReactNode | ( { close } ) => ReactNode
  * - customTrigger: ReactElement (rendered in place of children as trigger)
@@ -88,40 +91,54 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     _ref$portal = _ref.portal,
     portal = _ref$portal === void 0 ? true : _ref$portal,
     propsId = _ref.id,
+    style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var triggerRef = useRef(null);
   var tooltipRef = useRef(null);
   var delayRef = useRef(null);
   var closeTimerRef = useRef(null);
+  // Touch long-press bookkeeping (timers, start point, timestamps).
+  var touchRef = useRef({
+    press: null,
+    hide: null,
+    pressing: false,
+    fired: false,
+    x: 0,
+    y: 0,
+    lastAt: -Infinity,
+    suppressClickUntil: 0
+  });
   var _useState = useState(Boolean(controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : defaultOpen)),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = useState("top"),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    setPlacement = _useState4[1];
-  var _useState5 = useState({
-      left: 0,
-      top: 0
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    coords = _useState6[0],
-    setCoords = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    mounted = _useState8[0],
-    setMounted = _useState8[1];
+    mounted = _useState4[0],
+    setMounted = _useState4[1];
   var reactId = useId();
   var id = propsId !== null && propsId !== void 0 ? propsId : "tooltip-".concat(reactId);
+  var openRef = useLatestRef(open);
+  var _useFloatingPosition = useFloatingPosition({
+      placement: position === "auto" ? "top" : position,
+      offset: offset,
+      open: open
+    }),
+    refs = _useFloatingPosition.refs,
+    floatingStyles = _useFloatingPosition.floatingStyles,
+    placement = _useFloatingPosition.placement;
+  var setReference = refs.setReference,
+    setFloating = refs.setFloating;
   var setTriggerRef = useCallback(function (node) {
     triggerRef.current = node;
+    setReference(node);
     if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
-  }, [forwardedRef]);
+  }, [forwardedRef, setReference]);
   // sync controlled (adjust-during-render pattern)
-  var _useState9 = useState(controlledOpen),
-    _useState0 = _slicedToArray(_useState9, 2),
-    prevControlledOpen = _useState0[0],
-    setPrevControlledOpen = _useState0[1];
+  var _useState5 = useState(controlledOpen),
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevControlledOpen = _useState6[0],
+    setPrevControlledOpen = _useState6[1];
   if (controlledOpen !== prevControlledOpen) {
     setPrevControlledOpen(controlledOpen);
     if (typeof controlledOpen === "boolean") setOpen(controlledOpen);
@@ -132,106 +149,6 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   var notify = useCallback(function (val) {
     if (typeof onChange === "function") onChange(val);
   }, [onChange]);
-  var computePosition = useCallback(function () {
-    var t = triggerRef.current;
-    var el = tooltipRef.current;
-    if (!t || !el) return;
-    var tr = t.getBoundingClientRect();
-    var ttW = el.offsetWidth;
-    var ttH = el.offsetHeight;
-    var winW = window.innerWidth;
-    var winH = window.innerHeight;
-    var candidates = ["top", "bottom", "left", "right"];
-    var chosen = position === "auto" ? "top" : position;
-    if (position === "auto") {
-      var _iterator = _createForOfIteratorHelper(candidates),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var p = _step.value;
-          if (p === "top" && tr.top >= ttH + offset) {
-            chosen = "top";
-            break;
-          }
-          if (p === "bottom" && winH - tr.bottom >= ttH + offset) {
-            chosen = "bottom";
-            break;
-          }
-          if (p === "right" && winW - tr.right >= ttW + offset) {
-            chosen = "right";
-            break;
-          }
-          if (p === "left" && tr.left >= ttW + offset) {
-            chosen = "left";
-            break;
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    }
-    var left = 0;
-    var top = 0;
-    switch (chosen) {
-      case "top":
-        left = tr.left + tr.width / 2 - ttW / 2;
-        top = tr.top - ttH - offset;
-        break;
-      case "bottom":
-        left = tr.left + tr.width / 2 - ttW / 2;
-        top = tr.bottom + offset;
-        break;
-      case "left":
-        left = tr.left - ttW - offset;
-        top = tr.top + tr.height / 2 - ttH / 2;
-        break;
-      case "right":
-        left = tr.right + offset;
-        top = tr.top + tr.height / 2 - ttH / 2;
-        break;
-    }
-    var pad = 8;
-    left = Math.max(pad, Math.min(left, winW - ttW - pad));
-    top = Math.max(pad, Math.min(top, winH - ttH - pad));
-    // `left`/`top` are viewport coords; convert to the containing block of the
-    // absolutely positioned tooltip. Portaled into <body> (or inline with no
-    // positioned ancestor) that is the document, so add page scroll; inline
-    // inside a positioned ancestor, offset by that ancestor instead.
-    var cb = getContainingBlock(el);
-    var originX = -window.scrollX;
-    var originY = -window.scrollY;
-    if (cb && cb !== document.body && cb !== document.documentElement) {
-      var cr = cb.getBoundingClientRect();
-      originX = cr.left + (cb.clientLeft || 0) - cb.scrollLeft;
-      originY = cr.top + (cb.clientTop || 0) - cb.scrollTop;
-    }
-    setPlacement(chosen);
-    setCoords({
-      left: Math.round(left - originX),
-      top: Math.round(top - originY)
-    });
-  }, [offset, position]);
-  useEffect(function () {
-    if (!open) return;
-    computePosition();
-    var ro = new ResizeObserver(function () {
-      return computePosition();
-    });
-    if (triggerRef.current) ro.observe(triggerRef.current);
-    if (tooltipRef.current) ro.observe(tooltipRef.current);
-    var onScroll = function onScroll() {
-      return computePosition();
-    };
-    window.addEventListener("scroll", onScroll, true);
-    window.addEventListener("resize", computePosition);
-    return function () {
-      ro.disconnect();
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", computePosition);
-    };
-  }, [open, computePosition]);
   // open/close helpers
   var cancelScheduledClose = useCallback(function () {
     clearTimeout(closeTimerRef.current);
@@ -253,6 +170,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   var closeTooltip = useCallback(function () {
     clearTimeout(delayRef.current);
     clearTimeout(closeTimerRef.current);
+    clearTimeout(touchRef.current.hide);
     setOpen(false);
     notify(false);
   }, [notify]);
@@ -263,9 +181,12 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     closeTimerRef.current = setTimeout(closeTooltip, HOVER_CLOSE_GRACE);
   }, [closeTooltip]);
   useEffect(function () {
+    var touch = touchRef.current;
     return function () {
       clearTimeout(delayRef.current);
       clearTimeout(closeTimerRef.current);
+      clearTimeout(touch.press);
+      clearTimeout(touch.hide);
     };
   }, []);
   // triggers normalization
@@ -280,7 +201,8 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     // onMouseLeave props (see tooltipNode) — it doesn't exist yet here.
     if (triggers.includes("hover")) {
       var onMouseEnter = function onMouseEnter() {
-        return openTooltip();
+        if (isTouchEcho(touchRef.current)) return;
+        openTooltip();
       };
       var onMouseLeave = function onMouseLeave() {
         return scheduleClose();
@@ -329,11 +251,13 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     if (!t) return;
     if (opensOnFocus) {
       var onFocusIn = function onFocusIn() {
-        return openTooltip(true);
+        if (isTouchEcho(touchRef.current)) return;
+        openTooltip(true);
       };
       var onFocusOut = function onFocusOut(e) {
         var tip = tooltipRef.current;
         if (e.relatedTarget && tip && tip.contains(e.relatedTarget)) return;
+        if (touchRef.current.fired) return; // a long-press tip hides on its own timer
         closeTooltip();
       };
       t.addEventListener("focusin", onFocusIn);
@@ -344,14 +268,84 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
       };
     }
   }, [opensOnFocus, openTooltip, closeTooltip]);
+  // Touch: long-press opens a hover/focus tooltip; a plain tap is left alone
+  // so the trigger's own onClick still runs. Click tooltips toggle on tap.
+  var longPress = opensOnFocus || triggers.includes("hover");
+  useEffect(function () {
+    var t = triggerRef.current;
+    if (!t || !longPress) return;
+    var touch = touchRef.current;
+    var onPointerDown = function onPointerDown(e) {
+      if (e.pointerType !== "touch") return;
+      clearTimeout(touch.press);
+      clearTimeout(touch.hide);
+      touch.lastAt = Date.now();
+      touch.pressing = true;
+      touch.fired = false;
+      touch.x = e.clientX;
+      touch.y = e.clientY;
+      touch.press = setTimeout(function () {
+        touch.fired = true;
+        openTooltip(true);
+      }, LONG_PRESS_MS);
+    };
+    var onPointerMove = function onPointerMove(e) {
+      if (!touch.pressing || e.pointerType !== "touch") return;
+      if (Math.hypot(e.clientX - touch.x, e.clientY - touch.y) > LONG_PRESS_SLOP) {
+        clearTimeout(touch.press);
+      }
+    };
+    var onPointerEnd = function onPointerEnd(e) {
+      if (!touch.pressing || e.pointerType !== "touch") return;
+      touch.pressing = false;
+      touch.lastAt = Date.now();
+      clearTimeout(touch.press);
+      if (touch.fired) {
+        // The press already did its job: swallow the click it may produce.
+        touch.suppressClickUntil = Date.now() + TOUCH_COMPAT_MS;
+        touch.hide = setTimeout(function () {
+          touch.fired = false;
+          closeTooltip();
+        }, TOUCH_HIDE_MS);
+      } else if (openRef.current) {
+        closeTooltip(); // a plain tap dismisses an open tip (and still clicks)
+      }
+    };
+    var onClickCapture = function onClickCapture(e) {
+      if (Date.now() < touch.suppressClickUntil) {
+        touch.suppressClickUntil = 0;
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    // Stop the OS long-press menu / callout from covering the tooltip.
+    var onContextMenu = function onContextMenu(e) {
+      if (touch.pressing || touch.fired) e.preventDefault();
+    };
+    t.addEventListener("pointerdown", onPointerDown);
+    t.addEventListener("pointermove", onPointerMove);
+    t.addEventListener("pointerup", onPointerEnd);
+    t.addEventListener("pointercancel", onPointerEnd);
+    t.addEventListener("click", onClickCapture, true);
+    t.addEventListener("contextmenu", onContextMenu);
+    return function () {
+      t.removeEventListener("pointerdown", onPointerDown);
+      t.removeEventListener("pointermove", onPointerMove);
+      t.removeEventListener("pointerup", onPointerEnd);
+      t.removeEventListener("pointercancel", onPointerEnd);
+      t.removeEventListener("click", onClickCapture, true);
+      t.removeEventListener("contextmenu", onContextMenu);
+    };
+  }, [longPress, openTooltip, closeTooltip, openRef]);
   // Dismiss on a pointer/tap outside. Touch has no mouseleave, so without this
-  // a tapped-open hover tooltip would never close.
+  // a tapped-open tooltip would never close.
   useEffect(function () {
     if (!open) return;
     var onPointerDown = function onPointerDown(e) {
       var t = triggerRef.current;
       var tip = tooltipRef.current;
       if (t && t.contains(e.target) || tip && tip.contains(e.target)) return;
+      touchRef.current.fired = false;
       closeTooltip();
     };
     document.addEventListener("pointerdown", onPointerDown);
@@ -419,16 +413,15 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   } : {};
   // Tooltip box element
   var tooltipNode = open ? jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
-    ref: tooltipRef,
+    ref: function ref(node) {
+      return setRefs(node, tooltipRef, setFloating);
+    },
     id: id,
-    role: "tooltip"
+    role: "tooltip",
+    "data-placement": placement
   }, rest), tipHoverProps), {}, {
-    className: cn("absolute z-50 transform-gpu transition-opacity duration-150 motion-reduce:transition-none", className),
-    style: {
-      left: coords.left,
-      top: coords.top,
-      position: "absolute"
-    },
+    className: cn("z-tooltip transform-gpu transition-opacity duration-150 motion-reduce:transition-none", className),
+    style: _objectSpread2(_objectSpread2({}, floatingStyles), style),
     children: jsx("div", {
       className: cn("max-w-xs rounded-md border border-line px-3 py-2 text-sm shadow-lg shadow-black/5", bgClass, textClass),
       children: renderContent()