labsense-ui-kit 1.3.63 → 1.3.65

package/dist/index.modern.js

@@ -8003,6 +8003,14 @@ var OptionComponent = function OptionComponent(_ref11) {
     setHighlightedIndex = _useState2[1];
   var optionContainerRef = useRef(null);
   var searchInputRef = useRef(null);
+  useEffect(function () {
+    if (searchBox && searchInputRef.current) {
+      setTimeout(function () {
+        var _searchInputRef$curre;
+        (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+      }, 50);
+    }
+  }, [searchBox]);
   var handleSearchChange = function handleSearchChange(e) {
     setSearchQuery(e.target.value.trimStart());
     setHighlightedIndex(-1);
@@ -8723,7 +8731,7 @@ var LabelText$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _tagged
   return $disabled ? theme.vms.text.medium : $color || theme.vms.text.medium;
 });
 var NoOptions = styled(Span)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 12px;\n  font-size: 14px;\n  font-weight: 400;\n"])));
-var DropdownMenu$1 = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  position: absolute;\n  z-index: 2;\n  ", "\n  ", "\n\n  ", "\n"])), function (_ref24) {
+var DropdownMenu$1 = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  position: absolute;\n  z-index: 2;\n  outline: none;\n  ", "\n  ", "\n\n  ", "\n"])), function (_ref24) {
   var theme = _ref24.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref25) {
@@ -8846,6 +8854,8 @@ var SelectOption = function SelectOption(_ref37) {
     highlightedIndex = _useState4[0],
     setHighlightedIndex = _useState4[1];
   var optionsWrapperRef = useRef(null);
+  var dropdownMenuRef = useRef(null);
+  var showSearchBox = searchBox && (options.length > 5 || allowCustomValue);
   useEffect(function () {
     if (loading) {
       setIsOpen(false);
@@ -8853,7 +8863,15 @@ var SelectOption = function SelectOption(_ref37) {
       setHighlightedIndex(-1);
     }
   }, [loading]);
-  var showSearchBox = searchBox && (options.length > 5 || allowCustomValue);
+  useEffect(function () {
+    if (isOpen) {
+      if (showSearchBox && searchInputRef.current) {
+        searchInputRef.current.focus();
+      } else if (dropdownMenuRef.current) {
+        dropdownMenuRef.current.focus();
+      }
+    }
+  }, [isOpen, showSearchBox]);
   var toggleDropdown = function toggleDropdown() {
     var refToUse = (positionRef === null || positionRef === void 0 ? void 0 : positionRef.current) || dropdownRef.current;
     if (refToUse) {
@@ -8959,13 +8977,14 @@ var SelectOption = function SelectOption(_ref37) {
       case 'ArrowDown':
         e.preventDefault();
         setHighlightedIndex(function (prev) {
-          return prev < totalOptions - 1 ? prev + 1 : prev;
+          var newIndex = prev < totalOptions - 1 ? prev + 1 : prev;
+          return prev === -1 ? 0 : newIndex;
         });
         break;
       case 'ArrowUp':
         e.preventDefault();
         setHighlightedIndex(function (prev) {
-          return prev > 0 ? prev - 1 : -1;
+          return prev > 0 ? prev - 1 : 0;
         });
         break;
       case 'Enter':
@@ -9039,6 +9058,9 @@ var SelectOption = function SelectOption(_ref37) {
     size: 7,
     color: color || themeColors.vms.text.medium
   })), isOpen && React.createElement(DropdownMenu$1, {
+    ref: dropdownMenuRef,
+    tabIndex: -1,
+    onKeyDown: !showSearchBox ? handleKeyDown : undefined,
     "$width": width,
     "$menuBackground": menuBackground,
     "$optionsBorderRadius": optionsBorderRadius,