useSafeArea#

useSafeArea keeps a hover-opened floating element open while the pointer travels the empty gap toward it. When the pointer leaves the trigger it would normally fire pointerleave and close the element before the pointer arrives. This hook watches pointermove and treats the trigger, the floating element, and a safe corridor between them, a quad spanning the trigger's edge to the floating element's near edge, as one safe region: while the pointer rests anywhere inside it the element stays open, including when it dwells in the gap. Once the pointer leaves that region the element closes after a short grace period, which a move back inside cancels.

See also: usePosition, useDismiss, Tooltip.

Demo#

import { useSafeArea } from 'hono-preact-ui';
import { useRef, useState } from 'preact/hooks';

// A hover-opened card sitting across a diagonal gap from its trigger. useSafeArea
// keeps it open while the pointer travels the corridor toward it, even on a
// diagonal that does not aim straight at the card, and closes it after the grace
// period once the pointer leaves the safe region. The card is CSS-placed to the
// lower-right with a deliberate gap. Styling: .docs-safearea* in root.css.
export function UseSafeAreaDemo() {
  const anchorRef = useRef<HTMLButtonElement>(null);
  const floatingRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);

  useSafeArea({
    enabled: open,
    anchorRef,
    floatingRef,
    onClose: () => setOpen(false),
  });

  return (
    <div class="docs-safearea">
      <button
        ref={anchorRef}
        type="button"
        class="docs-safearea-trigger"
        onPointerEnter={() => setOpen(true)}
      >
        Hover me
      </button>
      {open ? (
        <div
          ref={floatingRef}
          class="docs-safearea-card"
          role="group"
          aria-label="Hover card"
        >
          Move diagonally here. The corridor keeps me open across the gap; leave
          it and I close after a moment.
        </div>
      ) : null}
    </div>
  );
}

Example#

import { useSafeArea } from 'hono-preact-ui';
import { useRef } from 'preact/hooks';

function HoverCard({ open, onClose }: { open: boolean; onClose: () => void }) {
  const anchorRef = useRef<HTMLButtonElement>(null);
  const floatingRef = useRef<HTMLDivElement>(null);

  useSafeArea({ enabled: open, anchorRef, floatingRef, onClose });

  return (
    <>
      <button ref={anchorRef}>Profile</button>
      {open && <div ref={floatingRef}>card content</div>}
    </>
  );
}

How it works#

The safe corridor is a quad joining the trigger's near edge to the floating element's near edge, spanning the gap between them. While the element is open, a pointermove that stays inside the corridor, even on a diagonal that does not aim straight at the element, keeps it open, and so does pausing there. A move that leaves the corridor without reaching the floating element starts the grace timer and then closes the element; returning to the corridor or either element before the grace lapses cancels the close. The point-in-polygon test runs against the live rects of both elements on every move, so the corridor follows them through scroll, resize, and a flipped placement.

Signature#

import { useSafeArea } from 'hono-preact-ui';

function useSafeArea(opts: UseSafeAreaOptions): void;

interface UseSafeAreaOptions {
  enabled: boolean; // typically the open state of a hover-driven element
  anchorRef: RefObject<HTMLElement>; // the trigger the corridor starts from
  floatingRef: RefObject<HTMLElement>; // the floating element it points at
  onClose: () => void; // pointer left the safe region and the grace lapsed
  graceMs?: number; // close grace after leaving the safe region, default 300
}

Options#

It injects no DOM: it listens to pointermove while enabled and runs a point-in-polygon test against the live rects of the two elements, so nothing under the corridor is blocked from interaction. The corridor follows the elements through scroll, resize, and a flipped placement. A pointer session begins only once the pointer has been over the trigger or the floating element, so an element opened by keyboard focus is not closed by unrelated mouse movement (the consumer closes it on blur or Escape instead). If the pointer leaves the document while a session is active, the same grace timer starts, so the element does not hang open when the cursor exits the window. Touch pointers are ignored.