labsense-ui-kit 1.3.62 → 1.3.63

package/dist/Dropdown/SelectOption.d.ts

@@ -6,6 +6,7 @@ export declare const Options: import("styled-components/dist/types").IStyledComp
     $optionFontWeight?: string | undefined;
     $optionBackgroundColor?: string | undefined;
     $optionSelected?: boolean | undefined;
+    $isHighlighted?: boolean | undefined;
 }>> & string;
 export declare const DropdownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $menuBackground?: string | undefined;

package/dist/index.js

@@ -7862,15 +7862,24 @@ var DatePicker = function DatePicker(_ref22) {
 
 var _templateObject$a, _templateObject2$7, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3;
 var OptionContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose([""])));
-var OptionItem = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", ";\n"])), function (_ref) {
+var OptionItem = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (_ref) {
   var $optionBorder = _ref.$optionBorder,
     $isborder = _ref.$isborder,
     theme = _ref.theme;
   return $isborder ? $optionBorder || "1px solid " + theme.vms.border.extraLight : '';
-});
-var OptionLabel = styled__default.label(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n  color: ", ";\n"])), function (_ref2) {
-  var $optionColor = _ref2.$optionColor,
+}, function (_ref2) {
+  var $isHighlighted = _ref2.$isHighlighted,
     theme = _ref2.theme;
+  return $isHighlighted ? theme.vms.hover.primary : 'transparent';
+}, function (_ref3) {
+  var $isHighlighted = _ref3.$isHighlighted;
+  return $isHighlighted ? '4px' : '0';
+});
+var OptionLabel = styled__default.label(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n  color: ", ";\n"])), function (_ref4) {
+  var $optionColor = _ref4.$optionColor,
+    $isHighlighted = _ref4.$isHighlighted,
+    theme = _ref4.theme;
+  if ($isHighlighted) return theme.vms.text.white;
   switch ($optionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -7892,9 +7901,9 @@ var OptionLabel = styled__default.label(_templateObject3$4 || (_templateObject3$
       return $optionColor || theme.vms.text.medium;
   }
 });
-var SearchContainer = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  padding: 8px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])), function (_ref3) {
-  var $background = _ref3.$background,
-    theme = _ref3.theme;
+var SearchContainer = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  padding: 8px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])), function (_ref5) {
+  var $background = _ref5.$background,
+    theme = _ref5.theme;
   switch ($background) {
     case 'dark':
       return theme.vms.text.dark;
@@ -7915,19 +7924,19 @@ var SearchContainer = styled__default.div(_templateObject4$3 || (_templateObject
     default:
       return $background;
   }
-}, function (_ref4) {
-  var $borderBottom = _ref4.$borderBottom;
+}, function (_ref6) {
+  var $borderBottom = _ref6.$borderBottom;
   return $borderBottom || 'none';
-}, function (_ref5) {
-  var $borderRadius = _ref5.$borderRadius;
+}, function (_ref7) {
+  var $borderRadius = _ref7.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar = styled__default.input(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref6) {
-  var theme = _ref6.theme;
+var SearchBar = styled__default.input(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref8) {
+  var theme = _ref8.theme;
   return theme.vms["default"].tertiary;
-}, function (_ref7) {
-  var $inputColor = _ref7.$inputColor,
-    theme = _ref7.theme;
+}, function (_ref9) {
+  var $inputColor = _ref9.$inputColor,
+    theme = _ref9.theme;
   switch ($inputColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -7948,9 +7957,9 @@ var SearchBar = styled__default.input(_templateObject5$3 || (_templateObject5$3
     default:
       return $inputColor;
   }
-}, function (_ref8) {
-  var $placeholderColor = _ref8.$placeholderColor,
-    theme = _ref8.theme;
+}, function (_ref10) {
+  var $placeholderColor = _ref10.$placeholderColor,
+    theme = _ref10.theme;
   switch ($placeholderColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -7973,28 +7982,34 @@ var SearchBar = styled__default.input(_templateObject5$3 || (_templateObject5$3
   }
 });
 var Text = styled__default.span(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n"])));
-var OptionComponent = function OptionComponent(_ref9) {
-  var options = _ref9.options,
-    selectedOptions = _ref9.selectedOptions,
-    onChange = _ref9.onChange,
-    _ref9$placeholder = _ref9.placeholder,
-    placeholder = _ref9$placeholder === void 0 ? 'Search...' : _ref9$placeholder,
-    placeholderColor = _ref9.placeholderColor,
-    optionBorder = _ref9.optionBorder,
-    optionColor = _ref9.optionColor,
-    searchIcon = _ref9.searchIcon,
-    searchbarTextColor = _ref9.searchbarTextColor,
-    searchBoxBorder = _ref9.searchBoxBorder,
-    searchBoxBorderRadius = _ref9.searchBoxBorderRadius,
-    searchBoxBackground = _ref9.searchBoxBackground,
-    _ref9$searchBox = _ref9.searchBox,
-    searchBox = _ref9$searchBox === void 0 ? true : _ref9$searchBox,
-    NoOptionsText = _ref9.NoOptionsText;
+var OptionComponent = function OptionComponent(_ref11) {
+  var options = _ref11.options,
+    selectedOptions = _ref11.selectedOptions,
+    onChange = _ref11.onChange,
+    _ref11$placeholder = _ref11.placeholder,
+    placeholder = _ref11$placeholder === void 0 ? 'Search...' : _ref11$placeholder,
+    placeholderColor = _ref11.placeholderColor,
+    optionBorder = _ref11.optionBorder,
+    optionColor = _ref11.optionColor,
+    searchIcon = _ref11.searchIcon,
+    searchbarTextColor = _ref11.searchbarTextColor,
+    searchBoxBorder = _ref11.searchBoxBorder,
+    searchBoxBorderRadius = _ref11.searchBoxBorderRadius,
+    searchBoxBackground = _ref11.searchBoxBackground,
+    _ref11$searchBox = _ref11.searchBox,
+    searchBox = _ref11$searchBox === void 0 ? true : _ref11$searchBox,
+    NoOptionsText = _ref11.NoOptionsText;
   var _useState = React.useState(''),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
+  var _useState2 = React.useState(-1),
+    highlightedIndex = _useState2[0],
+    setHighlightedIndex = _useState2[1];
+  var optionContainerRef = React.useRef(null);
+  var searchInputRef = React.useRef(null);
   var handleSearchChange = function handleSearchChange(e) {
     setSearchQuery(e.target.value.trimStart());
+    setHighlightedIndex(-1);
   };
   var handleOptionToggle = function handleOptionToggle(currentOption) {
     var newOption = selectedOptions.includes(currentOption) ? selectedOptions.filter(function (item) {
@@ -8002,6 +8017,36 @@ var OptionComponent = function OptionComponent(_ref9) {
     }) : [].concat(selectedOptions, [currentOption]);
     onChange === null || onChange === void 0 ? void 0 : onChange(newOption);
   };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (finalOptions.length === 0) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev < finalOptions.length - 1 ? prev + 1 : prev;
+        });
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev > 0 ? prev - 1 : -1;
+        });
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (highlightedIndex >= 0 && highlightedIndex < finalOptions.length) {
+          var selectedOption = finalOptions[highlightedIndex];
+          handleOptionToggle(selectedOption.value);
+        }
+        break;
+      case 'Escape':
+        setHighlightedIndex(-1);
+        if (searchInputRef.current) {
+          searchInputRef.current.blur();
+        }
+        break;
+    }
+  };
   var filteredOptions = options.filter(function (option) {
     return option.labelText.toLowerCase().includes(searchQuery.toLowerCase());
   });
@@ -8012,6 +8057,17 @@ var OptionComponent = function OptionComponent(_ref9) {
   })) : filteredOptions.sort(function (a, b) {
     return a.labelText.localeCompare(b.labelText);
   });
+  React.useEffect(function () {
+    if (highlightedIndex >= 0 && optionContainerRef.current) {
+      var highlightedElement = optionContainerRef.current.children[highlightedIndex];
+      if (highlightedElement) {
+        highlightedElement.scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [highlightedIndex]);
   return React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '8px',
@@ -8026,20 +8082,26 @@ var OptionComponent = function OptionComponent(_ref9) {
     color: searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.color,
     weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px'
   }), React__default.createElement(SearchBar, {
+    ref: searchInputRef,
     type: 'text',
     placeholder: placeholder,
     value: searchQuery,
     onChange: handleSearchChange,
+    onKeyDown: handleKeyDown,
     "$inputColor": searchbarTextColor,
     "$placeholderColor": placeholderColor
-  })), React__default.createElement(OptionContainer, null, finalOptions.length > 0 ? finalOptions.map(function (option, id) {
+  })), React__default.createElement(OptionContainer, {
+    ref: optionContainerRef
+  }, finalOptions.length > 0 ? finalOptions.map(function (option, id) {
     return React__default.createElement(OptionItem, {
       key: option.value,
       "$optionBorder": optionBorder,
-      "$isborder": id !== finalOptions.length - 1
+      "$isborder": id !== finalOptions.length - 1,
+      "$isHighlighted": id === highlightedIndex
     }, React__default.createElement(OptionLabel, {
       htmlFor: option.value,
-      "$optionColor": optionColor
+      "$optionColor": optionColor,
+      "$isHighlighted": id === highlightedIndex
     }, React__default.createElement("input", {
       id: option.value,
       type: 'checkbox',
@@ -8334,6 +8396,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var dropdownRef = React.useRef(null);
+  var dropdownButtonRef = React.useRef(null);
   var toggleDropdown = function toggleDropdown() {
     if (disabled) return;
     var refToUse = dropdownRef.current;
@@ -8399,6 +8462,34 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
       return v !== SELECT_ALL_VALUE;
     }));
   };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (disabled) return;
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        toggleDropdown();
+        break;
+      case 'Escape':
+        if (isOpen) {
+          e.preventDefault();
+          setIsOpen(false);
+        }
+        break;
+      case 'ArrowDown':
+        if (!isOpen) {
+          e.preventDefault();
+          toggleDropdown();
+        }
+        break;
+      case 'ArrowUp':
+        if (!isOpen) {
+          e.preventDefault();
+          toggleDropdown();
+        }
+        break;
+    }
+  };
   return React__default.createElement(Container$2, null, title && React__default.createElement(TitleText, {
     "$titleColor": titleColor || themeColors.vms.text.dark,
     "$titleSize": titleSize,
@@ -8410,7 +8501,10 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
     "$height": height,
     "$hasTitle": !!title
   }, React__default.createElement(DropdownButton, {
+    ref: dropdownButtonRef,
     onClick: toggleDropdown,
+    onKeyDown: handleKeyDown,
+    tabIndex: disabled ? -1 : 0,
     "$height": height,
     "$width": width,
     "$border": border,
@@ -8581,8 +8675,9 @@ var DropdownButton$1 = styled__default.div(_templateObject3$6 || (_templateObjec
 var Options = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  padding: 5px 10px;\n  width: 100%;\n  font-size: ", ";\n  font-weight: ", ";\n  background-color: ", ";\n\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n\n"])), function (_ref14) {
   var $optionColor = _ref14.$optionColor,
     $optionSelected = _ref14.$optionSelected,
+    $isHighlighted = _ref14.$isHighlighted,
     theme = _ref14.theme;
-  return $optionSelected ? theme.vms.text.white : $optionColor || theme.vms.text.medium;
+  return $optionSelected || $isHighlighted ? theme.vms.text.white : $optionColor || theme.vms.text.medium;
 }, function (_ref15) {
   var $optionFontSize = _ref15.$optionFontSize;
   return $optionFontSize || '14px';
@@ -8592,8 +8687,9 @@ var Options = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _t
 }, function (_ref17) {
   var $optionBackgroundColor = _ref17.$optionBackgroundColor,
     $optionSelected = _ref17.$optionSelected,
+    $isHighlighted = _ref17.$isHighlighted,
     theme = _ref17.theme;
-  return $optionSelected ? theme.vms["default"].primary : $optionBackgroundColor || theme.vms["default"].tertiary;
+  return $optionSelected ? theme.vms["default"].primary : $isHighlighted ? theme.vms.hover.primary : $optionBackgroundColor || theme.vms["default"].tertiary;
 }, function (_ref18) {
   var theme = _ref18.theme;
   return theme.vms.hover.primary;
@@ -8750,10 +8846,15 @@ var SelectOption = function SelectOption(_ref37) {
   var _useState3 = React.useState(''),
     searchTerm = _useState3[0],
     setSearchTerm = _useState3[1];
+  var _useState4 = React.useState(-1),
+    highlightedIndex = _useState4[0],
+    setHighlightedIndex = _useState4[1];
+  var optionsWrapperRef = React.useRef(null);
   React.useEffect(function () {
     if (loading) {
       setIsOpen(false);
       setSearchTerm('');
+      setHighlightedIndex(-1);
     }
   }, [loading]);
   var showSearchBox = searchBox && (options.length > 5 || allowCustomValue);
@@ -8776,6 +8877,7 @@ var SelectOption = function SelectOption(_ref37) {
     });
     if (!isOpen) {
       setSearchTerm('');
+      setHighlightedIndex(-1);
     }
   };
   var dropdownRef = React.useRef(null);
@@ -8800,6 +8902,7 @@ var SelectOption = function SelectOption(_ref37) {
     }
     setIsOpen(false);
     setSearchTerm('');
+    setHighlightedIndex(-1);
   };
   var filteredOptions = searchTerm ? options.filter(function (option) {
     return option.label.toLowerCase().includes(searchTerm.toLowerCase());
@@ -8824,6 +8927,7 @@ var SelectOption = function SelectOption(_ref37) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
         setSearchTerm('');
+        setHighlightedIndex(-1);
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
@@ -8831,12 +8935,62 @@ var SelectOption = function SelectOption(_ref37) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  React.useEffect(function () {
+    if (highlightedIndex >= 0 && optionsWrapperRef.current) {
+      var children = optionsWrapperRef.current.children;
+      var offset = isCustomValue ? 1 : 0;
+      var highlightedElement = children[highlightedIndex + offset];
+      if (highlightedElement) {
+        highlightedElement.scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [highlightedIndex, isCustomValue]);
   var selectedOption = options === null || options === void 0 ? void 0 : options.find(function (option) {
     return option.value === value;
   });
   var displayLabel = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (allowCustomValue && value ? value : '');
   var handleSearchChange = function handleSearchChange(e) {
     setSearchTerm(e.target.value);
+    setHighlightedIndex(-1);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var totalOptions = isCustomValue ? filteredOptions.length + 1 : filteredOptions.length;
+    if (totalOptions === 0) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev < totalOptions - 1 ? prev + 1 : prev;
+        });
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev > 0 ? prev - 1 : -1;
+        });
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (highlightedIndex >= 0) {
+          if (isCustomValue && highlightedIndex === 0) {
+            handleCustomValueSelect();
+          } else {
+            var adjustedIndex = isCustomValue ? highlightedIndex - 1 : highlightedIndex;
+            if (adjustedIndex >= 0 && adjustedIndex < filteredOptions.length) {
+              handleOptionClick(filteredOptions[adjustedIndex].value);
+            }
+          }
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        setSearchTerm('');
+        setHighlightedIndex(-1);
+        break;
+    }
   };
   return React__default.createElement(Container, {
     "$padding": padding,
@@ -8910,13 +9064,17 @@ var SelectOption = function SelectOption(_ref37) {
     type: 'text',
     value: searchTerm,
     onChange: handleSearchChange,
+    onKeyDown: handleKeyDown,
     placeholder: placeholderText,
     "$inputColor": inputColor,
     "$placeholderColor": placeholderColor
-  })), React__default.createElement(OptionsWrapper, null, isCustomValue && React__default.createElement(Options, {
+  })), React__default.createElement(OptionsWrapper, {
+    ref: optionsWrapperRef
+  }, isCustomValue && React__default.createElement(Options, {
     "$optionSelected": false,
+    "$isHighlighted": highlightedIndex === 0,
     onClick: handleCustomValueSelect
-  }, "Add \"", normalizedSearch, "\""), filteredOptions.length ? filteredOptions.map(function (option) {
+  }, "Add \"", normalizedSearch, "\""), filteredOptions.length ? filteredOptions.map(function (option, index) {
     return React__default.createElement(Options, {
       key: option.value,
       "$optionColor": optionColor,
@@ -8926,7 +9084,8 @@ var SelectOption = function SelectOption(_ref37) {
       onClick: function onClick() {
         return handleOptionClick(option.value);
       },
-      "$optionSelected": option.value === value || allowCustomValue && option.value === displayLabel
+      "$optionSelected": option.value === value || allowCustomValue && option.value === displayLabel,
+      "$isHighlighted": isCustomValue ? index + 1 === highlightedIndex : index === highlightedIndex
     }, option.label);
   }) : !isCustomValue && React__default.createElement(NoOptions, null, NoOptionsText)))));
 };
@@ -9720,12 +9879,14 @@ var OptionContainer$1 = styled__default.div(_templateObject$h || (_templateObjec
 });
 var OptionItem$1 = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var $optionSelected = _ref2.$optionSelected,
+    $isHighlighted = _ref2.$isHighlighted,
     theme = _ref2.theme;
-  return $optionSelected ? theme.vms.text.white : theme.vms.text.medium;
+  return $optionSelected || $isHighlighted ? theme.vms.text.white : theme.vms.text.medium;
 }, function (_ref3) {
   var $optionSelected = _ref3.$optionSelected,
+    $isHighlighted = _ref3.$isHighlighted,
     theme = _ref3.theme;
-  return $optionSelected ? theme.vms["default"].primary : theme.vms.text.white;
+  return $optionSelected ? theme.vms["default"].primary : $isHighlighted ? theme.vms.hover.primary : theme.vms.text.white;
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme.vms.hover.primary;
@@ -9851,19 +10012,57 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var searchBoxRef = React.useRef(null);
+  var optionsWrapperRef = React.useRef(null);
   var _useState = React.useState(false),
     isSearchBarEnabled = _useState[0],
     setIsSearchBarEnabled = _useState[1];
+  var _useState2 = React.useState(-1),
+    highlightedIndex = _useState2[0],
+    setHighlightedIndex = _useState2[1];
   var filteredArray = options.filter(function (item) {
     return item.labelText.toLowerCase().includes(internalSearchQuery.toLowerCase().trim());
   });
   var handleSearchChange = function handleSearchChange(e) {
     var value = e.target.value.trimStart();
     setInternalSearchQuery(value);
+    setHighlightedIndex(-1);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!isSearchBarEnabled || filteredArray.length === 0) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev < filteredArray.length - 1 ? prev + 1 : prev;
+        });
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev > 0 ? prev - 1 : -1;
+        });
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (highlightedIndex >= 0 && highlightedIndex < filteredArray.length) {
+          var _selectedOption = filteredArray[highlightedIndex];
+          setInternalSearchQuery(_selectedOption.labelText);
+          setSearchQuery(_selectedOption.labelText);
+          setIsSearchBarEnabled(false);
+          setHighlightedIndex(-1);
+          if (onSelect) onSelect(_selectedOption);
+        }
+        break;
+      case 'Escape':
+        setIsSearchBarEnabled(false);
+        setHighlightedIndex(-1);
+        break;
+    }
   };
   var handleClickOutside = function handleClickOutside(event) {
     if (searchBoxRef.current && !searchBoxRef.current.contains(event.target)) {
       setIsSearchBarEnabled(false);
+      setHighlightedIndex(-1);
     }
   };
   React.useEffect(function () {
@@ -9872,6 +10071,17 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  React.useEffect(function () {
+    if (highlightedIndex >= 0 && optionsWrapperRef.current) {
+      var highlightedElement = optionsWrapperRef.current.children[highlightedIndex];
+      if (highlightedElement) {
+        highlightedElement.scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [highlightedIndex]);
   return React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '8px',
@@ -9898,6 +10108,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
     placeholder: placeholder,
     value: internalSearchQuery,
     onChange: handleSearchChange,
+    onKeyDown: handleKeyDown,
     "$inputColor": searchbarTextColor,
     "$placeholderColor": isSearchBarEnabled ? themeColors.vms.text.light : themeColors.vms.text.medium,
     disabled: !!searchQuery
@@ -9917,16 +10128,20 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref16) {
     "$fontSize": '12px',
     "$fontWeight": '400',
     "$color": themeColors.vms.text.light
-  }, t('Showing_results') + " (" + filteredArray.length + " of " + (options === null || options === void 0 ? void 0 : options.length) + ")")), React__default.createElement(OptionsWrapper$1, null, filteredArray.length > 0 ? filteredArray.map(function (option) {
+  }, t('Showing_results') + " (" + filteredArray.length + " of " + (options === null || options === void 0 ? void 0 : options.length) + ")")), React__default.createElement(OptionsWrapper$1, {
+    ref: optionsWrapperRef
+  }, filteredArray.length > 0 ? filteredArray.map(function (option, index) {
     return React__default.createElement(OptionItem$1, {
       key: option.value,
-      "$optionSelected": option.value === selectedOption
+      "$optionSelected": option.value === selectedOption,
+      "$isHighlighted": index === highlightedIndex
     }, React__default.createElement(OptionLabel$1, {
       htmlFor: option.value,
       onClick: function onClick() {
         setInternalSearchQuery(option.labelText);
         setSearchQuery(option.labelText);
         setIsSearchBarEnabled(false);
+        setHighlightedIndex(-1);
         if (onSelect) onSelect(option);
       }
     }, option.labelText));