Add RovingFocusGroup and RovingFocusRoot contexts

Author: kotAPI

src/core/utils/RovingFocusGroup/context/RovingFocuGroupContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, RefObject } from 'react';
+
+// Define the type for the context
+export type RovingFocusGroupContextTypes = {
+  focusedItemId: string | null;
+  setFocusedItemId: (id: string | null) => void;
+  focusItems: string[];
+  setFocusItems: React.Dispatch<React.SetStateAction<string[]>>;
+  addFocusItem: (id: string) => void;
+  groupRef: RefObject<HTMLDivElement> | null;
+}
+
+// Create context with proper type and default values
+export const RovingFocusGroupContext = createContext<RovingFocusGroupContextTypes>({
+    focusedItemId: null,
+    setFocusedItemId: () => {},
+    focusItems: [],
+    setFocusItems: () => {},
+    addFocusItem: () => {},
+    groupRef: null
+});

src/core/utils/RovingFocusGroup/context/RovingFocusGroupContext.tsx

@@ -1,3 +1,13 @@
 import { createContext } from 'react';
 
-export const RovingFocusRootContext = createContext({});
+// Define the type for the context
+export type RovingFocusRootContextTypes = {
+  direction: 'horizontal' | 'vertical';
+  loop: boolean;
+}
+
+// Create context with proper type and default values
+export const RovingFocusRootContext = createContext<RovingFocusRootContextTypes>({
+    direction: 'horizontal',
+    loop: true
+});

src/core/utils/RovingFocusGroup/context/RovingFocusRootContext.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useId, useRef } from 'react';
 import Primitive from '~/core/primitives/Primitive';
 
-import { RovingFocusGroupContext } from '../context/RovingFocuGroupContext';
+import { RovingFocusGroupContext, RovingFocusGroupContextTypes } from '../context/RovingFocusGroupContext';
 
 type RovingFocusGroupProps = {
     children: React.ReactNode;
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 
 const RovingFocusGroup = ({ children, ...props }: RovingFocusGroupProps) => {
     const groupRef = useRef<HTMLDivElement>(null);
@@ -23,7 +23,7 @@ const RovingFocusGroup = ({ children, ...props }: RovingFocusGroupProps) => {
         }
     }, [focusItems, focusedItemId]);
 
-    const sendValues = {
+    const sendValues: RovingFocusGroupContextTypes = {
         focusedItemId,
         setFocusedItemId,
         focusItems,

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

@@ -2,13 +2,17 @@ import React, { forwardRef, useContext, useEffect, useId, useRef } from 'react';
 
 import Primitive from '~/core/primitives/Primitive';
 
-import { RovingFocusGroupContext } from '../context/RovingFocuGroupContext';
-import { RovingFocusRootContext } from '../context/RovingFocusRootContext';
+import { RovingFocusGroupContext, RovingFocusGroupContextTypes } from '../context/RovingFocusGroupContext';
+import { RovingFocusRootContext, RovingFocusRootContextTypes } from '../context/RovingFocusRootContext';
 
-const RovingFocusItem = forwardRef<HTMLButtonElement, { children: React.ReactNode }>(({ children, ...props }, ref) => {
+type RovingFocusItemProps = {
+    children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const RovingFocusItem = forwardRef<HTMLButtonElement, RovingFocusItemProps>(({ children, ...props }, ref) => {
     const id = useId();
-    const { focusedItemId, setFocusedItemId, addFocusItem, focusItems, groupRef } = useContext(RovingFocusGroupContext);
-    const { direction, loop } = useContext(RovingFocusRootContext);
+    const { focusedItemId, setFocusedItemId, addFocusItem, focusItems, groupRef } = useContext<RovingFocusGroupContextTypes>(RovingFocusGroupContext);
+    const { direction, loop } = useContext<RovingFocusRootContextTypes>(RovingFocusRootContext);
 
     useEffect(() => {
         // we check if the item is in the focusItems array, if not we add it
@@ -22,13 +26,13 @@ const RovingFocusItem = forwardRef<HTMLButtonElement, { children: React.ReactNod
     }, [focusItems, focusedItemId]);
 
     const focusItemWithId = (id: string) => {
-        if (groupRef.current) {
+        if (groupRef && groupRef.current) {
             setFocusedItemId(id);
             // Sanitize the id to ensure it's a valid CSS selector
             const sanitizedId = CSS.escape(id);
-            const item = groupRef?.current?.querySelector(`#${sanitizedId}`);
+            const item = groupRef.current.querySelector(`#${sanitizedId}`);
             if (item) {
-                item.focus();
+                (item as HTMLElement).focus();
             }
         }
     };

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

@@ -2,10 +2,16 @@ import React from 'react';
 
 import Primitive from '~/core/primitives/Primitive';
 
-import { RovingFocusRootContext } from '../context/RovingFocusRootContext';
+import { RovingFocusRootContext, RovingFocusRootContextTypes } from '../context/RovingFocusRootContext';
 
-const RovingFocusRoot = ({ children, direction = 'horizontal', loop = true, ...props }: { children: React.ReactNode, direction?: 'horizontal' | 'vertical', loop?: boolean }) => {
-    const sendValues = {
+type RovingFocusRootProps = {
+    children: React.ReactNode;
+    direction?: 'horizontal' | 'vertical';
+    loop?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const RovingFocusRoot = ({ children, direction = 'horizontal', loop = true, ...props }: RovingFocusRootProps) => {
+    const sendValues: RovingFocusRootContextTypes = {
         direction,
         loop
     };