@negative-space/roving-focus 1.0.0 → 1.1.0

package/dist/index.d.mts

@@ -1,18 +1,27 @@
 import * as react from 'react';
 
-type RovingFocusItem<Id extends string = string> = {
-    id: Id;
+interface Item {
+    id: string;
     ref: React.RefObject<HTMLElement>;
     disabled?: boolean;
-};
-declare const useRovingFocus: <Item extends RovingFocusItem<Id>, Id extends string = string>() => {
+}
+declare function useRovingFocus(): {
+    activeId: string | null;
+    hasInteracted: boolean;
     registerItem: (item: Item) => void;
-    unregisterItem: (id: Id) => void;
-    activeId: Id | null;
-    setActiveId: react.Dispatch<react.SetStateAction<Id | null>>;
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    onFocus: (event: React.FocusEvent) => void;
-    onBlur: (event: React.FocusEvent) => void;
+    unregisterItem: (id: string) => void;
+    move: (dir: 1 | -1) => void;
+    setActiveId: react.Dispatch<react.SetStateAction<string | null>>;
+    focusItem: (itemId: string) => void;
+    focusFirst: () => void;
+    getFirstEnabledId: () => string;
+    reset: () => void;
+    handleGroupKeyDown: (e: React.KeyboardEvent) => void;
+    handleItemKeyDown: (e: React.KeyboardEvent, itemId: string, onSelect?: (value: string) => void, options?: {
+        role?: "radio" | "option";
+        allowHorizontal?: boolean;
+    }) => void;
+    handleGroupBlur: (e: React.FocusEvent) => void;
 };
 
-export { type RovingFocusItem, useRovingFocus };
+export { useRovingFocus };

package/dist/index.d.ts

@@ -1,18 +1,27 @@
 import * as react from 'react';
 
-type RovingFocusItem<Id extends string = string> = {
-    id: Id;
+interface Item {
+    id: string;
     ref: React.RefObject<HTMLElement>;
     disabled?: boolean;
-};
-declare const useRovingFocus: <Item extends RovingFocusItem<Id>, Id extends string = string>() => {
+}
+declare function useRovingFocus(): {
+    activeId: string | null;
+    hasInteracted: boolean;
     registerItem: (item: Item) => void;
-    unregisterItem: (id: Id) => void;
-    activeId: Id | null;
-    setActiveId: react.Dispatch<react.SetStateAction<Id | null>>;
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    onFocus: (event: React.FocusEvent) => void;
-    onBlur: (event: React.FocusEvent) => void;
+    unregisterItem: (id: string) => void;
+    move: (dir: 1 | -1) => void;
+    setActiveId: react.Dispatch<react.SetStateAction<string | null>>;
+    focusItem: (itemId: string) => void;
+    focusFirst: () => void;
+    getFirstEnabledId: () => string;
+    reset: () => void;
+    handleGroupKeyDown: (e: React.KeyboardEvent) => void;
+    handleItemKeyDown: (e: React.KeyboardEvent, itemId: string, onSelect?: (value: string) => void, options?: {
+        role?: "radio" | "option";
+        allowHorizontal?: boolean;
+    }) => void;
+    handleGroupBlur: (e: React.FocusEvent) => void;
 };
 
-export { type RovingFocusItem, useRovingFocus };
+export { useRovingFocus };

package/dist/index.js

@@ -3,64 +3,130 @@
 var react = require('react');
 
 // src/index.ts
-var useRovingFocus = () => {
+function useRovingFocus() {
   const items = react.useRef([]);
   const [activeId, setActiveId] = react.useState(null);
-  const registerItem = react.useCallback((item) => {
-    if (items.current.some((i) => i.id === item.id)) return;
-    items.current = [...items.current, item];
-  }, []);
+  const [hasInteracted, setHasInteracted] = react.useState(false);
+  const registerItem = react.useCallback(
+    (item) => {
+      const existingIndex = items.current.findIndex((i) => i.id === item.id);
+      if (existingIndex === -1) {
+        items.current.push(item);
+      } else {
+        items.current[existingIndex] = item;
+      }
+      if (!activeId && !item.disabled) {
+        setActiveId(item.id);
+      }
+    },
+    [activeId]
+  );
   const unregisterItem = react.useCallback((id) => {
     items.current = items.current.filter((i) => i.id !== id);
   }, []);
-  const focusItem = react.useCallback((item) => {
-    if (!item || item.disabled) return;
-    setActiveId(item.id);
-    item.ref.current?.focus();
-  }, []);
-  const moveFocus = react.useCallback(
-    (offset) => {
+  const move = react.useCallback(
+    (dir) => {
+      setHasInteracted(true);
       const enabled = items.current.filter((i) => !i.disabled);
       if (!enabled.length) return;
       const index = enabled.findIndex((i) => i.id === activeId);
-      const nextIndex = index === -1 ? 0 : (index + offset + enabled.length) % enabled.length;
-      focusItem(enabled[nextIndex]);
+      const next = enabled[(index + dir + enabled.length) % enabled.length];
+      setActiveId(next.id);
+      next.ref.current?.focus();
+    },
+    [activeId]
+  );
+  const focusItem = react.useCallback((itemId) => {
+    setHasInteracted(true);
+    setActiveId(itemId);
+  }, []);
+  const focusFirst = react.useCallback(() => {
+    const enabled = items.current.filter((i) => !i.disabled);
+    if (enabled.length > 0) {
+      const first = enabled[0];
+      setHasInteracted(true);
+      setActiveId(first.id);
+      first.ref.current?.focus();
+    }
+  }, []);
+  const getFirstEnabledId = react.useCallback(() => {
+    const enabled = items.current.filter((i) => !i.disabled);
+    return enabled[0]?.id ?? null;
+  }, []);
+  const reset = react.useCallback(() => {
+    setHasInteracted(false);
+  }, []);
+  const handleGroupKeyDown = react.useCallback(
+    (e) => {
+      if (!hasInteracted) {
+        if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          focusFirst();
+        }
+      }
     },
-    [activeId, focusItem]
+    [hasInteracted, focusFirst]
   );
-  const onKeyDown = react.useCallback(
-    (event) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        moveFocus(1);
+  const handleItemKeyDown = react.useCallback(
+    (e, itemId, onSelect, options) => {
+      const role = options?.role ?? "radio";
+      const allowHorizontal = options?.allowHorizontal ?? true;
+      if (e.key === "Tab" && e.shiftKey) {
+        e.preventDefault();
+        reset();
+        if (role === "radio") {
+          const fieldset = e.target.closest('[role="radiogroup"]');
+          fieldset?.focus();
+        } else if (role === "option") {
+          const listbox = e.target.closest('[role="listbox"]');
+          listbox?.focus();
+        }
+        return;
+      }
+      if (e.key === "ArrowDown" || allowHorizontal && e.key === "ArrowRight") {
+        e.preventDefault();
+        move(1);
+        return;
       }
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-        moveFocus(-1);
+      if (e.key === "ArrowUp" || allowHorizontal && e.key === "ArrowLeft") {
+        e.preventDefault();
+        move(-1);
+        return;
+      }
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onSelect?.(itemId);
       }
     },
-    [moveFocus]
+    [move, reset]
+  );
+  const handleGroupBlur = react.useCallback(
+    (e) => {
+      const currentTarget = e.currentTarget;
+      setTimeout(() => {
+        if (!currentTarget.contains(document.activeElement)) {
+          reset();
+        }
+      }, 0);
+    },
+    [reset]
   );
-  const onFocus = react.useCallback((event) => {
-    if (event.target === event.currentTarget) {
-      setActiveId(null);
-    }
-  }, []);
-  const onBlur = react.useCallback((event) => {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      setActiveId(null);
-    }
-  }, []);
   return {
+    activeId,
+    hasInteracted,
     registerItem,
     unregisterItem,
-    activeId,
+    move,
     setActiveId,
-    onKeyDown,
-    onFocus,
-    onBlur
+    focusItem,
+    focusFirst,
+    getFirstEnabledId,
+    reset,
+    handleGroupKeyDown,
+    handleItemKeyDown,
+    handleGroupBlur
   };
-};
+}
 
 exports.useRovingFocus = useRovingFocus;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":["useRef","useState","useCallback"],"mappings":"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","file":"index.js","sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\nexport type RovingFocusItem<Id extends string = string> = {\n  id: Id\n  ref: React.RefObject<HTMLElement>\n  disabled?: boolean\n}\n\nexport const useRovingFocus = <Item extends RovingFocusItem<Id>, Id extends string = string>() => {\n  const items = useRef<Item[]>([])\n  const [activeId, setActiveId] = useState<Id | null>(null)\n\n  const registerItem = useCallback((item: Item) => {\n    if (items.current.some((i) => i.id === item.id)) return\n    items.current = [...items.current, item]\n  }, [])\n\n  const unregisterItem = useCallback((id: Id) => {\n    items.current = items.current.filter((i) => i.id !== id)\n  }, [])\n\n  const focusItem = useCallback((item?: Item) => {\n    if (!item || item.disabled) return\n    setActiveId(item.id)\n    item.ref.current?.focus()\n  }, [])\n\n  const moveFocus = useCallback(\n    (offset: number) => {\n      const enabled = items.current.filter((i) => !i.disabled)\n      if (!enabled.length) return\n\n      const index = enabled.findIndex((i) => i.id === activeId)\n      const nextIndex = index === -1 ? 0 : (index + offset + enabled.length) % enabled.length\n\n      focusItem(enabled[nextIndex])\n    },\n    [activeId, focusItem]\n  )\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        moveFocus(1)\n      }\n      if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        moveFocus(-1)\n      }\n    },\n    [moveFocus]\n  )\n\n  const onFocus = useCallback((event: React.FocusEvent) => {\n    if (event.target === event.currentTarget) {\n      setActiveId(null)\n    }\n  }, [])\n\n  const onBlur = useCallback((event: React.FocusEvent) => {\n    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n      setActiveId(null)\n    }\n  }, [])\n\n  return {\n    registerItem,\n    unregisterItem,\n    activeId,\n    setActiveId,\n    onKeyDown,\n    onFocus,\n    onBlur\n  }\n}\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":["useRef","useState","useCallback"],"mappings":"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","file":"index.js","sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\ninterface Item {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  disabled?: boolean\n}\n\nexport function useRovingFocus() {\n  const items = useRef<Item[]>([])\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const [hasInteracted, setHasInteracted] = useState(false)\n\n  const registerItem = useCallback(\n    (item: Item) => {\n      const existingIndex = items.current.findIndex((i) => i.id === item.id)\n\n      if (existingIndex === -1) {\n        items.current.push(item)\n      } else {\n        items.current[existingIndex] = item\n      }\n\n      if (!activeId && !item.disabled) {\n        setActiveId(item.id)\n      }\n    },\n    [activeId]\n  )\n\n  const unregisterItem = useCallback((id: string) => {\n    items.current = items.current.filter((i) => i.id !== id)\n  }, [])\n\n  const move = useCallback(\n    (dir: 1 | -1) => {\n      setHasInteracted(true)\n\n      const enabled = items.current.filter((i) => !i.disabled)\n      if (!enabled.length) return\n\n      const index = enabled.findIndex((i) => i.id === activeId)\n      const next = enabled[(index + dir + enabled.length) % enabled.length]\n\n      setActiveId(next.id)\n      next.ref.current?.focus()\n    },\n    [activeId]\n  )\n\n  const focusItem = useCallback((itemId: string) => {\n    setHasInteracted(true)\n    setActiveId(itemId)\n  }, [])\n\n  const focusFirst = useCallback(() => {\n    const enabled = items.current.filter((i) => !i.disabled)\n    if (enabled.length > 0) {\n      const first = enabled[0]\n      setHasInteracted(true)\n      setActiveId(first.id)\n      first.ref.current?.focus()\n    }\n  }, [])\n\n  const getFirstEnabledId = useCallback(() => {\n    const enabled = items.current.filter((i) => !i.disabled)\n    return enabled[0]?.id ?? null\n  }, [])\n\n  const reset = useCallback(() => {\n    setHasInteracted(false)\n  }, [])\n\n  const handleGroupKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!hasInteracted) {\n        if (\n          e.key === 'ArrowDown' ||\n          e.key === 'ArrowRight' ||\n          e.key === 'ArrowUp' ||\n          e.key === 'ArrowLeft'\n        ) {\n          e.preventDefault()\n          focusFirst()\n        }\n      }\n    },\n    [hasInteracted, focusFirst]\n  )\n\n  const handleItemKeyDown = useCallback(\n    (\n      e: React.KeyboardEvent,\n      itemId: string,\n      onSelect?: (value: string) => void,\n      options?: {\n        role?: 'radio' | 'option'\n        allowHorizontal?: boolean\n      }\n    ) => {\n      const role = options?.role ?? 'radio'\n      const allowHorizontal = options?.allowHorizontal ?? true\n\n      if (e.key === 'Tab' && e.shiftKey) {\n        e.preventDefault()\n        reset()\n        if (role === 'radio') {\n          const fieldset = (e.target as HTMLElement).closest('[role=\"radiogroup\"]') as HTMLElement\n          fieldset?.focus()\n        } else if (role === 'option') {\n          const listbox = (e.target as HTMLElement).closest('[role=\"listbox\"]') as HTMLElement\n          listbox?.focus()\n        }\n        return\n      }\n\n      if (e.key === 'ArrowDown' || (allowHorizontal && e.key === 'ArrowRight')) {\n        e.preventDefault()\n        move(1)\n        return\n      }\n\n      if (e.key === 'ArrowUp' || (allowHorizontal && e.key === 'ArrowLeft')) {\n        e.preventDefault()\n        move(-1)\n        return\n      }\n\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        onSelect?.(itemId)\n      }\n    },\n    [move, reset]\n  )\n\n  const handleGroupBlur = useCallback(\n    (e: React.FocusEvent) => {\n      const currentTarget = e.currentTarget\n      setTimeout(() => {\n        if (!currentTarget.contains(document.activeElement)) {\n          reset()\n        }\n      }, 0)\n    },\n    [reset]\n  )\n\n  return {\n    activeId,\n    hasInteracted,\n    registerItem,\n    unregisterItem,\n    move,\n    setActiveId,\n    focusItem,\n    focusFirst,\n    getFirstEnabledId,\n    reset,\n    handleGroupKeyDown,\n    handleItemKeyDown,\n    handleGroupBlur\n  }\n}\n"]}

package/dist/index.mjs

@@ -1,64 +1,130 @@
 import { useRef, useState, useCallback } from 'react';
 
 // src/index.ts
-var useRovingFocus = () => {
+function useRovingFocus() {
   const items = useRef([]);
   const [activeId, setActiveId] = useState(null);
-  const registerItem = useCallback((item) => {
-    if (items.current.some((i) => i.id === item.id)) return;
-    items.current = [...items.current, item];
-  }, []);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const registerItem = useCallback(
+    (item) => {
+      const existingIndex = items.current.findIndex((i) => i.id === item.id);
+      if (existingIndex === -1) {
+        items.current.push(item);
+      } else {
+        items.current[existingIndex] = item;
+      }
+      if (!activeId && !item.disabled) {
+        setActiveId(item.id);
+      }
+    },
+    [activeId]
+  );
   const unregisterItem = useCallback((id) => {
     items.current = items.current.filter((i) => i.id !== id);
   }, []);
-  const focusItem = useCallback((item) => {
-    if (!item || item.disabled) return;
-    setActiveId(item.id);
-    item.ref.current?.focus();
-  }, []);
-  const moveFocus = useCallback(
-    (offset) => {
+  const move = useCallback(
+    (dir) => {
+      setHasInteracted(true);
       const enabled = items.current.filter((i) => !i.disabled);
       if (!enabled.length) return;
       const index = enabled.findIndex((i) => i.id === activeId);
-      const nextIndex = index === -1 ? 0 : (index + offset + enabled.length) % enabled.length;
-      focusItem(enabled[nextIndex]);
+      const next = enabled[(index + dir + enabled.length) % enabled.length];
+      setActiveId(next.id);
+      next.ref.current?.focus();
+    },
+    [activeId]
+  );
+  const focusItem = useCallback((itemId) => {
+    setHasInteracted(true);
+    setActiveId(itemId);
+  }, []);
+  const focusFirst = useCallback(() => {
+    const enabled = items.current.filter((i) => !i.disabled);
+    if (enabled.length > 0) {
+      const first = enabled[0];
+      setHasInteracted(true);
+      setActiveId(first.id);
+      first.ref.current?.focus();
+    }
+  }, []);
+  const getFirstEnabledId = useCallback(() => {
+    const enabled = items.current.filter((i) => !i.disabled);
+    return enabled[0]?.id ?? null;
+  }, []);
+  const reset = useCallback(() => {
+    setHasInteracted(false);
+  }, []);
+  const handleGroupKeyDown = useCallback(
+    (e) => {
+      if (!hasInteracted) {
+        if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          focusFirst();
+        }
+      }
     },
-    [activeId, focusItem]
+    [hasInteracted, focusFirst]
   );
-  const onKeyDown = useCallback(
-    (event) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        moveFocus(1);
+  const handleItemKeyDown = useCallback(
+    (e, itemId, onSelect, options) => {
+      const role = options?.role ?? "radio";
+      const allowHorizontal = options?.allowHorizontal ?? true;
+      if (e.key === "Tab" && e.shiftKey) {
+        e.preventDefault();
+        reset();
+        if (role === "radio") {
+          const fieldset = e.target.closest('[role="radiogroup"]');
+          fieldset?.focus();
+        } else if (role === "option") {
+          const listbox = e.target.closest('[role="listbox"]');
+          listbox?.focus();
+        }
+        return;
+      }
+      if (e.key === "ArrowDown" || allowHorizontal && e.key === "ArrowRight") {
+        e.preventDefault();
+        move(1);
+        return;
       }
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-        moveFocus(-1);
+      if (e.key === "ArrowUp" || allowHorizontal && e.key === "ArrowLeft") {
+        e.preventDefault();
+        move(-1);
+        return;
+      }
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onSelect?.(itemId);
       }
     },
-    [moveFocus]
+    [move, reset]
+  );
+  const handleGroupBlur = useCallback(
+    (e) => {
+      const currentTarget = e.currentTarget;
+      setTimeout(() => {
+        if (!currentTarget.contains(document.activeElement)) {
+          reset();
+        }
+      }, 0);
+    },
+    [reset]
   );
-  const onFocus = useCallback((event) => {
-    if (event.target === event.currentTarget) {
-      setActiveId(null);
-    }
-  }, []);
-  const onBlur = useCallback((event) => {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      setActiveId(null);
-    }
-  }, []);
   return {
+    activeId,
+    hasInteracted,
     registerItem,
     unregisterItem,
-    activeId,
+    move,
     setActiveId,
-    onKeyDown,
-    onFocus,
-    onBlur
+    focusItem,
+    focusFirst,
+    getFirstEnabledId,
+    reset,
+    handleGroupKeyDown,
+    handleItemKeyDown,
+    handleGroupBlur
   };
-};
+}
 
 export { useRovingFocus };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\nexport type RovingFocusItem<Id extends string = string> = {\n  id: Id\n  ref: React.RefObject<HTMLElement>\n  disabled?: boolean\n}\n\nexport const useRovingFocus = <Item extends RovingFocusItem<Id>, Id extends string = string>() => {\n  const items = useRef<Item[]>([])\n  const [activeId, setActiveId] = useState<Id | null>(null)\n\n  const registerItem = useCallback((item: Item) => {\n    if (items.current.some((i) => i.id === item.id)) return\n    items.current = [...items.current, item]\n  }, [])\n\n  const unregisterItem = useCallback((id: Id) => {\n    items.current = items.current.filter((i) => i.id !== id)\n  }, [])\n\n  const focusItem = useCallback((item?: Item) => {\n    if (!item || item.disabled) return\n    setActiveId(item.id)\n    item.ref.current?.focus()\n  }, [])\n\n  const moveFocus = useCallback(\n    (offset: number) => {\n      const enabled = items.current.filter((i) => !i.disabled)\n      if (!enabled.length) return\n\n      const index = enabled.findIndex((i) => i.id === activeId)\n      const nextIndex = index === -1 ? 0 : (index + offset + enabled.length) % enabled.length\n\n      focusItem(enabled[nextIndex])\n    },\n    [activeId, focusItem]\n  )\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        moveFocus(1)\n      }\n      if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        moveFocus(-1)\n      }\n    },\n    [moveFocus]\n  )\n\n  const onFocus = useCallback((event: React.FocusEvent) => {\n    if (event.target === event.currentTarget) {\n      setActiveId(null)\n    }\n  }, [])\n\n  const onBlur = useCallback((event: React.FocusEvent) => {\n    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n      setActiveId(null)\n    }\n  }, [])\n\n  return {\n    registerItem,\n    unregisterItem,\n    activeId,\n    setActiveId,\n    onKeyDown,\n    onFocus,\n    onBlur\n  }\n}\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\ninterface Item {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  disabled?: boolean\n}\n\nexport function useRovingFocus() {\n  const items = useRef<Item[]>([])\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const [hasInteracted, setHasInteracted] = useState(false)\n\n  const registerItem = useCallback(\n    (item: Item) => {\n      const existingIndex = items.current.findIndex((i) => i.id === item.id)\n\n      if (existingIndex === -1) {\n        items.current.push(item)\n      } else {\n        items.current[existingIndex] = item\n      }\n\n      if (!activeId && !item.disabled) {\n        setActiveId(item.id)\n      }\n    },\n    [activeId]\n  )\n\n  const unregisterItem = useCallback((id: string) => {\n    items.current = items.current.filter((i) => i.id !== id)\n  }, [])\n\n  const move = useCallback(\n    (dir: 1 | -1) => {\n      setHasInteracted(true)\n\n      const enabled = items.current.filter((i) => !i.disabled)\n      if (!enabled.length) return\n\n      const index = enabled.findIndex((i) => i.id === activeId)\n      const next = enabled[(index + dir + enabled.length) % enabled.length]\n\n      setActiveId(next.id)\n      next.ref.current?.focus()\n    },\n    [activeId]\n  )\n\n  const focusItem = useCallback((itemId: string) => {\n    setHasInteracted(true)\n    setActiveId(itemId)\n  }, [])\n\n  const focusFirst = useCallback(() => {\n    const enabled = items.current.filter((i) => !i.disabled)\n    if (enabled.length > 0) {\n      const first = enabled[0]\n      setHasInteracted(true)\n      setActiveId(first.id)\n      first.ref.current?.focus()\n    }\n  }, [])\n\n  const getFirstEnabledId = useCallback(() => {\n    const enabled = items.current.filter((i) => !i.disabled)\n    return enabled[0]?.id ?? null\n  }, [])\n\n  const reset = useCallback(() => {\n    setHasInteracted(false)\n  }, [])\n\n  const handleGroupKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!hasInteracted) {\n        if (\n          e.key === 'ArrowDown' ||\n          e.key === 'ArrowRight' ||\n          e.key === 'ArrowUp' ||\n          e.key === 'ArrowLeft'\n        ) {\n          e.preventDefault()\n          focusFirst()\n        }\n      }\n    },\n    [hasInteracted, focusFirst]\n  )\n\n  const handleItemKeyDown = useCallback(\n    (\n      e: React.KeyboardEvent,\n      itemId: string,\n      onSelect?: (value: string) => void,\n      options?: {\n        role?: 'radio' | 'option'\n        allowHorizontal?: boolean\n      }\n    ) => {\n      const role = options?.role ?? 'radio'\n      const allowHorizontal = options?.allowHorizontal ?? true\n\n      if (e.key === 'Tab' && e.shiftKey) {\n        e.preventDefault()\n        reset()\n        if (role === 'radio') {\n          const fieldset = (e.target as HTMLElement).closest('[role=\"radiogroup\"]') as HTMLElement\n          fieldset?.focus()\n        } else if (role === 'option') {\n          const listbox = (e.target as HTMLElement).closest('[role=\"listbox\"]') as HTMLElement\n          listbox?.focus()\n        }\n        return\n      }\n\n      if (e.key === 'ArrowDown' || (allowHorizontal && e.key === 'ArrowRight')) {\n        e.preventDefault()\n        move(1)\n        return\n      }\n\n      if (e.key === 'ArrowUp' || (allowHorizontal && e.key === 'ArrowLeft')) {\n        e.preventDefault()\n        move(-1)\n        return\n      }\n\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        onSelect?.(itemId)\n      }\n    },\n    [move, reset]\n  )\n\n  const handleGroupBlur = useCallback(\n    (e: React.FocusEvent) => {\n      const currentTarget = e.currentTarget\n      setTimeout(() => {\n        if (!currentTarget.contains(document.activeElement)) {\n          reset()\n        }\n      }, 0)\n    },\n    [reset]\n  )\n\n  return {\n    activeId,\n    hasInteracted,\n    registerItem,\n    unregisterItem,\n    move,\n    setActiveId,\n    focusItem,\n    focusFirst,\n    getFirstEnabledId,\n    reset,\n    handleGroupKeyDown,\n    handleItemKeyDown,\n    handleGroupBlur\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@negative-space/roving-focus",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "publishConfig": {
     "access": "public"
   },