ics-ui-kit 0.1.0-alpha.9 → 0.1.0

package/dist/components/search-select.js

@@ -0,0 +1,596 @@
+import { jsx as e, jsxs as D, Fragment as q } from "react/jsx-runtime";
+import F, { useState as w, useCallback as x, useEffect as A, forwardRef as ee, useMemo as M, useRef as H } from "react";
+import { T as Q } from "../index-BVqs-uqP.js";
+import { u as K, S as fe } from "../SearchSelectTag-DFCX9zT1.js";
+import { b as Se, g as re, C as te, c as ne, e as ge, i as ve } from "../Command-BhbfL5wm.js";
+import { I as j } from "../Icon-DH3ev9GK.js";
+import { b as ye, P as _, a as $ } from "../Popover-Dvr7y0YY.js";
+import { m as Ce, s as be } from "../Select-DRwv6-eZ.js";
+import { C as Ne } from "../chevron-down-CAOItu8X.js";
+import { C as ae } from "../check-CeyaOoZv.js";
+import { L as se } from "../Loader-BpHiL6W-.js";
+import { u as Oe } from "../useDebounce-BRah78CF.js";
+import { E as xe } from "../EmptyState-DRKjscH-.js";
+import { E as Ie } from "../ErrorState-B26k67-z.js";
+import { H as Le } from "../HintState-BxrCAWqq.js";
+import { u as we } from "../useItemsKeyboardNavigation-CmeOR30y.js";
+const Te = ({
+  options: r,
+  value: t,
+  defaultValue: n,
+  onChange: a,
+  valueOption: s
+}) => {
+  const [l, c] = w(void 0), f = x(
+    (d) => {
+      if (d !== void 0) {
+        const u = r.find((S) => S.value === d) || l;
+        u && u.value === d && (c(u), a?.(d, u));
+      }
+    },
+    [a, r, l]
+  ), [o, h] = K({
+    value: t,
+    defaultValue: n,
+    onChange: f
+  });
+  A(() => {
+    if (o !== void 0) {
+      if (l && l.value === o)
+        return;
+      const d = r.find((u) => u.value === o);
+      d ? c(d) : s && s.value === o && c(s);
+    } else
+      c(void 0);
+  }, [o, r, l, s]);
+  const i = x(
+    (d) => {
+      const u = r.find((S) => S.label === d);
+      u && h(u.value);
+    },
+    [h, r]
+  );
+  return {
+    selectedValue: o,
+    selectedOption: l,
+    setSelectedByLabel: i,
+    setSelectedValue: h
+  };
+}, De = Q({
+  base: "self-center pl-1.5"
+}), le = ({ children: r, className: t }) => /* @__PURE__ */ e("span", { className: De({ className: t }), children: r }), Re = Q({
+  base: "pointer-events-none self-center pl-1.5 text-muted"
+}), Ve = ({ children: r, className: t }) => /* @__PURE__ */ e("span", { className: Re({ className: t }), children: r }), Pe = Q({
+  extend: be,
+  base: "group/search-select-trigger min-h-10 items-start py-[0.3125rem] pl-1.5 pr-3 lg:min-h-9 lg:py-[0.3125rem] lg:pl-1.5 lg:pr-2.5",
+  slots: {
+    buttonWrapper: "ml-auto flex gap-2.5 pl-2.5",
+    iconWrapper: "min-h-7 lg:min-h-6",
+    startIcon: "flex min-h-7 items-center pl-1.5 pr-0.5 text-muted lg:min-h-6",
+    clearButton: "h-auto p-0 opacity-0 group-hover/search-select-trigger:opacity-100 group-focus-visible/search-select-trigger:opacity-100"
+  }
+}), k = F.forwardRef(
+  ({ className: r, children: t, disabled: n, open: a, invalid: s, placeholder: l, startIcon: c, onClear: f, ...o }, h) => {
+    const i = Pe({ disabled: n, invalid: s });
+    return /* @__PURE__ */ D(
+      "button",
+      {
+        ...o,
+        disabled: n,
+        className: i.base({ className: r }),
+        ref: h,
+        role: "combobox",
+        "aria-expanded": a,
+        "aria-invalid": s,
+        "aria-haspopup": "listbox",
+        children: [
+          c && /* @__PURE__ */ e("div", { className: i.startIcon(), children: c }),
+          t !== void 0 ? t : /* @__PURE__ */ e(Ve, { children: l }),
+          /* @__PURE__ */ D("div", { className: i.buttonWrapper(), children: [
+            f && /* @__PURE__ */ e("div", { className: i.iconWrapper(), children: /* @__PURE__ */ e(Ce, { onClear: f, className: i.clearButton() }) }),
+            !n && /* @__PURE__ */ e("div", { className: i.iconWrapper(), children: /* @__PURE__ */ e(j, { icon: Ne, className: i.icon() }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "SearchSelectTrigger";
+const Me = Q({
+  base: "w-full min-w-[var(--radix-popper-anchor-width)] border-secondary-border p-0"
+}), z = F.forwardRef(
+  ({ className: r, children: t, ...n }, a) => /* @__PURE__ */ e(ye, { ref: a, className: Me({ className: r }), align: "start", ...n, children: t })
+);
+z.displayName = "SearchSelectContent";
+const G = F.forwardRef(({ placeholder: r = "Find", ...t }, n) => /* @__PURE__ */ e(Se, { ref: n, placeholder: r, ...t }));
+G.displayName = "SearchSelectInput";
+const Ee = Q({ base: "" }), oe = ee(
+  (r, t) => {
+    const {
+      id: n,
+      className: a,
+      options: s,
+      valueOption: l,
+      renderOption: c,
+      placeholder: f = "Выберите значение",
+      value: o,
+      defaultValue: h,
+      onBlur: i,
+      onChange: d,
+      onClear: u,
+      disabled: S,
+      invalid: b,
+      searchPlaceholder: v = "Найти",
+      emptyText: g = "Результатов не найдено",
+      shouldFilter: p = !0,
+      footerContent: m,
+      onSearchChange: y,
+      onOpenChange: I,
+      startIcon: R,
+      hideSearch: L,
+      ...V
+    } = r, [P, C] = w(!1), [T, N] = w(""), { selectedValue: E, selectedOption: W, setSelectedByLabel: J } = Te({
+      options: s,
+      value: o,
+      defaultValue: h,
+      valueOption: l,
+      onChange: d
+    }), U = x(
+      (O) => {
+        J(O), C(!1);
+      },
+      [J, C]
+    ), de = x(
+      (O) => {
+        N(O), y?.(O);
+      },
+      [y]
+    ), ue = x(
+      (O) => {
+        C(O), I?.(O);
+      },
+      [I]
+    ), X = M(() => {
+      if (W) {
+        if (c) {
+          const O = c({ option: W, type: "trigger" });
+          if (O !== void 0)
+            return O;
+        }
+        return /* @__PURE__ */ e(le, { children: W.label });
+      }
+    }, [W, c]), he = M(() => s.map((O, pe) => {
+      const B = O.disabled ?? !1, Y = E === O.value, me = () => {
+        if (c) {
+          const Z = c({
+            option: O,
+            type: "list",
+            isSelected: Y,
+            isDisabled: B,
+            searchQuery: T,
+            index: pe
+          });
+          if (Z !== void 0)
+            return Z;
+        }
+        return /* @__PURE__ */ D(q, { children: [
+          O.label,
+          Y && /* @__PURE__ */ e(j, { icon: ae, className: "ml-auto" })
+        ] });
+      };
+      return /* @__PURE__ */ e(
+        re,
+        {
+          value: O.label,
+          onSelect: B ? void 0 : U,
+          disabled: B,
+          children: me()
+        },
+        O.value
+      );
+    }), [s, E, U, c, T]);
+    return /* @__PURE__ */ e(_, { ...V, open: P, onOpenChange: ue, children: /* @__PURE__ */ D("div", { className: Ee({ className: a }), children: [
+      /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(
+        k,
+        {
+          onClear: X ? u : void 0,
+          disabled: S,
+          invalid: b,
+          open: P,
+          placeholder: f,
+          id: n,
+          onBlur: i,
+          ref: t,
+          startIcon: R,
+          children: X
+        }
+      ) }),
+      /* @__PURE__ */ e(z, { children: /* @__PURE__ */ D(te, { shouldFilter: p, children: [
+        !L && /* @__PURE__ */ e(G, { placeholder: v, onValueChange: de }),
+        /* @__PURE__ */ D(ne, { className: "p-1", children: [
+          he,
+          /* @__PURE__ */ e(ge, { children: g }),
+          m
+        ] }, `list-${T}`)
+      ] }) })
+    ] }) });
+  }
+);
+oe.displayName = "SearchSelect";
+const Fe = Q({
+  base: "py-2 text-center text-sm text-muted-foreground"
+}), ce = F.forwardRef(
+  ({ onLoad: r, hasMore: t, loadingText: n = "Загрузка...", className: a }, s) => {
+    const l = H(null), c = Fe({ className: a });
+    return F.useImperativeHandle(s, () => l.current), A(() => {
+      const f = l.current;
+      if (!f || !t) return;
+      const o = new IntersectionObserver(
+        ([h]) => {
+          h.isIntersecting && r();
+        },
+        { rootMargin: "50px" }
+      );
+      return o.observe(f), () => {
+        o.disconnect();
+      };
+    }, [r, t]), t ? /* @__PURE__ */ e("div", { ref: l, className: c, children: /* @__PURE__ */ e(se, { className: "flex-row", children: n }) }) : null;
+  }
+);
+ce.displayName = "LoadMoreTrigger";
+const Ae = (r, t) => {
+  if (!t.trim()) return 1;
+  const n = r.toLowerCase().trim(), a = t.toLowerCase().trim();
+  if (n.startsWith(a)) return 3;
+  if (n.includes(a)) return 2;
+  let s = 0;
+  for (let l = 0; l < n.length && s < a.length; l++)
+    n[l] === a[s] && s++;
+  return s === a.length ? 1 : 0;
+}, Qe = ee(
+  (r, t) => {
+    const {
+      options: n,
+      pageSize: a = 50,
+      filter: s = Ae,
+      defaultValue: l,
+      value: c,
+      ...f
+    } = r, [o, h] = w(a), [i, d] = w(""), [u, S] = w(void 0);
+    A(() => h(a), [i, a]), A(() => {
+      const y = c || l;
+      y && !u && S(n.find((I) => I.value === y));
+    }, [l, c, n, u]);
+    const { visibleOptions: b, hasMoreItems: v } = M(() => {
+      const y = i ? n.map((L) => ({
+        option: L,
+        score: s(L.label, i)
+      })).filter(({ score: L }) => L > 0).sort((L, V) => V.score - L.score).map(({ option: L }) => L) : n, I = y.slice(0, o), R = o < y.length;
+      return {
+        visibleOptions: I,
+        hasMoreItems: R
+      };
+    }, [n, i, o, s]), g = x(() => {
+      h((y) => y + a);
+    }, [a]), p = x((y) => {
+      d(y);
+    }, []), m = x(
+      (y) => {
+        y && i && d("");
+      },
+      [i, d]
+    );
+    return /* @__PURE__ */ e(
+      oe,
+      {
+        ...f,
+        ref: t,
+        options: b,
+        value: c,
+        defaultValue: l,
+        valueOption: u,
+        shouldFilter: !1,
+        footerContent: /* @__PURE__ */ e(ce, { onLoad: g, hasMore: v }),
+        onSearchChange: p,
+        onOpenChange: m
+      }
+    );
+  }
+);
+Qe.displayName = "LazySearchSelect";
+const We = F.forwardRef((r, t) => /* @__PURE__ */ e(ve, { ref: t, ...r }));
+We.displayName = "SearchSelectSeparator";
+const ke = ({ loadOptions: r }) => {
+  const [t, n] = w([]), [a, s] = w("idle"), [l, c] = w(null), f = H(null), o = H(0), h = x(() => {
+    f.current && f.current.abort();
+  }, []), i = x(
+    async (d) => {
+      h();
+      const u = ++o.current, S = new AbortController();
+      f.current = S, s("loading"), c(null);
+      try {
+        const b = await r({
+          searchQuery: d,
+          signal: S.signal
+        });
+        if (u !== o.current) return;
+        n(b.options), s("success");
+      } catch (b) {
+        if (b instanceof Error && b.name === "AbortError" || u !== o.current) return;
+        c(b instanceof Error ? b.message : "Неизвестная ошибка"), s("error");
+      }
+    },
+    [r, h]
+  );
+  return A(() => () => h(), [h]), {
+    options: t,
+    loadingState: a,
+    error: l,
+    loadData: i,
+    cancelRequests: h
+  };
+}, ze = ({
+  options: r,
+  loadingState: t,
+  error: n,
+  isSelected: a,
+  searchQuery: s,
+  loadMode: l,
+  minInputLength: c,
+  onSelect: f,
+  renderOption: o,
+  loadingText: h,
+  errorText: i,
+  inputHintText: d,
+  emptyText: u
+}) => {
+  const S = M(() => r.map((v, g) => ({
+    option: v,
+    index: g,
+    isSelected: a?.(v) ?? !1,
+    isDisabled: v.disabled ?? !1
+  })), [r, a]), b = x(
+    ({
+      option: v,
+      isSelected: g,
+      isDisabled: p,
+      index: m
+    }) => {
+      if (o) {
+        const y = o({
+          option: v,
+          type: "list",
+          isSelected: g,
+          isDisabled: p,
+          searchQuery: s,
+          index: m
+        });
+        if (y !== void 0)
+          return y;
+      }
+      return /* @__PURE__ */ D(q, { children: [
+        v.label,
+        g && /* @__PURE__ */ e(j, { icon: ae, className: "ml-auto" })
+      ] });
+    },
+    [o, s]
+  );
+  return t === "error" ? /* @__PURE__ */ e(Ie, { className: "py-6", children: n || i }) : t === "loading" ? /* @__PURE__ */ e(se, { className: "py-6", children: h }) : l === "input" && s.length < c ? /* @__PURE__ */ e(Le, { className: "py-6", children: d }) : r.length === 0 && t === "success" ? /* @__PURE__ */ e(xe, { className: "py-6", children: u }) : /* @__PURE__ */ e(q, { children: S.map(({ option: v, index: g, isSelected: p, isDisabled: m }) => /* @__PURE__ */ e(
+    re,
+    {
+      value: v.label,
+      onSelect: m ? void 0 : f,
+      disabled: m,
+      children: b({
+        option: v,
+        isSelected: p,
+        isDisabled: m,
+        index: g
+      })
+    },
+    v.value
+  )) });
+}, ie = (r) => {
+  const {
+    loadOptions: t,
+    loadMode: n = "auto",
+    minInputLength: a = 3,
+    debounceMs: s = 300,
+    searchPlaceholder: l = "Найти",
+    loadingText: c = "Загружаем...",
+    errorText: f = "Ошибка загрузки",
+    inputHintText: o = "Введите текст для поиска",
+    emptyText: h = "Результатов не найдено",
+    renderOption: i,
+    onSelect: d,
+    isSelected: u,
+    hideSearch: S
+  } = r, [b, v] = w(""), g = Oe(b, s), { options: p, loadingState: m, error: y, loadData: I } = ke({
+    loadOptions: t
+  }), R = M(() => n === "auto" ? !0 : n === "input" ? g.length >= a : !1, [n, g, a]);
+  A(() => {
+    R && I(g);
+  }, [R, g, I]);
+  const L = x(
+    (V) => {
+      d(p.find((P) => P.label === V) || null);
+    },
+    [d, p]
+  );
+  return /* @__PURE__ */ D(te, { shouldFilter: !1, children: [
+    !S && /* @__PURE__ */ e(G, { placeholder: l, onValueChange: v }),
+    /* @__PURE__ */ e(ne, { className: "p-1", children: /* @__PURE__ */ e(
+      ze,
+      {
+        options: p,
+        loadingState: m,
+        error: y,
+        isSelected: u,
+        searchQuery: g,
+        loadMode: n,
+        minInputLength: a,
+        onSelect: L,
+        renderOption: i,
+        loadingText: c,
+        errorText: f,
+        inputHintText: o,
+        emptyText: h
+      }
+    ) }, `list-${g}`)
+  ] });
+}, ar = (r) => {
+  const {
+    renderOption: t,
+    placeholder: n = "Выберите значение",
+    value: a,
+    defaultValue: s,
+    disabled: l,
+    invalid: c,
+    onChange: f,
+    startIcon: o,
+    onClear: h,
+    ...i
+  } = r, [d, u] = w(!1), [S, b] = K({
+    value: a,
+    defaultValue: s,
+    onChange: f
+  }), v = M(() => {
+    if (S) {
+      if (t) {
+        const m = t({ option: S, type: "trigger" });
+        if (m !== void 0)
+          return m;
+      }
+      return /* @__PURE__ */ e(le, { children: S.label });
+    }
+  }, [S, t]), g = x(
+    (m) => {
+      m && b(m), u(!1);
+    },
+    [b, u]
+  ), p = x(
+    (m) => S?.value === m.value,
+    [S]
+  );
+  return /* @__PURE__ */ D(_, { ...i, open: d, onOpenChange: u, children: [
+    /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(
+      k,
+      {
+        placeholder: n,
+        disabled: l,
+        invalid: c,
+        open: d,
+        startIcon: o,
+        onClear: v ? h : void 0,
+        children: v
+      }
+    ) }),
+    /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(ie, { ...r, onSelect: g, isSelected: p }) })
+  ] });
+}, Be = (r) => {
+  const {
+    className: t,
+    placeholder: n = "Выберите значение",
+    value: a,
+    defaultValue: s,
+    onChange: l,
+    disabled: c,
+    invalid: f,
+    keepOpenOnSelect: o = !0,
+    onClear: h,
+    onLabelClick: i,
+    renderOption: d,
+    startIcon: u,
+    portalContainer: S,
+    ...b
+  } = r, [v, g] = w(!1), [p, m] = K({
+    value: a,
+    defaultValue: s,
+    onChange: l
+  }), y = x(
+    (C) => {
+      if (C) {
+        const T = p?.find((N) => N.value === C.value);
+        m(T ? (N) => N?.filter((E) => E.value !== C.value) || [] : (N) => [...N || [], C]);
+      }
+      o || g(!1);
+    },
+    [p, o, m, g]
+  ), I = x(
+    (C) => {
+      p?.find((N) => N.value === C.value) && m((N) => N?.filter((E) => E.value !== C.value) || []);
+    },
+    [p, m]
+  ), R = x(
+    (C) => p?.some((T) => T.value === C.value) ?? !1,
+    [p]
+  ), { handleKeyDown: L, isFocused: V } = we({
+    items: p || [],
+    onEnter: i,
+    onDelete: I
+  }), P = M(() => {
+    if (!(!p || p.length === 0))
+      return p.map((C, T) => {
+        if (d) {
+          const N = d({
+            option: C,
+            type: "trigger",
+            onClose: () => {
+              I(C);
+            }
+          });
+          if (N !== void 0)
+            return N;
+        }
+        return /* @__PURE__ */ e(
+          fe,
+          {
+            onLabelClick: (N) => {
+              N.preventDefault(), i?.(C);
+            },
+            onClose: (N) => {
+              N.preventDefault(), I(C);
+            },
+            isFocused: V(T),
+            children: C.label
+          },
+          C.value
+        );
+      });
+  }, [p, d, I, i, V]);
+  return /* @__PURE__ */ e("div", { className: t, children: /* @__PURE__ */ D(_, { open: v, onOpenChange: g, ...b, children: [
+    /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(
+      k,
+      {
+        onKeyDown: L,
+        disabled: c,
+        open: v,
+        placeholder: n,
+        invalid: f,
+        startIcon: u,
+        onClear: h,
+        className: "h-auto lg:h-auto",
+        children: P && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5 pl-1.5 lg:gap-1", children: P })
+      }
+    ) }),
+    /* @__PURE__ */ e(z, { portalContainer: S, children: /* @__PURE__ */ e(ie, { ...r, onSelect: y, isSelected: R }) })
+  ] }) });
+};
+Be.displayName = "MultiSelect";
+export {
+  ar as AsyncSearchSelect,
+  ze as AsyncSearchSelectContent,
+  Qe as LazySearchSelect,
+  ce as LoadMoreTrigger,
+  Be as MultiSelect,
+  oe as SearchSelect,
+  z as SearchSelectContent,
+  G as SearchSelectInput,
+  We as SearchSelectSeparator,
+  fe as SearchSelectTag,
+  k as SearchSelectTrigger,
+  Ae as defaultFuzzyFilter,
+  ke as useAsyncDataLoader,
+  Te as useSearchSelect
+};
+//# sourceMappingURL=search-select.js.map