@tamagui/floating 2.0.0-rc.4 → 2.0.0-rc.40

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
+}

package/src/interactions/types.ts

@@ -0,0 +1,165 @@
+import type { HTMLProps, RefObject } from 'react'
+import type { FloatingEvents } from './createFloatingEvents'
+import type { PopupTriggerMap } from './PopupTriggerMap'
+
+export type { FloatingEvents }
+
+export type ElementProps = {
+  reference?: HTMLProps<Element>
+  floating?: HTMLProps<HTMLElement>
+  item?:
+    | HTMLProps<HTMLElement>
+    | ((props: { active?: boolean; selected?: boolean }) => HTMLProps<HTMLElement>)
+}
+
+export type OpenChangeReason =
+  | 'hover'
+  | 'focus'
+  | 'click'
+  | 'dismiss'
+  | 'list-navigation'
+  | 'escape-key'
+  | 'reference-press'
+  | 'safe-polygon'
+
+export interface FloatingInteractionContext {
+  open: boolean
+  onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void
+  refs: {
+    reference: RefObject<Element | null>
+    floating: RefObject<HTMLElement | null>
+    domReference: RefObject<Element | null>
+  }
+  elements: {
+    reference: Element | null
+    floating: HTMLElement | null
+    domReference: Element | null
+  }
+  dataRef: RefObject<{
+    openEvent?: Event
+    // placement from the floating positioning — needed for safePolygon
+    placement?: string
+    // whether the user is currently typing (typeahead)
+    typing?: boolean
+  }>
+  events?: FloatingEvents
+  triggerElements?: PopupTriggerMap
+  // set by useHover when safePolygon's document mousemove handler is active.
+  // checked by onLeaveReference fallback timer to avoid racing safePolygon.
+  handleCloseActiveRef?: RefObject<boolean>
+}
+
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>
+
+export interface UseHoverProps {
+  enabled?: boolean
+  delay?: Delay
+  restMs?: number
+  move?: boolean
+  handleClose?: HandleCloseFn | null
+  mouseOnly?: boolean
+}
+
+// called once on mouseleave with the leave position, returns a handler
+// that runs on each subsequent document mousemove event. the returned
+// handler has the original leave x/y baked into its closure so the
+// polygon anchor stays fixed.
+export type HandleCloseFn = {
+  (context: {
+    x: number
+    y: number
+    placement: string
+    elements: {
+      reference: Element
+      floating: HTMLElement
+      domReference: Element
+    }
+    onClose: () => void
+    tree?: any
+    leave?: boolean
+  }): (event: MouseEvent) => void
+  __options?: SafePolygonOptions
+}
+
+export interface SafePolygonOptions {
+  requireIntent?: boolean
+  buffer?: number
+  blockPointerEvents?: boolean
+  /** render the safe polygon on screen for debugging */
+  __debug?: boolean
+}
+
+export interface UseFocusProps {
+  enabled?: boolean
+  visibleOnly?: boolean
+}
+
+export interface UseRoleProps {
+  enabled?: boolean
+  role?:
+    | 'dialog'
+    | 'tooltip'
+    | 'alertdialog'
+    | 'menu'
+    | 'listbox'
+    | 'grid'
+    | 'tree'
+    | 'select'
+    | 'combobox'
+    | 'label'
+}
+
+export interface UseClickProps {
+  enabled?: boolean
+  event?: 'click' | 'mousedown'
+  toggle?: boolean
+  ignoreMouse?: boolean
+  keyboardHandlers?: boolean
+  stickIfOpen?: boolean
+}
+
+export interface UseListNavigationProps {
+  listRef: RefObject<Array<HTMLElement | null>>
+  activeIndex: number | null
+  selectedIndex?: number | null
+  onNavigate?: (index: number | null) => void
+  enabled?: boolean
+  loop?: boolean
+  nested?: boolean
+  rtl?: boolean
+  virtual?: boolean
+  focusItemOnOpen?: boolean | 'auto'
+  focusItemOnHover?: boolean
+  openOnArrowKeyDown?: boolean
+  scrollItemIntoView?: boolean | ScrollIntoViewOptions
+  allowEscape?: boolean
+  orientation?: 'vertical' | 'horizontal' | 'both'
+  disabledIndices?: Array<number> | ((index: number) => boolean)
+  cols?: number
+}
+
+export interface UseTypeaheadProps {
+  listRef: RefObject<Array<string | null>>
+  activeIndex: number | null
+  selectedIndex?: number | null
+  onMatch?: (index: number) => void
+  onTypingChange?: (isTyping: boolean) => void
+  enabled?: boolean
+  findMatch?:
+    | null
+    | ((list: Array<string | null>, typedString: string) => string | null | undefined)
+  resetMs?: number
+  ignoreKeys?: string[]
+}
+
+export interface UseInnerOffsetProps {
+  enabled?: boolean
+  onChange: (offset: number | ((prev: number) => number)) => void
+  overflowRef: RefObject<any>
+  scrollRef?: RefObject<HTMLElement | null>
+}