React hook that detects pointer presses outside elements to close UI like dropdowns or popovers, listening on the document and using event.composedPath() so it works across portals and Shadow DOM where event.target can be misleading due to event retargeting.

use-outside-press.ts

import * as React from 'react';

export function useOutsidePress(
  enabled: boolean,
  refs: React.RefObject<HTMLElement | null>[],
  onOutsidePress: () => void,
) {
  const callbackRef = React.useRef(onOutsidePress);
  React.useLayoutEffect(() => {
    callbackRef.current = onOutsidePress;
  });

  React.useEffect(() => {
    if (!enabled) return;

    const handler = (event: PointerEvent) => {
      const path = event.composedPath();
      const isInside = refs.some(
        (ref) => ref.current && path.includes(ref.current),
      );
      if (!isInside) callbackRef.current();
    };

    document.addEventListener('pointerdown', handler, true);
    return () => document.removeEventListener('pointerdown', handler, true);
  }, [enabled, refs]);
}