handle keyboard event (wip)

apps/designer/app/designer/shared/tree/tree-node.tsx

@@ -252,14 +252,19 @@ export const TreeNode = forwardRef<HTMLDivElement, TreeNodeProps>(
             followedByExpandButton={shouldRenderExpandButton}
           />
           {shouldRenderExpandButton && (
-            <CollapsibleTrigger>
+            <CollapsibleTrigger
+              // We don't want a separate focusable control inside a tree item.
+              tabIndex={-1}
+            >
               {isExpanded ? <TriangleDownIcon /> : <TriangleRightIcon />}
             </CollapsibleTrigger>
           )}
           <ItemButton
+            type="button"
             data-drag-item-id={instance.id}
             onFocus={makeSelected}
-            onClick={makeSelected}
+            // Focus on click works inconsistently
+            onClick={(event) => event.currentTarget.focus()}
             enableHoverState={disableHoverStates === false}
           >
             <Icon />

apps/designer/app/designer/shared/tree/tree.tsx

@@ -31,6 +31,7 @@ import {
   PlacementIndicatorLine,
   PlacementIndicatorOutline,
 } from "./placement-indicator";
+import { useHotkeys } from "react-hotkeys-hook";
 
 type TreeProps = {
   root: Instance;
@@ -361,6 +362,38 @@ export const Tree = ({
 
   useDragCursor(dragItem !== undefined);
 
+  const selectedInstance = useMemo(() => {
+    if (selectedInstanceId === undefined) {
+      return undefined;
+    }
+    return findInstanceById(root, selectedInstanceId);
+  }, [root, selectedInstanceId]);
+
+  const hotkeysRef = useHotkeys(
+    "up,down,right,left,space",
+    (_, { shortcut }) => {
+      if (selectedInstance === undefined) {
+        return;
+      }
+      if (shortcut === "right" && getIsExpanded(selectedInstance) === false) {
+        setIsExpanded(selectedInstance, true);
+      }
+      if (shortcut === "left" && getIsExpanded(selectedInstance)) {
+        setIsExpanded(selectedInstance, false);
+      }
+      if (shortcut === "space") {
+        setIsExpanded(selectedInstance, !getIsExpanded(selectedInstance));
+      }
+      if (shortcut === "up") {
+        // @todo
+      }
+      if (shortcut === "down") {
+        // @todo
+      }
+    },
+    [selectedInstance, getIsExpanded, setIsExpanded]
+  );
+
   return (
     <Box
       css={{
@@ -372,7 +405,10 @@ export const Tree = ({
         pt: 2,
         pb: 2,
       }}
-      ref={autoScrollHandlers.targetRef}
+      ref={(element) => {
+        autoScrollHandlers.targetRef(element);
+        hotkeysRef.current = element;
+      }}
       onScroll={dropHandlers.handleScroll}
     >
       <TreeNode

apps/designer/package.json

@@ -51,7 +51,7 @@
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4",
-    "react-hotkeys-hook": "^3.4.4",
+    "react-hotkeys-hook": "^3.4.7",
     "react-nano-state": "^0.4.0",
     "react-router-dom": "^6.2.2",
     "react-use": "^17.3.2",

yarn.lock

@@ -10408,10 +10408,10 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hotkeys-js@3.9.3:
-  version "3.9.3"
-  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.9.3.tgz#4b755cc695b388d7f93a83aff4b0c2a45719996c"
-  integrity sha512-s+f0xyvDmf6+DyrFQ2SY+eA7lbvMbjqkqi0I0SpMgnN5tZx7DeH8nsWhkJR4KEq3pxDPHJppDUhdt1rZFW5LeQ==
+hotkeys-js@3.9.4:
+  version "3.9.4"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.9.4.tgz#ce1aa4c3a132b6a63a9dd5644fc92b8a9b9cbfb9"
+  integrity sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q==
 
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
@@ -14685,12 +14685,12 @@ react-hot-toast@^2.3.0:
   dependencies:
     goober "^2.1.10"
 
-react-hotkeys-hook@^3.4.4:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.6.tgz#21eda8e97121583a14056479e3eea9e51d2e2a69"
-  integrity sha512-SiGKHnauaAQglRA7qeiW5LTa0KoT2ssv8YGYKZQoM3P9v5JFEHJdXOSFml1N6K86oKQ8dLCLlxqBqGlSJWGmxQ==
+react-hotkeys-hook@^3.4.7:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz#e16a0a85f59feed9f48d12cfaf166d7df4c96b7a"
+  integrity sha512-+bbPmhPAl6ns9VkXkNNyxlmCAIyDAcWbB76O4I0ntr3uWCRuIQf/aRLartUahe9chVMPj+OEzzfk3CQSjclUEQ==
   dependencies:
-    hotkeys-js "3.9.3"
+    hotkeys-js "3.9.4"
 
 react-inspector@^5.1.0:
   version "5.1.1"