@onesy/ui-react/Focus/Focus.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.queryMatchFocusable = exports.matches = exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const KEYCODES = {
  tab: 'Tab'
};
const matches = value => {
  const method = (0, _utils.is)('element', value) && (value.matches || value['webkitMatchesSelector'] || value['mozMatchesSelector'] || value['oMatchesSelector'] || value['msMatchesSelector']);
  if (!method) return () => false;
  return method.bind(value);
};
exports.matches = matches;
const queryMatchFocusable = exports.queryMatchFocusable = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)';
const Focus = props_ => {
  var _theme$ui, _theme$ui2;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyFocus) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const refs = {
    focusStart: _react.default.useRef(undefined),
    focusEnd: _react.default.useRef(undefined)
  };
  const {
      ref,
      children
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const getElements = (value = refs.focusStart.current) => {
    // Setup siblings array and get the first sibling
    const allElements = [];
    let element = value.parentNode.firstChild;

    // Loop through each sibling and push to the array
    while (element) {
      if (element.nodeType === 1 && element !== value) allElements.push(element);
      element = element.nextSibling;
    }
    const focusEndIndex = allElements.findIndex(item => item === refs.focusEnd.current);
    return allElements.slice(0, focusEndIndex).flatMap(item_0 => [matches(item_0)(queryMatchFocusable) ? item_0 : undefined, ...Array.from(item_0.querySelectorAll(queryMatchFocusable))].filter(Boolean));
  };
  const onKeyDownUp = event => {
    const isTabPressed = event.key === 'Tab' || event.code === KEYCODES.tab;
    if (!isTabPressed) return;
    if (event.shiftKey) {
      if (document.activeElement === refs.focusStart.current) {
        const elements = getElements();
        if (elements.length) elements[elements.length - 1].focus();
        event.preventDefault();
      }
    } else {
      if (document.activeElement === refs.focusEnd.current || document.activeElement === refs.focusStart.current) {
        const elements_0 = getElements();
        if (elements_0.length) elements_0[0].focus();
        event.preventDefault();
      }
    }
  };
  _react.default.useEffect(() => {
    var _refs$focusStart$curr;
    const rootDocument = ((_refs$focusStart$curr = refs.focusStart.current) === null || _refs$focusStart$curr === void 0 ? void 0 : _refs$focusStart$curr.ownerDocument) || window.document;
    rootDocument.addEventListener('keydown', onKeyDownUp);
    rootDocument.addEventListener('keyup', onKeyDownUp);
    return () => {
      rootDocument.removeEventListener('keydown', onKeyDownUp);
      rootDocument.removeEventListener('keyup', onKeyDownUp);
    };
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
      ref: item_1 => {
        if (ref) {
          if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
        }
        refs.focusStart.current = item_1;
      },
      tabIndex: 0
    }, other)), children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ref: refs.focusEnd,
      tabIndex: 0
    })]
  });
};
Focus.displayName = 'onesy-Focus';
var _default = exports.default = Focus;