@kiwicom/orbit-components/es/hooks/useFocusTrap/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from "react";
import FOCUSABLE_ELEMENT_SELECTORS from "./consts";
import KEY_CODE_MAP from "../../common/keyMaps";

var manageFocus = function manageFocus(ref, triggered) {
  if (triggered && ref.current) {
    var focusableElements = ref.current.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS);

    if (focusableElements.length > 0) {
      var firstFocusableEl = focusableElements[0];
      var lastFocusableEl = focusableElements[focusableElements.length - 1];
      return {
        first: firstFocusableEl,
        last: lastFocusableEl
      };
    }
  }

  return {
    first: null,
    last: null
  };
};

var useFocusTrap = function useFocusTrap(ref) {
  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      triggered = _React$useState2[0],
      setTriggered = _React$useState2[1];

  React.useEffect(function () {
    var handleKeyDown = function handleKeyDown(ev) {
      if (ev.keyCode === KEY_CODE_MAP.TAB) {
        if (!triggered) {
          setTriggered(true);
        }

        var _manageFocus = manageFocus(ref, triggered),
            first = _manageFocus.first,
            last = _manageFocus.last;

        if (ev.shiftKey && last && (document.activeElement === first || document.activeElement === ref.current)) {
          ev.preventDefault();
          last.focus();
        } else if (!ev.shiftKey && first && document.activeElement === last) {
          ev.preventDefault();
          first.focus();
        }
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return function () {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [triggered, ref]);
};

export default useFocusTrap;