@yamada-ui/autocomplete 1.6.5-next-20241123050941 → 1.6.6-dev-20241123052407

package/dist/{chunk-3A2HEULI.mjs → chunk-2LP57WVB.mjs}

@@ -2,7 +2,7 @@
 import {
   useAutocompleteContext,
   useAutocompleteDescendant
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/use-autocomplete-option.ts
 import {
@@ -41,13 +41,17 @@ var useAutocompleteOption = (props) => {
     id,
     children,
     closeOnSelect: customCloseOnSelect,
+    disabled,
+    focusable,
     icon: customIcon,
     isDisabled,
     isFocusable,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  disabled != null ? disabled : disabled = isDisabled;
+  focusable != null ? focusable : focusable = isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
@@ -73,7 +77,7 @@ var useAutocompleteOption = (props) => {
   const onClick = useCallback(
     (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
@@ -87,7 +91,7 @@ var useAutocompleteOption = (props) => {
       isDuplicated,
       onFocusNext,
       omitSelectedValues,
-      isDisabled,
+      disabled,
       optionValue,
       setFocusedIndex,
       index,
@@ -119,10 +123,10 @@ var useAutocompleteOption = (props) => {
         ...props2,
         id,
         style: isHidden ? style : void 0,
-        "aria-disabled": ariaAttr(isDisabled),
+        "aria-disabled": ariaAttr(disabled),
         "aria-hidden": ariaAttr(isHidden),
         "aria-selected": isSelected,
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": dataAttr(disabled),
         "data-duplicated": dataAttr(isDuplicated),
         "data-focus": dataAttr(isFocused),
         "data-target": dataAttr(true),
@@ -136,7 +140,7 @@ var useAutocompleteOption = (props) => {
       isDuplicated,
       optionValue,
       computedProps,
-      isDisabled,
+      disabled,
       isFocused,
       isSelected,
       isTarget,
@@ -220,4 +224,4 @@ export {
   useAutocompleteCreate,
   useAutocompleteEmpty
 };
-//# sourceMappingURL=chunk-3A2HEULI.mjs.map
+//# sourceMappingURL=chunk-2LP57WVB.mjs.map

package/dist/chunk-2LP57WVB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-autocomplete-option.ts"],"sourcesContent":["import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isHTMLElement,\n  isNumber,\n  isString,\n  isUndefined,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n  isHTMLElement(target) && !!target.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n  extends Omit<HTMLUIProps, \"children\" | \"value\"> {\n  /**\n   * The label of the autocomplete option.\n   */\n  children?: string\n  /**\n   * If `true`, the list element will be closed when selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   */\n  focusable?: boolean\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   *\n   * @deprecated Use `focusable` instead.\n   */\n  isFocusable?: boolean\n  /**\n   * The value of the autocomplete option.\n   */\n  value?: string\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n  const {\n    closeOnSelect,\n    focusedIndex,\n    inputRef,\n    omitSelectedValues,\n    setFocusedIndex,\n    value,\n    optionProps,\n    onChange,\n    onClose,\n    onFocusNext,\n  } = useAutocompleteContext()\n  const uuid = useId()\n  const itemRef = useRef<HTMLLIElement>(null)\n  let {\n    id,\n    children,\n    closeOnSelect: customCloseOnSelect,\n    disabled,\n    focusable,\n    icon: customIcon,\n    isDisabled,\n    isFocusable,\n    value: optionValue,\n    ...computedProps\n  } = { ...optionProps, ...props }\n  disabled ??= isDisabled\n  focusable ??= isFocusable\n  const trulyDisabled = !!disabled && !focusable\n  const { descendants, index, register } = useAutocompleteDescendant({\n    disabled: trulyDisabled,\n  })\n  const values = descendants.values()\n  const frontValues = values.slice(0, index)\n  const isMulti = isArray(value)\n  const isDuplicated = frontValues.some(\n    ({ node }) => node.dataset.value === (optionValue ?? \"\"),\n  )\n  const isSelected =\n    !isDuplicated &&\n    (!isMulti\n      ? (optionValue ?? \"\") === value\n      : value.includes(optionValue ?? \"\"))\n  const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n  const isFocused = index === focusedIndex\n\n  id ??= uuid\n\n  if (isUndefined(optionValue)) {\n    if (isString(children) || isNumber(children)) {\n      optionValue = children.toString()\n    } else {\n      console.warn(\n        `${\n          !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n        }: Cannot infer the option value of complex children. Pass a \\`value\\` prop or use a plain string as children to <Option>.`,\n      )\n    }\n  }\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.stopPropagation()\n\n      if (disabled || !isTargetOption(ev.currentTarget)) {\n        if (inputRef.current) inputRef.current.focus()\n\n        return\n      }\n\n      if (!isDuplicated) setFocusedIndex(index)\n\n      onChange(optionValue ?? \"\")\n\n      if (inputRef.current) inputRef.current.focus()\n\n      if (customCloseOnSelect ?? closeOnSelect) onClose()\n\n      if (omitSelectedValues) onFocusNext(index)\n    },\n    [\n      isDuplicated,\n      onFocusNext,\n      omitSelectedValues,\n      disabled,\n      optionValue,\n      setFocusedIndex,\n      index,\n      onChange,\n      customCloseOnSelect,\n      closeOnSelect,\n      onClose,\n      inputRef,\n    ],\n  )\n\n  const getOptionProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = !isTarget || (omitSelectedValues && isSelected)\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref: mergeRefs(itemRef, ref, register),\n        role: \"option\",\n        ...computedProps,\n        ...props,\n        id,\n        style: isHidden ? style : undefined,\n        \"aria-disabled\": ariaAttr(disabled),\n        \"aria-hidden\": ariaAttr(isHidden),\n        \"aria-selected\": isSelected,\n        \"data-disabled\": dataAttr(disabled),\n        \"data-duplicated\": dataAttr(isDuplicated),\n        \"data-focus\": dataAttr(isFocused),\n        \"data-target\": dataAttr(true),\n        \"data-value\": optionValue ?? \"\",\n        tabIndex: -1,\n        onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n      }\n    },\n    [\n      id,\n      isDuplicated,\n      optionValue,\n      computedProps,\n      disabled,\n      isFocused,\n      isSelected,\n      isTarget,\n      omitSelectedValues,\n      onClick,\n      register,\n    ],\n  )\n\n  return {\n    children,\n    customIcon,\n    isFocused,\n    isSelected,\n    isTarget,\n    omitSelectedValues,\n    getOptionProps,\n  }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n  typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n  const { isHit, onCreate } = useAutocompleteContext()\n\n  const getCreateProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"option\",\n        ...props,\n        style: isHit ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHit),\n        \"data-focus\": dataAttr(!isHit),\n        tabIndex: -1,\n        onClick: handlerAll(props.onClick, onCreate),\n      }\n    },\n    [isHit, onCreate],\n  )\n\n  return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n  typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n  const { isEmpty, isHit } = useAutocompleteContext()\n\n  const getEmptyProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = isHit && !isEmpty\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"presentation\",\n        ...props,\n        style: isHidden ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHidden),\n        tabIndex: -1,\n      }\n    },\n    [isHit, isEmpty],\n  )\n\n  return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["props"]}

package/dist/{chunk-PTPJFYGI.mjs → chunk-4GVV3HBE.mjs}

@@ -2,15 +2,21 @@
 import {
   useAutocompleteContext,
   useAutocompleteDescendantsContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/use-autocomplete-list.ts
-import { ariaAttr, isArray, mergeRefs, useUpdateEffect } from "@yamada-ui/utils";
-import { useCallback, useEffect, useId, useRef } from "react";
+import {
+  ariaAttr,
+  handlerAll,
+  isArray,
+  mergeRefs,
+  useUpdateEffect
+} from "@yamada-ui/utils";
+import { useCallback, useEffect, useRef } from "react";
 var useAutocompleteList = () => {
-  const { focusedIndex, isOpen, listRef, rebirthOptions, value } = useAutocompleteContext();
+  const { focusedIndex, isOpen, rebirthOptions, value } = useAutocompleteContext();
   const descendants = useAutocompleteDescendantsContext();
-  const uuid = useId();
+  const listRef = useRef(null);
   const beforeFocusedIndex = useRef(-1);
   const selectedValue = descendants.value(focusedIndex);
   const isMulti = isArray(value);
@@ -46,25 +52,35 @@ var useAutocompleteList = () => {
   useUpdateEffect(() => {
     if (!isOpen) beforeFocusedIndex.current = -1;
   }, [isOpen]);
+  const getContainerProps = useCallback(
+    (props = {}, ref = null) => ({
+      ref,
+      "aria-multiselectable": ariaAttr(isMulti),
+      role: "listbox",
+      ...props,
+      onAnimationComplete: handlerAll(
+        props.onAnimationComplete,
+        onAnimationComplete
+      )
+    }),
+    [isMulti, onAnimationComplete]
+  );
   const getListProps = useCallback(
-    ({ id, ...props } = {}, ref = null) => ({
-      id: id != null ? id : uuid,
+    (props = {}, ref = null) => ({
       ref: mergeRefs(listRef, ref),
-      "aria-multiselectable": ariaAttr(isMulti),
       position: "relative",
-      role: "listbox",
       tabIndex: -1,
       ...props
     }),
-    [listRef, uuid, isMulti]
+    [listRef]
   );
   return {
-    getListProps,
-    onAnimationComplete
+    getContainerProps,
+    getListProps
   };
 };
 
 export {
   useAutocompleteList
 };
-//# sourceMappingURL=chunk-PTPJFYGI.mjs.map
+//# sourceMappingURL=chunk-4GVV3HBE.mjs.map

package/dist/chunk-4GVV3HBE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-autocomplete-list.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport {\n  ariaAttr,\n  handlerAll,\n  isArray,\n  mergeRefs,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendantsContext,\n} from \"./autocomplete-context\"\n\nexport const useAutocompleteList = () => {\n  const { focusedIndex, isOpen, rebirthOptions, value } =\n    useAutocompleteContext()\n  const descendants = useAutocompleteDescendantsContext()\n  const listRef = useRef<HTMLDivElement>(null)\n  const beforeFocusedIndex = useRef<number>(-1)\n  const selectedValue = descendants.value(focusedIndex)\n  const isMulti = isArray(value)\n\n  const onAnimationComplete = useCallback(() => {\n    if (!isOpen) rebirthOptions(false)\n  }, [isOpen, rebirthOptions])\n\n  useEffect(() => {\n    if (!listRef.current || !selectedValue) return\n\n    if (beforeFocusedIndex.current === selectedValue.index) return\n\n    const parent = listRef.current\n    const child = selectedValue.node\n\n    const parentHeight = parent.clientHeight\n    const viewTop = parent.scrollTop\n    const viewBottom = viewTop + parentHeight\n\n    const childHeight = child.clientHeight\n    const childTop = child.offsetTop\n    const childBottom = childTop + childHeight\n\n    const isInView = viewTop <= childTop && childBottom <= viewBottom\n\n    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index\n\n    if (!isInView) {\n      if (childBottom <= parentHeight) {\n        listRef.current.scrollTo({ top: 0 })\n      } else {\n        if (!isScrollBottom) {\n          listRef.current.scrollTo({ top: childTop + 1 })\n        } else {\n          listRef.current.scrollTo({ top: childBottom - parentHeight })\n        }\n      }\n    }\n\n    beforeFocusedIndex.current = selectedValue.index\n  }, [listRef, selectedValue])\n\n  useUpdateEffect(() => {\n    if (!isOpen) beforeFocusedIndex.current = -1\n  }, [isOpen])\n\n  const getContainerProps: PropGetter<MotionProps, MotionProps> = useCallback(\n    (props = {}, ref = null) => ({\n      ref,\n      \"aria-multiselectable\": ariaAttr(isMulti),\n      role: \"listbox\",\n      ...props,\n      onAnimationComplete: handlerAll(\n        props.onAnimationComplete,\n        onAnimationComplete,\n      ),\n    }),\n    [isMulti, onAnimationComplete],\n  )\n\n  const getListProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(listRef, ref),\n      position: \"relative\",\n      tabIndex: -1,\n      ...props,\n    }),\n    [listRef],\n  )\n\n  return {\n    getContainerProps,\n    getListProps,\n  }\n}\n"],"mappings":";;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa,WAAW,cAAc;AAMxC,IAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,cAAc,QAAQ,gBAAgB,MAAM,IAClD,uBAAuB;AACzB,QAAM,cAAc,kCAAkC;AACtD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,qBAAqB,OAAe,EAAE;AAC5C,QAAM,gBAAgB,YAAY,MAAM,YAAY;AACpD,QAAM,UAAU,QAAQ,KAAK;AAE7B,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,CAAC,OAAQ,gBAAe,KAAK;AAAA,EACnC,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,WAAW,CAAC,cAAe;AAExC,QAAI,mBAAmB,YAAY,cAAc,MAAO;AAExD,UAAM,SAAS,QAAQ;AACvB,UAAM,QAAQ,cAAc;AAE5B,UAAM,eAAe,OAAO;AAC5B,UAAM,UAAU,OAAO;AACvB,UAAM,aAAa,UAAU;AAE7B,UAAM,cAAc,MAAM;AAC1B,UAAM,WAAW,MAAM;AACvB,UAAM,cAAc,WAAW;AAE/B,UAAM,WAAW,WAAW,YAAY,eAAe;AAEvD,UAAM,iBAAiB,mBAAmB,UAAU,cAAc;AAElE,QAAI,CAAC,UAAU;AACb,UAAI,eAAe,cAAc;AAC/B,gBAAQ,QAAQ,SAAS,EAAE,KAAK,EAAE,CAAC;AAAA,MACrC,OAAO;AACL,YAAI,CAAC,gBAAgB;AACnB,kBAAQ,QAAQ,SAAS,EAAE,KAAK,WAAW,EAAE,CAAC;AAAA,QAChD,OAAO;AACL,kBAAQ,QAAQ,SAAS,EAAE,KAAK,cAAc,aAAa,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,IACF;AAEA,uBAAmB,UAAU,cAAc;AAAA,EAC7C,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ,oBAAmB,UAAU;AAAA,EAC5C,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,oBAA0D;AAAA,IAC9D,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B;AAAA,MACA,wBAAwB,SAAS,OAAO;AAAA,MACxC,MAAM;AAAA,MACN,GAAG;AAAA,MACH,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS,mBAAmB;AAAA,EAC/B;AAEA,QAAM,eAA2B;AAAA,IAC/B,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,KAAK,UAAU,SAAS,GAAG;AAAA,MAC3B,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-6OTUOEYS.mjs → chunk-7QCZ5NGS.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useAutocompleteContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/autocomplete-icon.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -105,4 +105,4 @@ export {
   AutocompleteClearIcon,
   AutocompleteItemIcon
 };
-//# sourceMappingURL=chunk-6OTUOEYS.mjs.map
+//# sourceMappingURL=chunk-7QCZ5NGS.mjs.map

package/dist/{chunk-PU6HFINM.mjs → chunk-ABCTEZN5.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   useAutocompleteOptionGroup
-} from "./chunk-CMFJUJJW.mjs";
+} from "./chunk-UX5QECNB.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/autocomplete-option-group.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -67,4 +67,4 @@ AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
 export {
   AutocompleteOptionGroup
 };
-//# sourceMappingURL=chunk-PU6HFINM.mjs.map
+//# sourceMappingURL=chunk-ABCTEZN5.mjs.map

package/dist/{chunk-NOSATNDY.mjs → chunk-IFH3PPSD.mjs}

@@ -2,25 +2,25 @@
 import {
   useAutocomplete,
   useAutocompleteInput
-} from "./chunk-75VF5Q5W.mjs";
+} from "./chunk-ZR77IT3O.mjs";
 import {
   AutocompleteCreate
-} from "./chunk-G6SC44LI.mjs";
+} from "./chunk-RK5E5J5E.mjs";
 import {
   AutocompleteEmpty
-} from "./chunk-6II6KCIJ.mjs";
+} from "./chunk-YPKDYYEV.mjs";
 import {
   AutocompleteList
-} from "./chunk-REPBXBG3.mjs";
+} from "./chunk-LIBFONYN.mjs";
 import {
   AutocompleteClearIcon,
   AutocompleteIcon
-} from "./chunk-6OTUOEYS.mjs";
+} from "./chunk-7QCZ5NGS.mjs";
 import {
   AutocompleteDescendantsContextProvider,
   AutocompleteProvider,
   useAutocompleteContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/multi-autocomplete.tsx
 import {
@@ -42,6 +42,7 @@ var MultiAutocomplete = forwardRef(
     );
     let {
       className,
+      clearable,
       closeOnSelect = false,
       color,
       component,
@@ -88,6 +89,7 @@ var MultiAutocomplete = forwardRef(
     });
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
+    clearable != null ? clearable : clearable = isClearable;
     const css = {
       color,
       h: "fit-content",
@@ -132,7 +134,7 @@ var MultiAutocomplete = forwardRef(
                         ...getFieldProps(fieldProps, ref)
                       }
                     ),
-                    isClearable && value.length ? /* @__PURE__ */ jsx(
+                    clearable && value.length ? /* @__PURE__ */ jsx(
                       AutocompleteClearIcon,
                       {
                         ...clearIconProps,
@@ -257,4 +259,4 @@ MultiAutocompleteField.__ui__ = "MultiAutocompleteField";
 export {
   MultiAutocomplete
 };
-//# sourceMappingURL=chunk-NOSATNDY.mjs.map
+//# sourceMappingURL=chunk-IFH3PPSD.mjs.map

package/dist/chunk-IFH3PPSD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/multi-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type {\n  CSSProperties,\n  FC,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n} from \"react\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { cx, handlerAll, runIfFunc } from \"@yamada-ui/utils\"\nimport { cloneElement, useMemo } from \"react\"\nimport {\n  AutocompleteDescendantsContextProvider,\n  AutocompleteProvider,\n  useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport { AutocompleteClearIcon, AutocompleteIcon } from \"./autocomplete-icon\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface MultiAutocompleteOptions {\n  /**\n   * If `true`, display the select clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * If `true`, the list element will be closed when value is selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n  /**\n   * The custom display value to use.\n   */\n  component?: FC<{\n    index: number\n    label: string\n    value: number | string\n    onRemove: MouseEventHandler<HTMLElement>\n  }>\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The footer of the autocomplete content element.\n   */\n  footer?: FC<{ value: string[] | undefined; onClose: () => void }> | ReactNode\n  /**\n   * The header of the autocomplete content element.\n   */\n  header?: FC<{ value: string[] | undefined; onClose: () => void }> | ReactNode\n  /**\n   * If `true`, display the select clear icon.\n   *\n   * @default true\n   *\n   * @deprecated Use `clearable` instead.\n   */\n  isClearable?: boolean\n  /**\n   * If `true`, keep the placeholder.\n   *\n   * @default false\n   */\n  keepPlaceholder?: boolean\n  /**\n   * The visual separator between each value.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * Props for multi autocomplete clear icon element.\n   */\n  clearIconProps?: AutocompleteIconProps\n  /**\n   * Props for multi autocomplete container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for multi autocomplete content element.\n   */\n  contentProps?: Omit<MotionProps, \"children\">\n  /**\n   * Props for autocomplete create element.\n   */\n  createProps?: Omit<AutocompleteCreateProps, \"children\">\n  /**\n   * Props for autocomplete empty element.\n   */\n  emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n  /**\n   * Props for multi autocomplete field element.\n   */\n  fieldProps?: Omit<\n    MultiAutocompleteFieldProps,\n    \"children\" | \"component\" | \"inputProps\" | \"keepPlaceholder\" | \"separator\"\n  >\n  /**\n   * Props for multi autocomplete icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * Props for multi autocomplete input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for multi autocomplete list element.\n   */\n  listProps?: Omit<AutocompleteListProps, \"children\">\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ isDisabled: true }'\n   *\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport interface MultiAutocompleteProps\n  extends ThemeProps<\"MultiAutocomplete\">,\n    Omit<UseAutocompleteProps<string[]>, \"closeOnSelect\">,\n    MultiAutocompleteOptions {}\n\n/**\n * `MultiAutocomplete` is a component used to display suggestions based on user text input and to obtain multiple values.\n *\n * @see Docs https://yamada-ui.com/components/forms/multi-autocomplete\n */\nexport const MultiAutocomplete = forwardRef<MultiAutocompleteProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"MultiAutocomplete\",\n      props,\n    )\n    let {\n      className,\n      clearable,\n      closeOnSelect = false,\n      color,\n      component,\n      defaultValue = [],\n      footer,\n      h,\n      header,\n      height,\n      isClearable = true,\n      keepPlaceholder = false,\n      minH,\n      minHeight,\n      separator,\n      clearIconProps,\n      containerProps,\n      contentProps,\n      createProps,\n      emptyProps,\n      fieldProps,\n      iconProps,\n      inputProps,\n      listProps,\n      portalProps = { isDisabled: true },\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n\n    const {\n      allowCreate,\n      children,\n      descendants,\n      inputValue,\n      isEmpty,\n      value,\n      formControlProps,\n      getContainerProps,\n      getFieldProps,\n      getPopoverProps,\n      onClear,\n      onClose,\n      ...rest\n    } = useAutocomplete<string[]>({\n      ...computedProps,\n      closeOnSelect,\n      defaultValue,\n    })\n\n    h ??= height\n    minH ??= minHeight\n    clearable ??= isClearable\n\n    const css: CSSUIObject = {\n      color,\n      h: \"fit-content\",\n      w: \"100%\",\n      ...styles.container,\n    }\n\n    return (\n      <AutocompleteDescendantsContextProvider value={descendants}>\n        <AutocompleteProvider\n          value={{\n            ...rest,\n            allowCreate,\n            inputValue,\n            isEmpty,\n            styles,\n            value,\n            formControlProps,\n            onClose,\n          }}\n        >\n          <Popover {...getPopoverProps()}>\n            <ui.div\n              className={cx(\"ui-multi-autocomplete\", className)}\n              __css={css}\n              {...getContainerProps(containerProps)}\n            >\n              <ui.div\n                className=\"ui-multi-autocomplete__inner\"\n                __css={{ position: \"relative\", ...styles.inner }}\n              >\n                <MultiAutocompleteField\n                  component={component}\n                  h={h}\n                  keepPlaceholder={keepPlaceholder}\n                  minH={minH}\n                  separator={separator}\n                  inputProps={inputProps}\n                  {...getFieldProps(fieldProps, ref)}\n                />\n\n                {clearable && value.length ? (\n                  <AutocompleteClearIcon\n                    {...clearIconProps}\n                    onClick={handlerAll(clearIconProps?.onClick, onClear)}\n                    {...formControlProps}\n                  />\n                ) : (\n                  <AutocompleteIcon {...iconProps} {...formControlProps} />\n                )}\n              </ui.div>\n\n              <Portal {...portalProps}>\n                <AutocompleteList\n                  footer={runIfFunc(footer, { value, onClose })}\n                  header={runIfFunc(header, { value, onClose })}\n                  contentProps={contentProps}\n                  {...listProps}\n                >\n                  {!isEmpty ? (\n                    <>\n                      {allowCreate ? (\n                        <AutocompleteCreate {...createProps} />\n                      ) : (\n                        <AutocompleteEmpty {...emptyProps} />\n                      )}\n\n                      {children}\n                    </>\n                  ) : allowCreate && inputValue ? (\n                    <AutocompleteCreate {...createProps} />\n                  ) : (\n                    <AutocompleteEmpty {...emptyProps} />\n                  )}\n                </AutocompleteList>\n              </Portal>\n            </ui.div>\n          </Popover>\n        </AutocompleteProvider>\n      </AutocompleteDescendantsContextProvider>\n    )\n  },\n)\n\nMultiAutocomplete.displayName = \"MultiAutocomplete\"\nMultiAutocomplete.__ui__ = \"MultiAutocomplete\"\n\ninterface MultiAutocompleteFieldProps\n  extends HTMLUIProps,\n    Pick<\n      MultiAutocompleteProps,\n      \"component\" | \"inputProps\" | \"keepPlaceholder\" | \"separator\"\n    > {}\n\nconst MultiAutocompleteField = forwardRef<MultiAutocompleteFieldProps, \"input\">(\n  (\n    {\n      className,\n      component,\n      h,\n      keepPlaceholder,\n      minH,\n      placeholder,\n      separator = \",\",\n      inputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { inputRef, inputValue, isOpen, label, styles, value, onChange } =\n      useAutocompleteContext()\n    const { getInputProps } = useAutocompleteInput()\n\n    const cloneChildren = useMemo(() => {\n      if (!label?.length) return null\n\n      if (component) {\n        return (label as string[]).map((label, index) => {\n          if (!value[index]) return null\n\n          const onRemove: MouseEventHandler<HTMLElement> = (ev) => {\n            if (!value[index]) return\n\n            ev.stopPropagation()\n\n            onChange(value[index])\n\n            if (inputRef.current) inputRef.current.focus()\n          }\n\n          const el = component({\n            index,\n            label,\n            value: value[index],\n            onRemove,\n          })\n\n          const style: CSSProperties = {\n            marginBlockEnd: \"0.125rem\",\n            marginBlockStart: \"0.125rem\",\n            marginInlineEnd: \"0.25rem\",\n          }\n\n          return el\n            ? cloneElement(el as ReactElement, { key: index, style })\n            : null\n        })\n      } else {\n        return (label as string[]).map((value, index) => {\n          const isLast = label.length === index + 1\n\n          return (\n            <ui.span key={index} display=\"inline-block\" me=\"0.25rem\">\n              {value}\n              {!isLast || isOpen ? separator : null}\n            </ui.span>\n          )\n        })\n      }\n    }, [label, component, value, onChange, isOpen, inputRef, separator])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      h,\n      minH,\n      pe: \"2rem\",\n      ...styles.field,\n      cursor: \"text\",\n    }\n\n    if (label?.length && component) css.py = \"0.125rem\"\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-multi-autocomplete__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          {cloneChildren}\n\n          <ui.input\n            className=\"ui-multi-autocomplete__field__input\"\n            display=\"inline-block\"\n            flex=\"1\"\n            marginBlockEnd=\"0.125rem\"\n            marginBlockStart=\"0.125rem\"\n            minW=\"0px\"\n            overflow=\"hidden\"\n            placeholder={\n              !label?.length || (keepPlaceholder && isOpen)\n                ? placeholder\n                : undefined\n            }\n            {...getInputProps({ ...inputProps, value: inputValue }, ref)}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n\nMultiAutocompleteField.displayName = \"MultiAutocompleteField\"\nMultiAutocompleteField.__ui__ = \"MultiAutocompleteField\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,sBAAsB;AACxC,SAAS,cAAc;AACvB,SAAS,IAAI,YAAY,iBAAiB;AAC1C,SAAS,cAAc,eAAe;AAsNxB,SAiCM,UA7BJ,KAJF;AAtFP,IAAM,oBAAoB;AAAA,EAC/B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,IAAI;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,eAAe,CAAC;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,EAAE,YAAY,KAAK;AAAA,MACjC,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,gBAA0B;AAAA,MAC5B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACF,CAAC;AAED,wBAAM;AACN,iCAAS;AACT,gDAAc;AAEd,UAAM,MAAmB;AAAA,MACvB;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,oBAAC,0CAAuC,OAAO,aAC7C;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA,8BAAC,WAAS,GAAG,gBAAgB,GAC3B;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,YAChD,OAAO;AAAA,YACN,GAAG,kBAAkB,cAAc;AAAA,YAEpC;AAAA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,UAAU,YAAY,GAAG,OAAO,MAAM;AAAA,kBAE/C;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACC,GAAG,cAAc,YAAY,GAAG;AAAA;AAAA,oBACnC;AAAA,oBAEC,aAAa,MAAM,SAClB;AAAA,sBAAC;AAAA;AAAA,wBACE,GAAG;AAAA,wBACJ,SAAS,WAAW,iDAAgB,SAAS,OAAO;AAAA,wBACnD,GAAG;AAAA;AAAA,oBACN,IAEA,oBAAC,oBAAkB,GAAG,WAAY,GAAG,kBAAkB;AAAA;AAAA;AAAA,cAE3D;AAAA,cAEA,oBAAC,UAAQ,GAAG,aACV;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,UAAU,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAAA,kBAC5C,QAAQ,UAAU,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAAA,kBAC5C;AAAA,kBACC,GAAG;AAAA,kBAEH,WAAC,UACA,iCACG;AAAA,kCACC,oBAAC,sBAAoB,GAAG,aAAa,IAErC,oBAAC,qBAAmB,GAAG,YAAY;AAAA,oBAGpC;AAAA,qBACH,IACE,eAAe,aACjB,oBAAC,sBAAoB,GAAG,aAAa,IAErC,oBAAC,qBAAmB,GAAG,YAAY;AAAA;AAAA,cAEvC,GACF;AAAA;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAChC,kBAAkB,SAAS;AAS3B,IAAM,yBAAyB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,UAAU,YAAY,QAAQ,OAAO,QAAQ,OAAO,SAAS,IACnE,uBAAuB;AACzB,UAAM,EAAE,cAAc,IAAI,qBAAqB;AAE/C,UAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAI,EAAC,+BAAO,QAAQ,QAAO;AAE3B,UAAI,WAAW;AACb,eAAQ,MAAmB,IAAI,CAACA,QAAO,UAAU;AAC/C,cAAI,CAAC,MAAM,KAAK,EAAG,QAAO;AAE1B,gBAAM,WAA2C,CAAC,OAAO;AACvD,gBAAI,CAAC,MAAM,KAAK,EAAG;AAEnB,eAAG,gBAAgB;AAEnB,qBAAS,MAAM,KAAK,CAAC;AAErB,gBAAI,SAAS,QAAS,UAAS,QAAQ,MAAM;AAAA,UAC/C;AAEA,gBAAM,KAAK,UAAU;AAAA,YACnB;AAAA,YACA,OAAAA;AAAA,YACA,OAAO,MAAM,KAAK;AAAA,YAClB;AAAA,UACF,CAAC;AAED,gBAAM,QAAuB;AAAA,YAC3B,gBAAgB;AAAA,YAChB,kBAAkB;AAAA,YAClB,iBAAiB;AAAA,UACnB;AAEA,iBAAO,KACH,aAAa,IAAoB,EAAE,KAAK,OAAO,MAAM,CAAC,IACtD;AAAA,QACN,CAAC;AAAA,MACH,OAAO;AACL,eAAQ,MAAmB,IAAI,CAACC,QAAO,UAAU;AAC/C,gBAAM,SAAS,MAAM,WAAW,QAAQ;AAExC,iBACE,qBAAC,GAAG,MAAH,EAAoB,SAAQ,gBAAe,IAAG,WAC5C;AAAA,YAAAA;AAAA,YACA,CAAC,UAAU,SAAS,YAAY;AAAA,eAFrB,KAGd;AAAA,QAEJ,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,OAAO,WAAW,OAAO,UAAU,QAAQ,UAAU,SAAS,CAAC;AAEnE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACJ,GAAG,OAAO;AAAA,MACV,QAAQ;AAAA,IACV;AAEA,SAAI,+BAAO,WAAU,UAAW,KAAI,KAAK;AAEzC,WACE,oBAAC,kBACC;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,UAED;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,gBAAe;AAAA,cACf,kBAAiB;AAAA,cACjB,MAAK;AAAA,cACL,UAAS;AAAA,cACT,aACE,EAAC,+BAAO,WAAW,mBAAmB,SAClC,cACA;AAAA,cAEL,GAAG,cAAc,EAAE,GAAG,YAAY,OAAO,WAAW,GAAG,GAAG;AAAA;AAAA,UAC7D;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,uBAAuB,cAAc;AACrC,uBAAuB,SAAS;","names":["label","value"]}

package/dist/{chunk-REPBXBG3.mjs → chunk-LIBFONYN.mjs}

@@ -1,15 +1,15 @@
 "use client"
 import {
   useAutocompleteList
-} from "./chunk-PTPJFYGI.mjs";
+} from "./chunk-4GVV3HBE.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/autocomplete-list.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
 import { PopoverContent } from "@yamada-ui/popover";
-import { cx, handlerAll } from "@yamada-ui/utils";
+import { cx } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AutocompleteList = forwardRef(
   ({
@@ -28,7 +28,7 @@ var AutocompleteList = forwardRef(
   }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const { styles } = useAutocompleteContext();
-    const { getListProps, onAnimationComplete } = useAutocompleteList();
+    const { getContainerProps, getListProps } = useAutocompleteList();
     width != null ? width : width = w;
     width != null ? width : width = (_c = (_a = styles.list) == null ? void 0 : _a.width) != null ? _c : (_b = styles.list) == null ? void 0 : _b.w;
     minWidth != null ? minWidth : minWidth = minW;
@@ -38,16 +38,13 @@ var AutocompleteList = forwardRef(
     return /* @__PURE__ */ jsxs(
       PopoverContent,
       {
+        as: "div",
         className: "ui-autocomplete__popover",
         maxWidth,
         minWidth,
         width,
         __css: { ...styles.content, maxWidth, minWidth, width },
-        ...contentProps,
-        onAnimationComplete: handlerAll(
-          contentProps == null ? void 0 : contentProps.onAnimationComplete,
-          onAnimationComplete
-        ),
+        ...getContainerProps(contentProps),
         children: [
           header ? /* @__PURE__ */ jsx(
             ui.header,
@@ -85,4 +82,4 @@ AutocompleteList.__ui__ = "AutocompleteList";
 export {
   AutocompleteList
 };
-//# sourceMappingURL=chunk-REPBXBG3.mjs.map
+//# sourceMappingURL=chunk-LIBFONYN.mjs.map

package/dist/chunk-LIBFONYN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete-list.tsx"],"sourcesContent":["import type { CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { useAutocompleteList } from \"./use-autocomplete-list\"\n\nexport interface AutocompleteListProps extends HTMLUIProps {\n  footer?: ReactNode\n  header?: ReactNode\n  contentProps?: MotionPropsWithoutChildren\n}\n\nexport const AutocompleteList = forwardRef<AutocompleteListProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      footer,\n      header,\n      maxW,\n      maxWidth,\n      minW,\n      minWidth,\n      w,\n      width,\n      contentProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useAutocompleteContext()\n    const { getContainerProps, getListProps } = useAutocompleteList()\n\n    width ??= w\n    width ??= (styles.list?.width ?? styles.list?.w) as CSSUIProps[\"width\"]\n    minWidth ??= minW\n    minWidth ??= (styles.list?.minWidth ??\n      styles.list?.minW) as CSSUIProps[\"minWidth\"]\n    maxWidth ??= maxW\n    maxWidth ??= (styles.list?.maxWidth ??\n      styles.list?.maxW) as CSSUIProps[\"maxWidth\"]\n\n    return (\n      <PopoverContent\n        as=\"div\"\n        className=\"ui-autocomplete__popover\"\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        width={width}\n        __css={{ ...styles.content, maxWidth, minWidth, width }}\n        {...getContainerProps(contentProps)}\n      >\n        {header ? (\n          <ui.header\n            className=\"ui-autocomplete__header\"\n            __css={{ ...styles.header }}\n          >\n            {header}\n          </ui.header>\n        ) : null}\n\n        <ui.div\n          className={cx(\"ui-autocomplete__list\", className)}\n          __css={{ ...styles.list }}\n          {...getListProps(rest, ref)}\n        >\n          {children}\n        </ui.div>\n\n        {footer ? (\n          <ui.footer\n            className=\"ui-autocomplete__footer\"\n            __css={{ ...styles.footer }}\n          >\n            {footer}\n          </ui.footer>\n        ) : null}\n      </PopoverContent>\n    )\n  },\n)\n\nAutocompleteList.displayName = \"AutocompleteList\"\nAutocompleteList.__ui__ = \"AutocompleteList\"\n"],"mappings":";;;;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAyCb,SAUI,KAVJ;AA/BC,IAAM,mBAAmB;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAhCP;AAiCI,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,mBAAmB,aAAa,IAAI,oBAAoB;AAEhE,oCAAU;AACV,qCAAW,kBAAO,SAAP,mBAAa,UAAb,aAAsB,YAAO,SAAP,mBAAa;AAC9C,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AACf,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AAEf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS,UAAU,UAAU,MAAM;AAAA,QACrD,GAAG,kBAAkB,YAAY;AAAA,QAEjC;AAAA,mBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA,UAEJ;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,cAChD,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,cACvB,GAAG,aAAa,MAAM,GAAG;AAAA,cAEzB;AAAA;AAAA,UACH;AAAA,UAEC,SACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;","names":[]}

package/dist/{chunk-2UKLSSUA.mjs → chunk-PWV7X7G6.mjs}

@@ -1,13 +1,13 @@
 "use client"
 import {
   useAutocompleteOption
-} from "./chunk-3A2HEULI.mjs";
+} from "./chunk-2LP57WVB.mjs";
 import {
   AutocompleteItemIcon
-} from "./chunk-6OTUOEYS.mjs";
+} from "./chunk-7QCZ5NGS.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/autocomplete-option.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -60,4 +60,4 @@ AutocompleteCheckIcon.__ui__ = "AutocompleteCheckIcon";
 export {
   AutocompleteOption
 };
-//# sourceMappingURL=chunk-2UKLSSUA.mjs.map
+//# sourceMappingURL=chunk-PWV7X7G6.mjs.map

package/dist/{chunk-G6SC44LI.mjs → chunk-RK5E5J5E.mjs}

@@ -1,13 +1,13 @@
 "use client"
 import {
   useAutocompleteCreate
-} from "./chunk-3A2HEULI.mjs";
+} from "./chunk-2LP57WVB.mjs";
 import {
   AutocompleteItemIcon
-} from "./chunk-6OTUOEYS.mjs";
+} from "./chunk-7QCZ5NGS.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/autocomplete-create.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -60,4 +60,4 @@ AutocompletePlusIcon.__ui__ = "AutocompletePlusIcon";
 export {
   AutocompleteCreate
 };
-//# sourceMappingURL=chunk-G6SC44LI.mjs.map
+//# sourceMappingURL=chunk-RK5E5J5E.mjs.map

package/dist/{chunk-ZNO5RUVT.mjs → chunk-TP5VZFO3.mjs}

@@ -22,4 +22,4 @@ export {
   AutocompleteProvider,
   useAutocompleteContext
 };
-//# sourceMappingURL=chunk-ZNO5RUVT.mjs.map
+//# sourceMappingURL=chunk-TP5VZFO3.mjs.map

package/dist/chunk-TP5VZFO3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete-context.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n  DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n  useDescendant: useAutocompleteDescendant,\n  useDescendants: useAutocompleteDescendants,\n  useDescendantsContext: useAutocompleteDescendantsContext,\n} = createDescendant()\n\ninterface AutocompleteContext\n  extends Omit<\n    UseAutocompleteProps,\n    \"defaultValue\" | \"onChange\" | \"onCreate\" | \"value\"\n  > {\n  focusedIndex: number\n  inputRef: RefObject<HTMLInputElement>\n  inputValue: string\n  isAllSelected: boolean\n  isEmpty: boolean\n  isHit: boolean\n  isOpen: boolean\n  label: string | string[] | undefined\n  pickOptions: (value: string) => void\n  rebirthOptions: (runFocus?: boolean) => void\n  setFocusedIndex: Dispatch<SetStateAction<number>>\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string | string[]\n  formControlProps: { [key: string]: any }\n  inputProps: DOMAttributes<HTMLInputElement>\n  onChange: (newValue: string, runRebirth?: boolean) => void\n  onClose: () => void\n  onCreate: () => void\n  onFocusFirst: () => void\n  onFocusLast: () => void\n  onFocusNext: (index?: number) => void\n  onFocusPrev: (index?: number) => void\n  onOpen: () => void\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n  createContext<AutocompleteContext>({\n    name: \"AutocompleteContext\",\n    errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n  })\n"],"mappings":";;;AAGA,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAEvB,IAAM;AAAA,EACX,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,uBAAuB;AACzB,IAAI,iBAAiB;AAgCd,IAAM,CAAC,sBAAsB,sBAAsB,IACxD,cAAmC;AAAA,EACjC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;","names":[]}

package/dist/{chunk-CMFJUJJW.mjs → chunk-UX5QECNB.mjs}

@@ -2,7 +2,7 @@
 import {
   useAutocompleteContext,
   useAutocompleteDescendantsContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/use-autocomplete-option-group.ts
 import { layoutStyleProperties } from "@yamada-ui/core";
@@ -89,4 +89,4 @@ var useAutocompleteOptionGroup = ({
 export {
   useAutocompleteOptionGroup
 };
-//# sourceMappingURL=chunk-CMFJUJJW.mjs.map
+//# sourceMappingURL=chunk-UX5QECNB.mjs.map

package/dist/{chunk-6II6KCIJ.mjs → chunk-YPKDYYEV.mjs}

@@ -1,13 +1,13 @@
 "use client"
 import {
   useAutocompleteEmpty
-} from "./chunk-3A2HEULI.mjs";
+} from "./chunk-2LP57WVB.mjs";
 import {
   AutocompleteItemIcon
-} from "./chunk-6OTUOEYS.mjs";
+} from "./chunk-7QCZ5NGS.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-ZNO5RUVT.mjs";
+} from "./chunk-TP5VZFO3.mjs";
 
 // src/autocomplete-empty.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -61,4 +61,4 @@ AutocompleteMinusIcon.__ui__ = "AutocompleteMinusIcon";
 export {
   AutocompleteEmpty
 };
-//# sourceMappingURL=chunk-6II6KCIJ.mjs.map
+//# sourceMappingURL=chunk-YPKDYYEV.mjs.map