@pismo/marola 1.0.0-beta.18 → 1.0.0-beta.19

package/dist/assets/Autocomplete.css

@@ -1 +1 @@
-._autocomplete_1mx2f_1{margin-bottom:16px}._autocomplete__dropdown-list_1mx2f_4{margin-top:.1rem;border:solid .0625rem var(--gray-25);border-radius:.375rem}._autocomplete__dropdown-item_1mx2f_9{padding:.375rem;list-style-type:none;cursor:pointer}._autocomplete__dropdown-item_1mx2f_9:hover{color:var(--accent)}
+._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)}

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,12 +1,12 @@
 import '../../assets/Autocomplete.css';
-import { jsxs as Fe, jsx as $ } from "react/jsx-runtime";
+import { jsxs as qe, jsx as $ } from "react/jsx-runtime";
 import * as g from "react";
-import { useId as pt, useState as qe } from "react";
+import { useId as pt, useState as Be } from "react";
 import { c as ee } from "../../clsx-DB4S2d7J.js";
-import { Icon as Be } from "../Icon/Icon.js";
+import { Icon as Ke } from "../Icon/Icon.js";
 import { s as P, I as gt } from "../../Input.module-ZTRZRcNt.js";
-import { Typography as Ke } from "../Typography/Typography.js";
-import { b as Ue, s as ht } from "../../useSlotProps-kRhf7Gil.js";
+import { Typography as Ue } 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";
 import { u as me } from "../../useEventCallback-BAQJJ3ye.js";
@@ -16,7 +16,7 @@ const bt = (u) => {
     b.current = u;
   }), b.current;
 };
-function je(u) {
+function ze(u) {
   return typeof u.normalize < "u" ? u.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : u;
 }
 function xt(u = {}) {
@@ -33,10 +33,10 @@ function xt(u = {}) {
     getOptionLabel: m
   }) => {
     let I = V ? F.trim() : F;
-    h && (I = I.toLowerCase()), b && (I = je(I));
+    h && (I = I.toLowerCase()), b && (I = ze(I));
     const q = I ? M.filter((Y) => {
       let _ = (H || m)(Y);
-      return h && (_ = _.toLowerCase()), b && (_ = je(_)), D === "start" ? _.indexOf(I) === 0 : _.indexOf(I) > -1;
+      return h && (_ = _.toLowerCase()), b && (_ = ze(_)), D === "start" ? _.indexOf(I) === 0 : _.indexOf(I) > -1;
     }) : M;
     return typeof A == "number" ? q.slice(0, A) : q;
   };
@@ -47,7 +47,7 @@ function be(u, b) {
       return h;
   return -1;
 }
-const yt = xt(), ze = 5, Ot = (u) => {
+const yt = xt(), Je = 5, Ot = (u) => {
   var b;
   return u.current !== null && ((b = u.current.parentElement) == null ? void 0 : b.contains(document.activeElement));
 };
@@ -110,7 +110,7 @@ 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), Ae = D ? 0 : -1, x = g.useRef(Ae), [r, Ge] = $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({
     controlled: We,
     default: I,
     name: m
@@ -119,7 +119,7 @@ function It(u) {
     default: "",
     name: m,
     state: "inputValue"
-  }), [fe, De] = g.useState(!1), de = g.useCallback((t, e) => {
+  }), [fe, Ee] = g.useState(!1), de = g.useCallback((t, e) => {
     if (!(i ? r.length < e.length : e !== null) && !M)
       return;
     let o;
@@ -132,17 +132,17 @@ function It(u) {
       o = typeof s == "string" ? s : "";
     }
     a !== o && (ce(o), v && v(t, o, "reset"));
-  }, [y, a, i, v, ce, M, r]), [z, Ee] = $e({
+  }, [y, a, i, v, ce, M, r]), [z, ve] = $e({
     controlled: c,
     default: !1,
     name: m,
     state: "open"
-  }), [Qe, ve] = g.useState(!0), Ce = !i && r != null && a === y(r), w = z && !G, f = w ? ye(
+  }), [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)))),
     // we use the empty string to manipulate `filterOptions` to not filter any options
     // i.e. the filter predicate always returns true
     {
-      inputValue: Ce && Qe ? "" : a,
+      inputValue: Le && Qe ? "" : a,
       getOptionLabel: y
     }
   ) : [], C = bt({
@@ -210,7 +210,7 @@ function It(u) {
     const l = Ze((() => {
       const p = f.length - 1;
       if (e === "reset")
-        return Ae;
+        return De;
       if (e === "start")
         return 0;
       if (e === "end")
@@ -301,9 +301,9 @@ function It(u) {
     Pe();
   }, [Pe]);
   const K = (t) => {
-    z || (Ee(!0), ve(!0), ae && ae(t));
+    z || (ve(!0), Ce(!0), ae && ae(t));
   }, Q = (t, e) => {
-    z && (Ee(!1), X && X(t, e));
+    z && (ve(!1), X && X(t, e));
   }, J = (t, e, n, o) => {
     if (i) {
       if (r.length === e.length && r.every((s, l) => s === e[l]))
@@ -340,13 +340,13 @@ function It(u) {
         return n;
     }
   }
-  const Le = (t, e) => {
+  const Ve = (t, e) => {
     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);
-  }, Ve = (t) => {
+  }, 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))
@@ -369,7 +369,7 @@ function It(u) {
           break;
         case "PageUp":
           e.preventDefault(), L({
-            diff: -ze,
+            diff: -Je,
             direction: "previous",
             reason: "keyboard",
             event: e
@@ -377,7 +377,7 @@ function It(u) {
           break;
         case "PageDown":
           e.preventDefault(), L({
-            diff: ze,
+            diff: Je,
             direction: "next",
             reason: "keyboard",
             event: e
@@ -400,10 +400,10 @@ function It(u) {
           }), K(e);
           break;
         case "ArrowLeft":
-          Le(e, "previous");
+          Ve(e, "previous");
           break;
         case "ArrowRight":
-          Le(e, "next");
+          Ve(e, "next");
           break;
         case "Enter":
           if (x.current !== -1 && w) {
@@ -412,10 +412,10 @@ function It(u) {
               return;
             Z(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
           } else
-            R && a !== "" && Ce === !1 && (i && e.preventDefault(), Z(e, a, "createOption", "freeSolo"));
+            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(), Ve(e));
+          w ? (e.preventDefault(), e.stopPropagation(), Q(e, "escape")) : F && (a !== "" || i && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Me(e));
           break;
         case "Backspace":
           if (i && !G && a === "" && r.length > 0) {
@@ -435,16 +435,16 @@ function It(u) {
           break;
       }
   }, ot = (t) => {
-    De(!0), T && !we.current && K(t);
-  }, Me = (t) => {
+    Ee(!0), T && !we.current && K(t);
+  }, Re = (t) => {
     if (b(N)) {
       d.current.focus();
       return;
     }
-    De(!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, 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");
   }, st = (t) => {
     const e = t.target.value;
-    a !== e && (ce(e), ve(!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 === "" ? !q && !i && J(t, null, "clear") : K(t);
   }, it = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
     x.current !== e && B({
@@ -466,22 +466,22 @@ function It(u) {
     n.splice(t, 1), J(e, n, "removeOption", {
       option: r[t]
     });
-  }, Re = (t) => {
+  }, He = (t) => {
     z ? Q(t, "toggleInput") : K(t);
   }, ct = (t) => {
     t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== k && 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);
   }, dt = (t) => {
-    !_ && (a === "" || !z) && Re(t);
+    !_ && (a === "" || !z) && He(t);
   };
   let Te = R && a.length > 0;
   Te = Te || (i ? r.length > 0 : r !== null);
-  let He = f;
+  let Fe = f;
   if (j) {
     const t = /* @__PURE__ */ new Map();
     let e = !1;
-    He = f.reduce((n, o, s) => {
+    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({
         key: s,
@@ -491,8 +491,8 @@ function It(u) {
       })), n;
     }, []);
   }
-  return _ && fe && Me(), {
-    getRootProps: (t = {}) => Ue({
+  return _ && fe && Re(), {
+    getRootProps: (t = {}) => je({
       "aria-owns": Se ? `${k}-listbox` : null
     }, t, {
       onKeyDown: rt(t),
@@ -506,7 +506,7 @@ function It(u) {
     getInputProps: () => ({
       id: k,
       value: a,
-      onBlur: Me,
+      onBlur: Re,
       onFocus: ot,
       onChange: st,
       onMouseDown: dt,
@@ -528,16 +528,16 @@ function It(u) {
     getClearProps: () => ({
       tabIndex: -1,
       type: "button",
-      onClick: Ve
+      onClick: Me
     }),
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: "button",
-      onClick: Re
+      onClick: He
     }),
     getTagProps: ({
       index: t
-    }) => Ue({
+    }) => je({
       key: t,
       "data-tag-index": t,
       tabIndex: -1
@@ -582,13 +582,13 @@ function It(u) {
     anchorEl: ue,
     setAnchorEl: Xe,
     focusedTag: S,
-    groupedOptions: He
+    groupedOptions: Fe
   };
 }
-const _t = "_autocomplete_1mx2f_1", Je = {
+const _t = "_autocomplete_1k4ph_1", Ae = {
   autocomplete: _t,
-  "autocomplete__dropdown-list": "_autocomplete__dropdown-list_1mx2f_4",
-  "autocomplete__dropdown-item": "_autocomplete__dropdown-item_1mx2f_9"
+  "autocomplete__dropdown-list": "_autocomplete__dropdown-list_1k4ph_5",
+  "autocomplete__dropdown-item": "_autocomplete__dropdown-item_1k4ph_15"
 }, vt = ({
   label: u,
   type: b,
@@ -614,7 +614,7 @@ const _t = "_autocomplete_1mx2f_1", Je = {
 }) => {
   const re = pt(), j = M || `input_${re}`;
   Object.assign(W, { "data-testid": ne });
-  const [oe, Oe] = qe(), [se, Ie] = qe(""), { getRootProps: E, getInputProps: i, getOptionProps: ie, groupedOptions: X, getListboxProps: le, focused: v, getInputLabelProps: ae } = It({
+  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,
@@ -627,9 +627,9 @@ const _t = "_autocomplete_1mx2f_1", Je = {
       q && q(c, T), Ie(T);
     }
   });
-  return /* @__PURE__ */ Fe("div", { className: "autocomplete", children: [
+  return /* @__PURE__ */ qe("div", { className: Ae.autocomplete, children: [
     u && /* @__PURE__ */ $(
-      Ke,
+      Ue,
       {
         element: "label",
         elementProps: { ...ae() },
@@ -660,25 +660,25 @@ const _t = "_autocomplete_1mx2f_1", Je = {
           }
         },
         startAdornment: H && /* @__PURE__ */ $("span", { className: P["input__left-icon"], children: H }),
-        endAdornment: b === "search" ? /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: /* @__PURE__ */ $(Be, { color: "var(--accent)", icon: "magnifying-glass" }) }) : V && /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: V })
+        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 })
       }
     ) }),
-    X.length > 0 && !F && /* @__PURE__ */ $("ul", { ...le(), className: Je["autocomplete__dropdown-list"], children: X.map((c, T) => /* @__PURE__ */ $(
+    X.length > 0 && !F && /* @__PURE__ */ $("ul", { ...le(), className: Ae["autocomplete__dropdown-list"], children: X.map((c, T) => /* @__PURE__ */ $(
       "li",
       {
         tabIndex: T,
-        className: Je["autocomplete__dropdown-item"],
+        className: Ae["autocomplete__dropdown-item"],
         ...ie({ option: c, index: T }),
         children: typeof c == "string" ? c : c == null ? void 0 : c.label
       }
     )) }),
-    (D || A) && /* @__PURE__ */ Fe(
-      Ke,
+    (D || A) && /* @__PURE__ */ qe(
+      Ue,
       {
         className: D ? ee(P["input__error-message"], xe) : ee(P["input__info-message"], te),
         "data-testid": D ? U : R,
         children: [
-          /* @__PURE__ */ $(Be, { icon: "circle-exclamation" }),
+          /* @__PURE__ */ $(Ke, { icon: "circle-exclamation" }),
           D || A
         ]
       }

package/package.json

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