@wordpress/components/build/higher-order/navigate-regions/index.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useNavigateRegions = useNavigateRegions;
exports.default = void 0;

var _element = require("@wordpress/element");

var _compose = require("@wordpress/compose");

var _keycodes = require("@wordpress/keycodes");

/**
 * WordPress dependencies
 */
const defaultShortcuts = {
  previous: ['ctrl+shift+`', _keycodes.rawShortcut.access('p')],
  next: ['ctrl+`', _keycodes.rawShortcut.access('n')]
};

function useNavigateRegions(ref, shortcuts = defaultShortcuts) {
  const [isFocusingRegions, setIsFocusingRegions] = (0, _element.useState)(false);

  function focusRegion(offset) {
    const regions = Array.from(ref.current.querySelectorAll('[role="region"]'));

    if (!regions.length) {
      return;
    }

    let nextRegion = regions[0];
    const selectedIndex = regions.indexOf(ref.current.ownerDocument.activeElement);

    if (selectedIndex !== -1) {
      let nextIndex = selectedIndex + offset;
      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
      nextIndex = nextIndex === regions.length ? 0 : nextIndex;
      nextRegion = regions[nextIndex];
    }

    nextRegion.focus();
    setIsFocusingRegions(true);
  }

  const focusPrevious = (0, _element.useCallback)(() => focusRegion(-1), []);
  const focusNext = (0, _element.useCallback)(() => focusRegion(1), []);
  (0, _compose.useKeyboardShortcut)(shortcuts.previous, focusPrevious, {
    bindGlobal: true
  });
  (0, _compose.useKeyboardShortcut)(shortcuts.next, focusNext, {
    bindGlobal: true
  });
  (0, _element.useEffect)(() => {
    function onClick() {
      setIsFocusingRegions(false);
    }

    ref.current.addEventListener('click', onClick);
    return () => {
      ref.current.removeEventListener('click', onClick);
    };
  }, [setIsFocusingRegions]);

  if (!isFocusingRegions) {
    return;
  }

  return 'is-focusing-regions';
}

var _default = (0, _compose.createHigherOrderComponent)(Component => ({
  shortcuts,
  ...props
}) => {
  const ref = (0, _element.useRef)();
  const className = useNavigateRegions(ref, shortcuts);
  return (0, _element.createElement)("div", {
    ref: ref,
    className: className
  }, (0, _element.createElement)(Component, props));
}, 'navigateRegions');

exports.default = _default;
//# sourceMappingURL=index.js.map