@atlaskit/editor-plugin-mentions/dist/es2019/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 const useFocusTrap = ({
  targetRef
}) => {
  useEffect(() => {
    if (!targetRef) {
      return;
    }
    const trapConfig = {
      clickOutsideDeactivates: true,
      escapeDeactivates: true,
      initialFocus: targetRef,
      fallbackFocus: targetRef,
      returnFocusOnDeactivate: true
    };
    const focusTrap = createFocusTrap(targetRef, trapConfig);

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