@stackone/malachite 2.53.0 → 2.55.0

package/dist/components/FilterSearch.js

@@ -0,0 +1,572 @@
+import { jsxs as f, Fragment as B, jsx as l } from "react/jsx-runtime";
+import { useId as je, useState as F, useRef as E, useMemo as U, useEffect as X, useCallback as q, useLayoutEffect as we, useInsertionEffect as Ue } from "react";
+import { createPortal as Xe } from "react-dom";
+import qe from "./CustomIcons/CaretDownIcon.js";
+import Be from "./CustomIcons/CheckmarkIcon.js";
+import ke from "./CustomIcons/DismissIcon.js";
+import Ve from "./CustomIcons/SearchIcon.js";
+import Ze from "./Spinner.js";
+import { CONTROL_TEXT_SIZE_CLASS as J, CONTROL_TEXT_SIZE as Ke } from "./controlTextSize.js";
+import { controlWidthStyle as Qe } from "./controlWidth.js";
+import { getTriggerVisual as Ye, DROPDOWN_TRIGGER_ATTR as Je } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as et } from "./escapeLayers.js";
+import { orderSelections as tt, resolveMode as rt, filterRows as Se, searchRows as nt, chipText as it, removeFilter as ot, clearAll as lt, selectAll as at, deselectAll as st, toggleValue as ct } from "./filterSearchModel.js";
+import { ensureFilterSearchStyles as dt, FILTER_SEARCH_CLASS as I } from "./filterSearchStyles.js";
+import { measureMenuGeometry as pt, MENU_MAX_HEIGHT_PX as ut, MENU_SPECS as O } from "./floatingMenuGeometry.js";
+import { FOCUS_RING as ee } from "./focusRing.js";
+import { usePopupLayer as mt } from "./overlayLayers.js";
+import { useTopLayer as ft } from "./topLayer.js";
+import { useLatestRef as ht } from "./useLatestRef.js";
+const gt = {
+  small: `min-h-[var(--malachite-control-height-small,28px)] gap-1 px-2.5 py-[2px] ${J.small} rounded-[var(--malachite-radius-10,10px)]`,
+  medium: `min-h-[var(--malachite-control-height-medium,32px)] gap-1 px-3 py-[3px] ${J.medium} rounded-xl`,
+  large: `min-h-[var(--malachite-control-height-large,42px)] gap-1.5 px-4 py-[6px] ${J.large} rounded-[var(--malachite-radius-xxl,14px)]`
+}, xt = {
+  small: "gap-1",
+  medium: "gap-1",
+  large: "gap-1.5"
+}, te = {
+  resting: "bg-[var(--malachite-tag-default-background,rgba(123,123,123,0.1))] text-[var(--malachite-text-primary,rgb(10,10,10))]",
+  active: "bg-[var(--malachite-accent-background,rgb(0,175,102))] text-[var(--malachite-card-background,rgb(255,255,255))]"
+}, bt = 5, re = (i) => !!i && !(i.kind === "item" && i.row.item.disabled), vt = (i, s) => {
+  for (let g = Math.max(s, 0); g < i.length; g++)
+    if (re(i[g])) return g;
+  return -1;
+}, yt = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  flexShrink: 0,
+  border: "none",
+  textAlign: "left",
+  borderRadius: 8,
+  padding: "6px 10px",
+  font: "inherit",
+  cursor: "pointer",
+  minWidth: 0
+}, Ee = {
+  borderRadius: 6,
+  padding: "2px 6px",
+  flexShrink: 0,
+  whiteSpace: "nowrap"
+}, V = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+}, Re = { ...V, marginLeft: "auto", flexShrink: 1 }, Ce = (i) => i.preventDefault(), wt = (i) => {
+  i.preventDefault(), i.stopPropagation();
+}, kt = ({ row: i, showFilter: s }) => {
+  if (i.kind === "filter")
+    return /* @__PURE__ */ f(B, { children: [
+      /* @__PURE__ */ l("span", { className: I.pill, style: Ee, children: i.filter.label }),
+      i.filter.info && /* @__PURE__ */ l("span", { style: V, children: i.filter.info }),
+      i.filter.example && /* @__PURE__ */ l("span", { className: I.hint, style: Re, children: i.filter.example })
+    ] });
+  if (i.kind === "toggle")
+    return /* @__PURE__ */ l("span", { style: { color: "var(--malachite-text-primary, rgb(10, 10, 10))" }, children: i.toggle === "select" ? "Select All" : "Deselect All" });
+  const { item: g, filter: R, selected: Z } = i.row;
+  return /* @__PURE__ */ f(B, { children: [
+    s && /* @__PURE__ */ l("span", { className: I.pill, style: Ee, children: R.label }),
+    /* @__PURE__ */ l("span", { style: V, children: g.label }),
+    Z ? /* @__PURE__ */ l(
+      Be,
+      {
+        size: 16,
+        style: {
+          marginLeft: "auto",
+          flexShrink: 0,
+          color: "var(--malachite-accent-background, rgb(0, 175, 102))"
+        }
+      }
+    ) : s && R.info && /* @__PURE__ */ l("span", { className: I.hint, style: Re, children: R.info })
+  ] });
+}, Gt = ({
+  filters: i,
+  value: s,
+  onChange: g,
+  onClear: R,
+  onActiveFilterChange: Z,
+  placeholder: K = "Search",
+  size: Q = "medium",
+  width: Ne,
+  loading: p = !1,
+  disabled: u = !1,
+  clearable: Ie = !1,
+  maxVisibleChips: De = 4,
+  className: Ae = "",
+  style: Le,
+  id: Te,
+  "aria-label": ne,
+  "aria-labelledby": ie
+}) => {
+  var ye;
+  const oe = je(), le = `${oe}-listbox`, ae = (e) => `${oe}-option-${e}`, [a, Y] = F(!1), [x, y] = F(""), [c, $e] = F(null), [se, m] = F(0), [d, ce] = F(null), D = E(null), T = E(null), w = E(null), H = E(null), de = E([]);
+  ft(w, a);
+  const Me = mt("multiselect", a, w), pe = E(/* @__PURE__ */ new Map()), $ = U(() => {
+    var t;
+    const e = new Map(pe.current);
+    for (const r of i) {
+      const n = ((t = e.get(r.value)) == null ? void 0 : t.items) ?? /* @__PURE__ */ new Map();
+      e.set(r.value, {
+        label: r.label,
+        items: new Map([
+          ...n,
+          ...r.items.map((o) => [o.value, o.label])
+        ])
+      });
+    }
+    return e;
+  }, [i]);
+  X(() => {
+    pe.current = $;
+  }, [$]);
+  const ue = E([]), M = U(
+    () => tt(s, ue.current, c),
+    [s, c]
+  );
+  X(() => {
+    ue.current = M;
+  }, [M]);
+  const h = rt(c, x), C = i.find((e) => e.value === c), me = E(c), P = ht(Z), k = q(
+    (e) => {
+      var t;
+      me.current !== e && (me.current = e, $e(e), (t = P.current) == null || t.call(P, e));
+    },
+    [P]
+  ), b = U(() => {
+    if (p) return [];
+    if (h === "filters") return i.map((r) => ({ kind: "filter", filter: r }));
+    const { toggle: e, items: t } = h === "items" ? Se(C, s, x) : nt(i, s, x);
+    return [
+      ...e ? [{ kind: "toggle", toggle: e }] : [],
+      ...t.map((r) => ({ kind: "item", row: r }))
+    ];
+  }, [p, h, i, C, s, x]), z = U(() => {
+    const e = new Map(s.map((n) => [n.filter, n.items])), t = (n) => {
+      const o = $.get(n), v = e.get(n);
+      if (!v)
+        return n === c ? [{ filter: n, text: (o == null ? void 0 : o.label) ?? n }] : [];
+      if (!o && p) return [];
+      const N = v.map((S) => (o == null ? void 0 : o.items.get(S)) ?? S);
+      return [{ filter: n, text: it((o == null ? void 0 : o.label) ?? n, N) }];
+    }, r = c !== null && !M.includes(c);
+    return [...M, ...r ? [c] : []].flatMap(t);
+  }, [M, s, $, p, c]), fe = z.slice(0, De), he = z.length - fe.length, W = q(
+    ({ next: e, changes: t }) => {
+      t.length > 0 && g(e, t);
+    },
+    [g]
+  ), A = q(() => {
+    Y(!1), y(""), k(null), ce(null);
+  }, [k]), G = () => {
+    u || a || (m(0), Y(!0));
+  }, _ = q(() => {
+    const e = D.current;
+    e && ce(
+      pt(w.current, {
+        triggerRect: e.getBoundingClientRect(),
+        preset: "standard",
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight
+      })
+    );
+  }, []);
+  X(() => {
+    u && a && A();
+  }, [u, a, A]), X(() => {
+    if (!a) return;
+    const e = (o) => {
+      const v = o.composedPath(), N = D.current, S = w.current;
+      (!N || !v.includes(N)) && (!S || !v.includes(S)) && A();
+    };
+    let t = null;
+    const r = () => {
+      t === null && (t = requestAnimationFrame(() => {
+        t = null, _();
+      }));
+    }, n = et(A);
+    return document.addEventListener("mousedown", e), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
+      document.removeEventListener("mousedown", e), window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r), t !== null && cancelAnimationFrame(t), n();
+    };
+  }, [a, A, _]), we(() => {
+    if (!a || (_(), typeof ResizeObserver > "u")) return;
+    const e = new ResizeObserver(() => _());
+    return w.current && e.observe(w.current), D.current && e.observe(D.current), () => e.disconnect();
+  }, [a, _]), we(() => {
+    H.current && (H.current.scrollTop = 0);
+  }, [h, c, x]), Ue(() => {
+    a && dt();
+  }, [a]);
+  const ge = (e) => {
+    requestAnimationFrame(() => {
+      const t = de.current[e], r = H.current;
+      if (!t || !r) return;
+      const n = t.offsetTop, o = n + t.offsetHeight;
+      o > r.scrollTop + r.clientHeight ? r.scrollTop = o - r.clientHeight : n < r.scrollTop && (r.scrollTop = n);
+    });
+  }, xe = (e) => {
+    if (e.kind === "filter") {
+      k(e.filter.value), y(""), m(0);
+      return;
+    }
+    if (e.kind === "toggle") {
+      const j = h === "items" && C ? [C] : i;
+      W(
+        e.toggle === "select" ? at(j, s, x) : st(j, s, x)
+      ), y(""), m(0);
+      return;
+    }
+    const { item: t, filter: r } = e.row;
+    if (t.disabled) return;
+    const n = ct(s, r.value, t.value);
+    if (W(n), y(""), h !== "items") {
+      m(0);
+      return;
+    }
+    const { toggle: o, items: v } = Se(r, n.next, ""), N = v.findIndex((j) => j.item.value === t.value), S = N < 0 ? 0 : N + (o ? 1 : 0);
+    m(S), ge(S);
+  }, _e = (e) => {
+    if (b.length === 0) return;
+    let t = L < 0 ? se : L;
+    for (let r = 0; r < b.length; r++)
+      if (t = (t + e + b.length) % b.length, re(b[t])) {
+        m(t), ge(t);
+        return;
+      }
+  }, be = (e) => {
+    e === c && k(null), W(ot(s, e));
+  }, Fe = (e) => {
+    var t;
+    u || p || (k(e), y(""), m(0), Y(!0), (t = T.current) == null || t.focus());
+  }, Oe = (e) => {
+    if (!(e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229))
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp": {
+          if (e.preventDefault(), !a) {
+            G();
+            return;
+          }
+          _e(e.key === "ArrowDown" ? 1 : -1);
+          return;
+        }
+        case "Enter": {
+          if (e.preventDefault(), !a) {
+            G();
+            return;
+          }
+          const t = b[L];
+          re(t) && xe(t);
+          return;
+        }
+        case "Backspace": {
+          if (x !== "") return;
+          if (c !== null && !s.some((o) => o.filter === c)) {
+            e.preventDefault(), k(null), m(0);
+            return;
+          }
+          const r = z.filter((o) => s.some((v) => v.filter === o.filter)), n = r[r.length - 1];
+          if (!n) return;
+          e.preventDefault(), be(n.filter);
+          return;
+        }
+      }
+  }, He = (e) => {
+    e.stopPropagation(), W(lt(s)), k(null), y(""), R == null || R();
+  }, Pe = () => {
+    k(null), y(""), m(0);
+  }, ve = Ie && s.length > 0 && !u && !p, L = a ? vt(b, se) : -1, ze = Ye({ disabled: u, open: a }), We = h === "filters" ? "No filters available" : "No matching values", Ge = {
+    position: "fixed",
+    top: (d == null ? void 0 : d.top) ?? 0,
+    left: (d == null ? void 0 : d.left) ?? 0,
+    width: d == null ? void 0 : d.width,
+    background: O.standard.background,
+    border: O.standard.border,
+    borderRadius: O.standard.radius,
+    boxShadow: O.standard.shadow,
+    padding: O.standard.padding,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    maxHeight: (d == null ? void 0 : d.maxHeight) ?? ut,
+    fontSize: Ke[Q],
+    visibility: d ? "visible" : "hidden",
+    opacity: d ? 1 : 0
+  };
+  return /* @__PURE__ */ f(B, { children: [
+    /* @__PURE__ */ f(
+      "div",
+      {
+        className: `relative min-w-0 ${Ae}`,
+        style: { ...Qe(Ne), ...Le },
+        children: [
+          /* @__PURE__ */ f(
+            "div",
+            {
+              ref: D,
+              [Je]: "",
+              "data-open": a || void 0,
+              onBlur: (e) => {
+                var r, n;
+                const t = e.relatedTarget;
+                t && ((r = D.current) != null && r.contains(t) || (n = w.current) != null && n.contains(t)) || A();
+              },
+              onMouseDown: (e) => {
+                var t;
+                u || (e.target !== T.current && e.preventDefault(), (t = T.current) == null || t.focus(), G());
+              },
+              style: {
+                transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+                ...ze
+              },
+              className: `w-full min-w-0 flex items-center border border-solid font-normal ${gt[Q]} ${u ? "cursor-not-allowed" : "cursor-text"}`,
+              children: [
+                /* @__PURE__ */ l(
+                  Ve,
+                  {
+                    size: 13,
+                    className: "shrink-0 mr-1",
+                    style: { color: "var(--malachite-text-placeholder, rgb(187, 187, 187))" }
+                  }
+                ),
+                /* @__PURE__ */ f(
+                  "div",
+                  {
+                    className: `flex flex-1 min-w-0 flex-wrap items-center ${xt[Q]} ${ve ? "pr-[18px]" : ""}`,
+                    children: [
+                      fe.map((e) => {
+                        const t = a && e.filter === c;
+                        return /* @__PURE__ */ f(
+                          "span",
+                          {
+                            onMouseDown: wt,
+                            className: `inline-flex items-center gap-1 max-w-[max(60px,calc(100%-64px))] min-w-0 h-[22px] pl-1.5 pr-1 rounded-md text-xs ${t ? te.active : te.resting}`,
+                            children: [
+                              /* @__PURE__ */ l(
+                                "button",
+                                {
+                                  type: "button",
+                                  disabled: u,
+                                  title: e.text,
+                                  "aria-label": `Edit filter ${e.text}`,
+                                  onClick: () => Fe(e.filter),
+                                  className: `truncate min-w-0 bg-transparent border-none p-0 text-[length:inherit] text-current ${u || p ? "cursor-default" : "cursor-pointer"} ${ee}`,
+                                  children: e.text
+                                }
+                              ),
+                              !u && /* @__PURE__ */ l(
+                                "button",
+                                {
+                                  type: "button",
+                                  "aria-label": `Remove filter ${e.text}`,
+                                  onClick: (r) => {
+                                    var n;
+                                    r.stopPropagation(), be(e.filter), (n = T.current) == null || n.focus();
+                                  },
+                                  className: `flex items-center justify-center shrink-0 bg-transparent border-none p-0 text-current opacity-70 hover:opacity-100 cursor-pointer ${ee}`,
+                                  children: /* @__PURE__ */ l(ke, { size: 10 })
+                                }
+                              )
+                            ]
+                          },
+                          e.filter
+                        );
+                      }),
+                      he > 0 && /* @__PURE__ */ f(
+                        "span",
+                        {
+                          className: `inline-flex items-center h-[22px] px-1.5 rounded-md text-xs ${te.resting}`,
+                          children: [
+                            "+",
+                            he
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ l(
+                        "input",
+                        {
+                          ref: T,
+                          id: Te,
+                          type: "text",
+                          role: "combobox",
+                          value: x,
+                          disabled: u,
+                          placeholder: z.length === 0 ? K : "",
+                          autoComplete: "off",
+                          spellCheck: !1,
+                          "aria-label": ie ? void 0 : ne ?? K,
+                          "aria-labelledby": ie,
+                          "aria-haspopup": "listbox",
+                          "aria-autocomplete": "list",
+                          "aria-expanded": a,
+                          "aria-controls": a ? le : void 0,
+                          "aria-activedescendant": L >= 0 ? ae(L) : void 0,
+                          "aria-busy": p || void 0,
+                          onChange: (e) => {
+                            y(e.target.value), m(0), G();
+                          },
+                          onKeyDown: Oe,
+                          className: "flex-1 min-w-[60px] border-none outline-none bg-transparent p-0 text-[length:inherit] text-[var(--malachite-text-primary,rgb(10,10,10))] placeholder:text-[var(--malachite-text-placeholder,rgb(187,187,187))] disabled:cursor-not-allowed"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: "flex items-center justify-center shrink-0 size-[14px] ml-1", children: p ? /* @__PURE__ */ l(Ze, { size: "xxxsmall" }) : /* @__PURE__ */ l(
+                  qe,
+                  {
+                    size: 13,
+                    style: {
+                      color: a ? "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: a ? "rotate(180deg)" : "rotate(0deg)"
+                    }
+                  }
+                ) })
+              ]
+            }
+          ),
+          ve && /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Clear filters",
+              onMouseDown: Ce,
+              onClick: He,
+              className: `absolute top-0 bottom-0 right-[30px] flex items-center justify-center px-[2px] bg-transparent border-none text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${ee}`,
+              children: /* @__PURE__ */ l(ke, { size: 10 })
+            }
+          )
+        ]
+      }
+    ),
+    a && Xe(
+      /* @__PURE__ */ f(
+        "div",
+        {
+          ref: w,
+          ...Me,
+          style: Ge,
+          onMouseDown: Ce,
+          children: [
+            /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  padding: "4px 10px 2px",
+                  color: "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                  display: "flex",
+                  gap: 4,
+                  minWidth: 0
+                },
+                children: h === "items" ? /* @__PURE__ */ f(B, { children: [
+                  /* @__PURE__ */ l(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: -1,
+                      onClick: Pe,
+                      className: I.crumb,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        padding: 0,
+                        font: "inherit",
+                        cursor: "pointer"
+                      },
+                      children: "Filters"
+                    }
+                  ),
+                  /* @__PURE__ */ l("span", { style: V, children: `> ${(C == null ? void 0 : C.label) ?? ((ye = $.get(c ?? "")) == null ? void 0 : ye.label) ?? ""}` })
+                ] }) : "Filters"
+              }
+            ),
+            /* @__PURE__ */ f(
+              "div",
+              {
+                ref: H,
+                id: le,
+                role: "listbox",
+                "aria-multiselectable": h !== "filters",
+                "aria-label": ne ?? K,
+                "aria-busy": p || void 0,
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  overflowY: "auto",
+                  overscrollBehavior: "contain",
+                  minHeight: 0,
+                  flex: 1,
+                  scrollbarWidth: "thin"
+                },
+                children: [
+                  p && Array.from({ length: bt }, (e, t) => /* @__PURE__ */ l(
+                    "div",
+                    {
+                      role: "presentation",
+                      className: I.loading,
+                      style: {
+                        height: 24,
+                        margin: "4px 10px",
+                        borderRadius: 6,
+                        background: "var(--malachite-tag-default-background, rgba(123, 123, 123, 0.1))"
+                      }
+                    },
+                    t
+                  )),
+                  !p && b.length === 0 && /* @__PURE__ */ l(
+                    "div",
+                    {
+                      role: "presentation",
+                      style: {
+                        padding: "6px 10px",
+                        color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
+                      },
+                      children: We
+                    }
+                  ),
+                  b.map((e, t) => {
+                    const r = e.kind === "filter" ? `filter:${e.filter.value}` : e.kind === "toggle" ? "toggle" : `item:${e.row.filter.value}:${e.row.item.value}`, n = e.kind === "item" && !!e.row.item.disabled;
+                    return /* @__PURE__ */ l(
+                      "button",
+                      {
+                        id: ae(t),
+                        ref: (o) => {
+                          de.current[t] = o;
+                        },
+                        type: "button",
+                        tabIndex: -1,
+                        role: "option",
+                        "aria-selected": e.kind === "item" ? e.row.selected : !1,
+                        "aria-disabled": n || void 0,
+                        "data-highlighted": t === L,
+                        "data-disabled": n,
+                        className: I.row,
+                        onMouseEnter: () => {
+                          n || m(t);
+                        },
+                        onClick: () => xe(e),
+                        style: yt,
+                        children: /* @__PURE__ */ l(kt, { row: e, showFilter: h === "search" })
+                      },
+                      r
+                    );
+                  })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  Gt as FilterSearch,
+  Gt as default
+};
+//# sourceMappingURL=FilterSearch.js.map