@wordpress/components/build/tree-grid/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "TreeGridRow", {
  enumerable: true,
  get: function () {
    return _row.default;
  }
});
Object.defineProperty(exports, "TreeGridCell", {
  enumerable: true,
  get: function () {
    return _cell.default;
  }
});
Object.defineProperty(exports, "TreeGridItem", {
  enumerable: true,
  get: function () {
    return _item.default;
  }
});
exports.default = void 0;

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _lodash = require("lodash");

var _dom = require("@wordpress/dom");

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

var _rovingTabIndex = _interopRequireDefault(require("./roving-tab-index"));

var _row = _interopRequireDefault(require("./row"));

var _cell = _interopRequireDefault(require("./cell"));

var _item = _interopRequireDefault(require("./item"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Return focusables in a row element, excluding those from other branches
 * nested within the row.
 *
 * @param {Element} rowElement The DOM element representing the row.
 *
 * @return {?Array} The array of focusables in the row.
 */
function getRowFocusables(rowElement) {
  const focusablesInRow = _dom.focus.focusable.find(rowElement);

  if (!focusablesInRow || !focusablesInRow.length) {
    return;
  }

  return focusablesInRow.filter(focusable => {
    return focusable.closest('[role="row"]') === rowElement;
  });
}
/**
 * Renders both a table and tbody element, used to create a tree hierarchy.
 *
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
 * @param {Object}    props          Component props.
 * @param {WPElement} props.children Children to be rendered.
 * @param {Object}    ref            A ref to the underlying DOM table element.
 */


function TreeGrid({
  children,
  ...props
}, ref) {
  const onKeyDown = (0, _element.useCallback)(event => {
    const {
      keyCode,
      metaKey,
      ctrlKey,
      altKey,
      shiftKey
    } = event;
    const hasModifierKeyPressed = metaKey || ctrlKey || altKey || shiftKey;

    if (hasModifierKeyPressed || !(0, _lodash.includes)([_keycodes.UP, _keycodes.DOWN, _keycodes.LEFT, _keycodes.RIGHT], keyCode)) {
      return;
    } // The event will be handled, stop propagation.


    event.stopPropagation();
    const {
      activeElement
    } = document;
    const {
      currentTarget: treeGridElement
    } = event;

    if (!treeGridElement.contains(activeElement)) {
      return;
    } // Calculate the columnIndex of the active element.


    const activeRow = activeElement.closest('[role="row"]');
    const focusablesInRow = getRowFocusables(activeRow);
    const currentColumnIndex = focusablesInRow.indexOf(activeElement);

    if ((0, _lodash.includes)([_keycodes.LEFT, _keycodes.RIGHT], keyCode)) {
      // Calculate to the next element.
      let nextIndex;

      if (keyCode === _keycodes.LEFT) {
        nextIndex = Math.max(0, currentColumnIndex - 1);
      } else {
        nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1);
      } // Focus is either at the left or right edge of the grid. Do nothing.


      if (nextIndex === currentColumnIndex) {
        // Prevent key use for anything else. For example, Voiceover
        // will start reading text on continued use of left/right arrow
        // keys.
        event.preventDefault();
        return;
      } // Focus the next element.


      focusablesInRow[nextIndex].focus(); // Prevent key use for anything else. This ensures Voiceover
      // doesn't try to handle key navigation.

      event.preventDefault();
    } else if ((0, _lodash.includes)([_keycodes.UP, _keycodes.DOWN], keyCode)) {
      // Calculate the rowIndex of the next row.
      const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
      const currentRowIndex = rows.indexOf(activeRow);
      let nextRowIndex;

      if (keyCode === _keycodes.UP) {
        nextRowIndex = Math.max(0, currentRowIndex - 1);
      } else {
        nextRowIndex = Math.min(currentRowIndex + 1, rows.length - 1);
      } // Focus is either at the top or bottom edge of the grid. Do nothing.


      if (nextRowIndex === currentRowIndex) {
        // Prevent key use for anything else. For example, Voiceover
        // will start navigating horizontally when reaching the vertical
        // bounds of a table.
        event.preventDefault();
        return;
      } // Get the focusables in the next row.


      const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); // If for some reason there are no focusables in the next row, do nothing.

      if (!focusablesInNextRow || !focusablesInNextRow.length) {
        // Prevent key use for anything else. For example, Voiceover
        // will still focus text when using arrow keys, while this
        // component should limit navigation to focusables.
        event.preventDefault();
        return;
      } // Try to focus the element in the next row that's at a similar column to the activeElement.


      const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1);
      focusablesInNextRow[nextIndex].focus(); // Prevent key use for anything else. This ensures Voiceover
      // doesn't try to handle key navigation.

      event.preventDefault();
    }
  }, []);
  /* Disable reason: A treegrid is implemented using a table element. */

  /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */

  return (0, _element.createElement)(_rovingTabIndex.default, null, (0, _element.createElement)("table", (0, _extends2.default)({}, props, {
    role: "treegrid",
    onKeyDown: onKeyDown,
    ref: ref
  }), (0, _element.createElement)("tbody", null, children)));
  /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
}

var _default = (0, _element.forwardRef)(TreeGrid);

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