@choc-ui/chakra-autocomplete 5.8.4 → 5.9.1

package/dist/index.es.js

@@ -1,181 +1,167 @@
-import { jsx as p, jsxs as V, Fragment as ut } from "react/jsx-runtime";
-import * as pe from "react";
-import ee, { useMemo as te, useRef as ne, useState as Ne, useEffect as D, useImperativeHandle as at, memo as ct } from "react";
-import { useDisclosure as ft, useControllableState as pt, useUpdateEffect as dt, forwardRef as H, Popover as gt, chakra as mt, useMergeRefs as De, Flex as de, Box as Xe, Divider as $e, InputGroup as vt, Input as ht, InputRightElement as yt, Spinner as Ze, useMultiStyleConfig as bt, Wrap as Ct, WrapItem as qe, PopoverAnchor as St, PopoverContent as xt, Center as At, Tag as It, TagLabel as wt, TagCloseButton as Ot } from "@chakra-ui/react";
-const [Et, j] = Ft();
-function Ft() {
-  const e = pe.createContext(void 0);
+import { jsx as f, jsxs as H, Fragment as st } from "react/jsx-runtime";
+import * as ae from "react";
+import q, { useMemo as J, useRef as X, useState as we, useEffect as L, useImperativeHandle as lt, memo as it } from "react";
+import { useDisclosure as ut, useControllableState as at, useUpdateEffect as ct, forwardRef as k, Popover as ft, chakra as dt, useMergeRefs as Ee, Flex as ce, Box as Be, Divider as We, InputGroup as pt, Input as mt, InputRightElement as gt, Spinner as He, useMultiStyleConfig as ht, Wrap as vt, WrapItem as Ue, PopoverAnchor as yt, Portal as bt, PopoverContent as It, Center as Ct, Tag as St, TagLabel as xt, TagCloseButton as At } from "@chakra-ui/react";
+const [wt, _] = Ot();
+function Ot() {
+  const e = ae.createContext(void 0);
   e.displayName = "AutoCompleteContext";
   function t() {
-    var o;
-    const n = pe.useContext(e), r = "useAutoCompleteContext: `context` is undefined. Seems you forgot to wrap all autoomplete components within `<AutoComplete />`";
+    const n = ae.useContext(e), o = "useAutoCompleteContext: `context` is undefined. Seems you forgot to wrap all autoomplete components within `<AutoComplete />`";
     if (!n) {
-      const l = new Error(r);
-      throw l.name = "ContextError", (o = Error.captureStackTrace) == null || o.call(Error, l, t), l;
+      const r = new Error(o);
+      throw r.name = "ContextError", Error.captureStackTrace?.(r, t), r;
     }
     return n;
   }
   return [e.Provider, t, e];
 }
-function Lt(e) {
-  return e == null ? void 0 : e[0];
+function Et(e) {
+  return e?.[0];
 }
-function Pe(e) {
-  return e != null && e.length ? e[e.length - 1] : void 0;
+function Oe(e) {
+  return e?.length ? e[e.length - 1] : void 0;
 }
-function et(e, t, n = 1, r = !0) {
+function Qe(e, t, n = 1, o = !0) {
   if (t === 0) return -1;
-  let o = e + n;
-  return e === -1 && (o = n > 0 ? 0 : t - 1), r ? o = (o % t + t) % t : o = Math.max(0, Math.min(o, t - 1)), o;
+  let r = e + n;
+  return e === -1 && (r = n > 0 ? 0 : t - 1), o ? r = (r % t + t) % t : r = Math.max(0, Math.min(r, t - 1)), r;
 }
-function Nt(e, t, n = !0) {
-  return et(e, t, -1, n);
+function Lt(e, t, n = !0) {
+  return Qe(e, t, -1, n);
 }
-function Pt(e, t, n = !0) {
-  const r = et(e, t.length, 1, n);
-  return t[r];
+function Ft(e, t, n = !0) {
+  const o = Qe(e, t.length, 1, n);
+  return t[o];
 }
-function Dt(e, t, n = !0) {
-  const r = Nt(e, t.length, n);
-  return t[r];
+function Nt(e, t, n = !0) {
+  const o = Lt(e, t.length, n);
+  return t[o];
 }
-function Re(e) {
+function Le(e) {
   return Array.isArray(e);
 }
-function Rt(e) {
-  return Re(e) && e.length === 0;
+function Pt(e) {
+  return Le(e) && e.length === 0;
 }
-function Te(e) {
-  return e !== null && typeof e == "object" && !Re(e);
+function Fe(e) {
+  return e !== null && typeof e == "object" && !Le(e);
 }
-function Tt(e) {
-  return Te(e) && Object.keys(e).length === 0;
+function Rt(e) {
+  return Fe(e) && Object.keys(e).length === 0;
 }
-function Me(e) {
-  return Re(e) ? Rt(e) : Te(e) ? Tt(e) : e == null || e === "";
+function Ne(e) {
+  return Le(e) ? Pt(e) : Fe(e) ? Rt(e) : e == null || e === "";
 }
-function fe(e) {
+function ue(e) {
   return typeof e > "u";
 }
-function tt(e) {
+function $e(e) {
   return typeof e < "u";
 }
-function Mt(e, t) {
+function Dt(e, t) {
   const n = {};
-  return t.forEach((r) => {
-    r in e && (n[r] = e[r]);
+  return t.forEach((o) => {
+    o in e && (n[o] = e[o]);
   }), n;
 }
-function _e(e, t) {
+function Pe(e, t) {
   const n = { ...e };
-  return t.forEach((r) => {
-    delete n[r];
+  return t.forEach((o) => {
+    delete n[o];
   }), n;
 }
-function _t(e) {
+function Tt(e) {
   return typeof e == "function";
 }
-function m(e, ...t) {
-  return _t(e) ? e(...t) : e;
+function p(e, ...t) {
+  return Tt(e) ? e(...t) : e;
 }
-var ge = function(e, t) {
-  for (var n, r = pe.Children.toArray(e), o = 0, l = r; o < l.length; o++) {
-    var i = l[o];
+var fe = function(e, t) {
+  for (var n, o = ae.Children.toArray(e), r = 0, l = o; r < l.length; r++) {
+    var i = l[r];
     if (t(i))
       return i;
     if (!((n = i.props) === null || n === void 0) && n.children) {
-      var u = ge(i.props.children, t);
+      var u = fe(i.props.children, t);
       if (u)
         return u;
     }
   }
-}, ce = function(e, t) {
-  for (var n = 0, r = t.length, o = e.length; n < r; n++, o++)
-    e[o] = t[n];
+}, ie = function(e, t) {
+  for (var n = 0, o = t.length, r = e.length; n < o; n++, r++)
+    e[r] = t[n];
   return e;
-}, nt = function(e, t) {
-  for (var n, r = pe.Children.toArray(e), o = [], l = 0, i = r; l < i.length; l++) {
+}, Ke = function(e, t) {
+  for (var n, o = ae.Children.toArray(e), r = [], l = 0, i = o; l < i.length; l++) {
     var u = i[l];
-    t(u) && (o = ce(ce([], o), [u])), !((n = u.props) === null || n === void 0) && n.children && (o = ce(ce([], o), nt(u.props.children, t)));
+    t(u) && (r = ie(ie([], r), [u])), !((n = u.props) === null || n === void 0) && n.children && (r = ie(ie([], r), Ke(u.props.children, t)));
   }
-  return o;
+  return r;
 };
-function Ke(e, t, n = 2) {
-  function r(c, E) {
-    c = " ".repeat(E - 1) + c.toLowerCase() + " ".repeat(E - 1);
-    let b = new Array(c.length - E + 1);
-    for (let w = 0; w < b.length; w++)
-      b[w] = c.slice(w, w + E);
-    return b;
+function je(e, t, n = 2) {
+  function o(a, w) {
+    a = " ".repeat(w - 1) + a.toLowerCase() + " ".repeat(w - 1);
+    let v = new Array(a.length - w + 1);
+    for (let S = 0; S < v.length; S++)
+      v[S] = a.slice(S, S + w);
+    return v;
   }
-  if (!(e != null && e.length) || !(t != null && t.length))
+  if (!e?.length || !t?.length)
     return 0;
-  let o = e.length < t.length ? e : t, l = e.length < t.length ? t : e, i = r(o, n), u = r(l, n), v = new Set(i), h = u.length, y = 0;
-  for (let c of u)
-    v.delete(c) && y++;
-  return y / h;
+  let r = e.length < t.length ? e : t, l = e.length < t.length ? t : e, i = o(r, n), u = o(l, n), m = new Set(i), g = u.length, h = 0;
+  for (let a of u)
+    m.delete(a) && h++;
+  return h / g;
 }
-const Ge = (e) => {
-  var t;
-  return (t = typeof e == "string" || typeof e == "number" ? e : e[Object.keys(e)[0]]) == null ? void 0 : t.toString();
-}, Gt = (e, t) => typeof e != "string" || Me(t) ? e : e.toString().replace(
-  new RegExp(zt(t), "gi"),
-  (r) => `<mark>${r}</mark>`
-), Wt = (e) => nt(
+const Re = (e) => (typeof e == "string" || typeof e == "number" ? e : e[Object.keys(e)[0]])?.toString(), Mt = (e, t) => typeof e != "string" || Ne(t) ? e : e.toString().replace(
+  new RegExp(jt(t), "gi"),
+  (o) => `<mark>${o}</mark>`
+), _t = (e) => Ke(
   e,
-  (n) => {
-    var r;
-    return ((r = n == null ? void 0 : n.type) == null ? void 0 : r.displayName) === "AutoCompleteItem";
-  }
+  (n) => n?.type?.displayName === "AutoCompleteItem"
 ).map((n) => {
-  const r = Mt(n.props, ["value", "label", "fixed", "disabled"]), { getValue: o = Ge } = n.props, l = o(r.value);
-  return { ...tt(r.label) ? r : { ...r, label: l }, value: l, originalValue: r.value };
-}), jt = () => ({
+  const o = Dt(n.props, ["value", "label", "fixed", "disabled"]), { getValue: r = Re } = n.props, l = r(o.value);
+  return { ...$e(o.label) ? o : { ...o, label: l }, value: l, originalValue: o.value };
+}), Gt = () => ({
   bg: "whiteAlpha.100",
   _light: {
     bg: "gray.200"
   }
-}), kt = (e, t, n) => (t == null ? void 0 : t.toLowerCase().indexOf(e == null ? void 0 : e.toLowerCase())) >= 0 || (n == null ? void 0 : n.toLowerCase().indexOf(e == null ? void 0 : e.toLowerCase())) >= 0 || Ke(e, t) >= 0.5 || Ke(e, n) >= 0.5;
-function zt(e) {
+}), Wt = (e, t, n) => t?.toLowerCase().indexOf(e?.toLowerCase()) >= 0 || n?.toLowerCase().indexOf(e?.toLowerCase()) >= 0 || je(e, t) >= 0.5 || je(e, n) >= 0.5;
+function jt(e) {
   return e.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
 }
-const Bt = (e, t) => ge(
+const kt = (e, t) => fe(
   e,
-  (r) => {
-    var o;
-    return ((o = r == null ? void 0 : r.type) == null ? void 0 : o.displayName) === "AutoCompleteItem" && r.props.value === (t == null ? void 0 : t.value);
-  }
-), Ht = (e, t) => ge(
+  (o) => o?.type?.displayName === "AutoCompleteItem" && o.props.value === t?.value
+), Vt = (e, t) => fe(
   e,
-  (r) => {
-    var o;
-    return ((o = r == null ? void 0 : r.type) == null ? void 0 : o.displayName) === "AutoCompleteItem" && r.props.value === (t == null ? void 0 : t.value);
-  }
-), Ut = (e, t) => tt(
-  ge(e, (n) => {
-    var o, l;
-    const r = m(
-      ((o = n.props) == null ? void 0 : o.getValue) || Ge,
-      ((l = n.props) == null ? void 0 : l.value) || {}
+  (o) => o?.type?.displayName === "AutoCompleteItem" && o.props.value === t?.value
+), zt = (e, t) => $e(
+  fe(e, (n) => {
+    const o = p(
+      n.props?.getValue || Re,
+      n.props?.value || {}
     );
-    return t.some((i) => i.value === r);
+    return t.some((r) => r.value === o);
   })
-), Qt = (e, t) => {
-  const n = {}, r = {}, { field: o } = e;
-  return o && Object.keys(o).forEach((l) => {
+), Bt = (e, t) => {
+  const n = {}, o = {}, { field: r } = e;
+  return r && Object.keys(r).forEach((l) => {
     if (l.startsWith("--input") === !1)
-      n[l] = o[l];
+      n[l] = r[l];
     else {
-      let i = o[l];
-      const v = l.replace("--input-", "").replace(/-([a-z])/g, function(h) {
-        return h[1].toUpperCase();
+      let i = r[l];
+      const m = l.replace("--input-", "").replace(/-([a-z])/g, function(g) {
+        return g[1].toUpperCase();
       });
-      i.indexOf(".") !== -1 && (i = i.substring(i.indexOf(".") + 1)), r[v] = i;
+      i.indexOf(".") !== -1 && (i = i.substring(i.indexOf(".") + 1)), o[m] = i;
     }
   }), {
     ...t && {
       ...n,
-      ...r,
+      ...o,
       _focusWithin: e.field._focus,
       pos: "relative",
       minH: 9,
@@ -188,540 +174,518 @@ const Bt = (e, t) => ge(
     // w: "full",
   };
 };
-function $t(e) {
-  var He;
+function Ht(e) {
   let {
     prefocusFirstItem: t = !0,
     closeOnBlur: n = !0,
-    creatable: r,
-    emphasize: o,
+    creatable: o,
+    emphasize: r,
     emptyState: l = !0,
     defaultEmptyStateProps: i = {},
     freeSolo: u,
-    isReadOnly: v,
-    listAllValuesOnFocus: h,
-    maxSuggestions: y,
-    multiple: c,
-    closeOnSelect: E = !c,
-    defaultValue: b,
-    defaultValues: w = b ? [b] : [],
-    onReady: U,
-    defaultIsOpen: k,
-    disableFilter: oe,
-    isLoading: me = !1,
-    placement: re = "bottom",
-    restoreOnBlurIfEmpty: Y = !u,
-    shouldRenderSuggestions: ve = () => !0,
-    submitKeys: he = [],
-    suggestWhenEmpty: se,
-    value: z,
-    values: J = z ? typeof z == "string" ? [z] : [...z] : void 0
+    isReadOnly: m,
+    listAllValuesOnFocus: g,
+    maxSuggestions: h,
+    multiple: a,
+    closeOnSelect: w = !a,
+    defaultValue: v,
+    defaultValues: S = v ? [v] : [],
+    onReady: de,
+    defaultIsOpen: G,
+    disableFilter: Z,
+    isLoading: pe = !1,
+    placement: ee = "bottom",
+    restoreOnBlurIfEmpty: U = !u,
+    shouldRenderSuggestions: me = () => !0,
+    submitKeys: ge = [],
+    suggestWhenEmpty: te,
+    value: W,
+    values: Q = W ? typeof W == "string" ? [W] : [...W] : void 0
   } = e;
-  u = u || (c ? !0 : e.freeSolo);
-  const { isOpen: O, onClose: _, onOpen: Q } = ft({ defaultIsOpen: k }), ye = te(
-    () => m(e.children, {
-      isOpen: O,
-      onClose: _,
-      onOpen: Q
+  u = u || (a ? !0 : e.freeSolo);
+  const { isOpen: x, onClose: D, onOpen: V } = ut({ defaultIsOpen: G }), he = J(
+    () => p(e.children, {
+      isOpen: x,
+      onClose: D,
+      onOpen: V
     }),
-    [e.children, O]
-  ), x = te(() => Wt(ye), [ye]), N = ne(null), We = ne(null), X = ne(null), $ = ne(null), [je, le] = Ne(!1);
-  let ie = "";
-  c ? ie = "" : fe(w) ? fe(J) || (ie = J[0]) : ie = w[0];
-  const [R, Z] = Ne(ie ?? ""), be = te(
-    () => oe ? x : x.filter(
-      (s) => s.fixed || m(
-        e.filter || kt,
-        R,
+    [e.children, x]
+  ), I = J(() => _t(he), [he]), T = X(null), De = X(null), ve = X(null), z = X(null), [Te, ne] = we(!1);
+  let oe = "";
+  a ? oe = "" : ue(S) ? ue(Q) || (oe = Q[0]) : oe = S[0];
+  const [F, $] = we(oe ?? ""), ye = J(
+    () => Z ? I : I.filter(
+      (s) => s.fixed || p(
+        e.filter || Wt,
+        F,
         s.value,
         s.label
-      ) || je
+      ) || Te
     ).filter(
-      (s, a) => y ? s.fixed || a < y : !0
+      (s, c) => h ? s.fixed || c < h : !0
     ),
-    [R, x, je, y, oe]
-  ), ue = r ? [{ value: R, noFilter: !0, creatable: !0 }] : [], C = te(() => [...be, ...ue], [be, ue]), st = te(() => [...x, ...ue], [x, ue]), [T, Ce] = pt({
-    defaultValue: w.map((s) => s == null ? void 0 : s.toString()),
-    value: J,
+    [F, I, Te, h, Z]
+  ), re = o ? [{ value: F, noFilter: !0, creatable: !0 }] : [], y = J(() => [...ye, ...re], [ye, re]), Je = J(() => [...I, ...re], [I, re]), [N, be] = at({
+    defaultValue: S.map((s) => s?.toString()),
+    value: Q,
     onChange: (s) => {
-      const a = C.find((F) => F.value === s.at(-1));
-      if (!a) return;
-      const d = s.map(
-        (F) => st.find((L) => L.value === F)
+      const c = y.find((A) => A.value === s.at(-1));
+      if (!c) return;
+      const C = s.map(
+        (A) => Je.find((E) => E.value === A)
       );
-      m(
+      p(
         e.onChange,
-        c ? s : s[0],
-        c ? d : a
+        a ? s : s[0],
+        a ? C : c
       );
     }
   });
-  D(() => {
-    C.length === 0 && !l && O && _();
-  }, [C.length, l, O]);
-  const [K, G] = Ne(
-    t ? (He = x[0]) == null ? void 0 : He.value : null
-  ), lt = e.maxSelections || T.length + 1, Se = C.findIndex((s) => s.value === K), xe = Pt(
-    Se,
-    C,
+  L(() => {
+    y.length === 0 && !l && x && D();
+  }, [y.length, l, x]);
+  const [B, M] = we(
+    t ? I[0]?.value : null
+  ), Xe = e.maxSelections || N.length + 1, Ie = y.findIndex((s) => s.value === B), Ze = Ft(
+    Ie,
+    y,
     !!e.rollNavigation
-  ), Ae = Dt(
-    Se,
-    C,
+  ), et = Nt(
+    Ie,
+    y,
     !!e.rollNavigation
-  ), P = Lt(C), Ie = Pe(C), ke = !C.some(
-    (s) => s.value === K
+  ), se = Et(y), tt = Oe(y), Me = !y.some(
+    (s) => s.value === B
   );
-  D(() => {
-    var s;
-    ke && G(t ? (s = x[0]) == null ? void 0 : s.value : null);
-  }, [ke]), dt(() => {
-    t && G(P == null ? void 0 : P.value);
-  }, [R, P == null ? void 0 : P.value]), D(() => {
-    var s;
-    !O && t && G((s = x[0]) == null ? void 0 : s.value);
-  }, [O]), D(() => {
-    O && h && le(!0);
-  }, [O, h, le]), D(() => {
-    const s = x.find((a) => a.value === K);
-    m(e.onOptionFocus, {
+  L(() => {
+    Me && M(t ? I[0]?.value : null);
+  }, [Me]), ct(() => {
+    t && M(se?.value);
+  }, [F, se?.value]), L(() => {
+    !x && t && M(I[0]?.value);
+  }, [x]), L(() => {
+    x && g && ne(!0);
+  }, [x, g, ne]), L(() => {
+    const s = I.find((c) => c.value === B);
+    p(e.onOptionFocus, {
       item: s,
-      focusMethod: $.current,
-      isNewInput: s == null ? void 0 : s.creatable
+      focusMethod: z.current,
+      isNewInput: s?.creatable
     });
-  }, [K, e.onOptionFocus]);
-  const we = (s) => {
-    var F, L;
-    const a = C.find((A) => A.value === s), d = (a == null ? void 0 : a.label) || (a == null ? void 0 : a.value);
-    Z(() => c ? "" : d ?? ""), !T.includes(s) && T.length < lt && Ce((A) => c ? [...A, s] : [s]), c && ((F = N.current) == null || F.focus()), e.focusInputOnSelect && ((L = N.current) == null || L.focus()), m(e.onSelectOption, {
-      item: a,
-      selectMethod: $.current,
-      isNewInput: a == null ? void 0 : a.creatable
-    }), a != null && a.creatable && m(e.onCreateOption, {
-      item: _e(a, ["noFilter"]),
-      selectMethod: $.current
-    }), E && _();
-  }, ze = (s, a) => {
-    var L;
-    Ce((A) => {
-      let W = x.find((M) => M.value === s);
-      return !W && r === !0 && (W = { label: s, value: s }), W ? (m(e.onTagRemoved, s, W, A), A.filter((M) => M !== s)) : A;
+  }, [B, e.onOptionFocus]);
+  const Ce = (s) => {
+    const c = y.find((A) => A.value === s), C = c?.label || c?.value;
+    $(() => a ? "" : C ?? ""), !N.includes(s) && N.length < Xe && be((A) => a ? [...A, s] : [s]), a && T.current?.focus(), e.focusInputOnSelect && T.current?.focus(), p(e.onSelectOption, {
+      item: c,
+      selectMethod: z.current,
+      isNewInput: c?.creatable
+    }), c?.creatable && p(e.onCreateOption, {
+      item: Pe(c, ["noFilter"]),
+      selectMethod: z.current
+    }), w && D();
+  }, _e = (s, c) => {
+    be((E) => {
+      let P = I.find((j) => j.value === s);
+      return !P && o === !0 && (P = { label: s, value: s }), P ? (p(e.onTagRemoved, s, P, E), E.filter((j) => j !== s)) : E;
     });
-    const d = x.find((A) => A.value === s), F = (d == null ? void 0 : d.label) || (d == null ? void 0 : d.value);
-    R === F && Z(""), a && ((L = N.current) == null || L.focus());
-  }, it = (s) => {
-    var a;
-    Ce([]), s && ((a = N.current) == null || a.focus());
-  }, Be = c ? T.map((s) => {
-    var a;
-    return {
-      label: ((a = x.find((d) => d.value === (s == null ? void 0 : s.toString()))) == null ? void 0 : a.label) || s,
-      onRemove: () => ze(s)
-    };
-  }) : [];
-  return D(() => {
-    m(U, { tags: Be });
-  }, [T]), {
+    const C = I.find((E) => E.value === s), A = C?.label || C?.value;
+    F === A && $(""), c && T.current?.focus();
+  }, nt = (s) => {
+    be([]), s && T.current?.focus();
+  }, Ge = a ? N.map((s) => ({
+    label: I.find((c) => c.value === s?.toString())?.label || s,
+    onRemove: () => _e(s)
+  })) : [];
+  return L(() => {
+    p(de, { tags: Ge });
+  }, [N]), {
     autoCompleteProps: e,
-    children: ye,
-    filteredList: C,
-    filteredResults: be,
-    focusedValue: K,
+    children: he,
+    filteredList: y,
+    filteredResults: ye,
+    focusedValue: B,
     defaultEmptyStateProps: i,
     getEmptyStateProps: (s) => {
-      if (C.every((d) => d.noFilter) && l && !r)
-        return typeof l == "boolean" ? s : m(l, { query: R });
+      if (y.every((C) => C.noFilter) && l && !o)
+        return typeof l == "boolean" ? s : p(l, { query: F });
     },
     getGroupProps: (s) => {
-      const a = Ut(s.children, C);
+      const c = zt(s.children, y);
       return {
         divider: {
-          hasFirstChild: Bt(s.children, P),
-          hasLastChild: Ht(
+          hasFirstChild: kt(s.children, se),
+          hasLastChild: Vt(
             s.children,
-            Pe(C.filter((d) => fe(d == null ? void 0 : d.noFilter)))
+            Oe(y.filter((C) => ue(C?.noFilter)))
           )
         },
         group: {
-          display: a ? "initial" : "none"
+          display: c ? "initial" : "none"
         }
       };
     },
-    getInputProps: (s, a) => {
-      const { onBlur: d, onChange: F, onFocus: L, onKeyDown: A, variant: W, ...M } = s;
+    getInputProps: (s, c) => {
+      const { onBlur: C, onChange: A, onFocus: E, onKeyDown: P, variant: j, ...K } = s;
       return {
         wrapper: {
-          ref: We,
+          ref: De,
           onClick: () => {
-            var f;
-            (f = N == null ? void 0 : N.current) == null || f.focus();
+            T?.current?.focus();
           },
-          ...Qt(a, c),
-          ...M
+          ...Bt(c, a),
+          ...K
         },
         input: {
-          isReadOnly: v,
-          onFocus: (f) => {
-            m(L, f), e.openOnFocus && !v && Q(), e.selectOnFocus && f.target.select(), h && le(!0);
+          isReadOnly: m,
+          onFocus: (d) => {
+            p(E, d), e.openOnFocus && !m && V(), e.selectOnFocus && d.target.select(), g && ne(!0);
           },
-          onBlur: (f) => {
-            var B, ae;
-            m(d, f);
-            const S = f.relatedTarget === (X == null ? void 0 : X.current) || ((B = X.current) == null ? void 0 : B.contains(f.relatedTarget)), g = (ae = We.current) == null ? void 0 : ae.contains(
-              f.relatedTarget
+          onBlur: (d) => {
+            p(C, d);
+            const b = d.relatedTarget === ve?.current || ve.current?.contains(d.relatedTarget), O = De.current?.contains(
+              d.relatedTarget
             );
-            if (!S && !g && (n && _(), !T.includes(f.target.value) && Y)) {
-              const Oe = Pe(T), I = x.find(
-                (Fe) => Fe.value === Oe
-              ), Ee = (I == null ? void 0 : I.label) || (I == null ? void 0 : I.value) || "";
-              Z(Ee);
+            if (!b && !O && (n && D(), !N.includes(d.target.value) && U)) {
+              const Se = Oe(N), le = I.find(
+                (R) => R.value === Se
+              ), xe = le?.label || le?.value || "";
+              $(xe);
             }
           },
-          onChange: (f) => {
-            const S = f.target.value;
-            m(F, f), Z(S);
-            const g = Me(S);
-            m(ve, S) && (!g || se) ? Q() : _(), le(!1);
+          onChange: (d) => {
+            const b = d.target.value;
+            p(A, d), $(b);
+            const O = Ne(b);
+            p(me, b) && (!O || te) ? V() : D(), ne(!1);
           },
-          onKeyDown: (f) => {
-            var B;
-            m(A, f), $.current = "keyboard";
-            const { key: S } = f, g = C[Se];
-            if (["Enter", ...he].includes(S)) {
-              g && !(g != null && g.disabled) && O ? we(g == null ? void 0 : g.value) : (B = N.current) == null || B.focus(), f.preventDefault();
+          onKeyDown: (d) => {
+            p(P, d), z.current = "keyboard";
+            const { key: b } = d, O = y[Ie];
+            if (["Enter", ...ge].includes(b)) {
+              O && !O?.disabled && x ? Ce(O?.value) : T.current?.focus(), d.preventDefault();
               return;
             }
-            if (S === "ArrowDown") {
-              O ? G(xe == null ? void 0 : xe.value) : Q(), f.preventDefault();
+            if (b === "ArrowDown") {
+              x ? M(Ze?.value) : V(), d.preventDefault();
               return;
             }
-            if (S === "ArrowUp") {
-              O ? G(Ae == null ? void 0 : Ae.value) : Q(), f.preventDefault();
+            if (b === "ArrowUp") {
+              x ? M(et?.value) : V(), d.preventDefault();
               return;
             }
-            if (S === "Tab") {
-              O && g && !(g != null && g.disabled) ? we(g == null ? void 0 : g.value) : _();
+            if (b === "Tab") {
+              x && O && !O?.disabled ? Ce(O?.value) : D();
               return;
             }
-            if (S === "Home") {
-              G(P == null ? void 0 : P.value), f.preventDefault();
+            if (b === "Home") {
+              M(se?.value), d.preventDefault();
               return;
             }
-            if (S === "End") {
-              G(Ie == null ? void 0 : Ie.value), f.preventDefault();
+            if (b === "End") {
+              M(tt?.value), d.preventDefault();
               return;
             }
-            S === "Escape" && (_(), f.preventDefault());
+            b === "Escape" && (D(), d.preventDefault());
           },
-          value: R,
-          variant: c ? "unstyled" : W,
-          ...M
+          value: F,
+          variant: a ? "unstyled" : j,
+          ...K
         }
       };
     },
-    getItemProps: (s, a) => {
-      var Ue;
+    getItemProps: (s, c) => {
       const {
-        _fixed: d,
-        _focus: F,
-        children: L,
-        disabled: A,
-        label: W,
-        value: M,
-        fixed: f,
-        getValue: S = Ge,
-        onClick: g,
-        onMouseOver: B,
-        sx: ae,
-        ...Oe
-      } = s, I = a ? M : (Ue = S(M)) == null ? void 0 : Ue.toString(), Ee = I === K, Fe = C.findIndex((q) => q.value === I) >= 0, Le = L || W || I;
+        _fixed: C,
+        _focus: A,
+        children: E,
+        disabled: P,
+        label: j,
+        value: K,
+        fixed: d,
+        getValue: b = Re,
+        onClick: O,
+        onMouseOver: Se,
+        sx: le,
+        ...xe
+      } = s, R = c ? K : b(K)?.toString(), ot = R === B, rt = y.findIndex((Y) => Y.value === R) >= 0, Ae = E || j || R;
       return {
         item: {
-          ...typeof Le != "string" || !o ? { children: Le } : {
+          ...typeof Ae != "string" || !r ? { children: Ae } : {
             dangerouslySetInnerHTML: {
-              __html: Gt(Le, R)
+              __html: Mt(Ae, F)
             }
           },
-          "aria-selected": T.includes(I),
-          "aria-disabled": A,
+          "aria-selected": N.includes(R),
+          "aria-disabled": P,
           _disabled: { opacity: 0.4, cursor: "not-allowed", userSelect: "none" },
-          onClick: (q) => {
-            var Qe;
-            m(g, q), A ? (Qe = N.current) == null || Qe.focus() : we(I);
+          onClick: (Y) => {
+            p(O, Y), P ? T.current?.focus() : Ce(R);
           },
-          onMouseOver: (q) => {
-            m(B, q), G(I), $.current = "mouse";
+          onMouseOver: (Y) => {
+            p(Se, Y), M(R), z.current = "mouse";
           },
           sx: {
-            ...ae,
+            ...le,
             mark: {
               color: "inherit",
               bg: "transparent",
-              ...Te(o) ? o : {
-                fontWeight: o ? "extrabold" : "inherit"
+              ...Fe(r) ? r : {
+                fontWeight: r ? "extrabold" : "inherit"
               }
             }
           },
-          ...Ee && (F || jt()),
-          ...f && d,
-          ...Oe
+          ...ot && (A || Gt()),
+          ...d && C,
+          ...xe
         },
         root: {
-          isValidSuggestion: Fe,
-          value: I
+          isValidSuggestion: rt,
+          value: R
         }
       };
     },
-    inputRef: N,
-    interactionRef: $,
-    isLoading: me,
-    isOpen: O,
-    itemList: x,
-    listRef: X,
-    onClose: _,
-    onOpen: Q,
-    placement: re,
-    query: R,
-    removeItem: ze,
-    resetItems: it,
-    setQuery: Z,
-    tags: Be,
-    value: z,
-    values: T
+    inputRef: T,
+    interactionRef: z,
+    isLoading: pe,
+    isOpen: x,
+    itemList: I,
+    listRef: ve,
+    onClose: D,
+    onOpen: V,
+    placement: ee,
+    query: F,
+    removeItem: _e,
+    resetItems: nt,
+    setQuery: $,
+    tags: Ge,
+    value: W,
+    values: N
   };
 }
-const Kt = H(
+const Ut = k(
   (e, t) => {
-    const n = $t(e), {
-      children: r,
-      isOpen: o,
+    const n = Ht(e), {
+      children: o,
+      isOpen: r,
       onClose: l,
       onOpen: i,
       placement: u,
-      resetItems: v,
-      removeItem: h
+      resetItems: m,
+      removeItem: g
     } = n;
-    at(t, () => ({
-      resetItems: v,
-      removeItem: h
+    lt(t, () => ({
+      resetItems: m,
+      removeItem: g
     }));
-    const { matchWidth: y = !0 } = n.autoCompleteProps;
-    return /* @__PURE__ */ p(Et, { value: n, children: /* @__PURE__ */ p(
-      gt,
+    const { matchWidth: h = !0 } = n.autoCompleteProps;
+    return /* @__PURE__ */ f(wt, { value: n, children: /* @__PURE__ */ f(
+      ft,
       {
         isLazy: !0,
-        isOpen: o,
+        isOpen: r,
         autoFocus: !1,
         placement: u,
         closeOnBlur: !0,
-        matchWidth: y,
-        children: /* @__PURE__ */ p(mt.div, { w: "full", ref: t, children: r })
+        matchWidth: h,
+        children: /* @__PURE__ */ f(dt.div, { w: "full", ref: t, children: o })
       }
     ) });
   }
 );
-Kt.displayName = "AutoComplete";
-const Vt = H(
+Ut.displayName = "AutoComplete";
+const Qt = k(
   (e, t) => {
     const {
       focusedValue: n,
-      getItemProps: r,
-      interactionRef: o
-    } = j(), l = ne(), i = De(t, l), u = r(e), { isValidSuggestion: v, value: h } = u.root, y = n === h;
-    D(() => {
-      var U;
-      y && o.current === "keyboard" && ((U = l == null ? void 0 : l.current) == null || U.scrollIntoView({
+      getItemProps: o,
+      interactionRef: r
+    } = _(), l = X(), i = Ee(t, l), u = o(e), { isValidSuggestion: m, value: g } = u.root, h = n === g;
+    L(() => {
+      h && r.current === "keyboard" && l?.current?.scrollIntoView({
         behavior: "smooth",
         block: "nearest"
-      }));
-    }, [y, o]), D(() => {
-      typeof h != "string" && console.warn("wow"), typeof h != "string" && fe(e.getValue) && console.error(
+      });
+    }, [h, r]), L(() => {
+      typeof g != "string" && console.warn("wow"), typeof g != "string" && ue(e.getValue) && console.error(
         "You must define the `getValue` prop, when an Item's value is not a string"
       );
     }, []);
-    const { children: c, dangerouslySetInnerHTML: E, ...b } = u.item, w = _e(b, ["groupId"]);
-    return v ? /* @__PURE__ */ p(de, { ref: i, ...ot, ...w, children: c || /* @__PURE__ */ p("span", { dangerouslySetInnerHTML: E }) }) : null;
+    const { children: a, dangerouslySetInnerHTML: w, ...v } = u.item, S = Pe(v, ["groupId"]);
+    return m ? /* @__PURE__ */ f(ce, { ref: i, ...Ye, ...S, children: a || /* @__PURE__ */ f("span", { dangerouslySetInnerHTML: w }) }) : null;
   }
 );
-Vt.displayName = "AutoCompleteItem";
-const ot = {
+Qt.displayName = "AutoCompleteItem";
+const Ye = {
   mx: "2",
   px: "2",
   py: "2",
   rounded: "md",
   cursor: "pointer"
 };
-function Yt(e) {
-  const { alwaysDisplay: t, children: n, ...r } = e, {
-    autoCompleteProps: o,
+function $t(e) {
+  const { alwaysDisplay: t, children: n, ...o } = e, {
+    autoCompleteProps: r,
     getItemProps: l,
     query: i,
     filteredResults: u
-  } = j(), { children: v, ...h } = l(
+  } = _(), { children: m, ...g } = l(
     {
       ...e,
       value: i,
-      children: m(n, {
+      children: p(n, {
         value: i
       })
     },
     !0
-  ).item, y = u.some((b) => b.value === i), c = Me(i) ? t : !0;
-  return o.creatable && c && !y ? /* @__PURE__ */ p(de, { ...ot, ...h, ...r, children: v || `Add ${i}` }) : null;
+  ).item, h = u.some((v) => v.value === i), a = Ne(i) ? t : !0;
+  return r.creatable && a && !h ? /* @__PURE__ */ f(ce, { ...Ye, ...g, ...o, children: m || `Add ${i}` }) : null;
 }
-Yt.displayName = "AutoCompleteCreatable";
-const Jt = H(
+$t.displayName = "AutoCompleteCreatable";
+const Kt = k(
   (e, t) => {
-    const { children: n, showDivider: r, ...o } = e, l = _e(o, ["groupSibling"]), { getGroupProps: i } = j(), { group: u } = i(e), v = qt(e);
-    return /* @__PURE__ */ V(Xe, { ref: t, ...u, ...l, children: [
-      /* @__PURE__ */ p($e, { ...v.top }),
+    const { children: n, showDivider: o, ...r } = e, l = Pe(r, ["groupSibling"]), { getGroupProps: i } = _(), { group: u } = i(e), m = Jt(e);
+    return /* @__PURE__ */ H(Be, { ref: t, ...u, ...l, children: [
+      /* @__PURE__ */ f(We, { ...m.top }),
       n,
-      /* @__PURE__ */ p($e, { ...v.bottom })
+      /* @__PURE__ */ f(We, { ...m.bottom })
     ] });
   }
-), Xt = H(
-  (e, t) => /* @__PURE__ */ p(de, { ...Zt, ...e, ref: t })
+), Yt = k(
+  (e, t) => /* @__PURE__ */ f(ce, { ...qt, ...e, ref: t })
 );
-Jt.displayName = "AutoCompleteGroup";
-Xt.displayName = "AutoCompleteGroupTitle";
-const Zt = {
+Kt.displayName = "AutoCompleteGroup";
+Yt.displayName = "AutoCompleteGroupTitle";
+const qt = {
   ml: 5,
   my: 1,
   fontSize: "xs",
   letterSpacing: "wider",
   fontWeight: "extrabold",
   textTransform: "uppercase"
-}, qt = (e) => {
-  const { getGroupProps: t } = j(), n = e.groupSibling, {
-    divider: { hasFirstChild: r, hasLastChild: o }
+}, Jt = (e) => {
+  const { getGroupProps: t } = _(), n = e.groupSibling, {
+    divider: { hasFirstChild: o, hasLastChild: r }
   } = t(e), l = {
     my: 2,
     borderColor: e.dividerColor
   }, i = {
     ...l,
     mb: 4,
-    display: !e.showDivider || r ? "none" : ""
+    display: !e.showDivider || o ? "none" : ""
   }, u = {
     ...l,
-    display: !e.showDivider || o || n ? "none" : ""
+    display: !e.showDivider || r || n ? "none" : ""
   };
   return { top: i, bottom: u };
-}, Ve = H((e, t) => {
-  const { isLoading: n } = j(), { loadingIcon: r, ...o } = e;
-  return /* @__PURE__ */ V(vt, { children: [
-    /* @__PURE__ */ p(ht, { ...o, ref: t }),
-    n && /* @__PURE__ */ p(yt, { children: r || /* @__PURE__ */ p(Ze, {}) })
+}, ke = k((e, t) => {
+  const { isLoading: n } = _(), { loadingIcon: o, ...r } = e;
+  return /* @__PURE__ */ H(pt, { children: [
+    /* @__PURE__ */ f(mt, { ...r, ref: t }),
+    n && /* @__PURE__ */ f(gt, { children: o || /* @__PURE__ */ f(He, {}) })
   ] });
-}), rt = H(
+}), qe = k(
   (e, t) => {
     const {
       autoCompleteProps: n,
-      inputRef: r,
-      getInputProps: o,
+      inputRef: o,
+      getInputProps: r,
       tags: l,
       setQuery: i,
       value: u,
-      itemList: v
-    } = j(), {
-      children: h,
-      isInvalid: y,
-      hidePlaceholder: c,
-      ...E
-    } = e, { value: b } = E;
-    D(() => {
+      itemList: m
+    } = _(), {
+      children: g,
+      isInvalid: h,
+      hidePlaceholder: a,
+      ...w
+    } = e, { value: v } = w;
+    L(() => {
       if (u !== void 0 && (typeof u == "string" || u instanceof String)) {
-        const se = v.find((J) => J.value === u), z = se === void 0 ? u : se.label;
-        i(z);
+        const te = m.find((Q) => Q.value === u), W = te === void 0 ? u : te.label;
+        i(W);
       }
-    }, [u]), D(() => {
-      b !== void 0 && (typeof b == "string" || b instanceof String) && i(b);
-    }, [b]);
-    const w = bt("Input", e);
-    let { wrapper: U, input: k } = o(E, w);
-    const { ref: oe, ...me } = U, re = De(t, r), Y = m(h, { tags: l });
-    c && (k = {
-      ...k,
-      placeholder: Array.isArray(Y) && Y.length ? void 0 : k.placeholder
+    }, [u]), L(() => {
+      v !== void 0 && (typeof v == "string" || v instanceof String) && i(v);
+    }, [v]);
+    const S = ht("Input", e);
+    let { wrapper: de, input: G } = r(w, S);
+    const { ref: Z, ...pe } = de, ee = Ee(t, o), U = p(g, { tags: l });
+    a && (G = {
+      ...G,
+      placeholder: Array.isArray(U) && U.length ? void 0 : G.placeholder
     });
-    const ve = /* @__PURE__ */ p(
-      Ve,
+    const me = /* @__PURE__ */ f(
+      ke,
       {
-        isInvalid: y,
-        ...k,
-        ref: re
+        isInvalid: h,
+        ...G,
+        ref: ee
       }
-    ), he = /* @__PURE__ */ V(Ct, { "aria-invalid": y, ...me, ref: oe, children: [
-      Y,
-      /* @__PURE__ */ p(
-        qe,
+    ), ge = /* @__PURE__ */ H(vt, { "aria-invalid": h, ...pe, ref: Z, children: [
+      U,
+      /* @__PURE__ */ f(
+        Ue,
         {
-          as: Ve,
-          ...k,
-          ref: re
+          as: ke,
+          ...G,
+          ref: ee
         }
       )
     ] });
-    return /* @__PURE__ */ p(St, { children: n.multiple ? he : ve });
+    return /* @__PURE__ */ f(yt, { children: n.multiple ? ge : me });
   }
 );
-rt.displayName = "Input";
-rt.id = "Input";
-const en = (e) => {
-  const { getEmptyStateProps: t, defaultEmptyStateProps: n } = j(), r = t(
-    /* @__PURE__ */ p(de, { ...tn, ...n, children: "No options found!" })
+qe.displayName = "Input";
+qe.id = "Input";
+const Xt = (e) => {
+  const { getEmptyStateProps: t, defaultEmptyStateProps: n } = _(), o = t(
+    /* @__PURE__ */ f(ce, { ...Zt, ...n, children: "No options found!" })
   );
-  return /* @__PURE__ */ p(Xe, { ...e, children: r });
-}, tn = {
+  return /* @__PURE__ */ f(Be, { ...e, children: o });
+}, Zt = {
   fontSize: "sm",
   align: "center",
   justify: "center",
   fontWeight: "bold",
   fontStyle: "italic"
-}, Ye = [
+}, Ve = [
   "AutoCompleteGroup",
   "AutoCompleteItem",
   "AutoCompleteCreatable"
-], nn = (e) => {
-  const t = ee.Children.map(e, (o, l) => {
-    var i;
-    if (((i = o == null ? void 0 : o.type) == null ? void 0 : i.displayName) === "AutoCompleteGroup") {
-      const u = ee.Children.toArray(e)[l + 1];
-      return ee.cloneElement(o, {
-        groupSibling: u ? u.type.displayName === "AutoCompleteGroup" : !1
+], en = (e) => {
+  const t = q.Children.map(e, (r, l) => {
+    if (r?.type?.displayName === "AutoCompleteGroup") {
+      const i = q.Children.toArray(e)[l + 1];
+      return q.cloneElement(r, {
+        groupSibling: i ? i.type.displayName === "AutoCompleteGroup" : !1
       });
     }
-    return o;
-  }), n = ee.Children.toArray(t).filter(
-    (o) => {
-      var l;
-      return !Ye.includes(
-        (l = o == null ? void 0 : o.type) == null ? void 0 : l.displayName
-      );
-    }
+    return r;
+  }), n = q.Children.toArray(t).filter(
+    (r) => !Ve.includes(
+      r?.type?.displayName
+    )
   );
-  return [ee.Children.toArray(t).filter(
-    (o) => {
-      var l;
-      return Ye.includes(
-        (l = o == null ? void 0 : o.type) == null ? void 0 : l.displayName
-      );
-    }
+  return [q.Children.toArray(t).filter(
+    (r) => Ve.includes(
+      r?.type?.displayName
+    )
   ), n];
-}, on = H(
+}, tn = k(
   (e, t) => {
-    const { children: n, loadingState: r, ...o } = e, { listRef: l, isLoading: i } = j(), u = De(t, l), [v, h] = nn(n);
-    return /* @__PURE__ */ V(xt, { ref: u, w: "inherit", ...rn, ...o, children: [
-      i && /* @__PURE__ */ p(At, { children: r || /* @__PURE__ */ p(Ze, { size: "md" }) }),
-      !i && /* @__PURE__ */ V(ut, { children: [
-        v,
-        /* @__PURE__ */ p(en, {}),
-        h
+    const { children: n, loadingState: o, ...r } = e, { listRef: l, isLoading: i } = _(), u = Ee(t, l), [m, g] = en(n);
+    return /* @__PURE__ */ f(bt, { appendToParentPortal: !1, children: /* @__PURE__ */ H(It, { ref: u, w: "inherit", ...nn, ...r, children: [
+      i && /* @__PURE__ */ f(Ct, { children: o || /* @__PURE__ */ f(He, { size: "md" }) }),
+      !i && /* @__PURE__ */ H(st, { children: [
+        m,
+        /* @__PURE__ */ f(Xt, {}),
+        g
       ] })
-    ] });
+    ] }) });
   }
 );
-on.displayName = "AutoCompleteList";
-const rn = {
+tn.displayName = "AutoCompleteList";
+const nn = {
   py: "4",
   opacity: "0",
   bg: "#232934",
@@ -737,46 +701,46 @@ const rn = {
   _focus: {
     boxShadow: "none"
   }
-}, dn = ct((e) => {
-  const { label: t, onRemove: n, disabled: r, ...o } = e;
-  return /* @__PURE__ */ p(qe, { children: /* @__PURE__ */ V(
-    It,
+}, fn = it((e) => {
+  const { label: t, onRemove: n, disabled: o, ...r } = e;
+  return /* @__PURE__ */ f(Ue, { children: /* @__PURE__ */ H(
+    St,
     {
       borderRadius: "md",
       fontWeight: "normal",
-      ...r && Je,
-      ...o,
+      ...o && ze,
+      ...r,
       children: [
-        /* @__PURE__ */ p(wt, { children: t }),
-        /* @__PURE__ */ p(
-          Ot,
+        /* @__PURE__ */ f(xt, { children: t }),
+        /* @__PURE__ */ f(
+          At,
           {
-            onClick: () => !r && m(n),
+            onClick: () => !o && p(n),
             cursor: "pointer",
-            ...r && Je
+            ...o && ze
           }
         )
       ]
     }
   ) });
-}), Je = {
+}), ze = {
   cursor: "text",
   userSelect: "none",
   opacity: 0.4,
   _focus: { boxShadow: "none" }
 };
 export {
-  Kt as AutoComplete,
-  Yt as AutoCompleteCreatable,
-  Jt as AutoCompleteGroup,
-  Xt as AutoCompleteGroupTitle,
-  rt as AutoCompleteInput,
-  Vt as AutoCompleteItem,
-  on as AutoCompleteList,
-  Et as AutoCompleteProvider,
-  dn as AutoCompleteTag,
-  ot as baseItemStyles,
-  Ft as createContext,
-  $t as useAutoComplete,
-  j as useAutoCompleteContext
+  Ut as AutoComplete,
+  $t as AutoCompleteCreatable,
+  Kt as AutoCompleteGroup,
+  Yt as AutoCompleteGroupTitle,
+  qe as AutoCompleteInput,
+  Qt as AutoCompleteItem,
+  tn as AutoCompleteList,
+  wt as AutoCompleteProvider,
+  fn as AutoCompleteTag,
+  Ye as baseItemStyles,
+  Ot as createContext,
+  Ht as useAutoComplete,
+  _ as useAutoCompleteContext
 };