useFocusWithin

Tracks whether focus is inside an element, for an item that moves focus when what the person was using goes or finishes. An item moves focus only when focus is inside it, or on its control that was removed, never because document.activeElement is body: a poll, a hold or a timer that finishes while the person is elsewhere, or nowhere, leaves focus alone (announce instead). A target held for the next render is dropped as soon as the person moves focus out, so it never pulls focus back later.

Focus leaves when it lands on an element outside, when the person presses outside, or when the element that had it blurs to nowhere and is still on the page; the window losing focus isn't leaving. Focus already inside when the item mounts (a control's autoFocus) counts as inside. Read inside() and held() in handlers and effects, not while rendering.

const focus = useFocusWithin<"heading" | "retry">(root)
// In the handler that removes what had focus:
if (focus.inside()) focus.hold("heading")
else announce(t("done"))
// In an effect, once the next render has drawn the target:
React.useEffect(() => {
  const target = focus.held()
  if (target === null) return
  focus.drop()
  ;({ heading: heading.current, retry: retry.current })[target]?.focus()
})