@tamagui/floating 2.0.0-rc.3 → 2.0.0-rc.30

package/src/index.ts

@@ -49,6 +49,7 @@ export {
   autoUpdate,
   detectOverflow,
   flip,
+  getOverflowAncestors,
   hide,
   inline,
   limitShift,
@@ -64,4 +65,52 @@ export {
   type UseFloatingReturn,
   type UseFloatingProps,
   type UseFloatingFn,
+  type UseFloatingOverrideFn,
 } from './useFloating'
+
+// raw useFloating without FloatingOverrideContext — use when building
+// override context factories to avoid infinite recursion
+export { useFloating as useFloatingRaw } from './Floating'
+
+// event emitter for hook coordination
+export { createFloatingEvents } from './interactions/createFloatingEvents'
+
+// multi-trigger coordination
+export { PopupTriggerMap } from './interactions/PopupTriggerMap'
+
+// interaction hooks
+export { useInteractions } from './interactions/useInteractions'
+export { useHover } from './interactions/useHover'
+export { safePolygon } from './interactions/safePolygon'
+export { useFocus } from './interactions/useFocus'
+export { useRole } from './interactions/useRole'
+export { useClick } from './interactions/useClick'
+export { useListNavigation } from './interactions/useListNavigation'
+export { useTypeahead } from './interactions/useTypeahead'
+export { useInnerOffset } from './interactions/useInnerOffset'
+export {
+  FloatingDelayGroup,
+  useDelayGroup,
+  useDelayGroupContext,
+} from './interactions/useDelayGroup'
+
+// middleware
+export { inner } from './middleware/inner'
+
+// types
+export type {
+  ElementProps,
+  FloatingEvents,
+  FloatingInteractionContext,
+  OpenChangeReason,
+  UseHoverProps,
+  HandleCloseFn,
+  SafePolygonOptions,
+  UseFocusProps,
+  UseRoleProps,
+  UseClickProps,
+  UseListNavigationProps,
+  UseTypeaheadProps,
+  UseInnerOffsetProps,
+  Delay,
+} from './interactions/types'

package/src/interactions/PopupTriggerMap.ts

@@ -0,0 +1,30 @@
+// tracks trigger elements for multi-trigger tooltip/popover patterns.
+// when multiple triggers share a single floating element (scoped pattern),
+// this lets useHover check if the cursor moved to a sibling trigger
+// and suppress the close.
+
+export class PopupTriggerMap {
+  private map = new Map<string, Element>()
+  private elements = new Set<Element>()
+
+  add(id: string, element: Element) {
+    const prev = this.map.get(id)
+    if (prev) {
+      this.elements.delete(prev)
+    }
+    this.map.set(id, element)
+    this.elements.add(element)
+  }
+
+  delete(id: string) {
+    const el = this.map.get(id)
+    if (el) {
+      this.elements.delete(el)
+      this.map.delete(id)
+    }
+  }
+
+  hasElement(element: Element): boolean {
+    return this.elements.has(element)
+  }
+}

package/src/interactions/createFloatingEvents.ts

@@ -0,0 +1,34 @@
+// lightweight event emitter for coordinating between interaction hooks.
+// when one hook changes open state (e.g. dismiss via escape), others
+// need to know so they can clear their timers and prevent reopening.
+
+export type FloatingEvents = {
+  emit(event: string, data?: any): void
+  on(event: string, handler: (data?: any) => void): void
+  off(event: string, handler: (data?: any) => void): void
+}
+
+export function createFloatingEvents(): FloatingEvents {
+  const listeners = new Map<string, Set<(data?: any) => void>>()
+
+  return {
+    emit(event, data) {
+      listeners.get(event)?.forEach((fn) => fn(data))
+    },
+    on(event, handler) {
+      let set = listeners.get(event)
+      if (!set) {
+        set = new Set()
+        listeners.set(event, set)
+      }
+      set.add(handler)
+    },
+    off(event, handler) {
+      const set = listeners.get(event)
+      if (set) {
+        set.delete(handler)
+        if (set.size === 0) listeners.delete(event)
+      }
+    },
+  }
+}

package/src/interactions/safePolygon.ts

@@ -0,0 +1,500 @@
+import type { HandleCloseFn, SafePolygonOptions } from './types'
+import { clearTimeoutIfSet, contains, getTarget } from './utils'
+
+type Point = [number, number]
+type Polygon = Point[]
+type Side = 'top' | 'bottom' | 'left' | 'right'
+type Rect = { x: number; y: number; width: number; height: number }
+
+function isPointInPolygon(point: Point, polygon: Polygon) {
+  const [x, y] = point
+  let isInside = false
+  const length = polygon.length
+  for (let i = 0, j = length - 1; i < length; j = i++) {
+    const [xi, yi] = polygon[i] || [0, 0]
+    const [xj, yj] = polygon[j] || [0, 0]
+    const intersect = yi >= y !== yj >= y && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi
+    if (intersect) {
+      isInside = !isInside
+    }
+  }
+  return isInside
+}
+
+function isInside(point: Point, rect: Rect) {
+  return (
+    point[0] >= rect.x &&
+    point[0] <= rect.x + rect.width &&
+    point[1] >= rect.y &&
+    point[1] <= rect.y + rect.height
+  )
+}
+
+export type { SafePolygonOptions }
+
+// generates a safe polygon area that the user can traverse without closing the
+// floating element once leaving the reference element.
+// ported from @floating-ui/react with full polygon geometry.
+//
+// the returned HandleCloseFn is a closure factory: called once on mouseleave
+// with the leave position (x, y), it returns a handler that runs on each
+// subsequent document mousemove. the original leave position is baked into
+// the closure so the polygon anchor stays fixed.
+//
+// unlike @floating-ui/react, we do NOT add a documentElement mouseleave
+// listener, which fixes the window-blur-closing-popover bug.
+// debug overlay — renders polygon + trough as SVG on top of everything
+let debugSvg: SVGSVGElement | null = null
+function debugDrawPolygon(
+  polygon: Point[],
+  trough: Point[],
+  cursor: Point,
+  anchor: Point
+) {
+  if (!debugSvg) {
+    debugSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    debugSvg.id = '__safe-polygon-debug'
+    Object.assign(debugSvg.style, {
+      position: 'fixed',
+      inset: '0',
+      width: '100vw',
+      height: '100vh',
+      pointerEvents: 'none',
+      zIndex: '999999',
+    })
+    document.body.appendChild(debugSvg)
+  }
+  debugSvg.innerHTML = ''
+
+  // trough rectangle (blue)
+  if (trough.length) {
+    const troughEl = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
+    troughEl.setAttribute('points', trough.map((p) => p.join(',')).join(' '))
+    troughEl.setAttribute('fill', 'rgba(0,100,255,0.15)')
+    troughEl.setAttribute('stroke', 'rgba(0,100,255,0.6)')
+    troughEl.setAttribute('stroke-width', '1')
+    debugSvg.appendChild(troughEl)
+  }
+
+  // safe polygon (red)
+  if (polygon.length) {
+    const polyEl = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
+    polyEl.setAttribute('points', polygon.map((p) => p.join(',')).join(' '))
+    polyEl.setAttribute('fill', 'rgba(255,50,50,0.2)')
+    polyEl.setAttribute('stroke', 'rgba(255,50,50,0.8)')
+    polyEl.setAttribute('stroke-width', '1.5')
+    debugSvg.appendChild(polyEl)
+  }
+
+  // anchor point (green circle)
+  const anchorCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+  anchorCircle.setAttribute('cx', String(anchor[0]))
+  anchorCircle.setAttribute('cy', String(anchor[1]))
+  anchorCircle.setAttribute('r', '5')
+  anchorCircle.setAttribute('fill', 'lime')
+  anchorCircle.setAttribute('stroke', 'darkgreen')
+  anchorCircle.setAttribute('stroke-width', '1.5')
+  debugSvg.appendChild(anchorCircle)
+
+  // cursor point (yellow circle)
+  const cursorCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+  cursorCircle.setAttribute('cx', String(cursor[0]))
+  cursorCircle.setAttribute('cy', String(cursor[1]))
+  cursorCircle.setAttribute('r', '4')
+  cursorCircle.setAttribute('fill', 'yellow')
+  cursorCircle.setAttribute('stroke', 'orange')
+  cursorCircle.setAttribute('stroke-width', '1.5')
+  debugSvg.appendChild(cursorCircle)
+}
+
+function debugClear() {
+  if (debugSvg) {
+    debugSvg.remove()
+    debugSvg = null
+  }
+}
+
+export function safePolygon(options: SafePolygonOptions = {}): HandleCloseFn {
+  const {
+    buffer = 0.5,
+    blockPointerEvents = false,
+    requireIntent = true,
+    __debug = false,
+  } = options
+
+  const timeoutRef = { current: -1 }
+
+  let hasLanded = false
+  let lastX: number | null = null
+  let lastY: number | null = null
+  let lastCursorTime = typeof performance !== 'undefined' ? performance.now() : 0
+
+  function getCursorSpeed(x: number, y: number): number | null {
+    const currentTime = performance.now()
+    const elapsedTime = currentTime - lastCursorTime
+
+    if (lastX === null || lastY === null || elapsedTime === 0) {
+      lastX = x
+      lastY = y
+      lastCursorTime = currentTime
+      return null
+    }
+
+    const deltaX = x - lastX
+    const deltaY = y - lastY
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+    const speed = distance / elapsedTime
+
+    lastX = x
+    lastY = y
+    lastCursorTime = currentTime
+
+    return speed
+  }
+
+  // called once on mouseleave. x, y = cursor position when leaving.
+  // returns the mousemove handler that checks each subsequent position
+  // against the polygon anchored at (x, y).
+  const fn: HandleCloseFn = ({ x, y, placement, elements, onClose }) => {
+    // reset on each new handler creation — each leave starts a fresh session
+    hasLanded = false
+    lastX = null
+    lastY = null
+
+    return function onMouseMove(event: MouseEvent) {
+      function close() {
+        clearTimeoutIfSet(timeoutRef)
+        onClose()
+      }
+
+      clearTimeoutIfSet(timeoutRef)
+
+      const domReference = elements.domReference ?? elements.reference
+
+      if (
+        !domReference ||
+        !elements.floating ||
+        placement == null ||
+        x == null ||
+        y == null
+      ) {
+        return
+      }
+
+      const { clientX, clientY } = event
+      const clientPoint: Point = [clientX, clientY]
+      const target = getTarget(event) as Element | null
+      const isLeave = event.type === 'mouseleave'
+      const isOverFloatingEl = contains(elements.floating, target)
+      const isOverReferenceEl = contains(domReference, target)
+      const refRect = domReference.getBoundingClientRect()
+      const rect = elements.floating.getBoundingClientRect()
+      const side = placement.split('-')[0] as Side
+
+      // x, y are from the closure — the position when cursor LEFT the reference.
+      // cursorLeaveFromRight/Bottom determine which side of the floating el
+      // the leave point is on, to shape the polygon correctly.
+      const cursorLeaveFromRight = x > rect.right - rect.width / 2
+      const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2
+      const isOverReferenceRect = isInside(clientPoint, refRect)
+      const isFloatingWider = rect.width > refRect.width
+      const isFloatingTaller = rect.height > refRect.height
+      const left = (isFloatingWider ? refRect : rect).left
+      const right = (isFloatingWider ? refRect : rect).right
+      const top = (isFloatingTaller ? refRect : rect).top
+      const bottom = (isFloatingTaller ? refRect : rect).bottom
+
+      if (isOverFloatingEl) {
+        hasLanded = true
+
+        if (!isLeave) {
+          return
+        }
+      }
+
+      if (isOverReferenceEl) {
+        hasLanded = false
+      }
+
+      if (isOverReferenceEl && !isLeave) {
+        hasLanded = true
+        return
+      }
+
+      // cursor in reference bounding box but outside DOM element (rounded corners)
+      if (!isOverReferenceEl && isOverReferenceRect && !isLeave) {
+        return
+      }
+
+      // prevent overlapping floating element from being stuck in an open-close
+      // loop: https://github.com/floating-ui/floating-ui/issues/1910
+      if (
+        isLeave &&
+        event.relatedTarget &&
+        contains(elements.floating, event.relatedTarget as Element)
+      ) {
+        return
+      }
+
+      // if the pointer is leaving from the opposite side, the "buffer" logic
+      // creates a point where the floating element remains open, but should be
+      // ignored. a constant of 1 handles floating point rounding errors.
+      if (
+        (side === 'top' && y >= refRect.bottom - 1) ||
+        (side === 'bottom' && y <= refRect.top + 1) ||
+        (side === 'left' && x >= refRect.right - 1) ||
+        (side === 'right' && x <= refRect.left + 1)
+      ) {
+        return close()
+      }
+
+      // ignore when the cursor is within the rectangular trough between the
+      // two elements. since the polygon is created from the cursor point,
+      // which can start beyond the ref element's edge, traversing back and
+      // forth from the ref to the floating element can cause it to close. this
+      // ensures it always remains open in that case.
+      let rectPoly: Point[] = []
+
+      switch (side) {
+        case 'top':
+          rectPoly = [
+            [left, refRect.top + 1],
+            [left, rect.bottom - 1],
+            [right, rect.bottom - 1],
+            [right, refRect.top + 1],
+          ]
+          break
+        case 'bottom':
+          rectPoly = [
+            [left, rect.top + 1],
+            [left, refRect.bottom - 1],
+            [right, refRect.bottom - 1],
+            [right, rect.top + 1],
+          ]
+          break
+        case 'left':
+          rectPoly = [
+            [rect.right - 1, bottom],
+            [rect.right - 1, top],
+            [refRect.left + 1, top],
+            [refRect.left + 1, bottom],
+          ]
+          break
+        case 'right':
+          rectPoly = [
+            [refRect.right - 1, bottom],
+            [refRect.right - 1, top],
+            [rect.left + 1, top],
+            [rect.left + 1, bottom],
+          ]
+          break
+      }
+
+      // getPolygon uses the closure's (x, y) — the LEAVE position — as the
+      // polygon anchor point, NOT the current cursor position. this creates
+      // a stable triangular/trapezoidal safe zone from the leave point toward
+      // the floating element's edges.
+      function getPolygon([x, y]: Point): Array<Point> {
+        switch (side) {
+          case 'top': {
+            const cursorPointOne: Point = [
+              isFloatingWider
+                ? x + buffer / 2
+                : cursorLeaveFromRight
+                  ? x + buffer * 4
+                  : x - buffer * 4,
+              y + buffer + 1,
+            ]
+            const cursorPointTwo: Point = [
+              isFloatingWider
+                ? x - buffer / 2
+                : cursorLeaveFromRight
+                  ? x + buffer * 4
+                  : x - buffer * 4,
+              y + buffer + 1,
+            ]
+            const commonPoints: [Point, Point] = [
+              [
+                rect.left,
+                cursorLeaveFromRight
+                  ? rect.bottom - buffer
+                  : isFloatingWider
+                    ? rect.bottom - buffer
+                    : rect.top,
+              ],
+              [
+                rect.right,
+                cursorLeaveFromRight
+                  ? isFloatingWider
+                    ? rect.bottom - buffer
+                    : rect.top
+                  : rect.bottom - buffer,
+              ],
+            ]
+
+            return [cursorPointOne, cursorPointTwo, ...commonPoints]
+          }
+          case 'bottom': {
+            const cursorPointOne: Point = [
+              isFloatingWider
+                ? x + buffer / 2
+                : cursorLeaveFromRight
+                  ? x + buffer * 4
+                  : x - buffer * 4,
+              y - buffer,
+            ]
+            const cursorPointTwo: Point = [
+              isFloatingWider
+                ? x - buffer / 2
+                : cursorLeaveFromRight
+                  ? x + buffer * 4
+                  : x - buffer * 4,
+              y - buffer,
+            ]
+            const commonPoints: [Point, Point] = [
+              [
+                rect.left,
+                cursorLeaveFromRight
+                  ? rect.top + buffer
+                  : isFloatingWider
+                    ? rect.top + buffer
+                    : rect.bottom,
+              ],
+              [
+                rect.right,
+                cursorLeaveFromRight
+                  ? isFloatingWider
+                    ? rect.top + buffer
+                    : rect.bottom
+                  : rect.top + buffer,
+              ],
+            ]
+
+            return [cursorPointOne, cursorPointTwo, ...commonPoints]
+          }
+          case 'left': {
+            const cursorPointOne: Point = [
+              x + buffer + 1,
+              isFloatingTaller
+                ? y + buffer / 2
+                : cursorLeaveFromBottom
+                  ? y + buffer * 4
+                  : y - buffer * 4,
+            ]
+            const cursorPointTwo: Point = [
+              x + buffer + 1,
+              isFloatingTaller
+                ? y - buffer / 2
+                : cursorLeaveFromBottom
+                  ? y + buffer * 4
+                  : y - buffer * 4,
+            ]
+            const commonPoints: [Point, Point] = [
+              [
+                cursorLeaveFromBottom
+                  ? rect.right - buffer
+                  : isFloatingTaller
+                    ? rect.right - buffer
+                    : rect.left,
+                rect.top,
+              ],
+              [
+                cursorLeaveFromBottom
+                  ? isFloatingTaller
+                    ? rect.right - buffer
+                    : rect.left
+                  : rect.right - buffer,
+                rect.bottom,
+              ],
+            ]
+
+            return [...commonPoints, cursorPointOne, cursorPointTwo]
+          }
+          case 'right': {
+            const cursorPointOne: Point = [
+              x - buffer,
+              isFloatingTaller
+                ? y + buffer / 2
+                : cursorLeaveFromBottom
+                  ? y + buffer * 4
+                  : y - buffer * 4,
+            ]
+            const cursorPointTwo: Point = [
+              x - buffer,
+              isFloatingTaller
+                ? y - buffer / 2
+                : cursorLeaveFromBottom
+                  ? y + buffer * 4
+                  : y - buffer * 4,
+            ]
+            const commonPoints: [Point, Point] = [
+              [
+                cursorLeaveFromBottom
+                  ? rect.left + buffer
+                  : isFloatingTaller
+                    ? rect.left + buffer
+                    : rect.right,
+                rect.top,
+              ],
+              [
+                cursorLeaveFromBottom
+                  ? isFloatingTaller
+                    ? rect.left + buffer
+                    : rect.right
+                  : rect.left + buffer,
+                rect.bottom,
+              ],
+            ]
+
+            return [cursorPointOne, cursorPointTwo, ...commonPoints]
+          }
+        }
+      }
+
+      const poly = getPolygon([x, y])
+
+      if (__debug) {
+        debugDrawPolygon(poly, rectPoly, clientPoint, [x, y])
+      }
+
+      if (isPointInPolygon([clientX, clientY], rectPoly)) {
+        return
+      }
+
+      if (hasLanded && !isOverReferenceRect) {
+        if (__debug) debugClear()
+        return close()
+      }
+
+      // polygon check first — inside polygon = safe.
+      // the polygon geometry itself limits the safe zone to valid cursor
+      // paths toward the floating element, so no timeout is needed here.
+      // a previous 40ms requireIntent timeout caused premature closures
+      // during natural mouse pauses (humans routinely pause >40ms while
+      // moving diagonally from trigger to content).
+      if (isPointInPolygon([clientX, clientY], poly)) {
+        return
+      }
+
+      // speed check only applies outside polygon
+      if (!isLeave && requireIntent) {
+        const cursorSpeed = getCursorSpeed(clientX, clientY)
+        const cursorSpeedThreshold = 0.1
+        if (cursorSpeed !== null && cursorSpeed < cursorSpeedThreshold) {
+          if (__debug) debugClear()
+          return close()
+        }
+      }
+
+      // outside polygon — close
+      if (__debug) debugClear()
+      close()
+    }
+  }
+
+  fn.__options = {
+    blockPointerEvents,
+  }
+
+  return fn
+}