@base-ui/react 1.2.0 → 1.3.0

package/esm/floating-ui-react/safePolygon.js

@@ -5,23 +5,37 @@ import { getNodeChildren } from "./utils/nodes.js";
 
 /* eslint-disable no-nested-ternary */
 
-function isPointInPolygon(point, polygon) {
-  const [x, y] = point;
+const CURSOR_SPEED_THRESHOLD = 0.1;
+const CURSOR_SPEED_THRESHOLD_SQUARED = CURSOR_SPEED_THRESHOLD * CURSOR_SPEED_THRESHOLD;
+const POLYGON_BUFFER = 0.5;
+function hasIntersectingEdge(pointX, pointY, xi, yi, xj, yj) {
+  return yi >= pointY !== yj >= pointY && pointX <= (xj - xi) * (pointY - yi) / (yj - yi) + xi;
+}
+function isPointInQuadrilateral(pointX, pointY, x1, y1, x2, y2, x3, y3, x4, y4) {
   let isInsideValue = false;
-  const length = polygon.length;
-  // eslint-disable-next-line no-plusplus
-  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) {
-      isInsideValue = !isInsideValue;
-    }
+  if (hasIntersectingEdge(pointX, pointY, x1, y1, x2, y2)) {
+    isInsideValue = !isInsideValue;
+  }
+  if (hasIntersectingEdge(pointX, pointY, x2, y2, x3, y3)) {
+    isInsideValue = !isInsideValue;
+  }
+  if (hasIntersectingEdge(pointX, pointY, x3, y3, x4, y4)) {
+    isInsideValue = !isInsideValue;
+  }
+  if (hasIntersectingEdge(pointX, pointY, x4, y4, x1, y1)) {
+    isInsideValue = !isInsideValue;
   }
   return isInsideValue;
 }
-function isInside(point, rect) {
-  return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
+function isInsideRect(pointX, pointY, rect) {
+  return pointX >= rect.x && pointX <= rect.x + rect.width && pointY >= rect.y && pointY <= rect.y + rect.height;
+}
+function isInsideAxisAlignedRect(pointX, pointY, x1, y1, x2, y2) {
+  const minX = Math.min(x1, x2);
+  const maxX = Math.max(x1, x2);
+  const minY = Math.min(y1, y2);
+  const maxY = Math.max(y1, y2);
+  return pointX >= minX && pointX <= maxX && pointY >= minY && pointY <= maxY;
 }
 /**
  * Generates a safe polygon area that the user can traverse without closing the
@@ -30,34 +44,9 @@ function isInside(point, rect) {
  */
 export function safePolygon(options = {}) {
   const {
-    buffer = 0.5,
-    blockPointerEvents = false,
-    requireIntent = true
+    blockPointerEvents = false
   } = options;
   const timeout = new Timeout();
-  let hasLanded = false;
-  let lastX = null;
-  let lastY = null;
-  let lastCursorTime = typeof performance !== 'undefined' ? performance.now() : 0;
-  function getCursorSpeed(x, y) {
-    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; // px / ms
-
-    lastX = x;
-    lastY = y;
-    lastCursorTime = currentTime;
-    return speed;
-  }
   const fn = ({
     x,
     y,
@@ -67,36 +56,48 @@ export function safePolygon(options = {}) {
     nodeId,
     tree
   }) => {
-    return function onMouseMove(event) {
-      function close() {
-        timeout.clear();
-        onClose();
+    const side = placement?.split('-')[0];
+    let hasLanded = false;
+    let lastX = null;
+    let lastY = null;
+    let lastCursorTime = typeof performance !== 'undefined' ? performance.now() : 0;
+    function isCursorMovingSlowly(nextX, nextY) {
+      const currentTime = performance.now();
+      const elapsedTime = currentTime - lastCursorTime;
+      if (lastX === null || lastY === null || elapsedTime === 0) {
+        lastX = nextX;
+        lastY = nextY;
+        lastCursorTime = currentTime;
+        return false;
       }
+      const deltaX = nextX - lastX;
+      const deltaY = nextY - lastY;
+      const distanceSquared = deltaX * deltaX + deltaY * deltaY;
+      const thresholdSquared = elapsedTime * elapsedTime * CURSOR_SPEED_THRESHOLD_SQUARED;
+      lastX = nextX;
+      lastY = nextY;
+      lastCursorTime = currentTime;
+      return distanceSquared < thresholdSquared;
+    }
+    function close() {
       timeout.clear();
-      if (!elements.domReference || !elements.floating || placement == null || x == null || y == null) {
+      onClose();
+    }
+    return function onMouseMove(event) {
+      timeout.clear();
+      const domReference = elements.domReference;
+      const floating = elements.floating;
+      if (!domReference || !floating || side == null || x == null || y == null) {
         return undefined;
       }
       const {
         clientX,
         clientY
       } = event;
-      const clientPoint = [clientX, clientY];
       const target = getTarget(event);
       const isLeave = event.type === 'mouseleave';
-      const isOverFloatingEl = contains(elements.floating, target);
-      const isOverReferenceEl = contains(elements.domReference, target);
-      const refRect = elements.domReference.getBoundingClientRect();
-      const rect = elements.floating.getBoundingClientRect();
-      const side = placement.split('-')[0];
-      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;
+      const isOverFloatingEl = contains(floating, target);
+      const isOverReferenceEl = contains(domReference, target);
       if (isOverFloatingEl) {
         hasLanded = true;
         if (!isLeave) {
@@ -105,31 +106,48 @@ export function safePolygon(options = {}) {
       }
       if (isOverReferenceEl) {
         hasLanded = false;
-      }
-      if (isOverReferenceEl && !isLeave) {
-        hasLanded = true;
-        return undefined;
+        if (!isLeave) {
+          hasLanded = true;
+          return undefined;
+        }
       }
 
       // Prevent overlapping floating element from being stuck in an open-close
       // loop: https://github.com/floating-ui/floating-ui/issues/1910
-      if (isLeave && isElement(event.relatedTarget) && contains(elements.floating, event.relatedTarget)) {
+      if (isLeave && isElement(event.relatedTarget) && contains(floating, event.relatedTarget)) {
         return undefined;
       }
+      function hasOpenChildNode() {
+        return Boolean(tree && getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
+      }
+      function closeIfNoOpenChild() {
+        if (!hasOpenChildNode()) {
+          close();
+        }
+      }
 
       // If any nested child is open, abort.
-      if (tree && getNodeChildren(tree.nodesRef.current, nodeId).some(({
-        context
-      }) => context?.open)) {
+      if (hasOpenChildNode()) {
         return undefined;
       }
+      const refRect = domReference.getBoundingClientRect();
+      const rect = floating.getBoundingClientRect();
+      const cursorLeaveFromRight = x > rect.right - rect.width / 2;
+      const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
+      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 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();
+        closeIfNoOpenChild();
+        return undefined;
       }
 
       // Ignore when the cursor is within the rectangular trough between the
@@ -137,73 +155,85 @@ export function safePolygon(options = {}) {
       // 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 = [];
+      let isInsideTroughRect = false;
       switch (side) {
         case 'top':
-          rectPoly = [[left, refRect.top + 1], [left, rect.bottom - 1], [right, rect.bottom - 1], [right, refRect.top + 1]];
+          isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, left, refRect.top + 1, right, rect.bottom - 1);
           break;
         case 'bottom':
-          rectPoly = [[left, rect.top + 1], [left, refRect.bottom - 1], [right, refRect.bottom - 1], [right, rect.top + 1]];
+          isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, left, rect.top + 1, right, refRect.bottom - 1);
           break;
         case 'left':
-          rectPoly = [[rect.right - 1, bottom], [rect.right - 1, top], [refRect.left + 1, top], [refRect.left + 1, bottom]];
+          isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, rect.right - 1, bottom, refRect.left + 1, top);
           break;
         case 'right':
-          rectPoly = [[refRect.right - 1, bottom], [refRect.right - 1, top], [rect.left + 1, top], [rect.left + 1, bottom]];
+          isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, refRect.right - 1, bottom, rect.left + 1, top);
           break;
         default:
       }
-      function getPolygon([px, py]) {
-        switch (side) {
-          case 'top':
-            {
-              const cursorPointOne = [isFloatingWider ? px + buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py + buffer + 1];
-              const cursorPointTwo = [isFloatingWider ? px - buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py + buffer + 1];
-              const commonPoints = [[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 = [isFloatingWider ? px + buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py - buffer];
-              const cursorPointTwo = [isFloatingWider ? px - buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py - buffer];
-              const commonPoints = [[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 = [px + buffer + 1, isFloatingTaller ? py + buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4];
-              const cursorPointTwo = [px + buffer + 1, isFloatingTaller ? py - buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4];
-              const commonPoints = [[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 = [px - buffer, isFloatingTaller ? py + buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4];
-              const cursorPointTwo = [px - buffer, isFloatingTaller ? py - buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4];
-              const commonPoints = [[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];
-            }
-          default:
-            return [];
-        }
+      if (isInsideTroughRect) {
+        return undefined;
       }
-      if (isPointInPolygon([clientX, clientY], rectPoly)) {
+      if (hasLanded && !isInsideRect(clientX, clientY, refRect)) {
+        closeIfNoOpenChild();
         return undefined;
       }
-      if (hasLanded && !isOverReferenceRect) {
-        return close();
+      if (!isLeave && isCursorMovingSlowly(clientX, clientY)) {
+        closeIfNoOpenChild();
+        return undefined;
       }
-      if (!isLeave && requireIntent) {
-        const cursorSpeed = getCursorSpeed(event.clientX, event.clientY);
-        const cursorSpeedThreshold = 0.1;
-        if (cursorSpeed !== null && cursorSpeed < cursorSpeedThreshold) {
-          return close();
-        }
+      let isInsidePolygon = false;
+      switch (side) {
+        case 'top':
+          {
+            const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+            const cursorPointOneX = isFloatingWider ? x + cursorXOffset : cursorLeaveFromRight ? x + cursorXOffset : x - cursorXOffset;
+            const cursorPointTwoX = isFloatingWider ? x - cursorXOffset : cursorLeaveFromRight ? x + cursorXOffset : x - cursorXOffset;
+            const cursorPointY = y + POLYGON_BUFFER + 1;
+            const commonYLeft = cursorLeaveFromRight ? rect.bottom - POLYGON_BUFFER : isFloatingWider ? rect.bottom - POLYGON_BUFFER : rect.top;
+            const commonYRight = cursorLeaveFromRight ? isFloatingWider ? rect.bottom - POLYGON_BUFFER : rect.top : rect.bottom - POLYGON_BUFFER;
+            isInsidePolygon = isPointInQuadrilateral(clientX, clientY, cursorPointOneX, cursorPointY, cursorPointTwoX, cursorPointY, rect.left, commonYLeft, rect.right, commonYRight);
+            break;
+          }
+        case 'bottom':
+          {
+            const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+            const cursorPointOneX = isFloatingWider ? x + cursorXOffset : cursorLeaveFromRight ? x + cursorXOffset : x - cursorXOffset;
+            const cursorPointTwoX = isFloatingWider ? x - cursorXOffset : cursorLeaveFromRight ? x + cursorXOffset : x - cursorXOffset;
+            const cursorPointY = y - POLYGON_BUFFER;
+            const commonYLeft = cursorLeaveFromRight ? rect.top + POLYGON_BUFFER : isFloatingWider ? rect.top + POLYGON_BUFFER : rect.bottom;
+            const commonYRight = cursorLeaveFromRight ? isFloatingWider ? rect.top + POLYGON_BUFFER : rect.bottom : rect.top + POLYGON_BUFFER;
+            isInsidePolygon = isPointInQuadrilateral(clientX, clientY, cursorPointOneX, cursorPointY, cursorPointTwoX, cursorPointY, rect.left, commonYLeft, rect.right, commonYRight);
+            break;
+          }
+        case 'left':
+          {
+            const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+            const cursorPointOneY = isFloatingTaller ? y + cursorYOffset : cursorLeaveFromBottom ? y + cursorYOffset : y - cursorYOffset;
+            const cursorPointTwoY = isFloatingTaller ? y - cursorYOffset : cursorLeaveFromBottom ? y + cursorYOffset : y - cursorYOffset;
+            const cursorPointX = x + POLYGON_BUFFER + 1;
+            const commonXTop = cursorLeaveFromBottom ? rect.right - POLYGON_BUFFER : isFloatingTaller ? rect.right - POLYGON_BUFFER : rect.left;
+            const commonXBottom = cursorLeaveFromBottom ? isFloatingTaller ? rect.right - POLYGON_BUFFER : rect.left : rect.right - POLYGON_BUFFER;
+            isInsidePolygon = isPointInQuadrilateral(clientX, clientY, commonXTop, rect.top, commonXBottom, rect.bottom, cursorPointX, cursorPointOneY, cursorPointX, cursorPointTwoY);
+            break;
+          }
+        case 'right':
+          {
+            const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+            const cursorPointOneY = isFloatingTaller ? y + cursorYOffset : cursorLeaveFromBottom ? y + cursorYOffset : y - cursorYOffset;
+            const cursorPointTwoY = isFloatingTaller ? y - cursorYOffset : cursorLeaveFromBottom ? y + cursorYOffset : y - cursorYOffset;
+            const cursorPointX = x - POLYGON_BUFFER;
+            const commonXTop = cursorLeaveFromBottom ? rect.left + POLYGON_BUFFER : isFloatingTaller ? rect.left + POLYGON_BUFFER : rect.right;
+            const commonXBottom = cursorLeaveFromBottom ? isFloatingTaller ? rect.left + POLYGON_BUFFER : rect.right : rect.left + POLYGON_BUFFER;
+            isInsidePolygon = isPointInQuadrilateral(clientX, clientY, cursorPointX, cursorPointOneY, cursorPointX, cursorPointTwoY, commonXTop, rect.top, commonXBottom, rect.bottom);
+            break;
+          }
+        default:
       }
-      if (!isPointInPolygon([clientX, clientY], getPolygon([x, y]))) {
-        close();
-      } else if (!hasLanded && requireIntent) {
-        timeout.start(40, close);
+      if (!isInsidePolygon) {
+        closeIfNoOpenChild();
+      } else if (!hasLanded) {
+        timeout.start(40, closeIfNoOpenChild);
       }
       return undefined;
     };

package/esm/floating-ui-react/types.d.ts

@@ -11,7 +11,8 @@ export type { UseFloatingPortalNodeProps } from "./components/FloatingPortal.js"
 export type { UseClientPointProps } from "./hooks/useClientPoint.js";
 export type { UseDismissProps } from "./hooks/useDismiss.js";
 export type { UseFocusProps } from "./hooks/useFocus.js";
-export type { UseHoverProps, HandleCloseContext, HandleClose } from "./hooks/useHover.js";
+export type { UseHoverProps } from "./hooks/useHover.js";
+export type { HandleCloseContext, HandleClose } from "./hooks/useHoverShared.js";
 export type { UseHoverFloatingInteractionProps } from "./hooks/useHoverFloatingInteraction.js";
 export type { UseHoverReferenceInteractionProps } from "./hooks/useHoverReferenceInteraction.js";
 export type { UseListNavigationProps } from "./hooks/useListNavigation.js";
@@ -75,7 +76,7 @@ export type FloatingTreeType = FloatingTreeStore;
 export interface ElementProps {
   reference?: React.HTMLProps<Element> | undefined;
   floating?: React.HTMLProps<HTMLElement> | undefined;
-  item?: (React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>)) | undefined;
+  item?: React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>) | undefined;
   trigger?: React.HTMLProps<Element> | undefined;
 }
 export type ReferenceType = Element | VirtualElement;
@@ -100,11 +101,11 @@ export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'>
     /**
      * Externally passed reference element. Store in state.
      */
-    reference?: (ReferenceType | null) | undefined;
+    reference?: ReferenceType | null | undefined;
     /**
      * Externally passed floating element. Store in state.
      */
-    floating?: (HTMLElement | null) | undefined;
+    floating?: HTMLElement | null | undefined;
   } | undefined;
   /**
    * An event callback that is invoked when the floating element is opened or

package/esm/floating-ui-react/utils/composite.d.ts

@@ -45,4 +45,5 @@ export declare function getGridCellIndexOfCorner(index: number, sizes: Dimension
 /** Gets all cell indices that correspond to the specified indices */
 export declare function getGridCellIndices(indices: (number | undefined)[], cellMap: (number | undefined)[]): number[];
 export declare function isListIndexDisabled(listRef: React.RefObject<ReadonlyArray<HTMLElement | null>>, index: number, disabledIndices?: DisabledIndices): boolean;
+export declare function isElementVisible(element: Element): boolean;
 export {};