@pismo/marola 2.0.1 → 2.1.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,104 +1,104 @@
-import { jsx as Z, jsxs as it } from "react/jsx-runtime";
-import * as h from "react";
+import { jsx as Q, jsxs as it } 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, b as Me } from "../../useSlotProps-DSnfx453.js";
+import { s as dt, b as Me } from "../../useSlotProps-C7dqSmdM.js";
 import { u as pt } from "../../useId-BW-oWmul.js";
-import { u as Se } from "../../useControlled-CCMYYdCM.js";
-import { u as ce } from "../../useEventCallback-BAQJJ3ye.js";
+import { u as we } from "../../useControlled-CCMYYdCM.js";
+import { u as fe } from "../../useEventCallback-BAQJJ3ye.js";
 import '../../assets/Autocomplete.css';const gt = (c) => {
-  const m = h.useRef({});
-  return h.useEffect(() => {
-    m.current = c;
-  }), m.current;
+  const h = g.useRef({});
+  return g.useEffect(() => {
+    h.current = c;
+  }), h.current;
 };
 function Re(c) {
   return typeof c.normalize < "u" ? c.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : c;
 }
 function ht(c = {}) {
   const {
-    ignoreAccents: m = !0,
-    ignoreCase: g = !0,
-    limit: A,
-    matchFrom: J = "any",
-    stringify: V,
-    trim: D = !1
+    ignoreAccents: h = !0,
+    ignoreCase: m = !0,
+    limit: $,
+    matchFrom: N = "any",
+    stringify: B,
+    trim: V = !1
   } = c;
-  return (C, {
-    inputValue: j,
+  return (P, {
+    inputValue: M,
     getOptionLabel: b
   }) => {
-    let S = D ? j.trim() : j;
-    g && (S = S.toLowerCase()), m && (S = Re(S));
-    const B = S ? C.filter((W) => {
-      let w = (V || b)(W);
-      return g && (w = w.toLowerCase()), m && (w = Re(w)), J === "start" ? w.indexOf(S) === 0 : w.indexOf(S) > -1;
-    }) : C;
-    return typeof A == "number" ? B.slice(0, A) : B;
+    let k = V ? M.trim() : M;
+    m && (k = k.toLowerCase()), h && (k = Re(k));
+    const U = k ? P.filter((K) => {
+      let w = (B || b)(K);
+      return m && (w = w.toLowerCase()), h && (w = Re(w)), N === "start" ? w.indexOf(k) === 0 : w.indexOf(k) > -1;
+    }) : P;
+    return typeof $ == "number" ? U.slice(0, $) : U;
   };
 }
-function fe(c, m) {
-  for (let g = 0; g < c.length; g += 1)
-    if (m(c[g]))
-      return g;
+function de(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) => {
-  var m;
-  return c.current !== null && ((m = c.current.parentElement) == null ? void 0 : m.contains(document.activeElement));
+  var h;
+  return c.current !== null && ((h = c.current.parentElement) == null ? void 0 : h.contains(document.activeElement));
 };
 function yt(c) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_isActiveElementInListbox: m = xt,
+    unstable_isActiveElementInListbox: h = xt,
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_classNamePrefix: g = "Mui",
-    autoComplete: A = !1,
-    autoHighlight: J = !1,
-    autoSelect: V = !1,
-    blurOnSelect: D = !1,
-    clearOnBlur: C = !c.freeSolo,
-    clearOnEscape: j = !1,
+    unstable_classNamePrefix: m = "Mui",
+    autoComplete: $ = !1,
+    autoHighlight: N = !1,
+    autoSelect: B = !1,
+    blurOnSelect: V = !1,
+    clearOnBlur: P = !c.freeSolo,
+    clearOnEscape: M = !1,
     componentName: b = "useAutocomplete",
-    defaultValue: S = c.multiple ? [] : null,
-    disableClearable: B = !1,
-    disableCloseOnSelect: W = !1,
+    defaultValue: k = c.multiple ? [] : null,
+    disableClearable: U = !1,
+    disableCloseOnSelect: K = !1,
     disabled: w,
-    disabledItemsFocusable: de = !1,
-    disableListWrap: te = !1,
-    filterOptions: pe = mt,
-    filterSelectedOptions: Y = !1,
-    freeSolo: N = !1,
-    getOptionDisabled: U,
-    getOptionKey: i,
-    getOptionLabel: x = (t) => {
+    disabledItemsFocusable: pe = !1,
+    disableListWrap: ee = !1,
+    filterOptions: ge = mt,
+    filterSelectedOptions: te = !1,
+    freeSolo: v = !1,
+    getOptionDisabled: R,
+    getOptionKey: ne,
+    getOptionLabel: re = (t) => {
       var e;
       return (e = t.label) != null ? e : t;
     },
-    groupBy: L,
-    handleHomeEndKeys: M = !c.freeSolo,
-    id: v,
-    includeInputInList: ne = !1,
-    inputValue: ge,
-    isOptionEqualToValue: R = (t, e) => t === e,
-    multiple: u = !1,
-    onChange: we,
+    groupBy: i,
+    handleHomeEndKeys: x = !c.freeSolo,
+    id: W,
+    includeInputInList: H = !1,
+    inputValue: L,
+    isOptionEqualToValue: A = (t, e) => t === e,
+    multiple: l = !1,
+    onChange: Se,
     onClose: ke,
     onHighlightChange: Ee,
-    onInputChange: H,
+    onInputChange: F,
     onOpen: Te,
     open: He,
     openOnFocus: Fe = !1,
     options: he,
-    readOnly: X = !1,
+    readOnly: Y = !1,
     selectOnFocus: qe = !c.freeSolo,
     value: je
-  } = c, E = pt(v);
-  let O = x;
+  } = c, E = pt(W);
+  let O = re;
   O = (t) => {
-    const e = x(t);
+    const e = re(t);
     if (typeof e != "string") {
       if (process.env.NODE_ENV !== "production") {
         const n = e === void 0 ? "undefined" : `${typeof e} (${e})`;
@@ -108,20 +108,20 @@ function yt(c) {
     }
     return e;
   };
-  const me = h.useRef(!1), be = h.useRef(!0), d = h.useRef(null), T = h.useRef(null), [re, Be] = h.useState(null), [_, xe] = h.useState(-1), _e = J ? 0 : -1, y = h.useRef(_e), [r, Ue] = Se({
+  const me = g.useRef(!1), be = g.useRef(!0), d = g.useRef(null), T = g.useRef(null), [oe, Be] = g.useState(null), [_, xe] = g.useState(-1), _e = N ? 0 : -1, y = g.useRef(_e), [r, Ue] = we({
     controlled: je,
-    default: S,
+    default: k,
     name: b
-  }), [a, oe] = Se({
-    controlled: ge,
+  }), [u, se] = we({
+    controlled: L,
     default: "",
     name: b,
     state: "inputValue"
-  }), [se, $e] = h.useState(!1), ie = h.useCallback((t, e) => {
-    if (!(u ? r.length < e.length : e !== null) && !C)
+  }), [ie, $e] = g.useState(!1), le = g.useCallback((t, e) => {
+    if (!(l ? r.length < e.length : e !== null) && !P)
       return;
     let o;
-    if (u)
+    if (l)
       o = "";
     else if (e == null)
       o = "";
@@ -129,62 +129,62 @@ function yt(c) {
       const s = O(e);
       o = typeof s == "string" ? s : "";
     }
-    a !== o && (oe(o), H && H(t, o, "reset"));
-  }, [O, a, u, H, oe, C, r]), [K, Pe] = Se({
+    u !== o && (se(o), F && F(t, o, "reset"));
+  }, [O, u, l, F, se, P, r]), [z, Pe] = we({
     controlled: He,
     default: !1,
     name: b,
     state: "open"
-  }), [Ke, Ae] = h.useState(!0), De = !u && r != null && a === O(r), k = K && !X, f = k ? pe(
-    he.filter((t) => !(Y && (u ? r : [r]).some((e) => e !== null && R(t, e)))),
+  }), [Ke, Ae] = g.useState(!0), De = !l && r != null && u === O(r), S = z && !Y, f = S ? ge(
+    he.filter((t) => !(te && (l ? r : [r]).some((e) => e !== null && A(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 ? "" : a,
+      inputValue: De && Ke ? "" : u,
       getOptionLabel: O
     }
-  ) : [], $ = gt({
+  ) : [], D = gt({
     filteredOptions: f,
     value: r,
-    inputValue: a
+    inputValue: u
   });
-  h.useEffect(() => {
-    const t = r !== $.value;
-    se && !t || N && !t || ie(null, r);
-  }, [r, ie, se, $.value, N]);
-  const ye = K && f.length > 0 && !X;
-  if (process.env.NODE_ENV !== "production" && r !== null && !N && he.length > 0) {
-    const t = (u ? r : [r]).filter((e) => !he.some((n) => R(n, e)));
+  g.useEffect(() => {
+    const t = r !== D.value;
+    ie && !t || v && !t || le(null, r);
+  }, [r, le, ie, D.value, v]);
+  const ye = z && f.length > 0 && !Y;
+  if (process.env.NODE_ENV !== "production" && r !== null && !v && he.length > 0) {
+    const t = (l ? r : [r]).filter((e) => !he.some((n) => A(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(`
 `));
   }
-  const le = ce((t) => {
-    t === -1 ? d.current.focus() : re.querySelector(`[data-tag-index="${t}"]`).focus();
+  const ae = fe((t) => {
+    t === -1 ? d.current.focus() : oe.querySelector(`[data-tag-index="${t}"]`).focus();
   });
-  h.useEffect(() => {
-    u && _ > r.length - 1 && (xe(-1), le(-1));
-  }, [r, u, _, le]);
+  g.useEffect(() => {
+    l && _ > r.length - 1 && (xe(-1), ae(-1));
+  }, [r, l, _, ae]);
   function ze(t, e) {
     if (!T.current || t < 0 || t >= f.length)
       return -1;
     let n = t;
     for (; ; ) {
-      const o = T.current.querySelector(`[data-option-index="${n}"]`), s = de ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
+      const o = T.current.querySelector(`[data-option-index="${n}"]`), s = pe ? !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)
         return -1;
     }
   }
-  const F = ce(({
+  const q = fe(({
     event: t,
     index: e,
     reason: n = "auto"
   }) => {
     if (y.current = e, e === -1 ? d.current.removeAttribute("aria-activedescendant") : d.current.setAttribute("aria-activedescendant", `${E}-option-${e}`), Ee && Ee(t, e === -1 ? null : f[e], n), !T.current)
       return;
-    const o = T.current.querySelector(`[role="option"].${g}-focused`);
-    o && (o.classList.remove(`${g}-focused`), o.classList.remove(`${g}-focusVisible`));
+    const o = T.current.querySelector(`[role="option"].${m}-focused`);
+    o && (o.classList.remove(`${m}-focused`), o.classList.remove(`${m}-focusVisible`));
     let s = T.current;
     if (T.current.getAttribute("role") !== "listbox" && (s = T.current.parentElement.querySelector('[role="listbox"]')), !s)
       return;
@@ -192,20 +192,20 @@ function yt(c) {
       s.scrollTop = 0;
       return;
     }
-    const l = T.current.querySelector(`[data-option-index="${e}"]`);
-    if (l && (l.classList.add(`${g}-focused`), n === "keyboard" && l.classList.add(`${g}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
-      const p = l, I = s.clientHeight + s.scrollTop, ue = p.offsetTop + p.offsetHeight;
-      ue > I ? s.scrollTop = ue - s.clientHeight : p.offsetTop - p.offsetHeight * (L ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (L ? 1.3 : 0));
+    const a = T.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, ce = p.offsetTop + p.offsetHeight;
+      ce > I ? s.scrollTop = ce - s.clientHeight : p.offsetTop - p.offsetHeight * (i ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (i ? 1.3 : 0));
     }
-  }), P = ce(({
+  }), C = fe(({
     event: t,
     diff: e,
     direction: n = "next",
     reason: o = "auto"
   }) => {
-    if (!k)
+    if (!S)
       return;
-    const l = ze((() => {
+    const a = ze((() => {
       const p = f.length - 1;
       if (e === "reset")
         return _e;
@@ -214,41 +214,41 @@ function yt(c) {
       if (e === "end")
         return p;
       const I = y.current + e;
-      return I < 0 ? I === -1 && ne ? -1 : te && y.current !== -1 || Math.abs(e) > 1 ? 0 : p : I > p ? I === p + 1 && ne ? -1 : te || Math.abs(e) > 1 ? p : 0 : I;
+      return I < 0 ? I === -1 && H ? -1 : ee && y.current !== -1 || Math.abs(e) > 1 ? 0 : p : I > p ? I === p + 1 && H ? -1 : ee || Math.abs(e) > 1 ? p : 0 : I;
     })(), n);
-    if (F({
-      index: l,
+    if (q({
+      index: a,
       reason: o,
       event: t
-    }), A && e !== "reset")
-      if (l === -1)
-        d.current.value = a;
+    }), $ && e !== "reset")
+      if (a === -1)
+        d.current.value = u;
       else {
-        const p = O(f[l]);
-        d.current.value = p, p.toLowerCase().indexOf(a.toLowerCase()) === 0 && a.length > 0 && d.current.setSelectionRange(a.length, p.length);
+        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);
       }
   }), Je = () => {
     const t = (e, n) => {
       const o = e ? O(e) : "", s = n ? O(n) : "";
       return o === s;
     };
-    if (y.current !== -1 && $.filteredOptions && $.filteredOptions.length !== f.length && $.inputValue === a && (u ? r.length === $.value.length && $.value.every((e, n) => O(r[n]) === O(e)) : t($.value, r))) {
-      const e = $.filteredOptions[y.current];
+    if (y.current !== -1 && D.filteredOptions && D.filteredOptions.length !== f.length && D.inputValue === u && (l ? r.length === D.value.length && D.value.every((e, n) => O(r[n]) === O(e)) : t(D.value, r))) {
+      const e = D.filteredOptions[y.current];
       if (e)
-        return fe(f, (n) => O(n) === O(e));
+        return de(f, (n) => O(n) === O(e));
     }
     return -1;
-  }, Oe = h.useCallback(() => {
-    if (!k)
+  }, Oe = g.useCallback(() => {
+    if (!S)
       return;
     const t = Je();
     if (t !== -1) {
       y.current = t;
       return;
     }
-    const e = u ? r[0] : r;
+    const e = l ? r[0] : r;
     if (f.length === 0 || e == null) {
-      P({
+      C({
         diff: "reset"
       });
       return;
@@ -256,23 +256,23 @@ function yt(c) {
     if (T.current) {
       if (e != null) {
         const n = f[y.current];
-        if (u && n && fe(r, (s) => R(n, s)) !== -1)
+        if (l && n && de(r, (s) => A(n, s)) !== -1)
           return;
-        const o = fe(f, (s) => R(s, e));
-        o === -1 ? P({
+        const o = de(f, (s) => A(s, e));
+        o === -1 ? C({
           diff: "reset"
-        }) : F({
+        }) : q({
           index: o
         });
         return;
       }
       if (y.current >= f.length - 1) {
-        F({
+        q({
           index: f.length - 1
         });
         return;
       }
-      F({
+      q({
         index: y.current
       });
     }
@@ -281,48 +281,48 @@ function yt(c) {
     f.length,
     // Don't sync the highlighted index with the value when multiple
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    u ? !1 : r,
-    Y,
-    P,
-    F,
-    k,
-    a,
-    u
-  ]), We = ce((t) => {
+    l ? !1 : r,
+    te,
+    C,
+    q,
+    S,
+    u,
+    l
+  ]), We = fe((t) => {
     dt(T, t), t && Oe();
   });
-  process.env.NODE_ENV !== "production" && h.useEffect(() => {
+  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(`
 `)));
-  }, [b]), h.useEffect(() => {
+  }, [b]), g.useEffect(() => {
     Oe();
   }, [Oe]);
-  const q = (t) => {
-    K || (Pe(!0), Ae(!0), Te && Te(t));
-  }, G = (t, e) => {
-    K && (Pe(!1), ke && ke(t, e));
-  }, z = (t, e, n, o) => {
-    if (u) {
-      if (r.length === e.length && r.every((s, l) => s === e[l]))
+  const j = (t) => {
+    z || (Pe(!0), Ae(!0), Te && Te(t));
+  }, X = (t, e) => {
+    z && (Pe(!1), ke && ke(t, e));
+  }, J = (t, e, n, o) => {
+    if (l) {
+      if (r.length === e.length && r.every((s, a) => s === e[a]))
         return;
     } else if (r === e)
       return;
-    we && we(t, e, n, o), Ue(e);
-  }, ae = h.useRef(!1), Q = (t, e, n = "selectOption", o = "options") => {
-    let s = n, l = e;
-    if (u) {
-      if (l = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
-        const I = l.filter((ue) => R(e, ue));
+    Se && Se(t, e, n, o), Ue(e);
+  }, ue = g.useRef(!1), G = (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((ce) => A(e, ce));
         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 p = fe(l, (I) => R(e, I));
-      p === -1 ? l.push(e) : o !== "freeSolo" && (l.splice(p, 1), s = "removeOption");
+      const p = de(a, (I) => A(e, I));
+      p === -1 ? a.push(e) : o !== "freeSolo" && (a.splice(p, 1), s = "removeOption");
     }
-    ie(t, l), z(t, l, s, {
+    le(t, a), J(t, a, s, {
       option: e
-    }), !W && (!t || !t.ctrlKey && !t.metaKey) && G(t, s), (D === !0 || D === "touch" && ae.current || D === "mouse" && !ae.current) && d.current.blur();
+    }), !K && (!t || !t.ctrlKey && !t.metaKey) && X(t, s), (V === !0 || V === "touch" && ue.current || V === "mouse" && !ue.current) && d.current.blur();
   };
   function Ye(t, e) {
     if (t === -1)
@@ -331,7 +331,7 @@ function yt(c) {
     for (; ; ) {
       if (e === "next" && n === r.length || e === "previous" && n === -1)
         return -1;
-      const o = re.querySelector(`[data-tag-index="${n}"]`);
+      const o = oe.querySelector(`[data-tag-index="${n}"]`);
       if (!o || !o.hasAttribute("tabindex") || o.disabled || o.getAttribute("aria-disabled") === "true")
         n += e === "next" ? 1 : -1;
       else
@@ -339,18 +339,18 @@ function yt(c) {
     }
   }
   const Ce = (t, e) => {
-    if (!u)
+    if (!l)
       return;
-    a === "" && G(t, "toggleInput");
+    u === "" && X(t, "toggleInput");
     let n = _;
-    _ === -1 ? a === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = Ye(n, e), xe(n), le(n);
+    _ === -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), xe(n), ae(n);
   }, Ne = (t) => {
-    me.current = !0, oe(""), H && H(t, "", "clear"), z(t, u ? [] : null, "clear");
+    me.current = !0, se(""), F && F(t, "", "clear"), J(t, l ? [] : null, "clear");
   }, Xe = (t) => (e) => {
-    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (_ !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (xe(-1), le(-1)), e.which !== 229))
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (_ !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (xe(-1), ae(-1)), e.which !== 229))
       switch (e.key) {
         case "Home":
-          k && M && (e.preventDefault(), P({
+          S && x && (e.preventDefault(), C({
             diff: "start",
             direction: "next",
             reason: "keyboard",
@@ -358,7 +358,7 @@ function yt(c) {
           }));
           break;
         case "End":
-          k && M && (e.preventDefault(), P({
+          S && x && (e.preventDefault(), C({
             diff: "end",
             direction: "previous",
             reason: "keyboard",
@@ -366,36 +366,36 @@ function yt(c) {
           }));
           break;
         case "PageUp":
-          e.preventDefault(), P({
+          e.preventDefault(), C({
             diff: -5,
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), q(e);
+          }), j(e);
           break;
         case "PageDown":
-          e.preventDefault(), P({
+          e.preventDefault(), C({
             diff: bt,
             direction: "next",
             reason: "keyboard",
             event: e
-          }), q(e);
+          }), j(e);
           break;
         case "ArrowDown":
-          e.preventDefault(), P({
+          e.preventDefault(), C({
             diff: 1,
             direction: "next",
             reason: "keyboard",
             event: e
-          }), q(e);
+          }), j(e);
           break;
         case "ArrowUp":
-          e.preventDefault(), P({
+          e.preventDefault(), C({
             diff: -1,
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), q(e);
+          }), j(e);
           break;
         case "ArrowLeft":
           Ce(e, "previous");
@@ -404,91 +404,91 @@ function yt(c) {
           Ce(e, "next");
           break;
         case "Enter":
-          if (y.current !== -1 && k) {
-            const n = f[y.current], o = U ? U(n) : !1;
+          if (y.current !== -1 && S) {
+            const n = f[y.current], o = R ? R(n) : !1;
             if (e.preventDefault(), o)
               return;
-            Q(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
-          } else N && a !== "" && De === !1 && (u && e.preventDefault(), Q(e, a, "createOption", "freeSolo"));
+            G(e, n, "selectOption"), $ && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
+          } else v && u !== "" && De === !1 && (l && e.preventDefault(), G(e, u, "createOption", "freeSolo"));
           break;
         case "Escape":
-          k ? (e.preventDefault(), e.stopPropagation(), G(e, "escape")) : j && (a !== "" || u && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ne(e));
+          S ? (e.preventDefault(), e.stopPropagation(), X(e, "escape")) : M && (u !== "" || l && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ne(e));
           break;
         case "Backspace":
-          if (u && !X && a === "" && r.length > 0) {
+          if (l && !Y && u === "" && r.length > 0) {
             const n = _ === -1 ? r.length - 1 : _, o = r.slice();
-            o.splice(n, 1), z(e, o, "removeOption", {
+            o.splice(n, 1), J(e, o, "removeOption", {
               option: r[n]
             });
           }
           break;
         case "Delete":
-          if (u && !X && a === "" && r.length > 0 && _ !== -1) {
+          if (l && !Y && u === "" && r.length > 0 && _ !== -1) {
             const n = _, o = r.slice();
-            o.splice(n, 1), z(e, o, "removeOption", {
+            o.splice(n, 1), J(e, o, "removeOption", {
               option: r[n]
             });
           }
           break;
       }
   }, Ge = (t) => {
-    $e(!0), Fe && !me.current && q(t);
-  }, Le = (t) => {
-    if (m(T)) {
+    $e(!0), Fe && !me.current && j(t);
+  }, ve = (t) => {
+    if (h(T)) {
       d.current.focus();
       return;
     }
-    $e(!1), be.current = !0, me.current = !1, V && y.current !== -1 && k ? Q(t, f[y.current], "blur") : V && N && a !== "" ? Q(t, a, "blur", "freeSolo") : C && ie(t, r), G(t, "blur");
+    $e(!1), be.current = !0, me.current = !1, B && y.current !== -1 && S ? G(t, f[y.current], "blur") : B && v && u !== "" ? G(t, u, "blur", "freeSolo") : P && le(t, r), X(t, "blur");
   }, Qe = (t) => {
     const e = t.target.value;
-    a !== e && (oe(e), Ae(!1), H && H(t, e, "input")), e === "" ? !B && !u && z(t, null, "clear") : q(t);
+    u !== e && (se(e), Ae(!1), F && F(t, e, "input")), e === "" ? !U && !l && J(t, null, "clear") : j(t);
   }, Ze = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    y.current !== e && F({
+    y.current !== e && q({
       event: t,
       index: e,
       reason: "mouse"
     });
   }, et = (t) => {
-    F({
+    q({
       event: t,
       index: Number(t.currentTarget.getAttribute("data-option-index")),
       reason: "touch"
-    }), ae.current = !0;
+    }), ue.current = !0;
   }, tt = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    Q(t, f[e], "selectOption"), ae.current = !1;
+    G(t, f[e], "selectOption"), ue.current = !1;
   }, nt = (t) => (e) => {
     const n = r.slice();
-    n.splice(t, 1), z(e, n, "removeOption", {
+    n.splice(t, 1), J(e, n, "removeOption", {
       option: r[t]
     });
-  }, ve = (t) => {
-    K ? G(t, "toggleInput") : q(t);
+  }, Le = (t) => {
+    z ? X(t, "toggleInput") : j(t);
   }, rt = (t) => {
     t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== E && t.preventDefault();
   }, ot = (t) => {
     t.currentTarget.contains(t.target) && (d.current.focus(), qe && be.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), be.current = !1);
   }, st = (t) => {
-    !w && (a === "" || !K) && ve(t);
+    !w && (u === "" || !z) && Le(t);
   };
-  let Ie = N && a.length > 0;
-  Ie = Ie || (u ? r.length > 0 : r !== null);
+  let Ie = v && u.length > 0;
+  Ie = Ie || (l ? r.length > 0 : r !== null);
   let Ve = f;
-  if (L) {
+  if (i) {
     const t = /* @__PURE__ */ new Map();
     let e = !1;
     Ve = f.reduce((n, o, s) => {
-      const l = L(o);
-      return n.length > 0 && n[n.length - 1].group === l ? n[n.length - 1].options.push(o) : (process.env.NODE_ENV !== "production" && (t.get(l) && !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(l, !0)), n.push({
+      const a = i(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({
         key: s,
         index: s,
-        group: l,
+        group: a,
         options: [o]
       })), n;
     }, []);
   }
-  return w && se && Le(), {
+  return w && ie && ve(), {
     getRootProps: (t = {}) => Me({
       "aria-owns": ye ? `${E}-listbox` : null
     }, t, {
@@ -502,15 +502,15 @@ function yt(c) {
     }),
     getInputProps: () => ({
       id: E,
-      value: a,
-      onBlur: Le,
+      value: u,
+      onBlur: ve,
       onFocus: Ge,
       onChange: Qe,
       onMouseDown: st,
       // if open then this is handled imperatively so don't let react override
       // only have an opinion about this when closed
-      "aria-activedescendant": k ? "" : null,
-      "aria-autocomplete": A ? "both" : "list",
+      "aria-activedescendant": S ? "" : null,
+      "aria-autocomplete": $ ? "both" : "list",
       "aria-controls": ye ? `${E}-listbox` : void 0,
       "aria-expanded": ye,
       // Disable browser's suggestion that might overlap with the popup.
@@ -530,7 +530,7 @@ function yt(c) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: "button",
-      onClick: ve
+      onClick: Le
     }),
     getTagProps: ({
       index: t
@@ -538,7 +538,7 @@ function yt(c) {
       key: t,
       "data-tag-index": t,
       tabIndex: -1
-    }, !X && {
+    }, !Y && {
       onDelete: nt(t)
     }),
     getListboxProps: () => ({
@@ -555,9 +555,9 @@ function yt(c) {
       option: e
     }) => {
       var n;
-      const o = (u ? r : [r]).some((l) => l != null && R(e, l)), s = U ? U(e) : !1;
+      const o = (l ? r : [r]).some((a) => a != null && A(e, a)), s = R ? R(e) : !1;
       return {
-        key: (n = i == null ? void 0 : i(e)) != null ? n : O(e),
+        key: (n = ne == null ? void 0 : ne(e)) != null ? n : O(e),
         tabIndex: -1,
         role: "option",
         id: `${E}-option-${t}`,
@@ -570,85 +570,87 @@ function yt(c) {
       };
     },
     id: E,
-    inputValue: a,
+    inputValue: u,
     value: r,
     dirty: Ie,
-    expanded: k && re,
-    popupOpen: k,
-    focused: se || _ !== -1,
-    anchorEl: re,
+    expanded: S && oe,
+    popupOpen: S,
+    focused: ie || _ !== -1,
+    anchorEl: oe,
     setAnchorEl: Be,
     focusedTag: _,
     groupedOptions: Ve
   };
 }
-const Ot = "_autocomplete_mj65r_65", ee = {
+const Ot = "_autocomplete_mj65r_65", Z = {
   "autocomplete__dropdown-item": "_autocomplete__dropdown-item_mj65r_65",
   autocomplete: Ot,
   "autocomplete__dropdown-list": "_autocomplete__dropdown-list_mj65r_82",
   "option-focused": "_option-focused_mj65r_106"
 }, At = ({
   labelKey: c,
-  valueKey: m,
-  options: g,
-  type: A,
-  value: J,
-  onChange: V,
-  onInputChange: D,
-  classNameWrapper: C,
-  "data-testid-wrapper": j,
-  classNameInputWrapper: b,
-  ...S
+  valueKey: h,
+  renderOption: m,
+  customSelectedOptionLabel: $,
+  options: N,
+  type: B,
+  value: V,
+  onChange: P,
+  onInputChange: M,
+  classNameWrapper: b,
+  "data-testid-wrapper": k,
+  classNameInputWrapper: U,
+  ...K
 }) => {
-  const B = lt(), [W, w] = at("");
-  g != null && g.some((i) => typeof i != "string") && (!c || !m) && console.error(
-    '[autocomplete] When options is a list of objects, you must provide the "labelKey" and "valueKey" parameters.'
+  const w = lt(), [pe, ee] = at("");
+  (N != null && N.some((i) => typeof i != "string") && !c && !m || !h) && console.error(
+    '[autocomplete] When options is a list of objects, you must provide the "labelKey" or "renderOption" and "valueKey" parameters.'
   );
-  const { getRootProps: de, getInputProps: te, getOptionProps: pe, groupedOptions: Y, getListboxProps: N } = yt({
-    id: `autocomplete_${B}`,
-    options: g,
-    getOptionLabel: (i) => typeof i == "string" ? i : String(i[c || "label"]),
-    value: J,
-    inputValue: W,
-    isOptionEqualToValue: (i, x) => typeof i == "string" ? String(i) === String(x) : String(i[m || "id"]) === String(x[m || "id"]),
+  const { getRootProps: ge, getInputProps: te, getOptionProps: v, groupedOptions: R, getListboxProps: ne } = yt({
+    id: `autocomplete_${w}`,
+    options: N,
+    getOptionLabel: (i) => typeof i == "string" ? i : $ ? $(i) : String(i[c || "label"]),
+    value: V,
+    inputValue: pe,
+    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[m || "id"]);
+      return String(typeof i == "string" ? i : i[h || "id"]);
     },
     onChange: (i, x) => {
-      V && V(i, x);
+      P && P(i, x);
     },
     onInputChange: (i, x) => {
-      D && D(i, x), w(x);
+      M && M(i, x), ee(x);
     },
-    onHighlightChange: (i, x, L) => {
-      var M;
-      if (L === "keyboard") {
-        const v = document.querySelector("#autocomplete-list"), ne = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
-        v == null || v.querySelectorAll("li").forEach((ge) => ge.classList.remove(ee["option-focused"])), (M = v == null ? void 0 : v.querySelector(`[id="${ne}"]`)) == null || M.classList.add(ee["option-focused"]);
+    onHighlightChange: (i, x, W) => {
+      var H;
+      if (W === "keyboard") {
+        const L = document.querySelector("#autocomplete-list"), A = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
+        L == null || L.querySelectorAll("li").forEach((l) => l.classList.remove(Z["option-focused"])), (H = L == null ? void 0 : L.querySelector(`[id="${A}"]`)) == null || H.classList.add(Z["option-focused"]);
       }
     }
-  }), U = {
+  }), re = {
     ...te(),
-    ...S,
-    classNameWrapper: b
+    ...K,
+    classNameWrapper: U
   };
-  return /* @__PURE__ */ Z("div", { className: ut(ee.autocomplete, C), "data-testid": j, children: /* @__PURE__ */ it("div", { ...de(), children: [
-    /* @__PURE__ */ Z(
+  return /* @__PURE__ */ Q("div", { className: ut(Z.autocomplete, b), "data-testid": k, children: /* @__PURE__ */ it("div", { ...ge(), children: [
+    /* @__PURE__ */ Q(
       ft,
       {
-        rightIcon: A === "search" && /* @__PURE__ */ Z(ct, { color: "var(--accent)", icon: "magnifying-glass" }),
-        ...U
+        rightIcon: B === "search" && /* @__PURE__ */ Q(ct, { color: "var(--accent)", icon: "magnifying-glass" }),
+        ...re
       }
     ),
-    Y.length > 0 && !S.disabled && /* @__PURE__ */ Z(
+    R.length > 0 && !K.disabled && /* @__PURE__ */ Q(
       "ul",
       {
-        ...N(),
+        ...ne(),
         id: "autocomplete-list",
-        className: ee["autocomplete__dropdown-list"],
-        children: Y.map((i, x) => {
-          const L = pe({ option: i, index: x }), M = typeof i == "string" ? i : String(i[c || "label"]);
-          return /* @__PURE__ */ Z("li", { tabIndex: x, className: ee["autocomplete__dropdown-item"], ...L, children: M });
+        className: Z["autocomplete__dropdown-list"],
+        children: R.map((i, x) => {
+          const W = v({ option: i, index: x }), H = typeof i == "string" ? i : m ? m(i) : String(i[c || "label"]);
+          return /* @__PURE__ */ Q("li", { tabIndex: x, className: Z["autocomplete__dropdown-item"], ...W, children: H });
         })
       }
     )