@amaui/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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is } from '@amaui/utils';
import { useAmauiTheme } from '@amaui/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 = useAmauiTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiFocus?.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 = 'amaui-Focus';
export default Focus;