@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/MultiSelect.js

@@ -0,0 +1,643 @@
+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 = {
+  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 = {
+  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(
+  ({ triggerRole: i, disabled: N, children: M, ...E }, I) => i !== "button" ? /* @__PURE__ */ a(
+    "div",
+    {
+      ref: I,
+      role: i,
+      tabIndex: N ? -1 : 0,
+      ...E,
+      children: M
+    }
+  ) : /* @__PURE__ */ a(
+    "button",
+    {
+      ref: I,
+      type: "button",
+      disabled: N,
+      ...E,
+      children: M
+    }
+  )
+);
+Me.displayName = "TriggerElement";
+const Zt = ({
+  options: i,
+  value: N,
+  defaultValue: M,
+  onChange: E,
+  placeholder: I = "Select",
+  renderTrigger: V,
+  searchable: Pe,
+  size: j = "large",
+  width: U = "auto",
+  minWidth: Z,
+  disabled: k = !1,
+  error: ue = !1,
+  loading: y = !1,
+  label: P,
+  name: fe,
+  description: q,
+  tooltip: me,
+  hint: X,
+  required: J = !1,
+  requiredIndicator: Be,
+  formControl: he,
+  chips: Q = !1,
+  chipsRemovable: ee = !0,
+  chipsMax: pe = "auto",
+  inlineSearch: g = !1,
+  onSearchChange: O,
+  localFilter: ge = !0,
+  className: Ke = "",
+  style: Fe,
+  id: Ge,
+  "aria-label": xe,
+  "aria-labelledby": ze
+}) => {
+  const be = st(), ve = `${be}-listbox`, ye = (e) => `${be}-option-${e}`, { controlId: we, labelId: Ee, descriptionId: Ye, hintId: Ve, describedBy: je } = mt({
+    id: Ge,
+    label: P,
+    description: q,
+    hint: X
+  }), [Ue, Ze] = $(() => M ?? []), te = N !== void 0, u = te ? N : Ue, [s, B] = $(!1), [m, qe] = $(
+    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 = _(
+    () => i.filter((e) => ae.has(e.value)),
+    [i, ae]
+  ), ne = typeof pe == "number" ? pe : void 0, S = _(() => {
+    if (!ge) 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(
+    (e, t) => {
+      Se.current !== e && (Se.current = e, t && (oe.current = !0), Xe(e), O == null || O(e));
+    },
+    [O]
+  ), le = p(
+    (e) => K(e, !0),
+    [K]
+  ), A = p(() => K("", !1), [K]);
+  Ae(() => {
+    oe.current && (T(-1), oe.current = !1);
+  }, [w]);
+  const Je = Pe ?? (O !== void 0 || i.length > _t), Re = g ? !1 : Je, 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) });
+  }, [Z]);
+  Ae(() => {
+    var h;
+    if (!s) {
+      A(), T(-1);
+      return;
+    }
+    C(), g && ((h = D.current) == null || h.focus());
+    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));
+    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 && L.current && C();
+  }, [s, C]);
+  const b = p(
+    (e) => {
+      te || Ze(e), E == null || E(e);
+    },
+    [te, E]
+  ), F = p(
+    (e) => i.some((t) => t.value === e && t.disabled),
+    [i]
+  ), ie = p(
+    (e) => {
+      F(e) || (u.includes(e) ? b(u.filter((t) => t !== e)) : b([...u, e]));
+    },
+    [u, b, F]
+  ), G = _(() => {
+    const e = /* @__PURE__ */ new Set();
+    for (const t of i)
+      t.disabled && e.add(t.value);
+    return e;
+  }, [i]), Qe = p(
+    (e) => {
+      e.stopPropagation();
+      const t = u.filter((n) => G.has(n));
+      b(t);
+    },
+    [b, u, G]
+  ), Te = 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 (e.preventDefault(), e.stopPropagation(), !s) {
+        B(!0);
+        return;
+      }
+      const t = S.length;
+      if (t === 0) return;
+      const n = (o) => {
+        requestAnimationFrame(() => {
+          const r = ke.current[o], l = Ie.current;
+          if (!r || !l) return;
+          const d = r.offsetTop, H = d + r.offsetHeight, W = l.scrollTop, ot = W + l.clientHeight;
+          H > ot ? l.scrollTo({
+            top: H - l.clientHeight,
+            behavior: "smooth"
+          }) : d < W && l.scrollTo({ top: d, behavior: "smooth" });
+        });
+      }, h = (o) => {
+        var l;
+        let r = x;
+        for (let d = 0; d < t; d++)
+          if (r = o === 1 ? r < t - 1 ? r + 1 : 0 : r > 0 ? r - 1 : t - 1, !((l = S[r]) != null && l.disabled)) {
+            n(r), T(r);
+            return;
+          }
+      }, f = () => {
+        var l;
+        if (x < 0 || x >= t || (l = S[x]) != null && l.disabled) return;
+        const o = S[x].value;
+        ie(o), A();
+        const r = i.findIndex((d) => d.value === o);
+        T(r >= 0 ? r : -1), n(r >= 0 ? r : 0), requestAnimationFrame(() => {
+          var d;
+          return (d = D.current) == null ? void 0 : d.focus();
+        });
+      };
+      switch (e.key) {
+        case He:
+          h(1);
+          break;
+        case We:
+          h(-1);
+          break;
+        case $e:
+          f();
+          break;
+      }
+    },
+    [s, S, x, ie, i, A]
+  ), Le = p(
+    (e) => {
+      if (e.key === Nt && w === "" && u.length > 0) {
+        e.preventDefault(), b(u.slice(0, -1)), requestAnimationFrame(() => {
+          var t;
+          return (t = D.current) == null ? void 0 : t.focus();
+        });
+        return;
+      }
+      z(e);
+    },
+    [z, w, u, b]
+  ), et = typeof U == "number" ? `${U}px` : U, _e = c.length > 0 && !k && !y, tt = yt({
+    disabled: k,
+    error: ue,
+    open: s,
+    loading: y,
+    hasSelection: c.length > 0
+  }), se = _(() => g ? /* @__PURE__ */ a(
+    "input",
+    {
+      ref: D,
+      type: "text",
+      value: w,
+      onChange: (e) => le(e.target.value),
+      onKeyDown: Le,
+      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) => {
+        e.preventDefault();
+      }
+    }
+  ) : null, [
+    g,
+    w,
+    le,
+    Le,
+    c.length,
+    I
+  ]), rt = _(() => {
+    if (V && c.length > 0)
+      return V(c);
+    if (Q && c.length > 0) {
+      const e = ne != null ? c.slice(0, ne) : c, t = c.length - e.length;
+      return /* @__PURE__ */ v(
+        "div",
+        {
+          className: "flex items-center gap-1 overflow-hidden min-w-0 flex-1",
+          style: { flexWrap: "nowrap" },
+          children: [
+            e.map((n) => {
+              const h = G.has(n.value);
+              return /* @__PURE__ */ a(
+                vt,
+                {
+                  value: n.label,
+                  type: "default",
+                  textTransform: "none",
+                  onRemove: ee && !k && !h ? (f) => Te(n.value, f) : void 0,
+                  className: "shrink-0"
+                },
+                n.value
+              );
+            }),
+            t > 0 && /* @__PURE__ */ v("span", { className: "shrink-0 text-xs text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: [
+              "+",
+              t
+            ] }),
+            se
+          ]
+        }
+      );
+    }
+    return g && c.length === 0 ? se : c.length === 0 ? /* @__PURE__ */ a("span", { className: "text-[var(--malachite-text-placeholder)]", children: I }) : c.length === 1 ? /* @__PURE__ */ a("span", { children: c[0].label }) : /* @__PURE__ */ a("span", { children: `${c.length} selected` });
+  }, [
+    c,
+    V,
+    Q,
+    ne,
+    ee,
+    k,
+    Te,
+    g,
+    se,
+    I,
+    G
+  ]), at = i.length === 0 ? "No options available" : "No results found";
+  dt(() => {
+    s && It();
+  }, [s]);
+  const nt = {
+    position: "fixed",
+    top: (m == null ? void 0 : m.top) ?? 0,
+    left: (m == null ? void 0 : m.left) ?? 0,
+    minWidth: (m == null ? void 0 : m.width) ?? Z ?? 180,
+    maxWidth: 320,
+    background: "var(--malachite-card-background, rgb(255, 255, 255))",
+    border: "1px solid var(--malachite-card-border, rgb(232, 232, 232))",
+    borderRadius: 12,
+    boxShadow: "0px 2px 5px 0px rgba(0, 0, 0, 0.1)",
+    padding: 4,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    maxHeight: 360,
+    fontSize: Rt[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: [
+      /* @__PURE__ */ v(
+        Me,
+        {
+          ref: re,
+          id: we,
+          triggerRole: g ? "combobox" : Q && ee ? "group" : "button",
+          disabled: k || y,
+          [wt]: "",
+          "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-invalid": ue || void 0,
+          "aria-required": J || void 0,
+          "aria-describedby": je,
+          "aria-busy": y || void 0,
+          onClick: () => {
+            k || y || B((e) => !e);
+          },
+          onKeyDown: z,
+          style: {
+            transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+            ...tt,
+            ...Fe
+          },
+          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}`,
+          children: [
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: `flex-1 min-w-0 text-left ${g ? "flex" : "truncate"} ${_e ? "pr-[18px]" : ""}`,
+                children: rt
+              }
+            ),
+            y ? /* @__PURE__ */ a("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ a(bt, { size: "xxxsmall" }) }) : /* @__PURE__ */ a(
+              ht,
+              {
+                size: 13,
+                className: "shrink-0",
+                style: {
+                  color: s ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                  transition: "transform 0.2s ease, color 0.2s ease",
+                  transform: s ? "rotate(180deg)" : "rotate(0deg)"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      _e && /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear selection",
+          onClick: Qe,
+          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(
+      /* @__PURE__ */ v(
+        "div",
+        {
+          ref: L,
+          id: ve,
+          role: "listbox",
+          "aria-multiselectable": "true",
+          ...kt("multiselect"),
+          style: nt,
+          children: [
+            Re && /* @__PURE__ */ v(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  background: "var(--malachite-tag-default-background, #f1f1f1)",
+                  borderRadius: 8,
+                  height: 32,
+                  flexShrink: 0,
+                  padding: "0 12px"
+                },
+                children: [
+                  /* @__PURE__ */ a(
+                    gt,
+                    {
+                      size: 13,
+                      style: {
+                        color: "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                        flexShrink: 0
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    "input",
+                    {
+                      type: "text",
+                      value: w,
+                      onChange: (e) => le(e.target.value),
+                      onKeyDown: z,
+                      placeholder: "Search",
+                      "aria-label": "Search options",
+                      autoFocus: !0,
+                      style: {
+                        flex: 1,
+                        background: "transparent",
+                        border: "none",
+                        outline: "none",
+                        font: "inherit",
+                        color: "var(--malachite-text-primary, rgb(10, 10, 10))",
+                        minWidth: 0
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            Re && /* @__PURE__ */ a(
+              "div",
+              {
+                "aria-hidden": "true",
+                style: {
+                  height: 1,
+                  width: "100%",
+                  background: "var(--malachite-card-border, rgb(232, 232, 232))",
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                ref: Ie,
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  overflowY: "auto",
+                  overscrollBehavior: "contain",
+                  minHeight: 0,
+                  flex: 1,
+                  scrollbarWidth: "thin",
+                  scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
+                },
+                children: S.length === 0 ? (
+                  // `role="listbox"` admits only option/group children.
+                  /* @__PURE__ */ a("div", { role: "presentation", style: Tt, children: at })
+                ) : S.map((e, t) => {
+                  const n = ae.has(e.value), h = t === x, f = !!e.disabled;
+                  return /* @__PURE__ */ v(
+                    "button",
+                    {
+                      id: ye(t),
+                      ref: (o) => {
+                        ke.current[t] = o;
+                      },
+                      type: "button",
+                      role: "option",
+                      "aria-selected": n,
+                      "aria-disabled": f || void 0,
+                      onClick: () => {
+                        var o;
+                        ie(e.value), A(), (o = D.current) == null || o.focus();
+                      },
+                      onMouseEnter: () => T(t),
+                      onMouseLeave: () => {
+                        x === t && T(-1);
+                      },
+                      className: "malachite-multiselect-option",
+                      "data-checked": n,
+                      "data-highlighted": h,
+                      "data-disabled": f,
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        width: "100%",
+                        // The list scrolls; unpinned, rows compress instead.
+                        flexShrink: 0,
+                        border: "none",
+                        textAlign: "left",
+                        borderRadius: 8,
+                        padding: "8px 10px",
+                        font: "inherit",
+                        cursor: f ? "not-allowed" : "pointer",
+                        opacity: f ? 0.6 : 1,
+                        color: n ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))"
+                      },
+                      children: [
+                        (() => {
+                          const o = e.description ? e.descriptionMode ?? "icon" : null, r = o === "subtitle", l = /* @__PURE__ */ a(
+                            "span",
+                            {
+                              style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: e.label
+                            }
+                          );
+                          return /* @__PURE__ */ v(
+                            "span",
+                            {
+                              style: {
+                                flex: 1,
+                                minWidth: 0,
+                                display: "flex",
+                                flexDirection: r ? "column" : "row",
+                                alignItems: r ? "flex-start" : "center",
+                                gap: r ? 2 : 6
+                              },
+                              children: [
+                                o === "hover" ? /* @__PURE__ */ a(
+                                  Ce,
+                                  {
+                                    text: e.description,
+                                    delay: 0.6,
+                                    maxWidth: 420,
+                                    children: l
+                                  }
+                                ) : l,
+                                o === "icon" && /* @__PURE__ */ a(
+                                  Ce,
+                                  {
+                                    text: e.description,
+                                    delay: 0.6,
+                                    maxWidth: 420,
+                                    children: /* @__PURE__ */ a(
+                                      "span",
+                                      {
+                                        style: {
+                                          cursor: "help",
+                                          color: "var(--malachite-text-placeholder, rgb(187, 187, 187))"
+                                        },
+                                        "aria-label": "More information",
+                                        onClick: (d) => d.stopPropagation(),
+                                        children: e.descriptionIcon ?? /* @__PURE__ */ a(pt, { size: 14 })
+                                      }
+                                    )
+                                  }
+                                ),
+                                o === "subtitle" && /* @__PURE__ */ a(
+                                  "span",
+                                  {
+                                    style: {
+                                      fontSize: 12,
+                                      color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
+                                      whiteSpace: "normal",
+                                      lineHeight: 1.3,
+                                      ...e.descriptionMaxLines ? {
+                                        display: "-webkit-box",
+                                        WebkitLineClamp: e.descriptionMaxLines,
+                                        WebkitBoxOrient: "vertical",
+                                        overflow: "hidden"
+                                      } : {}
+                                    },
+                                    children: e.description
+                                  }
+                                )
+                              ]
+                            }
+                          );
+                        })(),
+                        e.badge && /* @__PURE__ */ a(
+                          "span",
+                          {
+                            style: {
+                              marginLeft: "auto",
+                              flexShrink: 0,
+                              paddingLeft: 8
+                            },
+                            children: e.badge
+                          }
+                        )
+                      ]
+                    },
+                    e.value
+                  );
+                })
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+  return Ne ? /* @__PURE__ */ a(
+    ft,
+    {
+      label: P,
+      hint: X,
+      tooltip: me,
+      name: fe ?? "",
+      required: J,
+      requiredIndicator: Be,
+      loading: y,
+      formControl: he,
+      description: q,
+      controlId: we,
+      labelId: Ee,
+      descriptionId: Ye,
+      hintId: Ve,
+      loadingComponent: /* @__PURE__ */ a(xt, { heightClass: Y[j] }),
+      children: De
+    }
+  ) : De;
+};
+export {
+  Zt as default
+};
+//# sourceMappingURL=MultiSelect.js.map