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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useCallback, useEffect, useState } from 'react';
import { bind } from 'bind-event-listener';
import { getDocument } from '@atlaskit/browser-apis';
export var useFocusWithin = function useFocusWithin(ref) {
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    active = _useState2[0],
    setActive = _useState2[1];
  var updateFocusedElement = useCallback(function () {
    var doc = getDocument();
    var 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(function () {
    var doc = getDocument();
    if (!doc) {
      return;
    }
    updateFocusedElement();
    var unbindFocusIn = bind(doc, {
      type: 'focusin',
      listener: updateFocusedElement
    });
    return function () {
      unbindFocusIn();
    };
  }, [updateFocusedElement]);
  return active;
};