From 434ea605a8c0be4d326fa8faa6ef7896d086241e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Tue, 18 Jul 2023 18:02:08 +0200
Subject: [PATCH] feat: close RightDrawer with ESC key (#719)

Closes #576
---
 .../ui/right-drawer/components/RightDrawer.tsx        | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx
index 97bde8650..82d7ee794 100644
--- a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx
+++ b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx
@@ -3,6 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
+import { Key } from 'ts-key-enum';
 
 import {
   ClickOutsideMode,
@@ -10,8 +11,10 @@ import {
 } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
 import { isDefined } from '~/utils/isDefined';
 
+import { useScopedHotkeys } from '../../hotkey/hooks/useScopedHotkeys';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
+import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';
 
 import { RightDrawerRouter } from './RightDrawerRouter';
 
@@ -47,6 +50,14 @@ export function RightDrawer() {
     mode: ClickOutsideMode.absolute,
   });
   const theme = useTheme();
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => setIsRightDrawerOpen(false),
+    RightDrawerHotkeyScope.RightDrawer,
+    [setIsRightDrawerOpen],
+  );
+
   if (!isDefined(rightDrawerPage)) {
     return <></>;
   }