admin/twenty
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

324
packages/twenty-front/src/modules/action-menu/actions/record-actions/utils/__tests__/inheritActionsFromDefaultConfig.test.tsx Normal file
View File

@ -0,0 +1,324 @@
import { DEFAULT_RECORD_ACTIONS_CONFIG } from '@/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig';
import { NoSelectionRecordActionKeys } from '@/action-menu/actions/record-actions/no-selection/types/NoSelectionRecordActionsKeys';
import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey';
import { ActionConfig } from '@/action-menu/actions/types/ActionConfig';
import { ActionScope } from '@/action-menu/actions/types/ActionScope';
import { ActionType } from '@/action-menu/actions/types/ActionType';
import { DefaultRecordActionConfigKeys } from '@/action-menu/actions/types/DefaultRecordActionConfigKeys';
import { IconHeart, IconPlus } from 'twenty-ui/display';
import { inheritActionsFromDefaultConfig } from '../inheritActionsFromDefaultConfig';
const MockComponent = <div>Mock Component</div>;
describe('inheritActionsFromDefaultConfig', () => {
it('should return empty object when no action keys are provided', () => {
const result = inheritActionsFromDefaultConfig({
config: {},
actionKeys: [],
propertiesToOverwrite: {},
});
expect(result).toEqual({});
});
it('should return only provided config when no default action keys are specified', () => {
const customConfig: Record<string, ActionConfig> = {
'custom-action': {
type: ActionType.Standard,
scope: ActionScope.Object,
key: 'custom-action',
label: 'Custom Action',
position: 100,
Icon: IconPlus,
shouldBeRegistered: () => true,
component: MockComponent,
},
};
const result = inheritActionsFromDefaultConfig({
config: customConfig,
actionKeys: [],
propertiesToOverwrite: {},
});
expect(result).toEqual(customConfig);
});
it('should inherit actions from default config', () => {
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
SingleRecordActionKeys.ADD_TO_FAVORITES,
];
const result = inheritActionsFromDefaultConfig({
config: {},
actionKeys,
propertiesToOverwrite: {},
});
expect(result).toEqual({
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]:
DEFAULT_RECORD_ACTIONS_CONFIG[
NoSelectionRecordActionKeys.CREATE_NEW_RECORD
],
[SingleRecordActionKeys.ADD_TO_FAVORITES]:
DEFAULT_RECORD_ACTIONS_CONFIG[SingleRecordActionKeys.ADD_TO_FAVORITES],
});
});
it('should overwrite specific properties of inherited actions', () => {
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
];
const propertiesToOverwrite = {
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]: {
label: 'Custom Create Label',
position: 999,
isPinned: false,
},
};
const result = inheritActionsFromDefaultConfig({
config: {},
actionKeys,
propertiesToOverwrite,
});
const expectedAction = {
...DEFAULT_RECORD_ACTIONS_CONFIG[
NoSelectionRecordActionKeys.CREATE_NEW_RECORD
],
label: 'Custom Create Label',
position: 999,
isPinned: false,
};
expect(result).toEqual({
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]: expectedAction,
});
});
it('should overwrite properties for multiple actions', () => {
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
SingleRecordActionKeys.ADD_TO_FAVORITES,
];
const propertiesToOverwrite = {
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]: {
position: 10,
},
[SingleRecordActionKeys.ADD_TO_FAVORITES]: {
label: 'Custom Favorite Label',
Icon: IconHeart,
},
};
const result = inheritActionsFromDefaultConfig({
config: {},
actionKeys,
propertiesToOverwrite,
});
expect(result[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]).toEqual({
...DEFAULT_RECORD_ACTIONS_CONFIG[
NoSelectionRecordActionKeys.CREATE_NEW_RECORD
],
position: 10,
});
expect(result[SingleRecordActionKeys.ADD_TO_FAVORITES]).toEqual({
...DEFAULT_RECORD_ACTIONS_CONFIG[SingleRecordActionKeys.ADD_TO_FAVORITES],
label: 'Custom Favorite Label',
Icon: IconHeart,
});
});
it('should only overwrite properties for specified actions', () => {
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
SingleRecordActionKeys.ADD_TO_FAVORITES,
];
const propertiesToOverwrite = {
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]: {
position: 10,
},
};
const result = inheritActionsFromDefaultConfig({
config: {},
actionKeys,
propertiesToOverwrite,
});
expect(result[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]).toEqual({
...DEFAULT_RECORD_ACTIONS_CONFIG[
NoSelectionRecordActionKeys.CREATE_NEW_RECORD
],
position: 10,
});
expect(result[SingleRecordActionKeys.ADD_TO_FAVORITES]).toEqual(
DEFAULT_RECORD_ACTIONS_CONFIG[SingleRecordActionKeys.ADD_TO_FAVORITES],
);
});
it('should merge inherited actions with provided config', () => {
const customConfig: Record<string, ActionConfig> = {
'custom-action': {
type: ActionType.Standard,
scope: ActionScope.Object,
key: 'custom-action',
label: 'Custom Action',
position: 100,
Icon: IconPlus,
shouldBeRegistered: () => true,
component: MockComponent,
},
};
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
];
const result = inheritActionsFromDefaultConfig({
config: customConfig,
actionKeys,
propertiesToOverwrite: {},
});
expect(result).toEqual({
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]:
DEFAULT_RECORD_ACTIONS_CONFIG[
NoSelectionRecordActionKeys.CREATE_NEW_RECORD
],
'custom-action': customConfig['custom-action'],
});
});
it('should prioritize provided config over inherited actions when keys conflict', () => {
const customConfig: Record<string, ActionConfig> = {
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]: {
type: ActionType.Standard,
scope: ActionScope.Object,
key: NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
label: 'Overridden Create Action',
position: 999,
Icon: IconHeart,
shouldBeRegistered: () => false,
component: MockComponent,
},
};
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
];
const result = inheritActionsFromDefaultConfig({
config: customConfig,
actionKeys,
propertiesToOverwrite: {},
});
expect(result[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]).toEqual(
customConfig[NoSelectionRecordActionKeys.CREATE_NEW_RECORD],
);
expect(result[NoSelectionRecordActionKeys.CREATE_NEW_RECORD].label).toBe(
'Overridden Create Action',
);
});
it('should handle complex scenario with inheritance, overrides, and custom config', () => {
const customConfig: Record<string, ActionConfig> = {
'custom-action-1': {
type: ActionType.Standard,
scope: ActionScope.Object,
key: 'custom-action-1',
label: 'Custom Action 1',
position: 50,
Icon: IconPlus,
shouldBeRegistered: () => true,
component: MockComponent,
},
[SingleRecordActionKeys.ADD_TO_FAVORITES]: {
type: ActionType.Standard,
scope: ActionScope.RecordSelection,
key: SingleRecordActionKeys.ADD_TO_FAVORITES,
label: 'Completely Custom Favorites',
position: 1000,
Icon: IconHeart,
shouldBeRegistered: () => false,
component: MockComponent,
},
};
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
SingleRecordActionKeys.ADD_TO_FAVORITES,
SingleRecordActionKeys.REMOVE_FROM_FAVORITES,
];
const propertiesToOverwrite = {
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]: {
label: 'Modified Create Label',
position: 5,
},
[SingleRecordActionKeys.REMOVE_FROM_FAVORITES]: {
isPinned: false,
},
};
const result = inheritActionsFromDefaultConfig({
config: customConfig,
actionKeys,
propertiesToOverwrite,
});
expect(Object.keys(result)).toHaveLength(4);
expect(result['custom-action-1']).toEqual(customConfig['custom-action-1']);
expect(result[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]).toEqual({
...DEFAULT_RECORD_ACTIONS_CONFIG[
NoSelectionRecordActionKeys.CREATE_NEW_RECORD
],
label: 'Modified Create Label',
position: 5,
});
expect(result[SingleRecordActionKeys.ADD_TO_FAVORITES]).toEqual(
customConfig[SingleRecordActionKeys.ADD_TO_FAVORITES],
);
expect(result[SingleRecordActionKeys.REMOVE_FROM_FAVORITES]).toEqual({
...DEFAULT_RECORD_ACTIONS_CONFIG[
SingleRecordActionKeys.REMOVE_FROM_FAVORITES
],
isPinned: false,
});
});
it('should handle empty overrides gracefully', () => {
const actionKeys: DefaultRecordActionConfigKeys[] = [
NoSelectionRecordActionKeys.CREATE_NEW_RECORD,
];
const propertiesToOverwrite = {
[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]: {},
};
const result = inheritActionsFromDefaultConfig({
config: {},
actionKeys,
propertiesToOverwrite,
});
expect(result[NoSelectionRecordActionKeys.CREATE_NEW_RECORD]).toEqual(
DEFAULT_RECORD_ACTIONS_CONFIG[
NoSelectionRecordActionKeys.CREATE_NEW_RECORD
],
);
});
});

2
packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx
View File

@ -1,6 +1,5 @@
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { Key } from 'ts-key-enum';
import { Button } from 'twenty-ui/input';
import { getOsControlSymbol } from 'twenty-ui/utilities';
@ -18,7 +17,6 @@ export const CmdEnterActionButton = ({
keys: [`${Key.Control}+${Key.Enter}`, `${Key.Meta}+${Key.Enter}`],
callback: () => onClick(),
focusId: SIDE_PANEL_FOCUS_ID,
scope: AppHotkeyScope.CommandMenuOpen,
dependencies: [onClick],
});

4
packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx
View File

@ -7,12 +7,10 @@ import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
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 { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useTheme } from '@emotion/react';
import { useContext } from 'react';
@ -39,7 +37,6 @@ export const CommandMenuActionMenuDropdown = () => {
dropdownComponentInstanceIdFromProps: dropdownId,
});
},
scope: AppHotkeyScope.CommandMenuOpen,
dependencies: [toggleDropdown],
};
@ -86,7 +83,6 @@ export const CommandMenuActionMenuDropdown = () => {
selectableListInstanceId={actionMenuId}
focusId={dropdownId}
selectableItemIdArray={selectableItemIdArray}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{recordSelectionActions.map((action) => (
<ActionComponent action={action} key={action.key} />

2
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
View File

@ -10,7 +10,6 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
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 { 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';
@ -89,7 +88,6 @@ export const RecordIndexActionMenuDropdown = () => {
focusId={dropdownId}
selectableItemIdArray={selectedItemIdArray}
selectableListInstanceId={dropdownId}
hotkeyScope={DropdownHotkeyScope.Dropdown}
>
{recordIndexActions.map((action) => (
<ActionComponent action={action} key={action.key} />

2
packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx
View File

@ -13,7 +13,6 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@ -123,7 +122,6 @@ export const RecordShowRightDrawerOpenRecordButton = ({
keys: ['ctrl+Enter,meta+Enter'],
callback: handleOpenRecord,
focusId: SIDE_PANEL_FOCUS_ID,
scope: AppHotkeyScope.CommandMenuOpen,
dependencies: [handleOpenRecord],
});

10
packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx
View File

@ -5,7 +5,6 @@ import { v4 } from 'uuid';
import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
import { canCreateActivityState } from '@/activities/states/canCreateActivityState';
import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { modifyRecordFromCache } from '@/object-record/cache/utils/modifyRecordFromCache';
@ -23,6 +22,7 @@ import { Task } from '@/activities/types/Task';
import { filterAttachmentsToRestore } from '@/activities/utils/filterAttachmentsToRestore';
import { getActivityAttachmentIdsToDelete } from '@/activities/utils/getActivityAttachmentIdsToDelete';
import { getActivityAttachmentPathsToRestore } from '@/activities/utils/getActivityAttachmentPathsToRestore';
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords';
@ -307,7 +307,6 @@ export const ActivityRichTextEditor = ({
editor.domElement?.blur();
},
focusId: activityId,
scope: ActivityEditorHotkeyScope.ActivityBody,
dependencies: [editor],
});
@ -346,8 +345,7 @@ export const ActivityRichTextEditor = ({
useHotkeysOnFocusedElement({
keys: '*',
callback: handleAllKeys,
focusId: activityId,
scope: ActivityEditorHotkeyScope.ActivityBody,
focusId: SIDE_PANEL_FOCUS_ID,
dependencies: [handleAllKeys],
});
@ -380,8 +378,8 @@ export const ActivityRichTextEditor = ({
type: FocusComponentType.ACTIVITY_RICH_TEXT_EDITOR,
},
focusId: activityId,
hotkeyScope: {
scope: ActivityEditorHotkeyScope.ActivityBody,
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
});
},

6
packages/twenty-front/src/modules/activities/inline-cell/hooks/useOpenActivityTargetCellEditMode.ts
View File

@ -6,7 +6,6 @@ import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-pic
import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchFilterComponentState';
import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchableObjectMetadataItemsComponentState';
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';
@ -95,10 +94,9 @@ export const useOpenActivityTargetCellEditMode = () => {
type: FocusComponentType.DROPDOWN,
instanceId: recordPickerInstanceId,
},
hotkeyScope: {
scope: DropdownHotkeyScope.Dropdown,
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: recordPickerInstanceId,
});
},
[

4
packages/twenty-front/src/modules/activities/types/ActivityEditorHotkeyScope.ts
View File

@ -1,4 +0,0 @@
export enum ActivityEditorHotkeyScope {
ActivityTitle = 'activity-title',
ActivityBody = 'activity-body',
}

49
packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
View File

@ -32,7 +32,6 @@ import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/u
import { AppBasePath } from '@/types/AppBasePath';
import { AppPath } from '@/types/AppPath';
import { PageFocusId } from '@/types/PageFocusId';
import { PageHotkeyScope } from '@/types/PageHotkeyScope';
import { useResetFocusStackToFocusItem } from '@/ui/utilities/focus/hooks/useResetFocusStackToFocusItem';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -153,15 +152,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: true,
enableGlobalHotkeysConflictingWithKeyboard: true,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.RecordShowPage,
customScopes: {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
},
},
});
break;
@ -178,10 +168,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.SignInUp,
},
});
break;
@ -198,10 +184,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.InviteTeam,
},
});
break;
@ -218,10 +200,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.CreateProfile,
},
});
break;
@ -238,10 +216,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.CreateWorkspace,
},
});
break;
@ -258,10 +232,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.SyncEmail,
},
});
break;
@ -278,10 +248,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.InviteTeam,
},
});
break;
@ -298,10 +264,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.PlanRequired,
},
});
break;
@ -318,17 +280,6 @@ export const PageChangeEffect = () => {
enableGlobalHotkeysWithModifiers: false,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: PageHotkeyScope.Settings,
customScopes: {
goto: false,
keyboardShortcutMenu: false,
commandMenu: false,
commandMenuOpen: false,
searchRecords: false,
},
},
});
break;

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
View File

@ -7,7 +7,6 @@ import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/Comman
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';
@ -78,7 +77,6 @@ export const CommandMenuList = ({
selectableListInstanceId="command-menu-list"
focusId={SIDE_PANEL_FOCUS_ID}
selectableItemIdArray={selectableItemIds}
hotkeyScope={AppHotkeyScope.CommandMenuOpen}
onSelect={() => {
setHasUserSelectedCommand(true);
}}

10
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
View File

@ -1,13 +1,13 @@
import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId';
import { SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/SlashMenuDropdownClickOutsideId';
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId';
import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
@ -55,11 +55,11 @@ export const CommandMenuOpenContainer = ({
const handleClickOutside = useRecoilCallback(
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const hotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState)
const currentFocusId = snapshot
.getLoadable(currentFocusIdSelector)
.getValue();
if (hotkeyScope?.scope === CommandMenuHotkeyScope.CommandMenuFocused) {
if (currentFocusId === SIDE_PANEL_FOCUS_ID) {
event.stopImmediatePropagation();
event.preventDefault();
closeCommandMenu();

43
packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
View File

@ -8,18 +8,6 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
const mockGoBackToPreviousHotkeyScope = jest.fn();
const mockSetHotkeyScopeAndMemorizePreviousScope = jest.fn();
jest.mock('@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope', () => ({
usePreviousHotkeyScope: () => ({
goBackToPreviousHotkeyScope: mockGoBackToPreviousHotkeyScope,
setHotkeyScopeAndMemorizePreviousScope:
mockSetHotkeyScopeAndMemorizePreviousScope,
}),
}));
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>
@ -71,13 +59,6 @@ describe('useCommandMenu', () => {
});
expect(result.current.isCommandMenuOpened).toBe(true);
expect(mockSetHotkeyScopeAndMemorizePreviousScope).toHaveBeenCalledWith({
scope: CommandMenuHotkeyScope.CommandMenuFocused,
memoizeKey: 'command-menu',
customScopes: {
commandMenuOpen: true,
},
});
act(() => {
result.current.commandMenu.closeCommandMenu();
@ -96,13 +77,6 @@ describe('useCommandMenu', () => {
});
expect(result.current.isCommandMenuOpened).toBe(true);
expect(mockSetHotkeyScopeAndMemorizePreviousScope).toHaveBeenCalledWith({
scope: CommandMenuHotkeyScope.CommandMenuFocused,
memoizeKey: 'command-menu',
customScopes: {
commandMenuOpen: true,
},
});
act(() => {
result.current.commandMenu.toggleCommandMenu();
@ -110,21 +84,4 @@ describe('useCommandMenu', () => {
expect(result.current.isCommandMenuOpened).toBe(false);
});
it('should call goBackToPreviousHotkeyScope when closing the command menu', () => {
const { result } = renderHooks();
act(() => {
result.current.commandMenu.openCommandMenu();
});
expect(result.current.isCommandMenuOpened).toBe(true);
expect(mockGoBackToPreviousHotkeyScope).not.toHaveBeenCalled();
act(() => {
result.current.commandMenu.closeCommandMenu();
});
expect(mockGoBackToPreviousHotkeyScope).toHaveBeenCalledTimes(1);
});
});

107
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHistory.ts
View File

@ -6,15 +6,12 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { isDefined } from 'twenty-shared/utils';
export const useCommandMenuHistory = () => {
const { closeCommandMenu } = useCommandMenu();
const setHotkeyScope = useSetHotkeyScope();
const goBackFromCommandMenu = useRecoilCallback(
({ snapshot, set }) => {
@ -69,78 +66,64 @@ export const useCommandMenuHistory = () => {
}
set(hasUserSelectedCommandState, false);
setHotkeyScope(CommandMenuHotkeyScope.CommandMenuFocused, {
commandMenuOpen: true,
});
};
},
[closeCommandMenu, setHotkeyScope],
[closeCommandMenu],
);
const navigateCommandMenuHistory = useRecoilCallback(
({ snapshot, set }) => {
return (pageIndex: number) => {
const currentNavigationStack = snapshot
.getLoadable(commandMenuNavigationStackState)
.getValue();
const navigateCommandMenuHistory = useRecoilCallback(({ snapshot, set }) => {
return (pageIndex: number) => {
const currentNavigationStack = snapshot
.getLoadable(commandMenuNavigationStackState)
.getValue();
const newNavigationStack = currentNavigationStack.slice(
0,
pageIndex + 1,
const newNavigationStack = currentNavigationStack.slice(0, pageIndex + 1);
set(commandMenuNavigationStackState, newNavigationStack);
const newNavigationStackItem = newNavigationStack.at(-1);
if (!isDefined(newNavigationStackItem)) {
throw new Error(
`No command menu navigation stack item found for index ${pageIndex}`,
);
}
set(commandMenuNavigationStackState, newNavigationStack);
set(commandMenuPageState, newNavigationStackItem.page);
set(commandMenuPageInfoState, {
title: newNavigationStackItem.pageTitle,
Icon: newNavigationStackItem.pageIcon,
instanceId: newNavigationStackItem.pageId,
});
const currentMorphItems = snapshot
.getLoadable(commandMenuNavigationMorphItemByPageState)
.getValue();
const newNavigationStackItem = newNavigationStack.at(-1);
if (!isDefined(newNavigationStackItem)) {
throw new Error(
`No command menu navigation stack item found for index ${pageIndex}`,
for (const [pageId, morphItem] of currentMorphItems.entries()) {
if (!newNavigationStack.some((item) => item.pageId === pageId)) {
set(
activeTabIdComponentState.atomFamily({
instanceId: getShowPageTabListComponentId({
pageId,
targetObjectId: morphItem.recordId,
}),
}),
null,
);
}
}
set(commandMenuPageState, newNavigationStackItem.page);
set(commandMenuPageInfoState, {
title: newNavigationStackItem.pageTitle,
Icon: newNavigationStackItem.pageIcon,
instanceId: newNavigationStackItem.pageId,
});
const currentMorphItems = snapshot
.getLoadable(commandMenuNavigationMorphItemByPageState)
.getValue();
const newMorphItems = new Map(
Array.from(currentMorphItems.entries()).filter(([pageId]) =>
newNavigationStack.some((item) => item.pageId === pageId),
),
);
for (const [pageId, morphItem] of currentMorphItems.entries()) {
if (!newNavigationStack.some((item) => item.pageId === pageId)) {
set(
activeTabIdComponentState.atomFamily({
instanceId: getShowPageTabListComponentId({
pageId,
targetObjectId: morphItem.recordId,
}),
}),
null,
);
}
}
set(commandMenuNavigationMorphItemByPageState, newMorphItems);
const newMorphItems = new Map(
Array.from(currentMorphItems.entries()).filter(([pageId]) =>
newNavigationStack.some((item) => item.pageId === pageId),
),
);
set(commandMenuNavigationMorphItemByPageState, newMorphItems);
set(hasUserSelectedCommandState, false);
setHotkeyScope(CommandMenuHotkeyScope.CommandMenuFocused, {
commandMenuOpen: true,
});
};
},
[setHotkeyScope],
);
set(hasUserSelectedCommandState, false);
};
}, []);
return {
goBackFromCommandMenu,

35
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHotKeys.ts
View File

@ -1,16 +1,16 @@
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
import { useOpenRecordsSearchPageInCommandMenu } from '@/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu';
import { useSetGlobalCommandMenuContext } from '@/command-menu/hooks/useSetGlobalCommandMenuContext';
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
import { useGlobalHotkeys } from '@/ui/utilities/hotkey/hooks/useGlobalHotkeys';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isNonEmptyString } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
@ -43,7 +43,6 @@ export const useCommandMenuHotKeys = () => {
toggleCommandMenu();
},
true,
AppHotkeyScope.CommandMenu,
[closeKeyboardShortcutMenu, toggleCommandMenu],
);
@ -53,26 +52,24 @@ export const useCommandMenuHotKeys = () => {
openRecordsSearchPage();
},
false,
AppHotkeyScope.SearchRecords,
[openRecordsSearchPage],
{
ignoreModifiers: true,
},
);
useGlobalHotkeys(
[Key.Escape],
() => {
useHotkeysOnFocusedElement({
keys: [Key.Escape],
callback: () => {
goBackFromCommandMenu();
},
true,
CommandMenuHotkeyScope.CommandMenuFocused,
[goBackFromCommandMenu],
);
focusId: SIDE_PANEL_FOCUS_ID,
dependencies: [goBackFromCommandMenu],
});
useGlobalHotkeys(
[Key.Backspace, Key.Delete],
() => {
useHotkeysOnFocusedElement({
keys: [Key.Backspace, Key.Delete],
callback: () => {
if (isNonEmptyString(commandMenuSearch)) {
return;
}
@ -91,17 +88,13 @@ export const useCommandMenuHotKeys = () => {
goBackFromCommandMenu();
}
},
true,
CommandMenuHotkeyScope.CommandMenuFocused,
[
focusId: SIDE_PANEL_FOCUS_ID,
dependencies: [
commandMenuPage,
commandMenuSearch,
contextStoreTargetedRecordsRuleComponent,
goBackFromCommandMenu,
setGlobalCommandMenuContext,
],
{
preventDefault: false,
},
);
});
};

9
packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts
View File

@ -10,7 +10,6 @@ import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState
import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState';
@ -61,13 +60,9 @@ export const useNavigateCommandMenu = () => {
type: FocusComponentType.SIDE_PANEL,
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
},
hotkeyScope: {
scope: CommandMenuHotkeyScope.CommandMenuFocused,
customScopes: {
commandMenuOpen: true,
},
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
memoizeKey: COMMAND_MENU_COMPONENT_INSTANCE_ID,
});
copyContextStoreStates({

3
packages/twenty-front/src/modules/command-menu/types/CommandMenuHotkeyScope.ts
View File

@ -1,3 +0,0 @@
export enum CommandMenuHotkeyScope {
CommandMenuFocused = 'command-menu-focused',
}

1
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View File

@ -159,7 +159,6 @@ export const CurrentWorkspaceMemberFavorites = ({
onSubmit={handleSubmitRename}
onCancel={handleCancelRename}
onClickOutside={handleClickOutside}
hotkeyScope="favorites-folder-input"
/>
) : (
<FavoritesDroppable droppableId={`folder-header-${folder.folderId}`}>

4
packages/twenty-front/src/modules/favorites/components/FavoritesFolders.tsx
View File

@ -1,5 +1,4 @@
import { CurrentWorkspaceMemberFavorites } from '@/favorites/components/CurrentWorkspaceMemberFavorites';
import { FavoriteFolderHotkeyScope } from '@/favorites/constants/FavoriteFolderRightIconDropdownHotkeyScope';
import { useCreateFavoriteFolder } from '@/favorites/hooks/useCreateFavoriteFolder';
import { useFavoritesByFolder } from '@/favorites/hooks/useFavoritesByFolder';
import { isFavoriteFolderCreatingState } from '@/favorites/states/isFavoriteFolderCreatingState';
@ -71,9 +70,6 @@ export const FavoriteFolders = ({
onSubmit={handleSubmitFavoriteFolderCreation}
onCancel={handleCancelFavoriteFolderCreation}
onClickOutside={handleClickOutside}
hotkeyScope={
FavoriteFolderHotkeyScope.FavoriteFolderNavigationInput
}
/>
</NavigationDrawerAnimatedCollapseWrapper>
)}

4
packages/twenty-front/src/modules/favorites/constants/FavoriteFolderRightIconDropdownHotkeyScope.ts
View File

@ -1,4 +0,0 @@
export enum FavoriteFolderHotkeyScope {
FavoriteFolderRightIconDropdown = 'favorite-folder-right-icon-dropdown',
FavoriteFolderNavigationInput = 'favorite-folder-navigation-input',
}

3
packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPicker.tsx
View File

@ -9,7 +9,6 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
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 { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
@ -68,7 +67,6 @@ export const FavoriteFolderPicker = ({
onSubmit?.();
},
focusId: dropdownId,
scope: DropdownHotkeyScope.Dropdown,
dependencies: [onSubmit, isFavoriteFolderCreating],
});
@ -88,7 +86,6 @@ export const FavoriteFolderPicker = ({
}
},
focusId: instanceId,
scope: DropdownHotkeyScope.Dropdown,
dependencies: [
filteredFolders,
showNoFolderOption,

2
packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx
View File

@ -1,7 +1,6 @@
import { useRecoilValue } from 'recoil';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useKeyboardShortcutMenu } from '../hooks/useKeyboardShortcutMenu';
import { isKeyboardShortcutMenuOpenedState } from '../states/isKeyboardShortcutMenuOpenedState';
@ -23,7 +22,6 @@ export const KeyboardShortcutMenu = () => {
toggleKeyboardShortcutMenu();
},
true,
AppHotkeyScope.KeyboardShortcutMenu,
[toggleKeyboardShortcutMenu],
);

2
packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuOpenContent.tsx
View File

@ -2,7 +2,6 @@ import { Key } from 'ts-key-enum';
import { KEYBOARD_SHORTCUTS_GENERAL } from '@/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral';
import { KEYBOARD_SHORTCUTS_TABLE } from '@/keyboard-shortcut-menu/constants/KeyboardShortcutsTable';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import {
KEYBOARD_SHORTCUT_MENU_INSTANCE_ID,
@ -24,7 +23,6 @@ export const KeyboardShortcutMenuOpenContent = () => {
closeKeyboardShortcutMenu();
},
focusId: KEYBOARD_SHORTCUT_MENU_INSTANCE_ID,
scope: AppHotkeyScope.KeyboardShortcutMenuOpen,
dependencies: [closeKeyboardShortcutMenu],
});

7
packages/twenty-front/src/modules/keyboard-shortcut-menu/hooks/__tests__/useKeyboardShortcutMenu.test.tsx
View File

@ -4,7 +4,6 @@ import { act } from 'react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { isKeyboardShortcutMenuOpenedState } from '@/keyboard-shortcut-menu/states/isKeyboardShortcutMenuOpenedState';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useKeyboardShortcutMenu } from '../useKeyboardShortcutMenu';
@ -68,9 +67,6 @@ describe('useKeyboardShortcutMenu', () => {
enableGlobalHotkeysConflictingWithKeyboard: false,
enableGlobalHotkeysWithModifiers: false,
},
hotkeyScope: {
scope: AppHotkeyScope.KeyboardShortcutMenuOpen,
},
});
expect(result.current.isKeyboardShortcutMenuOpened).toBe(true);
@ -100,9 +96,6 @@ describe('useKeyboardShortcutMenu', () => {
enableGlobalHotkeysConflictingWithKeyboard: false,
enableGlobalHotkeysWithModifiers: false,
},
hotkeyScope: {
scope: AppHotkeyScope.KeyboardShortcutMenuOpen,
},
});
expect(result.current.isKeyboardShortcutMenuOpened).toBe(true);

5
packages/twenty-front/src/modules/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu.ts
View File

@ -1,7 +1,5 @@
import { useRecoilCallback } from 'recoil';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -28,9 +26,6 @@ export const useKeyboardShortcutMenu = () => {
enableGlobalHotkeysConflictingWithKeyboard: false,
enableGlobalHotkeysWithModifiers: false,
},
hotkeyScope: {
scope: AppHotkeyScope.KeyboardShortcutMenuOpen,
},
});
},
[pushFocusItemToFocusStack],

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,
],
);

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