@heroui/autocomplete 2.3.21-beta.2 → 2.3.21

package/dist/autocomplete.js

@@ -215,12 +215,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   (0, import_react.useEffect)(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  (0, import_react.useEffect)(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   (0, import_react.useEffect)(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {

package/dist/autocomplete.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   autocomplete_default
-} from "./chunk-DNIGSRME.mjs";
-import "./chunk-OHYOYGT2.mjs";
+} from "./chunk-R4R544ZH.mjs";
+import "./chunk-ORFKRCF3.mjs";
 export {
   autocomplete_default as default
 };

package/dist/{chunk-OHYOYGT2.mjs → chunk-ORFKRCF3.mjs}

@@ -182,12 +182,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   useEffect(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  useEffect(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   useEffect(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {

package/dist/{chunk-DNIGSRME.mjs → chunk-R4R544ZH.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useAutocomplete
-} from "./chunk-OHYOYGT2.mjs";
+} from "./chunk-ORFKRCF3.mjs";
 
 // src/autocomplete.tsx
 import { forwardRef } from "@heroui/system";

package/dist/index.js

@@ -221,12 +221,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   (0, import_react.useEffect)(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  (0, import_react.useEffect)(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   (0, import_react.useEffect)(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {

package/dist/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   autocomplete_default
-} from "./chunk-DNIGSRME.mjs";
+} from "./chunk-R4R544ZH.mjs";
 import {
   useAutocomplete
-} from "./chunk-OHYOYGT2.mjs";
+} from "./chunk-ORFKRCF3.mjs";
 
 // src/index.ts
 import { ListboxItem, ListboxSection } from "@heroui/listbox";

package/dist/use-autocomplete.js

@@ -205,12 +205,30 @@ function useAutocomplete(originalProps) {
     }
   }, [inputRef.current]);
   (0, import_react.useEffect)(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
+    let keyToFocus;
+    if (state.selectedKey !== null && state.collection.getItem(state.selectedKey) && !state.disabledKeys.has(state.selectedKey)) {
+      keyToFocus = state.selectedKey;
+    } else {
+      let firstAvailableKey = state.collection.getFirstKey();
+      while (firstAvailableKey && state.disabledKeys.has(firstAvailableKey)) {
+        firstAvailableKey = state.collection.getKeyAfter(firstAvailableKey);
+      }
+      keyToFocus = firstAvailableKey;
+    }
+    state.selectionManager.setFocusedKey(keyToFocus);
+  }, [state.collection, state.disabledKeys, state.selectedKey]);
+  (0, import_react.useEffect)(() => {
+    if (state.isOpen && popoverRef.current && listBoxRef.current) {
+      let selectedItem = listBoxRef.current.querySelector("[aria-selected=true] [data-label=true]");
+      let scrollShadow = scrollShadowRef.current;
+      if (selectedItem && scrollShadow && selectedItem.parentElement) {
+        let scrollShadowRect = scrollShadow == null ? void 0 : scrollShadow.getBoundingClientRect();
+        let scrollShadowHeight = scrollShadowRect.height;
+        scrollShadow.scrollTop = selectedItem.parentElement.offsetTop - scrollShadowHeight / 2 + selectedItem.parentElement.clientHeight / 2;
+        state.selectionManager.setFocusedKey(state.selectedKey);
+      }
     }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
+  }, [state.isOpen, disableAnimation]);
   (0, import_react.useEffect)(() => {
     if (isOpen) {
       if (popoverRef.current && inputWrapperRef.current) {

package/dist/use-autocomplete.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   useAutocomplete
-} from "./chunk-OHYOYGT2.mjs";
+} from "./chunk-ORFKRCF3.mjs";
 export {
   useAutocomplete
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/autocomplete",
-  "version": "2.3.21-beta.2",
+  "version": "2.3.21",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
@@ -25,35 +25,35 @@
     "url": "https://github.com/heroui-inc/heroui/issues"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.16-beta.0",
-    "@heroui/theme": ">=2.4.16-beta.0",
+    "@heroui/system": ">=2.4.7",
+    "@heroui/theme": ">=2.4.6",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
-    "@react-aria/combobox": "3.12.2",
-    "@react-aria/focus": "3.20.2",
-    "@react-aria/i18n": "3.12.8",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/utils": "3.28.2",
-    "@react-aria/visually-hidden": "3.8.22",
-    "@react-stately/combobox": "3.10.4",
-    "@react-types/combobox": "3.13.4",
-    "@react-types/shared": "3.29.0",
-    "@heroui/form": "2.1.19-beta.2",
-    "@heroui/aria-utils": "2.2.17-beta.2",
-    "@heroui/button": "2.2.20-beta.2",
-    "@heroui/input": "2.4.20-beta.2",
-    "@heroui/listbox": "2.3.19-beta.2",
-    "@heroui/popover": "2.3.20-beta.2",
-    "@heroui/react-utils": "2.1.11-beta.0",
-    "@heroui/scroll-shadow": "2.3.14-beta.2",
-    "@heroui/shared-icons": "2.1.8-beta.0",
-    "@heroui/shared-utils": "2.1.10-beta.0",
-    "@heroui/spinner": "2.2.17-beta.2",
-    "@heroui/use-aria-button": "2.2.14-beta.0",
-    "@heroui/use-safe-layout-effect": "2.1.8-beta.0"
+    "@react-aria/combobox": "3.12.3",
+    "@react-aria/focus": "3.20.3",
+    "@react-aria/i18n": "3.12.9",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/utils": "3.29.0",
+    "@react-aria/visually-hidden": "3.8.23",
+    "@react-stately/combobox": "3.10.5",
+    "@react-types/combobox": "3.13.5",
+    "@react-types/shared": "3.29.1",
+    "@heroui/aria-utils": "2.2.17",
+    "@heroui/button": "2.2.20",
+    "@heroui/input": "2.4.20",
+    "@heroui/listbox": "2.3.19",
+    "@heroui/popover": "2.3.20",
+    "@heroui/form": "2.1.19",
+    "@heroui/react-utils": "2.1.10",
+    "@heroui/scroll-shadow": "2.3.13",
+    "@heroui/shared-icons": "2.1.8",
+    "@heroui/shared-utils": "2.1.9",
+    "@heroui/spinner": "2.2.17",
+    "@heroui/use-aria-button": "2.2.14",
+    "@heroui/use-safe-layout-effect": "2.1.7"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",