From 7e8e44df04751d4b54ca032de2c232b065e5a524 Mon Sep 17 00:00:00 2001
From: James Kerr <kerr@hey.com>
Date: Tue, 2 Apr 2024 11:14:36 -0700
Subject: [PATCH] Tab Shortcuts Work

---
 .../src/commands/default-commands.ts          | 22 +++++++++++++++----
 .../react-arborist/src/commands/row-click.ts  |  1 -
 .../src/components/tree-view.tsx              |  2 +-
 .../src/controllers/tree-controller.ts        |  3 +--
 .../src/shortcuts/default-shortcuts.ts        | 10 +++++++++
 5 files changed, 30 insertions(+), 8 deletions(-)
 delete mode 100644 modules/react-arborist/src/commands/row-click.ts

diff --git a/modules/react-arborist/src/commands/default-commands.ts b/modules/react-arborist/src/commands/default-commands.ts
index 25a7d58..020a3a8 100644
--- a/modules/react-arborist/src/commands/default-commands.ts
+++ b/modules/react-arborist/src/commands/default-commands.ts
@@ -1,4 +1,5 @@
 import { TreeController } from "../controllers/tree-controller";
+import { focusNextElement, focusPrevElement } from "../utils";
 
 export function focusNext(tree: TreeController<any>) {
   const next = tree.nextNode || tree.firstNode;
@@ -10,10 +11,23 @@ export function focusPrev(tree: TreeController<any>) {
   if (prev) tree.focus(prev.id);
 }
 
-export function close() {
-  alert("close");
+export function focusParent(tree: TreeController<any>) {
+  const parentId = tree.focusedNode?.parentId;
+  if (parentId) tree.focus(parentId);
 }
 
-export function focusParent() {
-  alert("focusParent");
+export function close(tree: TreeController<any>) {
+  tree.focusedNode?.close();
+}
+
+export function open(tree: TreeController<any>) {
+  tree.focusedNode?.open();
+}
+
+export function focusOutsideNext(tree: TreeController<any>) {
+  focusNextElement(tree.element);
+}
+
+export function focusOutsidePrev() {
+  focusPrevElement(tree.element);
 }
diff --git a/modules/react-arborist/src/commands/row-click.ts b/modules/react-arborist/src/commands/row-click.ts
deleted file mode 100644
index fad9b87..0000000
--- a/modules/react-arborist/src/commands/row-click.ts
+++ /dev/null
@@ -1 +0,0 @@
-// register the row-click command
diff --git a/modules/react-arborist/src/components/tree-view.tsx b/modules/react-arborist/src/components/tree-view.tsx
index 62b3391..66ff72c 100644
--- a/modules/react-arborist/src/components/tree-view.tsx
+++ b/modules/react-arborist/src/components/tree-view.tsx
@@ -60,7 +60,7 @@ function TreeViewContainer() {
   const outerRef = useRef();
   // useOuterDrop(outerRef);
   return (
-    <div {...attrs}>
+    <div {...attrs} ref={(node) => (tree.element = node)}>
       {/* @ts-ignore */}
       <FixedSizeList
         className={tree.props.className}
diff --git a/modules/react-arborist/src/controllers/tree-controller.ts b/modules/react-arborist/src/controllers/tree-controller.ts
index 7f5e4f9..9a54ead 100644
--- a/modules/react-arborist/src/controllers/tree-controller.ts
+++ b/modules/react-arborist/src/controllers/tree-controller.ts
@@ -8,6 +8,7 @@ import { NodeController } from "./node-controller";
 
 export class TreeController<T> {
   rows: NodeController<T>[];
+  element: HTMLDivElement | null = null;
   listElement: FixedSizeList | null = null;
 
   constructor(public props: TreeViewProps<T>) {
@@ -55,7 +56,6 @@ export class TreeController<T> {
   }
 
   get focusedNode() {
-    console.log("get", this.props.focus.value.id);
     return this.get(this.props.focus.value.id);
   }
 
@@ -356,7 +356,6 @@ export class TreeController<T> {
         isLeaf: focused?.isLeaf,
       },
     );
-    console.log("focused Node", focused);
     if (shortcut) {
       e.preventDefault();
       this.exec(shortcut.command);
diff --git a/modules/react-arborist/src/shortcuts/default-shortcuts.ts b/modules/react-arborist/src/shortcuts/default-shortcuts.ts
index 7794aa7..8884d08 100644
--- a/modules/react-arborist/src/shortcuts/default-shortcuts.ts
+++ b/modules/react-arborist/src/shortcuts/default-shortcuts.ts
@@ -1,8 +1,18 @@
 import { ShortcutAttrs } from "./types";
 
 export const defaultShortcuts: ShortcutAttrs[] = [
+  /* Arrow Navigation */
   { key: "ArrowDown", command: "focusNext" },
   { key: "ArrowUp", command: "focusPrev" },
+  { key: "ArrowLeft", command: "focusParent", when: "isLeaf || isClosed" },
+  { key: "ArrowLeft", command: "close", when: "isOpen" },
+  { key: "ArrowRight", command: "open", when: "isClosed" },
+  { key: "ArrowRight", command: "focusNext", when: "isOpen" },
+  
+  /* Tabbing Around */
+  {key: "Tab", command: "focusOutsideNext"},
+  {key: "Shift+Tab", command: "focusOutsidePrev"}
+
   // { key: "Backspace", command: "destroy" },
   // { key: "Tab", command: "focusNextOutside" },
   // { key: "Shift+Tab", command: "focusNextOutside" },