Add Keyboard navigation on IconPicker

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -4,7 +4,6 @@ import { useRecoilValue } from 'recoil';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { Activity } from '@/activities/types/Activity';
-import { CommandMenuSelectableListEffect } from '@/command-menu/components/CommandMenuSelectableListEffect';
 import { Company } from '@/companies/types/Company';
 import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@@ -94,6 +93,8 @@ export const CommandMenu = () => {
   const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
   const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
 
+  const [enterClicked, setEnterClicked] = useState(false);
+
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value);
   };
@@ -120,6 +121,15 @@ export const CommandMenu = () => {
     [toggleCommandMenu, setSearch],
   );
 
+  useScopedHotkeys(
+    'Enter',
+    () => {
+      setEnterClicked(true);
+    },
+    AppHotkeyScope.CommandMenu,
+    [],
+  );
+
   const { records: people } = useFindManyRecords<Person>({
     skip: !isCommandMenuOpened,
     objectNameSingular: 'person',
@@ -198,12 +208,10 @@ export const CommandMenu = () => {
         <StyledList>
           <ScrollWrapper>
             <StyledInnerList>
-              <CommandMenuSelectableListEffect
-                selectableItemIds={selectableItemIds}
-              />
               <SelectableList
                 selectableListId="command-menu-list"
-                selectableItemIds={selectableItemIds}
+                selectableItemIds={[selectableItemIds]}
+                hotkeyScope={AppHotkeyScope.CommandMenu}
               >
                 {!matchingCreateCommand.length &&
                   !matchingNavigateCommand.length &&
@@ -224,6 +232,8 @@ export const CommandMenu = () => {
                         onClick={cmd.onCommandClick}
                         firstHotKey={cmd.firstHotKey}
                         secondHotKey={cmd.secondHotKey}
+                        enterClicked={enterClicked}
+                        resetEnterClicked={() => setEnterClicked(false)}
                       />
                     </SelectableItem>
                   ))}
@@ -240,6 +250,8 @@ export const CommandMenu = () => {
                         onClick={cmd.onCommandClick}
                         firstHotKey={cmd.firstHotKey}
                         secondHotKey={cmd.secondHotKey}
+                        enterClicked={enterClicked}
+                        resetEnterClicked={() => setEnterClicked(false)}
                       />
                     </SelectableItem>
                   ))}
@@ -264,6 +276,8 @@ export const CommandMenu = () => {
                             }
                           />
                         )}
+                        enterClicked={enterClicked}
+                        resetEnterClicked={() => setEnterClicked(false)}
                       />
                     </SelectableItem>
                   ))}
@@ -285,6 +299,8 @@ export const CommandMenu = () => {
                             )}
                           />
                         )}
+                        enterClicked={enterClicked}
+                        resetEnterClicked={() => setEnterClicked(false)}
                       />
                     </SelectableItem>
                   ))}
@@ -298,6 +314,8 @@ export const CommandMenu = () => {
                         key={activity.id}
                         label={activity.title ?? ''}
                         onClick={() => openActivityRightDrawer(activity.id)}
+                        enterClicked={enterClicked}
+                        resetEnterClicked={() => setEnterClicked(false)}
                       />
                     </SelectableItem>
                   ))}

front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { IconArrowUpRight } from '@/ui/display/icon';
@@ -15,6 +16,8 @@ export type CommandMenuItemProps = {
   Icon?: IconComponent;
   firstHotKey?: string;
   secondHotKey?: string;
+  enterClicked?: boolean;
+  resetEnterClicked?: () => void;
 };
 
 export const CommandMenuItem = ({
@@ -25,6 +28,8 @@ export const CommandMenuItem = ({
   Icon,
   firstHotKey,
   secondHotKey,
+  enterClicked,
+  resetEnterClicked,
 }: CommandMenuItemProps) => {
   const navigate = useNavigate();
   const { toggleCommandMenu } = useCommandMenu();
@@ -35,7 +40,7 @@ export const CommandMenuItem = ({
 
   const { isSelectedItemId } = useSelectableList({ itemId: id });
 
-  const onItemClick = () => {
+  const onItemClick = useCallback(() => {
     toggleCommandMenu();
 
     if (onClick) {
@@ -46,7 +51,14 @@ export const CommandMenuItem = ({
       navigate(to);
       return;
     }
-  };
+  }, [navigate, onClick, to, toggleCommandMenu]);
+
+  useEffect(() => {
+    if (enterClicked && isSelectedItemId) {
+      onItemClick();
+      resetEnterClicked?.();
+    }
+  }, [enterClicked, isSelectedItemId, onItemClick, resetEnterClicked]);
 
   return (
     <MenuItemCommand

front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -9,6 +10,10 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { arrayToChunks } from '~/utils/array/array-to-chunks';
 
 import { IconButton, IconButtonVariant } from '../button/components/IconButton';
 import { LightIconButton } from '../button/components/LightIconButton';
@@ -79,6 +84,32 @@ export const IconPicker = ({
     ).slice(0, 25);
   }, [icons, searchString, selectedIconKey]);
 
+  const iconKeys2d = useMemo(
+    () => arrayToChunks(iconKeys.slice(), 5),
+    [iconKeys],
+  );
+
+  const { selectedItemId } = useSelectableList({
+    selectableListId: 'icon-list',
+  });
+
+  const selectedItem = selectedItemId ?? selectedIconKey;
+
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      if (selectedItem) {
+        const itemIndex = iconKeys.indexOf(selectedItem);
+
+        if (itemIndex === -1)
+          onChange({ iconKey: selectedItem, Icon: icons[itemIndex] });
+        closeDropdown();
+      }
+    },
+    IconPickerHotkeyScope.IconPicker,
+    [selectedItem],
+  );
+
   return (
     <DropdownScope dropdownScopeId={dropdownScopeId}>
       <div className={className}>
@@ -87,42 +118,48 @@ export const IconPicker = ({
           clickableComponent={
             <IconButton
               disabled={disabled}
-              Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
+              Icon={selectedItem ? icons[selectedItem] : IconApps}
               variant={variant}
             />
           }
           dropdownMenuWidth={176}
           dropdownComponents={
-            <DropdownMenu width={176}>
-              <DropdownMenuSearchInput
-                placeholder="Search icon"
-                autoFocus
-                onChange={(event) => setSearchString(event.target.value)}
-              />
-              <DropdownMenuSeparator />
-              <DropdownMenuItemsContainer>
-                {isLoading ? (
-                  <DropdownMenuSkeletonItem />
-                ) : (
-                  <StyledMenuIconItemsContainer>
-                    {iconKeys.map((iconKey) => (
-                      <StyledLightIconButton
-                        key={iconKey}
-                        aria-label={convertIconKeyToLabel(iconKey)}
-                        isSelected={selectedIconKey === iconKey}
-                        size="medium"
-                        title={iconKey}
-                        Icon={icons[iconKey]}
-                        onClick={() => {
-                          onChange({ iconKey, Icon: icons[iconKey] });
-                          closeDropdown();
-                        }}
-                      />
-                    ))}
-                  </StyledMenuIconItemsContainer>
-                )}
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
+            <SelectableList
+              selectableListId="icon-list"
+              selectableItemIds={iconKeys2d}
+              hotkeyScope={IconPickerHotkeyScope.IconPicker}
+            >
+              <DropdownMenu width={176}>
+                <DropdownMenuSearchInput
+                  placeholder="Search icon"
+                  autoFocus
+                  onChange={(event) => setSearchString(event.target.value)}
+                />
+                <DropdownMenuSeparator />
+                <DropdownMenuItemsContainer>
+                  {isLoading ? (
+                    <DropdownMenuSkeletonItem />
+                  ) : (
+                    <StyledMenuIconItemsContainer>
+                      {iconKeys.map((iconKey) => (
+                        <StyledLightIconButton
+                          key={iconKey}
+                          aria-label={convertIconKeyToLabel(iconKey)}
+                          isSelected={selectedItem === iconKey}
+                          size="medium"
+                          title={iconKey}
+                          Icon={icons[iconKey]}
+                          onClick={() => {
+                            onChange({ iconKey, Icon: icons[iconKey] });
+                            closeDropdown();
+                          }}
+                        />
+                      ))}
+                    </StyledMenuIconItemsContainer>
+                  )}
+                </DropdownMenuItemsContainer>
+              </DropdownMenu>
+            </SelectableList>
           }
           onClickOutside={onClickOutside}
           onClose={() => {

front/src/modules/ui/layout/selectable-list/components/SelectableList.tsx

@@ -1,13 +1,16 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import styled from '@emotion/styled';
 
 import { useSelectableListHotKeys } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { SelectableListScope } from '@/ui/layout/selectable-list/scopes/SelectableListScope';
+
 type SelectableListProps = {
   children: ReactNode;
   selectableListId: string;
-  selectableItemIds: string[];
+  selectableItemIds: string[][];
   onSelect?: (selected: string) => void;
+  hotkeyScope: string;
 };
 
 const StyledSelectableItemsContainer = styled.div`
@@ -17,8 +20,18 @@ const StyledSelectableItemsContainer = styled.div`
 export const SelectableList = ({
   children,
   selectableListId,
+  hotkeyScope,
+  selectableItemIds,
 }: SelectableListProps) => {
-  useSelectableListHotKeys(selectableListId);
+  useSelectableListHotKeys(selectableListId, hotkeyScope);
+
+  const { setSelectableItemIds } = useSelectableList({
+    selectableListId,
+  });
+
+  useEffect(() => {
+    setSelectableItemIds(selectableItemIds);
+  }, [selectableItemIds, setSelectableItemIds]);
 
   return (
     <SelectableListScope selectableListScopeId={selectableListId}>