@ozen-ui/kit/__inner__/esm/hooks/useFocusList/useFocusList.js

React component library

import { useCallback } from 'react';
import { getNextIndex } from '../../utils/getNextIndex';
import { getPrevIndex } from '../../utils/getPrevIndex';
import { isKey } from '../../utils/isKey';
import { isKeys } from '../../utils/isKeys';
import { useUniqueId } from '../useUniqueId';
export function useFocusList() {
    var name = useUniqueId();
    var onKeyDown = useCallback(function (event) {
        if (!isKeys(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
            return;
        }
        event.preventDefault();
        var items = document.querySelectorAll("[data-focus-list=\"".concat(name, "\"]"));
        if (isKey(event, 'Home')) {
            items.item(0).focus();
            return;
        }
        if (isKey(event, 'Home')) {
            items.item(items.length - 1).focus();
            return;
        }
        var currentEl = event.target;
        var currentIndex = Array.from(items).indexOf(currentEl);
        var newIndex = isKey(event, 'ArrowUp')
            ? getPrevIndex(currentIndex, items.length)
            : getNextIndex(currentIndex, items.length);
        var newEl = items.item(newIndex);
        newEl.focus();
    }, []);
    return { 'data-focus-list': name, onKeyDown: onKeyDown };
}