@wordpress/compose/build-module/hooks/use-constrained-tabbing/index.js

WordPress higher-order components (HOCs).

// packages/compose/src/hooks/use-constrained-tabbing/index.js
import { focus } from "@wordpress/dom";
import useRefEffect from "../use-ref-effect";
function useConstrainedTabbing() {
  return useRefEffect((node) => {
    function onKeyDown(event) {
      const { key, shiftKey, target } = event;
      if (key !== "Tab") {
        return;
      }
      const action = shiftKey ? "findPrevious" : "findNext";
      const nextElement = focus.tabbable[action](
        /** @type {HTMLElement} */
        target
      ) || null;
      if (
        /** @type {HTMLElement} */
        target.contains(nextElement)
      ) {
        event.preventDefault();
        nextElement?.focus();
        return;
      }
      if (node.contains(nextElement)) {
        return;
      }
      const domAction = shiftKey ? "append" : "prepend";
      const { ownerDocument } = node;
      const trap = ownerDocument.createElement("div");
      trap.tabIndex = -1;
      node[domAction](trap);
      trap.addEventListener("blur", () => node.removeChild(trap));
      trap.focus();
    }
    node.addEventListener("keydown", onKeyDown);
    return () => {
      node.removeEventListener("keydown", onKeyDown);
    };
  }, []);
}
var use_constrained_tabbing_default = useConstrainedTabbing;
export {
  use_constrained_tabbing_default as default
};
//# sourceMappingURL=index.js.map