@yamada-ui/autocomplete 0.1.9 → 0.1.11

package/dist/autocomplete-create.mjs

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

package/dist/autocomplete-empty.mjs

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

package/dist/autocomplete-icon.mjs

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

package/dist/autocomplete-list.js

@@ -58,6 +58,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/autocomplete-list.mjs

@@ -1,6 +1,6 @@
 import {
   AutocompleteList
-} from "./chunk-UJYX53L6.mjs";
+} from "./chunk-YQULJUTP.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-2e4e8207.js';
+import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-4995431c.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-UJYX53L6.mjs";
+} from "./chunk-YQULJUTP.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-2e4e8207.js';
+export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-4995431c.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-UJYX53L6.mjs";
+} from "./chunk-YQULJUTP.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-2e4e8207.js';
+import { b as UseAutocompleteProps } from './use-autocomplete-4995431c.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';

package/dist/autocomplete.js

@@ -343,20 +343,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils6.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -404,7 +404,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react.useRef)(false);
-  const [data, setData] = (0, import_react.useState)(rest.data);
+  const [options, setOptions] = (0, import_react.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -422,7 +422,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   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 'data' in props.`
+      `${!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.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -436,7 +436,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils6.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils6.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -700,20 +700,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils6.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils6.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -721,13 +721,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -1000,6 +1000,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/autocomplete.mjs

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

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

@@ -692,20 +692,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = isArray(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -753,7 +753,7 @@ var useAutocomplete = ({
   const inputRef = useRef2(null);
   const timeoutIds = useRef2(/* @__PURE__ */ new Set([]));
   const isComposition = useRef2(false);
-  const [data, setData] = useState(rest.data);
+  const [options, setOptions] = useState(rest.options);
   const [value, setValue] = useControllableState({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -771,7 +771,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   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 'data' in props.`
+      `${!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.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -785,7 +785,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = getValidChildren2(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!isArray(value2)) {
       return /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -1049,20 +1049,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && isArray(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && isArray(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -1070,13 +1070,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = useCallback(() => {
     if (!isMulti) {
       onChange("");
@@ -1349,6 +1349,8 @@ var useAutocompleteList = () => {
   useEffect(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

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-2e4e8207.js';
+export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-4995431c.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

@@ -148,20 +148,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -209,7 +209,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react.useRef)(false);
-  const [data, setData] = (0, import_react.useState)(rest.data);
+  const [options, setOptions] = (0, import_react.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -227,7 +227,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   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 'data' in props.`
+      `${!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.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -241,7 +241,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -505,20 +505,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -526,13 +526,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -805,6 +805,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   AutocompleteOption,
   AutocompleteOptionGroup,
   MultiAutocomplete
-} from "./chunk-UJYX53L6.mjs";
+} from "./chunk-YQULJUTP.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-2e4e8207.js';
+import { b as UseAutocompleteProps } from './use-autocomplete-4995431c.js';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';

package/dist/multi-autocomplete.js

@@ -344,20 +344,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils6.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -405,7 +405,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react.useRef)(false);
-  const [data, setData] = (0, import_react.useState)(rest.data);
+  const [options, setOptions] = (0, import_react.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -423,7 +423,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   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 'data' in props.`
+      `${!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.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -437,7 +437,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils6.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils6.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -701,20 +701,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils6.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils6.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -722,13 +722,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -1001,6 +1001,8 @@ var useAutocompleteList = () => {
   (0, import_react.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/multi-autocomplete.mjs

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

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

@@ -3363,7 +3363,7 @@ type UseAutocompleteBaseProps<T extends MaybeValue = string> = Omit<PopoverProps
     omitSelectedValues?: boolean;
     maxSelectedValues?: number;
     optionProps?: Omit<AutocompleteOptionProps, 'value' | 'children'>;
-    data?: UIOption[];
+    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>) => {

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-2e4e8207.js';
+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';

package/dist/use-autocomplete.js

@@ -288,20 +288,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenData = (data) => {
-  const filterData = (data2) => data2.map((data3) => {
-    const { value, isDisabled, isFocusable } = data3;
+var flattenOptions = (options) => {
+  const filterOptions = (options2) => options2.map((options3) => {
+    const { value, isDisabled, isFocusable } = options3;
     const trulyDisabled = !!isDisabled && !isFocusable;
     const isMulti = (0, import_utils4.isArray)(value);
     if (trulyDisabled)
       return;
     if (!isMulti) {
-      return data3;
+      return options3;
     } else {
-      return filterData(value);
+      return filterOptions(value);
     }
   }).filter(Boolean);
-  return filterData(data).flat(Infinity);
+  return filterOptions(options).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -349,7 +349,7 @@ var useAutocomplete = ({
   const inputRef = (0, import_react2.useRef)(null);
   const timeoutIds = (0, import_react2.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react2.useRef)(false);
-  const [data, setData] = (0, import_react2.useState)(rest.data);
+  const [options, setOptions] = (0, import_react2.useState)(rest.options);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -367,7 +367,7 @@ var useAutocomplete = ({
   const isEmptyValue = !isMulti ? !value : !value.length;
   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 'data' in props.`
+      `${!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.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -381,7 +381,7 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils4.getValidChildren)(children);
-  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
     if (!(0, import_utils4.isArray)(value2)) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
     } else {
@@ -645,20 +645,20 @@ var useAutocomplete = ({
     if (!listRef.current)
       return;
     const newOption = { label: inputValue, value: inputValue };
-    let newData = [];
-    if (data)
-      newData = data;
+    let newOptions = [];
+    if (options)
+      newOptions = options;
     if (createOrder === "first") {
-      newData = [newOption, ...newData];
+      newOptions = [newOption, ...newOptions];
     } else if (createOrder === "last") {
-      newData = [...newData, newOption];
+      newOptions = [...newOptions, newOption];
     } else {
-      const i = newData.findIndex(({ label }) => label === createOrder);
-      if (i !== -1 && (0, import_utils4.isArray)(newData[i].value)) {
+      const i = newOptions.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils4.isArray)(newOptions[i].value)) {
         if (createSecondOrder === "first") {
-          newData[i].value = [newOption, ...newData[i].value];
+          newOptions[i].value = [newOption, ...newOptions[i].value];
         } else {
-          newData[i].value = [...newData[i].value, newOption];
+          newOptions[i].value = [...newOptions[i].value, newOption];
         }
       } else {
         console.warn(
@@ -666,13 +666,13 @@ var useAutocomplete = ({
         );
       }
     }
-    setData(newData);
+    setOptions(newOptions);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    const index = flattenOptions(newOptions).findIndex(({ value: value2 }) => value2 === inputValue);
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
-  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+  }, [inputValue, options, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
   const onDelete = (0, import_react2.useCallback)(() => {
     if (!isMulti) {
       onChange("");
@@ -945,6 +945,8 @@ var useAutocompleteList = () => {
   (0, import_react2.useEffect)(() => {
     if (!listRef.current || !selectedValue)
       return;
+    if (beforeFocusedIndex.current === selectedValue.index)
+      return;
     const parent = listRef.current;
     const child = selectedValue.node;
     const parentHeight = parent.clientHeight;

package/dist/use-autocomplete.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/autocomplete",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Yamada UI autocomplete component",
   "keywords": [
     "yamada",
@@ -36,12 +36,12 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.2.2",
+    "@yamada-ui/core": "0.2.3",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/icon": "0.1.9",
-    "@yamada-ui/select": "0.1.9",
-    "@yamada-ui/form-control": "0.1.9",
-    "@yamada-ui/popover": "0.1.9",
+    "@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/use-descendant": "0.1.1",
     "@yamada-ui/use-clickable": "0.1.1",
     "@yamada-ui/use-outside-click": "0.1.1",