From 5da70a916af55d3a048b156e6e19c3f40683949b Mon Sep 17 00:00:00 2001
From: Lukas Bach <contact@lukasbach.com>
Date: Sat, 18 May 2024 16:18:58 +0200
Subject: [PATCH] feat: introduce disableArrowKeys flag (#362)

---
 .../src/stories/Accessibility.stories.tsx     | 36 +++++++++++++++++++
 .../core/src/tree/useTreeKeyboardBindings.ts  | 10 +++---
 packages/core/src/types.ts                    |  2 ++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/stories/Accessibility.stories.tsx b/packages/core/src/stories/Accessibility.stories.tsx
index 96e6abfe3..22c7818fc 100644
--- a/packages/core/src/stories/Accessibility.stories.tsx
+++ b/packages/core/src/stories/Accessibility.stories.tsx
@@ -142,3 +142,39 @@ export const NoDescriptors = () => (
     <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
   </UncontrolledTreeEnvironment>
 );
+
+export const NoKeyboardBindings = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    dataProvider={
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      }))
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {},
+    }}
+    keyboardBindings={{
+      primaryAction: [],
+      moveFocusToFirstItem: [],
+      moveFocusToLastItem: [],
+      expandSiblings: [],
+      renameItem: [],
+      abortRenameItem: [],
+      toggleSelectItem: [],
+      abortSearch: [],
+      startSearch: [],
+      selectAll: [],
+      startProgrammaticDnd: [],
+      abortProgrammaticDnd: [],
+      completeProgrammaticDnd: [],
+    }}
+    disableArrowKeys
+  >
+    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+  </UncontrolledTreeEnvironment>
+);
diff --git a/packages/core/src/tree/useTreeKeyboardBindings.ts b/packages/core/src/tree/useTreeKeyboardBindings.ts
index e7c21c64e..45d133ae2 100644
--- a/packages/core/src/tree/useTreeKeyboardBindings.ts
+++ b/packages/core/src/tree/useTreeKeyboardBindings.ts
@@ -19,6 +19,8 @@ export const useTreeKeyboardBindings = () => {
 
   const isActiveTree = environment.activeTreeId === treeId;
   const isRenaming = !!renamingItem;
+  const { disableArrowKeys } = environment;
+  const enableArrowKeys = !disableArrowKeys && isActiveTree && !isRenaming;
 
   useKey(
     'arrowdown',
@@ -34,7 +36,7 @@ export const useTreeKeyboardBindings = () => {
         }
       }
     },
-    isActiveTree && !isRenaming
+    enableArrowKeys
   );
 
   useKey(
@@ -51,7 +53,7 @@ export const useTreeKeyboardBindings = () => {
         }
       }
     },
-    isActiveTree && !isRenaming
+    enableArrowKeys
   );
 
   useHotkey(
@@ -87,7 +89,7 @@ export const useTreeKeyboardBindings = () => {
         return currentIndex;
       });
     },
-    isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming
+    enableArrowKeys && !dnd.isProgrammaticallyDragging
   );
 
   useKey(
@@ -111,7 +113,7 @@ export const useTreeKeyboardBindings = () => {
         return currentIndex;
       });
     },
-    isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming
+    enableArrowKeys && !dnd.isProgrammaticallyDragging
   );
 
   useHotkey(
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index d8a2fda0d..c8023fb8d 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -193,6 +193,8 @@ export interface TreeCapabilities<T = any, C extends string = never> {
    * at the top.
    */
   canDropBelowOpenFolders?: boolean;
+
+  disableArrowKeys?: boolean;
 }
 
 export type IndividualTreeViewState<C extends string = never> = {