@yamada-ui/autocomplete 0.6.1 → 0.7.0

package/dist/autocomplete-create.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteCreate
-} from "./chunk-TZHEVPHW.mjs";
+} from "./chunk-HGHCA4LW.mjs";
 export {
   AutocompleteCreate
 };

package/dist/autocomplete-empty.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteEmpty
-} from "./chunk-TZHEVPHW.mjs";
+} from "./chunk-HGHCA4LW.mjs";
 export {
   AutocompleteEmpty
 };

package/dist/autocomplete-icon.mjs

@@ -3,7 +3,7 @@ import {
   AutocompleteClearIcon,
   AutocompleteIcon,
   AutocompleteItemIcon
-} from "./chunk-TZHEVPHW.mjs";
+} from "./chunk-HGHCA4LW.mjs";
 export {
   AutocompleteClearIcon,
   AutocompleteIcon,

package/dist/autocomplete-list.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteList
-} from "./chunk-TZHEVPHW.mjs";
+} from "./chunk-HGHCA4LW.mjs";
 export {
   AutocompleteList
 };

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

@@ -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-72ef1a50.js';
+import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-3c0916c6.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@yamada-ui/form-control';

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-72ef1a50.js';
+import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-3c0916c6.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@yamada-ui/form-control';

package/dist/autocomplete-option-group.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteOptionGroup
-} from "./chunk-TZHEVPHW.mjs";
+} from "./chunk-HGHCA4LW.mjs";
 export {
   AutocompleteOptionGroup
 };

package/dist/autocomplete-option.d.mts

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

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-72ef1a50.js';
+export { A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-3c0916c6.js';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';

package/dist/autocomplete-option.js

@@ -64,7 +64,7 @@ var useAutocompleteOption = (props) => {
     value,
     omitSelectedValues,
     onChange,
-    onChangeDisplayValue,
+    onChangeLabel,
     focusedIndex,
     setFocusedIndex,
     onClose,
@@ -138,8 +138,8 @@ var useAutocompleteOption = (props) => {
   (0, import_react.useEffect)(() => {
     var _a2;
     if (isSelected)
-      onChangeDisplayValue((_a2 = computedProps.value) != null ? _a2 : "", false);
-  }, [computedProps, isSelected, onChangeDisplayValue]);
+      onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
+  }, [computedProps, isSelected, onChangeLabel]);
   const getOptionProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => {
       var _a2;

package/dist/autocomplete-option.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteOption
-} from "./chunk-TZHEVPHW.mjs";
+} from "./chunk-HGHCA4LW.mjs";
 export {
   AutocompleteOption
 };

package/dist/autocomplete.d.mts

@@ -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.mjs';
 import { AutocompleteListProps } from './autocomplete-list.mjs';
-import { c as UseAutocompleteProps } from './use-autocomplete-72ef1a50.js';
+import { c as UseAutocompleteProps } from './use-autocomplete-3c0916c6.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';

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 { c as UseAutocompleteProps } from './use-autocomplete-72ef1a50.js';
+import { c as UseAutocompleteProps } from './use-autocomplete-3c0916c6.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@yamada-ui/form-control';

package/dist/autocomplete.js

@@ -428,7 +428,7 @@ var useAutocomplete = ({
     defaultValue: rest.defaultValue,
     onChange: rest.onChange
   });
-  const [displayValue, setDisplayValue] = (0, import_react.useState)(void 0);
+  const [label, setLabel] = (0, import_react.useState)(void 0);
   const [inputValue, setInputValue] = (0, import_react.useState)("");
   const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
   const [isAllSelected, setIsAllSelected] = (0, import_react.useState)(false);
@@ -463,16 +463,16 @@ var useAutocomplete = ({
   const validChildren = (0, import_utils6.getValidChildren)(children);
   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_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
+      const { label: label2, value: value2, ...props } = item;
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
     } else if ("items" in item) {
-      const { label, items: items2 = [], ...props } = item;
+      const { label: label2, items: items2 = [], ...props } = item;
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         AutocompleteOptionGroup,
         {
-          label,
+          label: label2,
           ...props,
-          children: items2.map(({ label: label2, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i2))
+          children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
         },
         i
       );
@@ -670,7 +670,7 @@ var useAutocomplete = ({
     },
     [descendants, onFocusFirst]
   );
-  const onChangeDisplayValue = (0, import_react.useCallback)(
+  const onChangeLabel = (0, import_react.useCallback)(
     (newValue, runOmit = true) => {
       const enabledValues2 = descendants.enabledValues();
       const selectedValues2 = enabledValues2.filter(({ node }) => node.dataset.value === newValue).map(({ node }) => {
@@ -681,7 +681,7 @@ var useAutocomplete = ({
         selectedValues2.push(newValue);
         setInputValue("");
       }
-      setDisplayValue((prev) => {
+      setLabel((prev) => {
         if (!isMulti) {
           return selectedValues2[0];
         } else {
@@ -719,20 +719,13 @@ var useAutocomplete = ({
           return format((_a = node.textContent) != null ? _a : "").includes(newValue);
         }
       ).length > 0;
-      onChangeDisplayValue(newValue);
+      onChangeLabel(newValue);
       if (!allowFree || isHit2) {
         setInputValue("");
       }
       rebirthOptions(false);
     },
-    [
-      allowFree,
-      onChangeDisplayValue,
-      rebirthOptions,
-      setValue,
-      descendants,
-      format
-    ]
+    [allowFree, onChangeLabel, rebirthOptions, setValue, descendants, format]
   );
   const onSelect = (0, import_react.useCallback)(() => {
     var _a, _b;
@@ -793,7 +786,7 @@ var useAutocomplete = ({
       newItems = [...newItems, newItem];
     } else {
       const i = newItems.findIndex(
-        ({ label }) => label === firstInsertPositionItem
+        ({ label: label2 }) => label2 === firstInsertPositionItem
       );
       const targetItem = newItems[i];
       if (i !== -1 && "items" in targetItem) {
@@ -838,11 +831,11 @@ var useAutocomplete = ({
     (ev) => {
       ev.stopPropagation();
       setValue([]);
-      setDisplayValue(void 0);
+      setLabel(void 0);
       setInputValue("");
       rebirthOptions();
     },
-    [setDisplayValue, setInputValue, setValue, rebirthOptions]
+    [setLabel, setInputValue, setValue, rebirthOptions]
   );
   const onClick = (0, import_react.useCallback)(() => {
     if (isOpen) {
@@ -884,7 +877,7 @@ var useAutocomplete = ({
         return;
       if (isComposition.current)
         return;
-      const enabledDelete = displayValue === inputValue || !inputValue.length;
+      const enabledDelete = label === inputValue || !inputValue.length;
       const actions = {
         ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
@@ -909,7 +902,7 @@ var useAutocomplete = ({
     [
       allowFree,
       formControlProps,
-      displayValue,
+      label,
       inputValue,
       onOpen,
       isFocused,
@@ -1015,7 +1008,7 @@ var useAutocomplete = ({
     id,
     descendants,
     value,
-    displayValue,
+    label,
     inputValue,
     isHit,
     isEmpty,
@@ -1033,7 +1026,7 @@ var useAutocomplete = ({
     optionProps,
     formControlProps,
     setFocusedIndex,
-    onChangeDisplayValue,
+    onChangeLabel,
     onChange,
     onSearch,
     onCreate,
@@ -1235,7 +1228,7 @@ var useAutocompleteOption = (props) => {
     value,
     omitSelectedValues,
     onChange,
-    onChangeDisplayValue,
+    onChangeLabel,
     focusedIndex,
     setFocusedIndex,
     onClose,
@@ -1309,8 +1302,8 @@ var useAutocompleteOption = (props) => {
   (0, import_react.useEffect)(() => {
     var _a2;
     if (isSelected)
-      onChangeDisplayValue((_a2 = computedProps.value) != null ? _a2 : "", false);
-  }, [computedProps, isSelected, onChangeDisplayValue]);
+      onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
+  }, [computedProps, isSelected, onChangeLabel]);
   const getOptionProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => {
       var _a2;
@@ -1567,7 +1560,7 @@ var Autocomplete = (0, import_core8.forwardRef)(
 );
 var AutocompleteField = (0, import_core8.forwardRef)(
   ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
-    const { displayValue, inputValue, styles } = useAutocompleteContext();
+    const { label, inputValue, styles } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
     const css = {
       paddingEnd: "2rem",
@@ -1592,7 +1585,7 @@ var AutocompleteField = (0, import_core8.forwardRef)(
             w: "full",
             placeholder,
             ...getInputProps(
-              { ...inputProps, value: inputValue || displayValue || "" },
+              { ...inputProps, value: inputValue || label || "" },
               ref
             )
           }

package/dist/autocomplete.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   Autocomplete
-} from "./chunk-TZHEVPHW.mjs";
+} from "./chunk-HGHCA4LW.mjs";
 export {
   Autocomplete
 };

package/dist/{chunk-TZHEVPHW.mjs → chunk-HGHCA4LW.mjs}

@@ -226,7 +226,7 @@ var Autocomplete = forwardRef2(
 );
 var AutocompleteField = forwardRef2(
   ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
-    const { displayValue, inputValue, styles } = useAutocompleteContext();
+    const { label, inputValue, styles } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
     const css = {
       paddingEnd: "2rem",
@@ -251,7 +251,7 @@ var AutocompleteField = forwardRef2(
             w: "full",
             placeholder,
             ...getInputProps(
-              { ...inputProps, value: inputValue || displayValue || "" },
+              { ...inputProps, value: inputValue || label || "" },
               ref
             )
           }
@@ -575,21 +575,13 @@ var MultiAutocompleteField = forwardRef7(
     inputProps,
     ...rest
   }, ref) => {
-    const {
-      value,
-      displayValue,
-      inputValue,
-      onChange,
-      isOpen,
-      inputRef,
-      styles
-    } = useAutocompleteContext();
+    const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
     const cloneChildren = useMemo(() => {
-      if (!(displayValue == null ? void 0 : displayValue.length))
+      if (!(label == null ? void 0 : label.length))
         return null;
       if (component) {
-        return displayValue.map((displayValue2, index) => {
+        return label.map((label2, index) => {
           const onRemove = (e) => {
             e.stopPropagation();
             onChange(value[index]);
@@ -598,7 +590,7 @@ var MultiAutocompleteField = forwardRef7(
           };
           const el = component({
             value: value[index],
-            displayValue: displayValue2,
+            label: label2,
             index,
             onRemove
           });
@@ -611,15 +603,15 @@ var MultiAutocompleteField = forwardRef7(
           return el ? cloneElement2(el, { style }) : null;
         });
       } else {
-        return displayValue.map((value2, index) => {
-          const isLast = displayValue.length === index + 1;
+        return label.map((value2, index) => {
+          const isLast = label.length === index + 1;
           return /* @__PURE__ */ jsxs6(ui7.span, { display: "inline-block", me: "0.25rem", children: [
             value2,
             !isLast || isOpen ? separator : null
           ] }, index);
         });
       }
-    }, [displayValue, component, value, onChange, isOpen, inputRef, separator]);
+    }, [label, component, value, onChange, isOpen, inputRef, separator]);
     const css = {
       paddingEnd: "2rem",
       h,
@@ -635,7 +627,7 @@ var MultiAutocompleteField = forwardRef7(
       {
         className: cx7("ui-multi-autocomplete__field", className),
         __css: css,
-        py: (displayValue == null ? void 0 : displayValue.length) && component ? "0.125rem" : void 0,
+        py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
         ...rest,
         children: [
           cloneChildren,
@@ -648,7 +640,7 @@ var MultiAutocompleteField = forwardRef7(
               overflow: "hidden",
               marginBlockStart: "0.125rem",
               marginBlockEnd: "0.125rem",
-              placeholder: !displayValue || keepPlaceholder && isOpen ? placeholder : void 0,
+              placeholder: !label || !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
               ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
             }
           )
@@ -837,7 +829,7 @@ var useAutocomplete = ({
     defaultValue: rest.defaultValue,
     onChange: rest.onChange
   });
-  const [displayValue, setDisplayValue] = useState(void 0);
+  const [label, setLabel] = useState(void 0);
   const [inputValue, setInputValue] = useState("");
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const [isAllSelected, setIsAllSelected] = useState(false);
@@ -872,16 +864,16 @@ var useAutocomplete = ({
   const validChildren = getValidChildren2(children);
   const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
     if ("value" in item) {
-      const { label, value: value2, ...props } = item;
-      return /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props, children: label }, i);
+      const { label: label2, value: value2, ...props } = item;
+      return /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
     } else if ("items" in item) {
-      const { label, items: items2 = [], ...props } = item;
+      const { label: label2, items: items2 = [], ...props } = item;
       return /* @__PURE__ */ jsx8(
         AutocompleteOptionGroup,
         {
-          label,
+          label: label2,
           ...props,
-          children: items2.map(({ label: label2, value: value2, ...props2 }, i2) => /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props2, children: label2 }, i2))
+          children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
         },
         i
       );
@@ -1079,7 +1071,7 @@ var useAutocomplete = ({
     },
     [descendants, onFocusFirst]
   );
-  const onChangeDisplayValue = useCallback(
+  const onChangeLabel = useCallback(
     (newValue, runOmit = true) => {
       const enabledValues2 = descendants.enabledValues();
       const selectedValues2 = enabledValues2.filter(({ node }) => node.dataset.value === newValue).map(({ node }) => {
@@ -1090,7 +1082,7 @@ var useAutocomplete = ({
         selectedValues2.push(newValue);
         setInputValue("");
       }
-      setDisplayValue((prev) => {
+      setLabel((prev) => {
         if (!isMulti) {
           return selectedValues2[0];
         } else {
@@ -1128,20 +1120,13 @@ var useAutocomplete = ({
           return format((_a = node.textContent) != null ? _a : "").includes(newValue);
         }
       ).length > 0;
-      onChangeDisplayValue(newValue);
+      onChangeLabel(newValue);
       if (!allowFree || isHit2) {
         setInputValue("");
       }
       rebirthOptions(false);
     },
-    [
-      allowFree,
-      onChangeDisplayValue,
-      rebirthOptions,
-      setValue,
-      descendants,
-      format
-    ]
+    [allowFree, onChangeLabel, rebirthOptions, setValue, descendants, format]
   );
   const onSelect = useCallback(() => {
     var _a, _b;
@@ -1202,7 +1187,7 @@ var useAutocomplete = ({
       newItems = [...newItems, newItem];
     } else {
       const i = newItems.findIndex(
-        ({ label }) => label === firstInsertPositionItem
+        ({ label: label2 }) => label2 === firstInsertPositionItem
       );
       const targetItem = newItems[i];
       if (i !== -1 && "items" in targetItem) {
@@ -1247,11 +1232,11 @@ var useAutocomplete = ({
     (ev) => {
       ev.stopPropagation();
       setValue([]);
-      setDisplayValue(void 0);
+      setLabel(void 0);
       setInputValue("");
       rebirthOptions();
     },
-    [setDisplayValue, setInputValue, setValue, rebirthOptions]
+    [setLabel, setInputValue, setValue, rebirthOptions]
   );
   const onClick = useCallback(() => {
     if (isOpen) {
@@ -1293,7 +1278,7 @@ var useAutocomplete = ({
         return;
       if (isComposition.current)
         return;
-      const enabledDelete = displayValue === inputValue || !inputValue.length;
+      const enabledDelete = label === inputValue || !inputValue.length;
       const actions = {
         ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
         ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? funcAll(onOpen, onFocusLastOrSelected) : void 0,
@@ -1318,7 +1303,7 @@ var useAutocomplete = ({
     [
       allowFree,
       formControlProps,
-      displayValue,
+      label,
       inputValue,
       onOpen,
       isFocused,
@@ -1424,7 +1409,7 @@ var useAutocomplete = ({
     id,
     descendants,
     value,
-    displayValue,
+    label,
     inputValue,
     isHit,
     isEmpty,
@@ -1442,7 +1427,7 @@ var useAutocomplete = ({
     optionProps,
     formControlProps,
     setFocusedIndex,
-    onChangeDisplayValue,
+    onChangeLabel,
     onChange,
     onSearch,
     onCreate,
@@ -1644,7 +1629,7 @@ var useAutocompleteOption = (props) => {
     value,
     omitSelectedValues,
     onChange,
-    onChangeDisplayValue,
+    onChangeLabel,
     focusedIndex,
     setFocusedIndex,
     onClose,
@@ -1718,8 +1703,8 @@ var useAutocompleteOption = (props) => {
   useEffect(() => {
     var _a2;
     if (isSelected)
-      onChangeDisplayValue((_a2 = computedProps.value) != null ? _a2 : "", false);
-  }, [computedProps, isSelected, onChangeDisplayValue]);
+      onChangeLabel((_a2 = computedProps.value) != null ? _a2 : "", false);
+  }, [computedProps, isSelected, onChangeLabel]);
   const getOptionProps = useCallback(
     (props2 = {}, ref = null) => {
       var _a2;

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 export { Autocomplete, AutocompleteProps } from './autocomplete.mjs';
 export { AutocompleteOptionGroup, AutocompleteOptionGroupProps } from './autocomplete-option-group.mjs';
-export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-72ef1a50.js';
+export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-3c0916c6.js';
 export { AutocompleteCreate, AutocompleteCreateProps } from './autocomplete-create.mjs';
 export { AutocompleteEmpty, AutocompleteEmptyProps } from './autocomplete-empty.mjs';
 export { MultiAutocomplete, MultiAutocompleteProps } from './multi-autocomplete.mjs';

package/dist/index.d.ts

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