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

UI for React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["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) { _defineProperty(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; }
import React from 'react';
import { is } from '@onesy/utils';
import { useOnesyTheme } from '@onesy/style-react';
const KEYCODES = {
  tab: 'Tab'
};
export const matches = value => {
  const method = is('element', value) && (value.matches || value['webkitMatchesSelector'] || value['mozMatchesSelector'] || value['oMatchesSelector'] || value['msMatchesSelector']);
  if (!method) return () => false;
  return method.bind(value);
};
export const 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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useOnesyTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFocus?.props?.default), props_), [props_]);
  const refs = {
    focusStart: React.useRef(undefined),
    focusEnd: React.useRef(undefined)
  };
  const {
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const getElements = function () {
    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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 => [matches(item)(queryMatchFocusable) ? item : undefined, ...Array.from(item.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 = getElements();
        if (elements.length) elements[0].focus();
        event.preventDefault();
      }
    }
  };
  React.useEffect(() => {
    const rootDocument = refs.focusStart.current?.ownerDocument || window.document;
    rootDocument.addEventListener('keydown', onKeyDownUp);
    rootDocument.addEventListener('keyup', onKeyDownUp);
    return () => {
      rootDocument.removeEventListener('keydown', onKeyDownUp);
      rootDocument.removeEventListener('keyup', onKeyDownUp);
    };
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
    ref: item => {
      if (ref) {
        if (is('function', ref)) ref(item);else ref.current = item;
      }
      refs.focusStart.current = item;
    },
    tabIndex: 0
  }, other)), children, /*#__PURE__*/React.createElement("div", {
    ref: refs.focusEnd,
    tabIndex: 0
  }));
});
Focus.displayName = 'onesy-Focus';
export default Focus;