@atlaskit/spotlight

Version:
A spotlight introduces users to points of interest, from focused messages to multi-step tours.
51 lines (49 loc) • 1.61 kB
JavaScript
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useFocusWithin = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
var _browserApis = require("@atlaskit/browser-apis");
var useFocusWithin = exports.useFocusWithin = function useFocusWithin(ref) {
  var _useState = (0, _react.useState)(null),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    active = _useState2[0],
    setActive = _useState2[1];
  var updateFocusedElement = (0, _react.useCallback)(function () {
    var doc = (0, _browserApis.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]);
  (0, _react.useEffect)(function () {
    var doc = (0, _browserApis.getDocument)();
    if (!doc) {
      return;
    }
    updateFocusedElement();
    var unbindFocusIn = (0, _bindEventListener.bind)(doc, {
      type: 'focusin',
      listener: updateFocusedElement
    });
    return function () {
      unbindFocusIn();
    };
  }, [updateFocusedElement]);
  return active;
};