@clayui/shared/lib/cjs/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 (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; }
/**
 * 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.
 */
const 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.
 */
const FocusScope = _ref => {
  let {
    arrowKeysLeftRight = false,
    arrowKeysUpDown = true,
    children,
    onFocus
  } = _ref;
  const elRef = _react.default.useRef(null);
  const focusManager = (0, _useFocusManagement.useFocusManagement)(elRef);
  const onKeyDown = event => {
    const {
      key,
      shiftKey
    } = event;
    if (arrowKeysUpDown && key === _Keys.Keys.Down || arrowKeysLeftRight && key === _Keys.Keys.Right || key === _Keys.Keys.Tab && !shiftKey) {
      const 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) {
      const previous = focusManager.focusPrevious();
      if (previous) {
        event.preventDefault();
        if (onFocus) {
          onFocus(previous);
        }
      }
    }
  };
  const child = typeof children === 'function' ? children(focusManager) : children;
  return /*#__PURE__*/_react.default.createElement(FocusConflictContext.Provider, {
    value: true
  }, /*#__PURE__*/_react.default.cloneElement(child, {
    onKeyDown: event => {
      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: r => {
      if (r) {
        elRef.current = r;
        const {
          ref
        } = child;
        if (ref) {
          if (typeof ref === 'object') {
            // eslint-disable-next-line react-compiler/react-compiler
            ref.current = r;
          } else if (typeof ref === 'function') {
            ref(r);
          }
        }
      }
    }
  }));
};
exports.FocusScope = FocusScope;