@atlaskit/editor-plugin-mentions/dist/esm/ui/useFocusTrap.js

Mentions plugin for @atlaskit/editor-core

/**
 * Custom hook to add focus trap
 * used for focus trap in ReactionPicker
 * copied from useFocusManager in @atlaskit/popup
 */
import { useEffect } from 'react';
import createFocusTrap from 'focus-trap';
export var useFocusTrap = function useFocusTrap(_ref) {
  var targetRef = _ref.targetRef,
    _ref$enabled = _ref.enabled,
    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
  useEffect(function () {
    if (!targetRef || !enabled) {
      return;
    }
    var trapConfig = {
      clickOutsideDeactivates: true,
      escapeDeactivates: true,
      initialFocus: targetRef,
      fallbackFocus: targetRef,
      returnFocusOnDeactivate: true
    };
    var focusTrap = createFocusTrap(targetRef, trapConfig);

    // wait for the popup to reposition itself before we focus
    var frameId = requestAnimationFrame(function () {
      frameId = null;
      focusTrap.activate();
    });
    return function () {
      if (frameId !== null) {
        cancelAnimationFrame(frameId);
        frameId = null;
      }
      focusTrap.deactivate();
    };
  }, [targetRef, enabled]);
};