feat: introduce disableArrowKeys flag (#362)

Author: lukasbach

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>
+);

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(

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> = {