diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx index 4b297a5ea..47662ba9a 100644 --- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx +++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx @@ -34,10 +34,6 @@ export const RightDrawerRecord = () => { throw new Error(`Object name is not defined`); } - if (!viewableRecordId && !isNewViewableRecordLoading) { - throw new Error(`Record id is not defined`); - } - const { objectNameSingular, objectRecordId } = useRecordShowPage( viewableRecordNameSingular ?? '', viewableRecordId ?? '', diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupBodyContextProvider.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupBodyContextProvider.tsx index c88ff0ac1..9261b6137 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupBodyContextProvider.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupBodyContextProvider.tsx @@ -4,7 +4,7 @@ import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks import { useUpsertTableRecordNoGroup } from '@/object-record/record-table/hooks/internal/useUpsertTableRecordNoGroup'; import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus'; import { useCloseRecordTableCellNoGroup } from '@/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellNoGroup'; -import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2'; +import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover'; import { OpenTableCellArgs, useOpenRecordTableCellV2, @@ -55,11 +55,13 @@ export const RecordTableNoRecordGroupBodyContextProvider = ({ closeTableCellNoGroup(); }; - const { moveSoftFocusToCell } = - useMoveSoftFocusToCellOnHoverV2(recordTableId); + const { moveSoftFocusToCurrentCell } = + useMoveSoftFocusToCurrentCellOnHover(recordTableId); - const handleMoveSoftFocusToCell = (cellPosition: TableCellPosition) => { - moveSoftFocusToCell(cellPosition); + const handleMoveSoftFocusToCurrentCell = ( + cellPosition: TableCellPosition, + ) => { + moveSoftFocusToCurrentCell(cellPosition); }; const { triggerActionMenuDropdown } = useTriggerActionMenuDropdown({ @@ -84,7 +86,7 @@ export const RecordTableNoRecordGroupBodyContextProvider = ({ onOpenTableCell: handleOpenTableCell, onMoveFocus: handleMoveFocus, onCloseTableCell: handleCloseTableCell, - onMoveSoftFocusToCell: handleMoveSoftFocusToCell, + onMoveSoftFocusToCurrentCell: handleMoveSoftFocusToCurrentCell, onActionMenuDropdownOpened: handleActionMenuDropdown, onCellMouseEnter: handleContainerMouseEnter, }} diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupBodyContextProvider.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupBodyContextProvider.tsx index 002a61624..3bf2c2e8f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupBodyContextProvider.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupBodyContextProvider.tsx @@ -4,7 +4,7 @@ import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks import { useUpsertTableRecordInGroup } from '@/object-record/record-table/hooks/internal/useUpsertTableRecordInGroup'; import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus'; import { useCloseRecordTableCellInGroup } from '@/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellInGroup'; -import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2'; +import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover'; import { OpenTableCellArgs, useOpenRecordTableCellV2, @@ -59,11 +59,13 @@ export const RecordTableRecordGroupBodyContextProvider = ({ closeTableCellInGroup(); }; - const { moveSoftFocusToCell } = - useMoveSoftFocusToCellOnHoverV2(recordTableId); + const { moveSoftFocusToCurrentCell } = + useMoveSoftFocusToCurrentCellOnHover(recordTableId); - const handleMoveSoftFocusToCell = (cellPosition: TableCellPosition) => { - moveSoftFocusToCell(cellPosition); + const handleMoveSoftFocusToCurrentCell = ( + cellPosition: TableCellPosition, + ) => { + moveSoftFocusToCurrentCell(cellPosition); }; const { triggerActionMenuDropdown } = useTriggerActionMenuDropdown({ @@ -88,7 +90,7 @@ export const RecordTableRecordGroupBodyContextProvider = ({ onOpenTableCell: handleOpenTableCell, onMoveFocus: handleMoveFocus, onCloseTableCell: handlecloseTableCellInGroup, - onMoveSoftFocusToCell: handleMoveSoftFocusToCell, + onMoveSoftFocusToCurrentCell: handleMoveSoftFocusToCurrentCell, onActionMenuDropdownOpened: handleActionMenuDropdown, onCellMouseEnter: handleContainerMouseEnter, }} diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx index 4989c848a..124813fb6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx @@ -94,7 +94,7 @@ const meta: Meta = { onOpenTableCell: () => {}, onMoveFocus: () => {}, onCloseTableCell: () => {}, - onMoveSoftFocusToCell: () => {}, + onMoveSoftFocusToCurrentCell: () => {}, onActionMenuDropdownOpened: () => {}, onCellMouseEnter: () => {}, }} diff --git a/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableBodyContext.ts b/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableBodyContext.ts index 4884c8e25..9c438c3e0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableBodyContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableBodyContext.ts @@ -20,7 +20,7 @@ export type RecordTableBodyContextProps = { onOpenTableCell: (args: OpenTableCellArgs) => void; onMoveFocus: (direction: MoveFocusDirection) => void; onCloseTableCell: () => void; - onMoveSoftFocusToCell: (cellPosition: TableCellPosition) => void; + onMoveSoftFocusToCurrentCell: (cellPosition: TableCellPosition) => void; onActionMenuDropdownOpened: ( event: React.MouseEvent, recordId: string, diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts index 6646f8b75..e2f0d8e91 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2'; +import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover'; import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState'; import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState'; import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState'; @@ -18,8 +18,8 @@ export const useHandleContainerMouseEnter = ({ }: { recordTableId: string; }) => { - const { moveSoftFocusToCell } = - useMoveSoftFocusToCellOnHoverV2(recordTableId); + const { moveSoftFocusToCurrentCell } = + useMoveSoftFocusToCurrentCellOnHover(recordTableId); const currentTableCellInEditModePositionState = useRecoilComponentCallbackStateV2( @@ -56,7 +56,7 @@ export const useHandleContainerMouseEnter = ({ ); if (!isSomeCellInEditMode && !isSoftFocusOnTableCell) { - moveSoftFocusToCell(cellPosition); + moveSoftFocusToCurrentCell(cellPosition); set(isSoftFocusUsingMouseState, true); } }, @@ -64,7 +64,7 @@ export const useHandleContainerMouseEnter = ({ isSoftFocusOnTableCellFamilyState, currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState, - moveSoftFocusToCell, + moveSoftFocusToCurrentCell, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx index 60bd7ec14..b374fb146 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx @@ -59,7 +59,7 @@ export const RecordTableCellBaseContainer = ({ const isReadOnly = useIsFieldValueReadOnly(); const { hasSoftFocus, cellPosition } = useContext(RecordTableCellContext); - const { onMoveSoftFocusToCell, onCellMouseEnter } = + const { onMoveSoftFocusToCurrentCell, onCellMouseEnter } = useRecordTableBodyContextOrThrow(); const handleContainerMouseMove = () => { @@ -77,7 +77,7 @@ export const RecordTableCellBaseContainer = ({ const handleContainerClick = () => { if (!hasSoftFocus) { - onMoveSoftFocusToCell(cellPosition); + onMoveSoftFocusToCurrentCell(cellPosition); openTableCell(); } }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index 0197e7e02..7fa568e8b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx @@ -4,6 +4,10 @@ import { RecordTableCellContext } from '@/object-record/record-table/contexts/Re import { RecordTableCellBaseContainer } from '@/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer'; import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode'; +import { RecordTableCellSoftFocusModeHotkeysSetterEffect } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusModeHotkeysSetterEffect'; +import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; +import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; +import { useRecoilValue } from 'recoil'; import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode'; import { RecordTableCellEditMode } from './RecordTableCellEditMode'; @@ -22,15 +26,22 @@ export const RecordTableCellContainer = ({ }: RecordTableCellContainerProps) => { const { hasSoftFocus, isInEditMode } = useContext(RecordTableCellContext); + const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState); + return ( {isInEditMode ? ( {editModeContent} ) : hasSoftFocus ? ( - + <> + {currentHotkeyScope.scope === TableHotkeyScope.TableSoftFocus && ( + + )} + + ) : ( {nonEditModeContent} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx index ae38eabbc..bce1d6476 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx @@ -1,24 +1,16 @@ import { ReactElement, useContext, useEffect, useRef } from 'react'; import { useRecoilValue } from 'recoil'; -import { Key } from 'ts-key-enum'; import { IconArrowUpRight } from 'twenty-ui'; -import { useClearField } from '@/object-record/record-field/hooks/useClearField'; import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon'; -import { useIsFieldClearable } from '@/object-record/record-field/hooks/useIsFieldClearable'; import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty'; import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly'; -import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput'; import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton'; import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell'; import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState'; -import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey'; import { isDefined } from 'twenty-shared'; -import { TableHotkeyScope } from '../../types/TableHotkeyScope'; - import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly'; import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext'; @@ -48,13 +40,9 @@ export const RecordTableCellSoftFocusMode = ({ const isEmpty = useIsFieldEmpty(); - const isFieldClearable = useIsFieldClearable(); - - const toggleEditOnlyInput = useToggleEditOnlyInput(); const scrollRef = useRef(null); const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState); - const clearField = useClearField(); useEffect(() => { if (!isSoftFocusUsingMouse) { @@ -62,65 +50,6 @@ export const RecordTableCellSoftFocusMode = ({ } }, [isSoftFocusUsingMouse]); - useScopedHotkeys( - [Key.Backspace, Key.Delete], - () => { - if (!isFieldInputOnly && isFieldClearable) { - clearField(); - } - }, - TableHotkeyScope.TableSoftFocus, - [clearField, isFieldClearable, isFieldInputOnly], - ); - - useScopedHotkeys( - Key.Enter, - () => { - if (isFieldReadOnly) { - return; - } - - if (!isFieldInputOnly) { - openTableCell(); - } else { - toggleEditOnlyInput(); - } - }, - TableHotkeyScope.TableSoftFocus, - [openTableCell], - ); - - useScopedHotkeys( - '*', - (keyboardEvent) => { - if (isFieldReadOnly) { - return; - } - - if (!isFieldInputOnly) { - const isWritingText = - !isNonTextWritingKey(keyboardEvent.key) && - !keyboardEvent.ctrlKey && - !keyboardEvent.metaKey; - - if (!isWritingText) { - return; - } - - keyboardEvent.preventDefault(); - keyboardEvent.stopPropagation(); - keyboardEvent.stopImmediatePropagation(); - - openTableCell(keyboardEvent.key); - } - }, - TableHotkeyScope.TableSoftFocus, - [openTableCell], - { - preventDefault: false, - }, - ); - const handleClick = () => { if (!isFieldInputOnly && !isFieldReadOnly) { openTableCell(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusModeHotkeysSetterEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusModeHotkeysSetterEffect.tsx new file mode 100644 index 000000000..0745447ef --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusModeHotkeysSetterEffect.tsx @@ -0,0 +1,99 @@ +import { useEffect, useRef } from 'react'; +import { useRecoilValue } from 'recoil'; +import { Key } from 'ts-key-enum'; + +import { useClearField } from '@/object-record/record-field/hooks/useClearField'; +import { useIsFieldClearable } from '@/object-record/record-field/hooks/useIsFieldClearable'; +import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly'; +import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput'; +import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell'; +import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey'; + +import { TableHotkeyScope } from '../../types/TableHotkeyScope'; + +import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly'; + +export const RecordTableCellSoftFocusModeHotkeysSetterEffect = () => { + const isFieldReadOnly = useIsFieldValueReadOnly(); + + const { openTableCell } = useOpenRecordTableCellFromCell(); + + const isFieldInputOnly = useIsFieldInputOnly(); + + const isFieldClearable = useIsFieldClearable(); + + const toggleEditOnlyInput = useToggleEditOnlyInput(); + const scrollRef = useRef(null); + + const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState); + const clearField = useClearField(); + + useEffect(() => { + if (!isSoftFocusUsingMouse) { + scrollRef.current?.scrollIntoView({ block: 'nearest' }); + } + }, [isSoftFocusUsingMouse]); + + useScopedHotkeys( + [Key.Backspace, Key.Delete], + () => { + if (!isFieldInputOnly && isFieldClearable) { + clearField(); + } + }, + TableHotkeyScope.TableSoftFocus, + [clearField, isFieldClearable, isFieldInputOnly], + ); + + useScopedHotkeys( + Key.Enter, + () => { + if (isFieldReadOnly) { + return; + } + + if (!isFieldInputOnly) { + openTableCell(); + } else { + toggleEditOnlyInput(); + } + }, + TableHotkeyScope.TableSoftFocus, + [openTableCell], + ); + + useScopedHotkeys( + '*', + (keyboardEvent) => { + if (isFieldReadOnly) { + return; + } + + if (!isFieldInputOnly) { + const isWritingText = + !isNonTextWritingKey(keyboardEvent.key) && + !keyboardEvent.ctrlKey && + !keyboardEvent.metaKey; + + if (!isWritingText) { + return; + } + + keyboardEvent.preventDefault(); + keyboardEvent.stopPropagation(); + keyboardEvent.stopImmediatePropagation(); + + openTableCell(keyboardEvent.key); + } + }, + TableHotkeyScope.TableSoftFocus, + [openTableCell], + { + preventDefault: false, + }, + ); + + return <>; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx index 177efefd9..3b5a5d94b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx @@ -1,4 +1,5 @@ -import { act, renderHook } from '@testing-library/react'; +import { renderHook } from '@testing-library/react'; +import { act } from 'react'; import { CallbackInterface, RecoilRoot } from 'recoil'; import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; @@ -98,17 +99,15 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => ( describe('useMoveSoftFocusToCurrentCellOnHover', () => { it('should work as expected', () => { const { result } = renderHook( - () => { - return { - moveSoftFocusToCurrentCellOnHover: - useMoveSoftFocusToCurrentCellOnHover(), - }; - }, + () => useMoveSoftFocusToCurrentCellOnHover('scopeId'), { wrapper: Wrapper }, ); act(() => { - result.current.moveSoftFocusToCurrentCellOnHover(); + result.current.moveSoftFocusToCurrentCell({ + column: 3, + row: 2, + }); }); expect(mockCallbackInterface.set).toHaveBeenNthCalledWith( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2.ts deleted file mode 100644 index 782535df7..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { useRecoilCallback } from 'recoil'; - -import { useSetSoftFocus } from '@/object-record/record-table/record-table-cell/hooks/useSetSoftFocus'; -import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition'; -import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; -import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; - -import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState'; -import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState'; -import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; -import { TableHotkeyScope } from '../../types/TableHotkeyScope'; - -export const useMoveSoftFocusToCellOnHoverV2 = (recordTableId: string) => { - const setSoftFocus = useSetSoftFocus(recordTableId); - - const currentTableCellInEditModePositionState = - useRecoilComponentCallbackStateV2( - currentTableCellInEditModePositionComponentState, - recordTableId, - ); - const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2( - isTableCellInEditModeComponentFamilyState, - recordTableId, - ); - - const moveSoftFocusToCell = useRecoilCallback( - ({ snapshot }) => - (cellPosition: TableCellPosition) => { - const currentTableCellInEditModePosition = getSnapshotValue( - snapshot, - currentTableCellInEditModePositionState, - ); - - const isSomeCellInEditMode = snapshot - .getLoadable( - isTableCellInEditModeFamilyState( - currentTableCellInEditModePosition, - ), - ) - .getValue(); - - const currentHotkeyScope = snapshot - .getLoadable(currentHotkeyScopeState) - .getValue(); - - if ( - currentHotkeyScope.scope !== TableHotkeyScope.TableSoftFocus && - currentHotkeyScope.scope !== TableHotkeyScope.CellEditMode && - currentHotkeyScope.scope !== TableHotkeyScope.Table - ) { - return; - } - - if (!isSomeCellInEditMode) { - setSoftFocus(cellPosition); - } - }, - [ - currentTableCellInEditModePositionState, - isTableCellInEditModeFamilyState, - setSoftFocus, - ], - ); - - return { moveSoftFocusToCell }; -}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts index d4d9e3a04..60c4f1f13 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts @@ -1,29 +1,32 @@ import { useRecoilCallback } from 'recoil'; +import { useSetSoftFocus } from '@/object-record/record-table/record-table-cell/hooks/useSetSoftFocus'; +import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; -import { TableHotkeyScope } from '../../types/TableHotkeyScope'; - import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState'; import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState'; +import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; -import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell'; +import { TableHotkeyScope } from '../../types/TableHotkeyScope'; -export const useMoveSoftFocusToCurrentCellOnHover = () => { - const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell(); +export const useMoveSoftFocusToCurrentCellOnHover = (recordTableId: string) => { + const setSoftFocus = useSetSoftFocus(recordTableId); const currentTableCellInEditModePositionState = useRecoilComponentCallbackStateV2( currentTableCellInEditModePositionComponentState, + recordTableId, ); const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2( isTableCellInEditModeComponentFamilyState, + recordTableId, ); - return useRecoilCallback( + const moveSoftFocusToCurrentCell = useRecoilCallback( ({ snapshot }) => - () => { + (cellPosition: TableCellPosition) => { const currentTableCellInEditModePosition = getSnapshotValue( snapshot, currentTableCellInEditModePositionState, @@ -44,19 +47,22 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => { if ( currentHotkeyScope.scope !== TableHotkeyScope.TableSoftFocus && currentHotkeyScope.scope !== TableHotkeyScope.CellEditMode && - currentHotkeyScope.scope !== TableHotkeyScope.Table + currentHotkeyScope.scope !== TableHotkeyScope.Table && + currentHotkeyScope.scope !== AppHotkeyScope.CommandMenuOpen ) { return; } if (!isSomeCellInEditMode) { - setSoftFocusOnCurrentTableCell(); + setSoftFocus(cellPosition); } }, [ currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState, - setSoftFocusOnCurrentTableCell, + setSoftFocus, ], ); + + return { moveSoftFocusToCurrentCell }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts index ceda3e00d..62a9dd076 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts @@ -5,6 +5,8 @@ import { TableCellPosition } from '@/object-record/record-table/types/TableCellP import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState'; +import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; +import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; @@ -19,13 +21,18 @@ export const useSetSoftFocus = (recordTableId?: string) => { const setHotkeyScope = useSetHotkeyScope(); return useRecoilCallback( - ({ set }) => + ({ snapshot, set }) => (newPosition: TableCellPosition) => { setSoftFocusPosition(newPosition); set(isSoftFocusActiveState, true); - setHotkeyScope(TableHotkeyScope.TableSoftFocus); + if ( + snapshot.getLoadable(currentHotkeyScopeState).getValue().scope !== + AppHotkeyScope.CommandMenuOpen + ) { + setHotkeyScope(TableHotkeyScope.TableSoftFocus); + } }, [setSoftFocusPosition, isSoftFocusActiveState, setHotkeyScope], ); diff --git a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx index 835271543..5c26e4689 100644 --- a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx @@ -45,7 +45,7 @@ export const RecordTableDecorator: Decorator = (Story) => { onOpenTableCell: () => {}, onActionMenuDropdownOpened: () => {}, onMoveFocus: () => {}, - onMoveSoftFocusToCell: () => {}, + onMoveSoftFocusToCurrentCell: () => {}, onUpsertRecord: () => {}, }} >