mimir-ui-kit 1.42.2 → 1.43.0

package/dist/components/SelectSearch/SelectSearch.js

@@ -1,264 +1,425 @@
-import { jsx as n, jsxs as h, Fragment as D } from "react/jsx-runtime";
-import { c as i } from "../../index-DIxK0V-G.js";
-import { forwardRef as U, useState as q, useMemo as W, useCallback as R, useEffect as $ } from "react";
-import { ESelectSearchSize as b } from "./constants.js";
-import { mapSizeToInputSize as A, getDropdownArrowIcon as J } from "./utils.js";
-import { Icon as O } from "../../icons/Icon.js";
-import { Button as Q } from "../Button/Button.js";
-import { I as B } from "../../Input-BU_6U1CW.js";
-import { EInputVariant as X } from "../Input/constants.js";
-import { H as Y, U as M, G as j, K as Z, W as ee } from "../../combobox-Dv6-ANkb.js";
-import '../../assets/SelectSearch.css';const te = "_disabled_lhab4_6", oe = "_container_lhab4_13", ae = "_full_lhab4_26", se = "_button_lhab4_38", ne = "_options_lhab4_52", le = "_top_lhab4_63", ie = "_bottom_lhab4_69", re = "_s_lhab4_2", ce = "_m_lhab4_110", de = "_l_lhab4_123", pe = "_option_lhab4_52", ue = "_clear_lhab4_175", e = {
-  "select-search": "_select-search_lhab4_2",
-  disabled: te,
-  container: oe,
-  "container-open": "_container-open_lhab4_22",
-  full: ae,
-  "selected-icon": "_selected-icon_lhab4_30",
-  "selector-icon-open": "_selector-icon-open_lhab4_34",
-  button: se,
-  "selector-icon": "_selector-icon_lhab4_34",
-  options: ne,
-  top: le,
-  bottom: ie,
-  "no-options": "_no-options_lhab4_75",
-  s: re,
-  m: ce,
-  l: de,
-  "select-input": "_select-input_lhab4_136",
-  "select-input-disabled": "_select-input-disabled_lhab4_139",
-  option: pe,
-  "option-active": "_option-active_lhab4_155",
-  "option-inner": "_option-inner_lhab4_158",
-  "right-slot": "_right-slot_lhab4_165",
-  "required-mark": "_required-mark_lhab4_170",
-  clear: ue,
-  "icon-button": "_icon-button_lhab4_184"
-}, Ce = U(
-  (E, L) => {
+import { jsx as s, jsxs as l, Fragment as ee } from "react/jsx-runtime";
+import { u as Se } from "../../index-D5H8gPPn.js";
+import { c as a } from "../../index-DIxK0V-G.js";
+import { forwardRef as ke, useRef as we, useState as D, useMemo as A, useEffect as te, useCallback as ze } from "react";
+import { ESelectSearchSize as d, ELoadingIndicatorPlacement as x } from "./constants.js";
+import { prepareGroupedItems as Ce, mapSizeToInputSize as ne, getDropdownArrowIcon as Le } from "./utils.js";
+import { Icon as G } from "../../icons/Icon.js";
+import { Button as Oe } from "../Button/Button.js";
+import { I as oe } from "../../Input-BU_6U1CW.js";
+import { EInputVariant as De } from "../Input/constants.js";
+import { Loader as se } from "../Loader/Loader.js";
+import { H as Ee, U as ie, G as re, W as ae, K as Te } from "../../combobox-fIVOzEhl.js";
+import '../../assets/SelectSearch.css';const Be = "_disabled_1rthm_6", Ve = "_container_1rthm_13", Ae = "_full_1rthm_26", Ge = "_button_1rthm_38", Me = "_options_1rthm_52", qe = "_top_1rthm_63", Pe = "_bottom_1rthm_69", je = "_s_1rthm_2", Fe = "_m_1rthm_110", He = "_l_1rthm_123", $e = "_loader_1rthm_161", Ke = "_option_1rthm_52", Ue = "_clear_1rthm_200", e = {
+  "select-search": "_select-search_1rthm_2",
+  disabled: Be,
+  container: Ve,
+  "container-open": "_container-open_1rthm_22",
+  full: Ae,
+  "selected-icon": "_selected-icon_1rthm_30",
+  "selector-icon-open": "_selector-icon-open_1rthm_34",
+  button: Ge,
+  "selector-icon": "_selector-icon_1rthm_34",
+  options: Me,
+  top: qe,
+  bottom: Pe,
+  "no-options": "_no-options_1rthm_75",
+  s: je,
+  m: Fe,
+  l: He,
+  "select-search-input": "_select-search-input_1rthm_136",
+  "select-search-input-disabled": "_select-search-input-disabled_1rthm_139",
+  "group-header": "_group-header_1rthm_146",
+  "sticky-active": "_sticky-active_1rthm_157",
+  loader: $e,
+  "input-container": "_input-container_1rthm_166",
+  option: Ke,
+  "option-active": "_option-active_1rthm_180",
+  "option-inner": "_option-inner_1rthm_183",
+  "right-slot": "_right-slot_1rthm_190",
+  "required-mark": "_required-mark_1rthm_195",
+  clear: Ue,
+  "icon-button": "_icon-button_1rthm_209"
+}, We = ke(
+  (ce, le) => {
     const {
-      placeholder: w,
-      size: a = b.L,
-      value: l,
-      onChange: s,
-      full: V,
-      showArrow: S = !0,
-      items: u = [],
-      classNameOption: F,
-      displayValue: G = "name",
-      filterOnSearch: C = !0,
-      onSearch: f,
-      variant: I = X.DefaultGray,
-      menuPlacement: N = "bottom",
-      disabled: r = !1,
-      searchProps: y,
-      withClearButton: v = !1,
-      disableInput: c = !1,
-      autocomplete: k = "on",
-      immediate: P = !1
-    } = E, g = String((l == null ? void 0 : l[G]) || ""), [d, _] = q(g), [p, m] = q(l), x = W(() => C && d.trim().toLowerCase() ? u.filter(
-      (t) => t.name.toLowerCase().includes(d.toLowerCase())
-    ) : u, [d, u, C]), T = (t) => {
-      t ? (_(t.name), m(t), s == null || s(t)) : (_(""), m(null), s == null || s({ id: "", name: "" }));
-    }, z = R(
+      placeholder: M,
+      size: o = d.L,
+      value: c,
+      onChange: r,
+      full: de,
+      showArrow: me = !0,
+      items: g = [],
+      classNameOption: q,
+      displayValue: ue = "name",
+      filterOnSearch: P = !0,
+      onSearch: I,
+      variant: j = De.DefaultGray,
+      menuPlacement: S = "bottom",
+      disabled: m = !1,
+      searchProps: F,
+      withClearButton: E = !1,
+      disableInput: _ = !1,
+      autocomplete: H = "on",
+      immediate: pe = !1,
+      noOptionsText: he = "Нет данных",
+      noMatchText: _e = "Ничего не найдено",
+      loadOnOpen: T,
+      loading: $,
+      loadingIndicatorPlacement: k = x.Dropdown,
+      groupBy: p,
+      getGroupTitle: K = (t) => t
+    } = ce, B = String((c == null ? void 0 : c[ue]) || ""), w = we(null), [h, v] = D(B), [u, b] = D(c), [fe, U] = D(!1), [V, ge] = D(null), W = $ !== void 0 ? $ : fe, N = A(() => P && h.trim().toLowerCase() ? g.filter(
+      (t) => t.name.toLowerCase().includes(h.toLowerCase())
+    ) : g, [h, g, P]), y = A(() => p ? Ce(
+      N,
+      p,
+      K || ((t) => t)
+    ) : N, [N, p, K]), z = A(() => {
+      const t = [];
+      return y.forEach((n, i) => {
+        n.isGroupHeader && t.push(i);
+      }), t;
+    }, [y]), f = Se({
+      count: y.length,
+      getScrollElement: () => w.current,
+      estimateSize: () => o === d.L ? 65 : 49,
+      overscan: 10
+    });
+    te(() => {
+      const t = w.current;
+      if (!t || !p) return;
+      const n = () => {
+        var R, X;
+        const i = t.scrollTop;
+        let C = null;
+        for (let L = 0; L < z.length; L++) {
+          const Z = z[L];
+          if ((((R = f.getVirtualItems().find((O) => O.index === Z)) == null ? void 0 : R.start) || 0) <= i) {
+            C = Z;
+            const O = z[L + 1];
+            if (O !== void 0 && (((X = f.getVirtualItems().find((Ie) => Ie.index === O)) == null ? void 0 : X.start) || 0) <= i)
+              continue;
+          } else
+            break;
+        }
+        ge(C);
+      };
+      return t.addEventListener("scroll", n), () => t.removeEventListener("scroll", n);
+    }, [f, z, p, w.current]);
+    const Y = async () => {
+      if (T)
+        try {
+          U(!0), await T();
+        } finally {
+          U(!1);
+        }
+    }, ve = (t) => {
+      t ? (v(t.name), b(t), r == null || r(t)) : (v(""), b(null), r == null || r({ id: "", name: "" }));
+    }, J = ze(
       (t) => {
-        if (c) return;
-        const o = t.target.value;
-        _(o), f == null || f(o), p && o !== p.name && m(null), !o && l && (s == null || s({ id: "", name: "" }));
+        if (_) return;
+        const n = t.target.value;
+        v(n), I == null || I(n), u && n !== u.name && b(null), !n && c && (r == null || r({ id: "", name: "" }));
       },
-      [c, s, f, l, p]
-    ), H = () => {
-      _(""), m(null), s == null || s({ id: "", name: "" });
+      [_, r, I, c, u]
+    ), be = () => {
+      v(""), b(null), r == null || r({ id: "", name: "" });
+    }, Q = async (t) => {
+      _ && t.target.blur(), T && await Y();
     };
-    return $(() => {
-      const t = !l || typeof l == "object" && !Object.keys(l).length;
-      _(t ? "" : g), m(t ? null : l);
-    }, [l, g]), /* @__PURE__ */ n(
-      Y,
+    te(() => {
+      const t = !c || typeof c == "object" && !Object.keys(c).length;
+      v(t ? "" : B), b(t ? null : c);
+    }, [c, B]);
+    const Ne = () => W && (k === x.Dropdown || k === x.Both) ? /* @__PURE__ */ l("div", { className: e.loader, children: [
+      /* @__PURE__ */ s(se, { size: "s" }),
+      "Загрузка..."
+    ] }) : he, ye = (t) => {
+      if (me)
+        return {
+          addonType: "react-node",
+          addonContent: /* @__PURE__ */ l(ee, { children: [
+            W && (k === x.Input || k === x.Both) && /* @__PURE__ */ s(se, { size: "s" }),
+            /* @__PURE__ */ s(
+              ie,
+              {
+                className: a(e.button, {
+                  [e.disabled]: m
+                }),
+                disabled: m,
+                children: /* @__PURE__ */ s(
+                  G,
+                  {
+                    iconName: o == d.M || o == d.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                    className: a(e["selector-icon"], {
+                      [e["selector-icon-open"]]: t
+                    })
+                  }
+                )
+              }
+            )
+          ] })
+        };
+    }, xe = (t) => g.length ? N.length ? p ? /* @__PURE__ */ l(
+      "div",
+      {
+        ref: w,
+        "data-testid": "select-search-options",
+        className: a(e.options, e[o], e[S]),
+        style: {
+          height: o === d.M || o === d.S ? "240px" : "320px",
+          overflow: "auto"
+        },
+        children: [
+          V !== null && /* @__PURE__ */ s(
+            "div",
+            {
+              className: e["group-header"],
+              style: {
+                position: "sticky",
+                top: 0,
+                zIndex: 3
+              },
+              children: y[V].name
+            }
+          ),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              style: {
+                height: `${f.getTotalSize()}px`,
+                width: "100%"
+              },
+              children: f.getVirtualItems().map((n) => {
+                const i = y[n.index];
+                return /* @__PURE__ */ s(
+                  "div",
+                  {
+                    "data-index": n.index,
+                    ref: f.measureElement,
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      transform: `translateY(${n.start}px)`
+                    },
+                    children: i.isGroupHeader ? /* @__PURE__ */ s(
+                      "div",
+                      {
+                        className: e["group-header"],
+                        style: {
+                          visibility: V === n.index ? "hidden" : "visible"
+                        },
+                        children: i.name
+                      }
+                    ) : /* @__PURE__ */ l(
+                      ae,
+                      {
+                        value: i,
+                        className: ({ focus: C }) => a(
+                          e.option,
+                          q,
+                          o && e[o],
+                          {
+                            [e["option-active"]]: C
+                          }
+                        ),
+                        "data-testid": `select-search-option-${i.id}`,
+                        children: [
+                          /* @__PURE__ */ l("div", { className: e["option-inner"], children: [
+                            i.name,
+                            i.bottom && /* @__PURE__ */ s("div", { children: i.bottom })
+                          ] }),
+                          u && u.id === i.id && /* @__PURE__ */ s(
+                            G,
+                            {
+                              iconName: o === d.M || o === d.S ? "Done16px" : "Done24px",
+                              className: e["selected-icon"]
+                            }
+                          )
+                        ]
+                      },
+                      i.id
+                    )
+                  },
+                  n.key
+                );
+              })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ s(
+      Te,
+      {
+        className: a(e.options, e[o], e[S]),
+        "data-testid": "select-search-options",
+        style: { width: "100%" },
+        static: !0,
+        children: ({ option: n }) => /* @__PURE__ */ l(
+          ae,
+          {
+            value: n,
+            className: ({ focus: i }) => a(
+              e.option,
+              q,
+              {
+                [e["option-active"]]: i
+              },
+              o && e[o]
+            ),
+            children: [
+              /* @__PURE__ */ l("div", { className: e["option-inner"], children: [
+                n.name,
+                n.bottom && /* @__PURE__ */ s("div", { children: n.bottom })
+              ] }),
+              u && u.id === n.id && /* @__PURE__ */ s(
+                G,
+                {
+                  iconName: o === d.M || o === d.S ? "Done16px" : "Done24px",
+                  className: e["selected-icon"]
+                }
+              )
+            ]
+          },
+          n.id
+        )
+      }
+    ) : /* @__PURE__ */ s(
+      "div",
+      {
+        className: a(
+          e.options,
+          e[o],
+          e["no-options"],
+          e[S]
+        ),
+        "data-headlessui-state": t ? "open" : "closed",
+        children: _e
+      }
+    ) : /* @__PURE__ */ s(
+      "div",
+      {
+        className: a(
+          e.options,
+          e[o],
+          e["no-options"],
+          e[S]
+        ),
+        "data-headlessui-state": t ? "open" : "closed",
+        children: Ne()
+      }
+    );
+    return /* @__PURE__ */ s(
+      Ee,
       {
         as: "div",
-        value: p,
-        className: i(e["select-search"], {
-          [e.full]: V,
-          [e.disabled]: r
+        value: u,
+        className: a(e["select-search"], {
+          [e.full]: de,
+          [e.disabled]: m
         }),
-        onChange: T,
-        ref: L,
-        disabled: r,
-        virtual: { options: x },
-        immediate: P,
-        children: ({ open: t }) => /* @__PURE__ */ h(D, { children: [
-          /* @__PURE__ */ h(
+        onChange: ve,
+        ref: le,
+        disabled: m,
+        virtual: p ? void 0 : { options: N },
+        immediate: pe,
+        children: ({ open: t }) => /* @__PURE__ */ l(ee, { children: [
+          /* @__PURE__ */ l(
             "div",
             {
-              className: i(e.container, e[a], {
+              className: a(e.container, e[o], {
                 [e["container-open"]]: t
               }),
               children: [
-                c && /* @__PURE__ */ h("div", { style: { position: "relative", width: "100%" }, children: [
-                  /* @__PURE__ */ n(M, { disabled: r, style: { width: "100%" }, children: /* @__PURE__ */ n(
-                    j,
+                _ && /* @__PURE__ */ l("div", { className: e["input-container"], children: [
+                  /* @__PURE__ */ s(
+                    ie,
                     {
-                      as: B,
-                      label: w,
-                      size: A(a),
-                      className: i(e["select-input"], {
-                        [e["select-input-disabled"]]: c && v
-                      }),
-                      onChange: z,
-                      value: d,
-                      disabled: r,
-                      variant: I,
-                      rightSlotClassName: e["right-slot"],
-                      requiredMarkClassName: e["required-mark"],
-                      "data-testid": "select-search-input",
-                      onFocus: (o) => {
-                        c && o.target.blur();
-                      },
-                      rightAddon: {
-                        addonType: "icon",
-                        addonContent: J(t, a)
-                      },
-                      autocomplete: k,
-                      ...y
+                      disabled: m,
+                      style: { width: "100%" },
+                      onClick: Y,
+                      children: /* @__PURE__ */ s(
+                        re,
+                        {
+                          as: oe,
+                          label: M,
+                          size: ne(o),
+                          className: a(e["select-search-input"], {
+                            [e["select-search-input-disabled"]]: _ && E
+                          }),
+                          onChange: J,
+                          value: h,
+                          disabled: m,
+                          variant: j,
+                          rightSlotClassName: e["right-slot"],
+                          requiredMarkClassName: e["required-mark"],
+                          "data-testid": "select-search-input",
+                          onFocus: Q,
+                          rightAddon: {
+                            addonType: "icon",
+                            addonContent: Le(t, o)
+                          },
+                          autocomplete: H,
+                          ...F
+                        }
+                      )
                     }
-                  ) }),
-                  v && d && /* @__PURE__ */ n(
-                    Q,
+                  ),
+                  E && h && /* @__PURE__ */ s(
+                    Oe,
                     {
                       tabIndex: -1,
-                      className: i(e.clear, {
-                        [e.disabled]: r
+                      className: a(e.clear, {
+                        [e.disabled]: m
                       }),
                       iconButtonClassName: e["icon-button"],
                       isIconButton: !0,
                       iconName: "Close16px",
                       size: "m-s",
                       clear: !0,
-                      disabled: r,
+                      disabled: m,
                       variant: "secondary-gray",
-                      onClick: (o) => {
-                        o.stopPropagation(), H();
+                      onClick: (n) => {
+                        n.stopPropagation(), be();
                       },
                       "data-testid": "clear-button"
                     }
                   )
                 ] }),
-                !c && /* @__PURE__ */ n(
-                  j,
+                !_ && /* @__PURE__ */ s(
+                  re,
                   {
-                    as: B,
-                    label: w,
-                    size: A(a),
-                    className: e["select-input"],
-                    onChange: z,
-                    value: d,
-                    disabled: r,
-                    variant: I,
-                    withClearButton: v,
+                    as: oe,
+                    label: M,
+                    size: ne(o),
+                    className: e["select-search-input"],
                     rightSlotClassName: e["right-slot"],
                     requiredMarkClassName: e["required-mark"],
+                    value: h,
+                    disabled: m,
+                    variant: j,
+                    withClearButton: E && !!h,
+                    onChange: J,
+                    rightAddon: ye(t),
                     "data-testid": "select-search-input",
-                    rightAddon: S ? {
-                      addonType: "react-node",
-                      addonContent: S && /* @__PURE__ */ n(
-                        M,
-                        {
-                          className: i(e.button, {
-                            [e.disabled]: r
-                          }),
-                          disabled: r,
-                          children: /* @__PURE__ */ n(
-                            O,
-                            {
-                              iconName: a == b.M || a == b.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
-                              className: i(e["selector-icon"], {
-                                [e["selector-icon-open"]]: t
-                              })
-                            }
-                          )
-                        }
-                      )
-                    } : void 0,
-                    onFocus: (o) => {
-                      c && o.target.blur();
-                    },
-                    autocomplete: k,
-                    ...y
+                    onFocus: Q,
+                    autocomplete: H,
+                    ...F
                   }
                 )
               ]
             }
           ),
-          t && /* @__PURE__ */ n(D, { children: u.length ? x.length ? /* @__PURE__ */ n(
-            Z,
-            {
-              "data-testid": "select-search-options",
-              className: i(
-                e.options,
-                e[a],
-                e[N]
-              ),
-              children: ({ option: o }) => /* @__PURE__ */ h(
-                ee,
-                {
-                  value: o,
-                  className: ({ focus: K }) => i(
-                    e.option,
-                    F,
-                    a && e[a],
-                    {
-                      [e["option-active"]]: K
-                    }
-                  ),
-                  "data-testid": `select-search-option-${o.id}`,
-                  children: [
-                    /* @__PURE__ */ h("div", { className: e["option-inner"], children: [
-                      o.name,
-                      o.bottom && /* @__PURE__ */ n("div", { children: o.bottom })
-                    ] }),
-                    p && p.id === o.id && /* @__PURE__ */ n(
-                      O,
-                      {
-                        iconName: a === b.M || a === b.S ? "Done16px" : "Done24px",
-                        className: e["selected-icon"]
-                      }
-                    )
-                  ]
-                },
-                o.id
-              )
-            }
-          ) : /* @__PURE__ */ n(
-            "div",
-            {
-              className: i(
-                e.options,
-                e[a],
-                e["no-options"],
-                e[N]
-              ),
-              "data-headlessui-state": t ? "open" : "closed",
-              children: "Ничего не найдено"
-            }
-          ) : /* @__PURE__ */ n(
-            "div",
-            {
-              className: i(
-                e.options,
-                e[a],
-                e["no-options"],
-                e[N]
-              ),
-              "data-headlessui-state": t ? "open" : "closed",
-              children: "Нет данных"
-            }
-          ) })
+          t && xe(t)
         ] })
       }
     );
   }
 );
+We.displayName = "SelectSearch";
 export {
-  Ce as SelectSearch
+  We as SelectSearch
 };

package/dist/components/SelectSearch/constants.d.ts

@@ -3,3 +3,9 @@ export declare enum ESelectSearchSize {
     M = "m",
     L = "l"
 }
+export declare enum ELoadingIndicatorPlacement {
+    Input = "input",
+    Dropdown = "dropdown",
+    Both = "both",
+    None = "none"
+}

package/dist/components/SelectSearch/constants.js

@@ -1,4 +1,5 @@
-var m = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r.L = "l", r))(m || {});
+var r = /* @__PURE__ */ ((p) => (p.S = "s", p.M = "m", p.L = "l", p))(r || {}), u = /* @__PURE__ */ ((p) => (p.Input = "input", p.Dropdown = "dropdown", p.Both = "both", p.None = "none", p))(u || {});
 export {
-  m as ESelectSearchSize
+  u as ELoadingIndicatorPlacement,
+  r as ESelectSearchSize
 };