@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

package/dist/esm/components/feedback/Tour.js

@@ -6,14 +6,23 @@ import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import Button from '../core/Button.js';
 import { cn } from '../../utils/cn.js';
-import { computePosition, setRefs } from '../../utils/position.js';
+import { setRefs, parsePlacement } from '../../utils/position.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useScrollLock } from '../../hooks/useScrollLock.js';
 import { useTourTarget } from '../../hooks/useTourTarget.js';
+import { useFloatingPosition } from '../../hooks/useFloatingPosition.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
 import TourSpotlight from './TourSpotlight.js';
 
-var _excluded = ["open", "steps", "onClose", "onFinish", "step", "defaultStep", "onStepChange", "labels", "targetTimeout", "spotlightPadding", "className"];
+var _excluded = ["open", "steps", "onClose", "onFinish", "step", "defaultStep", "onStepChange", "labels", "targetTimeout", "spotlightPadding", "presentation", "className", "style", "onPointerDown", "onPointerUp", "onPointerCancel", "onClickCapture"];
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+// Docked (phone) card: a horizontal swipe at least this long (px), and clearly
+// more horizontal than vertical, goes to the next / previous step.
+var SWIPE_DISTANCE = 50;
+var SWIPE_RATIO = 1.5;
+// The click a swipe may produce arrives right after pointerup.
+var SWIPE_CLICK_MS = 400;
 var DEFAULT_LABELS = {
   next: "Next",
   back: "Back",
@@ -24,6 +33,17 @@ var DEFAULT_LABELS = {
     return "Step ".concat(current, " of ").concat(total);
   }
 };
+// Tour placements ("top", "bottom-start", …) as floating-ui placements.
+var toFloatingPlacement = function toFloatingPlacement(placement) {
+  var _parsePlacement = parsePlacement(placement || "bottom"),
+    side = _parsePlacement.side,
+    align = _parsePlacement.align;
+  return align === "start" || align === "end" ? "".concat(side, "-").concat(align) : side;
+};
+var isTextEntry = function isTextEntry(el) {
+  var _el$closest;
+  return !!(el !== null && el !== void 0 && (_el$closest = el.closest) !== null && _el$closest !== void 0 && _el$closest.call(el, "input, textarea, select, [contenteditable='true']"));
+};
 var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
@@ -40,11 +60,25 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
     targetTimeout = _ref$targetTimeout === void 0 ? 3000 : _ref$targetTimeout,
     _ref$spotlightPadding = _ref.spotlightPadding,
     spotlightPadding = _ref$spotlightPadding === void 0 ? 6 : _ref$spotlightPadding,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
     className = _ref.className,
+    style = _ref.style,
+    _onPointerDown = _ref.onPointerDown,
+    _onPointerUp = _ref.onPointerUp,
+    _onPointerCancel = _ref.onPointerCancel,
+    _onClickCapture = _ref.onClickCapture,
     rest = _objectWithoutProperties(_ref, _excluded);
   var cardRef = useRef(null);
+  var swipeRef = useRef({
+    x: 0,
+    y: 0,
+    tracking: false,
+    swipedAt: -Infinity
+  });
   var baseId = useId();
   var text = _objectSpread2(_objectSpread2({}, DEFAULT_LABELS), labels);
+  var docked = usePresentation(presentation) === "sheet";
   // Each opening is a new session: the uncontrolled step restarts and stale
   // target measurements from the previous run are ignored.
   var _useState = useState({
@@ -74,6 +108,25 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
     }),
     rect = _useTourTarget.rect,
     ready = _useTourTarget.ready;
+  var anchored = Boolean(rect) && !docked;
+  var _useFloatingPosition = useFloatingPosition({
+      placement: toFloatingPlacement(current === null || current === void 0 ? void 0 : current.placement),
+      offset: spotlightPadding + 10,
+      open: active && anchored
+    }),
+    refs = _useFloatingPosition.refs,
+    floatingStyles = _useFloatingPosition.floatingStyles;
+  var setReference = refs.setReference,
+    setFloating = refs.setFloating;
+  // The target's measured box is the (virtual) reference; useTourTarget
+  // re-measures it on scroll/resize.
+  useIsomorphicLayoutEffect(function () {
+    setReference(anchored ? {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return rect;
+      }
+    } : null);
+  }, [anchored, rect, setReference]);
   var goTo = function goTo(next) {
     if (next < 0 || next >= total || next === index) return;
     if (stepProp === undefined) setSession(function (s) {
@@ -99,44 +152,66 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
       return close("escape");
     }
   });
-  useIsomorphicLayoutEffect(function () {
-    var card = cardRef.current;
-    if (!card) return;
-    if (!rect) {
-      card.style.top = "";
-      card.style.left = "";
-      return;
-    }
-    var size = {
-      width: card.offsetWidth,
-      height: card.offsetHeight
-    };
-    var pos = computePosition(rect, size, {
-      placement: (current === null || current === void 0 ? void 0 : current.placement) || "bottom",
-      offset: spotlightPadding + 10
-    });
-    card.style.top = "".concat(pos.top, "px");
-    card.style.left = "".concat(pos.left, "px");
-  }, [rect, ready, index, current === null || current === void 0 ? void 0 : current.placement, spotlightPadding]);
   if (!active || typeof document === "undefined") return null;
   var isFirst = index === 0;
   var isLast = index === total - 1;
   var titleId = "tour-title-".concat(baseId);
   var bodyId = "tour-body-".concat(baseId);
   var handleKeyDown = function handleKeyDown(e) {
-    var _e$target$closest, _e$target;
-    if ((_e$target$closest = (_e$target = e.target).closest) !== null && _e$target$closest !== void 0 && _e$target$closest.call(_e$target, "input, textarea, select, [contenteditable='true']")) return;
+    if (isTextEntry(e.target)) return;
     if (e.key === "ArrowRight") goTo(index + 1);else if (e.key === "ArrowLeft") goTo(index - 1);
   };
+  // Swipe on the docked card: left = next, right = back.
+  var swipeHandlers = docked ? {
+    onPointerDown: function onPointerDown(e) {
+      _onPointerDown === null || _onPointerDown === void 0 || _onPointerDown(e);
+      var swipe = swipeRef.current;
+      swipe.swipedAt = -Infinity;
+      swipe.tracking = e.isPrimary !== false && !isTextEntry(e.target);
+      swipe.x = e.clientX;
+      swipe.y = e.clientY;
+    },
+    onPointerUp: function onPointerUp(e) {
+      _onPointerUp === null || _onPointerUp === void 0 || _onPointerUp(e);
+      var swipe = swipeRef.current;
+      if (!swipe.tracking) return;
+      swipe.tracking = false;
+      var dx = e.clientX - swipe.x;
+      var dy = e.clientY - swipe.y;
+      if (Math.abs(dx) < SWIPE_DISTANCE || Math.abs(dx) < Math.abs(dy) * SWIPE_RATIO) return;
+      swipe.swipedAt = Date.now();
+      goTo(dx < 0 ? index + 1 : index - 1);
+    },
+    onPointerCancel: function onPointerCancel(e) {
+      _onPointerCancel === null || _onPointerCancel === void 0 || _onPointerCancel(e);
+      swipeRef.current.tracking = false;
+    },
+    // A swipe that ends on a button must not also press it.
+    onClickCapture: function onClickCapture(e) {
+      _onClickCapture === null || _onClickCapture === void 0 || _onClickCapture(e);
+      var swipe = swipeRef.current;
+      if (Date.now() - swipe.swipedAt > SWIPE_CLICK_MS) return;
+      swipe.swipedAt = -Infinity;
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  } : {
+    onPointerDown: _onPointerDown,
+    onPointerUp: _onPointerUp,
+    onPointerCancel: _onPointerCancel,
+    onClickCapture: _onClickCapture
+  };
+  var placementAttr = "center";
+  if (docked) placementAttr = "docked";else if (rect) placementAttr = current.placement || "bottom";
   return /*#__PURE__*/createPortal(jsxs("div", {
-    className: "fixed inset-0 z-50",
+    className: "fixed inset-0 z-modal",
     "data-testid": "tour-overlay",
     children: [jsx(TourSpotlight, {
       rect: ready ? rect : null,
       padding: spotlightPadding
-    }), jsxs("div", _objectSpread2(_objectSpread2({
+    }), jsxs("div", _objectSpread2(_objectSpread2(_objectSpread2({
       ref: function ref(node) {
-        return setRefs(node, cardRef, _ref2);
+        return setRefs(node, cardRef, _ref2, setFloating);
       },
       role: "dialog",
       "aria-modal": "true",
@@ -144,9 +219,11 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
       "aria-describedby": current.content ? bodyId : undefined,
       tabIndex: -1,
       onKeyDown: handleKeyDown,
-      "data-placement": rect ? current.placement || "bottom" : "center",
-      className: cn("fixed w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100vh-2rem)] overflow-y-auto rounded-lg border border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "transition-opacity duration-200 motion-reduce:transition-none", !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className)
-    }, rest), {}, {
+      "data-placement": placementAttr,
+      "data-presentation": docked ? "sheet" : "popover",
+      className: cn("fixed overflow-y-auto overscroll-contain rounded-lg border border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "transition-opacity duration-200 motion-reduce:transition-none", docked ? "inset-x-4 bottom-4 max-h-[60dvh] pb-safe touch-pan-y" : "w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-2rem)]", !docked && !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className),
+      style: anchored ? _objectSpread2(_objectSpread2({}, floatingStyles), style) : style
+    }, swipeHandlers), rest), {}, {
       children: [jsxs("div", {
         className: "flex items-start justify-between gap-3 px-4 pt-4",
         children: [jsxs("div", {
@@ -165,7 +242,7 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
             return close("close");
           },
           "aria-label": text.close,
-          className: "rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:text-gray-400 dark:hover:bg-gray-800",
+          className: cn("-mr-1 -mt-1 inline-flex shrink-0 items-center justify-center rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:text-gray-400 dark:hover:bg-gray-800", TOUCH_TARGET),
           children: jsx(X, {
             className: "h-4 w-4",
             "aria-hidden": "true"