escape closes context menus

src/client/webapp/elements/components/overlay.tsx

@@ -15,7 +15,7 @@ const Overlay: FC<OverlayProps> = (props: OverlayProps) => {
 	const { childRootRef, close, children } = props;
 
 	if (childRootRef) {
-		ReactHelper.useCloseWhenClickedOrContextOutsideEffect(childRootRef, close);
+		ReactHelper.useCloseWhenEscapeOrClickedOrContextOutsideEffect(childRootRef, close);
 	}
 
 	const keyDownHandler = useCallback((e: KeyboardEvent) => {

src/client/webapp/elements/contexts/components/context-menu.tsx

@@ -17,7 +17,7 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
 
 	const rootRef = useRef<HTMLDivElement>(null);
 
-	ReactHelper.useCloseWhenClickedOrContextOutsideEffect(rootRef, close);
+	ReactHelper.useCloseWhenEscapeOrClickedOrContextOutsideEffect(rootRef, close);
 
 	return (
 		<Context rootRef={rootRef} relativeToRef={relativeToRef} relativeToPos={relativeToPos} alignment={alignment}>

src/client/webapp/elements/require/react-helper.tsx

@@ -342,7 +342,7 @@ export default class ReactHelper {
 	}
 
 	// Makes sure to also allow you to fly-out a click starting inside of the ref'd element but was dragged outside
-	static useCloseWhenClickedOrContextOutsideEffect(ref: RefObject<HTMLElement>, close: () => void) {
+	static useCloseWhenEscapeOrClickedOrContextOutsideEffect(ref: RefObject<HTMLElement>, close: () => void) {
 		// Have to use a ref here and not states since we can't re-assign state between mouseup and click
 		const mouseRef = useRef<{ mouseDownTarget: Node | null, mouseUpTarget: Node | null}>({ mouseDownTarget: null, mouseUpTarget: null });
 
@@ -384,7 +384,14 @@ export default class ReactHelper {
 			if (ref.current.contains(event.target as Node)) return;
 			// Context menu is fired on mouse-down so no need to do special checks.
 			close();
-		}, [ ref ])
+		}, [ ref ]);
+
+		const handleKeyDown = useCallback((event: KeyboardEvent) => {
+			if (!ref.current) return;
+			if (event.key !== 'Escape') return;
+
+			close();
+		}, [ ref ]);
 
 		useEffect(() => {
 			document.addEventListener('click', handleClickOutside);
@@ -413,6 +420,13 @@ export default class ReactHelper {
 				document.removeEventListener('contextmenu', handleContextMenu);
 			}
 		}, [ handleClickOutside ]);
+
+		useEffect(() => {
+			document.addEventListener('keydown', handleKeyDown);
+			return () => {
+				document.removeEventListener('keydown', handleKeyDown);
+			}
+		}, [ handleKeyDown ]);
 	}
 
 	static useAlignment(