@yamada-ui/autocomplete 0.4.13 → 0.5.0

package/dist/use-autocomplete.js

@@ -303,20 +303,20 @@ var defaultFormat = (value) => {
   value = value.toUpperCase();
   return value;
 };
-var flattenOptions = (options) => {
-  const filterOptions = (options2) => options2.map((options3) => {
-    const { value, isDisabled, isFocusable } = options3;
+var flattenItems = (items) => {
+  const filterItems = (items2) => items2.map((item) => {
+    var _a;
+    const { isDisabled, isFocusable } = item;
     const trulyDisabled = !!isDisabled && !isFocusable;
-    const isMulti = (0, import_utils4.isArray)(value);
     if (trulyDisabled)
       return;
-    if (!isMulti) {
-      return options3;
+    if ("items" in item) {
+      return filterItems((_a = item.items) != null ? _a : []);
     } else {
-      return filterOptions(value);
+      return item;
     }
   }).filter(Boolean);
-  return filterOptions(options).flat(Infinity);
+  return filterItems(items).flat(Infinity);
 };
 var isTargetOption = (target) => {
   var _a;
@@ -339,14 +339,15 @@ var useAutocomplete = ({
   maxSelectedValues,
   closeOnBlur = true,
   closeOnEsc = true,
-  createOption = false,
-  insertPositionOnCreate = "first",
+  allowCreate = false,
+  insertPositionItem = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
   placement = "bottom-start",
   duration = 0.2,
   optionProps,
   placeholder,
+  items,
   children,
   ...rest
 }) => {
@@ -370,7 +371,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 [options, setOptions] = (0, import_react2.useState)(rest.options);
+  const [resolvedItems, setResolvedItems] = (0, import_react2.useState)(items);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: rest.value,
     defaultValue: rest.defaultValue,
@@ -383,19 +384,19 @@ var useAutocomplete = ({
   const [isHit, setIsHit] = (0, import_react2.useState)(true);
   const [isOpen, setIsOpen] = (0, import_react2.useState)(defaultIsOpen != null ? defaultIsOpen : false);
   const isFocused = focusedIndex > -1;
-  const isCreate = focusedIndex === -2 && createOption;
+  const isCreate = focusedIndex === -2 && allowCreate;
   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;
+  const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react2.useMemo)(() => {
+    if ((0, import_utils4.isArray)(insertPositionItem)) {
+      return insertPositionItem;
     } else {
-      return [insertPositionOnCreate, "first"];
+      return [insertPositionItem, "first"];
     }
-  }, [insertPositionOnCreate]);
-  if (createOption && !(0, import_utils4.isUndefined)(children)) {
+  }, [insertPositionItem]);
+  if (allowCreate && !(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.`
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`
     );
   }
   const selectedValues = descendants.enabledValues(
@@ -409,18 +410,18 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils4.getValidChildren)(children);
-  const computedChildren = options == null ? void 0 : options.map(({ label, value: value2, ...props }, i) => {
-    if (!(0, import_utils4.isArray)(value2)) {
+  const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
+    if ("value" in item) {
+      const { label, value: value2, ...props } = item;
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
-    } else {
+    } else if ("items" in item) {
+      const { label, items: items2 = [], ...props } = item;
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         AutocompleteOptionGroup,
         {
           label,
           ...props,
-          children: value2.map(
-            ({ label: label2, value: value3, ...props2 }, i2) => !(0, import_utils4.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value3, ...props2, children: label2 }, i2) : null
-          )
+          children: items2.map(({ label: label2, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i2))
         },
         i
       );
@@ -431,13 +432,13 @@ var useAutocomplete = ({
     var _a;
     if (formControlProps.disabled || formControlProps.readOnly)
       return;
-    if (!createOption && (isEmpty || isAllSelected))
+    if (!allowCreate && (isEmpty || isAllSelected))
       return;
     setIsOpen(true);
     if (inputRef.current)
       inputRef.current.focus();
     (_a = rest.onOpen) == null ? void 0 : _a.call(rest);
-  }, [createOption, formControlProps, isAllSelected, isEmpty, rest]);
+  }, [allowCreate, formControlProps, isAllSelected, isEmpty, rest]);
   const onClose = (0, import_react2.useCallback)(() => {
     var _a;
     setIsOpen(false);
@@ -709,55 +710,51 @@ var useAutocomplete = ({
     isComposition.current = false;
   }, []);
   const onCreate = (0, import_react2.useCallback)(() => {
-    var _a;
+    var _a, _b, _c;
     if (!listRef.current)
       return;
-    const newOption = { label: inputValue, value: inputValue };
-    let newOptions = [];
-    if (options)
-      newOptions = options;
-    if (firstInsertPositionOnCreate === "first") {
-      newOptions = [newOption, ...newOptions];
-    } else if (firstInsertPositionOnCreate === "last") {
-      newOptions = [...newOptions, newOption];
+    const newItem = { label: inputValue, value: inputValue };
+    let newItems = [];
+    if (resolvedItems)
+      newItems = resolvedItems;
+    if (firstInsertPositionItem === "first") {
+      newItems = [newItem, ...newItems];
+    } else if (firstInsertPositionItem === "last") {
+      newItems = [...newItems, newItem];
     } else {
-      const i = newOptions.findIndex(
-        ({ label }) => label === firstInsertPositionOnCreate
+      const i = newItems.findIndex(
+        ({ label }) => label === firstInsertPositionItem
       );
-      if (i !== -1 && (0, import_utils4.isArray)(newOptions[i].value)) {
-        if (secondInsertPositionOnCreate === "first") {
-          newOptions[i].value = [
-            newOption,
-            ...newOptions[i].value
-          ];
+      const targetItem = newItems[i];
+      if (i !== -1 && "items" in targetItem) {
+        if (secondInsertPositionItem === "first") {
+          targetItem.items = [newItem, ...(_a = targetItem.items) != null ? _a : []];
         } else {
-          newOptions[i].value = [
-            ...newOptions[i].value,
-            newOption
-          ];
+          targetItem.items = [...(_b = targetItem.items) != null ? _b : [], newItem];
         }
+        newItems[i] = targetItem;
       } else {
         console.warn(
-          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionOnCreate}' specified in insertPositionOnCreate does not exist in the option group.`
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`
         );
       }
     }
-    setOptions(newOptions);
+    setResolvedItems(newItems);
     onChange(inputValue);
     rebirthOptions(false);
-    const index = flattenOptions(newOptions).findIndex(
+    const index = flattenItems(newItems).findIndex(
       ({ value: value2 }) => value2 === inputValue
     );
     setFocusedIndex(index);
-    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newOptions);
+    (_c = rest.onCreate) == null ? void 0 : _c.call(rest, newItem, newItems);
   }, [
     inputValue,
-    options,
-    firstInsertPositionOnCreate,
+    resolvedItems,
+    firstInsertPositionItem,
     onChange,
     rebirthOptions,
     rest,
-    secondInsertPositionOnCreate,
+    secondInsertPositionItem,
     isMulti
   ]);
   const onDelete = (0, import_react2.useCallback)(() => {
@@ -944,7 +941,7 @@ var useAutocomplete = ({
     focusedIndex,
     omitSelectedValues,
     closeOnSelect,
-    createOption,
+    allowCreate,
     emptyMessage,
     isOpen,
     isAllSelected,

package/dist/use-autocomplete.mjs

@@ -13,7 +13,7 @@ import {
   useAutocompleteList,
   useAutocompleteOption,
   useAutocompleteOptionGroup
-} from "./chunk-EFOFI4S7.mjs";
+} from "./chunk-JKY5MMNC.mjs";
 export {
   AutocompleteDescendantsContextProvider,
   AutocompleteProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/autocomplete",
-  "version": "0.4.13",
+  "version": "0.5.0",
   "description": "Yamada UI autocomplete component",
   "keywords": [
     "yamada",
@@ -39,9 +39,9 @@
     "@yamada-ui/core": "0.12.5",
     "@yamada-ui/utils": "0.3.3",
     "@yamada-ui/icon": "0.3.15",
-    "@yamada-ui/select": "0.4.13",
+    "@yamada-ui/select": "0.5.0",
     "@yamada-ui/form-control": "0.3.18",
-    "@yamada-ui/popover": "0.3.19",
+    "@yamada-ui/popover": "0.3.20",
     "@yamada-ui/use-descendant": "0.2.5",
     "@yamada-ui/use-clickable": "0.3.5",
     "@yamada-ui/use-outside-click": "0.2.5",