diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffectsWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffectsWrapper.tsx index 6b616ea47..ce3715550 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffectsWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffectsWrapper.tsx @@ -33,9 +33,7 @@ export const RecordTableBodyEffectsWrapper = ({ )} {isAtLeastOneRecordSelected && } {isRecordTableFocusActive && } - {isRecordTableFocusActive && ( - - )} + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts index 61f627e0b..8f3ad47a8 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts @@ -1,7 +1,9 @@ import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; export const useLeaveTableFocus = (recordTableId?: string) => { const recordTableIdFromContext = useAvailableComponentInstanceIdOrThrow( @@ -17,9 +19,16 @@ export const useLeaveTableFocus = (recordTableId?: string) => { recordTableIdFromContext, ); + const setRecordTableHoverPosition = useSetRecoilComponentStateV2( + recordTableHoverPositionComponentState, + recordTableIdFromContext, + ); + return () => { resetTableRowSelection(); setIsFocusActiveForCurrentPosition(false); + + setRecordTableHoverPosition(null); }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index 2e472f4f4..db22c3357 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -3,13 +3,16 @@ import { useRecoilCallback } from 'recoil'; import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive'; import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; +import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; -import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { isDefined } from 'twenty-shared/utils'; +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; type useSetRecordTableDataProps = { recordTableId?: string; @@ -44,6 +47,14 @@ export const useSetRecordTableData = ({ recordTableId, ); + const { setIsFocusActiveForCurrentPosition } = + useSetIsRecordTableFocusActive(recordTableId); + + const setRecordTableHoverPosition = useSetRecoilComponentStateV2( + recordTableHoverPositionComponentState, + recordTableId, + ); + return useRecoilCallback( ({ set, snapshot }) => ({ @@ -84,6 +95,9 @@ export const useSetRecordTableData = ({ const recordIds = records.map((record) => record.id); if (!isDeeplyEqual(currentRowIds, recordIds)) { + setIsFocusActiveForCurrentPosition(false); + setRecordTableHoverPosition(null); + if (hasUserSelectedAllRows) { for (const rowId of recordIds) { set(isRowSelectedFamilyState(rowId), true); @@ -106,6 +120,8 @@ export const useSetRecordTableData = ({ recordIndexRecordIdsByGroupFamilyState, recordIndexAllRecordIdsSelector, hasUserSelectedAllRowsState, + setIsFocusActiveForCurrentPosition, + setRecordTableHoverPosition, onEntityCountChange, isRowSelectedFamilyState, ], diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx index 8e731aaf5..a113a4c1f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx @@ -1,4 +1,6 @@ import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody'; +import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { Droppable } from '@hello-pangea/dnd'; import { ReactNode, useState } from 'react'; import { v4 } from 'uuid'; @@ -17,6 +19,10 @@ export const RecordTableBodyDroppable = ({ const [v4Persistable] = useState(v4()); const recordTableBodyId = `record-table-body${recordGroupId ? '-' + recordGroupId : ''}`; + const setRecordTableHoverPosition = useSetRecoilComponentStateV2( + recordTableHoverPositionComponentState, + ); + return ( setRecordTableHoverPosition(null)} > {children} {provided.placeholder}