@negative-space/roving-focus 1.1.0 → 1.2.0

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -3,83 +3,119 @@
 var react = require('react');
 
 // src/index.ts
-function useRovingFocus() {
+function useRovingFocus(options = {}) {
+  const { wrap = true, allowHorizontal = true, containerRole } = options;
   const items = react.useRef([]);
-  const [activeId, setActiveId] = react.useState(null);
-  const [hasInteracted, setHasInteracted] = react.useState(false);
+  const activeIdRef = react.useRef(null);
+  const [activeId, _setActiveId] = react.useState(null);
+  const hasInteractedRef = react.useRef(false);
+  const [hasInteracted, _setHasInteracted] = react.useState(false);
+  const setActiveId = react.useCallback((id) => {
+    activeIdRef.current = id;
+    _setActiveId(id);
+  }, []);
+  const setHasInteracted = react.useCallback((value) => {
+    hasInteractedRef.current = value;
+    _setHasInteracted(value);
+  }, []);
   const registerItem = react.useCallback(
     (item) => {
-      const existingIndex = items.current.findIndex((i) => i.id === item.id);
-      if (existingIndex === -1) {
+      const idx = items.current.findIndex((i) => i.id === item.id);
+      if (idx === -1) {
         items.current.push(item);
       } else {
-        items.current[existingIndex] = item;
+        items.current[idx] = item;
       }
-      if (!activeId && !item.disabled) {
+      if (!activeIdRef.current && !item.disabled) {
         setActiveId(item.id);
       }
     },
-    [activeId]
+    [setActiveId]
+  );
+  const unregisterItem = react.useCallback(
+    (id) => {
+      items.current = items.current.filter((i) => i.id !== id);
+      if (activeIdRef.current === id) {
+        const next = items.current.find((i) => !i.disabled);
+        setActiveId(next?.id ?? null);
+      }
+    },
+    [setActiveId]
   );
-  const unregisterItem = react.useCallback((id) => {
-    items.current = items.current.filter((i) => i.id !== id);
-  }, []);
   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 next = enabled[(index + dir + enabled.length) % enabled.length];
+      const idx = enabled.findIndex((i) => i.id === activeIdRef.current);
+      const nextIdx = wrap ? (idx + dir + enabled.length) % enabled.length : Math.min(Math.max(idx + dir, 0), enabled.length - 1);
+      const next = enabled[nextIdx];
       setActiveId(next.id);
       next.ref.current?.focus();
     },
-    [activeId]
+    [wrap, setActiveId, setHasInteracted]
   );
-  const focusItem = react.useCallback((itemId) => {
-    setHasInteracted(true);
-    setActiveId(itemId);
-  }, []);
   const focusFirst = react.useCallback(() => {
+    const first = items.current.find((i) => !i.disabled);
+    if (!first) return;
+    setHasInteracted(true);
+    setActiveId(first.id);
+    first.ref.current?.focus();
+  }, [setActiveId, setHasInteracted]);
+  const focusLast = react.useCallback(() => {
     const enabled = items.current.filter((i) => !i.disabled);
-    if (enabled.length > 0) {
-      const first = enabled[0];
+    const last = enabled[enabled.length - 1];
+    if (!last) return;
+    setHasInteracted(true);
+    setActiveId(last.id);
+    last.ref.current?.focus();
+  }, [setActiveId, setHasInteracted]);
+  const focusItem = react.useCallback(
+    (id) => {
       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;
-  }, []);
+      setActiveId(id);
+    },
+    [setActiveId, setHasInteracted]
+  );
+  const getFirstEnabledId = react.useCallback(
+    () => items.current.find((i) => !i.disabled)?.id ?? null,
+    []
+  );
   const reset = react.useCallback(() => {
     setHasInteracted(false);
-  }, []);
+  }, [setHasInteracted]);
   const handleGroupKeyDown = react.useCallback(
     (e) => {
-      if (!hasInteracted) {
-        if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
-          e.preventDefault();
-          focusFirst();
-        }
-      }
+      const isArrow = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key);
+      if (!isArrow) return;
+      if (!e.currentTarget.contains(document.activeElement)) return;
+      if (e.currentTarget !== document.activeElement) return;
+      e.preventDefault();
+      focusFirst();
+    },
+    [focusFirst]
+  );
+  const handleGroupBlur = react.useCallback(
+    (e) => {
+      const currentTarget = e.currentTarget;
+      setTimeout(() => {
+        if (!currentTarget.contains(document.activeElement)) reset();
+      }, 0);
     },
-    [hasInteracted, focusFirst]
+    [reset]
   );
   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();
+    (e, itemId, onSelect, containerRef) => {
+      if (e.key === "Tab") {
+        if (e.shiftKey) {
+          e.preventDefault();
+          reset();
+          const container = containerRef?.current ?? (containerRole ? e.target.closest(
+            `[role="${containerRole}"]`
+          ) : null);
+          container?.focus();
+        } else {
+          reset();
         }
         return;
       }
@@ -93,33 +129,31 @@ function useRovingFocus() {
         move(-1);
         return;
       }
-      if (e.key === " " || e.key === "Enter") {
+      if (e.key === "Home") {
+        e.preventDefault();
+        focusFirst();
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        focusLast();
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         onSelect?.(itemId);
       }
     },
-    [move, reset]
-  );
-  const handleGroupBlur = react.useCallback(
-    (e) => {
-      const currentTarget = e.currentTarget;
-      setTimeout(() => {
-        if (!currentTarget.contains(document.activeElement)) {
-          reset();
-        }
-      }, 0);
-    },
-    [reset]
+    [allowHorizontal, move, focusFirst, focusLast, reset, containerRole]
   );
   return {
     activeId,
     hasInteracted,
     registerItem,
     unregisterItem,
-    move,
-    setActiveId,
     focusItem,
     focusFirst,
+    focusLast,
     getFirstEnabledId,
     reset,
     handleGroupKeyDown,

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\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"]}
+{"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 interface RovingFocusItem {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  disabled?: boolean\n}\n\nexport interface UseRovingFocusOptions {\n  wrap?: boolean\n  allowHorizontal?: boolean\n  containerRole?: string\n}\n\nexport function useRovingFocus(options: UseRovingFocusOptions = {}) {\n  const { wrap = true, allowHorizontal = true, containerRole } = options\n\n  const items = useRef<RovingFocusItem[]>([])\n  const activeIdRef = useRef<string | null>(null)\n  const [activeId, _setActiveId] = useState<string | null>(null)\n  const hasInteractedRef = useRef(false)\n  const [hasInteracted, _setHasInteracted] = useState(false)\n\n  const setActiveId = useCallback((id: string | null) => {\n    activeIdRef.current = id\n    _setActiveId(id)\n  }, [])\n\n  const setHasInteracted = useCallback((value: boolean) => {\n    hasInteractedRef.current = value\n    _setHasInteracted(value)\n  }, [])\n\n  const registerItem = useCallback(\n    (item: RovingFocusItem) => {\n      const idx = items.current.findIndex((i) => i.id === item.id)\n      if (idx === -1) {\n        items.current.push(item)\n      } else {\n        items.current[idx] = item\n      }\n      if (!activeIdRef.current && !item.disabled) {\n        setActiveId(item.id)\n      }\n    },\n    [setActiveId]\n  )\n\n  const unregisterItem = useCallback(\n    (id: string) => {\n      items.current = items.current.filter((i) => i.id !== id)\n      if (activeIdRef.current === id) {\n        const next = items.current.find((i) => !i.disabled)\n        setActiveId(next?.id ?? null)\n      }\n    },\n    [setActiveId]\n  )\n\n  const move = useCallback(\n    (dir: 1 | -1) => {\n      setHasInteracted(true)\n      const enabled = items.current.filter((i) => !i.disabled)\n      if (!enabled.length) return\n      const idx = enabled.findIndex((i) => i.id === activeIdRef.current)\n      const nextIdx = wrap\n        ? (idx + dir + enabled.length) % enabled.length\n        : Math.min(Math.max(idx + dir, 0), enabled.length - 1)\n      const next = enabled[nextIdx]\n      setActiveId(next.id)\n      next.ref.current?.focus()\n    },\n    [wrap, setActiveId, setHasInteracted]\n  )\n\n  const focusFirst = useCallback(() => {\n    const first = items.current.find((i) => !i.disabled)\n    if (!first) return\n    setHasInteracted(true)\n    setActiveId(first.id)\n    first.ref.current?.focus()\n  }, [setActiveId, setHasInteracted])\n\n  const focusLast = useCallback(() => {\n    const enabled = items.current.filter((i) => !i.disabled)\n    const last = enabled[enabled.length - 1]\n    if (!last) return\n    setHasInteracted(true)\n    setActiveId(last.id)\n    last.ref.current?.focus()\n  }, [setActiveId, setHasInteracted])\n\n  const focusItem = useCallback(\n    (id: string) => {\n      setHasInteracted(true)\n      setActiveId(id)\n    },\n    [setActiveId, setHasInteracted]\n  )\n\n  const getFirstEnabledId = useCallback(\n    () => items.current.find((i) => !i.disabled)?.id ?? null,\n    []\n  )\n\n  const reset = useCallback(() => {\n    setHasInteracted(false)\n  }, [setHasInteracted])\n\n  const handleGroupKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const isArrow = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)\n      if (!isArrow) return\n      if (!e.currentTarget.contains(document.activeElement)) return\n      if (e.currentTarget !== document.activeElement) return\n      e.preventDefault()\n      focusFirst()\n    },\n    [focusFirst]\n  )\n\n  const handleGroupBlur = useCallback(\n    (e: React.FocusEvent) => {\n      const currentTarget = e.currentTarget\n      setTimeout(() => {\n        if (!currentTarget.contains(document.activeElement)) reset()\n      }, 0)\n    },\n    [reset]\n  )\n\n  const handleItemKeyDown = useCallback(\n    (\n      e: React.KeyboardEvent,\n      itemId: string,\n      onSelect?: (id: string) => void,\n      containerRef?: React.RefObject<HTMLElement>\n    ) => {\n      if (e.key === 'Tab') {\n        if (e.shiftKey) {\n          e.preventDefault()\n          reset()\n          const container: HTMLElement | null =\n            containerRef?.current ??\n            (containerRole\n              ? ((e.target as HTMLElement).closest(\n                  `[role=\"${containerRole}\"]`\n                ) as HTMLElement | null)\n              : null)\n          container?.focus()\n        } else {\n          reset()\n        }\n        return\n      }\n\n      if (e.key === 'ArrowDown' || (allowHorizontal && e.key === 'ArrowRight')) {\n        e.preventDefault()\n        move(1)\n        return\n      }\n      if (e.key === 'ArrowUp' || (allowHorizontal && e.key === 'ArrowLeft')) {\n        e.preventDefault()\n        move(-1)\n        return\n      }\n      if (e.key === 'Home') {\n        e.preventDefault()\n        focusFirst()\n        return\n      }\n      if (e.key === 'End') {\n        e.preventDefault()\n        focusLast()\n        return\n      }\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onSelect?.(itemId)\n      }\n    },\n    [allowHorizontal, move, focusFirst, focusLast, reset, containerRole]\n  )\n\n  return {\n    activeId,\n    hasInteracted,\n    registerItem,\n    unregisterItem,\n    focusItem,\n    focusFirst,\n    focusLast,\n    getFirstEnabledId,\n    reset,\n    handleGroupKeyDown,\n    handleItemKeyDown,\n    handleGroupBlur\n  }\n}\n\nexport type RovingFocusReturn = ReturnType<typeof useRovingFocus>\n"]}

package/dist/index.mjs

@@ -1,83 +1,119 @@
 import { useRef, useState, useCallback } from 'react';
 
 // src/index.ts
-function useRovingFocus() {
+function useRovingFocus(options = {}) {
+  const { wrap = true, allowHorizontal = true, containerRole } = options;
   const items = useRef([]);
-  const [activeId, setActiveId] = useState(null);
-  const [hasInteracted, setHasInteracted] = useState(false);
+  const activeIdRef = useRef(null);
+  const [activeId, _setActiveId] = useState(null);
+  const hasInteractedRef = useRef(false);
+  const [hasInteracted, _setHasInteracted] = useState(false);
+  const setActiveId = useCallback((id) => {
+    activeIdRef.current = id;
+    _setActiveId(id);
+  }, []);
+  const setHasInteracted = useCallback((value) => {
+    hasInteractedRef.current = value;
+    _setHasInteracted(value);
+  }, []);
   const registerItem = useCallback(
     (item) => {
-      const existingIndex = items.current.findIndex((i) => i.id === item.id);
-      if (existingIndex === -1) {
+      const idx = items.current.findIndex((i) => i.id === item.id);
+      if (idx === -1) {
         items.current.push(item);
       } else {
-        items.current[existingIndex] = item;
+        items.current[idx] = item;
       }
-      if (!activeId && !item.disabled) {
+      if (!activeIdRef.current && !item.disabled) {
         setActiveId(item.id);
       }
     },
-    [activeId]
+    [setActiveId]
+  );
+  const unregisterItem = useCallback(
+    (id) => {
+      items.current = items.current.filter((i) => i.id !== id);
+      if (activeIdRef.current === id) {
+        const next = items.current.find((i) => !i.disabled);
+        setActiveId(next?.id ?? null);
+      }
+    },
+    [setActiveId]
   );
-  const unregisterItem = useCallback((id) => {
-    items.current = items.current.filter((i) => i.id !== id);
-  }, []);
   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 next = enabled[(index + dir + enabled.length) % enabled.length];
+      const idx = enabled.findIndex((i) => i.id === activeIdRef.current);
+      const nextIdx = wrap ? (idx + dir + enabled.length) % enabled.length : Math.min(Math.max(idx + dir, 0), enabled.length - 1);
+      const next = enabled[nextIdx];
       setActiveId(next.id);
       next.ref.current?.focus();
     },
-    [activeId]
+    [wrap, setActiveId, setHasInteracted]
   );
-  const focusItem = useCallback((itemId) => {
-    setHasInteracted(true);
-    setActiveId(itemId);
-  }, []);
   const focusFirst = useCallback(() => {
+    const first = items.current.find((i) => !i.disabled);
+    if (!first) return;
+    setHasInteracted(true);
+    setActiveId(first.id);
+    first.ref.current?.focus();
+  }, [setActiveId, setHasInteracted]);
+  const focusLast = useCallback(() => {
     const enabled = items.current.filter((i) => !i.disabled);
-    if (enabled.length > 0) {
-      const first = enabled[0];
+    const last = enabled[enabled.length - 1];
+    if (!last) return;
+    setHasInteracted(true);
+    setActiveId(last.id);
+    last.ref.current?.focus();
+  }, [setActiveId, setHasInteracted]);
+  const focusItem = useCallback(
+    (id) => {
       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;
-  }, []);
+      setActiveId(id);
+    },
+    [setActiveId, setHasInteracted]
+  );
+  const getFirstEnabledId = useCallback(
+    () => items.current.find((i) => !i.disabled)?.id ?? null,
+    []
+  );
   const reset = useCallback(() => {
     setHasInteracted(false);
-  }, []);
+  }, [setHasInteracted]);
   const handleGroupKeyDown = useCallback(
     (e) => {
-      if (!hasInteracted) {
-        if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
-          e.preventDefault();
-          focusFirst();
-        }
-      }
+      const isArrow = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key);
+      if (!isArrow) return;
+      if (!e.currentTarget.contains(document.activeElement)) return;
+      if (e.currentTarget !== document.activeElement) return;
+      e.preventDefault();
+      focusFirst();
+    },
+    [focusFirst]
+  );
+  const handleGroupBlur = useCallback(
+    (e) => {
+      const currentTarget = e.currentTarget;
+      setTimeout(() => {
+        if (!currentTarget.contains(document.activeElement)) reset();
+      }, 0);
     },
-    [hasInteracted, focusFirst]
+    [reset]
   );
   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();
+    (e, itemId, onSelect, containerRef) => {
+      if (e.key === "Tab") {
+        if (e.shiftKey) {
+          e.preventDefault();
+          reset();
+          const container = containerRef?.current ?? (containerRole ? e.target.closest(
+            `[role="${containerRole}"]`
+          ) : null);
+          container?.focus();
+        } else {
+          reset();
         }
         return;
       }
@@ -91,33 +127,31 @@ function useRovingFocus() {
         move(-1);
         return;
       }
-      if (e.key === " " || e.key === "Enter") {
+      if (e.key === "Home") {
+        e.preventDefault();
+        focusFirst();
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        focusLast();
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         onSelect?.(itemId);
       }
     },
-    [move, reset]
-  );
-  const handleGroupBlur = useCallback(
-    (e) => {
-      const currentTarget = e.currentTarget;
-      setTimeout(() => {
-        if (!currentTarget.contains(document.activeElement)) {
-          reset();
-        }
-      }, 0);
-    },
-    [reset]
+    [allowHorizontal, move, focusFirst, focusLast, reset, containerRole]
   );
   return {
     activeId,
     hasInteracted,
     registerItem,
     unregisterItem,
-    move,
-    setActiveId,
     focusItem,
     focusFirst,
+    focusLast,
     getFirstEnabledId,
     reset,
     handleGroupKeyDown,

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\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"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\nexport interface RovingFocusItem {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  disabled?: boolean\n}\n\nexport interface UseRovingFocusOptions {\n  wrap?: boolean\n  allowHorizontal?: boolean\n  containerRole?: string\n}\n\nexport function useRovingFocus(options: UseRovingFocusOptions = {}) {\n  const { wrap = true, allowHorizontal = true, containerRole } = options\n\n  const items = useRef<RovingFocusItem[]>([])\n  const activeIdRef = useRef<string | null>(null)\n  const [activeId, _setActiveId] = useState<string | null>(null)\n  const hasInteractedRef = useRef(false)\n  const [hasInteracted, _setHasInteracted] = useState(false)\n\n  const setActiveId = useCallback((id: string | null) => {\n    activeIdRef.current = id\n    _setActiveId(id)\n  }, [])\n\n  const setHasInteracted = useCallback((value: boolean) => {\n    hasInteractedRef.current = value\n    _setHasInteracted(value)\n  }, [])\n\n  const registerItem = useCallback(\n    (item: RovingFocusItem) => {\n      const idx = items.current.findIndex((i) => i.id === item.id)\n      if (idx === -1) {\n        items.current.push(item)\n      } else {\n        items.current[idx] = item\n      }\n      if (!activeIdRef.current && !item.disabled) {\n        setActiveId(item.id)\n      }\n    },\n    [setActiveId]\n  )\n\n  const unregisterItem = useCallback(\n    (id: string) => {\n      items.current = items.current.filter((i) => i.id !== id)\n      if (activeIdRef.current === id) {\n        const next = items.current.find((i) => !i.disabled)\n        setActiveId(next?.id ?? null)\n      }\n    },\n    [setActiveId]\n  )\n\n  const move = useCallback(\n    (dir: 1 | -1) => {\n      setHasInteracted(true)\n      const enabled = items.current.filter((i) => !i.disabled)\n      if (!enabled.length) return\n      const idx = enabled.findIndex((i) => i.id === activeIdRef.current)\n      const nextIdx = wrap\n        ? (idx + dir + enabled.length) % enabled.length\n        : Math.min(Math.max(idx + dir, 0), enabled.length - 1)\n      const next = enabled[nextIdx]\n      setActiveId(next.id)\n      next.ref.current?.focus()\n    },\n    [wrap, setActiveId, setHasInteracted]\n  )\n\n  const focusFirst = useCallback(() => {\n    const first = items.current.find((i) => !i.disabled)\n    if (!first) return\n    setHasInteracted(true)\n    setActiveId(first.id)\n    first.ref.current?.focus()\n  }, [setActiveId, setHasInteracted])\n\n  const focusLast = useCallback(() => {\n    const enabled = items.current.filter((i) => !i.disabled)\n    const last = enabled[enabled.length - 1]\n    if (!last) return\n    setHasInteracted(true)\n    setActiveId(last.id)\n    last.ref.current?.focus()\n  }, [setActiveId, setHasInteracted])\n\n  const focusItem = useCallback(\n    (id: string) => {\n      setHasInteracted(true)\n      setActiveId(id)\n    },\n    [setActiveId, setHasInteracted]\n  )\n\n  const getFirstEnabledId = useCallback(\n    () => items.current.find((i) => !i.disabled)?.id ?? null,\n    []\n  )\n\n  const reset = useCallback(() => {\n    setHasInteracted(false)\n  }, [setHasInteracted])\n\n  const handleGroupKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const isArrow = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)\n      if (!isArrow) return\n      if (!e.currentTarget.contains(document.activeElement)) return\n      if (e.currentTarget !== document.activeElement) return\n      e.preventDefault()\n      focusFirst()\n    },\n    [focusFirst]\n  )\n\n  const handleGroupBlur = useCallback(\n    (e: React.FocusEvent) => {\n      const currentTarget = e.currentTarget\n      setTimeout(() => {\n        if (!currentTarget.contains(document.activeElement)) reset()\n      }, 0)\n    },\n    [reset]\n  )\n\n  const handleItemKeyDown = useCallback(\n    (\n      e: React.KeyboardEvent,\n      itemId: string,\n      onSelect?: (id: string) => void,\n      containerRef?: React.RefObject<HTMLElement>\n    ) => {\n      if (e.key === 'Tab') {\n        if (e.shiftKey) {\n          e.preventDefault()\n          reset()\n          const container: HTMLElement | null =\n            containerRef?.current ??\n            (containerRole\n              ? ((e.target as HTMLElement).closest(\n                  `[role=\"${containerRole}\"]`\n                ) as HTMLElement | null)\n              : null)\n          container?.focus()\n        } else {\n          reset()\n        }\n        return\n      }\n\n      if (e.key === 'ArrowDown' || (allowHorizontal && e.key === 'ArrowRight')) {\n        e.preventDefault()\n        move(1)\n        return\n      }\n      if (e.key === 'ArrowUp' || (allowHorizontal && e.key === 'ArrowLeft')) {\n        e.preventDefault()\n        move(-1)\n        return\n      }\n      if (e.key === 'Home') {\n        e.preventDefault()\n        focusFirst()\n        return\n      }\n      if (e.key === 'End') {\n        e.preventDefault()\n        focusLast()\n        return\n      }\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onSelect?.(itemId)\n      }\n    },\n    [allowHorizontal, move, focusFirst, focusLast, reset, containerRole]\n  )\n\n  return {\n    activeId,\n    hasInteracted,\n    registerItem,\n    unregisterItem,\n    focusItem,\n    focusFirst,\n    focusLast,\n    getFirstEnabledId,\n    reset,\n    handleGroupKeyDown,\n    handleItemKeyDown,\n    handleGroupBlur\n  }\n}\n\nexport type RovingFocusReturn = ReturnType<typeof useRovingFocus>\n"]}

package/package.json

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