@heroui/autocomplete 2.3.11 → 2.3.14

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -15,10 +15,10 @@ npm i @heroui/autocomplete
 ## Contribution
 
 Yes please! See the
-[contributing guidelines](https://github.com/frontio-ai/heroui/blob/master/CONTRIBUTING.md)
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
 for details.
 
 ## License
 
 This project is licensed under the terms of the
-[MIT license](https://github.com/frontio-ai/heroui/blob/master/LICENSE).
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/autocomplete.d.mts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { UseAutocompleteProps } from './use-autocomplete.mjs';
+import 'tailwind-variants';
+import '@react-stately/combobox';
+import '@heroui/system';
+import '@heroui/theme';
+import '@heroui/react-utils';
+import '@react-types/combobox';
+import '@heroui/popover';
+import '@heroui/listbox';
+import '@heroui/input';
+import '@heroui/scroll-shadow';
+import '@heroui/button';
+import '@react-types/shared';
+
+interface Props<T> extends UseAutocompleteProps<T> {
+}
+type AutocompleteProps<T extends object = object> = Props<T>;
+declare const Autocomplete: <T extends object>(props: AutocompleteProps<T>) => ReactElement;
+
+export { type AutocompleteProps, Autocomplete as default };

package/dist/autocomplete.d.ts

@@ -18,4 +18,4 @@ interface Props<T> extends UseAutocompleteProps<T> {
 type AutocompleteProps<T extends object = object> = Props<T>;
 declare const Autocomplete: <T extends object>(props: AutocompleteProps<T>) => ReactElement;
 
-export { AutocompleteProps, Autocomplete as default };
+export { type AutocompleteProps, Autocomplete as default };

package/dist/autocomplete.js

@@ -206,8 +206,7 @@ function useAutocomplete(originalProps) {
   const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
   const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
   (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!inputRef.current)
-      return;
+    if (!inputRef.current) return;
     const key = inputRef.current.value;
     const item = state.collection.getItem(key);
     if (item && state.inputValue !== item.textValue) {
@@ -246,10 +245,9 @@ function useAutocomplete(originalProps) {
     () => (0, import_theme.autocomplete)({
       ...variantProps,
       isClearable,
-      disableAnimation,
-      className
+      disableAnimation
     }),
-    [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation, className]
+    [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation]
   );
   const getBaseProps = () => ({
     "data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
@@ -271,6 +269,7 @@ function useAutocomplete(originalProps) {
     var _a2, _b2;
     return {
       ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
+      // disable original focus and state toggle from react aria
       onPressStart: () => {
         var _a3;
         (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
@@ -337,6 +336,8 @@ function useAutocomplete(originalProps) {
         })
       },
       shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
+      // when the popover is open, the focus should be on input instead of dialog
+      // therefore, we skip dialog focus here
       disableDialogFocus: true
     };
   };
@@ -443,5 +444,3 @@ var Autocomplete = (0, import_system2.forwardRef)(function Autocomplete2(props,
   ] });
 });
 var autocomplete_default = Autocomplete;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});

package/dist/autocomplete.mjs

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

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

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

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

@@ -173,8 +173,7 @@ function useAutocomplete(originalProps) {
   const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
   const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
   useSafeLayoutEffect(() => {
-    if (!inputRef.current)
-      return;
+    if (!inputRef.current) return;
     const key = inputRef.current.value;
     const item = state.collection.getItem(key);
     if (item && state.inputValue !== item.textValue) {
@@ -213,10 +212,9 @@ function useAutocomplete(originalProps) {
     () => autocomplete({
       ...variantProps,
       isClearable,
-      disableAnimation,
-      className
+      disableAnimation
     }),
-    [objectToDeps(variantProps), isClearable, disableAnimation, className]
+    [objectToDeps(variantProps), isClearable, disableAnimation]
   );
   const getBaseProps = () => ({
     "data-invalid": dataAttr(isInvalid),
@@ -238,6 +236,7 @@ function useAutocomplete(originalProps) {
     var _a2, _b2;
     return {
       ...mergeProps(buttonProps, slotsProps.clearButtonProps),
+      // disable original focus and state toggle from react aria
       onPressStart: () => {
         var _a3;
         (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
@@ -304,6 +303,8 @@ function useAutocomplete(originalProps) {
         })
       },
       shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
+      // when the popover is open, the focus should be on input instead of dialog
+      // therefore, we skip dialog focus here
       disableDialogFocus: true
     };
   };

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+export { ListboxItem as AutocompleteItem, ListboxItemProps as AutocompleteItemProps, ListboxSection as AutocompleteSection, ListboxSectionProps as AutocompleteSectionProps } from '@heroui/listbox';
+import { MenuTriggerAction as MenuTriggerAction$1 } from '@react-types/combobox';
+export { default as Autocomplete, AutocompleteProps } from './autocomplete.mjs';
+export { useAutocomplete } from './use-autocomplete.mjs';
+import 'react';
+import 'tailwind-variants';
+import '@react-stately/combobox';
+import '@heroui/system';
+import '@heroui/theme';
+import '@heroui/react-utils';
+import '@heroui/popover';
+import '@heroui/input';
+import '@heroui/scroll-shadow';
+import '@heroui/button';
+import '@react-types/shared';
+
+type MenuTriggerAction = MenuTriggerAction$1 | undefined;
+
+export type { MenuTriggerAction };

package/dist/index.d.ts

@@ -16,4 +16,4 @@ import '@react-types/shared';
 
 type MenuTriggerAction = MenuTriggerAction$1 | undefined;
 
-export { MenuTriggerAction };
+export type { MenuTriggerAction };

package/dist/index.js

@@ -19,14 +19,14 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Autocomplete: () => autocomplete_default,
   AutocompleteItem: () => import_listbox2.ListboxItem,
   AutocompleteSection: () => import_listbox2.ListboxSection,
   useAutocomplete: () => useAutocomplete
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_listbox2 = require("@heroui/listbox");
 
 // src/autocomplete.tsx
@@ -212,8 +212,7 @@ function useAutocomplete(originalProps) {
   const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
   const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
   (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!inputRef.current)
-      return;
+    if (!inputRef.current) return;
     const key = inputRef.current.value;
     const item = state.collection.getItem(key);
     if (item && state.inputValue !== item.textValue) {
@@ -252,10 +251,9 @@ function useAutocomplete(originalProps) {
     () => (0, import_theme.autocomplete)({
       ...variantProps,
       isClearable,
-      disableAnimation,
-      className
+      disableAnimation
     }),
-    [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation, className]
+    [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation]
   );
   const getBaseProps = () => ({
     "data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
@@ -277,6 +275,7 @@ function useAutocomplete(originalProps) {
     var _a2, _b2;
     return {
       ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
+      // disable original focus and state toggle from react aria
       onPressStart: () => {
         var _a3;
         (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
@@ -343,6 +342,8 @@ function useAutocomplete(originalProps) {
         })
       },
       shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
+      // when the popover is open, the focus should be on input instead of dialog
+      // therefore, we skip dialog focus here
       disableDialogFocus: true
     };
   };

package/dist/index.mjs

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

package/dist/use-autocomplete.d.mts

@@ -0,0 +1,229 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as _react_stately_combobox from '@react-stately/combobox';
+import { FilterFn } from '@react-stately/combobox';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as _heroui_system from '@heroui/system';
+import { PropGetter, DOMAttributes, HTMLHeroUIProps } from '@heroui/system';
+import { AutocompleteVariantProps, SlotsToClasses, AutocompleteSlots } from '@heroui/theme';
+import { ReactRef } from '@heroui/react-utils';
+import { ComboBoxProps } from '@react-types/combobox';
+import { PopoverProps } from '@heroui/popover';
+import { ListboxProps } from '@heroui/listbox';
+import { InputProps } from '@heroui/input';
+import { ScrollShadowProps } from '@heroui/scroll-shadow';
+import { ButtonProps } from '@heroui/button';
+import { AsyncLoadable } from '@react-types/shared';
+
+interface Props<T> extends Omit<HTMLHeroUIProps<"input">, keyof ComboBoxProps<T>> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    /**
+     * The ref to the scroll element. Useful when having async loading of items.
+     */
+    scrollRef?: ReactRef<HTMLElement | null>;
+    /**
+     * The icon that represents the autocomplete open state. Usually a chevron icon.
+     */
+    selectorIcon?: ReactNode;
+    /**
+     * The icon that represents the clear button. Usually a cross icon.
+     */
+    clearIcon?: ReactNode;
+    /**
+     * Whether to display a top and bottom arrow indicators when the listbox is scrollable.
+     * @default true
+     */
+    showScrollIndicators?: boolean;
+    /**
+     * Props to be passed to the scroll shadow component. This component
+     * adds a shadow to the top and bottom of the listbox when it is scrollable.
+     *
+     * @default { hideScrollBar: true, offset: 15 }
+     */
+    scrollShadowProps?: Partial<ScrollShadowProps>;
+    /**
+     * Props to be passed to the popover component.
+     *
+     * @default { placement: "bottom", triggerScaleOnOpen: false, offset: 5 }
+     */
+    popoverProps?: Partial<PopoverProps>;
+    /**
+     * Props to be passed to the listbox component.
+     *
+     * @default { disableAnimation: false }
+     */
+    listboxProps?: Partial<ListboxProps>;
+    /**
+     * Props to be passed to the input component.
+     *
+     * @default { disableAnimation: false }
+     */
+    inputProps?: Partial<InputProps>;
+    /**
+     * Whether the clear button should be hidden.
+     * @default false
+     * @deprecated Use `isClearable` instead.
+     */
+    disableClearable?: boolean;
+    /**
+     * Props to be passed to the selector button component.
+     * @default { size: "sm", variant: "light", radius: "full", isIconOnly: true }
+     */
+    selectorButtonProps?: Partial<ButtonProps>;
+    /**
+     * Props to be passed to the clear button component.
+     * @default { size: "sm", variant: "light", radius: "full", isIconOnly: true }
+     */
+    clearButtonProps?: Partial<ButtonProps>;
+    /**
+     * The filter options to use when filtering items based on user input.
+     * @default {sensitivity: 'base'}
+     */
+    filterOptions?: Intl.CollatorOptions;
+    /**
+     * Whether the autocomplete allows the menu to be open when the collection is empty.
+     * @default true
+     */
+    allowsEmptyCollection?: boolean;
+    /**
+     * Whether the autocomplete menu should close on blur.
+     * @default true
+     * */
+    shouldCloseOnBlur?: boolean;
+    /**
+     * Classes object to style the autocomplete and its children.
+     */
+    classNames?: SlotsToClasses<AutocompleteSlots>;
+    /**
+     * The filter function used to determine if a option should be included in the autocomplete list.
+     * */
+    defaultFilter?: FilterFn;
+    /**
+     * Callback fired when the select menu is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Whether to enable virtualization of the listbox items.
+     * By default, virtualization is automatically enabled when the number of items is greater than 50.
+     * @default undefined
+     */
+    isVirtualized?: boolean;
+}
+type UseAutocompleteProps<T> = Props<T> & Omit<InputProps, "children" | "value" | "isClearable" | "defaultValue" | "classNames"> & ComboBoxProps<T> & AsyncLoadable & AutocompleteVariantProps & {
+    /**
+     * The height of each item in the listbox.
+     * This is required for virtualized listboxes to calculate the height of each item.
+     */
+    itemHeight?: number;
+    /**
+     * The max height of the listbox (which will be rendered in a popover).
+     * This is required for virtualized listboxes to set the maximum height of the listbox.
+     */
+    maxListboxHeight?: number;
+};
+declare function useAutocomplete<T extends object>(originalProps: UseAutocompleteProps<T>): {
+    Component: _heroui_system.As<any>;
+    inputRef: react.RefObject<HTMLInputElement>;
+    label: ReactNode;
+    state: _react_stately_combobox.ComboBoxState<T>;
+    slots: {
+        base: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        listboxWrapper: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        listbox: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        popoverContent: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        endContentWrapper: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        clearButton: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        selectorButton: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        listboxWrapper: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        listbox: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        popoverContent: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        endContentWrapper: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        clearButton: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        selectorButton: (slotProps?: ({
+            isClearable?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            disableSelectorIconRotation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
+    isLoading: boolean | undefined;
+    clearIcon: ReactNode;
+    isOpen: boolean;
+    endContent: ReactNode;
+    isClearable: boolean | undefined;
+    disableAnimation: boolean;
+    allowsCustomValue: boolean;
+    selectorIcon: ReactNode;
+    getBaseProps: PropGetter;
+    getInputProps: () => InputProps;
+    getListBoxProps: () => ListboxProps;
+    getPopoverProps: (props?: DOMAttributes) => PopoverProps;
+    getEmptyPopoverProps: () => {
+        ref: react.RefObject<HTMLDivElement>;
+        className: string;
+    };
+    getClearButtonProps: () => ButtonProps;
+    getSelectorButtonProps: () => ButtonProps;
+    getListBoxWrapperProps: PropGetter;
+    getEndContentWrapperProps: PropGetter;
+};
+type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>;
+
+export { type UseAutocompleteProps, type UseAutocompleteReturn, useAutocomplete };

package/dist/use-autocomplete.d.ts

@@ -134,73 +134,73 @@ declare function useAutocomplete<T extends object>(originalProps: UseAutocomplet
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listboxWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listbox: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         popoverContent: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         endContentWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         clearButton: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         selectorButton: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {
         base: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listboxWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         listbox: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         popoverContent: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         endContentWrapper: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         clearButton: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         selectorButton: (slotProps?: ({
             isClearable?: boolean | undefined;
             disableAnimation?: boolean | undefined;
             disableSelectorIconRotation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {};
     classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
     isLoading: boolean | undefined;
@@ -211,9 +211,9 @@ declare function useAutocomplete<T extends object>(originalProps: UseAutocomplet
     disableAnimation: boolean;
     allowsCustomValue: boolean;
     selectorIcon: ReactNode;
-    getBaseProps: PropGetter<Record<string, unknown>, DOMAttributes<_heroui_system.DOMElement>>;
+    getBaseProps: PropGetter;
     getInputProps: () => InputProps;
-    getListBoxProps: () => ListboxProps<object>;
+    getListBoxProps: () => ListboxProps;
     getPopoverProps: (props?: DOMAttributes) => PopoverProps;
     getEmptyPopoverProps: () => {
         ref: react.RefObject<HTMLDivElement>;
@@ -221,9 +221,9 @@ declare function useAutocomplete<T extends object>(originalProps: UseAutocomplet
     };
     getClearButtonProps: () => ButtonProps;
     getSelectorButtonProps: () => ButtonProps;
-    getListBoxWrapperProps: PropGetter<Record<string, unknown>, DOMAttributes<_heroui_system.DOMElement>>;
-    getEndContentWrapperProps: PropGetter<Record<string, unknown>, DOMAttributes<_heroui_system.DOMElement>>;
+    getListBoxWrapperProps: PropGetter;
+    getEndContentWrapperProps: PropGetter;
 };
 type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>;
 
-export { UseAutocompleteProps, UseAutocompleteReturn, useAutocomplete };
+export { type UseAutocompleteProps, type UseAutocompleteReturn, useAutocomplete };

package/dist/use-autocomplete.js

@@ -196,8 +196,7 @@ function useAutocomplete(originalProps) {
   const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
   const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
   (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!inputRef.current)
-      return;
+    if (!inputRef.current) return;
     const key = inputRef.current.value;
     const item = state.collection.getItem(key);
     if (item && state.inputValue !== item.textValue) {
@@ -236,10 +235,9 @@ function useAutocomplete(originalProps) {
     () => (0, import_theme.autocomplete)({
       ...variantProps,
       isClearable,
-      disableAnimation,
-      className
+      disableAnimation
     }),
-    [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation, className]
+    [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation]
   );
   const getBaseProps = () => ({
     "data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
@@ -261,6 +259,7 @@ function useAutocomplete(originalProps) {
     var _a2, _b2;
     return {
       ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
+      // disable original focus and state toggle from react aria
       onPressStart: () => {
         var _a3;
         (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
@@ -327,6 +326,8 @@ function useAutocomplete(originalProps) {
         })
       },
       shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
+      // when the popover is open, the focus should be on input instead of dialog
+      // therefore, we skip dialog focus here
       disableDialogFocus: true
     };
   };

package/dist/use-autocomplete.mjs

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@heroui/autocomplete",
-  "version": "2.3.11",
+  "version": "2.3.14",
   "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"
   ],
-  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "author": "HeroUI <support@heroui.com>",
   "homepage": "https://heroui.com",
   "license": "MIT",
   "main": "dist/index.js",
@@ -25,35 +25,35 @@
     "url": "https://github.com/heroui-inc/heroui/issues"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.0",
-    "@heroui/theme": ">=2.4.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.11.0",
-    "@react-aria/focus": "3.19.0",
-    "@react-aria/i18n": "3.12.4",
-    "@react-aria/interactions": "3.22.5",
-    "@react-aria/utils": "3.26.0",
-    "@react-aria/visually-hidden": "3.8.18",
-    "@react-stately/combobox": "3.10.1",
-    "@react-types/combobox": "3.13.1",
-    "@react-types/shared": "3.26.0",
-    "@heroui/form": "2.1.9",
-    "@heroui/aria-utils": "2.2.8",
-    "@heroui/button": "2.2.10",
-    "@heroui/input": "2.4.10",
-    "@heroui/listbox": "2.3.10",
-    "@heroui/popover": "2.3.10",
-    "@heroui/react-utils": "2.1.4",
-    "@heroui/scroll-shadow": "2.3.6",
-    "@heroui/shared-icons": "2.1.2",
-    "@heroui/shared-utils": "2.1.3",
-    "@heroui/spinner": "2.2.7",
-    "@heroui/use-aria-button": "2.2.5",
-    "@heroui/use-safe-layout-effect": "2.1.2"
+    "@react-aria/combobox": "3.11.1",
+    "@react-aria/focus": "3.19.1",
+    "@react-aria/i18n": "3.12.5",
+    "@react-aria/interactions": "3.23.0",
+    "@react-aria/utils": "3.27.0",
+    "@react-aria/visually-hidden": "3.8.19",
+    "@react-stately/combobox": "3.10.2",
+    "@react-types/combobox": "3.13.2",
+    "@react-types/shared": "3.27.0",
+    "@heroui/form": "2.1.12",
+    "@heroui/aria-utils": "2.2.11",
+    "@heroui/button": "2.2.13",
+    "@heroui/input": "2.4.13",
+    "@heroui/listbox": "2.3.13",
+    "@heroui/popover": "2.3.13",
+    "@heroui/react-utils": "2.1.7",
+    "@heroui/scroll-shadow": "2.3.9",
+    "@heroui/shared-icons": "2.1.5",
+    "@heroui/shared-utils": "2.1.6",
+    "@heroui/spinner": "2.2.10",
+    "@heroui/use-aria-button": "2.2.8",
+    "@heroui/use-safe-layout-effect": "2.1.5"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",