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

# 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.
2025-07-09 17:21:14 +02:00
parent 0a7b21234b
commit eba997be98
215 changed files with 687 additions and 1424 deletions
@@ -10,7 +10,6 @@ import { arrayToChunks } from '~/utils/array/arrayToChunks';

 import { ICON_PICKER_DROPDOWN_CONTENT_WIDTH } from '@/ui/input/components/constants/IconPickerDropdownContentWidth';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -223,7 +222,6 @@ export const IconPicker = ({
              selectableListInstanceId={selectableListInstanceId}
              selectableItemIdMatrix={iconKeys2d}
              focusId={dropdownId}
-              hotkeyScope={DropdownHotkeyScope.Dropdown}
            >
              <DropdownMenuSearchInput
                placeholder={t`Search icon`}
@@ -9,7 +9,6 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { SelectValue } from '@/ui/input/components/internal/select/types';
 import { SelectControl } from '@/ui/input/components/SelectControl';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-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 { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
@@ -186,7 +185,6 @@ export const Select = <Value extends SelectValue>({
                    selectableListInstanceId={dropdownId}
                    focusId={dropdownId}
                    selectableItemIdArray={selectableItemIdArray}
-                    hotkeyScope={DropdownHotkeyScope.Dropdown}
                  >
                    {filteredOptions.map((option) => (
                      <SelectableListItem
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { FocusEventHandler, useId } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';

-import { InputHotkeyScope } from '@/ui/input/types/InputHotkeyScope';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -101,7 +100,6 @@ export const TextArea = ({
      globalHotkeysConfig: {
        enableGlobalHotkeysConflictingWithKeyboard: false,
      },
-      hotkeyScope: { scope: InputHotkeyScope.TextInput },
    });
  };

@@ -5,7 +5,6 @@ import {
  TextInputV2,
  TextInputV2ComponentProps,
 } from '@/ui/input/components/TextInputV2';
-import { InputHotkeyScope } from '@/ui/input/types/InputHotkeyScope';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -67,7 +66,6 @@ export const TextInput = ({
        globalHotkeysConfig: {
          enableGlobalHotkeysConflictingWithKeyboard: false,
        },
-        hotkeyScope: { scope: InputHotkeyScope.TextInput },
      });
    }
  };
@@ -105,7 +103,6 @@ export const TextInput = ({
    keys: [Key.Escape],
    callback: handleEscape,
    focusId: instanceId,
-    scope: InputHotkeyScope.TextInput,
    dependencies: [handleEscape],
    options: {
      preventDefault: false,
@@ -116,7 +113,6 @@ export const TextInput = ({
    keys: [Key.Enter],
    callback: handleEnter,
    focusId: instanceId,
-    scope: InputHotkeyScope.TextInput,
    dependencies: [handleEnter],
    options: {
      preventDefault: false,
@@ -17,7 +17,6 @@ type InputProps = {
  value?: string;
  onChange: (value: string) => void;
  placeholder?: string;
-  hotkeyScope?: string;
  onEnter?: () => void;
  onEscape?: () => void;
  onClickOutside?: () => void;
@@ -63,7 +62,6 @@ const Input = ({
  value,
  onChange,
  placeholder,
-  hotkeyScope = 'title-input',
  onEnter,
  onEscape,
  onClickOutside,
@@ -115,7 +113,6 @@ const Input = ({
      handleLeaveFocus();
      onShiftTab?.();
    },
-    hotkeyScope: hotkeyScope,
  });

  return (
@@ -143,7 +140,6 @@ export const TitleInput = ({
  sizeVariant = 'md',
  onChange,
  placeholder,
-  hotkeyScope = 'title-input',
  onEnter,
  onEscape,
  onClickOutside,
@@ -163,7 +159,6 @@ export const TitleInput = ({
          value={value}
          onChange={onChange}
          placeholder={placeholder}
-          hotkeyScope={hotkeyScope}
          onEnter={onEnter}
          onEscape={onEscape}
          onClickOutside={onClickOutside}
@@ -187,7 +182,6 @@ export const TitleInput = ({
                globalHotkeysConfig: {
                  enableGlobalHotkeysConflictingWithKeyboard: false,
                },
-                hotkeyScope: { scope: hotkeyScope },
              });
            }
          }}
@@ -9,11 +9,9 @@ const meta: Meta<typeof TitleInput> = {
  decorators: [ComponentDecorator],
  args: {
    placeholder: 'Enter title',
-    hotkeyScope: 'titleInput',
    sizeVariant: 'md',
  },
  argTypes: {
-    hotkeyScope: { control: false },
    sizeVariant: { control: false },
  },
 };
@@ -4,8 +4,6 @@ import styled from '@emotion/styled';
 import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';

-import { CurrencyPickerHotkeyScope } from '../types/CurrencyPickerHotkeyScope';
-
 import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { Currency } from '@/ui/input/components/internal/types/Currency';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -52,7 +50,7 @@ export const CurrencyPickerDropdownButton = ({
 }) => {
  const theme = useTheme();

-  const dropdownId = CurrencyPickerHotkeyScope.CurrencyPicker;
+  const dropdownId = 'currency-picker-dropdown-id';

  const { closeDropdown } = useCloseDropdown();

@@ -69,7 +67,7 @@ export const CurrencyPickerDropdownButton = ({

  return (
    <Dropdown
-      dropdownId="currency-picker-dropdown-id"
+      dropdownId={dropdownId}
      clickableComponent={
        <StyledDropdownButtonContainer>
          <StyledIconContainer>
@@ -1,3 +0,0 @@
-export enum CurrencyPickerHotkeyScope {
-  CurrencyPicker = 'currency-picker-dropdown-id',
-}
@@ -1,3 +0,0 @@
-export enum CountryPickerHotkeyScope {
-  CountryPicker = 'country-picker',
-}
@@ -1,3 +0,0 @@
-export enum InputHotkeyScope {
-  TextInput = 'text-input',
-}
@@ -1,3 +0,0 @@
-export enum TitleInputHotkeyScope {
-  TitleInput = 'title-input',
-}