@clayui/shared/lib/FocusScope.js

ClayShared component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FocusScope = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Keys = require("./Keys");
var _useFocusManagement = require("./useFocusManagement");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } /**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * The context helps to identify if the FocusScope is being declared nested, to
 * avoid focus being controlled by more than one focus manager, we stop event
 * propagation to prevent the parent focus generator from doing anything.
 */
var FocusConflictContext = /*#__PURE__*/_react.default.createContext(false);

/**
 * FocusScope is a component only for controlling focus and listening
 * for children's key down events, since the component handles the `onKeyDown`
 * event.
 */
var FocusScope = exports.FocusScope = function FocusScope(_ref) {
  var _ref$arrowKeysLeftRig = _ref.arrowKeysLeftRight,
    arrowKeysLeftRight = _ref$arrowKeysLeftRig === void 0 ? false : _ref$arrowKeysLeftRig,
    _ref$arrowKeysUpDown = _ref.arrowKeysUpDown,
    arrowKeysUpDown = _ref$arrowKeysUpDown === void 0 ? true : _ref$arrowKeysUpDown,
    children = _ref.children,
    onFocus = _ref.onFocus;
  var elRef = _react.default.useRef(null);
  var focusManager = (0, _useFocusManagement.useFocusManagement)(elRef);
  var hasParentFocus = (0, _react.useContext)(FocusConflictContext);
  var _onKeyDown = function onKeyDown(event) {
    var key = event.key,
      shiftKey = event.shiftKey;
    if (arrowKeysUpDown && key === _Keys.Keys.Down || arrowKeysLeftRight && key === _Keys.Keys.Right || key === _Keys.Keys.Tab && !shiftKey) {
      var next = focusManager.focusNext();
      if (next) {
        event.preventDefault();
        if (onFocus) {
          onFocus(next);
        }
      }
    } else if (arrowKeysUpDown && key === _Keys.Keys.Up || arrowKeysLeftRight && key === _Keys.Keys.Left || key === _Keys.Keys.Tab && shiftKey) {
      var previous = focusManager.focusPrevious();
      if (previous) {
        event.preventDefault();
        if (onFocus) {
          onFocus(previous);
        }
      }
    }
  };
  var child = typeof children === 'function' ? children(focusManager) : children;
  return /*#__PURE__*/_react.default.createElement(FocusConflictContext.Provider, {
    value: true
  }, /*#__PURE__*/_react.default.cloneElement(child, {
    onKeyDown: function onKeyDown(event) {
      if (hasParentFocus) {
        event.stopPropagation();
      }

      // If the element already exists a `onKeyDown` event should
      // invoke it as well.
      if (child.props.onKeyDown) {
        child.props.onKeyDown(event);
      }
      _onKeyDown(event);
    },
    ref: function ref(r) {
      if (r) {
        elRef.current = r;
        var ref = child.ref;
        if (ref) {
          if (_typeof(ref) === 'object') {
            ref.current = r;
          } else if (typeof ref === 'function') {
            ref(r);
          }
        }
      }
    }
  }));
};