@stackone/malachite 2.22.0 → 2.23.0

package/dist/components/MultiSelect.js

@@ -1,32 +1,32 @@
-import { jsx as a, jsxs as v, Fragment as lt } from "react/jsx-runtime";
-import it, { useId as st, useState as $, useRef as R, useMemo as _, useCallback as p, useEffect as Ae, useLayoutEffect as ct, useInsertionEffect as dt } from "react";
-import { createPortal as ut } from "react-dom";
-import ft, { useFormFieldIds as mt } from "./BaseFormComponent.js";
-import ht from "./CustomIcons/CaretDownIcon.js";
-import pt from "./CustomIcons/InfoFilledIcon.js";
-import gt from "./CustomIcons/SearchIcon.js";
-import xt from "./LoadingInput.js";
-import bt from "./Spinner.js";
-import { Tag as vt } from "./Tag.js";
-import Ce from "./Tooltip.js";
-import { getTriggerVisual as yt, DROPDOWN_TRIGGER_ATTR as wt } from "./dropdownTriggerStyle.js";
-import { pushEscapeLayer as Et } from "./escapeLayers.js";
-import { ensureMultiSelectPanelStyles as It } from "./optionRowStyles.js";
-import { overlayIdentity as kt } from "./portalOverlay.js";
-import { useTopLayer as St } from "./topLayer.js";
-import { CONTROL_TEXT_SIZE_CLASS as ce, CONTROL_TEXT_SIZE as Rt } from "./controlTextSize.js";
-const Tt = {
+import { jsx as a, jsxs as v, Fragment as it } from "react/jsx-runtime";
+import st, { useId as ct, useState as $, useRef as R, useMemo as _, useCallback as p, useEffect as Ce, useLayoutEffect as dt, useInsertionEffect as ut } from "react";
+import { createPortal as ft } from "react-dom";
+import mt, { useFormFieldIds as ht } from "./BaseFormComponent.js";
+import pt from "./CustomIcons/CaretDownIcon.js";
+import gt from "./CustomIcons/InfoFilledIcon.js";
+import xt from "./CustomIcons/SearchIcon.js";
+import bt from "./LoadingInput.js";
+import vt from "./Spinner.js";
+import { Tag as yt } from "./Tag.js";
+import He from "./Tooltip.js";
+import { getTriggerVisual as wt, DROPDOWN_TRIGGER_ATTR as Et } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as It } from "./escapeLayers.js";
+import { ensureMultiSelectPanelStyles as kt } from "./optionRowStyles.js";
+import { overlayIdentity as St } from "./portalOverlay.js";
+import { useTopLayer as Rt } from "./topLayer.js";
+import { CONTROL_TEXT_SIZE_CLASS as ce, CONTROL_TEXT_SIZE as Tt } from "./controlTextSize.js";
+const Lt = {
   padding: "8px 10px",
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
 }, Y = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, Lt = {
+}, _t = {
   small: `${Y.small} gap-[6px] px-2.5 ${ce.small} rounded-[var(--malachite-radius-10,10px)]`,
   medium: `${Y.medium} gap-[8px] px-3 ${ce.medium} rounded-xl`,
   large: `${Y.large} gap-[10px] px-4 ${ce.large} rounded-[var(--malachite-radius-xxl,14px)]`
-}, de = 8, _t = 10, He = "ArrowDown", We = "ArrowUp", $e = "Enter", Nt = "Backspace", Ot = /* @__PURE__ */ new Set([He, We, $e]), Me = it.forwardRef(
+}, de = 8, Nt = 10, We = "ArrowDown", $e = "ArrowUp", Me = "Enter", Ot = "Backspace", Dt = /* @__PURE__ */ new Set([We, $e, Me]), Pe = st.forwardRef(
   ({ triggerRole: i, disabled: N, children: M, ...E }, I) => i !== "button" ? /* @__PURE__ */ a(
     "div",
     {
@@ -47,15 +47,15 @@ const Tt = {
     }
   )
 );
-Me.displayName = "TriggerElement";
-const Zt = ({
+Pe.displayName = "TriggerElement";
+const qt = ({
   options: i,
   value: N,
   defaultValue: M,
   onChange: E,
   placeholder: I = "Select",
   renderTrigger: V,
-  searchable: Pe,
+  searchable: Be,
   size: j = "large",
   width: U = "auto",
   minWidth: Z,
@@ -67,57 +67,58 @@ const Zt = ({
   description: q,
   tooltip: me,
   hint: X,
+  rightSideContent: he,
   required: J = !1,
-  requiredIndicator: Be,
-  formControl: he,
+  requiredIndicator: Ke,
+  formControl: pe,
   chips: Q = !1,
   chipsRemovable: ee = !0,
-  chipsMax: pe = "auto",
+  chipsMax: ge = "auto",
   inlineSearch: g = !1,
   onSearchChange: O,
-  localFilter: ge = !0,
-  className: Ke = "",
-  style: Fe,
-  id: Ge,
-  "aria-label": xe,
-  "aria-labelledby": ze
+  localFilter: xe = !0,
+  className: Fe = "",
+  style: Ge,
+  id: ze,
+  "aria-label": be,
+  "aria-labelledby": Ye
 }) => {
-  const be = st(), ve = `${be}-listbox`, ye = (e) => `${be}-option-${e}`, { controlId: we, labelId: Ee, descriptionId: Ye, hintId: Ve, describedBy: je } = mt({
-    id: Ge,
+  const ve = ct(), ye = `${ve}-listbox`, we = (e) => `${ve}-option-${e}`, { controlId: Ee, labelId: Ie, descriptionId: Ve, hintId: je, describedBy: Ue } = ht({
+    id: ze,
     label: P,
     description: q,
     hint: X
-  }), [Ue, Ze] = $(() => M ?? []), te = N !== void 0, u = te ? N : Ue, [s, B] = $(!1), [m, qe] = $(
+  }), [Ze, qe] = $(() => M ?? []), te = N !== void 0, u = te ? N : Ze, [s, B] = $(!1), [m, Xe] = $(
     null
-  ), [w, Xe] = $(""), [x, T] = $(-1), re = R(null), D = R(null), L = R(null), Ie = R(null);
-  St(L, s);
-  const ke = R([]), ae = _(() => new Set(u), [u]), c = _(
+  ), [w, Je] = $(""), [x, T] = $(-1), re = R(null), D = R(null), L = R(null), ke = R(null);
+  Rt(L, s);
+  const Se = R([]), ae = _(() => new Set(u), [u]), c = _(
     () => i.filter((e) => ae.has(e.value)),
     [i, ae]
-  ), ne = typeof pe == "number" ? pe : void 0, S = _(() => {
-    if (!ge) return i;
+  ), ne = typeof ge == "number" ? ge : void 0, S = _(() => {
+    if (!xe) return i;
     const e = w.trim().toLowerCase();
     return e ? i.filter((t) => (t.searchText ?? (typeof t.label == "string" ? t.label : "")).toLowerCase().includes(e)) : i;
-  }, [i, w, ge]), oe = R(!1), Se = R(""), K = p(
+  }, [i, w, xe]), oe = R(!1), Re = R(""), K = p(
     (e, t) => {
-      Se.current !== e && (Se.current = e, t && (oe.current = !0), Xe(e), O == null || O(e));
+      Re.current !== e && (Re.current = e, t && (oe.current = !0), Je(e), O == null || O(e));
     },
     [O]
   ), le = p(
     (e) => K(e, !0),
     [K]
   ), A = p(() => K("", !1), [K]);
-  Ae(() => {
+  Ce(() => {
     oe.current && (T(-1), oe.current = !1);
   }, [w]);
-  const Je = Pe ?? (O !== void 0 || i.length > _t), Re = g ? !1 : Je, C = p(() => {
+  const Qe = Be ?? (O !== void 0 || i.length > Nt), Te = g ? !1 : Qe, C = p(() => {
     var H, W;
     const e = re.current;
     if (!e) return;
     const t = e.getBoundingClientRect(), n = ((H = L.current) == null ? void 0 : H.offsetHeight) ?? 0, h = ((W = L.current) == null ? void 0 : W.offsetWidth) ?? t.width, f = t.left, o = window.innerWidth - h - de, r = Math.max(de, Math.min(f, o)), l = window.innerHeight - t.bottom, d = n > 0 && l < n + de ? t.top - n - 4 : t.bottom + 4;
-    qe({ top: d, left: r, width: Math.max(t.width, Z ?? 0) });
+    Xe({ top: d, left: r, width: Math.max(t.width, Z ?? 0) });
   }, [Z]);
-  Ae(() => {
+  Ce(() => {
     var h;
     if (!s) {
       A(), T(-1);
@@ -127,16 +128,16 @@ const Zt = ({
     const e = () => C(), t = (f) => {
       const o = f.composedPath(), r = re.current, l = L.current;
       (!r || !o.includes(r)) && (!l || !o.includes(l)) && B(!1);
-    }, n = Et(() => B(!1));
+    }, n = It(() => B(!1));
     return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), document.addEventListener("mousedown", t), () => {
       window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), document.removeEventListener("mousedown", t), n();
     };
-  }, [s, C, g, A]), ct(() => {
+  }, [s, C, g, A]), dt(() => {
     s && L.current && C();
   }, [s, C]);
   const b = p(
     (e) => {
-      te || Ze(e), E == null || E(e);
+      te || qe(e), E == null || E(e);
     },
     [te, E]
   ), F = p(
@@ -152,21 +153,21 @@ const Zt = ({
     for (const t of i)
       t.disabled && e.add(t.value);
     return e;
-  }, [i]), Qe = p(
+  }, [i]), et = p(
     (e) => {
       e.stopPropagation();
       const t = u.filter((n) => G.has(n));
       b(t);
     },
     [b, u, G]
-  ), Te = p(
+  ), Le = p(
     (e, t) => {
       t.stopPropagation(), !F(e) && b(u.filter((n) => n !== e));
     },
     [u, b, F]
   ), z = p(
     (e) => {
-      if (!Ot.has(e.key)) return;
+      if (!Dt.has(e.key)) return;
       if (e.preventDefault(), e.stopPropagation(), !s) {
         B(!0);
         return;
@@ -175,10 +176,10 @@ const Zt = ({
       if (t === 0) return;
       const n = (o) => {
         requestAnimationFrame(() => {
-          const r = ke.current[o], l = Ie.current;
+          const r = Se.current[o], l = ke.current;
           if (!r || !l) return;
-          const d = r.offsetTop, H = d + r.offsetHeight, W = l.scrollTop, ot = W + l.clientHeight;
-          H > ot ? l.scrollTo({
+          const d = r.offsetTop, H = d + r.offsetHeight, W = l.scrollTop, lt = W + l.clientHeight;
+          H > lt ? l.scrollTo({
             top: H - l.clientHeight,
             behavior: "smooth"
           }) : d < W && l.scrollTo({ top: d, behavior: "smooth" });
@@ -203,21 +204,21 @@ const Zt = ({
         });
       };
       switch (e.key) {
-        case He:
+        case We:
           h(1);
           break;
-        case We:
+        case $e:
           h(-1);
           break;
-        case $e:
+        case Me:
           f();
           break;
       }
     },
     [s, S, x, ie, i, A]
-  ), Le = p(
+  ), _e = p(
     (e) => {
-      if (e.key === Nt && w === "" && u.length > 0) {
+      if (e.key === Ot && w === "" && u.length > 0) {
         e.preventDefault(), b(u.slice(0, -1)), requestAnimationFrame(() => {
           var t;
           return (t = D.current) == null ? void 0 : t.focus();
@@ -227,7 +228,7 @@ const Zt = ({
       z(e);
     },
     [z, w, u, b]
-  ), et = typeof U == "number" ? `${U}px` : U, _e = c.length > 0 && !k && !y, tt = yt({
+  ), tt = typeof U == "number" ? `${U}px` : U, Ne = c.length > 0 && !k && !y, rt = wt({
     disabled: k,
     error: ue,
     open: s,
@@ -240,7 +241,7 @@ const Zt = ({
       type: "text",
       value: w,
       onChange: (e) => le(e.target.value),
-      onKeyDown: Le,
+      onKeyDown: _e,
       placeholder: c.length === 0 ? I : "",
       className: "flex-1 w-full min-w-[40px] border-none outline-none bg-transparent text-[length:inherit] p-0 text-[var(--malachite-text-primary,rgb(10,10,10))]",
       onMouseDown: (e) => {
@@ -251,10 +252,10 @@ const Zt = ({
     g,
     w,
     le,
-    Le,
+    _e,
     c.length,
     I
-  ]), rt = _(() => {
+  ]), at = _(() => {
     if (V && c.length > 0)
       return V(c);
     if (Q && c.length > 0) {
@@ -268,12 +269,12 @@ const Zt = ({
             e.map((n) => {
               const h = G.has(n.value);
               return /* @__PURE__ */ a(
-                vt,
+                yt,
                 {
                   value: n.label,
                   type: "default",
                   textTransform: "none",
-                  onRemove: ee && !k && !h ? (f) => Te(n.value, f) : void 0,
+                  onRemove: ee && !k && !h ? (f) => Le(n.value, f) : void 0,
                   className: "shrink-0"
                 },
                 n.value
@@ -296,16 +297,16 @@ const Zt = ({
     ne,
     ee,
     k,
-    Te,
+    Le,
     g,
     se,
     I,
     G
-  ]), at = i.length === 0 ? "No options available" : "No results found";
-  dt(() => {
-    s && It();
+  ]), nt = i.length === 0 ? "No options available" : "No results found";
+  ut(() => {
+    s && kt();
   }, [s]);
-  const nt = {
+  const ot = {
     position: "fixed",
     top: (m == null ? void 0 : m.top) ?? 0,
     left: (m == null ? void 0 : m.left) ?? 0,
@@ -320,28 +321,28 @@ const Zt = ({
     flexDirection: "column",
     gap: 4,
     maxHeight: 360,
-    fontSize: Rt[j],
+    fontSize: Tt[j],
     visibility: m ? "visible" : "hidden",
     opacity: m ? 1 : 0
-  }, Ne = !!(q || me || X || fe || he || J), Oe = Ne && !!P, De = /* @__PURE__ */ v(lt, { children: [
-    /* @__PURE__ */ v("div", { className: "relative", style: { width: et }, children: [
+  }, Oe = !!(q || me || X || he || fe || pe || J), De = Oe && !!P, Ae = /* @__PURE__ */ v(it, { children: [
+    /* @__PURE__ */ v("div", { className: "relative", style: { width: tt }, children: [
       /* @__PURE__ */ v(
-        Me,
+        Pe,
         {
           ref: re,
-          id: we,
+          id: Ee,
           triggerRole: g ? "combobox" : Q && ee ? "group" : "button",
           disabled: k || y,
-          [wt]: "",
+          [Et]: "",
           "aria-haspopup": "listbox",
           "aria-expanded": s,
-          "aria-controls": s ? ve : void 0,
-          "aria-activedescendant": g && s && x >= 0 ? ye(x) : void 0,
-          "aria-labelledby": ze ?? (Oe && !xe ? Ee : void 0),
-          "aria-label": xe ?? (Oe ? void 0 : P),
+          "aria-controls": s ? ye : void 0,
+          "aria-activedescendant": g && s && x >= 0 ? we(x) : void 0,
+          "aria-labelledby": Ye ?? (De && !be ? Ie : void 0),
+          "aria-label": be ?? (De ? void 0 : P),
           "aria-invalid": ue || void 0,
           "aria-required": J || void 0,
-          "aria-describedby": je,
+          "aria-describedby": Ue,
           "aria-busy": y || void 0,
           onClick: () => {
             k || y || B((e) => !e);
@@ -349,20 +350,20 @@ const Zt = ({
           onKeyDown: z,
           style: {
             transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-            ...tt,
-            ...Fe
+            ...rt,
+            ...Ge
           },
-          className: `w-full ${Lt[j]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${k || y ? "cursor-not-allowed" : "cursor-pointer"} ${Ke}`,
+          className: `w-full ${_t[j]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${k || y ? "cursor-not-allowed" : "cursor-pointer"} ${Fe}`,
           children: [
             /* @__PURE__ */ a(
               "span",
               {
-                className: `flex-1 min-w-0 text-left ${g ? "flex" : "truncate"} ${_e ? "pr-[18px]" : ""}`,
-                children: rt
+                className: `flex-1 min-w-0 text-left ${g ? "flex" : "truncate"} ${Ne ? "pr-[18px]" : ""}`,
+                children: at
               }
             ),
-            y ? /* @__PURE__ */ a("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ a(bt, { size: "xxxsmall" }) }) : /* @__PURE__ */ a(
-              ht,
+            y ? /* @__PURE__ */ a("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ a(vt, { size: "xxxsmall" }) }) : /* @__PURE__ */ a(
+              pt,
               {
                 size: 13,
                 className: "shrink-0",
@@ -376,29 +377,29 @@ const Zt = ({
           ]
         }
       ),
-      _e && /* @__PURE__ */ a(
+      Ne && /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           "aria-label": "Clear selection",
-          onClick: Qe,
+          onClick: et,
           className: "absolute top-0 bottom-0 right-[28px] flex items-center justify-center px-[2px] leading-none bg-transparent border-none text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer",
           children: "×"
         }
       )
     ] }),
-    s && ut(
+    s && ft(
       /* @__PURE__ */ v(
         "div",
         {
           ref: L,
-          id: ve,
+          id: ye,
           role: "listbox",
           "aria-multiselectable": "true",
-          ...kt("multiselect"),
-          style: nt,
+          ...St("multiselect"),
+          style: ot,
           children: [
-            Re && /* @__PURE__ */ v(
+            Te && /* @__PURE__ */ v(
               "div",
               {
                 style: {
@@ -413,7 +414,7 @@ const Zt = ({
                 },
                 children: [
                   /* @__PURE__ */ a(
-                    gt,
+                    xt,
                     {
                       size: 13,
                       style: {
@@ -446,7 +447,7 @@ const Zt = ({
                 ]
               }
             ),
-            Re && /* @__PURE__ */ a(
+            Te && /* @__PURE__ */ a(
               "div",
               {
                 "aria-hidden": "true",
@@ -461,7 +462,7 @@ const Zt = ({
             /* @__PURE__ */ a(
               "div",
               {
-                ref: Ie,
+                ref: ke,
                 style: {
                   display: "flex",
                   flexDirection: "column",
@@ -475,15 +476,15 @@ const Zt = ({
                 },
                 children: S.length === 0 ? (
                   // `role="listbox"` admits only option/group children.
-                  /* @__PURE__ */ a("div", { role: "presentation", style: Tt, children: at })
+                  /* @__PURE__ */ a("div", { role: "presentation", style: Lt, children: nt })
                 ) : S.map((e, t) => {
                   const n = ae.has(e.value), h = t === x, f = !!e.disabled;
                   return /* @__PURE__ */ v(
                     "button",
                     {
-                      id: ye(t),
+                      id: we(t),
                       ref: (o) => {
-                        ke.current[t] = o;
+                        Se.current[t] = o;
                       },
                       type: "button",
                       role: "option",
@@ -542,7 +543,7 @@ const Zt = ({
                               },
                               children: [
                                 o === "hover" ? /* @__PURE__ */ a(
-                                  Ce,
+                                  He,
                                   {
                                     text: e.description,
                                     delay: 0.6,
@@ -551,7 +552,7 @@ const Zt = ({
                                   }
                                 ) : l,
                                 o === "icon" && /* @__PURE__ */ a(
-                                  Ce,
+                                  He,
                                   {
                                     text: e.description,
                                     delay: 0.6,
@@ -565,7 +566,7 @@ const Zt = ({
                                         },
                                         "aria-label": "More information",
                                         onClick: (d) => d.stopPropagation(),
-                                        children: e.descriptionIcon ?? /* @__PURE__ */ a(pt, { size: 14 })
+                                        children: e.descriptionIcon ?? /* @__PURE__ */ a(gt, { size: 14 })
                                       }
                                     )
                                   }
@@ -616,28 +617,29 @@ const Zt = ({
       document.body
     )
   ] });
-  return Ne ? /* @__PURE__ */ a(
-    ft,
+  return Oe ? /* @__PURE__ */ a(
+    mt,
     {
       label: P,
       hint: X,
+      rightSideContent: he,
       tooltip: me,
       name: fe ?? "",
       required: J,
-      requiredIndicator: Be,
+      requiredIndicator: Ke,
       loading: y,
-      formControl: he,
+      formControl: pe,
       description: q,
-      controlId: we,
-      labelId: Ee,
-      descriptionId: Ye,
-      hintId: Ve,
-      loadingComponent: /* @__PURE__ */ a(xt, { heightClass: Y[j] }),
-      children: De
+      controlId: Ee,
+      labelId: Ie,
+      descriptionId: Ve,
+      hintId: je,
+      loadingComponent: /* @__PURE__ */ a(bt, { heightClass: Y[j] }),
+      children: Ae
     }
-  ) : De;
+  ) : Ae;
 };
 export {
-  Zt as default
+  qt as default
 };
 //# sourceMappingURL=MultiSelect.js.map