@negative-space/roving-focus 1.0.0 → 1.2.0

package/dist/index.d.mts

@@ -1,18 +1,27 @@
-import * as react from 'react';
-
-type RovingFocusItem<Id extends string = string> = {
-    id: Id;
+interface RovingFocusItem {
+    id: string;
     ref: React.RefObject<HTMLElement>;
     disabled?: boolean;
+}
+interface UseRovingFocusOptions {
+    wrap?: boolean;
+    allowHorizontal?: boolean;
+    containerRole?: string;
+}
+declare function useRovingFocus(options?: UseRovingFocusOptions): {
+    activeId: string | null;
+    hasInteracted: boolean;
+    registerItem: (item: RovingFocusItem) => void;
+    unregisterItem: (id: string) => void;
+    focusItem: (id: string) => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    getFirstEnabledId: () => string | null;
+    reset: () => void;
+    handleGroupKeyDown: (e: React.KeyboardEvent) => void;
+    handleItemKeyDown: (e: React.KeyboardEvent, itemId: string, onSelect?: (id: string) => void, containerRef?: React.RefObject<HTMLElement>) => void;
+    handleGroupBlur: (e: React.FocusEvent) => void;
 };
-declare const useRovingFocus: <Item extends RovingFocusItem<Id>, Id extends string = string>() => {
-    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;
-};
+type RovingFocusReturn = ReturnType<typeof useRovingFocus>;
 
-export { type RovingFocusItem, useRovingFocus };
+export { type RovingFocusItem, type RovingFocusReturn, type UseRovingFocusOptions, useRovingFocus };

package/dist/index.d.ts

@@ -1,18 +1,27 @@
-import * as react from 'react';
-
-type RovingFocusItem<Id extends string = string> = {
-    id: Id;
+interface RovingFocusItem {
+    id: string;
     ref: React.RefObject<HTMLElement>;
     disabled?: boolean;
+}
+interface UseRovingFocusOptions {
+    wrap?: boolean;
+    allowHorizontal?: boolean;
+    containerRole?: string;
+}
+declare function useRovingFocus(options?: UseRovingFocusOptions): {
+    activeId: string | null;
+    hasInteracted: boolean;
+    registerItem: (item: RovingFocusItem) => void;
+    unregisterItem: (id: string) => void;
+    focusItem: (id: string) => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    getFirstEnabledId: () => string | null;
+    reset: () => void;
+    handleGroupKeyDown: (e: React.KeyboardEvent) => void;
+    handleItemKeyDown: (e: React.KeyboardEvent, itemId: string, onSelect?: (id: string) => void, containerRef?: React.RefObject<HTMLElement>) => void;
+    handleGroupBlur: (e: React.FocusEvent) => void;
 };
-declare const useRovingFocus: <Item extends RovingFocusItem<Id>, Id extends string = string>() => {
-    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;
-};
+type RovingFocusReturn = ReturnType<typeof useRovingFocus>;
 
-export { type RovingFocusItem, useRovingFocus };
+export { type RovingFocusItem, type RovingFocusReturn, type UseRovingFocusOptions, useRovingFocus };

package/dist/index.js

@@ -3,64 +3,164 @@
 var react = require('react');
 
 // src/index.ts
-var useRovingFocus = () => {
+function useRovingFocus(options = {}) {
+  const { wrap = true, allowHorizontal = true, containerRole } = options;
   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 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 unregisterItem = react.useCallback((id) => {
-    items.current = items.current.filter((i) => i.id !== id);
+  const setHasInteracted = react.useCallback((value) => {
+    hasInteractedRef.current = value;
+    _setHasInteracted(value);
   }, []);
-  const focusItem = react.useCallback((item) => {
-    if (!item || item.disabled) return;
-    setActiveId(item.id);
-    item.ref.current?.focus();
-  }, []);
-  const moveFocus = react.useCallback(
-    (offset) => {
+  const registerItem = react.useCallback(
+    (item) => {
+      const idx = items.current.findIndex((i) => i.id === item.id);
+      if (idx === -1) {
+        items.current.push(item);
+      } else {
+        items.current[idx] = item;
+      }
+      if (!activeIdRef.current && !item.disabled) {
+        setActiveId(item.id);
+      }
+    },
+    [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 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 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();
+    },
+    [wrap, setActiveId, setHasInteracted]
+  );
+  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);
+    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(id);
     },
-    [activeId, focusItem]
+    [setActiveId, setHasInteracted]
+  );
+  const getFirstEnabledId = react.useCallback(
+    () => items.current.find((i) => !i.disabled)?.id ?? null,
+    []
   );
-  const onKeyDown = react.useCallback(
-    (event) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        moveFocus(1);
+  const reset = react.useCallback(() => {
+    setHasInteracted(false);
+  }, [setHasInteracted]);
+  const handleGroupKeyDown = react.useCallback(
+    (e) => {
+      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);
+    },
+    [reset]
+  );
+  const handleItemKeyDown = react.useCallback(
+    (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;
+      }
+      if (e.key === "ArrowDown" || allowHorizontal && e.key === "ArrowRight") {
+        e.preventDefault();
+        move(1);
+        return;
+      }
+      if (e.key === "ArrowUp" || allowHorizontal && e.key === "ArrowLeft") {
+        e.preventDefault();
+        move(-1);
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        focusFirst();
+        return;
       }
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-        moveFocus(-1);
+      if (e.key === "End") {
+        e.preventDefault();
+        focusLast();
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onSelect?.(itemId);
       }
     },
-    [moveFocus]
+    [allowHorizontal, move, focusFirst, focusLast, reset, containerRole]
   );
-  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,
-    setActiveId,
-    onKeyDown,
-    onFocus,
-    onBlur
+    focusItem,
+    focusFirst,
+    focusLast,
+    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\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,64 +1,164 @@
 import { useRef, useState, useCallback } from 'react';
 
 // src/index.ts
-var useRovingFocus = () => {
+function useRovingFocus(options = {}) {
+  const { wrap = true, allowHorizontal = true, containerRole } = options;
   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 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 unregisterItem = useCallback((id) => {
-    items.current = items.current.filter((i) => i.id !== id);
+  const setHasInteracted = useCallback((value) => {
+    hasInteractedRef.current = value;
+    _setHasInteracted(value);
   }, []);
-  const focusItem = useCallback((item) => {
-    if (!item || item.disabled) return;
-    setActiveId(item.id);
-    item.ref.current?.focus();
-  }, []);
-  const moveFocus = useCallback(
-    (offset) => {
+  const registerItem = useCallback(
+    (item) => {
+      const idx = items.current.findIndex((i) => i.id === item.id);
+      if (idx === -1) {
+        items.current.push(item);
+      } else {
+        items.current[idx] = item;
+      }
+      if (!activeIdRef.current && !item.disabled) {
+        setActiveId(item.id);
+      }
+    },
+    [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 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 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();
+    },
+    [wrap, setActiveId, setHasInteracted]
+  );
+  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);
+    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(id);
     },
-    [activeId, focusItem]
+    [setActiveId, setHasInteracted]
+  );
+  const getFirstEnabledId = useCallback(
+    () => items.current.find((i) => !i.disabled)?.id ?? null,
+    []
   );
-  const onKeyDown = useCallback(
-    (event) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        moveFocus(1);
+  const reset = useCallback(() => {
+    setHasInteracted(false);
+  }, [setHasInteracted]);
+  const handleGroupKeyDown = useCallback(
+    (e) => {
+      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);
+    },
+    [reset]
+  );
+  const handleItemKeyDown = useCallback(
+    (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;
+      }
+      if (e.key === "ArrowDown" || allowHorizontal && e.key === "ArrowRight") {
+        e.preventDefault();
+        move(1);
+        return;
+      }
+      if (e.key === "ArrowUp" || allowHorizontal && e.key === "ArrowLeft") {
+        e.preventDefault();
+        move(-1);
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        focusFirst();
+        return;
       }
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-        moveFocus(-1);
+      if (e.key === "End") {
+        e.preventDefault();
+        focusLast();
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onSelect?.(itemId);
       }
     },
-    [moveFocus]
+    [allowHorizontal, move, focusFirst, focusLast, reset, containerRole]
   );
-  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,
-    setActiveId,
-    onKeyDown,
-    onFocus,
-    onBlur
+    focusItem,
+    focusFirst,
+    focusLast,
+    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\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.0.0",
+  "version": "1.2.0",
   "publishConfig": {
     "access": "public"
   },