@zohodesk/a11y/es/FocusScope/FocusControl/useRestoreFocus.js

In this Package, We Provide Some Basic Components For Accessibility.

import { useEffect, useRef } from 'react';
import useId from './useId';
import { applyFocusStyle, preventDOMAvailabllityAndFocus, removeFocusStyle } from '../utils/focusScopeUtil';
import useEvent from '../../hooks/useEvent';
export let newRestoreEle = {};
export default (_ref => {
  let {
    isRestoreFocus,
    onUpdate: onUpdateCallback,
    onClear: onClearCallback
  } = _ref;
  const restoreNodesRef = useRef([]);
  const restoreFocusId = useId();
  const updateNodes = useEvent(nodes => {
    restoreNodesRef.current = nodes;
  });
  const setRestore = useEvent(() => {
    newRestoreEle = {
      el: document.activeElement,
      id: restoreFocusId
    };
    removeFocusStyle({
      ele: document.activeElement
    });
    updateNodes([...restoreNodesRef.current, newRestoreEle]);

    if (onUpdateCallback) {
      updateNodes(onUpdateCallback(restoreNodesRef.current));
    }
  });
  const getLastActiveEl = useEvent(() => {
    let result = restoreNodesRef.current.find(item => item.id === restoreFocusId);
    return result && result.el;
  });
  const fireFocus = useEvent(() => {
    let restoreEl = getLastActiveEl(restoreFocusId);
    preventDOMAvailabllityAndFocus(restoreEl);
    applyFocusStyle({
      ele: restoreEl
    });
  });
  const clearRestore = useEvent(e => {
    fireFocus();

    if (restoreNodesRef.current) {
      updateNodes(restoreNodesRef.current.filter(item => {
        return item.id === restoreFocusId;
      }));
    }

    if (onClearCallback) {
      updateNodes(onClearCallback(restoreNodesRef.current));
    }
  });
  useEffect(() => {
    if (isRestoreFocus) {
      setRestore();
    } else {
      clearRestore();
    }

    return clearRestore;
  }, [isRestoreFocus]);
});