fix(keyboard): fix potential side effect issue with configureRemoteControl

docs/api.md

@@ -437,7 +437,7 @@ The Remote Control Configuration API is used to configure the remote control int
 
 ## Parameters
 
-This object has two methods:
+This object has two properties:
 
 - `remoteControlSubscriber: (direction: Direction) => TSubscriber`: A function that takes a callback as an argument. This callback is meant to be invoked with a `Direction` enum value whenever a remoteControl event that should change the focus occurs. The function should return a subscriber identifier that can be used to unsubscribe the event listener.
 - `remoteControlUnsubscriber: (subscriber: TSubscriber) => void`: A function that takes the subscriber identifier returned by `remoteControlSubscriber` as an argument. This function is meant to remove the remoteControl event listener associated with the given identifier.

packages/lib/src/spatial-navigation/configureRemoteControl.ts

@@ -8,14 +8,12 @@ export interface RemoteControlConfiguration {
   remoteControlUnsubscriber: (subscriber: SubscriberType) => void;
 }
 
-export let remoteControlSubscriber:
-  | RemoteControlConfiguration['remoteControlSubscriber']
-  | undefined = undefined;
-export let remoteControlUnsubscriber:
-  | RemoteControlConfiguration['remoteControlUnsubscriber']
-  | undefined = undefined;
+const config: Partial<RemoteControlConfiguration> = {};
 
 export const configureRemoteControl = (options: RemoteControlConfiguration) => {
-  remoteControlSubscriber = options.remoteControlSubscriber;
-  remoteControlUnsubscriber = options.remoteControlUnsubscriber;
+  config.remoteControlSubscriber = options.remoteControlSubscriber;
+  config.remoteControlUnsubscriber = options.remoteControlUnsubscriber;
 };
+
+export const getRemoteControlSubscriber = () => config.remoteControlSubscriber;
+export const getRemoteControlUnsubscriber = () => config.remoteControlUnsubscriber;

packages/lib/src/spatial-navigation/hooks/useRemoteControl.ts

@@ -1,6 +1,9 @@
 import SpatialNavigator from '../SpatialNavigator';
 import { useEffect } from 'react';
-import { remoteControlSubscriber, remoteControlUnsubscriber } from '../configureRemoteControl';
+import {
+  getRemoteControlSubscriber,
+  getRemoteControlUnsubscriber,
+} from '../configureRemoteControl';
 import { useSpatialNavigationDeviceType } from '../context/DeviceContext';
 
 export const useRemoteControl = ({
@@ -13,7 +16,7 @@ export const useRemoteControl = ({
   const { setDeviceType, setScrollingIntervalId: setScrollingId } =
     useSpatialNavigationDeviceType();
   useEffect(() => {
-    if (!remoteControlSubscriber) {
+    if (!getRemoteControlSubscriber()) {
       console.warn(
         '[React Spatial Navigation] You probably forgot to configure the remote control. Please call the configuration function.',
       );
@@ -25,20 +28,20 @@ export const useRemoteControl = ({
       return () => undefined;
     }
 
-    const listener = remoteControlSubscriber((direction) => {
+    const listener = getRemoteControlSubscriber()?.((direction) => {
       setDeviceType('remoteKeys');
       spatialNavigator.handleKeyDown(direction);
       setScrollingId(null);
     });
     return () => {
-      if (!remoteControlUnsubscriber) {
+      if (!getRemoteControlUnsubscriber()) {
         console.warn(
           '[React Spatial Navigation] You did not provide a remote control unsubscriber. Are you sure you called configuration correctly?',
         );
 
         return;
       }
-      remoteControlUnsubscriber(listener);
+      getRemoteControlUnsubscriber()?.(listener);
     };
   }, [spatialNavigator, isActive, setDeviceType, setScrollingId]);
 };