Adds KeyBoard Navigation to ObjectFilterDropDownFilterSelect ( #4365 )

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -1,15 +1,14 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { useIcons } from 'twenty-ui';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
-import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
-import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
+import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem';
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
+import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 
 export const StyledInput = styled.input`
   background: transparent;
@@ -39,20 +38,18 @@ export const StyledInput = styled.input`
 
 export const ObjectFilterDropdownFilterSelect = () => {
   const [searchText, setSearchText] = useState('');
-  const {
-    setFilterDefinitionUsedInDropdown,
-    setSelectedOperandInDropdown,
-    setObjectFilterDropdownSearchInput,
-    availableFilterDefinitionsState,
-  } = useFilterDropdown();
+
+  const { availableFilterDefinitionsState } = useFilterDropdown();
 
   const availableFilterDefinitions = useRecoilValue(
     availableFilterDefinitionsState,
   );
 
-  const { getIcon } = useIcons();
-
-  const setHotkeyScope = useSetHotkeyScope();
+  const sortedAvailableFilterDefinitions = [...availableFilterDefinitions]
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .filter((item) =>
+      item.label.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()),
+    );
 
   return (
     <>
@@ -64,39 +61,24 @@ export const ObjectFilterDropdownFilterSelect = () => {
           setSearchText(event.target.value)
         }
       />
-      <DropdownMenuItemsContainer>
-        {[...availableFilterDefinitions]
-          .sort((a, b) => a.label.localeCompare(b.label))
-          .filter((item) =>
-            item.label
-              .toLocaleLowerCase()
-              .includes(searchText.toLocaleLowerCase()),
-          )
-          .map((availableFilterDefinition, index) => (
-            <MenuItem
-              key={`select-filter-${index}`}
-              testId={`select-filter-${index}`}
-              onClick={() => {
-                setFilterDefinitionUsedInDropdown(availableFilterDefinition);
-
-                if (
-                  availableFilterDefinition.type === 'RELATION' ||
-                  availableFilterDefinition.type === 'SELECT'
-                ) {
-                  setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
-                }
-
-                setSelectedOperandInDropdown(
-                  getOperandsForFilterType(availableFilterDefinition.type)?.[0],
-                );
-
-                setObjectFilterDropdownSearchInput('');
-              }}
-              LeftIcon={getIcon(availableFilterDefinition.iconName)}
-              text={availableFilterDefinition.label}
-            />
-          ))}
-      </DropdownMenuItemsContainer>
+      <SelectableList
+        hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}
+        selectableItemIdArray={sortedAvailableFilterDefinitions.map(
+          (item) => item.fieldMetadataId,
+        )}
+        selectableListId={OBJECT_FILTER_DROPDOWN_ID}
+      >
+        <DropdownMenuItemsContainer>
+          {sortedAvailableFilterDefinitions.map(
+            (availableFilterDefinition, index) => (
+              <ObjectFilterDropdownFilterSelectMenuItem
+                key={`select-filter-${index}`}
+                filterDefinition={availableFilterDefinition}
+              />
+            ),
+          )}
+        </DropdownMenuItemsContainer>
+      </SelectableList>
     </>
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx

@@ -0,0 +1,63 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
+import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
+import { getOperandsForFilterType } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useRecoilValue } from 'recoil';
+import { useIcons } from 'twenty-ui';
+
+export type ObjectFilterDropdownFilterSelectMenuItemProps = {
+  filterDefinition: FilterDefinition;
+};
+
+export const ObjectFilterDropdownFilterSelectMenuItem = ({
+  filterDefinition,
+}: ObjectFilterDropdownFilterSelectMenuItemProps) => {
+  const {
+    setFilterDefinitionUsedInDropdown,
+    setSelectedOperandInDropdown,
+    setObjectFilterDropdownSearchInput,
+  } = useFilterDropdown();
+
+  const { isSelectedItemIdSelector } = useSelectableList(
+    OBJECT_FILTER_DROPDOWN_ID,
+  );
+
+  const isSelectedItem = useRecoilValue(
+    isSelectedItemIdSelector(filterDefinition.fieldMetadataId),
+  );
+
+  const { getIcon } = useIcons();
+
+  const setHotkeyScope = useSetHotkeyScope();
+
+  const handleClick = () => {
+    setFilterDefinitionUsedInDropdown(filterDefinition);
+
+    if (
+      filterDefinition.type === 'RELATION' ||
+      filterDefinition.type === 'SELECT'
+    ) {
+      setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
+    }
+
+    setSelectedOperandInDropdown(
+      getOperandsForFilterType(filterDefinition.type)?.[0],
+    );
+
+    setObjectFilterDropdownSearchInput('');
+  };
+
+  return (
+    <MenuItemSelect
+      selected={false}
+      hovered={isSelectedItem}
+      onClick={handleClick}
+      LeftIcon={getIcon(filterDefinition.iconName)}
+      text={filterDefinition.label}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx

@@ -27,7 +27,6 @@ export const SelectableMenuItemSelect = ({
   );
 
   const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(entity.id));
-
   return (
     <StyledSelectableItem itemId={entity.id} key={entity.id}>
       <MenuItemSelectAvatar

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -8,12 +8,12 @@ export type MenuItemBaseProps = {
   accent?: MenuItemAccent;
   isKeySelected?: boolean;
   isHoverBackgroundDisabled?: boolean;
+  hovered?:boolean;
 };
 
 export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
   --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
-
   align-items: center;
 
   border-radius: ${({ theme }) => theme.border.radius.sm};