@atlaskit/spotlight/dist/es2019/utils/use-focus-within/index.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

import { useCallback, useEffect, useState } from 'react';
import { bind } from 'bind-event-listener';
import { getDocument } from '@atlaskit/browser-apis';
export const useFocusWithin = ref => {
  const [active, setActive] = useState(null);
  const updateFocusedElement = useCallback(() => {
    const doc = getDocument();
    const activeElement = (doc === null || doc === void 0 ? void 0 : doc.activeElement) || null;
    if (!ref || !ref.current) {
      setActive(null);
      return;
    }
    if (!activeElement) {
      setActive(null);
      return;
    }

    // Check if the focused element is within the ref element
    if (!ref.current.contains(activeElement)) {
      setActive(null);
      return;
    }
    setActive(activeElement);
  }, [ref]);
  useEffect(() => {
    const doc = getDocument();
    if (!doc) {
      return;
    }
    updateFocusedElement();
    const unbindFocusIn = bind(doc, {
      type: 'focusin',
      listener: updateFocusedElement
    });
    return () => {
      unbindFocusIn();
    };
  }, [updateFocusedElement]);
  return active;
};