Right click menus now close on 'Escape'

theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/RightClickMenu.tsx

@@ -9,6 +9,7 @@ import useWindowSize from 'react-use/esm/useWindowSize'
 import styled from 'styled-components'
 import Item, {height as itemHeight} from './Item'
 import {PortalContext} from 'reakit'
+import useOnKeyDown from '@theatre/studio/uiComponents/useOnKeyDown'
 
 const minWidth = 190
 
@@ -94,6 +95,10 @@ const RightClickMenu: React.FC<{
   }, [rect, container, props.rightClickPoint, windowSize, props.onRequestClose])
   const portalLayer = useContext(PortalContext)
 
+  useOnKeyDown((ev) => {
+    if (ev.key === 'Escape') props.onRequestClose()
+  })
+
   const items = Array.isArray(props.items) ? props.items : props.items()
 
   return createPortal(

theatre/studio/src/uiComponents/useOnKeyDown.ts

@@ -0,0 +1,13 @@
+import {useEffect, useRef} from 'react'
+
+export default function useOnKeyDown(callback: (ev: KeyboardEvent) => void) {
+  const ref = useRef(callback)
+  ref.current = callback
+  useEffect(() => {
+    const onKeyDown = (ev: KeyboardEvent) => ref.current(ev)
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [])
+}