@pismo/marola 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,679 @@
+import '../../assets/Autocomplete.css';
+import { jsx as le, jsxs as lt } from "react/jsx-runtime";
+import * as h from "react";
+import { useId as at, useState as ut, createElement as ct } from "react";
+import { Icon as pt } from "../Icon/Icon.js";
+import { Input as ft } from "../Input/Input.js";
+import { b as Ve, s as dt } from "../../useSlotProps-C_I1kEHr.js";
+import { u as gt } from "../../useId-BW-oWmul.js";
+import { u as _e } from "../../useControlled-CCMYYdCM.js";
+import { u as ae } from "../../useEventCallback-BAQJJ3ye.js";
+const ht = (c) => {
+  const b = h.useRef({});
+  return h.useEffect(() => {
+    b.current = c;
+  }), b.current;
+};
+function Me(c) {
+  return typeof c.normalize < "u" ? c.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : c;
+}
+function yt(c = {}) {
+  const {
+    ignoreAccents: b = !0,
+    ignoreCase: g = !0,
+    limit: D,
+    matchFrom: K = "any",
+    stringify: v,
+    trim: C = !1
+  } = c;
+  return (N, {
+    inputValue: L,
+    getOptionLabel: m
+  }) => {
+    let S = C ? L.trim() : L;
+    g && (S = S.toLowerCase()), b && (S = Me(S));
+    const B = S ? N.filter((z) => {
+      let w = (v || m)(z);
+      return g && (w = w.toLowerCase()), b && (w = Me(w)), K === "start" ? w.indexOf(S) === 0 : w.indexOf(S) > -1;
+    }) : N;
+    return typeof D == "number" ? B.slice(0, D) : B;
+  };
+}
+function ue(c, b) {
+  for (let g = 0; g < c.length; g += 1)
+    if (b(c[g]))
+      return g;
+  return -1;
+}
+const bt = yt(), Re = 5, mt = (c) => {
+  var b;
+  return c.current !== null && ((b = c.current.parentElement) == null ? void 0 : b.contains(document.activeElement));
+};
+function xt(c) {
+  const {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    unstable_isActiveElementInListbox: b = mt,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    unstable_classNamePrefix: g = "Mui",
+    autoComplete: D = !1,
+    autoHighlight: K = !1,
+    autoSelect: v = !1,
+    blurOnSelect: C = !1,
+    clearOnBlur: N = !c.freeSolo,
+    clearOnEscape: L = !1,
+    componentName: m = "useAutocomplete",
+    defaultValue: S = c.multiple ? [] : null,
+    disableClearable: B = !1,
+    disableCloseOnSelect: z = !1,
+    disabled: w,
+    disabledItemsFocusable: ce = !1,
+    disableListWrap: J = !1,
+    filterOptions: pe = bt,
+    filterSelectedOptions: Q = !1,
+    freeSolo: i = !1,
+    getOptionDisabled: y,
+    getOptionKey: V,
+    getOptionLabel: M = (t) => {
+      var e;
+      return (e = t.label) != null ? e : t;
+    },
+    groupBy: _,
+    handleHomeEndKeys: Z = !c.freeSolo,
+    id: fe,
+    includeInputInList: Oe = !1,
+    inputValue: He,
+    isOptionEqualToValue: R = (t, e) => t === e,
+    multiple: u = !1,
+    onChange: Ie,
+    onClose: Se,
+    onHighlightChange: we,
+    onInputChange: H,
+    onOpen: ke,
+    open: Fe,
+    openOnFocus: qe = !1,
+    options: de,
+    readOnly: W = !1,
+    selectOnFocus: Be = !c.freeSolo,
+    value: Ue
+  } = c, E = gt(fe);
+  let O = M;
+  O = (t) => {
+    const e = M(t);
+    if (typeof e != "string") {
+      if (process.env.NODE_ENV !== "production") {
+        const o = e === void 0 ? "undefined" : `${typeof e} (${e})`;
+        console.error(`MUI: The \`getOptionLabel\` method of ${m} returned ${o} instead of a string for ${JSON.stringify(t)}.`);
+      }
+      return String(e);
+    }
+    return e;
+  };
+  const ge = h.useRef(!1), he = h.useRef(!0), f = h.useRef(null), T = h.useRef(null), [ee, je] = h.useState(null), [$, ye] = h.useState(-1), Ee = K ? 0 : -1, x = h.useRef(Ee), [r, Ke] = _e({
+    controlled: Ue,
+    default: S,
+    name: m
+  }), [a, te] = _e({
+    controlled: He,
+    default: "",
+    name: m,
+    state: "inputValue"
+  }), [oe, Te] = h.useState(!1), re = h.useCallback((t, e) => {
+    if (!(u ? r.length < e.length : e !== null) && !N)
+      return;
+    let n;
+    if (u)
+      n = "";
+    else if (e == null)
+      n = "";
+    else {
+      const s = O(e);
+      n = typeof s == "string" ? s : "";
+    }
+    a !== n && (te(n), H && H(t, n, "reset"));
+  }, [O, a, u, H, te, N, r]), [U, $e] = _e({
+    controlled: Fe,
+    default: !1,
+    name: m,
+    state: "open"
+  }), [ze, Pe] = h.useState(!0), Ae = !u && r != null && a === O(r), k = U && !W, p = k ? pe(
+    de.filter((t) => !(Q && (u ? r : [r]).some((e) => e !== null && R(t, e)))),
+    // we use the empty string to manipulate `filterOptions` to not filter any options
+    // i.e. the filter predicate always returns true
+    {
+      inputValue: Ae && ze ? "" : a,
+      getOptionLabel: O
+    }
+  ) : [], P = ht({
+    filteredOptions: p,
+    value: r,
+    inputValue: a
+  });
+  h.useEffect(() => {
+    const t = r !== P.value;
+    oe && !t || i && !t || re(null, r);
+  }, [r, re, oe, P.value, i]);
+  const be = U && p.length > 0 && !W;
+  if (process.env.NODE_ENV !== "production" && r !== null && !i && de.length > 0) {
+    const t = (u ? r : [r]).filter((e) => !de.some((o) => R(o, 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 ne = ae((t) => {
+    t === -1 ? f.current.focus() : ee.querySelector(`[data-tag-index="${t}"]`).focus();
+  });
+  h.useEffect(() => {
+    u && $ > r.length - 1 && (ye(-1), ne(-1));
+  }, [r, u, $, ne]);
+  function Je(t, e) {
+    if (!T.current || t < 0 || t >= p.length)
+      return -1;
+    let o = t;
+    for (; ; ) {
+      const n = T.current.querySelector(`[data-option-index="${o}"]`), s = ce ? !1 : !n || n.disabled || n.getAttribute("aria-disabled") === "true";
+      if (n && n.hasAttribute("tabindex") && !s)
+        return o;
+      if (e === "next" ? o = (o + 1) % p.length : o = (o - 1 + p.length) % p.length, o === t)
+        return -1;
+    }
+  }
+  const F = ae(({
+    event: t,
+    index: e,
+    reason: o = "auto"
+  }) => {
+    if (x.current = e, e === -1 ? f.current.removeAttribute("aria-activedescendant") : f.current.setAttribute("aria-activedescendant", `${E}-option-${e}`), we && we(t, e === -1 ? null : p[e], o), !T.current)
+      return;
+    const n = T.current.querySelector(`[role="option"].${g}-focused`);
+    n && (n.classList.remove(`${g}-focused`), n.classList.remove(`${g}-focusVisible`));
+    let s = T.current;
+    if (T.current.getAttribute("role") !== "listbox" && (s = T.current.parentElement.querySelector('[role="listbox"]')), !s)
+      return;
+    if (e === -1) {
+      s.scrollTop = 0;
+      return;
+    }
+    const l = T.current.querySelector(`[data-option-index="${e}"]`);
+    if (l && (l.classList.add(`${g}-focused`), o === "keyboard" && l.classList.add(`${g}-focusVisible`), s.scrollHeight > s.clientHeight && o !== "mouse" && o !== "touch")) {
+      const d = l, I = s.clientHeight + s.scrollTop, ie = d.offsetTop + d.offsetHeight;
+      ie > I ? s.scrollTop = ie - s.clientHeight : d.offsetTop - d.offsetHeight * (_ ? 1.3 : 0) < s.scrollTop && (s.scrollTop = d.offsetTop - d.offsetHeight * (_ ? 1.3 : 0));
+    }
+  }), A = ae(({
+    event: t,
+    diff: e,
+    direction: o = "next",
+    reason: n = "auto"
+  }) => {
+    if (!k)
+      return;
+    const l = Je((() => {
+      const d = p.length - 1;
+      if (e === "reset")
+        return Ee;
+      if (e === "start")
+        return 0;
+      if (e === "end")
+        return d;
+      const I = x.current + e;
+      return I < 0 ? I === -1 && Oe ? -1 : J && x.current !== -1 || Math.abs(e) > 1 ? 0 : d : I > d ? I === d + 1 && Oe ? -1 : J || Math.abs(e) > 1 ? d : 0 : I;
+    })(), o);
+    if (F({
+      index: l,
+      reason: n,
+      event: t
+    }), D && e !== "reset")
+      if (l === -1)
+        f.current.value = a;
+      else {
+        const d = O(p[l]);
+        f.current.value = d, d.toLowerCase().indexOf(a.toLowerCase()) === 0 && a.length > 0 && f.current.setSelectionRange(a.length, d.length);
+      }
+  }), We = () => {
+    const t = (e, o) => {
+      const n = e ? O(e) : "", s = o ? O(o) : "";
+      return n === s;
+    };
+    if (x.current !== -1 && P.filteredOptions && P.filteredOptions.length !== p.length && P.inputValue === a && (u ? r.length === P.value.length && P.value.every((e, o) => O(r[o]) === O(e)) : t(P.value, r))) {
+      const e = P.filteredOptions[x.current];
+      if (e)
+        return ue(p, (o) => O(o) === O(e));
+    }
+    return -1;
+  }, me = h.useCallback(() => {
+    if (!k)
+      return;
+    const t = We();
+    if (t !== -1) {
+      x.current = t;
+      return;
+    }
+    const e = u ? r[0] : r;
+    if (p.length === 0 || e == null) {
+      A({
+        diff: "reset"
+      });
+      return;
+    }
+    if (T.current) {
+      if (e != null) {
+        const o = p[x.current];
+        if (u && o && ue(r, (s) => R(o, s)) !== -1)
+          return;
+        const n = ue(p, (s) => R(s, e));
+        n === -1 ? A({
+          diff: "reset"
+        }) : F({
+          index: n
+        });
+        return;
+      }
+      if (x.current >= p.length - 1) {
+        F({
+          index: p.length - 1
+        });
+        return;
+      }
+      F({
+        index: x.current
+      });
+    }
+  }, [
+    // Only sync the highlighted index when the option switch between empty and not
+    p.length,
+    // Don't sync the highlighted index with the value when multiple
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    u ? !1 : r,
+    Q,
+    A,
+    F,
+    k,
+    a,
+    u
+  ]), Ye = ae((t) => {
+    dt(T, t), t && me();
+  });
+  process.env.NODE_ENV !== "production" && h.useEffect(() => {
+    (!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(`
+`)));
+  }, [m]), h.useEffect(() => {
+    me();
+  }, [me]);
+  const q = (t) => {
+    U || ($e(!0), Pe(!0), ke && ke(t));
+  }, Y = (t, e) => {
+    U && ($e(!1), Se && Se(t, e));
+  }, j = (t, e, o, n) => {
+    if (u) {
+      if (r.length === e.length && r.every((s, l) => s === e[l]))
+        return;
+    } else if (r === e)
+      return;
+    Ie && Ie(t, e, o, n), Ke(e);
+  }, se = h.useRef(!1), X = (t, e, o = "selectOption", n = "options") => {
+    let s = o, l = e;
+    if (u) {
+      if (l = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
+        const I = l.filter((ie) => R(e, ie));
+        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 d = ue(l, (I) => R(e, I));
+      d === -1 ? l.push(e) : n !== "freeSolo" && (l.splice(d, 1), s = "removeOption");
+    }
+    re(t, l), j(t, l, s, {
+      option: e
+    }), !z && (!t || !t.ctrlKey && !t.metaKey) && Y(t, s), (C === !0 || C === "touch" && se.current || C === "mouse" && !se.current) && f.current.blur();
+  };
+  function Xe(t, e) {
+    if (t === -1)
+      return -1;
+    let o = t;
+    for (; ; ) {
+      if (e === "next" && o === r.length || e === "previous" && o === -1)
+        return -1;
+      const n = ee.querySelector(`[data-tag-index="${o}"]`);
+      if (!n || !n.hasAttribute("tabindex") || n.disabled || n.getAttribute("aria-disabled") === "true")
+        o += e === "next" ? 1 : -1;
+      else
+        return o;
+    }
+  }
+  const De = (t, e) => {
+    if (!u)
+      return;
+    a === "" && Y(t, "toggleInput");
+    let o = $;
+    $ === -1 ? a === "" && e === "previous" && (o = r.length - 1) : (o += e === "next" ? 1 : -1, o < 0 && (o = 0), o === r.length && (o = -1)), o = Xe(o, e), ye(o), ne(o);
+  }, Ce = (t) => {
+    ge.current = !0, te(""), H && H(t, "", "clear"), j(t, u ? [] : null, "clear");
+  }, Ge = (t) => (e) => {
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && ($ !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (ye(-1), ne(-1)), e.which !== 229))
+      switch (e.key) {
+        case "Home":
+          k && Z && (e.preventDefault(), A({
+            diff: "start",
+            direction: "next",
+            reason: "keyboard",
+            event: e
+          }));
+          break;
+        case "End":
+          k && Z && (e.preventDefault(), A({
+            diff: "end",
+            direction: "previous",
+            reason: "keyboard",
+            event: e
+          }));
+          break;
+        case "PageUp":
+          e.preventDefault(), A({
+            diff: -Re,
+            direction: "previous",
+            reason: "keyboard",
+            event: e
+          }), q(e);
+          break;
+        case "PageDown":
+          e.preventDefault(), A({
+            diff: Re,
+            direction: "next",
+            reason: "keyboard",
+            event: e
+          }), q(e);
+          break;
+        case "ArrowDown":
+          e.preventDefault(), A({
+            diff: 1,
+            direction: "next",
+            reason: "keyboard",
+            event: e
+          }), q(e);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), A({
+            diff: -1,
+            direction: "previous",
+            reason: "keyboard",
+            event: e
+          }), q(e);
+          break;
+        case "ArrowLeft":
+          De(e, "previous");
+          break;
+        case "ArrowRight":
+          De(e, "next");
+          break;
+        case "Enter":
+          if (x.current !== -1 && k) {
+            const o = p[x.current], n = y ? y(o) : !1;
+            if (e.preventDefault(), n)
+              return;
+            X(e, o, "selectOption"), D && f.current.setSelectionRange(f.current.value.length, f.current.value.length);
+          } else
+            i && a !== "" && Ae === !1 && (u && e.preventDefault(), X(e, a, "createOption", "freeSolo"));
+          break;
+        case "Escape":
+          k ? (e.preventDefault(), e.stopPropagation(), Y(e, "escape")) : L && (a !== "" || u && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ce(e));
+          break;
+        case "Backspace":
+          if (u && !W && a === "" && r.length > 0) {
+            const o = $ === -1 ? r.length - 1 : $, n = r.slice();
+            n.splice(o, 1), j(e, n, "removeOption", {
+              option: r[o]
+            });
+          }
+          break;
+        case "Delete":
+          if (u && !W && a === "" && r.length > 0 && $ !== -1) {
+            const o = $, n = r.slice();
+            n.splice(o, 1), j(e, n, "removeOption", {
+              option: r[o]
+            });
+          }
+          break;
+      }
+  }, Qe = (t) => {
+    Te(!0), qe && !ge.current && q(t);
+  }, Ne = (t) => {
+    if (b(T)) {
+      f.current.focus();
+      return;
+    }
+    Te(!1), he.current = !0, ge.current = !1, v && x.current !== -1 && k ? X(t, p[x.current], "blur") : v && i && a !== "" ? X(t, a, "blur", "freeSolo") : N && re(t, r), Y(t, "blur");
+  }, Ze = (t) => {
+    const e = t.target.value;
+    a !== e && (te(e), Pe(!1), H && H(t, e, "input")), e === "" ? !B && !u && j(t, null, "clear") : q(t);
+  }, et = (t) => {
+    const e = Number(t.currentTarget.getAttribute("data-option-index"));
+    x.current !== e && F({
+      event: t,
+      index: e,
+      reason: "mouse"
+    });
+  }, tt = (t) => {
+    F({
+      event: t,
+      index: Number(t.currentTarget.getAttribute("data-option-index")),
+      reason: "touch"
+    }), se.current = !0;
+  }, ot = (t) => {
+    const e = Number(t.currentTarget.getAttribute("data-option-index"));
+    X(t, p[e], "selectOption"), se.current = !1;
+  }, rt = (t) => (e) => {
+    const o = r.slice();
+    o.splice(t, 1), j(e, o, "removeOption", {
+      option: r[t]
+    });
+  }, ve = (t) => {
+    U ? Y(t, "toggleInput") : q(t);
+  }, nt = (t) => {
+    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== E && t.preventDefault();
+  }, st = (t) => {
+    t.currentTarget.contains(t.target) && (f.current.focus(), Be && he.current && f.current.selectionEnd - f.current.selectionStart === 0 && f.current.select(), he.current = !1);
+  }, it = (t) => {
+    !w && (a === "" || !U) && ve(t);
+  };
+  let xe = i && a.length > 0;
+  xe = xe || (u ? r.length > 0 : r !== null);
+  let Le = p;
+  if (_) {
+    const t = /* @__PURE__ */ new Map();
+    let e = !1;
+    Le = p.reduce((o, n, s) => {
+      const l = _(n);
+      return o.length > 0 && o[o.length - 1].group === l ? o[o.length - 1].options.push(n) : (process.env.NODE_ENV !== "production" && (t.get(l) && !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(l, !0)), o.push({
+        key: s,
+        index: s,
+        group: l,
+        options: [n]
+      })), o;
+    }, []);
+  }
+  return w && oe && Ne(), {
+    getRootProps: (t = {}) => Ve({
+      "aria-owns": be ? `${E}-listbox` : null
+    }, t, {
+      onKeyDown: Ge(t),
+      onMouseDown: nt,
+      onClick: st
+    }),
+    getInputLabelProps: () => ({
+      id: `${E}-label`,
+      htmlFor: E
+    }),
+    getInputProps: () => ({
+      id: E,
+      value: a,
+      onBlur: Ne,
+      onFocus: Qe,
+      onChange: Ze,
+      onMouseDown: it,
+      // 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": D ? "both" : "list",
+      "aria-controls": be ? `${E}-listbox` : void 0,
+      "aria-expanded": be,
+      // Disable browser's suggestion that might overlap with the popup.
+      // Handle autocomplete but not autofill.
+      autoComplete: "off",
+      ref: f,
+      autoCapitalize: "none",
+      spellCheck: "false",
+      role: "combobox",
+      disabled: w
+    }),
+    getClearProps: () => ({
+      tabIndex: -1,
+      type: "button",
+      onClick: Ce
+    }),
+    getPopupIndicatorProps: () => ({
+      tabIndex: -1,
+      type: "button",
+      onClick: ve
+    }),
+    getTagProps: ({
+      index: t
+    }) => Ve({
+      key: t,
+      "data-tag-index": t,
+      tabIndex: -1
+    }, !W && {
+      onDelete: rt(t)
+    }),
+    getListboxProps: () => ({
+      role: "listbox",
+      id: `${E}-listbox`,
+      "aria-labelledby": `${E}-label`,
+      ref: Ye,
+      onMouseDown: (t) => {
+        t.preventDefault();
+      }
+    }),
+    getOptionProps: ({
+      index: t,
+      option: e
+    }) => {
+      var o;
+      const n = (u ? r : [r]).some((l) => l != null && R(e, l)), s = y ? y(e) : !1;
+      return {
+        key: (o = V == null ? void 0 : V(e)) != null ? o : O(e),
+        tabIndex: -1,
+        role: "option",
+        id: `${E}-option-${t}`,
+        onMouseMove: et,
+        onClick: ot,
+        onTouchStart: tt,
+        "data-option-index": t,
+        "aria-disabled": s,
+        "aria-selected": n
+      };
+    },
+    id: E,
+    inputValue: a,
+    value: r,
+    dirty: xe,
+    expanded: k && ee,
+    popupOpen: k,
+    focused: oe || $ !== -1,
+    anchorEl: ee,
+    setAnchorEl: je,
+    focusedTag: $,
+    groupedOptions: Le
+  };
+}
+const _t = "_autocomplete_164gy_65", G = {
+  "u-typography-h1": "_u-typography-h1_164gy_1",
+  "u-typography-h2": "_u-typography-h2_164gy_8",
+  "u-typography-h3": "_u-typography-h3_164gy_15",
+  "u-typography-h4": "_u-typography-h4_164gy_22",
+  "u-typography-h5": "_u-typography-h5_164gy_29",
+  "u-typography-h6": "_u-typography-h6_164gy_36",
+  "u-typography-base": "_u-typography-base_164gy_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_164gy_49",
+  "u-typography-base--xl": "_u-typography-base--xl_164gy_53",
+  "u-typography-base--lg": "_u-typography-base--lg_164gy_57",
+  "u-typography-base--sm": "_u-typography-base--sm_164gy_61",
+  "u-typography-base--bold": "_u-typography-base--bold_164gy_65",
+  "autocomplete__dropdown-item": "_autocomplete__dropdown-item_164gy_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_164gy_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_164gy_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_164gy_74",
+  autocomplete: _t,
+  "autocomplete__dropdown-list": "_autocomplete__dropdown-list_164gy_82",
+  "option-focused": "_option-focused_164gy_106"
+}, Pt = ({
+  labelKey: c,
+  valueKey: b,
+  options: g,
+  type: D,
+  value: K,
+  onChange: v,
+  onInputChange: C,
+  "data-testid-wrapper": N,
+  ...L
+}) => {
+  const m = at(), [S, B] = ut("");
+  g != null && g.some((i) => typeof i != "string") && (!c || !b) && console.error(
+    '[autocomplete] When options is a list of objects, you must provide the "labelKey" and "valueKey" parameters.'
+  );
+  const { getRootProps: z, getInputProps: w, getOptionProps: ce, groupedOptions: J, getListboxProps: pe } = xt({
+    id: `autocomplete_${m}`,
+    options: g,
+    getOptionLabel: (i) => typeof i == "string" ? i : String(i[c || "label"]),
+    value: K,
+    inputValue: S,
+    isOptionEqualToValue: (i, y) => typeof i == "string" ? String(i) === String(y) : String(i[b || "id"]) === String(y[b || "id"]),
+    onChange: (i, y) => {
+      v && v(i, y);
+    },
+    onInputChange: (i, y) => {
+      C && C(i, y), B(y);
+    },
+    onHighlightChange: (i, y, V) => {
+      var M;
+      if (V === "keyboard") {
+        const _ = document.querySelector("#autocomplete-list"), Z = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
+        _ == null || _.querySelectorAll("li").forEach((fe) => fe.classList.remove(G["option-focused"])), (M = _ == null ? void 0 : _.querySelector(`[id="${Z}"]`)) == null || M.classList.add(G["option-focused"]);
+      }
+    }
+  }), Q = {
+    ...w(),
+    ...L
+  };
+  return /* @__PURE__ */ le("div", { className: G.autocomplete, "data-testid": N, children: /* @__PURE__ */ lt("div", { ...z(), children: [
+    /* @__PURE__ */ le(
+      ft,
+      {
+        rightIcon: D === "search" && /* @__PURE__ */ le(pt, { color: "var(--accent)", icon: "magnifying-glass" }),
+        ...Q
+      }
+    ),
+    J.length > 0 && !L.disabled && /* @__PURE__ */ le(
+      "ul",
+      {
+        ...pe(),
+        id: "autocomplete-list",
+        className: G["autocomplete__dropdown-list"],
+        children: J.map((i, y) => {
+          const V = ce({ option: i, index: y }), M = typeof i == "string" ? i : String(i[c || "label"]), _ = V.key === S;
+          return /* @__PURE__ */ ct(
+            "li",
+            {
+              tabIndex: y,
+              className: G["autocomplete__dropdown-item"],
+              ...V,
+              "aria-selected": _,
+              key: String(y)
+            },
+            M
+          );
+        })
+      }
+    )
+  ] }) });
+};
+export {
+  Pt as Autocomplete
+};

package/dist/components/Autocomplete/Autocomplete.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: <T extends string | object>({ labelKey, valueKey, options, type, value, onChange, onInputChange, "data-testid-wrapper": dataTestId, ...props }: import('./Autocomplete.tsx').AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithObjectsOptions: Story;
+export declare const WithAHugeList: Story;
+export declare const WithLabel: Story;
+export declare const WithSearch: Story;
+export declare const WithPlaceholder: Story;
+export declare const Disabled: Story;
+export declare const WithLeftIcon: Story;
+export declare const WithBothIcons: Story;
+export declare const WithInfoMessage: Story;
+export declare const WithErrorMessage: Story;