@hitachivantara/uikit-react-core/dist/esm/hooks/useFocus.js

Core React components for the NEXT Design System.

import { useMemo } from "react";
import { getDocument } from "../utils/document.js";
const getActiveEl = () => getDocument()?.activeElement || null;
function makeFocusUtils(containerRef) {
  function focus(el, checkFocus = true) {
    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {
      el?.focus();
    }
  }
  return {
    focusPrevious() {
      focus(getActiveEl()?.previousElementSibling);
    },
    focusNext() {
      focus(getActiveEl()?.nextElementSibling);
    },
    focusFirst() {
      focus(getActiveEl()?.parentElement?.firstElementChild);
    },
    focusLast() {
      focus(getActiveEl()?.parentElement?.lastElementChild);
    },
    focusChild(index) {
      focus(containerRef.current?.children[index], false);
    },
    focusSibling(index) {
      focus(getActiveEl()?.parentElement?.children[index]);
    }
  };
}
function useFocus({
  containerRef
}) {
  return useMemo(() => makeFocusUtils(containerRef), [containerRef]);
}
export {
  useFocus
};