@yamada-ui/autocomplete 0.1.11 → 0.2.0

package/dist/autocomplete-create.d.ts

@@ -3,7 +3,13 @@ import { HTMLUIProps } from '@yamada-ui/core';
 import { ReactElement } from 'react';
 
 type AutocompleteCreateOptions = {
+    /**
+     * The autocomplete create option icon to use.
+     */
     icon?: ReactElement;
+    /**
+     * The label of the autocomplete create option.
+     */
     children?: string | ((inputValue: string) => string);
 };
 type AutocompleteCreateProps = Omit<HTMLUIProps<'li'>, 'children'> & AutocompleteCreateOptions;

package/dist/autocomplete-create.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteCreate
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   AutocompleteCreate
 };

package/dist/autocomplete-empty.d.ts

@@ -3,7 +3,13 @@ import { HTMLUIProps } from '@yamada-ui/core';
 import { ReactElement } from 'react';
 
 type AutocompleteEmptyOptions = {
+    /**
+     * The autocomplete empty option icon to use.
+     */
     icon?: ReactElement;
+    /**
+     * The label of the autocomplete empty option.
+     */
     children?: string;
 };
 type AutocompleteEmptyProps = Omit<HTMLUIProps<'li'>, 'children'> & AutocompleteEmptyOptions;

package/dist/autocomplete-empty.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteEmpty
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   AutocompleteEmpty
 };

package/dist/autocomplete-icon.mjs

@@ -2,7 +2,7 @@ import {
   AutocompleteClearIcon,
   AutocompleteIcon,
   AutocompleteItemIcon
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   AutocompleteClearIcon,
   AutocompleteIcon,

package/dist/autocomplete-list.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteList
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   AutocompleteList
 };

package/dist/autocomplete-option-group.d.ts

@@ -1,6 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps } from '@yamada-ui/core';
-import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-4995431c.js';
+import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-cbe9b443.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@yamada-ui/form-control';

package/dist/autocomplete-option-group.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteOptionGroup
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   AutocompleteOptionGroup
 };

package/dist/autocomplete-option.d.ts

@@ -1,6 +1,6 @@
 import '@yamada-ui/core';
 import 'react';
-export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-4995431c.js';
+export { A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-cbe9b443.js';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';

package/dist/autocomplete-option.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteOption
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   AutocompleteOption
 };

package/dist/autocomplete.d.ts

@@ -2,7 +2,7 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
 import { AutocompleteIconProps } from './autocomplete-icon.js';
 import { AutocompleteListProps } from './autocomplete-list.js';
-import { b as UseAutocompleteProps } from './use-autocomplete-4995431c.js';
+import { b as UseAutocompleteProps } from './use-autocomplete-cbe9b443.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
@@ -11,11 +11,29 @@ import '@yamada-ui/select';
 import '@yamada-ui/utils';
 
 type AutocompleteOptions = {
+    /**
+     * The border color when the input is focused.
+     */
     focusBorderColor?: string;
+    /**
+     * The border color when the input is invalid.
+     */
     errorBorderColor?: string;
+    /**
+     * Props for autocomplete container element.
+     */
     containerProps?: Omit<HTMLUIProps<'div'>, 'children'>;
+    /**
+     * Props for autocomplete list element.
+     */
     listProps?: Omit<AutocompleteListProps, 'children'>;
+    /**
+     * Props for autocomplete input element.
+     */
     inputProps?: HTMLUIProps<'input'>;
+    /**
+     * Props for autocomplete icon element.
+     */
     iconProps?: AutocompleteIconProps;
 };
 type AutocompleteProps = ThemeProps<'Select'> & Omit<UseAutocompleteProps<string>, 'maxSelectedValues' | 'omitSelectedValues'> & AutocompleteOptions;

package/dist/autocomplete.js

@@ -380,8 +380,7 @@ var useAutocomplete = ({
   closeOnBlur = true,
   closeOnEsc = true,
   createOption = false,
-  createOrder = "first",
-  createSecondOrder = "first",
+  insertPositionOnCreate = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
   placement = "bottom-start",
@@ -420,6 +419,13 @@ var useAutocomplete = ({
   const isCreate = focusedIndex === -2 && createOption;
   const isMulti = (0, import_utils6.isArray)(value);
   const isEmptyValue = !isMulti ? !value : !value.length;
+  const [firstInsertPositionOnCreate, secondInsertPositionOnCreate] = (0, import_react.useMemo)(() => {
+    if ((0, import_utils6.isArray)(insertPositionOnCreate)) {
+      return insertPositionOnCreate;
+    } else {
+      return [insertPositionOnCreate, "first"];
+    }
+  }, [insertPositionOnCreate]);
   if (createOption && !(0, import_utils6.isUndefined)(children)) {
     console.warn(
       `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
@@ -703,21 +709,21 @@ var useAutocomplete = ({
     let newOptions = [];
     if (options)
       newOptions = options;
-    if (createOrder === "first") {
+    if (firstInsertPositionOnCreate === "first") {
       newOptions = [newOption, ...newOptions];
-    } else if (createOrder === "last") {
+    } else if (firstInsertPositionOnCreate === "last") {
       newOptions = [...newOptions, newOption];
     } else {
-      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      const i = newOptions.findIndex(({ label }) => label === firstInsertPositionOnCreate);
       if (i !== -1 && (0, import_utils6.isArray)(newOptions[i].value)) {
-        if (createSecondOrder === "first") {
+        if (secondInsertPositionOnCreate === "first") {
           newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
           newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
-          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${createOrder}' specified in createOrder does not exist in the option group.`
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionOnCreate}' specified in insertPositionOnCreate does not exist in the option group.`
         );
       }
     }
@@ -727,7 +733,16 @@ var useAutocomplete = ({
     const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
     (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
-  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+  }, [
+    inputValue,
+    options,
+    firstInsertPositionOnCreate,
+    onChange,
+    rebirthOptions,
+    rest,
+    secondInsertPositionOnCreate,
+    isMulti
+  ]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");

package/dist/autocomplete.mjs

@@ -1,6 +1,6 @@
 import {
   Autocomplete
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   Autocomplete
 };

package/dist/{chunk-YQULJUTP.mjs → chunk-JDV5RP6W.mjs}

@@ -34,6 +34,7 @@ import {
 import {
   useCallback,
   useEffect,
+  useMemo as useMemo2,
   useRef as useRef2,
   useState
 } from "react";
@@ -729,8 +730,7 @@ var useAutocomplete = ({
   closeOnBlur = true,
   closeOnEsc = true,
   createOption = false,
-  createOrder = "first",
-  createSecondOrder = "first",
+  insertPositionOnCreate = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
   placement = "bottom-start",
@@ -769,6 +769,13 @@ var useAutocomplete = ({
   const isCreate = focusedIndex === -2 && createOption;
   const isMulti = isArray(value);
   const isEmptyValue = !isMulti ? !value : !value.length;
+  const [firstInsertPositionOnCreate, secondInsertPositionOnCreate] = useMemo2(() => {
+    if (isArray(insertPositionOnCreate)) {
+      return insertPositionOnCreate;
+    } else {
+      return [insertPositionOnCreate, "first"];
+    }
+  }, [insertPositionOnCreate]);
   if (createOption && !isUndefined(children)) {
     console.warn(
       `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
@@ -1052,21 +1059,21 @@ var useAutocomplete = ({
     let newOptions = [];
     if (options)
       newOptions = options;
-    if (createOrder === "first") {
+    if (firstInsertPositionOnCreate === "first") {
       newOptions = [newOption, ...newOptions];
-    } else if (createOrder === "last") {
+    } else if (firstInsertPositionOnCreate === "last") {
       newOptions = [...newOptions, newOption];
     } else {
-      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      const i = newOptions.findIndex(({ label }) => label === firstInsertPositionOnCreate);
       if (i !== -1 && isArray(newOptions[i].value)) {
-        if (createSecondOrder === "first") {
+        if (secondInsertPositionOnCreate === "first") {
           newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
           newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
-          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${createOrder}' specified in createOrder does not exist in the option group.`
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionOnCreate}' specified in insertPositionOnCreate does not exist in the option group.`
         );
       }
     }
@@ -1076,7 +1083,16 @@ var useAutocomplete = ({
     const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
     (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
-  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+  }, [
+    inputValue,
+    options,
+    firstInsertPositionOnCreate,
+    onChange,
+    rebirthOptions,
+    rest,
+    secondInsertPositionOnCreate,
+    isMulti
+  ]);
   const onDelete = useCallback(() => {
     if (!isMulti) {
       onChange("");

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Autocomplete, AutocompleteProps } from './autocomplete.js';
 export { AutocompleteOptionGroup, AutocompleteOptionGroupProps } from './autocomplete-option-group.js';
-export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-4995431c.js';
+export { A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-cbe9b443.js';
 export { AutocompleteCreate, AutocompleteCreateProps } from './autocomplete-create.js';
 export { AutocompleteEmpty, AutocompleteEmptyProps } from './autocomplete-empty.js';
 export { MultiAutocomplete, MultiAutocompleteProps } from './multi-autocomplete.js';

package/dist/index.js

@@ -185,8 +185,7 @@ var useAutocomplete = ({
   closeOnBlur = true,
   closeOnEsc = true,
   createOption = false,
-  createOrder = "first",
-  createSecondOrder = "first",
+  insertPositionOnCreate = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
   placement = "bottom-start",
@@ -225,6 +224,13 @@ var useAutocomplete = ({
   const isCreate = focusedIndex === -2 && createOption;
   const isMulti = (0, import_utils.isArray)(value);
   const isEmptyValue = !isMulti ? !value : !value.length;
+  const [firstInsertPositionOnCreate, secondInsertPositionOnCreate] = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isArray)(insertPositionOnCreate)) {
+      return insertPositionOnCreate;
+    } else {
+      return [insertPositionOnCreate, "first"];
+    }
+  }, [insertPositionOnCreate]);
   if (createOption && !(0, import_utils.isUndefined)(children)) {
     console.warn(
       `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
@@ -508,21 +514,21 @@ var useAutocomplete = ({
     let newOptions = [];
     if (options)
       newOptions = options;
-    if (createOrder === "first") {
+    if (firstInsertPositionOnCreate === "first") {
       newOptions = [newOption, ...newOptions];
-    } else if (createOrder === "last") {
+    } else if (firstInsertPositionOnCreate === "last") {
       newOptions = [...newOptions, newOption];
     } else {
-      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      const i = newOptions.findIndex(({ label }) => label === firstInsertPositionOnCreate);
       if (i !== -1 && (0, import_utils.isArray)(newOptions[i].value)) {
-        if (createSecondOrder === "first") {
+        if (secondInsertPositionOnCreate === "first") {
           newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
           newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
-          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${createOrder}' specified in createOrder does not exist in the option group.`
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionOnCreate}' specified in insertPositionOnCreate does not exist in the option group.`
         );
       }
     }
@@ -532,7 +538,16 @@ var useAutocomplete = ({
     const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
     (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
-  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+  }, [
+    inputValue,
+    options,
+    firstInsertPositionOnCreate,
+    onChange,
+    rebirthOptions,
+    rest,
+    secondInsertPositionOnCreate,
+    isMulti
+  ]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   AutocompleteOption,
   AutocompleteOptionGroup,
   MultiAutocomplete
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   Autocomplete,
   AutocompleteCreate,

package/dist/multi-autocomplete.d.ts

@@ -3,7 +3,7 @@ import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
 import { FC, MouseEventHandler } from 'react';
 import { AutocompleteIconProps } from './autocomplete-icon.js';
 import { AutocompleteListProps } from './autocomplete-list.js';
-import { b as UseAutocompleteProps } from './use-autocomplete-4995431c.js';
+import { b as UseAutocompleteProps } from './use-autocomplete-cbe9b443.js';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';
@@ -11,21 +11,60 @@ import '@yamada-ui/select';
 import '@yamada-ui/utils';
 
 type MultiAutocompleteOptions = {
+    /**
+     * The visual separator between each value.
+     *
+     * @default ','
+     */
     separator?: string;
+    /**
+     * The custom display value to use.
+     */
     component?: FC<{
         value: string | number;
         displayValue: string;
         index: number;
         onRemove: MouseEventHandler<HTMLElement>;
     }>;
+    /**
+     * If `true`, keep the placeholder.
+     *
+     * @default false
+     */
     keepPlaceholder?: boolean;
+    /**
+     * If `true`, display the select clear icon.
+     *
+     * @default true
+     */
     isClearable?: boolean;
+    /**
+     * The border color when the input is focused.
+     */
     focusBorderColor?: string;
+    /**
+     * The border color when the input is invalid.
+     */
     errorBorderColor?: string;
+    /**
+     * Props for multi autocomplete container element.
+     */
     containerProps?: Omit<HTMLUIProps<'div'>, 'children'>;
+    /**
+     * Props for multi autocomplete list element.
+     */
     listProps?: Omit<AutocompleteListProps, 'children'>;
+    /**
+     * Props for multi autocomplete input element.
+     */
     inputProps?: HTMLUIProps<'input'>;
+    /**
+     * Props for multi autocomplete icon element.
+     */
     iconProps?: AutocompleteIconProps;
+    /**
+     * Props for multi autocomplete clear icon element.
+     */
     clearIconProps?: AutocompleteIconProps;
 };
 type MultiAutocompleteProps = ThemeProps<'Select'> & UseAutocompleteProps<string[]> & MultiAutocompleteOptions;

package/dist/multi-autocomplete.js

@@ -381,8 +381,7 @@ var useAutocomplete = ({
   closeOnBlur = true,
   closeOnEsc = true,
   createOption = false,
-  createOrder = "first",
-  createSecondOrder = "first",
+  insertPositionOnCreate = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
   placement = "bottom-start",
@@ -421,6 +420,13 @@ var useAutocomplete = ({
   const isCreate = focusedIndex === -2 && createOption;
   const isMulti = (0, import_utils6.isArray)(value);
   const isEmptyValue = !isMulti ? !value : !value.length;
+  const [firstInsertPositionOnCreate, secondInsertPositionOnCreate] = (0, import_react.useMemo)(() => {
+    if ((0, import_utils6.isArray)(insertPositionOnCreate)) {
+      return insertPositionOnCreate;
+    } else {
+      return [insertPositionOnCreate, "first"];
+    }
+  }, [insertPositionOnCreate]);
   if (createOption && !(0, import_utils6.isUndefined)(children)) {
     console.warn(
       `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
@@ -704,21 +710,21 @@ var useAutocomplete = ({
     let newOptions = [];
     if (options)
       newOptions = options;
-    if (createOrder === "first") {
+    if (firstInsertPositionOnCreate === "first") {
       newOptions = [newOption, ...newOptions];
-    } else if (createOrder === "last") {
+    } else if (firstInsertPositionOnCreate === "last") {
       newOptions = [...newOptions, newOption];
     } else {
-      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      const i = newOptions.findIndex(({ label }) => label === firstInsertPositionOnCreate);
       if (i !== -1 && (0, import_utils6.isArray)(newOptions[i].value)) {
-        if (createSecondOrder === "first") {
+        if (secondInsertPositionOnCreate === "first") {
           newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
           newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
-          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${createOrder}' specified in createOrder does not exist in the option group.`
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionOnCreate}' specified in insertPositionOnCreate does not exist in the option group.`
         );
       }
     }
@@ -728,7 +734,16 @@ var useAutocomplete = ({
     const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
     (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
-  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+  }, [
+    inputValue,
+    options,
+    firstInsertPositionOnCreate,
+    onChange,
+    rebirthOptions,
+    rest,
+    secondInsertPositionOnCreate,
+    isMulti
+  ]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");

package/dist/multi-autocomplete.mjs

@@ -1,6 +1,6 @@
 import {
   MultiAutocomplete
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   MultiAutocomplete
 };

package/dist/{use-autocomplete-4995431c.d.ts → use-autocomplete-cbe9b443.d.ts}

@@ -9,6 +9,9 @@ import { UIOption } from '@yamada-ui/select';
 import { PropGetter, Dict, DOMAttributes, Union } from '@yamada-ui/utils';
 
 type AutocompleteOptionOptions = {
+    /**
+     * The autocomplete option icon to use.
+     */
     icon?: ReactElement;
 };
 type AutocompleteOptionProps = UseAutocompleteOptionProps & AutocompleteOptionOptions;
@@ -3317,11 +3320,9 @@ declare const useAutocompleteDescendant: (options?: {
     enabledIndex: number;
     register: (node: HTMLElement | null) => void;
 };
-type MaybeValue = string | string[];
-type Order = 'first' | 'last';
 type AutocompleteContext = Omit<UseAutocompleteProps, 'value' | 'defaultValue' | 'onChange' | 'onCreate'> & {
-    value: MaybeValue;
-    displayValue: MaybeValue | undefined;
+    value: string | string[];
+    displayValue: string | string[] | undefined;
     inputValue: string;
     isHit: boolean;
     isEmpty: boolean;
@@ -3348,25 +3349,76 @@ type AutocompleteContext = Omit<UseAutocompleteProps, 'value' | 'defaultValue' |
 };
 declare const AutocompleteProvider: react.Provider<AutocompleteContext>;
 declare const useAutocompleteContext: () => AutocompleteContext;
-type UseAutocompleteBaseProps<T extends MaybeValue = string> = Omit<PopoverProps, 'initialFocusRef' | 'closeOnButton' | 'isOpen' | 'trigger' | 'autoFocus' | 'restoreFocus' | 'openDelay' | 'closeDelay'> & FormControlOptions & {
+type UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<PopoverProps, 'initialFocusRef' | 'closeOnButton' | 'isOpen' | 'trigger' | 'autoFocus' | 'restoreFocus' | 'openDelay' | 'closeDelay'> & FormControlOptions & {
+    /**
+     * The value of the autocomplete.
+     */
     value?: T;
+    /**
+     * The initial value of the autocomplete.
+     */
     defaultValue?: T;
+    /**
+     * The callback invoked when value state changes.
+     */
     onChange?: (value: T) => void;
+    /**
+     * The callback invoked when search input.
+     */
     onSearch?: (ev: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The callback invoked when autocomlete option created.
+     */
     onCreate?: (newOption: UIOption, newOptions: UIOption[]) => void;
+    /**
+     * Function to format text when search input.
+     */
     format?: (value: string) => string;
-    createOrder?: Union<Order>;
-    createSecondOrder?: Order;
+    /**
+     * The position to be inserted when the autocomplete option is created.
+     *
+     * @default 'first'
+     */
+    insertPositionOnCreate?: Union<'first' | 'last'> | [string, 'first' | 'last'];
+    /**
+     * If `true`, the list element will be closed when value is selected.
+     *
+     * @default true
+     */
     closeOnSelect?: boolean;
+    /**
+     * The message displayed when the search yields no hits.
+     *
+     * @default 'No results found'
+     */
     emptyMessage?: string;
+    /**
+     * If `true`, enables the creation of autocomplete options.
+     *
+     * @default false
+     */
     createOption?: boolean;
+    /**
+     * If `true`, the selected item(s) will be excluded from the list.
+     *
+     * @default false
+     */
     omitSelectedValues?: boolean;
+    /**
+     * The maximum selectable value.
+     */
     maxSelectedValues?: number;
+    /**
+     * Props for select option element.
+     */
     optionProps?: Omit<AutocompleteOptionProps, 'value' | 'children'>;
+    /**
+     * If provided, generate options based on data.
+     */
     options?: UIOption[];
 };
-type UseAutocompleteProps<T extends MaybeValue = string> = Omit<HTMLUIProps<'input'>, keyof UseAutocompleteBaseProps | 'list' | 'disabled' | 'required' | 'readOnly' | 'size'> & UseAutocompleteBaseProps<T>;
-declare const useAutocomplete: <T extends MaybeValue = string>({ defaultIsOpen, closeOnSelect, omitSelectedValues, maxSelectedValues, closeOnBlur, closeOnEsc, createOption, createOrder, createSecondOrder, emptyMessage, format, placement, duration, optionProps, placeholder, children, ...rest }: UseAutocompleteProps<T>) => {
+type UseAutocompleteProps<T extends string | string[] = string> = Omit<HTMLUIProps<'input'>, keyof UseAutocompleteBaseProps | 'list' | 'disabled' | 'required' | 'readOnly' | 'size'> & UseAutocompleteBaseProps<T>;
+declare const useAutocomplete: <T extends string | string[] = string>({ defaultIsOpen, closeOnSelect, omitSelectedValues, maxSelectedValues, closeOnBlur, closeOnEsc, createOption, insertPositionOnCreate, emptyMessage, format, placement, duration, optionProps, placeholder, children, ...rest }: UseAutocompleteProps<T>) => {
     id: string | undefined;
     descendants: {
         register: (nodeOrOptions: HTMLElement | {
@@ -4015,6 +4067,9 @@ declare const useAutocompleteList: () => {
     getListProps: PropGetter;
 };
 type UseAutocompleteOptionGroupProps = HTMLUIProps<'ul'> & {
+    /**
+     * The label of the autocomplete option group.
+     */
     label: string;
 };
 declare const useAutocompleteOptionGroup: ({ label, ...rest }: UseAutocompleteOptionGroupProps) => {
@@ -4024,10 +4079,31 @@ declare const useAutocompleteOptionGroup: ({ label, ...rest }: UseAutocompleteOp
 };
 type UseAutocompleteOptionGroupReturn = ReturnType<typeof useAutocompleteOptionGroup>;
 type UseAutocompleteOptionProps = Omit<HTMLUIProps<'li'>, 'value' | 'children'> & {
+    /**
+     * The value of the select option.
+     */
     value?: string;
+    /**
+     * The label of the select option.
+     */
     children?: string;
+    /**
+     * If `true`, the select option will be disabled.
+     *
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * If `true`, the select option will be focusable.
+     *
+     * @default false
+     */
     isFocusable?: boolean;
+    /**
+     * If `true`, the list element will be closed when selected.
+     *
+     * @default false
+     */
     closeOnSelect?: boolean;
 };
 declare const useAutocompleteOption: (props: UseAutocompleteOptionProps) => {
@@ -4047,4 +4123,4 @@ declare const useAutocompleteEmpty: () => {
 };
 type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>;
 
-export { AutocompleteOptionProps as A, MaybeValue as M, UseAutocompleteOptionGroupProps as U, AutocompleteOption as a, UseAutocompleteProps as b, AutocompleteDescendantsContextProvider as c, useAutocompleteDescendants as d, useAutocompleteDescendant as e, AutocompleteProvider as f, useAutocompleteContext as g, useAutocomplete as h, UseAutocompleteReturn as i, useAutocompleteInput as j, UseAutocompleteInputReturn as k, useAutocompleteList as l, useAutocompleteOptionGroup as m, UseAutocompleteOptionGroupReturn as n, UseAutocompleteOptionProps as o, useAutocompleteOption as p, UseAutocompleteOptionReturn as q, useAutocompleteCreate as r, UseAutocompleteCreateReturn as s, useAutocompleteEmpty as t, useAutocompleteDescendantsContext as u, UseAutocompleteEmptyReturn as v };
+export { AutocompleteOption as A, UseAutocompleteOptionGroupProps as U, AutocompleteOptionProps as a, UseAutocompleteProps as b, AutocompleteDescendantsContextProvider as c, useAutocompleteDescendants as d, useAutocompleteDescendant as e, AutocompleteProvider as f, useAutocompleteContext as g, useAutocomplete as h, UseAutocompleteReturn as i, useAutocompleteInput as j, UseAutocompleteInputReturn as k, useAutocompleteList as l, useAutocompleteOptionGroup as m, UseAutocompleteOptionGroupReturn as n, UseAutocompleteOptionProps as o, useAutocompleteOption as p, UseAutocompleteOptionReturn as q, useAutocompleteCreate as r, UseAutocompleteCreateReturn as s, useAutocompleteEmpty as t, useAutocompleteDescendantsContext as u, UseAutocompleteEmptyReturn as v };

package/dist/use-autocomplete.d.ts

@@ -5,4 +5,4 @@ import '@yamada-ui/form-control';
 import '@yamada-ui/popover';
 import '@yamada-ui/select';
 import '@yamada-ui/utils';
-export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, M as MaybeValue, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-4995431c.js';
+export { c as AutocompleteDescendantsContextProvider, f as AutocompleteProvider, s as UseAutocompleteCreateReturn, v as UseAutocompleteEmptyReturn, k as UseAutocompleteInputReturn, U as UseAutocompleteOptionGroupProps, n as UseAutocompleteOptionGroupReturn, o as UseAutocompleteOptionProps, q as UseAutocompleteOptionReturn, b as UseAutocompleteProps, i as UseAutocompleteReturn, h as useAutocomplete, g as useAutocompleteContext, r as useAutocompleteCreate, e as useAutocompleteDescendant, d as useAutocompleteDescendants, u as useAutocompleteDescendantsContext, t as useAutocompleteEmpty, j as useAutocompleteInput, l as useAutocompleteList, p as useAutocompleteOption, m as useAutocompleteOptionGroup } from './use-autocomplete-cbe9b443.js';

package/dist/use-autocomplete.js

@@ -325,8 +325,7 @@ var useAutocomplete = ({
   closeOnBlur = true,
   closeOnEsc = true,
   createOption = false,
-  createOrder = "first",
-  createSecondOrder = "first",
+  insertPositionOnCreate = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
   placement = "bottom-start",
@@ -365,6 +364,13 @@ var useAutocomplete = ({
   const isCreate = focusedIndex === -2 && createOption;
   const isMulti = (0, import_utils4.isArray)(value);
   const isEmptyValue = !isMulti ? !value : !value.length;
+  const [firstInsertPositionOnCreate, secondInsertPositionOnCreate] = (0, import_react2.useMemo)(() => {
+    if ((0, import_utils4.isArray)(insertPositionOnCreate)) {
+      return insertPositionOnCreate;
+    } else {
+      return [insertPositionOnCreate, "first"];
+    }
+  }, [insertPositionOnCreate]);
   if (createOption && !(0, import_utils4.isUndefined)(children)) {
     console.warn(
       `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'options' in props.`
@@ -648,21 +654,21 @@ var useAutocomplete = ({
     let newOptions = [];
     if (options)
       newOptions = options;
-    if (createOrder === "first") {
+    if (firstInsertPositionOnCreate === "first") {
       newOptions = [newOption, ...newOptions];
-    } else if (createOrder === "last") {
+    } else if (firstInsertPositionOnCreate === "last") {
       newOptions = [...newOptions, newOption];
     } else {
-      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      const i = newOptions.findIndex(({ label }) => label === firstInsertPositionOnCreate);
       if (i !== -1 && (0, import_utils4.isArray)(newOptions[i].value)) {
-        if (createSecondOrder === "first") {
+        if (secondInsertPositionOnCreate === "first") {
           newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
           newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
-          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${createOrder}' specified in createOrder does not exist in the option group.`
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionOnCreate}' specified in insertPositionOnCreate does not exist in the option group.`
         );
       }
     }
@@ -672,7 +678,16 @@ var useAutocomplete = ({
     const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
     (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
-  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+  }, [
+    inputValue,
+    options,
+    firstInsertPositionOnCreate,
+    onChange,
+    rebirthOptions,
+    rest,
+    secondInsertPositionOnCreate,
+    isMulti
+  ]);
   const onDelete = (0, import_react2.useCallback)(() => {
     if (!isMulti) {
       onChange("");

package/dist/use-autocomplete.mjs

@@ -12,7 +12,7 @@ import {
   useAutocompleteList,
   useAutocompleteOption,
   useAutocompleteOptionGroup
-} from "./chunk-YQULJUTP.mjs";
+} from "./chunk-JDV5RP6W.mjs";
 export {
   AutocompleteDescendantsContextProvider,
   AutocompleteProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/autocomplete",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "Yamada UI autocomplete component",
   "keywords": [
     "yamada",
@@ -36,14 +36,14 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.2.3",
+    "@yamada-ui/core": "0.3.1",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/icon": "0.1.10",
-    "@yamada-ui/select": "0.1.11",
-    "@yamada-ui/form-control": "0.1.10",
-    "@yamada-ui/popover": "0.1.10",
+    "@yamada-ui/icon": "0.2.0",
+    "@yamada-ui/select": "0.2.0",
+    "@yamada-ui/form-control": "0.2.0",
+    "@yamada-ui/popover": "0.2.0",
     "@yamada-ui/use-descendant": "0.1.1",
-    "@yamada-ui/use-clickable": "0.1.1",
+    "@yamada-ui/use-clickable": "0.2.0",
     "@yamada-ui/use-outside-click": "0.1.1",
     "@yamada-ui/use-controllable-state": "0.1.2"
   },