@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
51 lines (50 loc) • 1.73 kB
JavaScript
"use client";
import * as __rspack_external_react from "react";
const FOCUSABLE_SELECTOR = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]), [contenteditable]';
function useFocusManager(containerRef) {
const getFocusable = __rspack_external_react.useCallback(()=>{
if (!containerRef.current) return [];
return [
...containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR)
].filter((element)=>!element.hasAttribute("disabled") && element.tabIndex >= 0);
}, [
containerRef
]);
const focusFirst = __rspack_external_react.useCallback(()=>{
getFocusable()[0]?.focus();
}, [
getFocusable
]);
const focusLast = __rspack_external_react.useCallback(()=>{
const items = getFocusable();
items.at(-1)?.focus();
}, [
getFocusable
]);
const focusNext = __rspack_external_react.useCallback(()=>{
const items = getFocusable();
const current = document.activeElement;
const index = items.indexOf(current);
const next = items[index + 1] ?? items[0];
next?.focus();
}, [
getFocusable
]);
const focusPrevious = __rspack_external_react.useCallback(()=>{
const items = getFocusable();
const current = document.activeElement;
const index = items.indexOf(current);
const previous = items[index - 1] ?? items.at(-1);
previous?.focus();
}, [
getFocusable
]);
return {
focusFirst,
focusLast,
focusNext,
focusPrevious
};
}
export { useFocusManager };
//# sourceMappingURL=useFocusManager.js.map