Function useHover

packages/react-aria/src/interactions/useHover.ts:92–243

(props: HoverProps)

 * across browsers and platforms, and ignores emulated mouse events on touch devices.
 */
export function useHover(props: HoverProps): HoverResult {
  let {onHoverStart, onHoverChange, onHoverEnd, isDisabled} = props;

  let [isHovered, setHovered] = useState(false);
  let state = useRef({
    isHovered: false,
    ignoreEmulatedMouseEvents: false,
    pointerType: '',
    target: null
  }).current;

  useEffect(setupGlobalTouchEvents, []);
  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();

  let {hoverProps, triggerHoverEnd} = useMemo(() => {
    let triggerHoverStart = (event, pointerType) => {
      state.pointerType = pointerType;
      if (
        isDisabled ||
        pointerType === 'touch' ||
        state.isHovered ||
        !nodeContains(event.currentTarget, getEventTarget(event) as Element)
      ) {
        return;
      }

      state.isHovered = true;
      let target = event.currentTarget;
      state.target = target;

      // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
      // even though the originally hovered target may have shrunk in size so it is no longer hovered.
      // However, a pointerover event will be fired on the new target the mouse is over.
      // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.
      addGlobalListener(
        getOwnerDocument(getEventTarget(event) as Element),
        'pointerover',
        e => {
          if (
            state.isHovered &&
            state.target &&
            !nodeContains(state.target, getEventTarget(e) as Element)
          ) {
            // oxlint-disable-next-line react/react-compiler
            triggerHoverEnd(e, e.pointerType);
          }
        },
        {capture: true}
      );

      if (onHoverStart) {
        onHoverStart({
          type: 'hoverstart',
          target,
          pointerType
        });
      }