@yamada-ui/autocomplete 0.5.5 → 0.6.0

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

@@ -1,20 +1,17 @@
 "use client"
 
 // src/autocomplete-list.tsx
-import {
-  forwardRef as forwardRef8
-} from "@yamada-ui/core";
+import { forwardRef as forwardRef8 } from "@yamada-ui/core";
 import { PopoverContent } from "@yamada-ui/popover";
 import { cx as cx8 } from "@yamada-ui/utils";
 
 // src/use-autocomplete.tsx
-import {
-  layoutStylesProperties
-} from "@yamada-ui/core";
+import { layoutStylesProperties } from "@yamada-ui/core";
 import {
   formControlProperties,
   useFormControlProps
 } from "@yamada-ui/form-control";
+import { popoverProperties } from "@yamada-ui/popover";
 import { useControllableState } from "@yamada-ui/use-controllable-state";
 import { createDescendant } from "@yamada-ui/use-descendant";
 import { useOutsideClick } from "@yamada-ui/use-outside-click";
@@ -37,13 +34,7 @@ import {
   getValidChildren as getValidChildren2,
   isUndefined
 } from "@yamada-ui/utils";
-import {
-  useCallback,
-  useEffect,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState
-} from "react";
+import { useCallback, useEffect, useMemo as useMemo2, useRef as useRef2, useState } from "react";
 
 // src/autocomplete.tsx
 import {
@@ -180,7 +171,6 @@ var Autocomplete = forwardRef2(
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     const css = {
-      position: "relative",
       w: "100%",
       h: "fit-content",
       color,
@@ -204,16 +194,25 @@ var Autocomplete = forwardRef2(
             __css: css,
             ...getContainerProps(containerProps),
             children: [
-              /* @__PURE__ */ jsx2(
-                AutocompleteField,
+              /* @__PURE__ */ jsxs(
+                ui2.div,
                 {
-                  h,
-                  minH,
-                  inputProps,
-                  ...getFieldProps({}, ref)
+                  className: "ui-autocomplete__inner",
+                  __css: { position: "relative", ...styles.inner },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      AutocompleteField,
+                      {
+                        h,
+                        minH,
+                        inputProps,
+                        ...getFieldProps({}, ref)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(AutocompleteIcon, { ...iconProps, ...formControlProps })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx2(AutocompleteIcon, { ...iconProps, ...formControlProps }),
               !isEmpty ? /* @__PURE__ */ jsxs(AutocompleteList, { ...listProps, children: [
                 allowCreate ? /* @__PURE__ */ jsx2(AutocompleteCreate, {}) : /* @__PURE__ */ jsx2(AutocompleteEmpty, {}),
                 children != null ? children : computedChildren
@@ -449,10 +448,7 @@ import {
 } from "@yamada-ui/core";
 import { Popover as Popover2, PopoverTrigger as PopoverTrigger2 } from "@yamada-ui/popover";
 import { cx as cx7, handlerAll } from "@yamada-ui/utils";
-import {
-  cloneElement as cloneElement2,
-  useMemo
-} from "react";
+import { cloneElement as cloneElement2, useMemo } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var MultiAutocomplete = forwardRef7(
   (props, ref) => {
@@ -503,7 +499,6 @@ var MultiAutocomplete = forwardRef7(
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     const css = {
-      position: "relative",
       w: "100%",
       h: "fit-content",
       color,
@@ -524,30 +519,39 @@ var MultiAutocomplete = forwardRef7(
         children: /* @__PURE__ */ jsx7(Popover2, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs6(
           ui7.div,
           {
-            className: cx7("ui-autocomplete", className),
+            className: cx7("ui-multi-autocomplete", className),
             __css: css,
             ...getContainerProps(containerProps),
             children: [
-              /* @__PURE__ */ jsx7(
-                MultiAutocompleteField,
+              /* @__PURE__ */ jsxs6(
+                ui7.div,
                 {
-                  component,
-                  separator,
-                  keepPlaceholder,
-                  h,
-                  minH,
-                  inputProps,
-                  ...getFieldProps({}, ref)
+                  className: "ui-multi-autocomplete__inner",
+                  __css: { position: "relative", ...styles.inner },
+                  children: [
+                    /* @__PURE__ */ jsx7(
+                      MultiAutocompleteField,
+                      {
+                        component,
+                        separator,
+                        keepPlaceholder,
+                        h,
+                        minH,
+                        inputProps,
+                        ...getFieldProps({}, ref)
+                      }
+                    ),
+                    isClearable && value.length ? /* @__PURE__ */ jsx7(
+                      AutocompleteClearIcon,
+                      {
+                        ...clearIconProps,
+                        onClick: handlerAll(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
+                        ...formControlProps
+                      }
+                    ) : /* @__PURE__ */ jsx7(AutocompleteIcon, { ...iconProps, ...formControlProps })
+                  ]
                 }
               ),
-              isClearable && value.length ? /* @__PURE__ */ jsx7(
-                AutocompleteClearIcon,
-                {
-                  ...clearIconProps,
-                  onClick: handlerAll(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
-                  ...formControlProps
-                }
-              ) : /* @__PURE__ */ jsx7(AutocompleteIcon, { ...iconProps, ...formControlProps }),
               !isEmpty ? /* @__PURE__ */ jsxs6(AutocompleteList, { ...listProps, children: [
                 allowCreate ? /* @__PURE__ */ jsx7(AutocompleteCreate, {}) : /* @__PURE__ */ jsx7(AutocompleteEmpty, {}),
                 children != null ? children : computedChildren
@@ -629,7 +633,7 @@ var MultiAutocompleteField = forwardRef7(
     return /* @__PURE__ */ jsx7(PopoverTrigger2, { children: /* @__PURE__ */ jsxs6(
       ui7.div,
       {
-        className: cx7("ui-autocomplete__field", className),
+        className: cx7("ui-multi-autocomplete__field", className),
         __css: css,
         py: (displayValue == null ? void 0 : displayValue.length) && component ? "0.125rem" : void 0,
         ...rest,
@@ -638,7 +642,7 @@ var MultiAutocompleteField = forwardRef7(
           /* @__PURE__ */ jsx7(
             ui7.input,
             {
-              className: cx7("ui-autocomplete__field__input", className),
+              className: "ui-multi-autocomplete__field__input",
               display: "inline-block",
               flex: "1",
               overflow: "hidden",
@@ -794,6 +798,7 @@ var useAutocomplete = ({
   closeOnBlur = true,
   closeOnEsc = true,
   allowCreate = false,
+  allowFree = false,
   insertPositionItem = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
@@ -810,12 +815,13 @@ var useAutocomplete = ({
   const formControlProps = pickObject(rest, formControlProperties);
   const [containerProps, inputProps] = splitObject(
     omitObject(rest, [
+      ...popoverProperties,
       "id",
       "value",
       "defaultValue",
       "onChange",
-      "month",
-      "onChangeMonth"
+      "onCreate",
+      "onSearch"
     ]),
     layoutStylesProperties
   );
@@ -1080,6 +1086,10 @@ var useAutocomplete = ({
         var _a;
         return (_a = node.textContent) != null ? _a : "";
       });
+      if (allowFree && selectedValues2.length === 0) {
+        selectedValues2.push(newValue);
+        setInputValue("");
+      }
       setDisplayValue((prev) => {
         if (!isMulti) {
           return selectedValues2[0];
@@ -1096,7 +1106,7 @@ var useAutocomplete = ({
         }
       });
     },
-    [descendants, isMulti]
+    [descendants, isMulti, allowFree]
   );
   const onChange = useCallback(
     (newValue) => {
@@ -1112,11 +1122,26 @@ var useAutocomplete = ({
           }
         }
       });
+      const isHit2 = descendants.values().filter(
+        ({ node }) => {
+          var _a;
+          return format((_a = node.textContent) != null ? _a : "").includes(newValue);
+        }
+      ).length > 0;
       onChangeDisplayValue(newValue);
-      setInputValue("");
+      if (!allowFree || isHit2) {
+        setInputValue("");
+      }
       rebirthOptions(false);
     },
-    [onChangeDisplayValue, rebirthOptions, setValue]
+    [
+      allowFree,
+      onChangeDisplayValue,
+      rebirthOptions,
+      setValue,
+      descendants,
+      format
+    ]
   );
   const onSelect = useCallback(() => {
     var _a, _b;
@@ -1250,11 +1275,15 @@ var useAutocomplete = ({
         return;
       if (!closeOnBlur && isHit)
         return;
-      setInputValue("");
+      if (allowFree && !!inputValue) {
+        onChange(inputValue);
+      } else {
+        setInputValue("");
+      }
       if (isOpen)
         onClose();
     },
-    [closeOnBlur, isHit, isOpen, onClose]
+    [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
   );
   const onKeyDown = useCallback(
     (ev) => {
@@ -1269,7 +1298,11 @@ var useAutocomplete = ({
         ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
         ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? funcAll(onOpen, onFocusLastOrSelected) : void 0,
         Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
-        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
+        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
+          if (inputValue)
+            onChange(inputValue);
+          setFocusedIndex(0);
+        } : void 0,
         Home: isOpen ? onFocusFirst : void 0,
         End: isOpen ? onFocusLast : void 0,
         Escape: closeOnEsc ? onClose : void 0,
@@ -1283,11 +1316,13 @@ var useAutocomplete = ({
       action(ev);
     },
     [
+      allowFree,
       formControlProps,
       displayValue,
       inputValue,
       onOpen,
       isFocused,
+      isMulti,
       onFocusFirstOrSelected,
       onFocusNext,
       onFocusLastOrSelected,
@@ -1301,7 +1336,8 @@ var useAutocomplete = ({
       closeOnEsc,
       onClose,
       isEmptyValue,
-      onDelete
+      onDelete,
+      onChange
     ]
   );
   useEffect(() => {
@@ -1326,7 +1362,7 @@ var useAutocomplete = ({
     maxSelectedValues
   ]);
   useUpdateEffect(() => {
-    if (isOpen)
+    if (isOpen || allowFree)
       return;
     setFocusedIndex(-1);
     setInputValue("");
@@ -1346,6 +1382,7 @@ var useAutocomplete = ({
   });
   const getPopoverProps = useCallback(
     (props) => ({
+      matchWidth: true,
       ...rest,
       ...props,
       isOpen,
@@ -1396,6 +1433,7 @@ var useAutocomplete = ({
     omitSelectedValues,
     closeOnSelect,
     allowCreate,
+    allowFree,
     emptyMessage,
     isOpen,
     isAllSelected,

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-3e77a4da.js';
+export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-72ef1a50.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-3e77a4da.js';
+export { b as AutocompleteItem, A as AutocompleteOption, a as AutocompleteOptionProps } from './use-autocomplete-72ef1a50.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

@@ -32,7 +32,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/autocomplete.tsx
 var import_core4 = require("@yamada-ui/core");
-var import_popover2 = require("@yamada-ui/popover");
+var import_popover3 = require("@yamada-ui/popover");
 var import_utils4 = require("@yamada-ui/utils");
 
 // src/autocomplete-icon.tsx
@@ -45,6 +45,7 @@ var import_react2 = require("react");
 // src/use-autocomplete.tsx
 var import_core = require("@yamada-ui/core");
 var import_form_control = require("@yamada-ui/form-control");
+var import_popover = require("@yamada-ui/popover");
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
 var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_use_outside_click = require("@yamada-ui/use-outside-click");
@@ -189,6 +190,7 @@ var useAutocomplete = ({
   closeOnBlur = true,
   closeOnEsc = true,
   allowCreate = false,
+  allowFree = false,
   insertPositionItem = "first",
   emptyMessage = "No results found",
   format = defaultFormat,
@@ -205,12 +207,13 @@ var useAutocomplete = ({
   const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
   const [containerProps, inputProps] = (0, import_utils.splitObject)(
     (0, import_utils.omitObject)(rest, [
+      ...import_popover.popoverProperties,
       "id",
       "value",
       "defaultValue",
       "onChange",
-      "month",
-      "onChangeMonth"
+      "onCreate",
+      "onSearch"
     ]),
     import_core.layoutStylesProperties
   );
@@ -475,6 +478,10 @@ var useAutocomplete = ({
         var _a;
         return (_a = node.textContent) != null ? _a : "";
       });
+      if (allowFree && selectedValues2.length === 0) {
+        selectedValues2.push(newValue);
+        setInputValue("");
+      }
       setDisplayValue((prev) => {
         if (!isMulti) {
           return selectedValues2[0];
@@ -491,7 +498,7 @@ var useAutocomplete = ({
         }
       });
     },
-    [descendants, isMulti]
+    [descendants, isMulti, allowFree]
   );
   const onChange = (0, import_react.useCallback)(
     (newValue) => {
@@ -507,11 +514,26 @@ var useAutocomplete = ({
           }
         }
       });
+      const isHit2 = descendants.values().filter(
+        ({ node }) => {
+          var _a;
+          return format((_a = node.textContent) != null ? _a : "").includes(newValue);
+        }
+      ).length > 0;
       onChangeDisplayValue(newValue);
-      setInputValue("");
+      if (!allowFree || isHit2) {
+        setInputValue("");
+      }
       rebirthOptions(false);
     },
-    [onChangeDisplayValue, rebirthOptions, setValue]
+    [
+      allowFree,
+      onChangeDisplayValue,
+      rebirthOptions,
+      setValue,
+      descendants,
+      format
+    ]
   );
   const onSelect = (0, import_react.useCallback)(() => {
     var _a, _b;
@@ -645,11 +667,15 @@ var useAutocomplete = ({
         return;
       if (!closeOnBlur && isHit)
         return;
-      setInputValue("");
+      if (allowFree && !!inputValue) {
+        onChange(inputValue);
+      } else {
+        setInputValue("");
+      }
       if (isOpen)
         onClose();
     },
-    [closeOnBlur, isHit, isOpen, onClose]
+    [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
   );
   const onKeyDown = (0, import_react.useCallback)(
     (ev) => {
@@ -664,7 +690,11 @@ var useAutocomplete = ({
         ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
         Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
+          if (inputValue)
+            onChange(inputValue);
+          setFocusedIndex(0);
+        } : void 0,
         Home: isOpen ? onFocusFirst : void 0,
         End: isOpen ? onFocusLast : void 0,
         Escape: closeOnEsc ? onClose : void 0,
@@ -678,11 +708,13 @@ var useAutocomplete = ({
       action(ev);
     },
     [
+      allowFree,
       formControlProps,
       displayValue,
       inputValue,
       onOpen,
       isFocused,
+      isMulti,
       onFocusFirstOrSelected,
       onFocusNext,
       onFocusLastOrSelected,
@@ -696,7 +728,8 @@ var useAutocomplete = ({
       closeOnEsc,
       onClose,
       isEmptyValue,
-      onDelete
+      onDelete,
+      onChange
     ]
   );
   (0, import_react.useEffect)(() => {
@@ -721,7 +754,7 @@ var useAutocomplete = ({
     maxSelectedValues
   ]);
   (0, import_utils.useUpdateEffect)(() => {
-    if (isOpen)
+    if (isOpen || allowFree)
       return;
     setFocusedIndex(-1);
     setInputValue("");
@@ -741,6 +774,7 @@ var useAutocomplete = ({
   });
   const getPopoverProps = (0, import_react.useCallback)(
     (props) => ({
+      matchWidth: true,
       ...rest,
       ...props,
       isOpen,
@@ -791,6 +825,7 @@ var useAutocomplete = ({
     omitSelectedValues,
     closeOnSelect,
     allowCreate,
+    allowFree,
     emptyMessage,
     isOpen,
     isAllSelected,
@@ -1268,7 +1303,7 @@ var AutocompleteItemIcon = (0, import_core2.forwardRef)(({ className, ...rest },
 
 // src/autocomplete-list.tsx
 var import_core3 = require("@yamada-ui/core");
-var import_popover = require("@yamada-ui/popover");
+var import_popover2 = require("@yamada-ui/popover");
 var import_utils3 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var AutocompleteList = (0, import_core3.forwardRef)(
@@ -1280,7 +1315,7 @@ var AutocompleteList = (0, import_core3.forwardRef)(
     minW = (_h = minW != null ? minW : minWidth) != null ? _h : (_g = (_e = styles.list) == null ? void 0 : _e.minW) != null ? _g : (_f = styles.list) == null ? void 0 : _f.minWidth;
     const css = { ...styles.list };
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_popover.PopoverContent,
+      import_popover2.PopoverContent,
       {
         className: (0, import_utils3.cx)("ui-autocomplete__list", className),
         w,
@@ -1327,7 +1362,6 @@ var Autocomplete = (0, import_core4.forwardRef)(
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     const css = {
-      position: "relative",
       w: "100%",
       h: "fit-content",
       color,
@@ -1344,23 +1378,32 @@ var Autocomplete = (0, import_core4.forwardRef)(
           isEmpty,
           styles
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover3.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_core4.ui.div,
           {
             className: (0, import_utils4.cx)("ui-autocomplete", className),
             __css: css,
             ...getContainerProps(containerProps),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                AutocompleteField,
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                import_core4.ui.div,
                 {
-                  h,
-                  minH,
-                  inputProps,
-                  ...getFieldProps({}, ref)
+                  className: "ui-autocomplete__inner",
+                  __css: { position: "relative", ...styles.inner },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      AutocompleteField,
+                      {
+                        h,
+                        minH,
+                        inputProps,
+                        ...getFieldProps({}, ref)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps })
+                  ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps }),
               !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AutocompleteList, { ...listProps, children: [
                 allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteEmpty, {}),
                 children != null ? children : computedChildren
@@ -1385,7 +1428,7 @@ var AutocompleteField = (0, import_core4.forwardRef)(
       ...styles.field,
       cursor: "text"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover3.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_core4.ui.div,
       {
         className: (0, import_utils4.cx)("ui-autocomplete__field", className),
@@ -1589,7 +1632,7 @@ var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { view
 
 // src/multi-autocomplete.tsx
 var import_core9 = require("@yamada-ui/core");
-var import_popover3 = require("@yamada-ui/popover");
+var import_popover4 = require("@yamada-ui/popover");
 var import_utils9 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -1642,7 +1685,6 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     const css = {
-      position: "relative",
       w: "100%",
       h: "fit-content",
       color,
@@ -1660,33 +1702,42 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
           isEmpty,
           styles
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover4.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           import_core9.ui.div,
           {
-            className: (0, import_utils9.cx)("ui-autocomplete", className),
+            className: (0, import_utils9.cx)("ui-multi-autocomplete", className),
             __css: css,
             ...getContainerProps(containerProps),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                MultiAutocompleteField,
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                import_core9.ui.div,
                 {
-                  component,
-                  separator,
-                  keepPlaceholder,
-                  h,
-                  minH,
-                  inputProps,
-                  ...getFieldProps({}, ref)
+                  className: "ui-multi-autocomplete__inner",
+                  __css: { position: "relative", ...styles.inner },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      MultiAutocompleteField,
+                      {
+                        component,
+                        separator,
+                        keepPlaceholder,
+                        h,
+                        minH,
+                        inputProps,
+                        ...getFieldProps({}, ref)
+                      }
+                    ),
+                    isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      AutocompleteClearIcon,
+                      {
+                        ...clearIconProps,
+                        onClick: (0, import_utils9.handlerAll)(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
+                        ...formControlProps
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps })
+                  ]
                 }
               ),
-              isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                AutocompleteClearIcon,
-                {
-                  ...clearIconProps,
-                  onClick: (0, import_utils9.handlerAll)(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
-                  ...formControlProps
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps }),
               !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(AutocompleteList, { ...listProps, children: [
                 allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteEmpty, {}),
                 children != null ? children : computedChildren
@@ -1765,10 +1816,10 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
       ...styles.field,
       cursor: "text"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover4.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_core9.ui.div,
       {
-        className: (0, import_utils9.cx)("ui-autocomplete__field", className),
+        className: (0, import_utils9.cx)("ui-multi-autocomplete__field", className),
         __css: css,
         py: (displayValue == null ? void 0 : displayValue.length) && component ? "0.125rem" : void 0,
         ...rest,
@@ -1777,7 +1828,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_core9.ui.input,
             {
-              className: (0, import_utils9.cx)("ui-autocomplete__field__input", className),
+              className: "ui-multi-autocomplete__field__input",
               display: "inline-block",
               flex: "1",
               overflow: "hidden",