mimir-ui-kit 1.43.9 → 1.43.11

package/dist/components/SelectSearch/SelectSearch.js

@@ -1,157 +1,173 @@
-import { jsx as s, jsxs as l, Fragment as ee } from "react/jsx-runtime";
-import { u as Se } from "../../index-D5H8gPPn.js";
+import { jsx as i, jsxs as c, Fragment as z } from "react/jsx-runtime";
+import { u as Oe } 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) => {
+import { forwardRef as Le, useRef as De, useState as E, useMemo as q, useEffect as se, useCallback as Ve } from "react";
+import { ESelectSearchSize as l, ELoadingIndicatorPlacement as x } from "./constants.js";
+import { prepareGroupedItems as ze, getDropdownArrowIcon as Ee } from "./utils.js";
+import { Icon as P } from "../../icons/Icon.js";
+import { Button as Be } from "../Button/Button.js";
+import { I as ae } from "../../Input-CGZoshMl.js";
+import { EInputVariant as Te } from "../Input/constants.js";
+import { Loader as re } from "../Loader/Loader.js";
+import { H as Ae, U as ce, G as le, W as de, K as Ge } from "../../combobox-fIVOzEhl.js";
+import '../../assets/SelectSearch.css';const Me = "_disabled_coh7i_6", qe = "_container_coh7i_13", Pe = "_full_coh7i_26", je = "_button_coh7i_38", Fe = "_options_coh7i_52", He = "_top_coh7i_63", $e = "_bottom_coh7i_67", Ke = "_s_coh7i_2", Ue = "_m_coh7i_109", We = "_l_coh7i_123", Qe = "_loader_coh7i_162", Ye = "_option_coh7i_52", Je = "_clear_coh7i_202", e = {
+  "select-search": "_select-search_coh7i_2",
+  disabled: Me,
+  container: qe,
+  "container-open": "_container-open_coh7i_22",
+  full: Pe,
+  "selected-icon": "_selected-icon_coh7i_30",
+  "selector-icon-open": "_selector-icon-open_coh7i_34",
+  button: je,
+  "selector-icon": "_selector-icon_coh7i_34",
+  options: Fe,
+  top: He,
+  bottom: $e,
+  "no-options": "_no-options_coh7i_71",
+  s: Ke,
+  m: Ue,
+  l: We,
+  "select-search-input": "_select-search-input_coh7i_137",
+  "select-search-input-disabled": "_select-search-input-disabled_coh7i_140",
+  "group-header": "_group-header_coh7i_147",
+  "sticky-active": "_sticky-active_coh7i_158",
+  loader: Qe,
+  "input-container": "_input-container_coh7i_167",
+  option: Ye,
+  "option-active": "_option-active_coh7i_182",
+  "option-inner": "_option-inner_coh7i_185",
+  "right-slot": "_right-slot_coh7i_192",
+  "required-mark": "_required-mark_coh7i_197",
+  clear: Je,
+  "icon-button": "_icon-button_coh7i_211"
+}, Re = Le(
+  (ue, pe) => {
     const {
-      placeholder: M,
-      size: o = d.L,
-      value: c,
+      placeholder: j,
+      size: n = l.L,
+      value: d,
       onChange: r,
-      full: de,
+      full: he,
       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 = "Ничего не найдено",
+      classNameOption: F,
+      classNameOptionInner: H,
+      displayValue: I = "name",
+      filterOnSearch: $ = !0,
+      onSearch: S,
+      variant: K = Te.DefaultGray,
+      menuPlacement: k = "bottom",
+      disabled: u = !1,
+      searchProps: U,
+      withClearButton: B = !1,
+      disableInput: m = !1,
+      autocomplete: W = "on",
+      immediate: _e = !1,
+      noOptionsText: fe = "Нет данных",
+      noMatchText: ge = "Ничего не найдено",
       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(() => {
+      loading: Q,
+      loadingIndicatorPlacement: w = x.Dropdown,
+      groupBy: h,
+      getGroupTitle: Y = (t) => t,
+      optionLayout: ve = "name-bottom"
+    } = ue, A = (t) => {
+      if (!t) return "";
+      const o = t[I];
+      return typeof o == "string" ? o : String(o || "");
+    }, be = (t) => {
+      const o = t[I];
+      return typeof o == "string" ? o : String(o || "");
+    }, G = A(d), C = De(null), [_, v] = E(G), [p, b] = E(d), [ye, J] = E(!1), [M, Ne] = E(null), R = Q !== void 0 ? Q : ye, y = q(() => {
+      if (!$)
+        return g;
+      const t = String(_ || "").trim().toLowerCase();
+      return t ? g.filter((o) => be(o).toLowerCase().includes(t)) : g;
+    }, [_, g, $, I]), N = q(() => h ? ze(
+      y,
+      h,
+      Y || ((t) => t)
+    ) : y, [y, h, Y]), O = q(() => {
       const t = [];
-      return y.forEach((n, i) => {
-        n.isGroupHeader && t.push(i);
+      return N.forEach((o, s) => {
+        o.isGroupHeader && t.push(s);
       }), t;
-    }, [y]), f = Se({
-      count: y.length,
-      getScrollElement: () => w.current,
-      estimateSize: () => o === d.L ? 65 : 49,
+    }, [N]), f = Oe({
+      count: N.length,
+      getScrollElement: () => C.current,
+      estimateSize: () => n === l.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)
+    se(() => {
+      const t = C.current;
+      if (!t || !h) return;
+      const o = () => {
+        var oe, ne;
+        const s = t.scrollTop;
+        let L = null;
+        for (let D = 0; D < O.length; D++) {
+          const ie = O[D];
+          if ((((oe = f.getVirtualItems().find((V) => V.index === ie)) == null ? void 0 : oe.start) || 0) <= s) {
+            L = ie;
+            const V = O[D + 1];
+            if (V !== void 0 && (((ne = f.getVirtualItems().find((Ce) => Ce.index === V)) == null ? void 0 : ne.start) || 0) <= s)
               continue;
           } else
             break;
         }
-        ge(C);
+        Ne(L);
       };
-      return t.addEventListener("scroll", n), () => t.removeEventListener("scroll", n);
-    }, [f, z, p, w.current]);
-    const Y = async () => {
+      return t.addEventListener("scroll", o), () => t.removeEventListener("scroll", o);
+    }, [f, O, h, C.current]);
+    const X = async () => {
       if (T)
         try {
-          U(!0), await T();
+          J(!0), await T();
         } finally {
-          U(!1);
+          J(!1);
         }
-    }, ve = (t) => {
-      t ? (v(t.name), b(t), r == null || r(t)) : (v(""), b(null), r == null || r({ id: "", name: "" }));
-    }, J = ze(
+    }, xe = (t) => {
+      if (t) {
+        const o = A(t);
+        v(o), b(t), r == null || r(t);
+      } else
+        v(""), b(null), r == null || r({ id: "", name: "" });
+    }, Z = Ve(
       (t) => {
-        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: "" }));
+        if (m) return;
+        const o = t.target.value;
+        v(o), S == null || S(o), p && o !== A(p) && b(null), !o && d && (r == null || r({ id: "", name: "" }));
       },
-      [_, r, I, c, u]
-    ), be = () => {
+      [m, r, S, d, p, I]
+    ), Ie = () => {
       v(""), b(null), r == null || r({ id: "", name: "" });
-    }, Q = async (t) => {
-      _ && t.target.blur(), T && await Y();
+    }, ee = async (t) => {
+      m && t.target.blur(), T && await X();
     };
-    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" }),
+    se(() => {
+      const t = !d || typeof d == "object" && !Object.keys(d).length;
+      v(t ? "" : G), b(t ? null : d);
+    }, [d, G]);
+    const Se = () => R && (w === x.Dropdown || w === x.Both) ? /* @__PURE__ */ c("div", { className: e.loader, children: [
+      /* @__PURE__ */ i(re, { size: "s" }),
       "Загрузка..."
-    ] }) : he, ye = (t) => {
+    ] }) : fe, ke = (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,
+          addonContent: /* @__PURE__ */ c(z, { children: [
+            R && (w === x.Input || w === x.Both) && /* @__PURE__ */ i(re, { size: "s" }),
+            /* @__PURE__ */ i(
+              ce,
               {
                 className: a(e.button, {
-                  [e.disabled]: m
+                  [e.disabled]: u
                 }),
-                disabled: m,
-                children: /* @__PURE__ */ s(
-                  G,
+                disabled: u,
+                children: /* @__PURE__ */ i(
+                  P,
                   {
-                    iconName: o == d.M || o == d.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                    iconName: n == l.M || n == l.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
                     className: a(e["selector-icon"], {
                       [e["selector-icon-open"]]: t
                     })
@@ -161,18 +177,27 @@ import '../../assets/SelectSearch.css';const Be = "_disabled_1rthm_6", Ve = "_co
             )
           ] })
         };
-    }, xe = (t) => g.length ? N.length ? p ? /* @__PURE__ */ l(
+    }, te = (t) => {
+      const o = t.name, s = t.bottom && /* @__PURE__ */ i("div", { children: t.bottom });
+      return ve === "bottom-name" ? /* @__PURE__ */ c(z, { children: [
+        s,
+        o
+      ] }) : /* @__PURE__ */ c(z, { children: [
+        o,
+        s
+      ] });
+    }, we = (t) => g.length ? y.length ? h ? /* @__PURE__ */ c(
       "div",
       {
-        ref: w,
+        ref: C,
         "data-testid": "select-search-options",
-        className: a(e.options, e[o], e[S]),
+        className: a(e.options, e[n], e[k]),
         style: {
-          height: o === d.M || o === d.S ? "240px" : "320px",
+          height: n === l.M || n === l.S ? "240px" : "320px",
           overflow: "auto"
         },
         children: [
-          V !== null && /* @__PURE__ */ s(
+          M !== null && /* @__PURE__ */ i(
             "div",
             {
               className: e["group-header"],
@@ -181,245 +206,257 @@ import '../../assets/SelectSearch.css';const Be = "_disabled_1rthm_6", Ve = "_co
                 top: 0,
                 zIndex: 3
               },
-              children: y[V].name
+              children: N[M].name
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ i(
             "div",
             {
               style: {
                 height: `${f.getTotalSize()}px`,
                 width: "100%"
               },
-              children: f.getVirtualItems().map((n) => {
-                const i = y[n.index];
-                return /* @__PURE__ */ s(
+              children: f.getVirtualItems().map((o) => {
+                const s = N[o.index];
+                return /* @__PURE__ */ i(
                   "div",
                   {
-                    "data-index": n.index,
+                    "data-index": o.index,
                     ref: f.measureElement,
                     style: {
                       position: "absolute",
                       top: 0,
                       left: 0,
                       width: "100%",
-                      transform: `translateY(${n.start}px)`
+                      transform: `translateY(${o.start}px)`
                     },
-                    children: i.isGroupHeader ? /* @__PURE__ */ s(
+                    children: s.isGroupHeader ? /* @__PURE__ */ i(
                       "div",
                       {
                         className: e["group-header"],
                         style: {
-                          visibility: V === n.index ? "hidden" : "visible"
+                          visibility: M === o.index ? "hidden" : "visible"
                         },
-                        children: i.name
+                        children: s.name
                       }
-                    ) : /* @__PURE__ */ l(
-                      ae,
+                    ) : /* @__PURE__ */ c(
+                      de,
                       {
-                        value: i,
-                        className: ({ focus: C }) => a(
+                        value: s,
+                        className: ({ focus: L }) => a(
                           e.option,
-                          q,
-                          o && e[o],
+                          F,
+                          n && e[n],
                           {
-                            [e["option-active"]]: C
+                            [e["option-active"]]: L
                           }
                         ),
-                        "data-testid": `select-search-option-${i.id}`,
+                        "data-testid": `select-search-option-${s.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,
+                          /* @__PURE__ */ i(
+                            "div",
                             {
-                              iconName: o === d.M || o === d.S ? "Done16px" : "Done24px",
+                              className: a(
+                                e["option-inner"],
+                                H
+                              ),
+                              children: te(s)
+                            }
+                          ),
+                          p && p.id === s.id && /* @__PURE__ */ i(
+                            P,
+                            {
+                              iconName: n === l.M || n === l.S ? "Done16px" : "Done24px",
                               className: e["selected-icon"]
                             }
                           )
                         ]
                       },
-                      i.id
+                      s.id
                     )
                   },
-                  n.key
+                  o.key
                 );
               })
             }
           )
         ]
       }
-    ) : /* @__PURE__ */ s(
-      Te,
+    ) : /* @__PURE__ */ i(
+      Ge,
       {
-        className: a(e.options, e[o], e[S]),
+        className: a(e.options, e[n], e[k]),
         "data-testid": "select-search-options",
         style: { width: "100%" },
         static: !0,
-        children: ({ option: n }) => /* @__PURE__ */ l(
-          ae,
+        children: ({ option: o }) => /* @__PURE__ */ c(
+          de,
           {
-            value: n,
-            className: ({ focus: i }) => a(
+            value: o,
+            className: ({ focus: s }) => a(
               e.option,
-              q,
+              F,
               {
-                [e["option-active"]]: i
+                [e["option-active"]]: s
               },
-              o && e[o]
+              n && e[n]
             ),
             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,
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  className: a(
+                    e["option-inner"],
+                    H
+                  ),
+                  children: te(o)
+                }
+              ),
+              p && p.id === o.id && /* @__PURE__ */ i(
+                P,
                 {
-                  iconName: o === d.M || o === d.S ? "Done16px" : "Done24px",
+                  iconName: n === l.M || n === l.S ? "Done16px" : "Done24px",
                   className: e["selected-icon"]
                 }
               )
             ]
           },
-          n.id
+          o.id
         )
       }
-    ) : /* @__PURE__ */ s(
+    ) : /* @__PURE__ */ i(
       "div",
       {
         className: a(
           e.options,
-          e[o],
+          e[n],
           e["no-options"],
-          e[S]
+          e[k]
         ),
         "data-headlessui-state": t ? "open" : "closed",
-        children: _e
+        children: ge
       }
-    ) : /* @__PURE__ */ s(
+    ) : /* @__PURE__ */ i(
       "div",
       {
         className: a(
           e.options,
-          e[o],
+          e[n],
           e["no-options"],
-          e[S]
+          e[k]
         ),
         "data-headlessui-state": t ? "open" : "closed",
-        children: Ne()
+        children: Se()
       }
     );
-    return /* @__PURE__ */ s(
-      Ee,
+    return /* @__PURE__ */ i(
+      Ae,
       {
         as: "div",
-        value: u,
+        value: p,
         className: a(e["select-search"], {
-          [e.full]: de,
-          [e.disabled]: m
+          [e.full]: he,
+          [e.disabled]: u
         }),
-        onChange: ve,
-        ref: le,
-        disabled: m,
-        virtual: p ? void 0 : { options: N },
-        immediate: pe,
-        children: ({ open: t }) => /* @__PURE__ */ l(ee, { children: [
-          /* @__PURE__ */ l(
+        onChange: xe,
+        ref: pe,
+        disabled: u,
+        virtual: h ? void 0 : { options: y },
+        immediate: _e,
+        children: ({ open: t }) => /* @__PURE__ */ c(z, { children: [
+          /* @__PURE__ */ c(
             "div",
             {
-              className: a(e.container, e[o], {
+              className: a(e.container, e[n], {
                 [e["container-open"]]: t
               }),
               children: [
-                _ && /* @__PURE__ */ l("div", { className: e["input-container"], children: [
-                  /* @__PURE__ */ s(
-                    ie,
+                m && /* @__PURE__ */ c("div", { className: e["input-container"], children: [
+                  /* @__PURE__ */ i(
+                    ce,
                     {
-                      disabled: m,
+                      disabled: u,
                       style: { width: "100%" },
-                      onClick: Y,
-                      children: /* @__PURE__ */ s(
-                        re,
+                      onClick: X,
+                      children: /* @__PURE__ */ i(
+                        le,
                         {
-                          as: oe,
-                          label: M,
-                          size: ne(o),
+                          as: ae,
+                          label: j,
+                          size: n,
                           className: a(e["select-search-input"], {
-                            [e["select-search-input-disabled"]]: _ && E
+                            [e["select-search-input-disabled"]]: m && B
                           }),
-                          onChange: J,
-                          value: h,
-                          disabled: m,
-                          variant: j,
+                          onChange: Z,
+                          value: _,
+                          disabled: u,
+                          variant: K,
                           rightSlotClassName: e["right-slot"],
                           requiredMarkClassName: e["required-mark"],
                           "data-testid": "select-search-input",
-                          onFocus: Q,
+                          onFocus: ee,
                           rightAddon: {
                             addonType: "icon",
-                            addonContent: Le(t, o)
+                            addonContent: Ee(t, n)
                           },
-                          autocomplete: H,
-                          ...F
+                          autocomplete: W,
+                          ...U
                         }
                       )
                     }
                   ),
-                  E && h && /* @__PURE__ */ s(
-                    Oe,
+                  B && _ && /* @__PURE__ */ i(
+                    Be,
                     {
                       tabIndex: -1,
                       className: a(e.clear, {
-                        [e.disabled]: m
+                        [e.disabled]: u
                       }),
                       iconButtonClassName: e["icon-button"],
                       isIconButton: !0,
                       iconName: "Close16px",
                       size: "m-s",
                       clear: !0,
-                      disabled: m,
+                      disabled: u,
                       variant: "secondary-gray",
-                      onClick: (n) => {
-                        n.stopPropagation(), be();
+                      onClick: (o) => {
+                        o.stopPropagation(), Ie();
                       },
                       "data-testid": "clear-button"
                     }
                   )
                 ] }),
-                !_ && /* @__PURE__ */ s(
-                  re,
+                !m && /* @__PURE__ */ i(
+                  le,
                   {
-                    as: oe,
-                    label: M,
-                    size: ne(o),
+                    as: ae,
+                    label: j,
+                    size: n,
                     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),
+                    value: _,
+                    disabled: u,
+                    variant: K,
+                    withClearButton: B && !!_,
+                    onChange: Z,
+                    rightAddon: ke(t),
                     "data-testid": "select-search-input",
-                    onFocus: Q,
-                    autocomplete: H,
-                    ...F
+                    onFocus: ee,
+                    autocomplete: W,
+                    ...U
                   }
                 )
               ]
             }
           ),
-          t && xe(t)
+          t && we(t)
         ] })
       }
     );
   }
 );
-We.displayName = "SelectSearch";
+Re.displayName = "SelectSearch";
 export {
-  We as SelectSearch
+  Re as SelectSearch
 };