mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Replace hotkey scopes by focus stack (Part 6 - Remove Hotkey scopes 🫳🎤) (#13127)

Browse Source 
# Replace hotkey scopes by focus stack (Part 6 - Remove Hotkey scopes)

This PR is the last part of a refactoring aiming to deprecate the hotkey
scopes api in favor of the new focus stack api which is more robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673
Part 2: https://github.com/twentyhq/twenty/pull/12798
Part 3: https://github.com/twentyhq/twenty/pull/12910
Part 4: https://github.com/twentyhq/twenty/pull/12933
Part 5: https://github.com/twentyhq/twenty/pull/13106

In this part, we completely remove the hotkey scopes.
This commit is contained in:
Raphaël Bosi
2025-07-09 17:21:14 +02:00
committed by GitHub
parent 0a7b21234b
commit eba997be98
215 changed files with 687 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx
View File

@ -23,7 +23,6 @@ import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/uti
import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@ -148,7 +147,6 @@ export const AdvancedFilterFieldSelectMenu = ({
focusId={advancedFilterFieldSelectDropdownId}
selectableItemIdArray={selectableItemIdArray}
selectableListInstanceId={advancedFilterFieldSelectDropdownId}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{shouldShowVisibleFields && (
<>

2
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent.tsx
View File

@ -8,7 +8,6 @@ import { SelectControl } from '@/ui/input/components/SelectControl';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@ -69,7 +68,6 @@ export const AdvancedFilterRecordFilterOperandSelectContent = ({
(operand) => operand,
)}
selectableListInstanceId={dropdownId}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{operandsForFilterType.map((filterOperand, index) => (
<SelectableListItem

2
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx
View File

@ -18,7 +18,6 @@ import { CompositeFieldSubFieldName } from '@/settings/data-model/types/Composit
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@ -130,7 +129,6 @@ export const AdvancedFilterSubFieldSelectMenu = ({
focusId={advancedFilterFieldSelectDropdownId}
selectableItemIdArray={selectableItemIdArray}
selectableListInstanceId={advancedFilterFieldSelectDropdownId}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{compositeFieldTypeIsFilterableByAnySubField && (
<SelectableListItem

5
packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useSelectFieldUsedInAdvancedFilterDropdown.ts
View File

@ -14,7 +14,6 @@ import { getDefaultSubFieldNameForCompositeFilterableFieldType } from '@/object-
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { isCompositeTypeNonFilterableByAnySubField } from '@/object-record/record-filter/utils/isCompositeTypeNonFilterableByAnySubField';
import { CompositeFieldSubFieldName } from '@/settings/data-model/types/CompositeFieldSubFieldName';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -82,10 +81,6 @@ export const useSelectFieldUsedInAdvancedFilterDropdown = () => {
type: FocusComponentType.DROPDOWN,
instanceId: fieldMetadataItem.id,
},
hotkeyScope: {
scope: DropdownHotkeyScope.Dropdown,
},
memoizeKey: fieldMetadataItem.id,
});
}

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
View File

@ -6,7 +6,6 @@ import { useObjectFilterDropdownFilterValue } from '@/object-record/object-filte
import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@ -58,7 +57,6 @@ export const ObjectFilterDropdownBooleanSelect = () => {
selectableListInstanceId="boolean-select"
selectableItemIdArray={options.map((option) => option.toString())}
focusId="boolean-select"
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
<DropdownMenuItemsContainer hasMaxHeight>
{options.map((option) => (

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
View File

@ -13,7 +13,6 @@ import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/ob
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
@ -103,7 +102,6 @@ export const ObjectFilterDropdownOptionSelect = ({
resetSelectedItem();
},
focusId,
scope: DropdownHotkeyScope.Dropdown,
dependencies: [closeDropdown, resetSelectedItem],
});
@ -154,7 +152,6 @@ export const ObjectFilterDropdownOptionSelect = ({
selectableListInstanceId={componentInstanceId}
selectableItemIdArray={objectRecordsIds}
focusId={focusId}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
<DropdownMenuItemsContainer hasMaxHeight>
{showNoResult ? (

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx
View File

@ -9,7 +9,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@ -110,7 +109,6 @@ export const ObjectOptionsDropdownLayoutContent = () => {
selectableListInstanceId={OBJECT_OPTIONS_DROPDOWN_ID}
focusId={OBJECT_OPTIONS_DROPDOWN_ID}
selectableItemIdArray={selectableItemIdArray}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
<DropdownMenuItemsContainer scrollable={false}>
<SelectableListItem

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx
View File

@ -8,7 +8,6 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@ -61,7 +60,6 @@ export const ObjectOptionsDropdownLayoutOpenInContent = () => {
selectableListInstanceId={OBJECT_OPTIONS_DROPDOWN_ID}
focusId={OBJECT_OPTIONS_DROPDOWN_ID}
selectableItemIdArray={selectableItemIdArray}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
<SelectableListItem
itemId={ViewOpenRecordInType.SIDE_PANEL}

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View File

@ -7,7 +7,6 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@ -91,7 +90,6 @@ export const ObjectOptionsDropdownMenuContent = () => {
selectableListInstanceId={OBJECT_OPTIONS_DROPDOWN_ID}
focusId={OBJECT_OPTIONS_DROPDOWN_ID}
selectableItemIdArray={selectableItemIdArray}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
<DropdownMenuItemsContainer scrollable={false}>
<SelectableListItem

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
View File

@ -4,7 +4,6 @@ import { useUpdateObjectViewOptions } from '@/object-record/object-options-dropd
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TextInputV2 } from '@/ui/input/components/TextInputV2';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -86,7 +85,6 @@ export const ObjectOptionsDropdownMenuViewName = ({
await updateViewFromCurrentState();
},
focusId: VIEW_PICKER_DROPDOWN_ID,
scope: DropdownHotkeyScope.Dropdown,
dependencies: [viewPickerIsPersisting, updateViewFromCurrentState],
});

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx
View File

@ -9,7 +9,6 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@ -75,7 +74,6 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
selectableListInstanceId={OBJECT_OPTIONS_DROPDOWN_ID}
focusId={OBJECT_OPTIONS_DROPDOWN_ID}
selectableItemIdArray={selectableItemIdArray}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
<SelectableListItem
itemId={RecordGroupSort.Manual}

3
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx
View File

@ -14,7 +14,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@ -113,7 +112,6 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
selectableListInstanceId={OBJECT_OPTIONS_DROPDOWN_ID}
focusId={OBJECT_OPTIONS_DROPDOWN_ID}
selectableItemIdArray={selectableItemIdArray}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{currentView?.key !== 'INDEX' && (
<>
@ -181,7 +179,6 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
selectableListInstanceId={hiddenGroupsSelectableListId}
focusId={hiddenGroupsSelectableListId}
selectableItemIdArray={['HiddenGroups']}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
<SelectableListItem
itemId="HiddenGroups"

7
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -24,13 +24,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@ -82,10 +80,6 @@ const StyledDropdownMenuHeaderEndComponent = styled.div`
align-items: center;
`;
export type ObjectSortDropdownButtonProps = {
hotkeyScope: HotkeyScope;
};
export const ObjectSortDropdownButton = () => {
const { resetRecordSortDropdownSearchInput } =
useResetRecordSortDropdownSearchInput();
@ -237,7 +231,6 @@ export const ObjectSortDropdownButton = () => {
selectableListInstanceId={OBJECT_SORT_DROPDOWN_ID}
selectableItemIdArray={selectableItemIdArray}
focusId={OBJECT_SORT_DROPDOWN_ID}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{isRecordSortDirectionMenuUnfolded && (
<StyledSelectedSortDirectionContainer>

5
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardBodyEscapeHotkeyEffect.tsx
View File

@ -6,7 +6,7 @@ import { useFocusedRecordBoardCard } from '@/object-record/record-board/hooks/us
import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
import { useResetFocusStackToRecordIndex } from '@/object-record/record-index/hooks/useResetFocusStackToRecordIndex';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { PageFocusId } from '@/types/PageFocusId';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -35,8 +35,7 @@ export const RecordBoardBodyEscapeHotkeyEffect = () => {
useHotkeysOnFocusedElement({
keys: [Key.Escape],
callback: handleEscape,
focusId: recordBoardId,
scope: RecordIndexHotkeyScope.RecordIndex,
focusId: PageFocusId.RecordIndex,
dependencies: [handleEscape],
});

4
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardHotkeyEffect.tsx
View File

@ -4,7 +4,6 @@ import { Key } from 'ts-key-enum';
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { useRecordBoardCardNavigation } from '@/object-record/record-board/hooks/useRecordBoardCardNavigation';
import { useRecordBoardSelectAllHotkeys } from '@/object-record/record-board/hooks/useRecordBoardSelectAllHotkeys';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { PageFocusId } from '@/types/PageFocusId';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
@ -19,13 +18,12 @@ export const RecordBoardHotkeyEffect = () => {
move('down');
},
focusId: PageFocusId.RecordIndex,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [move],
});
useRecordBoardSelectAllHotkeys({
recordBoardId,
focusId: recordBoardId,
focusId: PageFocusId.RecordIndex,
});
return null;

10
packages/twenty-front/src/modules/object-record/record-board/hooks/useFocusedRecordBoardCard.ts
View File

@ -3,7 +3,6 @@ import { focusedRecordBoardCardIndexesComponentState } from '@/object-record/rec
import { isRecordBoardCardFocusActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCardFocusActiveComponentState';
import { isRecordBoardCardFocusedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardFocusedComponentFamilyState';
import { BoardCardIndexes } from '@/object-record/record-board/types/BoardCardIndexes';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -100,15 +99,6 @@ export const useFocusedRecordBoardCard = (recordBoardId?: string) => {
type: FocusComponentType.RECORD_BOARD_CARD,
instanceId: focusId,
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
customScopes: {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
},
},
memoizeKey: focusId,
});
set(focusedBoardCardIndexesState, boardCardIndexes);

5
packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardArrowKeysEffect.ts
View File

@ -1,5 +1,4 @@
import { useRecordBoardCardNavigation } from '@/object-record/record-board/hooks/useRecordBoardCardNavigation';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { Key } from 'ts-key-enum';
@ -16,7 +15,6 @@ export const useRecordBoardArrowKeysEffect = ({
keys: [Key.ArrowLeft],
callback: () => move('left'),
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [move],
});
@ -24,7 +22,6 @@ export const useRecordBoardArrowKeysEffect = ({
keys: [Key.ArrowRight],
callback: () => move('right'),
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [move],
});
@ -32,7 +29,6 @@ export const useRecordBoardArrowKeysEffect = ({
keys: [Key.ArrowUp],
callback: () => move('up'),
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [move],
});
@ -40,7 +36,6 @@ export const useRecordBoardArrowKeysEffect = ({
keys: [Key.ArrowDown],
callback: () => move('down'),
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [move],
});
};

10
packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardCardHotkeys.ts
View File

@ -2,11 +2,11 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordIn
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
import { useFocusedRecordBoardCard } from '@/object-record/record-board/hooks/useFocusedRecordBoardCard';
import { useRecordBoardSelectAllHotkeys } from '@/object-record/record-board/hooks/useRecordBoardSelectAllHotkeys';
import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -65,7 +65,6 @@ export const useRecordBoardCardHotkeys = (focusId: string) => {
keys: ['x'],
callback: handleSelectCard,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleSelectCard],
});
@ -77,7 +76,6 @@ export const useRecordBoardCardHotkeys = (focusId: string) => {
],
callback: handleOpenRecordInCommandMenu,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleOpenRecordInCommandMenu],
});
@ -85,7 +83,11 @@ export const useRecordBoardCardHotkeys = (focusId: string) => {
keys: [Key.Escape],
callback: handleEscape,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEscape],
});
useRecordBoardSelectAllHotkeys({
recordBoardId,
focusId,
});
};

33
packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardSelectAllHotkeys.ts
View File

@ -1,10 +1,5 @@
import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useSelectAllCards } from '@/object-record/record-board/hooks/useSelectAllCards';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
export const useRecordBoardSelectAllHotkeys = ({
recordBoardId,
@ -13,33 +8,13 @@ export const useRecordBoardSelectAllHotkeys = ({
recordBoardId: string;
focusId: string;
}) => {
const recordIndexAllRecordIdsState = useRecoilComponentCallbackStateV2(
recordIndexAllRecordIdsComponentSelector,
);
const { setRecordAsSelected } = useRecordBoardSelection(recordBoardId);
const selectAll = useRecoilCallback(
({ snapshot }) =>
() => {
const allRecordIds = getSnapshotValue(
snapshot,
recordIndexAllRecordIdsState,
);
for (const recordId of allRecordIds) {
setRecordAsSelected(recordId, true);
}
},
[recordIndexAllRecordIdsState, setRecordAsSelected],
);
const { selectAllCards } = useSelectAllCards(recordBoardId);
useHotkeysOnFocusedElement({
keys: ['ctrl+a', 'meta+a'],
callback: selectAll,
callback: selectAllCards,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [selectAll],
dependencies: [selectAllCards],
options: {
enableOnFormTags: false,
},

63
packages/twenty-front/src/modules/object-record/record-board/hooks/useSelectAllCards.ts Normal file
View File

@ -0,0 +1,63 @@
import { useRecoilCallback } from 'recoil';
import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
import { allCardsSelectedStatusComponentSelector } from '@/object-record/record-board/states/selectors/allCardsSelectedStatusComponentSelector';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useSelectAllCards = (recordBoardId?: string) => {
const allCardsSelectedStatusSelector = useRecoilComponentCallbackStateV2(
allCardsSelectedStatusComponentSelector,
recordBoardId,
);
const isRecordBoardCardSelectedFamilyState =
useRecoilComponentCallbackStateV2(
isRecordBoardCardSelectedComponentFamilyState,
recordBoardId,
);
const recordIndexAllRecordIdsSelector = useRecoilComponentCallbackStateV2(
recordIndexAllRecordIdsComponentSelector,
recordBoardId,
);
const { resetRecordSelection } = useRecordBoardSelection(recordBoardId);
const selectAllCards = useRecoilCallback(
({ set, snapshot }) =>
() => {
const allCardsSelectedStatus = getSnapshotValue(
snapshot,
allCardsSelectedStatusSelector,
);
const allRecordIds = getSnapshotValue(
snapshot,
recordIndexAllRecordIdsSelector,
);
if (allCardsSelectedStatus === 'all') {
resetRecordSelection();
}
for (const recordId of allRecordIds) {
const isSelected =
allCardsSelectedStatus === 'none' ||
allCardsSelectedStatus === 'some';
set(isRecordBoardCardSelectedFamilyState(recordId), isSelected);
}
},
[
allCardsSelectedStatusSelector,
recordIndexAllRecordIdsSelector,
resetRecordSelection,
isRecordBoardCardSelectedFamilyState,
],
);
return {
selectAllCards,
};
};

37
packages/twenty-front/src/modules/object-record/record-board/states/selectors/allCardsSelectedStatusComponentSelector.ts Normal file
View File

@ -0,0 +1,37 @@
import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { AllRowsSelectedStatus } from '@/object-record/record-table/types/AllRowSelectedStatus';
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
export const allCardsSelectedStatusComponentSelector =
createComponentSelectorV2<AllRowsSelectedStatus>({
key: 'allCardsSelectedStatusComponentSelector',
componentInstanceContext: RecordBoardComponentInstanceContext,
get:
({ instanceId }) =>
({ get }) => {
const allRecordIds = get(
recordIndexAllRecordIdsComponentSelector.selectorFamily({
instanceId,
}),
);
const selectedRecordIds = get(
recordBoardSelectedRecordIdsComponentSelector.selectorFamily({
instanceId,
}),
);
const numberOfSelectedCards = selectedRecordIds.length;
const allCardsSelectedStatus =
numberOfSelectedCards === 0
? 'none'
: selectedRecordIds.length === allRecordIds.length
? 'all'
: 'some';
return allCardsSelectedStatus;
},
});

4
packages/twenty-front/src/modules/object-record/record-board/types/BoardColumnHotkeyScope.ts
View File

@ -1,4 +0,0 @@
export enum RecordBoardColumnHotkeyScope {
BoardColumn = 'board-column',
ColumnHeader = 'column-header',
}

3
packages/twenty-front/src/modules/object-record/record-board/types/BoardHotkeyScope.ts
View File

@ -1,3 +0,0 @@
export enum BoardHotkeyScope {
BoardFocus = 'board-focus',
}

9
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
View File

@ -14,11 +14,13 @@ import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate'
import { useDateParser } from '@/ui/input/components/internal/hooks/useDateParser';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { ChangeEvent, KeyboardEvent, useId, useRef, useState } from 'react';
import { Key } from 'ts-key-enum';
import { isDefined } from 'twenty-shared/utils';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { Nullable } from 'twenty-ui/utilities';
@ -290,6 +292,13 @@ export const FormDateTimeFieldInput = ({
onChange(null);
};
useHotkeysOnFocusedElement({
keys: [Key.Escape],
callback: handlePickerEscape,
focusId: instanceId,
dependencies: [handlePickerEscape],
});
return (
<FormFieldInputContainer>
{label ? <InputLabel>{label}</InputLabel> : null}

13
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx
View File

@ -1,4 +1,3 @@
import { FormFieldInputHotKeyScope } from '@/object-record/record-field/form-types/constants/FormFieldInputHotKeyScope';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -10,7 +9,7 @@ type FormFieldInputInnerContainerProps = {
hasRightElement: boolean;
multiline?: boolean;
readonly?: boolean;
preventSetHotkeyScope?: boolean;
preventFocusStackUpdate?: boolean;
formFieldInputInstanceId: string;
};
@ -51,7 +50,7 @@ export const FormFieldInputInnerContainer = forwardRef(
hasRightElement,
multiline,
readonly,
preventSetHotkeyScope = false,
preventFocusStackUpdate = false,
onClick,
formFieldInputInstanceId,
}: HTMLAttributes<HTMLDivElement> & FormFieldInputInnerContainerProps,
@ -64,14 +63,16 @@ export const FormFieldInputInnerContainer = forwardRef(
const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {
onFocus?.(e);
if (!preventSetHotkeyScope) {
if (!preventFocusStackUpdate) {
pushFocusItemToFocusStack({
focusId: formFieldInputInstanceId,
component: {
type: FocusComponentType.FORM_FIELD_INPUT,
instanceId: formFieldInputInstanceId,
},
hotkeyScope: { scope: FormFieldInputHotKeyScope.FormFieldInput },
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
});
}
};
@ -79,7 +80,7 @@ export const FormFieldInputInnerContainer = forwardRef(
const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
onBlur?.(e);
if (!preventSetHotkeyScope) {
if (!preventFocusStackUpdate) {
removeFocusItemFromFocusStackById({
focusId: formFieldInputInstanceId,
});

10
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx
View File

@ -5,7 +5,6 @@ import { FormFieldInputInnerContainer } from '@/object-record/record-field/form-
import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
import { FormFieldPlaceholder } from '@/object-record/record-field/form-types/components/FormFieldPlaceholder';
import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
import { FormMultiSelectFieldInputHotKeyScope } from '@/object-record/record-field/form-types/constants/FormMultiSelectFieldInputHotKeyScope';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { SELECT_FIELD_INPUT_SELECTABLE_LIST_COMPONENT_INSTANCE_ID } from '@/object-record/record-field/meta-types/input/constants/SelectFieldInputSelectableListComponentInstanceId';
import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
@ -87,9 +86,6 @@ export const FormMultiSelectFieldInput = ({
const instanceId = useId();
const theme = useTheme();
const hotkeyScope =
FormMultiSelectFieldInputHotKeyScope.FormMultiSelectFieldInput;
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
const { removeFocusItemFromFocusStackById } =
useRemoveFocusItemFromFocusStackById();
@ -135,7 +131,9 @@ export const FormMultiSelectFieldInput = ({
type: FocusComponentType.FORM_FIELD_INPUT,
instanceId,
},
hotkeyScope: { scope: hotkeyScope },
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
});
};
@ -262,7 +260,7 @@ export const FormMultiSelectFieldInput = ({
selectableListComponentInstanceId={
SELECT_FIELD_INPUT_SELECTABLE_LIST_COMPONENT_INSTANCE_ID
}
focusId={hotkeyScope}
focusId={instanceId}
options={options}
onCancel={onCancel}
onOptionSelected={onOptionSelected}

1
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx
View File

@ -135,7 +135,6 @@ export const FormNumberFieldInput = ({
}
value={draftValue.value}
copyButton={false}
hotkeyScope="record-create"
onChange={handleChange}
disabled={readonly}
/>

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
View File

@ -3,7 +3,6 @@ import { FormFieldInputInnerContainer } from '@/object-record/record-field/form-
import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { Select } from '@/ui/input/components/Select';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
@ -38,8 +37,6 @@ export const FormSelectFieldInput = ({
const instanceId = useId();
const hotkeyScope = InlineCellHotkeyScope.InlineCell;
const { removeFocusItemFromFocusStackById } =
useRemoveFocusItemFromFocusStackById();
@ -124,7 +121,6 @@ export const FormSelectFieldInput = ({
keys: Key.Escape,
callback: onCancel,
focusId: instanceId,
scope: hotkeyScope,
dependencies: [onCancel],
});

2
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx
View File

@ -175,7 +175,7 @@ export const FormSingleRecordPicker = ({
<StyledFormSelectContainer
formFieldInputInstanceId={componentId}
hasRightElement={isDefined(VariablePicker) && !disabled}
preventSetHotkeyScope={true}
preventFocusStackUpdate={true}
>
<FormSingleRecordFieldChip
draftValue={draftValue}

1
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx
View File

@ -104,7 +104,6 @@ export const FormUuidFieldInput = ({
placeholder={placeholder ?? 'Enter a UUID'}
value={draftValue.value}
copyButton={false}
hotkeyScope="record-create"
disabled={readonly}
onChange={handleChange}
/>

3
packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormFieldInputHotKeyScope.ts
View File

@ -1,3 +0,0 @@
export enum FormFieldInputHotKeyScope {
FormFieldInput = 'form-field-input',
}

3
packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormMultiSelectFieldInputHotKeyScope.ts
View File

@ -1,3 +0,0 @@
export enum FormMultiSelectFieldInputHotKeyScope {
FormMultiSelectFieldInput = 'form-multi-select-field-input',
}

8
packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts
View File

@ -15,10 +15,8 @@ import {
} from '@/object-record/record-field/types/FieldMetadata';
import { isFieldRelationFromManyObjects } from '@/object-record/record-field/types/guards/isFieldRelationFromManyObjects';
import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
@ -128,11 +126,9 @@ export const useOpenFieldInputEditMode = () => {
prefix,
}),
},
hotkeyScope: {
scope: DEFAULT_CELL_SCOPE.scope,
customScopes: DEFAULT_CELL_SCOPE.customScopes,
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
});
},
[

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/AddressFieldInput.tsx
View File

@ -7,7 +7,6 @@ import {
FieldInputClickOutsideEvent,
FieldInputEvent,
} from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { usePersistField } from '../../../hooks/usePersistField';
@ -83,7 +82,6 @@ export const AddressFieldInput = ({
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
onChange={handleChange}
onTab={handleTab}
onShiftTab={handleShiftTab}

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/ArrayFieldInput.tsx
View File

@ -1,7 +1,6 @@
import { useArrayField } from '@/object-record/record-field/meta-types/hooks/useArrayField';
import { ArrayFieldMenuItem } from '@/object-record/record-field/meta-types/input/components/ArrayFieldMenuItem';
import { MultiItemFieldInput } from '@/object-record/record-field/meta-types/input/components/MultiItemFieldInput';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useMemo } from 'react';
import { FieldMetadataType } from '~/generated-metadata/graphql';
@ -23,7 +22,6 @@ export const ArrayFieldInput = ({
return (
<MultiItemFieldInput
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
newItemLabel="Add Item"
items={arrayItems}
onPersist={persistArrayField}

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx
View File

@ -11,7 +11,6 @@ import {
FieldInputClickOutsideEvent,
FieldInputEvent,
} from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -132,7 +131,6 @@ export const CurrencyFieldInput = ({
onTab={handleTab}
onChange={handleChange}
onSelect={handleSelect}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
/>
);
};

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx
View File

@ -3,7 +3,6 @@ import { DateInput } from '@/ui/field/input/components/DateInput';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { isDefined } from 'twenty-shared/utils';
import { Nullable } from 'twenty-ui/utilities';
@ -88,7 +87,6 @@ export const DateFieldInput = ({
onChange={handleChange}
onClear={handleClear}
onSubmit={handleSubmit}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
/>
);
};

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx
View File

@ -4,7 +4,6 @@ import { FieldInputEvent } from '@/object-record/record-field/meta-types/input/c
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { Nullable } from 'twenty-ui/utilities';
import { usePersistField } from '../../../hooks/usePersistField';
@ -84,7 +83,6 @@ export const DateTimeFieldInput = ({
isDateTimeInput
onClear={handleClear}
onSubmit={handleSubmit}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
/>
);
};

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx
View File

@ -2,7 +2,6 @@ import { useEmailsField } from '@/object-record/record-field/meta-types/hooks/us
import { EmailsFieldMenuItem } from '@/object-record/record-field/meta-types/input/components/EmailsFieldMenuItem';
import { recordFieldInputIsFieldInErrorComponentState } from '@/object-record/record-field/states/recordFieldInputIsFieldInErrorComponentState';
import { emailSchema } from '@/object-record/record-field/validation-schemas/emailSchema';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useCallback, useMemo } from 'react';
import { isDefined } from 'twenty-shared/utils';
@ -88,7 +87,6 @@ export const EmailsFieldInput = ({
/>
)}
onError={handleError}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
/>
);
};

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx
View File

@ -10,7 +10,6 @@ import {
FieldInputClickOutsideEvent,
FieldInputEvent,
} from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
type FullNameFieldInputProps = {
@ -101,7 +100,6 @@ export const FullNameFieldInput = ({
onShiftTab={handleShiftTab}
onTab={handleTab}
onPaste={handlePaste}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
onChange={handleChange}
/>
);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx
View File

@ -2,7 +2,6 @@ import { useLinksField } from '@/object-record/record-field/meta-types/hooks/use
import { LinksFieldMenuItem } from '@/object-record/record-field/meta-types/input/components/LinksFieldMenuItem';
import { getFieldLinkDefinedLinks } from '@/object-record/record-field/meta-types/input/utils/getFieldLinkDefinedLinks';
import { recordFieldInputIsFieldInErrorComponentState } from '@/object-record/record-field/states/recordFieldInputIsFieldInErrorComponentState';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useMemo } from 'react';
import { absoluteUrlSchema } from 'twenty-shared/utils';
@ -85,7 +84,6 @@ export const LinksFieldInput = ({
url={link.url}
/>
)}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
/>
);
};

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
View File

@ -67,7 +67,6 @@ const StyledErrorDiv = styled.div`
type HTMLInputProps = InputHTMLAttributes<HTMLInputElement>;
export type MultiItemBaseInputProps = Omit<HTMLInputProps, 'onChange'> & {
hotkeyScope?: string;
onClickOutside?: () => void;
onEnter?: () => void;
onEscape?: () => void;
@ -97,7 +96,6 @@ export const MultiItemBaseInput = forwardRef<
className,
value,
placeholder,
hotkeyScope = 'dropdown-menu-input',
onChange,
onClickOutside,
onEnter = () => {},
@ -125,7 +123,6 @@ export const MultiItemBaseInput = forwardRef<
onClickOutside,
onTab,
onShiftTab,
hotkeyScope,
});
return (

14
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
View File

@ -37,7 +37,6 @@ type MultiItemFieldInputProps<T> = {
handleSetPrimary: () => void;
handleDelete: () => void;
}) => React.ReactNode;
hotkeyScope: string;
newItemLabel?: string;
fieldMetadataType: FieldMetadataType;
renderInput?: MultiItemBaseInputProps['renderInput'];
@ -55,7 +54,6 @@ export const MultiItemFieldInput = <T,>({
validateInput,
formatInput,
renderItem,
hotkeyScope,
newItemLabel,
fieldMetadataType,
renderInput,
@ -67,6 +65,10 @@ export const MultiItemFieldInput = <T,>({
onCancel?.();
};
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordFieldComponentInstanceContext,
);
useListenClickOutside({
refs: [containerRef],
callback: (event) => {
@ -78,18 +80,13 @@ export const MultiItemFieldInput = <T,>({
}
onClickOutside?.(() => {}, event);
},
listenerId: hotkeyScope,
listenerId: instanceId,
});
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordFieldComponentInstanceContext,
);
useHotkeysOnFocusedElement({
focusId: instanceId,
keys: [Key.Escape],
callback: handleDropdownClose,
scope: hotkeyScope,
dependencies: [handleDropdownClose],
});
@ -220,7 +217,6 @@ export const MultiItemFieldInput = <T,>({
autoFocus
placeholder={placeholder}
value={inputValue}
hotkeyScope={hotkeyScope}
hasError={!errorData.isValid}
renderInput={renderInput}
onEscape={handleDropdownClose}

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx
View File

@ -2,7 +2,6 @@ import { TextInput } from '@/ui/field/input/components/TextInput';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useNumberField } from '../../hooks/useNumberField';
@ -70,7 +69,6 @@ export const NumberFieldInput = ({
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
onChange={handleChange}
/>
</FieldInputContainer>

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
View File

@ -9,7 +9,6 @@ import { MultiItemFieldInput } from './MultiItemFieldInput';
import { createPhonesFromFieldValue } from '@/object-record/record-field/meta-types/input/utils/phonesUtils';
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
import { css } from '@emotion/react';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
@ -155,7 +154,6 @@ export const PhonesFieldInput = ({
</StyledCustomPhoneInputContainer>
);
}}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
/>
);
};

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx
View File

@ -6,7 +6,6 @@ import {
FieldInputClickOutsideEvent,
FieldInputEvent,
} from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@ -69,8 +68,6 @@ export const RawJsonFieldInput = ({
fieldDefinition,
} = useJsonField();
const hotkeyScope = DEFAULT_CELL_SCOPE.scope;
const containerRef = useRef<HTMLDivElement>(null);
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordFieldComponentInstanceContext,
@ -106,7 +103,7 @@ export const RawJsonFieldInput = ({
callback: (event) => {
handleClickOutside(event, draftValue ?? '');
},
listenerId: hotkeyScope,
listenerId: instanceId,
});
useHotkeysOnFocusedElement({
@ -114,7 +111,6 @@ export const RawJsonFieldInput = ({
callback: () => {
handleEscape(draftValue ?? '');
},
scope: hotkeyScope,
focusId: instanceId,
dependencies: [handleEscape, draftValue],
});
@ -124,7 +120,6 @@ export const RawJsonFieldInput = ({
callback: () => {
handleTab(draftValue ?? '');
},
scope: hotkeyScope,
focusId: instanceId,
dependencies: [handleTab, draftValue],
});
@ -134,7 +129,6 @@ export const RawJsonFieldInput = ({
callback: () => {
handleShiftTab(draftValue ?? '');
},
scope: hotkeyScope,
focusId: instanceId,
dependencies: [handleShiftTab, draftValue],
});

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RichTextFieldInput.tsx
View File

@ -8,7 +8,6 @@ import {
FieldInputClickOutsideEvent,
FieldInputEvent,
} from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@ -92,7 +91,6 @@ export const RichTextFieldInput = ({
inputValue: null,
onClickOutside: handleClickOutside,
onEscape: handleEscape,
hotkeyScope: DEFAULT_CELL_SCOPE.scope,
});
return (

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
View File

@ -3,7 +3,6 @@ import { useSelectField } from '@/object-record/record-field/meta-types/hooks/us
import { SELECT_FIELD_INPUT_SELECTABLE_LIST_COMPONENT_INSTANCE_ID } from '@/object-record/record-field/meta-types/input/constants/SelectFieldInputSelectableListComponentInstanceId';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { SelectInput } from '@/ui/field/input/components/SelectInput';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
@ -56,7 +55,6 @@ export const SelectFieldInput = ({
onCancel?.();
resetSelectedItem();
},
scope: DEFAULT_CELL_SCOPE.scope,
focusId: instanceId,
dependencies: [onCancel, resetSelectedItem],
});

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx
View File

@ -8,7 +8,6 @@ import {
FieldInputClickOutsideEvent,
FieldInputEvent,
} from '@/object-record/record-field/types/FieldInputEvent';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly';
@ -74,7 +73,6 @@ export const TextFieldInput = ({
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
onChange={handleChange}
/>
</FieldInputContainer>

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
View File

@ -6,7 +6,6 @@ import { useAddressField } from '@/object-record/record-field/meta-types/hooks/u
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import {
AddressInput,
@ -60,7 +59,6 @@ const AddressInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [instanceId, pushFocusItemToFocusStack]);
@ -96,7 +94,6 @@ const AddressInputWithContext = ({
onEscape={onEscape}
onClickOutside={onClickOutside}
value={value}
hotkeyScope={DEFAULT_CELL_SCOPE.scope}
onTab={onTab}
onShiftTab={onShiftTab}
/>

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/ArrayFieldInput.stories.tsx
View File

@ -7,7 +7,6 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useArrayField } from '@/object-record/record-field/meta-types/hooks/useArrayField';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -72,7 +71,6 @@ const ArrayInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [pushFocusItemToFocusStack, instanceId]);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
View File

@ -8,7 +8,6 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
@ -78,7 +77,6 @@ const DateFieldInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [pushFocusItemToFocusStack, instanceId]);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/EmailsFieldInput.stories.tsx
View File

@ -9,7 +9,6 @@ import { useEmailsField } from '@/object-record/record-field/meta-types/hooks/us
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -73,7 +72,6 @@ const EmailInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [pushFocusItemToFocusStack, instanceId]);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/LinksFieldInput.stories.tsx
View File

@ -6,7 +6,6 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -83,7 +82,6 @@ const LinksInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [pushFocusItemToFocusStack, instanceId]);

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx
View File

@ -1,13 +1,13 @@
import { Meta, StoryObj } from '@storybook/react';
import { MultiItemBaseInput } from '../MultiItemBaseInput';
import { ComponentDecorator } from 'twenty-ui/testing';
import { MultiItemBaseInput } from '../MultiItemBaseInput';
const meta: Meta<typeof MultiItemBaseInput> = {
title: 'UI/Data/Field/Input/BaseFieldInput',
component: MultiItemBaseInput,
decorators: [ComponentDecorator],
args: { value: 'Lorem ipsum' },
args: { value: 'Lorem ipsum', instanceId: 'multi-item-base-input' },
};
export default meta;

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
View File

@ -9,7 +9,6 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
@ -59,7 +58,6 @@ const NumberFieldInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
setIsReady(true);
}

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx
View File

@ -10,7 +10,6 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -74,7 +73,6 @@ const PhoneInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [pushFocusItemToFocusStack, instanceId]);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
View File

@ -7,7 +7,6 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { FieldMetadataType } from 'twenty-shared/types';
@ -54,7 +53,6 @@ const RatingFieldInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [pushFocusItemToFocusStack, instanceId]);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx
View File

@ -20,7 +20,6 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useOpenFieldInputEditMode } from '@/object-record/record-field/hooks/useOpenFieldInputEditMode';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { FieldMetadataType } from 'twenty-shared/types';
import { RelationType } from '~/generated-metadata/graphql';
@ -78,7 +77,6 @@ const RelationManyFieldInputWithContext = () => {
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: 'relation-from-many-field-input',
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
openFieldInput({
fieldDefinition,

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
View File

@ -18,7 +18,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@ -72,8 +71,6 @@ const RelationToOneFieldInputWithContext = ({
type: FocusComponentType.DROPDOWN,
instanceId: 'relation-to-one-field-input',
},
hotkeyScope: DEFAULT_CELL_SCOPE,
memoizeKey: 'relation-to-one-field-input',
});
}, [pushFocusItemToFocusStack]);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx
View File

@ -5,7 +5,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -53,7 +52,6 @@ const RichTextFieldInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
}, [pushFocusItemToFocusStack, instanceId]);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
View File

@ -6,7 +6,6 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { Decorator, Meta, StoryObj } from '@storybook/react';
@ -56,7 +55,6 @@ const TextFieldInputWithContext = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: instanceId,
},
hotkeyScope: DEFAULT_CELL_SCOPE,
});
setIsReady(true);

6
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationFromManyFieldInput.tsx
View File

@ -11,7 +11,6 @@ import { RecordPickerPickableMorphItem } from '@/object-record/record-picker/typ
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useRecoilCallback } from 'recoil';
@ -106,10 +105,9 @@ export const useOpenRelationFromManyFieldInput = () => {
type: FocusComponentType.DROPDOWN,
instanceId: recordPickerInstanceId,
},
hotkeyScope: {
scope: DropdownHotkeyScope.Dropdown,
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: recordPickerInstanceId,
});
},
[openMultipleRecordPicker, performSearch, pushFocusItemToFocusStack],

7
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationToOneFieldInput.tsx
View File

@ -6,7 +6,6 @@ import { useSingleRecordPickerOpen } from '@/object-record/record-picker/single-
import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useRecoilCallback } from 'recoil';
@ -58,9 +57,9 @@ export const useOpenRelationToOneFieldInput = () => {
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: recordPickerInstanceId,
},
// TODO: Remove this once we've fully migrated away from hotkey scopes
hotkeyScope: { scope: DropdownHotkeyScope.Dropdown },
memoizeKey: recordPickerInstanceId,
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
});
},
[openSingleRecordPicker, pushFocusItemToFocusStack],

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts
View File

@ -14,7 +14,6 @@ export const useRegisterInputEvents = <T>({
onShiftTab,
onClickOutside,
focusId,
hotkeyScope,
}: {
inputRef: React.RefObject<any>;
copyRef?: React.RefObject<any>;
@ -25,15 +24,14 @@ export const useRegisterInputEvents = <T>({
onShiftTab?: (inputValue: T) => void;
onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void;
focusId: string;
hotkeyScope: string;
}) => {
useListenClickOutside({
refs: [inputRef, copyRef].filter(isDefined),
callback: (event) => {
onClickOutside?.(event, inputValue);
},
listenerId: focusId,
enabled: isDefined(onClickOutside),
listenerId: hotkeyScope,
});
useHotkeysOnFocusedElement({
@ -42,7 +40,6 @@ export const useRegisterInputEvents = <T>({
onEnter?.(inputValue);
},
focusId,
scope: hotkeyScope,
dependencies: [onEnter, inputValue],
});
@ -52,7 +49,6 @@ export const useRegisterInputEvents = <T>({
onEscape?.(inputValue);
},
focusId,
scope: hotkeyScope,
dependencies: [onEscape, inputValue],
});
@ -62,7 +58,6 @@ export const useRegisterInputEvents = <T>({
onTab?.(inputValue);
},
focusId,
scope: hotkeyScope,
dependencies: [onTab, inputValue],
});
@ -72,7 +67,6 @@ export const useRegisterInputEvents = <T>({
onShiftTab?.(inputValue);
},
focusId,
scope: hotkeyScope,
dependencies: [onShiftTab, inputValue],
});
};

10
packages/twenty-front/src/modules/object-record/record-index/hooks/useResetFocusStackToRecordIndex.ts
View File

@ -1,4 +1,3 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { PageFocusId } from '@/types/PageFocusId';
import { useResetFocusStackToFocusItem } from '@/ui/utilities/focus/hooks/useResetFocusStackToFocusItem';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -18,15 +17,6 @@ export const useResetFocusStackToRecordIndex = () => {
enableGlobalHotkeysWithModifiers: true,
enableGlobalHotkeysConflictingWithKeyboard: true,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
customScopes: {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
},
},
});
};

3
packages/twenty-front/src/modules/object-record/record-index/types/RecordIndexHotkeyScope.ts
View File

@ -1,3 +0,0 @@
export enum RecordIndexHotkeyScope {
RecordIndex = 'record-index',
}

18
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
View File

@ -15,9 +15,9 @@ import { useOpenFieldInputEditMode } from '@/object-record/record-field/hooks/us
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import { isInlineCellInEditModeScopedState } from '@/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useIcons } from 'twenty-ui/display';
@ -129,11 +129,17 @@ export const RecordInlineCell = ({
const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
({ snapshot }) =>
(persistField, event) => {
const hotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState)
const currentFocusId = snapshot
.getLoadable(currentFocusIdSelector)
.getValue();
if (hotkeyScope.scope !== DEFAULT_CELL_SCOPE.scope) {
const expectedFocusId = getDropdownFocusIdForRecordField(
recordId,
fieldDefinition.fieldMetadataId,
'inline-cell',
);
if (currentFocusId !== expectedFocusId) {
return;
}
event.preventDefault();
@ -142,7 +148,7 @@ export const RecordInlineCell = ({
persistField();
closeInlineCell();
},
[closeInlineCell],
[closeInlineCell, recordId, fieldDefinition.fieldMetadataId],
);
const { getIcon } = useIcons();

10
packages/twenty-front/src/modules/object-record/record-inline-cell/states/customEditHotkeyScopeForFieldScopedState.ts
View File

@ -1,10 +0,0 @@
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
export const customEditHotkeyScopeForFieldScopedState = createFamilyState<
HotkeyScope | null,
string
>({
key: 'customEditHotkeyScopeForFieldScopedState',
defaultValue: null,
});

10
packages/twenty-front/src/modules/object-record/record-inline-cell/states/parentHotkeyScopeForFieldScopedState.ts
View File

@ -1,10 +0,0 @@
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
export const parentHotkeyScopeForFieldScopedState = createFamilyState<
HotkeyScope | null,
string
>({
key: 'parentHotkeyScopeForFieldScopedState',
defaultValue: null,
});

3
packages/twenty-front/src/modules/object-record/record-inline-cell/types/InlineCellHotkeyScope.ts
View File

@ -1,3 +0,0 @@
export enum InlineCellHotkeyScope {
InlineCell = 'inline-cell',
}

2
packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx
View File

@ -11,7 +11,6 @@ import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObj
import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@ -91,7 +90,6 @@ export const MultipleRecordPicker = ({
handleSubmit();
},
focusId,
scope: DropdownHotkeyScope.Dropdown,
dependencies: [handleSubmit],
});

2
packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItems.tsx
View File

@ -11,7 +11,6 @@ import { multipleRecordPickerPickableRecordIdsMatchingSearchComponentSelector }
import { getMultipleRecordPickerSelectableListId } from '@/object-record/record-picker/multiple-record-picker/utils/getMultipleRecordPickerSelectableListId';
import { RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@ -99,7 +98,6 @@ export const MultipleRecordPickerMenuItems = ({
selectableListInstanceId={selectableListComponentInstanceId}
selectableItemIdArray={pickableRecordIds}
focusId={focusId}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{pickableRecordIds.map((recordId) => {
return (

7
packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItems.tsx
View File

@ -10,9 +10,10 @@ import { RecordPickerNoRecordFoundMenuItem } from '@/object-record/record-picker
import { SingleRecordPickerMenuItem } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItem';
import { SingleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/single-record-picker/states/contexts/SingleRecordPickerComponentInstanceContext';
import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
import { singleRecordPickerShouldShowInitialLoadingComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerShouldShowInitialLoadingComponentState';
import { singleRecordPickerShouldShowSkeletonComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerShouldShowSkeletonComponentState';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
import { getSingleRecordPickerSelectableListId } from '@/object-record/record-picker/single-record-picker/utils/getSingleRecordPickerSelectableListId';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
@ -23,8 +24,6 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { isDefined } from 'twenty-shared/utils';
import { IconComponent } from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { singleRecordPickerShouldShowInitialLoadingComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerShouldShowInitialLoadingComponentState';
import { singleRecordPickerShouldShowSkeletonComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerShouldShowSkeletonComponentState';
export type SingleRecordPickerMenuItemsProps = {
EmptyIcon?: IconComponent;
@ -77,7 +76,6 @@ export const SingleRecordPickerMenuItems = ({
onCancel?.();
},
focusId,
scope: DropdownHotkeyScope.Dropdown,
dependencies: [onCancel, resetSelectedItem],
});
@ -101,7 +99,6 @@ export const SingleRecordPickerMenuItems = ({
<SelectableList
selectableListInstanceId={selectableListComponentInstanceId}
selectableItemIdArray={selectableItemIds}
hotkeyScope={DropdownHotkeyScope.Dropdown}
focusId={focusId}
>
{emptyLabel && (

17
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -1,19 +1,17 @@
import styled from '@emotion/styled';
import { useRecoilCallback } from 'recoil';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordTable } from '@/object-record/record-table/components/RecordTable';
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { PageFocusId } from '@/types/PageFocusId';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields';
import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import styled from '@emotion/styled';
import { useRecoilCallback } from 'recoil';
import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
import { useRecordTable } from '../hooks/useRecordTable';
@ -50,8 +48,7 @@ export const RecordTableWithWrappers = ({
useHotkeysOnFocusedElement({
keys: ['ctrl+a,meta+a'],
callback: handleSelectAllRows,
focusId: recordTableId,
scope: RecordIndexHotkeyScope.RecordIndex,
focusId: PageFocusId.RecordIndex,
dependencies: [handleSelectAllRows],
options: {
enableOnFormTags: false,

8
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts
View File

@ -1,6 +1,7 @@
import { useRecoilCallback } from 'recoil';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
@ -20,6 +21,8 @@ export const useSelectAllRows = (recordTableId?: string) => {
recordTableId,
);
const resetTableRowSelection = useResetTableRowSelection(recordTableId);
const selectAllRows = useRecoilCallback(
({ set, snapshot }) =>
() => {
@ -33,6 +36,10 @@ export const useSelectAllRows = (recordTableId?: string) => {
recordIndexAllRecordIdsSelector,
);
if (allRowsSelectedStatus === 'all') {
resetTableRowSelection();
}
for (const recordId of allRecordIds) {
const isSelected =
allRowsSelectedStatus === 'none' ||
@ -44,6 +51,7 @@ export const useSelectAllRows = (recordTableId?: string) => {
[
allRowsSelectedStatusSelector,
recordIndexAllRecordIdsSelector,
resetTableRowSelection,
isRowSelectedFamilyState,
],
);

10
packages/twenty-front/src/modules/object-record/record-table/hooks/useFocusedRecordTableRow.ts
View File

@ -1,4 +1,3 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useUnfocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useUnfocusRecordTableCell';
import { getRecordTableRowFocusId } from '@/object-record/record-table/record-table-row/utils/getRecordTableRowFocusId';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
@ -119,15 +118,6 @@ export const useFocusedRecordTableRow = (recordTableId?: string) => {
type: FocusComponentType.RECORD_TABLE_ROW,
instanceId: focusId,
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
customScopes: {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
},
},
memoizeKey: focusId,
});
set(focusedRowIndexState, rowIndex);

4
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableRowFocusHotkeys.ts
View File

@ -5,10 +5,8 @@ import { Key } from 'ts-key-enum';
export const useRecordTableRowFocusHotkeys = ({
focusId,
hotkeyScope,
}: {
focusId: string;
hotkeyScope: string;
}) => {
const { recordTableId } = useRecordTableContextOrThrow();
@ -20,7 +18,6 @@ export const useRecordTableRowFocusHotkeys = ({
moveFocusedRow('up');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocusedRow],
});
@ -30,7 +27,6 @@ export const useRecordTableRowFocusHotkeys = ({
moveFocusedRow('down');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocusedRow],
});
};

2
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEscapeHotkeyEffect.tsx
View File

@ -1,6 +1,5 @@
import { Key } from 'ts-key-enum';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { isAtLeastOneTableRowSelectedSelector } from '@/object-record/record-table/record-table-row/states/isAtLeastOneTableRowSelectedSelector';
@ -29,7 +28,6 @@ export const RecordTableBodyEscapeHotkeyEffect = () => {
keys: [Key.Escape],
callback: handleEscape,
focusId: PageFocusId.RecordIndex,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEscape],
options: {
preventDefault: true,

9
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx
View File

@ -1,14 +1,11 @@
import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useRecoilValue } from 'recoil';
type RecordTableBodyFocusClickOutsideEffectProps = {
tableBodyRef: React.RefObject<HTMLDivElement>;
};
@ -20,8 +17,6 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
const leaveTableFocus = useLeaveTableFocus(recordTableId);
const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState);
useListenClickOutside({
excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
@ -32,10 +27,6 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
refs: [tableBodyRef],
callback: () => {
if (currentHotkeyScope.scope !== RecordIndexHotkeyScope.RecordIndex) {
return;
}
leaveTableFocus();
},
});

2
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusKeyboardEffect.tsx
View File

@ -1,11 +1,9 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableRowFocusHotkeys } from '@/object-record/record-table/hooks/useRecordTableRowFocusHotkeys';
import { PageFocusId } from '@/types/PageFocusId';
export const RecordTableBodyFocusKeyboardEffect = () => {
useRecordTableRowFocusHotkeys({
focusId: PageFocusId.RecordIndex,
hotkeyScope: RecordIndexHotkeyScope.RecordIndex,
});
return null;

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellArrowKeysEffect.tsx
View File

@ -1,4 +1,3 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useCurrentlyFocusedRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/hooks/useCurrentlyFocusedRecordTableCellFocusId';
import { useRecordTableCellFocusHotkeys } from '@/object-record/record-table/record-table-cell/hooks/useRecordTableCellFocusHotkeys';
@ -7,7 +6,6 @@ export const RecordTableCellArrowKeysEffect = () => {
useRecordTableCellFocusHotkeys({
focusId: recordTableCellFocusId,
hotkeyScope: RecordIndexHotkeyScope.RecordIndex,
});
return null;

17
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx
View File

@ -1,19 +1,23 @@
import { FieldInput } from '@/object-record/record-field/components/FieldInput';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
import {
FieldInputClickOutsideEvent,
FieldInputEvent,
} from '@/object-record/record-field/types/FieldInputEvent';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
import { useContext } from 'react';
import { useRecoilCallback } from 'recoil';
export const RecordTableCellFieldInput = () => {
const { onMoveFocus, onCloseTableCell } = useRecordTableBodyContextOrThrow();
const { isReadOnly } = useContext(FieldContext);
const instanceId = useAvailableComponentInstanceId(
RecordFieldComponentInstanceContext,
);
const handleEnter: FieldInputEvent = (persistField) => {
persistField();
@ -35,10 +39,11 @@ export const RecordTableCellFieldInput = () => {
const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
({ snapshot }) =>
(persistField, event) => {
const hotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState)
const currentFocusId = snapshot
.getLoadable(currentFocusIdSelector)
.getValue();
if (hotkeyScope.scope !== TableHotkeyScope.CellEditMode) {
if (currentFocusId !== instanceId) {
return;
}
event.preventDefault();
@ -46,7 +51,7 @@ export const RecordTableCellFieldInput = () => {
persistField();
onCloseTableCell();
},
[onCloseTableCell],
[onCloseTableCell, instanceId],
);
const handleEscape: FieldInputEvent = (persistField) => {

25
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect.tsx
View File

@ -6,10 +6,10 @@ 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 { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { useCurrentlyFocusedRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/hooks/useCurrentlyFocusedRecordTableCellFocusId';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { useListenToSidePanelOpening } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelOpening';
@ -83,7 +83,6 @@ export const RecordTableCellHotkeysEffect = () => {
keys: [Key.Backspace, Key.Delete],
callback: handleBackspaceOrDelete,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleBackspaceOrDelete],
});
@ -91,7 +90,6 @@ export const RecordTableCellHotkeysEffect = () => {
keys: [Key.Enter],
callback: handleEnter,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEnter],
});
@ -99,7 +97,6 @@ export const RecordTableCellHotkeysEffect = () => {
keys: [Key.Escape],
callback: handleEscape,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEscape],
});
@ -107,12 +104,30 @@ export const RecordTableCellHotkeysEffect = () => {
keys: ['*'],
callback: handleAnyKey,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleAnyKey],
options: {
preventDefault: false,
},
});
const { selectAllRows, setHasUserSelectedAllRows } = useRecordTable({
recordTableId,
});
const handleSelectAllRows = () => {
setHasUserSelectedAllRows(true);
selectAllRows();
};
useHotkeysOnFocusedElement({
keys: ['ctrl+a,meta+a'],
callback: handleSelectAllRows,
focusId: cellFocusId,
dependencies: [handleSelectAllRows],
options: {
enableOnFormTags: false,
},
});
return null;
};

11
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveHoverToCurrentCell.test.tsx
View File

@ -2,7 +2,6 @@ import { renderHook } from '@testing-library/react';
import { act } from 'react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableRowContextProvider } from '@/object-record/record-table/contexts/RecordTableRowContext';
@ -14,17 +13,9 @@ import {
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
import { useMoveHoverToCurrentCell } from '@/object-record/record-table/record-table-cell/hooks/useMoveHoverToCurrentCell';
import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot
initializeState={({ set }) => {
set(currentHotkeyScopeState, {
scope: RecordIndexHotkeyScope.RecordIndex,
customScopes: {},
});
}}
>
<RecoilRoot>
<RecordTableComponentInstance
recordTableId="test-record-table-instance-id"
onColumnsChange={jest.fn()}

8
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell.ts
View File

@ -1,6 +1,3 @@
import { useRecoilCallback } from 'recoil';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { getRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/utils/getRecordTableCellFocusId';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
@ -9,6 +6,7 @@ import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
import { TableCellPosition } from '../../types/TableCellPosition';
import { useSetIsRecordTableCellFocusActive } from './useSetIsRecordTableCellFocusActive';
@ -68,10 +66,6 @@ export const useFocusRecordTableCell = (recordTableId?: string) => {
type: FocusComponentType.RECORD_TABLE_CELL,
instanceId: cellFocusId,
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
},
memoizeKey: cellFocusId,
});
};
},

17
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveHoverToCurrentCell.ts
View File

@ -1,16 +1,12 @@
import { useRecoilCallback } from 'recoil';
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 { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
import { isSomeCellInEditModeComponentSelector } from '@/object-record/record-table/states/selectors/isSomeCellInEditModeComponentSelector';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const useMoveHoverToCurrentCell = (recordTableId: string) => {
const setHoverPosition = useSetRecoilComponentStateV2(
@ -31,19 +27,6 @@ export const useMoveHoverToCurrentCell = (recordTableId: string) => {
isSomeCellInEditModeSelector,
);
const currentHotkeyScope = getSnapshotValue(
snapshot,
currentHotkeyScopeState,
);
if (
currentHotkeyScope.scope !== TableHotkeyScope.CellEditMode &&
currentHotkeyScope.scope !== AppHotkeyScope.CommandMenuOpen &&
currentHotkeyScope.scope !== RecordIndexHotkeyScope.RecordIndex
) {
return;
}
if (!isSomeCellInEditMode) {
setHoverPosition(cellPosition);
}

7
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell.ts
View File

@ -5,22 +5,15 @@ import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinit
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const DEFAULT_CELL_SCOPE: HotkeyScope = {
scope: TableHotkeyScope.CellEditMode,
};
export type OpenTableCellArgs = {
initialValue?: string;
cellPosition: TableCellPosition;
isReadOnly: boolean;
pathToShowPage: string;
customCellHotkeyScope: HotkeyScope | null;
fieldDefinition: FieldDefinition<FieldMetadata>;
recordId: string;
};

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
View File

@ -11,7 +11,6 @@ import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/
import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
@ -33,11 +32,6 @@ import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/po
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const DEFAULT_CELL_SCOPE: HotkeyScope = {
scope: TableHotkeyScope.CellEditMode,
};
export type OpenTableCellArgs = {
initialValue?: string;

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useRecordTableCellFocusHotkeys.ts
View File

@ -5,10 +5,8 @@ import { Key } from 'ts-key-enum';
export const useRecordTableCellFocusHotkeys = ({
focusId,
hotkeyScope,
}: {
focusId: string;
hotkeyScope: string;
}) => {
const { recordTableId } = useRecordTableContextOrThrow();
@ -20,7 +18,6 @@ export const useRecordTableCellFocusHotkeys = ({
moveFocus('up');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
@ -30,7 +27,6 @@ export const useRecordTableCellFocusHotkeys = ({
moveFocus('down');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
@ -40,7 +36,6 @@ export const useRecordTableCellFocusHotkeys = ({
moveFocus('left');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
@ -50,7 +45,6 @@ export const useRecordTableCellFocusHotkeys = ({
moveFocus('right');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
};

2
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowArrowKeysEffect.tsx
View File

@ -1,4 +1,3 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableRowFocusHotkeys } from '@/object-record/record-table/hooks/useRecordTableRowFocusHotkeys';
import { useRecordTableRowFocusId } from '@/object-record/record-table/record-table-row/hooks/useRecordTableRowFocusId';
@ -7,7 +6,6 @@ export const RecordTableRowArrowKeysEffect = () => {
useRecordTableRowFocusHotkeys({
focusId: recordTableRowFocusId,
hotkeyScope: RecordIndexHotkeyScope.RecordIndex,
});
return null;

29
packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys.ts
View File

@ -1,5 +1,4 @@
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
@ -79,10 +78,6 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
type: FocusComponentType.RECORD_TABLE_CELL,
instanceId: cellFocusId,
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
},
memoizeKey: cellFocusId,
});
};
@ -107,7 +102,6 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
keys: ['x'],
callback: handleSelectRow,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleSelectRow],
});
@ -115,7 +109,6 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
keys: [`${Key.Shift}+x`],
callback: handleSelectRowWithShift,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleSelectRowWithShift],
});
@ -123,7 +116,6 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
keys: [`${Key.Control}+${Key.Enter}`, `${Key.Meta}+${Key.Enter}`],
callback: handleOpenRecordInCommandMenu,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleOpenRecordInCommandMenu],
});
@ -131,7 +123,6 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
keys: [Key.Enter],
callback: handleEnterRow,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEnterRow],
});
@ -139,7 +130,25 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
keys: [Key.Escape],
callback: handleEscape,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEscape],
});
const { selectAllRows, setHasUserSelectedAllRows } = useRecordTable({
recordTableId,
});
const handleSelectAllRows = () => {
setHasUserSelectedAllRows(true);
selectAllRows();
};
useHotkeysOnFocusedElement({
keys: ['ctrl+a,meta+a'],
callback: handleSelectAllRows,
focusId,
dependencies: [handleSelectAllRows],
options: {
enableOnFormTags: false,
},
});
};

3
packages/twenty-front/src/modules/object-record/record-table/types/TableHotkeyScope.ts
View File

@ -1,3 +0,0 @@
export enum TableHotkeyScope {
CellEditMode = 'cell-edit-mode',
}

3
packages/twenty-front/src/modules/object-record/record-table/types/TableOptionsHotkeyScope.ts
View File

@ -1,3 +0,0 @@
export enum TableOptionsHotkeyScope {
Dropdown = 'table-options-dropdown',
}

3
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldInput.tsx
View File

@ -6,7 +6,6 @@ import { isFieldFullName } from '@/object-record/record-field/types/guards/isFie
import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
import { RecordTitleCellTextFieldInput } from '@/object-record/record-title-cell/components/RecordTitleCellTextFieldInput';
import { RecordTitleFullNameFieldInput } from '@/object-record/record-title-cell/components/RecordTitleFullNameFieldInput';
import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
type RecordTitleCellFieldInputProps = {
instanceId: string;
@ -47,7 +46,6 @@ export const RecordTitleCellFieldInput = ({
onTab={onTab}
onShiftTab={onShiftTab}
sizeVariant={sizeVariant}
hotkeyScope={TitleInputHotkeyScope.TitleInput}
/>
) : isFieldFullName(fieldDefinition) ? (
<RecordTitleFullNameFieldInput
@ -57,7 +55,6 @@ export const RecordTitleCellFieldInput = ({
onTab={onTab}
onShiftTab={onShiftTab}
sizeVariant={sizeVariant}
hotkeyScope={TitleInputHotkeyScope.TitleInput}
/>
) : null}
</>

3
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldInput.tsx
View File

@ -18,7 +18,6 @@ type RecordTitleCellTextFieldInputProps = {
onTab?: FieldInputEvent;
onShiftTab?: FieldInputEvent;
sizeVariant?: 'xs' | 'md';
hotkeyScope: string;
};
export const RecordTitleCellTextFieldInput = ({
@ -29,7 +28,6 @@ export const RecordTitleCellTextFieldInput = ({
onClickOutside,
onTab,
onShiftTab,
hotkeyScope,
}: RecordTitleCellTextFieldInputProps) => {
const { fieldDefinition, draftValue, setDraftValue } = useTextField();
@ -60,7 +58,6 @@ export const RecordTitleCellTextFieldInput = ({
onShiftTab: (inputValue) => {
onShiftTab?.(() => persistField(inputValue));
},
hotkeyScope,
});
const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {

6
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleDoubleTextInput.tsx
View File

@ -28,7 +28,6 @@ type RecordTitleDoubleTextInputProps = {
secondValue: string;
firstValuePlaceholder: string;
secondValuePlaceholder: string;
hotkeyScope: string;
onEnter: (newDoubleTextValue: FieldDoubleText) => void;
onEscape: (newDoubleTextValue: FieldDoubleText) => void;
onTab?: (newDoubleTextValue: FieldDoubleText) => void;
@ -47,7 +46,6 @@ export const RecordTitleDoubleTextInput = ({
secondValue,
firstValuePlaceholder,
secondValuePlaceholder,
hotkeyScope,
onClickOutside,
onEnter,
onEscape,
@ -96,7 +94,6 @@ export const RecordTitleDoubleTextInput = ({
secondValue: secondInternalValue,
});
},
scope: hotkeyScope,
focusId: instanceId,
dependencies: [onEnter, firstInternalValue, secondInternalValue],
});
@ -109,7 +106,6 @@ export const RecordTitleDoubleTextInput = ({
secondValue: secondInternalValue,
});
},
scope: hotkeyScope,
focusId: instanceId,
dependencies: [onEscape, firstInternalValue, secondInternalValue],
});
@ -127,7 +123,6 @@ export const RecordTitleDoubleTextInput = ({
});
}
},
scope: hotkeyScope,
focusId: instanceId,
dependencies: [
onTab,
@ -150,7 +145,6 @@ export const RecordTitleDoubleTextInput = ({
});
}
},
scope: hotkeyScope,
focusId: instanceId,
dependencies: [
onShiftTab,

6
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx
View File

@ -1,9 +1,7 @@
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { Theme, withTheme } from '@emotion/react';
@ -68,10 +66,6 @@ export const RecordTitleFullNameFieldDisplay = ({
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: recordTitleCellId,
},
hotkeyScope: {
scope: TitleInputHotkeyScope.TitleInput,
},
memoizeKey: INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
});
openInlineCell();

3
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldInput.tsx
View File

@ -16,7 +16,6 @@ type RecordTitleFullNameFieldInputProps = {
onTab?: FieldInputEvent;
onShiftTab?: FieldInputEvent;
sizeVariant?: 'xs' | 'md';
hotkeyScope: string;
};
export const RecordTitleFullNameFieldInput = ({
@ -26,7 +25,6 @@ export const RecordTitleFullNameFieldInput = ({
onTab,
onShiftTab,
sizeVariant,
hotkeyScope,
}: RecordTitleFullNameFieldInputProps) => {
const { draftValue, setDraftValue, persistFullNameField } =
useFullNameField();
@ -96,7 +94,6 @@ export const RecordTitleFullNameFieldInput = ({
onShiftTab={handleShiftTab}
onTab={handleTab}
onPaste={handlePaste}
hotkeyScope={hotkeyScope}
onChange={handleChange}
sizeVariant={sizeVariant}
/>

52
packages/twenty-front/src/modules/object-record/record-title-cell/hooks/useRecordTitleCell.tsx
View File

@ -1,17 +1,13 @@
import { useInitDraftValueV2 } from '@/object-record/record-field/hooks/useInitDraftValueV2';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
import { isInlineCellInEditModeScopedState } from '@/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState';
import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
export const useRecordTitleCell = () => {
const { goBackToPreviousDropdownFocusId } =
@ -64,52 +60,26 @@ export const useRecordTitleCell = () => {
recordId,
fieldName,
containerType,
customEditHotkeyScopeForField,
}: {
recordId: string;
fieldName: string;
containerType: RecordTitleCellContainerType;
customEditHotkeyScopeForField?: HotkeyScope;
}) => {
if (isDefined(customEditHotkeyScopeForField)) {
pushFocusItemToFocusStack({
focusId: getRecordFieldInputInstanceId({
pushFocusItemToFocusStack({
focusId: getRecordFieldInputInstanceId({
recordId,
fieldName,
prefix: containerType,
}),
component: {
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: getRecordFieldInputInstanceId({
recordId,
fieldName,
prefix: containerType,
}),
component: {
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: getRecordFieldInputInstanceId({
recordId,
fieldName,
prefix: containerType,
}),
},
hotkeyScope: customEditHotkeyScopeForField,
memoizeKey: INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
});
} else {
pushFocusItemToFocusStack({
focusId: getRecordFieldInputInstanceId({
recordId,
fieldName,
prefix: containerType,
}),
component: {
type: FocusComponentType.OPENED_FIELD_INPUT,
instanceId: getRecordFieldInputInstanceId({
recordId,
fieldName,
prefix: containerType,
}),
},
hotkeyScope: {
scope: TitleInputHotkeyScope.TitleInput,
},
memoizeKey: INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
});
}
},
});
const recordTitleCellId = getRecordFieldInputInstanceId({
recordId,

Some files were not shown because too many files have changed in this diff Show More