@yamada-ui/autocomplete 1.5.1 → 1.5.2-dev-20240917033401

package/dist/use-autocomplete.js

@@ -21,35 +21,41 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/use-autocomplete.tsx
 var use_autocomplete_exports = {};
 __export(use_autocomplete_exports, {
-  AutocompleteDescendantsContextProvider: () => AutocompleteDescendantsContextProvider,
-  AutocompleteProvider: () => AutocompleteProvider,
   useAutocomplete: () => useAutocomplete,
-  useAutocompleteContext: () => useAutocompleteContext,
-  useAutocompleteCreate: () => useAutocompleteCreate,
-  useAutocompleteDescendant: () => useAutocompleteDescendant,
-  useAutocompleteDescendants: () => useAutocompleteDescendants,
-  useAutocompleteDescendantsContext: () => useAutocompleteDescendantsContext,
-  useAutocompleteEmpty: () => useAutocompleteEmpty,
-  useAutocompleteInput: () => useAutocompleteInput,
-  useAutocompleteList: () => useAutocompleteList,
-  useAutocompleteOption: () => useAutocompleteOption,
-  useAutocompleteOptionGroup: () => useAutocompleteOptionGroup
+  useAutocompleteInput: () => useAutocompleteInput
 });
 module.exports = __toCommonJS(use_autocomplete_exports);
-var import_core4 = require("@yamada-ui/core");
+var import_core5 = require("@yamada-ui/core");
 var import_form_control = require("@yamada-ui/form-control");
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
-var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_use_disclosure = require("@yamada-ui/use-disclosure");
 var import_use_outside_click = require("@yamada-ui/use-outside-click");
+var import_utils7 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+
+// src/autocomplete-context.ts
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_utils = require("@yamada-ui/utils");
+var {
+  DescendantsContextProvider: AutocompleteDescendantsContextProvider,
+  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendants: useAutocompleteDescendants,
+  useDescendant: useAutocompleteDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
+  name: "AutocompleteContext",
+  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
+});
+
+// src/autocomplete-option.tsx
+var import_core2 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
-var import_react2 = require("react");
 
 // src/autocomplete-icon.tsx
 var import_core = require("@yamada-ui/core");
 var import_icon = require("@yamada-ui/icon");
 var import_use_clickable = require("@yamada-ui/use-clickable");
-var import_utils = require("@yamada-ui/utils");
+var import_utils2 = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var AutocompleteIcon = (0, import_core.forwardRef)(
@@ -67,7 +73,7 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
       ...styles.icon,
       ...__css
     };
-    const validChildren = (0, import_utils.getValidChildren)(children);
+    const validChildren = (0, import_utils2.getValidChildren)(children);
     const cloneChildren = validChildren.map(
       (child) => (0, import_react.cloneElement)(child, {
         focusable: false,
@@ -83,10 +89,10 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
       import_core.ui.div,
       {
         ref,
-        className: (0, import_utils.cx)("ui-autocomplete__icon", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
-        children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
+        children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
       }
     );
   }
@@ -105,63 +111,144 @@ var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest },
     import_core.ui.span,
     {
       ref,
-      className: (0, import_utils.cx)("ui-autocomplete__item__icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
   );
 });
 
-// src/autocomplete-option-group.tsx
-var import_core2 = require("@yamada-ui/core");
-var import_utils2 = require("@yamada-ui/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
-  ({ className, color, h, height, minH, minHeight, children, ...rest }, ref) => {
-    const { styles } = useAutocompleteContext();
-    const { label, getContainerProps, getGroupProps } = useAutocompleteOptionGroup(rest);
-    h != null ? h : h = height;
-    minH != null ? minH : minH = minHeight;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_core2.ui.li,
-      {
-        className: (0, import_utils2.cx)(
-          "ui-autocomplete__item",
-          "ui-autocomplete__item--group",
-          className
-        ),
-        __css: { w: "100%", h: "fit-content", color },
-        ...getContainerProps(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_core2.ui.span,
-            {
-              className: "ui-autocomplete__item__group-label",
-              __css: styles.groupLabel,
-              lineClamp: 1,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_core2.ui.ul,
-            {
-              ...getGroupProps({}, ref),
-              className: "ui-autocomplete__item__group",
-              __css: { h, minH, ...styles.group },
-              children
-            }
-          )
-        ]
+// src/use-autocomplete-option.ts
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var isTargetOption = (target) => {
+  var _a;
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
+};
+var useAutocompleteOption = (props) => {
+  var _a, _b;
+  const {
+    value,
+    omitSelectedValues,
+    onChange,
+    onChangeLabel,
+    focusedIndex,
+    setFocusedIndex,
+    onClose,
+    closeOnSelect: generalCloseOnSelect,
+    optionProps,
+    inputRef,
+    onFocusNext
+  } = useAutocompleteContext();
+  let {
+    icon: customIcon,
+    isDisabled,
+    isFocusable,
+    closeOnSelect: customCloseOnSelect,
+    children,
+    value: optionValue,
+    ...computedProps
+  } = { ...optionProps, ...props };
+  const trulyDisabled = !!isDisabled && !isFocusable;
+  const itemRef = (0, import_react2.useRef)(null);
+  const { index, register, descendants } = useAutocompleteDescendant({
+    disabled: trulyDisabled
+  });
+  const values = descendants.values();
+  const frontValues = values.slice(0, index);
+  const isMulti = (0, import_utils3.isArray)(value);
+  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
+  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
+  const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
+  const isFocused = index === focusedIndex;
+  const onClick = (0, import_react2.useCallback)(
+    (ev) => {
+      ev.stopPropagation();
+      if (isDisabled) {
+        if (inputRef.current) inputRef.current.focus();
+        return;
       }
-    );
-  }
-);
+      if (!isTargetOption(ev.currentTarget)) {
+        if (inputRef.current) inputRef.current.focus();
+        return;
+      }
+      setFocusedIndex(index);
+      onChange(optionValue != null ? optionValue : "");
+      if (inputRef.current) inputRef.current.focus();
+      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
+      if (omitSelectedValues) onFocusNext(index);
+    },
+    [
+      onFocusNext,
+      omitSelectedValues,
+      isDisabled,
+      optionValue,
+      setFocusedIndex,
+      index,
+      onChange,
+      customCloseOnSelect,
+      generalCloseOnSelect,
+      onClose,
+      inputRef
+    ]
+  );
+  (0, import_utils3.useUpdateEffect)(() => {
+    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
+  }, [optionValue]);
+  const getOptionProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => {
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
+        id: (0, import_react2.useId)(),
+        role: "option",
+        ...computedProps,
+        ...props2,
+        tabIndex: -1,
+        style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
+        "data-target": (0, import_utils3.dataAttr)(true),
+        "data-value": optionValue != null ? optionValue : "",
+        "data-focus": (0, import_utils3.dataAttr)(isFocused),
+        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+        "aria-checked": isSelected,
+        "aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
+        onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
+      };
+    },
+    [
+      optionValue,
+      computedProps,
+      isDisabled,
+      isFocused,
+      isSelected,
+      isTarget,
+      omitSelectedValues,
+      onClick,
+      register
+    ]
+  );
+  return {
+    isSelected,
+    isFocused,
+    customIcon,
+    children,
+    getOptionProps
+  };
+};
 
 // src/autocomplete-option.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var AutocompleteOption = (0, import_core3.forwardRef)(
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AutocompleteOption = (0, import_core2.forwardRef)(
   ({ className, icon, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
     const { isSelected, customIcon, children, getOptionProps } = useAutocompleteOption(rest);
@@ -179,27 +266,142 @@ var AutocompleteOption = (0, import_core3.forwardRef)(
       gap: "0.75rem",
       ...styles.item
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_core3.ui.li,
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.li,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete__item", className),
+        className: (0, import_utils4.cx)("ui-autocomplete__item", className),
         __css: css,
         ...getOptionProps({}, ref),
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { flex: 1 }, "data-label": true, children })
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, "data-label": true, children })
+        ]
+      }
+    );
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "polygon",
+  {
+    fill: "currentColor",
+    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+  }
+) });
+
+// src/autocomplete-option-group.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+
+// src/use-autocomplete-option-group.ts
+var import_core3 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var useAutocompleteOptionGroup = ({
+  label,
+  ...rest
+}) => {
+  const { value, omitSelectedValues } = useAutocompleteContext();
+  const isMulti = (0, import_utils5.isArray)(value);
+  const descendants = useAutocompleteDescendantsContext();
+  const values = descendants.values();
+  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+    ({ node }) => {
+      var _a;
+      return value.includes((_a = node.dataset.value) != null ? _a : "");
+    }
+  ) : [];
+  const selectedIndexes = selectedValues.map(({ index }) => index);
+  const childValues = values.filter(
+    ({ node, index }) => {
+      var _a;
+      return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
+    }
+  );
+  const isEmpty = !childValues.length;
+  const [containerProps, groupProps] = (0, import_utils5.splitObject)(rest, import_core3.layoutStyleProperties);
+  const getContainerProps = (0, import_react3.useCallback)(
+    (props = {}, ref = null) => {
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref,
+        ...props,
+        ...containerProps,
+        style: isEmpty ? style : void 0,
+        "data-label": label,
+        role: "autocomplete-group-container"
+      };
+    },
+    [containerProps, isEmpty, label]
+  );
+  const getGroupProps = (0, import_react3.useCallback)(
+    (props = {}, ref = null) => ({
+      ref,
+      ...props,
+      ...groupProps,
+      "data-label": label,
+      role: "autocomplete-group"
+    }),
+    [groupProps, label]
+  );
+  return {
+    label,
+    getContainerProps,
+    getGroupProps
+  };
+};
+
+// src/autocomplete-option-group.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AutocompleteOptionGroup = (0, import_core4.forwardRef)(
+  ({ className, color, h, height, minH, minHeight, children, ...rest }, ref) => {
+    const { styles } = useAutocompleteContext();
+    const { label, getContainerProps, getGroupProps } = useAutocompleteOptionGroup(rest);
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_core4.ui.li,
+      {
+        className: (0, import_utils6.cx)(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
+        __css: { w: "100%", h: "fit-content", color },
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_core4.ui.span,
+            {
+              className: "ui-autocomplete__item__group-label",
+              __css: styles.groupLabel,
+              lineClamp: 1,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_core4.ui.ul,
+            {
+              ...getGroupProps({}, ref),
+              className: "ui-autocomplete__item__group",
+              __css: { h, minH, ...styles.group },
+              children
+            }
+          )
         ]
       }
     );
   }
 );
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "polygon",
-  {
-    fill: "currentColor",
-    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
-  }
-) });
 
 // src/use-autocomplete.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -318,20 +520,6 @@ var flattenItems = (items) => {
   }).filter(Boolean);
   return filterItems(items).flat(Infinity);
 };
-var isTargetOption = (target) => {
-  var _a;
-  return (0, import_utils4.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
-};
-var {
-  DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
-  useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
-} = (0, import_use_descendant.createDescendant)();
-var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils4.createContext)({
-  name: "AutocompleteContext",
-  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
-});
 var useAutocomplete = (props) => {
   const {
     value: valueProp,
@@ -380,27 +568,27 @@ var useAutocomplete = (props) => {
     "aria-readonly": _ariaReadonly,
     onFocus: onFocusProp,
     ...formControlProps
-  } = (0, import_utils4.pickObject)(rest, import_form_control.formControlProperties);
-  const [containerProps, inputProps] = (0, import_utils4.splitObject)(rest, import_core4.layoutStyleProperties);
+  } = (0, import_utils7.pickObject)(rest, import_form_control.formControlProperties);
+  const [containerProps, inputProps] = (0, import_utils7.splitObject)(rest, import_core5.layoutStyleProperties);
   const { id } = rest;
   const descendants = useAutocompleteDescendants();
-  const containerRef = (0, import_react2.useRef)(null);
-  const listRef = (0, import_react2.useRef)(null);
-  const inputRef = (0, import_react2.useRef)(null);
-  const timeoutIds = (0, import_react2.useRef)(/* @__PURE__ */ new Set([]));
-  const isComposition = (0, import_react2.useRef)(false);
-  const prevValue = (0, import_react2.useRef)(void 0);
-  const [resolvedItems, setResolvedItems] = (0, import_react2.useState)(items ? JSON.parse(JSON.stringify(items)) : void 0);
+  const containerRef = (0, import_react4.useRef)(null);
+  const listRef = (0, import_react4.useRef)(null);
+  const inputRef = (0, import_react4.useRef)(null);
+  const timeoutIds = (0, import_react4.useRef)(/* @__PURE__ */ new Set([]));
+  const isComposition = (0, import_react4.useRef)(false);
+  const prevValue = (0, import_react4.useRef)(void 0);
+  const [resolvedItems, setResolvedItems] = (0, import_react4.useState)(items ? JSON.parse(JSON.stringify(items)) : void 0);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
     value: valueProp,
     defaultValue,
     onChange: onChangeProp
   });
-  const [label, setLabel] = (0, import_react2.useState)(void 0);
-  const [inputValue, setInputValue] = (0, import_react2.useState)("");
-  const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
-  const [isAllSelected, setIsAllSelected] = (0, import_react2.useState)(false);
-  const [isHit, setIsHit] = (0, import_react2.useState)(true);
+  const [label, setLabel] = (0, import_react4.useState)(void 0);
+  const [inputValue, setInputValue] = (0, import_react4.useState)("");
+  const [focusedIndex, setFocusedIndex] = (0, import_react4.useState)(-1);
+  const [isAllSelected, setIsAllSelected] = (0, import_react4.useState)(false);
+  const [isHit, setIsHit] = (0, import_react4.useState)(true);
   const {
     isOpen,
     onOpen: onInternalOpen,
@@ -413,16 +601,16 @@ var useAutocomplete = (props) => {
   });
   const isFocused = focusedIndex > -1;
   const isCreate = focusedIndex === -2 && allowCreate;
-  const isMulti = (0, import_utils4.isArray)(value);
+  const isMulti = (0, import_utils7.isArray)(value);
   const isEmptyValue = !isMulti ? !value : !value.length;
-  const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react2.useMemo)(() => {
-    if ((0, import_utils4.isArray)(insertPositionItem)) {
+  const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react4.useMemo)(() => {
+    if ((0, import_utils7.isArray)(insertPositionItem)) {
       return insertPositionItem;
     } else {
       return [insertPositionItem, "first"];
     }
   }, [insertPositionItem]);
-  if (allowCreate && !(0, import_utils4.isUndefined)(children)) {
+  if (allowCreate && !(0, import_utils7.isUndefined)(children)) {
     console.warn(
       `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`
     );
@@ -437,35 +625,27 @@ var useAutocomplete = (props) => {
   const enabledValues = descendants.enabledValues(
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
-  const validChildren = (0, import_utils4.getValidChildren)(children);
-  const computedChildren = (0, import_react2.useMemo)(
+  const validChildren = (0, import_utils7.getValidChildren)(children);
+  const computedChildren = (0, import_react4.useMemo)(
     () => resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
       if ("value" in item) {
         const { label: label2, value: value2, ...props2 } = item;
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
       } else if ("items" in item) {
         const { label: label2, items: items2 = [], ...props2 } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          AutocompleteOptionGroup,
-          {
-            label: label2,
-            ...props2,
-            children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2))
-          },
-          i
-        );
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOptionGroup, { label: label2, ...props2, children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2)) }, i);
       }
     }),
     [resolvedItems]
   );
   const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
-  const onOpen = (0, import_react2.useCallback)(() => {
+  const onOpen = (0, import_react4.useCallback)(() => {
     if (formControlProps.disabled || formControlProps.readOnly) return;
     if (!allowCreate && (isEmpty || isAllSelected)) return;
     onInternalOpen();
     if (inputRef.current) inputRef.current.focus();
   }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
-  const onFocusFirst = (0, import_react2.useCallback)(() => {
+  const onFocusFirst = (0, import_react4.useCallback)(() => {
     const id2 = setTimeout(() => {
       if (isEmpty || isAllSelected) return;
       const first = descendants.enabledFirstValue(
@@ -493,7 +673,7 @@ var useAutocomplete = (props) => {
     omitSelectedValues,
     selectedIndexes
   ]);
-  const onFocusLast = (0, import_react2.useCallback)(() => {
+  const onFocusLast = (0, import_react4.useCallback)(() => {
     const id2 = setTimeout(() => {
       if (isEmpty || isAllSelected) return;
       const last = descendants.enabledLastValue(
@@ -521,7 +701,7 @@ var useAutocomplete = (props) => {
     omitSelectedValues,
     selectedIndexes
   ]);
-  const onFocusSelected = (0, import_react2.useCallback)(() => {
+  const onFocusSelected = (0, import_react4.useCallback)(() => {
     const id2 = setTimeout(() => {
       const values = descendants.enabledValues();
       const selected = values.find(
@@ -534,7 +714,7 @@ var useAutocomplete = (props) => {
     });
     timeoutIds.current.add(id2);
   }, [descendants, isMulti, value]);
-  const onFocusNext = (0, import_react2.useCallback)(
+  const onFocusNext = (0, import_react4.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
         var _a;
@@ -565,7 +745,7 @@ var useAutocomplete = (props) => {
       selectedIndexes
     ]
   );
-  const onFocusPrev = (0, import_react2.useCallback)(
+  const onFocusPrev = (0, import_react4.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
         var _a;
@@ -598,7 +778,7 @@ var useAutocomplete = (props) => {
   );
   const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
   const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
-  const pickOptions = (0, import_react2.useCallback)(
+  const pickOptions = (0, import_react4.useCallback)(
     (value2) => {
       const values = descendants.values();
       let isHit2 = false;
@@ -621,7 +801,7 @@ var useAutocomplete = (props) => {
     },
     [descendants, format]
   );
-  const rebirthOptions = (0, import_react2.useCallback)(
+  const rebirthOptions = (0, import_react4.useCallback)(
     (runFocus = true) => {
       const values = descendants.values();
       values.forEach(({ node }) => {
@@ -632,10 +812,10 @@ var useAutocomplete = (props) => {
     },
     [descendants, onFocusFirst]
   );
-  const getSelectedValues = (0, import_react2.useCallback)(
+  const getSelectedValues = (0, import_react4.useCallback)(
     (newValues) => {
       const enabledValues2 = descendants.enabledValues();
-      const resolvedValues = (0, import_utils4.isArray)(newValues) ? newValues : [newValues];
+      const resolvedValues = (0, import_utils7.isArray)(newValues) ? newValues : [newValues];
       const selectedValues2 = resolvedValues.map((value2) => {
         var _a, _b;
         const { node } = (_a = enabledValues2.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
@@ -652,7 +832,7 @@ var useAutocomplete = (props) => {
     },
     [allowFree, descendants]
   );
-  const onChangeLabel = (0, import_react2.useCallback)(
+  const onChangeLabel = (0, import_react4.useCallback)(
     (newValue, { forceUpdate, runOmit = true } = {}) => {
       const selectedValues2 = getSelectedValues(newValue);
       if (!forceUpdate && !selectedValues2.length) return;
@@ -661,11 +841,11 @@ var useAutocomplete = (props) => {
           return selectedValues2[0];
         } else {
           selectedValues2.forEach((selectedValue) => {
-            const isSelected = (0, import_utils4.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
+            const isSelected = (0, import_utils7.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
             if (!isSelected) {
-              prev = [...(0, import_utils4.isArray)(prev) ? prev : [], selectedValue];
+              prev = [...(0, import_utils7.isArray)(prev) ? prev : [], selectedValue];
             } else if (runOmit) {
-              prev = (0, import_utils4.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
+              prev = (0, import_utils7.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
             }
           });
           return prev;
@@ -674,11 +854,11 @@ var useAutocomplete = (props) => {
     },
     [getSelectedValues, isMulti]
   );
-  const onChange = (0, import_react2.useCallback)(
+  const onChange = (0, import_react4.useCallback)(
     (newValue, { forceUpdate, runRebirth = true } = {}) => {
       setValue((prev) => {
         let next;
-        if (!(0, import_utils4.isArray)(prev)) {
+        if (!(0, import_utils7.isArray)(prev)) {
           next = newValue;
         } else {
           const isSelected = prev.includes(newValue);
@@ -711,7 +891,7 @@ var useAutocomplete = (props) => {
       format
     ]
   );
-  const onSelect = (0, import_react2.useCallback)(() => {
+  const onSelect = (0, import_react4.useCallback)(() => {
     var _a, _b;
     let enabledValue = descendants.value(focusedIndex);
     if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
@@ -730,7 +910,7 @@ var useAutocomplete = (props) => {
     onClose,
     onFocusNext
   ]);
-  const onSearch = (0, import_react2.useCallback)(
+  const onSearch = (0, import_react4.useCallback)(
     (ev) => {
       if (!isOpen) onOpen();
       onSearchProp == null ? void 0 : onSearchProp(ev);
@@ -745,13 +925,13 @@ var useAutocomplete = (props) => {
     },
     [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions]
   );
-  const onCompositionStart = (0, import_react2.useCallback)(() => {
+  const onCompositionStart = (0, import_react4.useCallback)(() => {
     isComposition.current = true;
   }, []);
-  const onCompositionEnd = (0, import_react2.useCallback)(() => {
+  const onCompositionEnd = (0, import_react4.useCallback)(() => {
     isComposition.current = false;
   }, []);
-  const onCreate = (0, import_react2.useCallback)(() => {
+  const onCreate = (0, import_react4.useCallback)(() => {
     var _a, _b;
     if (!listRef.current) return;
     const newItem = { label: inputValue, value: inputValue };
@@ -797,7 +977,7 @@ var useAutocomplete = (props) => {
     secondInsertPositionItem,
     isMulti
   ]);
-  const onClick = (0, import_react2.useCallback)(() => {
+  const onClick = (0, import_react4.useCallback)(() => {
     if (isOpen) {
       if (inputRef.current) inputRef.current.focus();
     } else {
@@ -805,15 +985,15 @@ var useAutocomplete = (props) => {
       onFocusFirstOrSelected();
     }
   }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onFocus = (0, import_react2.useCallback)(() => {
+  const onFocus = (0, import_react4.useCallback)(() => {
     if (isOpen) return;
     onOpen();
     onFocusFirstOrSelected();
   }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onBlur = (0, import_react2.useCallback)(
+  const onBlur = (0, import_react4.useCallback)(
     (ev) => {
-      const relatedTarget = (0, import_utils4.getEventRelatedTarget)(ev);
-      if ((0, import_utils4.isContains)(containerRef.current, relatedTarget)) return;
+      const relatedTarget = (0, import_utils7.getEventRelatedTarget)(ev);
+      if ((0, import_utils7.isContains)(containerRef.current, relatedTarget)) return;
       if (!closeOnBlur && isHit) return;
       if (allowFree && !!inputValue) onChange(inputValue, { runRebirth: false });
       setInputValue("");
@@ -821,7 +1001,7 @@ var useAutocomplete = (props) => {
     },
     [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
   );
-  const onDelete = (0, import_react2.useCallback)(() => {
+  const onDelete = (0, import_react4.useCallback)(() => {
     if (!isMulti) {
       onChange("", { forceUpdate: true });
     } else {
@@ -829,7 +1009,7 @@ var useAutocomplete = (props) => {
     }
     if (!isOpen) onFocus();
   }, [isMulti, isOpen, onChange, onFocus, value]);
-  const onClear = (0, import_react2.useCallback)(
+  const onClear = (0, import_react4.useCallback)(
     (ev) => {
       ev.stopPropagation();
       prevValue.current = [];
@@ -841,17 +1021,17 @@ var useAutocomplete = (props) => {
     },
     [isOpen, setLabel, setInputValue, setValue, rebirthOptions]
   );
-  const onKeyDown = (0, import_react2.useCallback)(
+  const onKeyDown = (0, import_react4.useCallback)(
     (ev) => {
       if (ev.key === " ") ev.key = ev.code;
       if (formControlProps.disabled || formControlProps.readOnly) return;
       if (isComposition.current) return;
       const enabledDelete = label === inputValue || !inputValue.length;
       const actions = {
-        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
+        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils7.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils7.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
+        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils7.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils7.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
           if (inputValue) onChange(inputValue);
           setFocusedIndex(0);
         } : void 0,
@@ -891,9 +1071,9 @@ var useAutocomplete = (props) => {
       onChange
     ]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isMulti) return;
-    if (!omitSelectedValues && (0, import_utils4.isUndefined)(maxSelectValues)) return;
+    if (!omitSelectedValues && (0, import_utils7.isUndefined)(maxSelectValues)) return;
     const isAll = value.length > 0 && value.length === descendants.count();
     const isMax = value.length === maxSelectValues;
     if (isAll || isMax) {
@@ -910,7 +1090,7 @@ var useAutocomplete = (props) => {
     onClose,
     maxSelectValues
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     var _a;
     if (isMulti) {
       if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value != null ? value : []))
@@ -922,18 +1102,18 @@ var useAutocomplete = (props) => {
       onChangeLabel(value, { runOmit: false });
     }
   }, [isMulti, value, onChangeLabel, getSelectedValues]);
-  (0, import_utils4.useUpdateEffect)(() => {
+  (0, import_utils7.useUpdateEffect)(() => {
     if (isOpen || allowFree) return;
     setFocusedIndex(-1);
     setInputValue("");
   }, [isOpen]);
-  (0, import_utils4.useUpdateEffect)(() => {
+  (0, import_utils7.useUpdateEffect)(() => {
     if (!isHit) setFocusedIndex(-2);
   }, [isHit]);
-  (0, import_utils4.useUpdateEffect)(() => {
+  (0, import_utils7.useUpdateEffect)(() => {
     setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
   }, [items]);
-  (0, import_utils4.useUnmountEffect)(() => {
+  (0, import_utils7.useUnmountEffect)(() => {
     timeoutIds.current.forEach((id2) => clearTimeout(id2));
     timeoutIds.current.clear();
   });
@@ -942,7 +1122,7 @@ var useAutocomplete = (props) => {
     handler: onClose,
     enabled: isOpen && (closeOnBlur || !isHit)
   });
-  const getPopoverProps = (0, import_react2.useCallback)(
+  const getPopoverProps = (0, import_react4.useCallback)(
     (props2) => ({
       closeOnBlur,
       openDelay,
@@ -991,28 +1171,28 @@ var useAutocomplete = (props) => {
       onClose
     ]
   );
-  const getContainerProps = (0, import_react2.useCallback)(
+  const getContainerProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({
-      ref: (0, import_utils4.mergeRefs)(containerRef, ref),
+      ref: (0, import_utils7.mergeRefs)(containerRef, ref),
       ...containerProps,
       ...props2,
       ...formControlProps,
-      onClick: (0, import_utils4.handlerAll)(props2.onClick, rest.onClick, onClick),
-      onBlur: (0, import_utils4.handlerAll)(props2.onBlur, rest.onBlur, onBlur)
+      onClick: (0, import_utils7.handlerAll)(props2.onClick, rest.onClick, onClick),
+      onBlur: (0, import_utils7.handlerAll)(props2.onBlur, rest.onBlur, onBlur)
     }),
     [containerProps, formControlProps, onBlur, onClick, rest]
   );
-  const getFieldProps = (0, import_react2.useCallback)(
+  const getFieldProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({
       ref,
       tabIndex: -1,
       ...props2,
       ...formControlProps,
       placeholder,
-      "data-active": (0, import_utils4.dataAttr)(isOpen),
-      "aria-expanded": (0, import_utils4.dataAttr)(isOpen),
-      onFocus: (0, import_utils4.handlerAll)(props2.onFocus, onFocusProp, onFocus),
-      onKeyDown: (0, import_utils4.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
+      "data-active": (0, import_utils7.dataAttr)(isOpen),
+      "aria-expanded": (0, import_utils7.dataAttr)(isOpen),
+      onFocus: (0, import_utils7.handlerAll)(props2.onFocus, onFocusProp, onFocus),
+      onKeyDown: (0, import_utils7.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
     }),
     [
       formControlProps,
@@ -1083,14 +1263,14 @@ var useAutocompleteInput = () => {
     listRef
   } = useAutocompleteContext();
   const { value } = useAutocompleteDescendantsContext();
-  (0, import_utils4.useUpdateEffect)(() => {
+  (0, import_utils7.useUpdateEffect)(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
-  const getInputProps = (0, import_react2.useCallback)(
+  const getInputProps = (0, import_react4.useCallback)(
     (props = {}, ref = null) => {
       var _a, _b;
       return {
-        ref: (0, import_utils4.mergeRefs)(inputRef, ref),
+        ref: (0, import_utils7.mergeRefs)(inputRef, ref),
         ...formControlProps,
         role: "combobox",
         "aria-haspopup": "listbox",
@@ -1107,13 +1287,13 @@ var useAutocompleteInput = () => {
         cursor: formControlProps.readOnly ? "default" : "text",
         pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
         tabIndex: isAllSelected ? -1 : 0,
-        onChange: (0, import_utils4.handlerAll)(props.onChange, onSearch),
-        onCompositionStart: (0, import_utils4.handlerAll)(
+        onChange: (0, import_utils7.handlerAll)(props.onChange, onSearch),
+        onCompositionStart: (0, import_utils7.handlerAll)(
           props.onCompositionStart,
           inputProps.onCompositionStart,
           onCompositionStart
         ),
-        onCompositionEnd: (0, import_utils4.handlerAll)(
+        onCompositionEnd: (0, import_utils7.handlerAll)(
           props.onCompositionEnd,
           inputProps.onCompositionEnd,
           onCompositionEnd
@@ -1139,311 +1319,9 @@ var useAutocompleteInput = () => {
     getInputProps
   };
 };
-var useAutocompleteList = () => {
-  const { focusedIndex, isOpen, listRef, rebirthOptions } = useAutocompleteContext();
-  const descendants = useAutocompleteDescendantsContext();
-  const beforeFocusedIndex = (0, import_react2.useRef)(-1);
-  const selectedValue = descendants.value(focusedIndex);
-  const onAnimationComplete = (0, import_react2.useCallback)(() => {
-    if (!isOpen) rebirthOptions(false);
-  }, [isOpen, rebirthOptions]);
-  (0, import_react2.useEffect)(() => {
-    if (!listRef.current || !selectedValue) return;
-    if (beforeFocusedIndex.current === selectedValue.index) return;
-    const parent = listRef.current;
-    const child = selectedValue.node;
-    const parentHeight = parent.clientHeight;
-    const viewTop = parent.scrollTop;
-    const viewBottom = viewTop + parentHeight;
-    const childHeight = child.clientHeight;
-    const childTop = child.offsetTop;
-    const childBottom = childTop + childHeight;
-    const isInView = viewTop <= childTop && childBottom <= viewBottom;
-    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
-    if (!isInView) {
-      if (childBottom <= parentHeight) {
-        listRef.current.scrollTo({ top: 0 });
-      } else {
-        if (!isScrollBottom) {
-          listRef.current.scrollTo({ top: childTop + 1 });
-        } else {
-          listRef.current.scrollTo({ top: childBottom - parentHeight });
-        }
-      }
-    }
-    beforeFocusedIndex.current = selectedValue.index;
-  }, [listRef, selectedValue]);
-  (0, import_utils4.useUpdateEffect)(() => {
-    if (!isOpen) beforeFocusedIndex.current = -1;
-  }, [isOpen]);
-  const getListProps = (0, import_react2.useCallback)(
-    (props = {}, ref = null) => ({
-      as: "ul",
-      ref: (0, import_utils4.mergeRefs)(listRef, ref),
-      role: "listbox",
-      tabIndex: -1,
-      position: "relative",
-      id: props.id || (0, import_react2.useId)(),
-      ...props
-    }),
-    [listRef]
-  );
-  return {
-    onAnimationComplete,
-    getListProps
-  };
-};
-var useAutocompleteOptionGroup = ({
-  label,
-  ...rest
-}) => {
-  const { value, omitSelectedValues } = useAutocompleteContext();
-  const isMulti = (0, import_utils4.isArray)(value);
-  const descendants = useAutocompleteDescendantsContext();
-  const values = descendants.values();
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
-    ({ node }) => {
-      var _a;
-      return value.includes((_a = node.dataset.value) != null ? _a : "");
-    }
-  ) : [];
-  const selectedIndexes = selectedValues.map(({ index }) => index);
-  const childValues = values.filter(
-    ({ node, index }) => {
-      var _a;
-      return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
-    }
-  );
-  const isEmpty = !childValues.length;
-  const [containerProps, groupProps] = (0, import_utils4.splitObject)(rest, import_core4.layoutStyleProperties);
-  const getContainerProps = (0, import_react2.useCallback)(
-    (props = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
-      return {
-        ref,
-        ...props,
-        ...containerProps,
-        style: isEmpty ? style : void 0,
-        "data-label": label,
-        role: "autocomplete-group-container"
-      };
-    },
-    [containerProps, isEmpty, label]
-  );
-  const getGroupProps = (0, import_react2.useCallback)(
-    (props = {}, ref = null) => ({
-      ref,
-      ...props,
-      ...groupProps,
-      "data-label": label,
-      role: "autocomplete-group"
-    }),
-    [groupProps, label]
-  );
-  return {
-    label,
-    getContainerProps,
-    getGroupProps
-  };
-};
-var useAutocompleteOption = (props) => {
-  var _a, _b;
-  const {
-    value,
-    omitSelectedValues,
-    onChange,
-    onChangeLabel,
-    focusedIndex,
-    setFocusedIndex,
-    onClose,
-    closeOnSelect: generalCloseOnSelect,
-    optionProps,
-    inputRef,
-    onFocusNext
-  } = useAutocompleteContext();
-  let {
-    icon: customIcon,
-    isDisabled,
-    isFocusable,
-    closeOnSelect: customCloseOnSelect,
-    children,
-    value: optionValue,
-    ...computedProps
-  } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
-  const itemRef = (0, import_react2.useRef)(null);
-  const { index, register, descendants } = useAutocompleteDescendant({
-    disabled: trulyDisabled
-  });
-  const values = descendants.values();
-  const frontValues = values.slice(0, index);
-  const isMulti = (0, import_utils4.isArray)(value);
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
-  const isFocused = index === focusedIndex;
-  const onClick = (0, import_react2.useCallback)(
-    (ev) => {
-      ev.stopPropagation();
-      if (isDisabled) {
-        if (inputRef.current) inputRef.current.focus();
-        return;
-      }
-      if (!isTargetOption(ev.currentTarget)) {
-        if (inputRef.current) inputRef.current.focus();
-        return;
-      }
-      setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
-      if (inputRef.current) inputRef.current.focus();
-      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
-      if (omitSelectedValues) onFocusNext(index);
-    },
-    [
-      onFocusNext,
-      omitSelectedValues,
-      isDisabled,
-      optionValue,
-      setFocusedIndex,
-      index,
-      onChange,
-      customCloseOnSelect,
-      generalCloseOnSelect,
-      onClose,
-      inputRef
-    ]
-  );
-  (0, import_utils4.useUpdateEffect)(() => {
-    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
-  }, [optionValue]);
-  const getOptionProps = (0, import_react2.useCallback)(
-    (props2 = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
-      return {
-        ref: (0, import_utils4.mergeRefs)(itemRef, ref, register),
-        id: (0, import_react2.useId)(),
-        role: "option",
-        ...computedProps,
-        ...props2,
-        tabIndex: -1,
-        style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
-        "data-target": (0, import_utils4.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
-        "data-focus": (0, import_utils4.dataAttr)(isFocused),
-        "data-disabled": (0, import_utils4.dataAttr)(isDisabled),
-        "aria-checked": isSelected,
-        "aria-disabled": (0, import_utils4.ariaAttr)(isDisabled),
-        onClick: (0, import_utils4.handlerAll)(computedProps.onClick, props2.onClick, onClick)
-      };
-    },
-    [
-      optionValue,
-      computedProps,
-      isDisabled,
-      isFocused,
-      isSelected,
-      isTarget,
-      omitSelectedValues,
-      onClick,
-      register
-    ]
-  );
-  return {
-    isSelected,
-    isFocused,
-    customIcon,
-    children,
-    getOptionProps
-  };
-};
-var useAutocompleteCreate = () => {
-  const { isHit, onCreate } = useAutocompleteContext();
-  const getCreateProps = (0, import_react2.useCallback)(
-    (props = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
-      return {
-        ref,
-        ...props,
-        tabIndex: -1,
-        style: isHit ? style : void 0,
-        "data-focus": (0, import_utils4.dataAttr)(!isHit),
-        onClick: (0, import_utils4.handlerAll)(props.onClick, onCreate)
-      };
-    },
-    [isHit, onCreate]
-  );
-  return { getCreateProps };
-};
-var useAutocompleteEmpty = () => {
-  const { isHit, isEmpty } = useAutocompleteContext();
-  const getEmptyProps = (0, import_react2.useCallback)(
-    (props = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
-      return {
-        ref,
-        ...props,
-        tabIndex: -1,
-        style: isHit && !isEmpty ? style : void 0
-      };
-    },
-    [isHit, isEmpty]
-  );
-  return { getEmptyProps };
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AutocompleteDescendantsContextProvider,
-  AutocompleteProvider,
   useAutocomplete,
-  useAutocompleteContext,
-  useAutocompleteCreate,
-  useAutocompleteDescendant,
-  useAutocompleteDescendants,
-  useAutocompleteDescendantsContext,
-  useAutocompleteEmpty,
-  useAutocompleteInput,
-  useAutocompleteList,
-  useAutocompleteOption,
-  useAutocompleteOptionGroup
+  useAutocompleteInput
 });
 //# sourceMappingURL=use-autocomplete.js.map