Add tab hotkey on table page (#457)

* wip

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixed initialize soft focus

* Fixed enter mode

* Added TODO

* Fix

* Fixes

* Fix tests

* Fix lint

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/components/table/table-header/DropdownButton.tsx

@@ -1,6 +1,8 @@
 import { ReactNode, useRef } from 'react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
 import { IconChevronDown } from '@/ui/icons/index';
 import { overlayBackground, textInputStyle } from '@/ui/themes/effects';
 
@@ -159,11 +161,17 @@ function DropdownButton({
   setIsUnfolded,
   resetState,
 }: OwnProps) {
+  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
+
   const onButtonClick = () => {
     setIsUnfolded && setIsUnfolded(!isUnfolded);
+    setCaptureHotkeyTypeInFocus(!isUnfolded);
   };
 
   const onOutsideClick = () => {
+    setCaptureHotkeyTypeInFocus(false);
     setIsUnfolded && setIsUnfolded(false);
     resetState && resetState();
   };