Refactor RovingFocusGroup with direction and loop props

Author: kotAPI

src/core/utils/RovingFocusGroup/fragments/RovingFocusGroup.tsx

@@ -3,7 +3,13 @@ import Primitive from '~/core/primitives/Primitive';
 
 import { RovingFocusGroupContext } from '../context/RovingFocuGroupContext';
 
-const RovingFocusGroup = ({ children, ...props }: { children: React.ReactNode }) => {
+type RovingFocusGroupProps = {
+    children: React.ReactNode;
+    direction?: 'horizontal' | 'vertical';
+    loop?: boolean;
+};
+
+const RovingFocusGroup = ({ children, direction = 'horizontal', loop = true, ...props }: RovingFocusGroupProps) => {
     const groupRef = useRef<HTMLDivElement>(null);
     const [focusItems, setFocusItems] = useState<string[]>([]);
     const [focusedItemId, setFocusedItemId] = useState<string | null>(null);
@@ -25,7 +31,9 @@ const RovingFocusGroup = ({ children, ...props }: { children: React.ReactNode })
         focusItems,
         setFocusItems,
         addFocusItem,
-        groupRef
+        groupRef,
+        direction,
+        loop
     };
 
     return <RovingFocusGroupContext.Provider value={sendValues}>

src/core/utils/RovingFocusGroup/fragments/RovingFocusItem.tsx

@@ -6,7 +6,7 @@ import { RovingFocusGroupContext } from '../context/RovingFocuGroupContext';
 
 const RovingFocusItem = forwardRef<HTMLButtonElement, { children: React.ReactNode }>(({ children, ...props }, ref) => {
     const id = useId();
-    const { focusedItemId, setFocusedItemId, addFocusItem, focusItems, groupRef } = useContext(RovingFocusGroupContext);
+    const { focusedItemId, setFocusedItemId, addFocusItem, focusItems, groupRef, direction, loop } = useContext(RovingFocusGroupContext);
 
     useEffect(() => {
         // we check if the item is in the focusItems array, if not we add it
@@ -31,18 +31,46 @@ const RovingFocusItem = forwardRef<HTMLButtonElement, { children: React.ReactNod
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
         switch (event.key) {
-        case 'ArrowUp':
-        case 'ArrowLeft':
-            // Logic to move focus to the previous item
-            setFocusedItemId(focusItems[focusItems.indexOf(id) - 1]);
-
+        case 'ArrowUp': {
+            if (direction === 'vertical') {
+                // Logic to move focus to the previous item
+                const previousIndex = focusItems.indexOf(id) - 1;
+                if (previousIndex >= 0) {
+                    setFocusedItemId(focusItems[previousIndex]);
+                }
+            }
             break;
-        case 'ArrowDown':
-        case 'ArrowRight':
-            // Logic to move focus to the next item
-            setFocusedItemId(focusItems[focusItems.indexOf(id) + 1]);
-
+        }
+        case 'ArrowLeft': {
+            if (direction === 'horizontal') {
+                // Logic to move focus to the previous item
+                const previousIndex = focusItems.indexOf(id) - 1;
+                if (previousIndex >= 0) {
+                    setFocusedItemId(focusItems[previousIndex]);
+                }
+            }
+            break;
+        }
+        case 'ArrowDown': {
+            if (direction === 'vertical') {
+                // Logic to move focus to the next item
+                const nextIndex = focusItems.indexOf(id) + 1;
+                if (nextIndex < focusItems.length) {
+                    setFocusedItemId(focusItems[nextIndex]);
+                }
+            }
+            break;
+        }
+        case 'ArrowRight': {
+            if (direction === 'horizontal') {
+                // Check if it's not the last item before moving focus to the next item
+                const nextIndex = focusItems.indexOf(id) + 1;
+                if (nextIndex < focusItems.length) {
+                    setFocusedItemId(focusItems[nextIndex]);
+                }
+            }
             break;
+        }
         case 'Tab':
             // Logic to handle tab key if needed
             console.log('Tab');

src/core/utils/RovingFocusGroup/stories/RovingFocusGroup.stories.tsx

@@ -17,7 +17,7 @@ export default {
                         <Button>Button 1 Group 1</Button>
                     </RovingFocusGroup.Item>
                     <RovingFocusGroup.Item>
-                        <input type="text" className="border border-green-500" />
+                        <Button>Button 2 Group 1</Button>
                     </RovingFocusGroup.Item>
                     <RovingFocusGroup.Item>
                         <a href="#" className="border border-green-500">Link 1 Group 1</a>