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/editable-cell/EditableCell.tsx

@@ -1,11 +1,15 @@
 import { ReactElement } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
-import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 
+import { useEditableCell } from './hooks/useCloseEditableCell';
+import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from './hooks/useSetSoftFocusOnCurrentCell';
+import { isEditModeScopedState } from './states/isEditModeScopedState';
 import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
+import { EditableCellSoftFocusMode } from './EditableCellSoftFocusMode';
 
 export const CellBaseContainer = styled.div`
   align-items: center;
@@ -23,43 +27,48 @@ type OwnProps = {
   nonEditModeContent: ReactElement;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
-  isEditMode?: boolean;
-  isCreateMode?: boolean;
-  onOutsideClick?: () => void;
-  onInsideClick?: () => void;
 };
 
 export function EditableCell({
-  editModeContent,
-  nonEditModeContent,
   editModeHorizontalAlign = 'left',
   editModeVerticalPosition = 'over',
-  isEditMode = false,
-  onOutsideClick,
-  onInsideClick,
+  editModeContent,
+  nonEditModeContent,
 }: OwnProps) {
-  const [isSomeInputInEditMode, setIsSomeInputInEditMode] = useRecoilState(
-    isSomeInputInEditModeState,
-  );
+  const [isEditMode] = useRecoilScopedState(isEditModeScopedState);
 
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
+
+  const { closeEditableCell, openEditableCell } = useEditableCell();
+
+  // TODO: we might have silent problematic behavior because of the setTimeout in openEditableCell, investigate
+  // Maybe we could build a switchEditableCell to handle the case where we go from one cell to another.
+  // See https://github.com/twentyhq/twenty/issues/446
   function handleOnClick() {
-    if (!isSomeInputInEditMode) {
-      onInsideClick?.();
-      setIsSomeInputInEditMode(true);
-    }
+    openEditableCell();
+    setSoftFocusOnCurrentCell();
   }
 
+  function handleOnOutsideClick() {
+    closeEditableCell();
+  }
+
+  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
+
   return (
     <CellBaseContainer onClick={handleOnClick}>
       {isEditMode ? (
         <EditableCellEditMode
           editModeHorizontalAlign={editModeHorizontalAlign}
           editModeVerticalPosition={editModeVerticalPosition}
-          isEditMode={isEditMode}
-          onOutsideClick={onOutsideClick}
+          onOutsideClick={handleOnOutsideClick}
         >
           {editModeContent}
         </EditableCellEditMode>
+      ) : hasSoftFocus ? (
+        <EditableCellSoftFocusMode>
+          {nonEditModeContent}
+        </EditableCellSoftFocusMode>
       ) : (
         <EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
       )}

front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -1,7 +1,12 @@
-import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
-export const EditableCellNormalModeOuterContainer = styled.div`
+import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
+
+type Props = {
+  softFocus: boolean;
+};
+
+export const EditableCellNormalModeOuterContainer = styled.div<Props>`
   align-items: center;
   display: flex;
   height: 100%;
@@ -11,17 +16,12 @@ export const EditableCellNormalModeOuterContainer = styled.div`
   padding-right: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 
-  &:hover {
-    -moz-box-shadow: inset 0 0 0 1px
-      ${({ theme }) => theme.font.color.extraLight};
-
-    -webkit-box-shadow: inset 0 0 0 1px
-      ${({ theme }) => theme.font.color.extraLight};
-    background: ${({ theme }) => theme.background.transparent.secondary};
-    border-radius: ${({ theme }) => theme.border.radius.md};
-
-    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.font.color.extraLight};
-  }
+  ${(props) =>
+    props.softFocus
+      ? `background: ${props.theme.background.transparent.secondary};
+         border-radius: ${props.theme.border.radius.md};
+         box-shadow: inset 0 0 0 1px ${props.theme.grayScale.gray30};`
+      : ''}
 `;
 
 export const EditableCellNormalModeInnerContainer = styled.div`
@@ -32,13 +32,13 @@ export const EditableCellNormalModeInnerContainer = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
-  children: ReactElement;
-};
+export function EditableCellDisplayMode({
+  children,
+}: React.PropsWithChildren<unknown>) {
+  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
 
-export function EditableCellDisplayMode({ children }: OwnProps) {
   return (
-    <EditableCellNormalModeOuterContainer>
+    <EditableCellNormalModeOuterContainer softFocus={hasSoftFocus}>
       <EditableCellNormalModeInnerContainer>
         {children}
       </EditableCellNormalModeInnerContainer>

front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx

@@ -1,13 +1,12 @@
-import { ReactElement, useMemo, useRef } from 'react';
+import { ReactElement, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
+import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+import { useMoveSoftFocus } from '@/ui/tables/hooks/useMoveSoftFocus';
 import { overlayBackground } from '@/ui/themes/effects';
-import { debounce } from '@/utils/debounce';
 
-import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
-import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
+import { useEditableCell } from './hooks/useCloseEditableCell';
 
 export const EditableCellEditModeContainer = styled.div<OwnProps>`
   align-items: center;
@@ -32,67 +31,77 @@ type OwnProps = {
   children: ReactElement;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
-  isEditMode?: boolean;
   onOutsideClick?: () => void;
-  onInsideClick?: () => void;
 };
 
 export function EditableCellEditMode({
   editModeHorizontalAlign,
   editModeVerticalPosition,
   children,
-  isEditMode,
   onOutsideClick,
 }: OwnProps) {
   const wrapperRef = useRef(null);
 
-  const [, setIsSomeInputInEditMode] = useRecoilState(
-    isSomeInputInEditModeState,
-  );
-
-  const debouncedSetIsSomeInputInEditMode = useMemo(() => {
-    return debounce(setIsSomeInputInEditMode, 20);
-  }, [setIsSomeInputInEditMode]);
+  const { closeEditableCell } = useEditableCell();
+  const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
 
   useListenClickOutsideArrayOfRef([wrapperRef], () => {
-    if (isEditMode) {
-      debouncedSetIsSomeInputInEditMode(false);
-      onOutsideClick?.();
-    }
+    onOutsideClick?.();
   });
 
-  useHotkeys(
-    'esc',
-    () => {
-      if (isEditMode) {
-        onOutsideClick?.();
-
-        debouncedSetIsSomeInputInEditMode(false);
-      }
-    },
-    {
-      preventDefault: true,
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
-    [isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode],
-  );
-
   useHotkeys(
     'enter',
     () => {
-      if (isEditMode) {
-        onOutsideClick?.();
-
-        debouncedSetIsSomeInputInEditMode(false);
-      }
+      closeEditableCell();
+      moveDown();
     },
     {
-      preventDefault: true,
       enableOnContentEditable: true,
       enableOnFormTags: true,
+      preventDefault: true,
     },
-    [isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode],
+    [closeEditableCell],
+  );
+
+  useHotkeys(
+    'esc',
+    () => {
+      closeEditableCell();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+    [closeEditableCell],
+  );
+
+  useHotkeys(
+    'tab',
+    () => {
+      closeEditableCell();
+      moveRight();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+    [closeEditableCell, moveRight],
+  );
+
+  useHotkeys(
+    'shift+tab',
+    () => {
+      closeEditableCell();
+      moveLeft();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+    [closeEditableCell, moveRight],
   );
 
   return (

front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useRecoilState } from 'recoil';
+
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
+import { isNonTextWritingKey } from '@/utils/hotkeys/isNonTextWritingKey';
+
+import { useEditableCell } from './hooks/useCloseEditableCell';
+import { EditableCellDisplayMode } from './EditableCellDisplayMode';
+
+export function EditableCellSoftFocusMode({
+  children,
+}: React.PropsWithChildren<unknown>) {
+  const { closeEditableCell, openEditableCell } = useEditableCell();
+  const [captureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
+
+  useHotkeys(
+    'enter',
+    () => {
+      openEditableCell();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+    [closeEditableCell],
+  );
+
+  useHotkeys(
+    '*',
+    (keyboardEvent) => {
+      const isWritingText =
+        !isNonTextWritingKey(keyboardEvent.key) &&
+        !keyboardEvent.ctrlKey &&
+        !keyboardEvent.metaKey;
+
+      if (!isWritingText) {
+        return;
+      }
+
+      if (captureHotkeyTypeInFocus) {
+        return;
+      }
+      openEditableCell();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: false,
+    },
+  );
+
+  return <EditableCellDisplayMode>{children}</EditableCellDisplayMode>;
+}

front/src/modules/ui/components/editable-cell/EditableCellV2.tsx

@@ -1,71 +0,0 @@
-import { ReactElement } from 'react';
-import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
-
-import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
-
-import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
-
-import { isEditModeScopedState } from './states/isEditModeScopedState';
-import { EditableCellDisplayMode } from './EditableCellDisplayMode';
-import { EditableCellEditMode } from './EditableCellEditMode';
-
-export const CellBaseContainer = styled.div`
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  height: 32px;
-  position: relative;
-  user-select: none;
-  width: 100%;
-`;
-
-type OwnProps = {
-  editModeContent: ReactElement;
-  nonEditModeContent: ReactElement;
-  editModeHorizontalAlign?: 'left' | 'right';
-  editModeVerticalPosition?: 'over' | 'below';
-};
-
-export function EditableCellV2({
-  editModeHorizontalAlign = 'left',
-  editModeVerticalPosition = 'over',
-  editModeContent,
-  nonEditModeContent,
-}: OwnProps) {
-  const [isEditMode, setIsEditMode] = useRecoilScopedState(
-    isEditModeScopedState,
-  );
-  const [isSomeInputInEditMode, setIsSomeInputInEditMode] = useRecoilState(
-    isSomeInputInEditModeState,
-  );
-
-  function handleOnClick() {
-    if (!isSomeInputInEditMode) {
-      setIsSomeInputInEditMode(true);
-      setIsEditMode(true);
-    }
-  }
-
-  function handleOnOutsideClick() {
-    setIsEditMode(false);
-  }
-
-  return (
-    <CellBaseContainer onClick={handleOnClick}>
-      {isEditMode ? (
-        <EditableCellEditMode
-          editModeHorizontalAlign={editModeHorizontalAlign}
-          editModeVerticalPosition={editModeVerticalPosition}
-          isEditMode={isEditMode}
-          onOutsideClick={handleOnOutsideClick}
-        >
-          {editModeContent}
-        </EditableCellEditMode>
-      ) : (
-        <EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
-      )}
-    </CellBaseContainer>
-  );
-}

front/src/modules/ui/components/editable-cell/hooks/useCloseEditableCell.ts

@@ -1,19 +1,43 @@
-import { useCallback } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 
-import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
 
 import { isEditModeScopedState } from '../states/isEditModeScopedState';
 
-export function useCloseEditableCell() {
-  const [, setIsSomeInputInEditMode] = useRecoilState(
-    isSomeInputInEditModeState,
-  );
+export function useEditableCell() {
   const [, setIsEditMode] = useRecoilScopedState(isEditModeScopedState);
 
-  return useCallback(() => {
-    setIsSomeInputInEditMode(false);
-    setIsEditMode(false);
-  }, [setIsEditMode, setIsSomeInputInEditMode]);
+  const closeEditableCell = useRecoilCallback(
+    ({ set }) =>
+      async () => {
+        setIsEditMode(false);
+
+        await new Promise((resolve) => setTimeout(resolve, 20));
+
+        set(isSomeInputInEditModeState, false);
+      },
+    [setIsEditMode],
+  );
+
+  const openEditableCell = useRecoilCallback(
+    ({ snapshot, set }) =>
+      () => {
+        const isSomeInputInEditMode = snapshot
+          .getLoadable(isSomeInputInEditModeState)
+          .valueOrThrow();
+
+        if (!isSomeInputInEditMode) {
+          set(isSomeInputInEditModeState, true);
+
+          setIsEditMode(true);
+        }
+      },
+    [setIsEditMode],
+  );
+
+  return {
+    closeEditableCell,
+    openEditableCell,
+  };
 }

front/src/modules/ui/components/editable-cell/hooks/useIsSoftFocusOnCurrentCell.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
+import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { isSoftFocusOnCellFamilyState } from '@/ui/tables/states/isSoftFocusOnCellFamilyState';
+import { RowContext } from '@/ui/tables/states/RowContext';
+import { TablePosition } from '@/ui/tables/types/TablePosition';
+
+export function useIsSoftFocusOnCurrentCell() {
+  const [currentRowNumber] = useRecoilScopedState(
+    currentRowNumberScopedState,
+    RowContext,
+  );
+
+  const [currentColumnNumber] = useRecoilScopedState(
+    currentColumnNumberScopedState,
+    CellContext,
+  );
+
+  const currentTablePosition: TablePosition = useMemo(
+    () => ({
+      column: currentColumnNumber,
+      row: currentRowNumber,
+    }),
+    [currentColumnNumber, currentRowNumber],
+  );
+
+  const isSoftFocusOnCell = useRecoilValue(
+    isSoftFocusOnCellFamilyState(currentTablePosition),
+  );
+
+  return isSoftFocusOnCell;
+}

front/src/modules/ui/components/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo } from 'react';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { useSetSoftFocusPosition } from '@/ui/tables/hooks/useSetSoftFocusPosition';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
+import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { RowContext } from '@/ui/tables/states/RowContext';
+import { TablePosition } from '@/ui/tables/types/TablePosition';
+
+export function useSetSoftFocusOnCurrentCell() {
+  const setSoftFocusPosition = useSetSoftFocusPosition();
+  const [currentRowNumber] = useRecoilScopedState(
+    currentRowNumberScopedState,
+    RowContext,
+  );
+
+  const [currentColumnNumber] = useRecoilScopedState(
+    currentColumnNumberScopedState,
+    CellContext,
+  );
+
+  const currentTablePosition: TablePosition = useMemo(
+    () => ({
+      column: currentColumnNumber,
+      row: currentRowNumber,
+    }),
+    [currentColumnNumber, currentRowNumber],
+  );
+
+  return useCallback(() => {
+    setSoftFocusPosition(currentTablePosition);
+  }, [setSoftFocusPosition, currentTablePosition]);
+}

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -50,7 +50,6 @@ function EditableChip({
 }: EditableChipProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
-  const [isEditMode, setIsEditMode] = useState(false);
 
   const handleRightEndContentClick = (
     event: React.MouseEvent<HTMLDivElement>,
@@ -60,9 +59,6 @@ function EditableChip({
 
   return (
     <EditableCell
-      onOutsideClick={() => setIsEditMode(false)}
-      onInsideClick={() => setIsEditMode(true)}
-      isEditMode={isEditMode}
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <StyledInplaceInput

front/src/modules/ui/components/editable-cell/types/EditableDate.tsx

@@ -38,7 +38,6 @@ export function EditableDate({
   editModeHorizontalAlign,
 }: EditableDateProps) {
   const [inputValue, setInputValue] = useState(value);
-  const [isEditMode, setIsEditMode] = useState(false);
 
   type DivProps = React.HTMLProps<HTMLDivElement>;
 
@@ -60,9 +59,6 @@ export function EditableDate({
 
   return (
     <EditableCell
-      isEditMode={isEditMode}
-      onOutsideClick={() => setIsEditMode(false)}
-      onInsideClick={() => setIsEditMode(true)}
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <StyledContainer>

front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactElement, useRef, useState } from 'react';
+import { ChangeEvent, ReactElement, useRef } from 'react';
 import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
@@ -42,13 +42,9 @@ export function EditableDoubleText({
   onChange,
 }: OwnProps) {
   const firstValueInputRef = useRef<HTMLInputElement>(null);
-  const [isEditMode, setIsEditMode] = useState(false);
 
   return (
     <EditableCell
-      onInsideClick={() => setIsEditMode(true)}
-      onOutsideClick={() => setIsEditMode(false)}
-      isEditMode={isEditMode}
       editModeContent={
         <StyledContainer>
           <StyledEditInplaceInput

front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx

@@ -13,10 +13,6 @@ type OwnProps = {
   changeHandler: (updated: string) => void;
 };
 
-type StyledEditModeProps = {
-  isEditMode: boolean;
-};
-
 const StyledRawLink = styled(RawLink)`
   overflow: hidden;
 
@@ -28,7 +24,7 @@ const StyledRawLink = styled(RawLink)`
 `;
 
 // TODO: refactor
-const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
+const StyledEditInplaceInput = styled.input`
   margin: 0;
   width: 100%;
   ${textInputStyle}
@@ -37,17 +33,12 @@ const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
 export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
-  const [isEditMode, setIsEditMode] = useState(false);
 
   return (
     <EditableCell
-      isEditMode={isEditMode}
-      onOutsideClick={() => setIsEditMode(false)}
-      onInsideClick={() => setIsEditMode(true)}
       editModeContent={
         <StyledEditInplaceInput
           autoFocus
-          isEditMode={isEditMode}
           placeholder={placeholder || ''}
           ref={inputRef}
           value={inputValue}

front/src/modules/ui/components/editable-cell/types/EditableText.tsx

@@ -12,12 +12,8 @@ type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
-type StyledEditModeProps = {
-  isEditMode: boolean;
-};
-
 // TODO: refactor
-const StyledInplaceInput = styled.input<StyledEditModeProps>`
+const StyledInplaceInput = styled.input`
   margin: 0;
   width: 100%;
   ${textInputStyle}
@@ -38,17 +34,12 @@ export function EditableText({
 }: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(content);
-  const [isEditMode, setIsEditMode] = useState(false);
 
   return (
     <EditableCell
-      isEditMode={isEditMode}
-      onOutsideClick={() => setIsEditMode(false)}
-      onInsideClick={() => setIsEditMode(true)}
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <StyledInplaceInput
-          isEditMode={isEditMode}
           placeholder={placeholder || ''}
           autoFocus
           ref={inputRef}

front/src/modules/ui/components/table/EntityTable.tsx

@@ -6,7 +6,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import {
   FilterConfigType,
@@ -16,12 +16,13 @@ import {
   SelectedSortType,
   SortType,
 } from '@/filters-and-sorts/interfaces/sorts/interface';
-import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { RowContext } from '@/ui/tables/states/RowContext';
 
-import { useResetTableRowSelection } from '../../tables/hooks/useResetTableRowSelection';
 import { currentRowSelectionState } from '../../tables/states/rowSelectionState';
 
 import { TableHeader } from './table-header/TableHeader';
+import { EntityTableRow } from './EntityTableRow';
 
 type OwnProps<TData extends { id: string }, SortField> = {
   data: Array<TData>;
@@ -100,11 +101,6 @@ const StyledTableScrollableContainer = styled.div`
   overflow: auto;
 `;
 
-const StyledRow = styled.tr<{ selected: boolean }>`
-  background: ${(props) =>
-    props.selected ? props.theme.background.secondary : 'none'};
-`;
-
 export function EntityTable<TData extends { id: string }, SortField>({
   data,
   columns,
@@ -118,13 +114,6 @@ export function EntityTable<TData extends { id: string }, SortField>({
   const [currentRowSelection, setCurrentRowSelection] = useRecoilState(
     currentRowSelectionState,
   );
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
-
-  const resetTableRowSelection = useResetTableRowSelection();
-
-  React.useEffect(() => {
-    resetTableRowSelection();
-  }, [resetTableRowSelection]);
 
   const table = useReactTable<TData>({
     data,
@@ -138,16 +127,6 @@ export function EntityTable<TData extends { id: string }, SortField>({
     getRowId: (row) => row.id,
   });
 
-  function handleContextMenu(event: React.MouseEvent, id: string) {
-    event.preventDefault();
-    setCurrentRowSelection((prev) => ({ ...prev, [id]: true }));
-
-    setContextMenuPosition({
-      x: event.clientX,
-      y: event.clientY,
-    });
-  }
-
   return (
     <StyledTableWithHeader>
       <TableHeader
@@ -186,33 +165,9 @@ export function EntityTable<TData extends { id: string }, SortField>({
           </thead>
           <tbody>
             {table.getRowModel().rows.map((row, index) => (
-              <StyledRow
-                key={row.id}
-                data-testid={`row-id-${row.index}`}
-                selected={!!currentRowSelection[row.id]}
-              >
-                {row.getVisibleCells().map((cell) => {
-                  return (
-                    <td
-                      key={cell.id + row.original.id}
-                      onContextMenu={(event) =>
-                        handleContextMenu(event, row.original.id)
-                      }
-                      style={{
-                        width: cell.column.getSize(),
-                        minWidth: cell.column.getSize(),
-                        maxWidth: cell.column.getSize(),
-                      }}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </td>
-                  );
-                })}
-                <td></td>
-              </StyledRow>
+              <RecoilScope SpecificContext={RowContext} key={row.id}>
+                <EntityTableRow row={row} index={index} />
+              </RecoilScope>
             ))}
           </tbody>
         </StyledTable>

front/src/modules/ui/components/table/EntityTableCell.tsx

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { Cell, Row } from '@tanstack/table-core';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
+import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
+import { currentRowSelectionState } from '@/ui/tables/states/rowSelectionState';
+
+export function EntityTableCell<TData extends { id: string }>({
+  row,
+  cell,
+  cellIndex,
+}: {
+  row: Row<TData>;
+  cell: Cell<TData, unknown>;
+  cellIndex: number;
+}) {
+  const [, setCurrentRowSelection] = useRecoilState(currentRowSelectionState);
+
+  const [, setCurrentColumnNumber] = useRecoilScopedState(
+    currentColumnNumberScopedState,
+    CellContext,
+  );
+
+  useEffect(() => {
+    setCurrentColumnNumber(cellIndex);
+  }, [cellIndex, setCurrentColumnNumber]);
+
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+
+  function handleContextMenu(event: React.MouseEvent, id: string) {
+    event.preventDefault();
+    setCurrentRowSelection((prev) => ({ ...prev, [id]: true }));
+
+    setContextMenuPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+  }
+
+  return (
+    <td
+      onContextMenu={(event) => handleContextMenu(event, row.original.id)}
+      style={{
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        maxWidth: cell.column.getSize(),
+      }}
+    >
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </td>
+  );
+}

front/src/modules/ui/components/table/EntityTableRow.tsx

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import styled from '@emotion/styled';
+import { Row } from '@tanstack/table-core';
+import { useRecoilState } from 'recoil';
+
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { RowContext } from '@/ui/tables/states/RowContext';
+import { currentRowSelectionState } from '@/ui/tables/states/rowSelectionState';
+
+import { EntityTableCell } from './EntityTableCell';
+
+const StyledRow = styled.tr<{ selected: boolean }>`
+  background: ${(props) =>
+    props.selected ? props.theme.background.secondary : 'none'};
+`;
+
+export function EntityTableRow<TData extends { id: string }>({
+  row,
+  index,
+}: {
+  row: Row<TData>;
+  index: number;
+}) {
+  const [currentRowSelection] = useRecoilState(currentRowSelectionState);
+
+  const [, setCurrentRowNumber] = useRecoilScopedState(
+    currentRowNumberScopedState,
+    RowContext,
+  );
+
+  useEffect(() => {
+    setCurrentRowNumber(index);
+  }, [index, setCurrentRowNumber]);
+
+  return (
+    <StyledRow
+      key={row.id}
+      data-testid={`row-id-${row.index}`}
+      selected={!!currentRowSelection[row.id]}
+    >
+      {row.getVisibleCells().map((cell, cellIndex) => {
+        return (
+          <RecoilScope
+            SpecificContext={CellContext}
+            key={cell.id + row.original.id}
+          >
+            <RecoilScope>
+              <EntityTableCell<TData>
+                row={row}
+                cell={cell}
+                cellIndex={cellIndex}
+              />
+            </RecoilScope>
+          </RecoilScope>
+        );
+      })}
+      <td></td>
+    </StyledRow>
+  );
+}

front/src/modules/ui/components/table/HooksEntityTable.tsx

@@ -0,0 +1,19 @@
+import { useInitializeEntityTable } from '@/ui/tables/hooks/useInitializeEntityTable';
+import { useMapKeyboardToSoftFocus } from '@/ui/tables/hooks/useMapKeyboardToSoftFocus';
+
+export function HooksEntityTable({
+  numberOfColumns,
+  numberOfRows,
+}: {
+  numberOfColumns: number;
+  numberOfRows: number;
+}) {
+  useMapKeyboardToSoftFocus();
+
+  useInitializeEntityTable({
+    numberOfColumns,
+    numberOfRows,
+  });
+
+  return <></>;
+}

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();
   };

front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { ApolloProvider } from '@apollo/client';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconList } from '@/ui/icons/index';
-import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
-import { mockedClient } from '~/testing/mockedClient';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { availableFilters } from '../../../../../../pages/companies/companies-filters';
 import { availableSorts } from '../../../../../../pages/companies/companies-sorts';
@@ -20,32 +18,24 @@ export default meta;
 type Story = StoryObj<typeof TableHeader>;
 
 export const Empty: Story = {
-  render: () => (
-    <ApolloProvider client={mockedClient}>
-      <FullHeightStorybookLayout>
-        <TableHeader
-          viewName="ViewName"
-          viewIcon={<IconList />}
-          availableSorts={availableSorts}
-          availableFilters={availableFilters}
-        />
-      </FullHeightStorybookLayout>
-    </ApolloProvider>
+  render: getRenderWrapperForComponent(
+    <TableHeader
+      viewName="ViewName"
+      viewIcon={<IconList />}
+      availableSorts={availableSorts}
+      availableFilters={availableFilters}
+    />,
   ),
 };
 
 export const WithSortsAndFilters: Story = {
-  render: () => (
-    <ApolloProvider client={mockedClient}>
-      <FullHeightStorybookLayout>
-        <TableHeader
-          viewName="ViewName"
-          viewIcon={<IconList />}
-          availableSorts={availableSorts}
-          availableFilters={availableFilters}
-        />
-      </FullHeightStorybookLayout>
-    </ApolloProvider>
+  render: getRenderWrapperForComponent(
+    <TableHeader
+      viewName="ViewName"
+      viewIcon={<IconList />}
+      availableSorts={availableSorts}
+      availableFilters={availableFilters}
+    />,
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);