1
/**
2
 * Call the `whenHoverChange` callback when the element is hovered.
3
 *
4
 * After the mouse leaves the element, there is a 300ms delay by default.
5
 *
6
 * Note: The callback may be called multiple times when the mouse is hovering or hovering out.
7
 *
8
 * See also https://floating-ui.com/docs/useHover
9
 *
10
 * @example
11
 * ```ts
12
 * let hoverTooltip: HTMLElement | null = null;
13
 * const { setReference, setFloating } = whenHover(isHover => {
14
 *   if (!isHover) {
15
 *     hoverTooltip?.remove();
16
 *     return;
17
 *   }
18
 *   const hoverTooltip = document.createElement('div');
19
 *   document.body.append(hoverTooltip);
20
 *   setFloating(hoverTooltip);
21
 * }, { hoverDelay: 500 });
22
 *
23
 * const referenceElement = document.querySelector('.reference');
24
 * setReference(referenceElement);
25
 * ```
26
 */
27
function whenHover(
28
  whenHoverChange: (isHover: boolean, event?: Event) => void,
29
  { leaveDelay = 300, alwayRunWhenNoFloating = true }: WhenHoverOptions = {},
30
) {
31
  /**
32
   * The event listener will be removed when the signal is aborted.
33
   */
34
  const abortController = new AbortController();
35
  let hoverState = false;
36
  let hoverTimeout = 0;
37
  let referenceElement: Element | undefined;
38
  let floatingElement: Element | undefined;
39

40
  const onHover = (e: Event) => {
41
    clearTimeout(hoverTimeout);
42
    if (!hoverState) {
43
      hoverState = true;
44
      whenHoverChange(true, e);
45
      return;
46
    }
47
    // Already hovered
48
    if (
49
      alwayRunWhenNoFloating &&
50
      (!floatingElement || !floatingElement.isConnected)
51
    ) {
52
      // But the floating element is not ready
53
      // so we need to run the callback still
54
      whenHoverChange(true, e);
55
    }
56
  };
57

58
  const onHoverLeave = (e: Event) => {
59
    clearTimeout(hoverTimeout);
60
    hoverTimeout = window.setTimeout(() => {
61
      hoverState = false;
62
      whenHoverChange(false, e);
63
    }, leaveDelay);
64
  };
65

66
  const addHoverListener = (element?: Element) => {
67
    if (!element) return;
68
    // see https://stackoverflow.com/questions/14795099/pure-javascript-to-check-if-something-has-hover-without-setting-on-mouseover-ou
69
    const alreadyHover = element.matches(":hover");
70
    if (alreadyHover && !abortController.signal.aborted) {
71
      // When the element is already hovered, we need to trigger the callback manually
72
      onHover(new MouseEvent("mouseover"));
73
    }
74
    element.addEventListener("mouseover", onHover, {
75
      signal: abortController.signal,
76
    });
77
    element.addEventListener("mouseleave", onHoverLeave, {
78
      signal: abortController.signal,
79
    });
80
  };
81
  const removeHoverListener = (element?: Element) => {
82
    if (!element) return;
83
    element.removeEventListener("mouseover", onHover);
84
    element.removeEventListener("mouseleave", onHoverLeave);
85
  };
86

87
  const setReference = (element?: Element) => {
88
    // Clean previous listeners
89
    removeHoverListener(referenceElement);
90
    addHoverListener(element);
91
    referenceElement = element;
92
  };
93

94
  const setFloating = (element?: Element) => {
95
    // Clean previous listeners
96
    removeHoverListener(floatingElement);
97
    addHoverListener(element);
98
    floatingElement = element;
99
  };
100

101
  return {
102
    setReference,
103
    setFloating,
104
    dispose: () => {
105
      abortController.abort();
106
    },
107
  };
108
}