@pismo/marola 2.1.63 → 2.1.65

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,178 +1,169 @@
-import { jsx as Q, jsxs as it } from "react/jsx-runtime";
+import { jsx as Z, jsxs as st } from "react/jsx-runtime";
 import * as g from "react";
-import { useId as lt, useState as at } from "react";
-import { c as ut } from "../../clsx-OuTLNxxd.js";
-import { Icon as ct } from "../Icon/Icon.js";
-import { Input as ft } from "../Input/Input.js";
-import { s as dt, _ as Me } from "../../useSlotProps-CYHDC4TN.js";
-import { u as pt } from "../../useId-BW-oWmul.js";
-import { u as _e } from "../../useControlled-CCMYYdCM.js";
+import { useId as it, useState as lt } from "react";
+import { c as at } from "../../clsx-OuTLNxxd.js";
+import { Icon as ut } from "../Icon/Icon.js";
+import { Input as ct } from "../Input/Input.js";
+import { u as ft } from "../../useId-CK6Kn3Tn.js";
+import { u as ke } from "../../useControlled-BYdyS7Pn.js";
 import { u as pe } from "../../useEventCallback-BAQJJ3ye.js";
-import '../../assets/Autocomplete.css';const gt = (c) => {
+import { s as dt } from "../../setRef-Bo0HEdBB.js";
+import '../../assets/Autocomplete.css';const pt = (p) => {
   const h = g.useRef({});
   return g.useEffect(() => {
-    h.current = c;
+    h.current = p;
   }), h.current;
 };
-function Re(c) {
-  return typeof c.normalize < "u" ? c.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : c;
+function ve(p) {
+  return p.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 }
-function ht(c = {}) {
+function gt(p = {}) {
   const {
     ignoreAccents: h = !0,
-    ignoreCase: m = !0,
-    limit: A,
-    matchFrom: v = "any",
-    stringify: j,
-    trim: V = !1
-  } = c;
-  return (D, {
+    ignoreCase: O = !0,
+    limit: _,
+    matchFrom: N = "any",
+    stringify: U,
+    trim: v = !1
+  } = p;
+  return ($, {
     inputValue: M,
-    getOptionLabel: b
+    getOptionLabel: m
   }) => {
-    let k = V ? M.trim() : M;
-    m && (k = k.toLowerCase()), h && (k = Re(k));
-    const B = k ? D.filter((J) => {
-      let w = (j || b)(J);
-      return m && (w = w.toLowerCase()), h && (w = Re(w)), v === "start" ? w.indexOf(k) === 0 : w.indexOf(k) > -1;
-    }) : D;
-    return typeof A == "number" ? B.slice(0, A) : B;
+    let k = v ? M.trim() : M;
+    O && (k = k.toLowerCase()), h && (k = ve(k));
+    const j = k ? $.filter((W) => {
+      let w = (U || m)(W);
+      return O && (w = w.toLowerCase()), h && (w = ve(w)), N === "start" ? w.startsWith(k) : w.includes(k);
+    }) : $;
+    return typeof _ == "number" ? j.slice(0, _) : j;
   };
 }
-function ge(c, h) {
-  for (let m = 0; m < c.length; m += 1)
-    if (h(c[m]))
-      return m;
-  return -1;
-}
-const mt = ht(), bt = 5, xt = (c) => {
+const ht = gt(), Me = 5, mt = (p) => {
   var h;
-  return c.current !== null && ((h = c.current.parentElement) == null ? void 0 : h.contains(document.activeElement));
-};
-function yt(c) {
+  return p.current !== null && ((h = p.current.parentElement) == null ? void 0 : h.contains(document.activeElement));
+}, bt = [];
+function xt(p) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_isActiveElementInListbox: h = xt,
+    unstable_isActiveElementInListbox: h = mt,
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_classNamePrefix: m = "Mui",
-    autoComplete: A = !1,
-    autoHighlight: v = !1,
-    autoSelect: j = !1,
-    blurOnSelect: V = !1,
-    clearOnBlur: D = !c.freeSolo,
+    unstable_classNamePrefix: O = "Mui",
+    autoComplete: _ = !1,
+    autoHighlight: N = !1,
+    autoSelect: U = !1,
+    blurOnSelect: v = !1,
+    clearOnBlur: $ = !p.freeSolo,
     clearOnEscape: M = !1,
-    componentName: b = "useAutocomplete",
-    defaultValue: k = c.multiple ? [] : null,
-    disableClearable: B = !1,
-    disableCloseOnSelect: J = !1,
+    componentName: m = "useAutocomplete",
+    defaultValue: k = p.multiple ? bt : null,
+    disableClearable: j = !1,
+    disableCloseOnSelect: W = !1,
     disabled: w,
-    disabledItemsFocusable: he = !1,
-    disableListWrap: W = !1,
-    filterOptions: me = mt,
-    filterSelectedOptions: ee = !1,
-    freeSolo: L = !1,
-    getOptionDisabled: U,
-    getOptionKey: te,
-    getOptionLabel: ne = (t) => {
-      var e;
-      return (e = t.label) != null ? e : t;
-    },
-    groupBy: R,
-    handleHomeEndKeys: re = !c.freeSolo,
-    id: be,
+    disabledItemsFocusable: ge = !1,
+    disableListWrap: J = !1,
+    filterOptions: he = ht,
+    filterSelectedOptions: te = !1,
+    freeSolo: V = !1,
+    getOptionDisabled: B,
+    getOptionKey: Y,
+    getOptionLabel: ne = (t) => t.label ?? t,
+    groupBy: H,
+    handleHomeEndKeys: re = !p.freeSolo,
+    id: me,
     includeInputInList: i = !1,
-    inputValue: y,
-    isOptionEqualToValue: _ = (t, e) => t === e,
+    inputValue: x,
+    isOptionEqualToValue: E = (t, e) => t === e,
     multiple: l = !1,
-    onChange: E,
+    onChange: T,
     onClose: oe,
     onHighlightChange: se,
-    onInputChange: H,
+    onInputChange: R,
     onOpen: Ee,
     open: He,
-    openOnFocus: Fe = !1,
-    options: xe,
-    readOnly: Y = !1,
-    selectOnFocus: qe = !c.freeSolo,
-    value: je
-  } = c, T = pt(be);
-  let O = ne;
-  O = (t) => {
+    openOnFocus: Re = !1,
+    options: be,
+    readOnly: X = !1,
+    selectOnFocus: Fe = !p.freeSolo,
+    value: qe
+  } = p, A = ft(me);
+  let y = ne;
+  y = (t) => {
     const e = ne(t);
     if (typeof e != "string") {
       if (process.env.NODE_ENV !== "production") {
         const n = e === void 0 ? "undefined" : `${typeof e} (${e})`;
-        console.error(`MUI: The \`getOptionLabel\` method of ${b} returned ${n} instead of a string for ${JSON.stringify(t)}.`);
+        console.error(`MUI: The \`getOptionLabel\` method of ${m} returned ${n} instead of a string for ${JSON.stringify(t)}.`);
       }
       return String(e);
     }
     return e;
   };
-  const ye = g.useRef(!1), Oe = g.useRef(!0), d = g.useRef(null), $ = g.useRef(null), [ie, Be] = g.useState(null), [P, Ie] = g.useState(-1), Te = v ? 0 : -1, x = g.useRef(Te), [r, Ue] = _e({
-    controlled: je,
+  const xe = g.useRef(!1), ye = g.useRef(!0), f = g.useRef(null), P = g.useRef(null), [ie, Ue] = g.useState(null), [D, Ie] = g.useState(-1), Te = N ? 0 : -1, b = g.useRef(Te), [r, je] = ke({
+    controlled: qe,
     default: k,
-    name: b
-  }), [u, le] = _e({
-    controlled: y,
+    name: m
+  }), [u, le] = ke({
+    controlled: x,
     default: "",
-    name: b,
+    name: m,
     state: "inputValue"
-  }), [ae, $e] = g.useState(!1), ue = g.useCallback((t, e) => {
-    if (!(l ? r.length < e.length : e !== null) && !D)
+  }), [ae, Ae] = g.useState(!1), ue = g.useCallback((t, e, n) => {
+    if (!(l ? r.length < e.length : e !== null) && !$)
       return;
-    let o;
+    let s;
     if (l)
-      o = "";
+      s = "";
     else if (e == null)
-      o = "";
+      s = "";
     else {
-      const s = O(e);
-      o = typeof s == "string" ? s : "";
+      const a = y(e);
+      s = typeof a == "string" ? a : "";
     }
-    u !== o && (le(o), H && H(t, o, "reset"));
-  }, [O, u, l, H, le, D, r]), [K, Pe] = _e({
+    u !== s && (le(s), R && R(t, s, n));
+  }, [y, u, l, R, le, $, r]), [z, Pe] = ke({
     controlled: He,
     default: !1,
-    name: b,
+    name: m,
     state: "open"
-  }), [Ke, Ae] = g.useState(!0), De = !l && r != null && u === O(r), S = K && !Y, f = S ? me(
-    xe.filter((t) => !(ee && (l ? r : [r]).some((e) => e !== null && _(t, e)))),
+  }), [Be, De] = g.useState(!0), _e = !l && r != null && u === y(r), S = z && !X, c = S ? he(
+    be.filter((t) => !(te && (l ? r : [r]).some((e) => e !== null && E(t, e)))),
     // we use the empty string to manipulate `filterOptions` to not filter any options
     // i.e. the filter predicate always returns true
     {
-      inputValue: De && Ke ? "" : u,
-      getOptionLabel: O
+      inputValue: _e && Be ? "" : u,
+      getOptionLabel: y
     }
-  ) : [], C = gt({
-    filteredOptions: f,
+  ) : [], C = pt({
+    filteredOptions: c,
     value: r,
     inputValue: u
   });
   g.useEffect(() => {
     const t = r !== C.value;
-    ae && !t || L && !t || ue(null, r);
-  }, [r, ue, ae, C.value, L]);
-  const we = K && f.length > 0 && !Y;
-  if (process.env.NODE_ENV !== "production" && r !== null && !L && xe.length > 0) {
-    const t = (l ? r : [r]).filter((e) => !xe.some((n) => _(n, e)));
-    t.length > 0 && console.warn([`MUI: The value provided to ${b} is invalid.`, `None of the options match with \`${t.length > 1 ? JSON.stringify(t) : JSON.stringify(t[0])}\`.`, "You can use the `isOptionEqualToValue` prop to customize the equality test."].join(`
+    ae && !t || V && !t || ue(null, r, "reset");
+  }, [r, ue, ae, C.value, V]);
+  const Oe = z && c.length > 0 && !X;
+  if (process.env.NODE_ENV !== "production" && r !== null && !V && be.length > 0) {
+    const t = (l ? r : [r]).filter((e) => !be.some((n) => E(n, e)));
+    t.length > 0 && console.warn([`MUI: The value provided to ${m} is invalid.`, `None of the options match with \`${t.length > 1 ? JSON.stringify(t) : JSON.stringify(t[0])}\`.`, "You can use the `isOptionEqualToValue` prop to customize the equality test."].join(`
 `));
   }
   const ce = pe((t) => {
-    t === -1 ? d.current.focus() : ie.querySelector(`[data-tag-index="${t}"]`).focus();
+    t === -1 ? f.current.focus() : ie.querySelector(`[data-tag-index="${t}"]`).focus();
   });
   g.useEffect(() => {
-    l && P > r.length - 1 && (Ie(-1), ce(-1));
-  }, [r, l, P, ce]);
+    l && D > r.length - 1 && (Ie(-1), ce(-1));
+  }, [r, l, D, ce]);
   function ze(t, e) {
-    if (!$.current || t < 0 || t >= f.length)
+    if (!P.current || t < 0 || t >= c.length)
       return -1;
     let n = t;
     for (; ; ) {
-      const o = $.current.querySelector(`[data-option-index="${n}"]`), s = he ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
+      const o = P.current.querySelector(`[data-option-index="${n}"]`), s = ge ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
       if (o && o.hasAttribute("tabindex") && !s)
         return n;
-      if (e === "next" ? n = (n + 1) % f.length : n = (n - 1 + f.length) % f.length, n === t)
+      if (e === "next" ? n = (n + 1) % c.length : n = (n - 1 + c.length) % c.length, n === t)
         return -1;
     }
   }
@@ -181,23 +172,23 @@ function yt(c) {
     index: e,
     reason: n = "auto"
   }) => {
-    if (x.current = e, e === -1 ? d.current.removeAttribute("aria-activedescendant") : d.current.setAttribute("aria-activedescendant", `${T}-option-${e}`), se && se(t, e === -1 ? null : f[e], n), !$.current)
+    if (b.current = e, e === -1 ? f.current.removeAttribute("aria-activedescendant") : f.current.setAttribute("aria-activedescendant", `${A}-option-${e}`), se && se(t, e === -1 ? null : c[e], n), !P.current)
       return;
-    const o = $.current.querySelector(`[role="option"].${m}-focused`);
-    o && (o.classList.remove(`${m}-focused`), o.classList.remove(`${m}-focusVisible`));
-    let s = $.current;
-    if ($.current.getAttribute("role") !== "listbox" && (s = $.current.parentElement.querySelector('[role="listbox"]')), !s)
+    const o = P.current.querySelector(`[role="option"].${O}-focused`);
+    o && (o.classList.remove(`${O}-focused`), o.classList.remove(`${O}-focusVisible`));
+    let s = P.current;
+    if (P.current.getAttribute("role") !== "listbox" && (s = P.current.parentElement.querySelector('[role="listbox"]')), !s)
       return;
     if (e === -1) {
       s.scrollTop = 0;
       return;
     }
-    const a = $.current.querySelector(`[data-option-index="${e}"]`);
-    if (a && (a.classList.add(`${m}-focused`), n === "keyboard" && a.classList.add(`${m}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
-      const p = a, I = s.clientHeight + s.scrollTop, de = p.offsetTop + p.offsetHeight;
-      de > I ? s.scrollTop = de - s.clientHeight : p.offsetTop - p.offsetHeight * (R ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (R ? 1.3 : 0));
+    const a = P.current.querySelector(`[data-option-index="${e}"]`);
+    if (a && (a.classList.add(`${O}-focused`), n === "keyboard" && a.classList.add(`${O}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
+      const d = a, I = s.clientHeight + s.scrollTop, de = d.offsetTop + d.offsetHeight;
+      de > I ? s.scrollTop = de - s.clientHeight : d.offsetTop - d.offsetHeight * (H ? 1.3 : 0) < s.scrollTop && (s.scrollTop = d.offsetTop - d.offsetHeight * (H ? 1.3 : 0));
     }
-  }), N = pe(({
+  }), L = pe(({
     event: t,
     diff: e,
     direction: n = "next",
@@ -206,125 +197,125 @@ function yt(c) {
     if (!S)
       return;
     const a = ze((() => {
-      const p = f.length - 1;
+      const d = c.length - 1;
       if (e === "reset")
         return Te;
       if (e === "start")
         return 0;
       if (e === "end")
-        return p;
-      const I = x.current + e;
-      return I < 0 ? I === -1 && i ? -1 : W && x.current !== -1 || Math.abs(e) > 1 ? 0 : p : I > p ? I === p + 1 && i ? -1 : W || Math.abs(e) > 1 ? p : 0 : I;
+        return d;
+      const I = b.current + e;
+      return I < 0 ? I === -1 && i ? -1 : J && b.current !== -1 || Math.abs(e) > 1 ? 0 : d : I > d ? I === d + 1 && i ? -1 : J || Math.abs(e) > 1 ? d : 0 : I;
     })(), n);
     if (F({
       index: a,
       reason: o,
       event: t
-    }), A && e !== "reset")
+    }), _ && e !== "reset")
       if (a === -1)
-        d.current.value = u;
+        f.current.value = u;
       else {
-        const p = O(f[a]);
-        d.current.value = p, p.toLowerCase().indexOf(u.toLowerCase()) === 0 && u.length > 0 && d.current.setSelectionRange(u.length, p.length);
+        const d = y(c[a]);
+        f.current.value = d, d.toLowerCase().indexOf(u.toLowerCase()) === 0 && u.length > 0 && f.current.setSelectionRange(u.length, d.length);
       }
-  }), Je = () => {
+  }), Ke = () => {
     const t = (e, n) => {
-      const o = e ? O(e) : "", s = n ? O(n) : "";
+      const o = e ? y(e) : "", s = n ? y(n) : "";
       return o === s;
     };
-    if (x.current !== -1 && C.filteredOptions && C.filteredOptions.length !== f.length && C.inputValue === u && (l ? r.length === C.value.length && C.value.every((e, n) => O(r[n]) === O(e)) : t(C.value, r))) {
-      const e = C.filteredOptions[x.current];
+    if (b.current !== -1 && C.filteredOptions && C.filteredOptions.length !== c.length && C.inputValue === u && (l ? r.length === C.value.length && C.value.every((e, n) => y(r[n]) === y(e)) : t(C.value, r))) {
+      const e = C.filteredOptions[b.current];
       if (e)
-        return ge(f, (n) => O(n) === O(e));
+        return c.findIndex((n) => y(n) === y(e));
     }
     return -1;
-  }, Se = g.useCallback(() => {
+  }, we = g.useCallback(() => {
     if (!S)
       return;
-    const t = Je();
+    const t = Ke();
     if (t !== -1) {
-      x.current = t;
+      b.current = t;
       return;
     }
     const e = l ? r[0] : r;
-    if (f.length === 0 || e == null) {
-      N({
+    if (c.length === 0 || e == null) {
+      L({
         diff: "reset"
       });
       return;
     }
-    if ($.current) {
+    if (P.current) {
       if (e != null) {
-        const n = f[x.current];
-        if (l && n && ge(r, (s) => _(n, s)) !== -1)
+        const n = c[b.current];
+        if (l && n && r.findIndex((s) => E(n, s)) !== -1)
           return;
-        const o = ge(f, (s) => _(s, e));
-        o === -1 ? N({
+        const o = c.findIndex((s) => E(s, e));
+        o === -1 ? L({
           diff: "reset"
         }) : F({
           index: o
         });
         return;
       }
-      if (x.current >= f.length - 1) {
+      if (b.current >= c.length - 1) {
         F({
-          index: f.length - 1
+          index: c.length - 1
         });
         return;
       }
       F({
-        index: x.current
+        index: b.current
       });
     }
   }, [
     // Only sync the highlighted index when the option switch between empty and not
-    f.length,
+    c.length,
     // Don't sync the highlighted index with the value when multiple
     // eslint-disable-next-line react-hooks/exhaustive-deps
     l ? !1 : r,
-    ee,
-    N,
+    te,
+    L,
     F,
     S,
     u,
     l
   ]), We = pe((t) => {
-    dt($, t), t && Se();
+    dt(P, t), t && we();
   });
   process.env.NODE_ENV !== "production" && g.useEffect(() => {
-    (!d.current || d.current.nodeName !== "INPUT") && (d.current && d.current.nodeName === "TEXTAREA" ? console.warn([`A textarea element was provided to ${b} where input was expected.`, "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join(`
-`)) : console.error([`MUI: Unable to find the input element. It was resolved to ${d.current} while an HTMLInputElement was expected.`, `Instead, ${b} expects an input element.`, "", b === "useAutocomplete" ? "Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed." : "Make sure you have customized the input component correctly."].join(`
+    (!f.current || f.current.nodeName !== "INPUT") && (f.current && f.current.nodeName === "TEXTAREA" ? console.warn([`A textarea element was provided to ${m} where input was expected.`, "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join(`
+`)) : console.error([`MUI: Unable to find the input element. It was resolved to ${f.current} while an HTMLInputElement was expected.`, `Instead, ${m} expects an input element.`, "", m === "useAutocomplete" ? "Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed." : "Make sure you have customized the input component correctly."].join(`
 `)));
-  }, [b]), g.useEffect(() => {
-    Se();
-  }, [Se]);
+  }, [m]), g.useEffect(() => {
+    we();
+  }, [we]);
   const q = (t) => {
-    K || (Pe(!0), Ae(!0), Ee && Ee(t));
-  }, X = (t, e) => {
-    K && (Pe(!1), oe && oe(t, e));
-  }, z = (t, e, n, o) => {
+    z || (Pe(!0), De(!0), Ee && Ee(t));
+  }, G = (t, e) => {
+    z && (Pe(!1), oe && oe(t, e));
+  }, K = (t, e, n, o) => {
     if (l) {
       if (r.length === e.length && r.every((s, a) => s === e[a]))
         return;
     } else if (r === e)
       return;
-    E && E(t, e, n, o), Ue(e);
-  }, fe = g.useRef(!1), G = (t, e, n = "selectOption", o = "options") => {
+    T && T(t, e, n, o), je(e);
+  }, fe = g.useRef(!1), Q = (t, e, n = "selectOption", o = "options") => {
     let s = n, a = e;
     if (l) {
       if (a = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
-        const I = a.filter((de) => _(e, de));
-        I.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${b} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${I.length} matches.`].join(`
+        const I = a.filter((de) => E(e, de));
+        I.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${m} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${I.length} matches.`].join(`
 `));
       }
-      const p = ge(a, (I) => _(e, I));
-      p === -1 ? a.push(e) : o !== "freeSolo" && (a.splice(p, 1), s = "removeOption");
+      const d = a.findIndex((I) => E(e, I));
+      d === -1 ? a.push(e) : o !== "freeSolo" && (a.splice(d, 1), s = "removeOption");
     }
-    ue(t, a), z(t, a, s, {
+    ue(t, a, s), K(t, a, s, {
       option: e
-    }), !J && (!t || !t.ctrlKey && !t.metaKey) && X(t, s), (V === !0 || V === "touch" && fe.current || V === "mouse" && !fe.current) && d.current.blur();
+    }), !W && (!t || !t.ctrlKey && !t.metaKey) && G(t, s), (v === !0 || v === "touch" && fe.current || v === "mouse" && !fe.current) && f.current.blur();
   };
-  function Ye(t, e) {
+  function Je(t, e) {
     if (t === -1)
       return -1;
     let n = t;
@@ -338,19 +329,19 @@ function yt(c) {
         return n;
     }
   }
-  const Ce = (t, e) => {
+  const $e = (t, e) => {
     if (!l)
       return;
-    u === "" && X(t, "toggleInput");
-    let n = P;
-    P === -1 ? u === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = Ye(n, e), Ie(n), ce(n);
-  }, Ne = (t) => {
-    ye.current = !0, le(""), H && H(t, "", "clear"), z(t, l ? [] : null, "clear");
-  }, Xe = (t) => (e) => {
-    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (P !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (Ie(-1), ce(-1)), e.which !== 229))
+    u === "" && G(t, "toggleInput");
+    let n = D;
+    D === -1 ? u === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = Je(n, e), Ie(n), ce(n);
+  }, Ce = (t) => {
+    xe.current = !0, le(""), R && R(t, "", "clear"), K(t, l ? [] : null, "clear");
+  }, Ye = (t) => (e) => {
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (D !== -1 && !["ArrowLeft", "ArrowRight"].includes(e.key) && (Ie(-1), ce(-1)), e.which !== 229))
       switch (e.key) {
         case "Home":
-          S && re && (e.preventDefault(), N({
+          S && re && (e.preventDefault(), L({
             diff: "start",
             direction: "next",
             reason: "keyboard",
@@ -358,7 +349,7 @@ function yt(c) {
           }));
           break;
         case "End":
-          S && re && (e.preventDefault(), N({
+          S && re && (e.preventDefault(), L({
             diff: "end",
             direction: "previous",
             reason: "keyboard",
@@ -366,23 +357,23 @@ function yt(c) {
           }));
           break;
         case "PageUp":
-          e.preventDefault(), N({
-            diff: -5,
+          e.preventDefault(), L({
+            diff: -Me,
             direction: "previous",
             reason: "keyboard",
             event: e
           }), q(e);
           break;
         case "PageDown":
-          e.preventDefault(), N({
-            diff: bt,
+          e.preventDefault(), L({
+            diff: Me,
             direction: "next",
             reason: "keyboard",
             event: e
           }), q(e);
           break;
         case "ArrowDown":
-          e.preventDefault(), N({
+          e.preventDefault(), L({
             diff: 1,
             direction: "next",
             reason: "keyboard",
@@ -390,7 +381,7 @@ function yt(c) {
           }), q(e);
           break;
         case "ArrowUp":
-          e.preventDefault(), N({
+          e.preventDefault(), L({
             diff: -1,
             direction: "previous",
             reason: "keyboard",
@@ -398,89 +389,89 @@ function yt(c) {
           }), q(e);
           break;
         case "ArrowLeft":
-          Ce(e, "previous");
+          $e(e, "previous");
           break;
         case "ArrowRight":
-          Ce(e, "next");
+          $e(e, "next");
           break;
         case "Enter":
-          if (x.current !== -1 && S) {
-            const n = f[x.current], o = U ? U(n) : !1;
+          if (b.current !== -1 && S) {
+            const n = c[b.current], o = B ? B(n) : !1;
             if (e.preventDefault(), o)
               return;
-            G(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
-          } else L && u !== "" && De === !1 && (l && e.preventDefault(), G(e, u, "createOption", "freeSolo"));
+            Q(e, n, "selectOption"), _ && f.current.setSelectionRange(f.current.value.length, f.current.value.length);
+          } else V && u !== "" && _e === !1 && (l && e.preventDefault(), Q(e, u, "createOption", "freeSolo"));
           break;
         case "Escape":
-          S ? (e.preventDefault(), e.stopPropagation(), X(e, "escape")) : M && (u !== "" || l && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ne(e));
+          S ? (e.preventDefault(), e.stopPropagation(), G(e, "escape")) : M && (u !== "" || l && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ce(e));
           break;
         case "Backspace":
-          if (l && !Y && u === "" && r.length > 0) {
-            const n = P === -1 ? r.length - 1 : P, o = r.slice();
-            o.splice(n, 1), z(e, o, "removeOption", {
+          if (l && !X && u === "" && r.length > 0) {
+            const n = D === -1 ? r.length - 1 : D, o = r.slice();
+            o.splice(n, 1), K(e, o, "removeOption", {
               option: r[n]
             });
           }
           break;
         case "Delete":
-          if (l && !Y && u === "" && r.length > 0 && P !== -1) {
-            const n = P, o = r.slice();
-            o.splice(n, 1), z(e, o, "removeOption", {
+          if (l && !X && u === "" && r.length > 0 && D !== -1) {
+            const n = D, o = r.slice();
+            o.splice(n, 1), K(e, o, "removeOption", {
               option: r[n]
             });
           }
           break;
       }
-  }, Ge = (t) => {
-    $e(!0), Fe && !ye.current && q(t);
-  }, ve = (t) => {
-    if (h($)) {
-      d.current.focus();
+  }, Xe = (t) => {
+    Ae(!0), Re && !xe.current && q(t);
+  }, Le = (t) => {
+    if (h(P)) {
+      f.current.focus();
       return;
     }
-    $e(!1), Oe.current = !0, ye.current = !1, j && x.current !== -1 && S ? G(t, f[x.current], "blur") : j && L && u !== "" ? G(t, u, "blur", "freeSolo") : D && ue(t, r), X(t, "blur");
-  }, Qe = (t) => {
+    Ae(!1), ye.current = !0, xe.current = !1, U && b.current !== -1 && S ? Q(t, c[b.current], "blur") : U && V && u !== "" ? Q(t, u, "blur", "freeSolo") : $ && ue(t, r, "blur"), G(t, "blur");
+  }, Ge = (t) => {
     const e = t.target.value;
-    u !== e && (le(e), Ae(!1), H && H(t, e, "input")), e === "" ? !B && !l && z(t, null, "clear") : q(t);
-  }, Ze = (t) => {
+    u !== e && (le(e), De(!1), R && R(t, e, "input")), e === "" ? !j && !l && K(t, null, "clear") : q(t);
+  }, Qe = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    x.current !== e && F({
+    b.current !== e && F({
       event: t,
       index: e,
       reason: "mouse"
     });
-  }, et = (t) => {
+  }, Ze = (t) => {
     F({
       event: t,
       index: Number(t.currentTarget.getAttribute("data-option-index")),
       reason: "touch"
     }), fe.current = !0;
-  }, tt = (t) => {
+  }, et = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    G(t, f[e], "selectOption"), fe.current = !1;
-  }, nt = (t) => (e) => {
+    Q(t, c[e], "selectOption"), fe.current = !1;
+  }, tt = (t) => (e) => {
     const n = r.slice();
-    n.splice(t, 1), z(e, n, "removeOption", {
+    n.splice(t, 1), K(e, n, "removeOption", {
       option: r[t]
     });
-  }, Le = (t) => {
-    K ? X(t, "toggleInput") : q(t);
+  }, Ne = (t) => {
+    z ? G(t, "toggleInput") : q(t);
+  }, nt = (t) => {
+    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== A && t.preventDefault();
   }, rt = (t) => {
-    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== T && t.preventDefault();
+    t.currentTarget.contains(t.target) && (f.current.focus(), Fe && ye.current && f.current.selectionEnd - f.current.selectionStart === 0 && f.current.select(), ye.current = !1);
   }, ot = (t) => {
-    t.currentTarget.contains(t.target) && (d.current.focus(), qe && Oe.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), Oe.current = !1);
-  }, st = (t) => {
-    !w && (u === "" || !K) && Le(t);
+    !w && (u === "" || !z) && Ne(t);
   };
-  let ke = L && u.length > 0;
-  ke = ke || (l ? r.length > 0 : r !== null);
-  let Ve = f;
-  if (R) {
+  let Se = V && u.length > 0;
+  Se = Se || (l ? r.length > 0 : r !== null);
+  let Ve = c;
+  if (H) {
     const t = /* @__PURE__ */ new Map();
     let e = !1;
-    Ve = f.reduce((n, o, s) => {
-      const a = R(o);
-      return n.length > 0 && n[n.length - 1].group === a ? n[n.length - 1].options.push(o) : (process.env.NODE_ENV !== "production" && (t.get(a) && !e && (console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${b} returns duplicated headers.`, "You can solve the issue by sorting the options with the output of `groupBy`."), e = !0), t.set(a, !0)), n.push({
+    Ve = c.reduce((n, o, s) => {
+      const a = H(o);
+      return n.length > 0 && n[n.length - 1].group === a ? n[n.length - 1].options.push(o) : (process.env.NODE_ENV !== "production" && (t.get(a) && !e && (console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${m} returns duplicated headers.`, "You can solve the issue by sorting the options with the output of `groupBy`."), e = !0), t.set(a, !0)), n.push({
         key: s,
         index: s,
         group: a,
@@ -488,35 +479,35 @@ function yt(c) {
       })), n;
     }, []);
   }
-  return w && ae && ve(), {
-    getRootProps: (t = {}) => Me({
-      "aria-owns": we ? `${T}-listbox` : null
-    }, t, {
-      onKeyDown: Xe(t),
-      onMouseDown: rt,
-      onClick: ot
+  return w && ae && Le(), {
+    getRootProps: (t = {}) => ({
+      "aria-owns": Oe ? `${A}-listbox` : null,
+      ...t,
+      onKeyDown: Ye(t),
+      onMouseDown: nt,
+      onClick: rt
     }),
     getInputLabelProps: () => ({
-      id: `${T}-label`,
-      htmlFor: T
+      id: `${A}-label`,
+      htmlFor: A
     }),
     getInputProps: () => ({
-      id: T,
+      id: A,
       value: u,
-      onBlur: ve,
-      onFocus: Ge,
-      onChange: Qe,
-      onMouseDown: st,
+      onBlur: Le,
+      onFocus: Xe,
+      onChange: Ge,
+      onMouseDown: ot,
       // if open then this is handled imperatively so don't let react override
       // only have an opinion about this when closed
       "aria-activedescendant": S ? "" : null,
-      "aria-autocomplete": A ? "both" : "list",
-      "aria-controls": we ? `${T}-listbox` : void 0,
-      "aria-expanded": we,
+      "aria-autocomplete": _ ? "both" : "list",
+      "aria-controls": Oe ? `${A}-listbox` : void 0,
+      "aria-expanded": Oe,
       // Disable browser's suggestion that might overlap with the popup.
       // Handle autocomplete but not autofill.
       autoComplete: "off",
-      ref: d,
+      ref: f,
       autoCapitalize: "none",
       spellCheck: "false",
       role: "combobox",
@@ -525,26 +516,27 @@ function yt(c) {
     getClearProps: () => ({
       tabIndex: -1,
       type: "button",
-      onClick: Ne
+      onClick: Ce
     }),
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: "button",
-      onClick: Le
+      onClick: Ne
     }),
     getTagProps: ({
       index: t
-    }) => Me({
+    }) => ({
       key: t,
       "data-tag-index": t,
-      tabIndex: -1
-    }, !Y && {
-      onDelete: nt(t)
+      tabIndex: -1,
+      ...!X && {
+        onDelete: tt(t)
+      }
     }),
     getListboxProps: () => ({
       role: "listbox",
-      id: `${T}-listbox`,
-      "aria-labelledby": `${T}-label`,
+      id: `${A}-listbox`,
+      "aria-labelledby": `${A}-label`,
       ref: We,
       onMouseDown: (t) => {
         t.preventDefault();
@@ -554,120 +546,119 @@ function yt(c) {
       index: t,
       option: e
     }) => {
-      var n;
-      const o = (l ? r : [r]).some((a) => a != null && _(e, a)), s = U ? U(e) : !1;
+      const n = (l ? r : [r]).some((s) => s != null && E(e, s)), o = B ? B(e) : !1;
       return {
-        key: (n = te == null ? void 0 : te(e)) != null ? n : O(e),
+        key: (Y == null ? void 0 : Y(e)) ?? y(e),
         tabIndex: -1,
         role: "option",
-        id: `${T}-option-${t}`,
-        onMouseMove: Ze,
-        onClick: tt,
-        onTouchStart: et,
+        id: `${A}-option-${t}`,
+        onMouseMove: Qe,
+        onClick: et,
+        onTouchStart: Ze,
         "data-option-index": t,
-        "aria-disabled": s,
-        "aria-selected": o
+        "aria-disabled": o,
+        "aria-selected": n
       };
     },
-    id: T,
+    id: A,
     inputValue: u,
     value: r,
-    dirty: ke,
+    dirty: Se,
     expanded: S && ie,
     popupOpen: S,
-    focused: ae || P !== -1,
+    focused: ae || D !== -1,
     anchorEl: ie,
-    setAnchorEl: Be,
-    focusedTag: P,
+    setAnchorEl: Ue,
+    focusedTag: D,
     groupedOptions: Ve
   };
 }
-const Ot = "_autocomplete_mj65r_65", Z = {
+const yt = "_autocomplete_mj65r_65", ee = {
   "autocomplete__dropdown-item": "_autocomplete__dropdown-item_mj65r_65",
-  autocomplete: Ot,
+  autocomplete: yt,
   "autocomplete__dropdown-list": "_autocomplete__dropdown-list_mj65r_82",
   "option-focused": "_option-focused_mj65r_106"
-}, At = ({
-  labelKey: c,
+}, Dt = ({
+  labelKey: p,
   valueKey: h,
-  renderOption: m,
-  customSelectedOptionLabel: A,
-  options: v,
-  type: j,
-  value: V,
-  onChange: D,
+  renderOption: O,
+  customSelectedOptionLabel: _,
+  options: N,
+  type: U,
+  value: v,
+  onChange: $,
   onInputChange: M,
-  classNameWrapper: b,
+  classNameWrapper: m,
   "data-testid-wrapper": k,
-  classNameInputWrapper: B,
-  open: J = void 0,
+  classNameInputWrapper: j,
+  open: W = void 0,
   onOpen: w = void 0,
-  onClose: he = void 0,
-  ...W
+  onClose: ge = void 0,
+  ...J
 }) => {
-  const me = lt(), [ee, L] = at("");
-  v != null && v.some((i) => typeof i != "string") && (!c && !m || !h) && console.error(
+  const he = it(), [te, V] = lt("");
+  N != null && N.some((i) => typeof i != "string") && (!p && !O || !h) && console.error(
     '[autocomplete] When options is a list of objects, you must provide the "labelKey" or "renderOption" and "valueKey" parameters.'
   );
-  const { getRootProps: U, getInputProps: te, getOptionProps: ne, groupedOptions: R, getListboxProps: re } = yt({
-    id: `autocomplete_${me}`,
-    options: v,
-    open: J,
+  const { getRootProps: B, getInputProps: Y, getOptionProps: ne, groupedOptions: H, getListboxProps: re } = xt({
+    id: `autocomplete_${he.replace(/:/g, "-")}`,
+    options: N,
+    open: W,
     onOpen: w,
-    onClose: he,
-    getOptionLabel: (i) => typeof i == "string" ? i : A ? A(i) : String(i[c || "label"]),
-    value: V,
-    inputValue: ee,
-    isOptionEqualToValue: (i, y) => typeof i == "string" ? String(i) === String(y) : String(i[h || "id"]) === String(y[h || "id"]),
+    onClose: ge,
+    getOptionLabel: (i) => typeof i == "string" ? i : _ ? _(i) : String(i[p || "label"]),
+    value: v,
+    inputValue: te,
+    isOptionEqualToValue: (i, x) => typeof i == "string" ? String(i) === String(x) : String(i[h || "id"]) === String(x[h || "id"]),
     getOptionKey(i) {
       return String(typeof i == "string" ? i : i[h || "id"]);
     },
-    onChange: (i, y) => {
-      D && D(i, y);
+    onChange: (i, x) => {
+      $ && $(i, x);
     },
-    onInputChange: (i, y) => {
-      M && M(i, y), L(y);
+    onInputChange: (i, x) => {
+      M && M(i, x), V(x);
     },
-    onHighlightChange: (i, y, _) => {
+    onHighlightChange: (i, x, E) => {
       var l;
-      if (_ === "keyboard") {
-        const E = document.querySelector("#autocomplete-list"), oe = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
-        E == null || E.querySelectorAll("li").forEach((se) => se.classList.remove(Z["option-focused"])), (l = E == null ? void 0 : E.querySelector(`[id="${oe}"]`)) == null || l.classList.add(Z["option-focused"]);
+      if (E === "keyboard") {
+        const T = document.querySelector("#autocomplete-list"), oe = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
+        T == null || T.querySelectorAll("li").forEach((se) => se.classList.remove(ee["option-focused"])), (l = T == null ? void 0 : T.querySelector(`[id="${oe}"]`)) == null || l.classList.add(ee["option-focused"]);
       }
     }
-  }), be = {
-    ...te(),
-    ...W,
-    classNameWrapper: B
+  }), me = {
+    ...Y(),
+    ...J,
+    classNameWrapper: j
   };
-  return /* @__PURE__ */ Q("div", { className: ut(Z.autocomplete, b), "data-testid": k, children: /* @__PURE__ */ it("div", { ...U(), children: [
-    /* @__PURE__ */ Q(
-      ft,
+  return /* @__PURE__ */ Z("div", { className: at(ee.autocomplete, m), "data-testid": k, children: /* @__PURE__ */ st("div", { ...B(), children: [
+    /* @__PURE__ */ Z(
+      ct,
       {
-        rightIcon: j === "search" && /* @__PURE__ */ Q(ct, { color: "var(--accent)", icon: "magnifying-glass" }),
-        ...be
+        rightIcon: U === "search" && /* @__PURE__ */ Z(ut, { color: "var(--accent)", icon: "magnifying-glass" }),
+        ...me
       }
     ),
-    R.length > 0 && !W.disabled && /* @__PURE__ */ Q(
+    H.length > 0 && !J.disabled && /* @__PURE__ */ Z(
       "ul",
       {
         ...re(),
         id: "autocomplete-list",
-        className: Z["autocomplete__dropdown-list"],
-        children: R.map((i, y) => {
-          const { key: _, ...l } = ne({
+        className: ee["autocomplete__dropdown-list"],
+        children: H.map((i, x) => {
+          const { key: E, ...l } = ne({
             option: i,
-            index: y
-          }), E = typeof i == "string" ? i : m ? m(i) : String(i[c || "label"]);
-          return /* @__PURE__ */ Q(
+            index: x
+          }), T = typeof i == "string" ? i : O ? O(i) : String(i[p || "label"]);
+          return /* @__PURE__ */ Z(
             "li",
             {
-              tabIndex: y,
-              className: Z["autocomplete__dropdown-item"],
+              tabIndex: x,
+              className: ee["autocomplete__dropdown-item"],
               ...l,
-              children: E
+              children: T
             },
-            _
+            E
           );
         })
       }
@@ -675,5 +666,5 @@ const Ot = "_autocomplete_mj65r_65", Z = {
   ] }) });
 };
 export {
-  At as Autocomplete
+  Dt as Autocomplete
 };