@pismo/marola 1.0.0-beta.20 → 1.0.0-beta.21

package/dist/assets/Autocomplete.css

@@ -1 +1 @@
-._autocomplete_1k4ph_1{margin-bottom:16px;position:relative}._autocomplete__dropdown-list_1k4ph_5{position:absolute;background-color:var(--white-100);margin-top:.1rem;border:solid .0625rem var(--gray-25);border-radius:.375rem}._autocomplete__dropdown-list_1k4ph_5:hover{border-color:var(--gray-75)}._autocomplete__dropdown-item_1k4ph_15{background-color:var(--white-100);padding:.375rem;list-style-type:none;cursor:pointer}._autocomplete__dropdown-item_1k4ph_15:hover{color:var(--accent)}
+._autocomplete_19kw3_1{margin-bottom:16px}._autocomplete__dropdown-list_19kw3_4{padding:0;margin-top:.1rem;border:solid .0625rem var(--gray-25);border-radius:.375rem}._autocomplete__dropdown-item_19kw3_10{padding:.375rem 1rem;list-style-type:none;cursor:pointer}._autocomplete__dropdown-item_19kw3_10:hover{color:var(--accent)}

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

@@ -1,8 +1,10 @@
 import { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 
-type AutocompleteProps<T> = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+export type AutocompleteProps<T> = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
     /** Label text */
     label?: string;
+    /** Object key to be used as label when options are an array of object */
+    labelKey?: T extends object ? keyof T : never;
     /** Options array */
     options?: Array<T>;
     /** callback for new option selected */
@@ -46,7 +48,4 @@ type AutocompleteProps<T> = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChang
     /** Id to be applied as `data-testid` on the chars counter element */
     'data-testid-charsCounter'?: string;
 };
-export declare const Autocomplete: <T extends string | (object & {
-    label: string;
-})>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Autocomplete: <T extends string | object>({ label, type, labelKey, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,11 +1,11 @@
 import '../../assets/Autocomplete.css';
-import { jsxs as qe, jsx as $ } from "react/jsx-runtime";
+import { jsxs as qe, jsx as A } from "react/jsx-runtime";
 import * as g from "react";
 import { useId as pt, useState as Be } from "react";
 import { c as ee } from "../../clsx-DB4S2d7J.js";
-import { Icon as Ke } from "../Icon/Icon.js";
-import { s as P, I as gt } from "../../Input.module-ZTRZRcNt.js";
-import { Typography as Ue } from "../Typography/Typography.js";
+import { Icon as Ue } from "../Icon/Icon.js";
+import { s as T, I as gt } from "../../Input.module-ZTRZRcNt.js";
+import { Typography as Ke } from "../Typography/Typography.js";
 import { b as je, s as ht } from "../../useSlotProps-kRhf7Gil.js";
 import { u as mt } from "../../useId-BW-oWmul.js";
 import { u as $e } from "../../useControlled-CCMYYdCM.js";
@@ -23,22 +23,22 @@ function xt(u = {}) {
   const {
     ignoreAccents: b = !0,
     ignoreCase: h = !0,
-    limit: A,
-    matchFrom: D = "any",
-    stringify: H,
-    trim: V = !1
+    limit: V,
+    matchFrom: B = "any",
+    stringify: $,
+    trim: M = !1
   } = u;
-  return (M, {
-    inputValue: F,
+  return (D, {
+    inputValue: U,
     getOptionLabel: m
   }) => {
-    let I = V ? F.trim() : F;
-    h && (I = I.toLowerCase()), b && (I = ze(I));
-    const q = I ? M.filter((Y) => {
-      let _ = (H || m)(Y);
-      return h && (_ = _.toLowerCase()), b && (_ = ze(_)), D === "start" ? _.indexOf(I) === 0 : _.indexOf(I) > -1;
-    }) : M;
-    return typeof A == "number" ? q.slice(0, A) : q;
+    let k = M ? U.trim() : U;
+    h && (k = k.toLowerCase()), b && (k = ze(k));
+    const H = k ? D.filter((K) => {
+      let I = ($ || m)(K);
+      return h && (I = I.toLowerCase()), b && (I = ze(I)), B === "start" ? I.indexOf(k) === 0 : I.indexOf(k) > -1;
+    }) : D;
+    return typeof V == "number" ? H.slice(0, V) : H;
   };
 }
 function be(u, b) {
@@ -57,50 +57,50 @@ function It(u) {
     unstable_isActiveElementInListbox: b = Ot,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     unstable_classNamePrefix: h = "Mui",
-    autoComplete: A = !1,
-    autoHighlight: D = !1,
-    autoSelect: H = !1,
-    blurOnSelect: V = !1,
-    clearOnBlur: M = !u.freeSolo,
-    clearOnEscape: F = !1,
+    autoComplete: V = !1,
+    autoHighlight: B = !1,
+    autoSelect: $ = !1,
+    blurOnSelect: M = !1,
+    clearOnBlur: D = !u.freeSolo,
+    clearOnEscape: U = !1,
     componentName: m = "useAutocomplete",
-    defaultValue: I = u.multiple ? [] : null,
-    disableClearable: q = !1,
-    disableCloseOnSelect: Y = !1,
-    disabled: _,
+    defaultValue: k = u.multiple ? [] : null,
+    disableClearable: H = !1,
+    disableCloseOnSelect: K = !1,
+    disabled: I,
     disabledItemsFocusable: xe = !1,
     disableListWrap: te = !1,
     filterOptions: ye = yt,
     filterSelectedOptions: ne = !1,
     freeSolo: R = !1,
-    getOptionDisabled: U,
-    getOptionKey: W,
-    getOptionLabel: re = (t) => {
+    getOptionDisabled: j,
+    getOptionKey: oe,
+    getOptionLabel: W = (t) => {
       var e;
       return (e = t.label) != null ? e : t;
     },
-    groupBy: j,
-    handleHomeEndKeys: oe = !u.freeSolo,
+    groupBy: z,
+    handleHomeEndKeys: re = !u.freeSolo,
     id: Oe,
     includeInputInList: se = !1,
     inputValue: Ie,
     isOptionEqualToValue: E = (t, e) => t === e,
     multiple: i = !1,
     onChange: ie,
-    onClose: X,
-    onHighlightChange: le,
+    onClose: le,
+    onHighlightChange: X,
     onInputChange: v,
     onOpen: ae,
-    open: c,
-    openOnFocus: T = !1,
-    options: _e,
+    open: we,
+    openOnFocus: p = !1,
+    options: w,
     readOnly: G = !1,
     selectOnFocus: Ye = !u.freeSolo,
     value: We
-  } = u, k = mt(Oe);
-  let y = re;
+  } = u, S = mt(Oe);
+  let y = W;
   y = (t) => {
-    const e = re(t);
+    const e = W(t);
     if (typeof e != "string") {
       if (process.env.NODE_ENV !== "production") {
         const n = e === void 0 ? "undefined" : `${typeof e} (${e})`;
@@ -110,9 +110,9 @@ function It(u) {
     }
     return e;
   };
-  const we = g.useRef(!1), ke = g.useRef(!0), d = g.useRef(null), N = g.useRef(null), [ue, Xe] = g.useState(null), [S, Ne] = g.useState(-1), De = D ? 0 : -1, x = g.useRef(De), [r, Ge] = $e({
+  const _e = g.useRef(!1), ke = g.useRef(!0), f = g.useRef(null), N = g.useRef(null), [ue, Xe] = g.useState(null), [P, Se] = g.useState(-1), De = B ? 0 : -1, x = g.useRef(De), [o, Ge] = $e({
     controlled: We,
-    default: I,
+    default: k,
     name: m
   }), [a, ce] = $e({
     controlled: Ie,
@@ -120,25 +120,25 @@ function It(u) {
     name: m,
     state: "inputValue"
   }), [fe, Ee] = g.useState(!1), de = g.useCallback((t, e) => {
-    if (!(i ? r.length < e.length : e !== null) && !M)
+    if (!(i ? o.length < e.length : e !== null) && !D)
       return;
-    let o;
+    let r;
     if (i)
-      o = "";
+      r = "";
     else if (e == null)
-      o = "";
+      r = "";
     else {
       const s = y(e);
-      o = typeof s == "string" ? s : "";
+      r = typeof s == "string" ? s : "";
     }
-    a !== o && (ce(o), v && v(t, o, "reset"));
-  }, [y, a, i, v, ce, M, r]), [z, ve] = $e({
-    controlled: c,
+    a !== r && (ce(r), v && v(t, r, "reset"));
+  }, [y, a, i, v, ce, D, o]), [J, ve] = $e({
+    controlled: we,
     default: !1,
     name: m,
     state: "open"
-  }), [Qe, Ce] = g.useState(!0), Le = !i && r != null && a === y(r), w = z && !G, f = w ? ye(
-    _e.filter((t) => !(ne && (i ? r : [r]).some((e) => e !== null && E(t, e)))),
+  }), [Qe, Ce] = g.useState(!0), Le = !i && o != null && a === y(o), _ = J && !G, c = _ ? ye(
+    w.filter((t) => !(ne && (i ? o : [o]).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
     {
@@ -146,47 +146,47 @@ function It(u) {
       getOptionLabel: y
     }
   ) : [], C = bt({
-    filteredOptions: f,
-    value: r,
+    filteredOptions: c,
+    value: o,
     inputValue: a
   });
   g.useEffect(() => {
-    const t = r !== C.value;
-    fe && !t || R && !t || de(null, r);
-  }, [r, de, fe, C.value, R]);
-  const Se = z && f.length > 0 && !G;
-  if (process.env.NODE_ENV !== "production" && r !== null && !R && _e.length > 0) {
-    const t = (i ? r : [r]).filter((e) => !_e.some((n) => E(n, e)));
+    const t = o !== C.value;
+    fe && !t || R && !t || de(null, o);
+  }, [o, de, fe, C.value, R]);
+  const Ne = J && c.length > 0 && !G;
+  if (process.env.NODE_ENV !== "production" && o !== null && !R && w.length > 0) {
+    const t = (i ? o : [o]).filter((e) => !w.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 pe = me((t) => {
-    t === -1 ? d.current.focus() : ue.querySelector(`[data-tag-index="${t}"]`).focus();
+    t === -1 ? f.current.focus() : ue.querySelector(`[data-tag-index="${t}"]`).focus();
   });
   g.useEffect(() => {
-    i && S > r.length - 1 && (Ne(-1), pe(-1));
-  }, [r, i, S, pe]);
+    i && P > o.length - 1 && (Se(-1), pe(-1));
+  }, [o, i, P, pe]);
   function Ze(t, e) {
-    if (!N.current || t < 0 || t >= f.length)
+    if (!N.current || t < 0 || t >= c.length)
       return -1;
     let n = t;
     for (; ; ) {
-      const o = N.current.querySelector(`[data-option-index="${n}"]`), s = xe ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
-      if (o && o.hasAttribute("tabindex") && !s)
+      const r = N.current.querySelector(`[data-option-index="${n}"]`), s = xe ? !1 : !r || r.disabled || r.getAttribute("aria-disabled") === "true";
+      if (r && r.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;
     }
   }
-  const B = me(({
+  const F = me(({
     event: t,
     index: e,
     reason: n = "auto"
   }) => {
-    if (x.current = e, e === -1 ? d.current.removeAttribute("aria-activedescendant") : d.current.setAttribute("aria-activedescendant", `${k}-option-${e}`), le && le(t, e === -1 ? null : f[e], n), !N.current)
+    if (x.current = e, e === -1 ? f.current.removeAttribute("aria-activedescendant") : f.current.setAttribute("aria-activedescendant", `${S}-option-${e}`), X && X(t, e === -1 ? null : c[e], n), !N.current)
       return;
-    const o = N.current.querySelector(`[role="option"].${h}-focused`);
-    o && (o.classList.remove(`${h}-focused`), o.classList.remove(`${h}-focusVisible`));
+    const r = N.current.querySelector(`[role="option"].${h}-focused`);
+    r && (r.classList.remove(`${h}-focused`), r.classList.remove(`${h}-focusVisible`));
     let s = N.current;
     if (N.current.getAttribute("role") !== "listbox" && (s = N.current.parentElement.querySelector('[role="listbox"]')), !s)
       return;
@@ -196,60 +196,60 @@ function It(u) {
     }
     const l = N.current.querySelector(`[data-option-index="${e}"]`);
     if (l && (l.classList.add(`${h}-focused`), n === "keyboard" && l.classList.add(`${h}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
-      const p = l, O = s.clientHeight + s.scrollTop, he = p.offsetTop + p.offsetHeight;
-      he > O ? s.scrollTop = he - s.clientHeight : p.offsetTop - p.offsetHeight * (j ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (j ? 1.3 : 0));
+      const d = l, O = s.clientHeight + s.scrollTop, he = d.offsetTop + d.offsetHeight;
+      he > O ? s.scrollTop = he - s.clientHeight : d.offsetTop - d.offsetHeight * (z ? 1.3 : 0) < s.scrollTop && (s.scrollTop = d.offsetTop - d.offsetHeight * (z ? 1.3 : 0));
     }
   }), L = me(({
     event: t,
     diff: e,
     direction: n = "next",
-    reason: o = "auto"
+    reason: r = "auto"
   }) => {
-    if (!w)
+    if (!_)
       return;
     const l = Ze((() => {
-      const p = f.length - 1;
+      const d = c.length - 1;
       if (e === "reset")
         return De;
       if (e === "start")
         return 0;
       if (e === "end")
-        return p;
+        return d;
       const O = x.current + e;
-      return O < 0 ? O === -1 && se ? -1 : te && x.current !== -1 || Math.abs(e) > 1 ? 0 : p : O > p ? O === p + 1 && se ? -1 : te || Math.abs(e) > 1 ? p : 0 : O;
+      return O < 0 ? O === -1 && se ? -1 : te && x.current !== -1 || Math.abs(e) > 1 ? 0 : d : O > d ? O === d + 1 && se ? -1 : te || Math.abs(e) > 1 ? d : 0 : O;
     })(), n);
-    if (B({
+    if (F({
       index: l,
-      reason: o,
+      reason: r,
       event: t
-    }), A && e !== "reset")
+    }), V && e !== "reset")
       if (l === -1)
-        d.current.value = a;
+        f.current.value = a;
       else {
-        const p = y(f[l]);
-        d.current.value = p, p.toLowerCase().indexOf(a.toLowerCase()) === 0 && a.length > 0 && d.current.setSelectionRange(a.length, p.length);
+        const d = y(c[l]);
+        f.current.value = d, d.toLowerCase().indexOf(a.toLowerCase()) === 0 && a.length > 0 && f.current.setSelectionRange(a.length, d.length);
       }
   }), et = () => {
     const t = (e, n) => {
-      const o = e ? y(e) : "", s = n ? y(n) : "";
-      return o === s;
+      const r = e ? y(e) : "", s = n ? y(n) : "";
+      return r === s;
     };
-    if (x.current !== -1 && C.filteredOptions && C.filteredOptions.length !== f.length && C.inputValue === a && (i ? r.length === C.value.length && C.value.every((e, n) => y(r[n]) === y(e)) : t(C.value, r))) {
+    if (x.current !== -1 && C.filteredOptions && C.filteredOptions.length !== c.length && C.inputValue === a && (i ? o.length === C.value.length && C.value.every((e, n) => y(o[n]) === y(e)) : t(C.value, o))) {
       const e = C.filteredOptions[x.current];
       if (e)
-        return be(f, (n) => y(n) === y(e));
+        return be(c, (n) => y(n) === y(e));
     }
     return -1;
   }, Pe = g.useCallback(() => {
-    if (!w)
+    if (!_)
       return;
     const t = et();
     if (t !== -1) {
       x.current = t;
       return;
     }
-    const e = i ? r[0] : r;
-    if (f.length === 0 || e == null) {
+    const e = i ? o[0] : o;
+    if (c.length === 0 || e == null) {
       L({
         diff: "reset"
       });
@@ -257,84 +257,84 @@ function It(u) {
     }
     if (N.current) {
       if (e != null) {
-        const n = f[x.current];
-        if (i && n && be(r, (s) => E(n, s)) !== -1)
+        const n = c[x.current];
+        if (i && n && be(o, (s) => E(n, s)) !== -1)
           return;
-        const o = be(f, (s) => E(s, e));
-        o === -1 ? L({
+        const r = be(c, (s) => E(s, e));
+        r === -1 ? L({
           diff: "reset"
-        }) : B({
-          index: o
+        }) : F({
+          index: r
         });
         return;
       }
-      if (x.current >= f.length - 1) {
-        B({
-          index: f.length - 1
+      if (x.current >= c.length - 1) {
+        F({
+          index: c.length - 1
         });
         return;
       }
-      B({
+      F({
         index: x.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
-    i ? !1 : r,
+    i ? !1 : o,
     ne,
     L,
-    B,
-    w,
+    F,
+    _,
     a,
     i
   ]), tt = me((t) => {
     ht(N, t), t && Pe();
   });
   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 ${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 ${d.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(`
+    (!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]), g.useEffect(() => {
     Pe();
   }, [Pe]);
-  const K = (t) => {
-    z || (ve(!0), Ce(!0), ae && ae(t));
+  const q = (t) => {
+    J || (ve(!0), Ce(!0), ae && ae(t));
   }, Q = (t, e) => {
-    z && (ve(!1), X && X(t, e));
-  }, J = (t, e, n, o) => {
+    J && (ve(!1), le && le(t, e));
+  }, Y = (t, e, n, r) => {
     if (i) {
-      if (r.length === e.length && r.every((s, l) => s === e[l]))
+      if (o.length === e.length && o.every((s, l) => s === e[l]))
         return;
-    } else if (r === e)
+    } else if (o === e)
       return;
-    ie && ie(t, e, n, o), Ge(e);
-  }, ge = g.useRef(!1), Z = (t, e, n = "selectOption", o = "options") => {
+    ie && ie(t, e, n, r), Ge(e);
+  }, ge = g.useRef(!1), Z = (t, e, n = "selectOption", r = "options") => {
     let s = n, l = e;
     if (i) {
-      if (l = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
+      if (l = Array.isArray(o) ? o.slice() : [], process.env.NODE_ENV !== "production") {
         const O = l.filter((he) => E(e, he));
         O.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 ${O.length} matches.`].join(`
 `));
       }
-      const p = be(l, (O) => E(e, O));
-      p === -1 ? l.push(e) : o !== "freeSolo" && (l.splice(p, 1), s = "removeOption");
+      const d = be(l, (O) => E(e, O));
+      d === -1 ? l.push(e) : r !== "freeSolo" && (l.splice(d, 1), s = "removeOption");
     }
-    de(t, l), J(t, l, s, {
+    de(t, l), Y(t, l, s, {
       option: e
-    }), !Y && (!t || !t.ctrlKey && !t.metaKey) && Q(t, s), (V === !0 || V === "touch" && ge.current || V === "mouse" && !ge.current) && d.current.blur();
+    }), !K && (!t || !t.ctrlKey && !t.metaKey) && Q(t, s), (M === !0 || M === "touch" && ge.current || M === "mouse" && !ge.current) && f.current.blur();
   };
   function nt(t, e) {
     if (t === -1)
       return -1;
     let n = t;
     for (; ; ) {
-      if (e === "next" && n === r.length || e === "previous" && n === -1)
+      if (e === "next" && n === o.length || e === "previous" && n === -1)
         return -1;
-      const o = ue.querySelector(`[data-tag-index="${n}"]`);
-      if (!o || !o.hasAttribute("tabindex") || o.disabled || o.getAttribute("aria-disabled") === "true")
+      const r = ue.querySelector(`[data-tag-index="${n}"]`);
+      if (!r || !r.hasAttribute("tabindex") || r.disabled || r.getAttribute("aria-disabled") === "true")
         n += e === "next" ? 1 : -1;
       else
         return n;
@@ -344,15 +344,15 @@ function It(u) {
     if (!i)
       return;
     a === "" && Q(t, "toggleInput");
-    let n = S;
-    S === -1 ? a === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = nt(n, e), Ne(n), pe(n);
+    let n = P;
+    P === -1 ? a === "" && e === "previous" && (n = o.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === o.length && (n = -1)), n = nt(n, e), Se(n), pe(n);
   }, Me = (t) => {
-    we.current = !0, ce(""), v && v(t, "", "clear"), J(t, i ? [] : null, "clear");
-  }, rt = (t) => (e) => {
-    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (S !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (Ne(-1), pe(-1)), e.which !== 229))
+    _e.current = !0, ce(""), v && v(t, "", "clear"), Y(t, i ? [] : null, "clear");
+  }, ot = (t) => (e) => {
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (P !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (Se(-1), pe(-1)), e.which !== 229))
       switch (e.key) {
         case "Home":
-          w && oe && (e.preventDefault(), L({
+          _ && re && (e.preventDefault(), L({
             diff: "start",
             direction: "next",
             reason: "keyboard",
@@ -360,7 +360,7 @@ function It(u) {
           }));
           break;
         case "End":
-          w && oe && (e.preventDefault(), L({
+          _ && re && (e.preventDefault(), L({
             diff: "end",
             direction: "previous",
             reason: "keyboard",
@@ -373,7 +373,7 @@ function It(u) {
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), K(e);
+          }), q(e);
           break;
         case "PageDown":
           e.preventDefault(), L({
@@ -381,7 +381,7 @@ function It(u) {
             direction: "next",
             reason: "keyboard",
             event: e
-          }), K(e);
+          }), q(e);
           break;
         case "ArrowDown":
           e.preventDefault(), L({
@@ -389,7 +389,7 @@ function It(u) {
             direction: "next",
             reason: "keyboard",
             event: e
-          }), K(e);
+          }), q(e);
           break;
         case "ArrowUp":
           e.preventDefault(), L({
@@ -397,7 +397,7 @@ function It(u) {
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), K(e);
+          }), q(e);
           break;
         case "ArrowLeft":
           Ve(e, "previous");
@@ -406,124 +406,124 @@ function It(u) {
           Ve(e, "next");
           break;
         case "Enter":
-          if (x.current !== -1 && w) {
-            const n = f[x.current], o = U ? U(n) : !1;
-            if (e.preventDefault(), o)
+          if (x.current !== -1 && _) {
+            const n = c[x.current], r = j ? j(n) : !1;
+            if (e.preventDefault(), r)
               return;
-            Z(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
+            Z(e, n, "selectOption"), V && f.current.setSelectionRange(f.current.value.length, f.current.value.length);
           } else
             R && a !== "" && Le === !1 && (i && e.preventDefault(), Z(e, a, "createOption", "freeSolo"));
           break;
         case "Escape":
-          w ? (e.preventDefault(), e.stopPropagation(), Q(e, "escape")) : F && (a !== "" || i && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Me(e));
+          _ ? (e.preventDefault(), e.stopPropagation(), Q(e, "escape")) : U && (a !== "" || i && o.length > 0) && (e.preventDefault(), e.stopPropagation(), Me(e));
           break;
         case "Backspace":
-          if (i && !G && a === "" && r.length > 0) {
-            const n = S === -1 ? r.length - 1 : S, o = r.slice();
-            o.splice(n, 1), J(e, o, "removeOption", {
-              option: r[n]
+          if (i && !G && a === "" && o.length > 0) {
+            const n = P === -1 ? o.length - 1 : P, r = o.slice();
+            r.splice(n, 1), Y(e, r, "removeOption", {
+              option: o[n]
             });
           }
           break;
         case "Delete":
-          if (i && !G && a === "" && r.length > 0 && S !== -1) {
-            const n = S, o = r.slice();
-            o.splice(n, 1), J(e, o, "removeOption", {
-              option: r[n]
+          if (i && !G && a === "" && o.length > 0 && P !== -1) {
+            const n = P, r = o.slice();
+            r.splice(n, 1), Y(e, r, "removeOption", {
+              option: o[n]
             });
           }
           break;
       }
-  }, ot = (t) => {
-    Ee(!0), T && !we.current && K(t);
+  }, rt = (t) => {
+    Ee(!0), p && !_e.current && q(t);
   }, Re = (t) => {
     if (b(N)) {
-      d.current.focus();
+      f.current.focus();
       return;
     }
-    Ee(!1), ke.current = !0, we.current = !1, H && x.current !== -1 && w ? Z(t, f[x.current], "blur") : H && R && a !== "" ? Z(t, a, "blur", "freeSolo") : M && de(t, r), Q(t, "blur");
+    Ee(!1), ke.current = !0, _e.current = !1, $ && x.current !== -1 && _ ? Z(t, c[x.current], "blur") : $ && R && a !== "" ? Z(t, a, "blur", "freeSolo") : D && de(t, o), Q(t, "blur");
   }, st = (t) => {
     const e = t.target.value;
-    a !== e && (ce(e), Ce(!1), v && v(t, e, "input")), e === "" ? !q && !i && J(t, null, "clear") : K(t);
+    a !== e && (ce(e), Ce(!1), v && v(t, e, "input")), e === "" ? !H && !i && Y(t, null, "clear") : q(t);
   }, it = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    x.current !== e && B({
+    x.current !== e && F({
       event: t,
       index: e,
       reason: "mouse"
     });
   }, lt = (t) => {
-    B({
+    F({
       event: t,
       index: Number(t.currentTarget.getAttribute("data-option-index")),
       reason: "touch"
     }), ge.current = !0;
   }, at = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    Z(t, f[e], "selectOption"), ge.current = !1;
+    Z(t, c[e], "selectOption"), ge.current = !1;
   }, ut = (t) => (e) => {
-    const n = r.slice();
-    n.splice(t, 1), J(e, n, "removeOption", {
-      option: r[t]
+    const n = o.slice();
+    n.splice(t, 1), Y(e, n, "removeOption", {
+      option: o[t]
     });
   }, He = (t) => {
-    z ? Q(t, "toggleInput") : K(t);
+    J ? Q(t, "toggleInput") : q(t);
   }, ct = (t) => {
-    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== k && t.preventDefault();
+    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== S && t.preventDefault();
   }, ft = (t) => {
-    t.currentTarget.contains(t.target) && (d.current.focus(), Ye && ke.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), ke.current = !1);
+    t.currentTarget.contains(t.target) && (f.current.focus(), Ye && ke.current && f.current.selectionEnd - f.current.selectionStart === 0 && f.current.select(), ke.current = !1);
   }, dt = (t) => {
-    !_ && (a === "" || !z) && He(t);
+    !I && (a === "" || !J) && He(t);
   };
   let Te = R && a.length > 0;
-  Te = Te || (i ? r.length > 0 : r !== null);
-  let Fe = f;
-  if (j) {
+  Te = Te || (i ? o.length > 0 : o !== null);
+  let Fe = c;
+  if (z) {
     const t = /* @__PURE__ */ new Map();
     let e = !1;
-    Fe = f.reduce((n, o, s) => {
-      const l = j(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 ${m} 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({
+    Fe = c.reduce((n, r, s) => {
+      const l = z(r);
+      return n.length > 0 && n[n.length - 1].group === l ? n[n.length - 1].options.push(r) : (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)), n.push({
         key: s,
         index: s,
         group: l,
-        options: [o]
+        options: [r]
       })), n;
     }, []);
   }
-  return _ && fe && Re(), {
+  return I && fe && Re(), {
     getRootProps: (t = {}) => je({
-      "aria-owns": Se ? `${k}-listbox` : null
+      "aria-owns": Ne ? `${S}-listbox` : null
     }, t, {
-      onKeyDown: rt(t),
+      onKeyDown: ot(t),
       onMouseDown: ct,
       onClick: ft
     }),
     getInputLabelProps: () => ({
-      id: `${k}-label`,
-      htmlFor: k
+      id: `${S}-label`,
+      htmlFor: S
     }),
     getInputProps: () => ({
-      id: k,
+      id: S,
       value: a,
       onBlur: Re,
-      onFocus: ot,
+      onFocus: rt,
       onChange: st,
       onMouseDown: dt,
       // if open then this is handled imperatively so don't let react override
       // only have an opinion about this when closed
-      "aria-activedescendant": w ? "" : null,
-      "aria-autocomplete": A ? "both" : "list",
-      "aria-controls": Se ? `${k}-listbox` : void 0,
-      "aria-expanded": Se,
+      "aria-activedescendant": _ ? "" : null,
+      "aria-autocomplete": V ? "both" : "list",
+      "aria-controls": Ne ? `${S}-listbox` : void 0,
+      "aria-expanded": Ne,
       // 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",
-      disabled: _
+      disabled: I
     }),
     getClearProps: () => ({
       tabIndex: -1,
@@ -546,8 +546,8 @@ function It(u) {
     }),
     getListboxProps: () => ({
       role: "listbox",
-      id: `${k}-listbox`,
-      "aria-labelledby": `${k}-label`,
+      id: `${S}-listbox`,
+      "aria-labelledby": `${S}-label`,
       ref: tt,
       onMouseDown: (t) => {
         t.preventDefault();
@@ -558,128 +558,129 @@ function It(u) {
       option: e
     }) => {
       var n;
-      const o = (i ? r : [r]).some((l) => l != null && E(e, l)), s = U ? U(e) : !1;
+      const r = (i ? o : [o]).some((l) => l != null && E(e, l)), s = j ? j(e) : !1;
       return {
-        key: (n = W == null ? void 0 : W(e)) != null ? n : y(e),
+        key: (n = oe == null ? void 0 : oe(e)) != null ? n : y(e),
         tabIndex: -1,
         role: "option",
-        id: `${k}-option-${t}`,
+        id: `${S}-option-${t}`,
         onMouseMove: it,
         onClick: at,
         onTouchStart: lt,
         "data-option-index": t,
         "aria-disabled": s,
-        "aria-selected": o
+        "aria-selected": r
       };
     },
-    id: k,
+    id: S,
     inputValue: a,
-    value: r,
+    value: o,
     dirty: Te,
-    expanded: w && ue,
-    popupOpen: w,
-    focused: fe || S !== -1,
+    expanded: _ && ue,
+    popupOpen: _,
+    focused: fe || P !== -1,
     anchorEl: ue,
     setAnchorEl: Xe,
-    focusedTag: S,
+    focusedTag: P,
     groupedOptions: Fe
   };
 }
-const _t = "_autocomplete_1k4ph_1", Ae = {
-  autocomplete: _t,
-  "autocomplete__dropdown-list": "_autocomplete__dropdown-list_1k4ph_5",
-  "autocomplete__dropdown-item": "_autocomplete__dropdown-item_1k4ph_15"
+const wt = "_autocomplete_19kw3_1", Ae = {
+  autocomplete: wt,
+  "autocomplete__dropdown-list": "_autocomplete__dropdown-list_19kw3_4",
+  "autocomplete__dropdown-item": "_autocomplete__dropdown-item_19kw3_10"
 }, vt = ({
   label: u,
   type: b,
-  options: h,
-  infoMessage: A,
-  errorMessage: D,
-  leftIcon: H,
-  rightIcon: V,
-  id: M,
-  disabled: F,
-  maxLength: m,
-  onChange: I,
-  onInputChange: q,
-  classNameLabel: Y,
-  classNameInput: _,
-  classNameErrorMessage: xe,
-  classNameInfoMessage: te,
-  "data-testid-label": ye,
-  "data-testid-input": ne,
-  "data-testid-infoMessage": R,
-  "data-testid-errorMessage": U,
+  labelKey: h,
+  options: V,
+  infoMessage: B,
+  errorMessage: $,
+  leftIcon: M,
+  rightIcon: D,
+  id: U,
+  disabled: m,
+  maxLength: k,
+  onChange: H,
+  onInputChange: K,
+  classNameLabel: I,
+  classNameInput: xe,
+  classNameErrorMessage: te,
+  classNameInfoMessage: ye,
+  "data-testid-label": ne,
+  "data-testid-input": R,
+  "data-testid-infoMessage": j,
+  "data-testid-errorMessage": oe,
   ...W
 }) => {
-  const re = pt(), j = M || `input_${re}`;
-  Object.assign(W, { "data-testid": ne });
-  const [oe, Oe] = Be(), [se, Ie] = Be(""), { getRootProps: E, getInputProps: i, getOptionProps: ie, groupedOptions: X, getListboxProps: le, focused: v, getInputLabelProps: ae } = It({
-    id: j,
-    options: h,
-    getOptionLabel: (c) => typeof c == "string" ? c : c == null ? void 0 : c.label,
-    value: oe,
-    inputValue: se,
-    onChange: (c, T) => {
-      I && I(c, T), Oe(T);
+  const z = pt(), re = U || `input_${z}`;
+  Object.assign(W, { "data-testid": R });
+  const [Oe, se] = Be(), [Ie, E] = Be(""), { getRootProps: i, getInputProps: ie, getOptionProps: le, groupedOptions: X, getListboxProps: v, focused: ae, getInputLabelProps: we } = It({
+    id: re,
+    options: V,
+    getOptionLabel: (p) => typeof p == "string" ? p : String(p[h || "label"]),
+    value: Oe,
+    inputValue: Ie,
+    onChange: (p, w) => {
+      H && H(p, w), se(w);
     },
-    onInputChange: (c, T) => {
-      q && q(c, T), Ie(T);
+    onInputChange: (p, w) => {
+      K && K(p, w), E(w);
     }
   });
   return /* @__PURE__ */ qe("div", { className: Ae.autocomplete, children: [
-    u && /* @__PURE__ */ $(
-      Ue,
+    u && /* @__PURE__ */ A(
+      Ke,
       {
         element: "label",
-        elementProps: { ...ae() },
-        className: ee(P.input__label, Y),
-        "data-testid": ye,
+        elementProps: { ...we() },
+        className: ee(T.input__label, I),
+        "data-testid": ne,
         children: u
       }
     ),
-    /* @__PURE__ */ $("div", { ...E(), className: v ? "Mui-focused" : "", children: /* @__PURE__ */ $(
+    /* @__PURE__ */ A("div", { ...i(), className: ae ? "Mui-focused" : "", children: /* @__PURE__ */ A(
       gt,
       {
-        disabled: F,
-        error: !!D,
+        disabled: m,
+        error: !!$,
         "aria-label": u,
         slotProps: {
-          root: (c) => ({
-            className: ee(P["input__input-el-wrapper"], {
-              [P["input--disabled"]]: c.disabled,
-              [P["input--focused"]]: c.focused,
-              [P["input--error"]]: c.error
+          root: (p) => ({
+            className: ee(T["input__input-el-wrapper"], {
+              [T["input--disabled"]]: p.disabled,
+              [T["input--focused"]]: p.focused,
+              [T["input--error"]]: p.error
             })
           }),
           input: {
-            ...i(),
-            className: ee(P["input__input-el"], _),
-            maxLength: m,
+            ...ie(),
+            className: ee(T["input__input-el"], xe),
+            maxLength: k,
             ...W
           }
         },
-        startAdornment: H && /* @__PURE__ */ $("span", { className: P["input__left-icon"], children: H }),
-        endAdornment: b === "search" ? /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: /* @__PURE__ */ $(Ke, { color: "var(--accent)", icon: "magnifying-glass" }) }) : V && /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: V })
+        startAdornment: M && /* @__PURE__ */ A("span", { className: T["input__left-icon"], children: M }),
+        endAdornment: b === "search" ? /* @__PURE__ */ A("span", { className: T["input__right-icon"], children: /* @__PURE__ */ A(Ue, { color: "var(--accent)", icon: "magnifying-glass" }) }) : D && /* @__PURE__ */ A("span", { className: T["input__right-icon"], children: D })
       }
     ) }),
-    X.length > 0 && !F && /* @__PURE__ */ $("ul", { ...le(), className: Ae["autocomplete__dropdown-list"], children: X.map((c, T) => /* @__PURE__ */ $(
+    X.length > 0 && !m && /* @__PURE__ */ A("ul", { ...v(), className: Ae["autocomplete__dropdown-list"], children: X.map((p, w) => /* @__PURE__ */ A(
       "li",
       {
-        tabIndex: T,
+        tabIndex: w,
         className: Ae["autocomplete__dropdown-item"],
-        ...ie({ option: c, index: T }),
-        children: typeof c == "string" ? c : c == null ? void 0 : c.label
+        ...le({ option: p, index: w }),
+        children: typeof p == "string" ? p : String(p[h || "label"])
       }
     )) }),
-    (D || A) && /* @__PURE__ */ qe(
-      Ue,
+    ($ || B) && /* @__PURE__ */ qe(
+      Ke,
       {
-        className: D ? ee(P["input__error-message"], xe) : ee(P["input__info-message"], te),
-        "data-testid": D ? U : R,
+        className: $ ? ee(T["input__error-message"], te) : ee(T["input__info-message"], ye),
+        "data-testid": $ ? oe : j,
         children: [
-          /* @__PURE__ */ $(Ke, { icon: "circle-exclamation" }),
-          D || A
+          /* @__PURE__ */ A(Ue, { icon: "circle-exclamation" }),
+          $ || B
         ]
       }
     )

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

@@ -2,32 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: <T extends string | (object & {
-        label: string;
-    })>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
-        label?: string | undefined;
-        options?: T[] | undefined;
-        onChange?: ((event: import('react').SyntheticEvent<Element, Event>, newValue: T) => void) | undefined;
-        onInputChange?: ((event: import('react').SyntheticEvent<Element, Event>, newValue: string) => void) | undefined;
-        infoMessage?: string | undefined;
-        errorMessage?: string | undefined;
-        leftIcon?: import('react').ReactNode;
-        rightIcon?: import('react').ReactNode;
-        type?: "search" | "text" | "password" | undefined;
-        hideCharsCounter?: boolean | undefined;
-        classNameWrapper?: string | undefined;
-        classNameLabel?: string | undefined;
-        classNameInput?: string | undefined;
-        classNameInfoMessage?: string | undefined;
-        classNameErrorMessage?: string | undefined;
-        classNameCharsCounter?: string | undefined;
-        'data-testid-wrapper'?: string | undefined;
-        'data-testid-label'?: string | undefined;
-        'data-testid-input'?: string | undefined;
-        'data-testid-infoMessage'?: string | undefined;
-        'data-testid-errorMessage'?: string | undefined;
-        'data-testid-charsCounter'?: string | undefined;
-    }) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends string | object>({ label, type, labelKey, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: import('./Autocomplete.tsx').AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -36,6 +11,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
+export declare const WithObjectsOptions: Story;
 export declare const WithLabel: Story;
 export declare const WithSearch: Story;
 export declare const WithPlaceholder: Story;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.21",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",