mimir-ui-kit 1.38.18 → 1.38.20

package/dist/components/MultiSelectSearch/MultiSelectSearch.d.ts

@@ -22,4 +22,5 @@ export declare const MultiSelectSearch: import('react').ForwardRefExoticComponen
     autocomplete?: "on" | "off";
     id?: string;
     autoPlacement?: boolean;
+    onIsOpen?: (value: boolean) => void;
 } & import('react').RefAttributes<HTMLElement>>;

package/dist/components/MultiSelectSearch/MultiSelectSearch.js

@@ -1,228 +1,229 @@
-import { jsxs as M, jsx as n, Fragment as $ } from "react/jsx-runtime";
+import { jsxs as E, jsx as n, Fragment as Q } from "react/jsx-runtime";
 import { c as l } from "../../index-DIxK0V-G.js";
-import { forwardRef as Ie, useId as ge, useRef as Q, useState as b, useEffect as L, useMemo as Ne, useCallback as Se } from "react";
-import { EMultiSelectSearchSize as x } from "./constants.js";
-import { getInitialInputValue as X, shouldShowMenuOnTop as Ce, MULTISELECT_OPEN_EVENT as Y, mapSizeToInputSize as Z, getDropdownArrowIcon as Me, dispatchMultiselectOpen as E, joinSelectedItems as ee } from "./utils.js";
-import { Icon as Ee } from "../../icons/Icon.js";
-import { Button as Le } from "../Button/Button.js";
-import { CheckboxMimir as Te } from "../CheckboxMimir/CheckboxMimir.js";
-import { Chip as ke } from "../Chip/Chip.js";
-import { I as te } from "../../Input-BYrIS5GU.js";
-import { EInputVariant as ye } from "../Input/constants.js";
-import { H as Oe, U as oe, G as ne, K as ze, W as Ae } from "../../combobox-CVtJDVoZ.js";
-import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe = "_container_io0c8_9", De = "_full_io0c8_27", Pe = "_button_io0c8_39", qe = "_options_io0c8_53", Re = "_visible_io0c8_66", Be = "_top_io0c8_69", Fe = "_bottom_io0c8_74", je = "_m_io0c8_2", Ge = "_l_io0c8_116", Ue = "_focused_io0c8_134", We = "_option_io0c8_53", He = "_chip_io0c8_163", Je = "_clear_io0c8_188", t = {
+import { forwardRef as Ie, useId as Ne, useRef as X, useState as w, useEffect as T, useMemo as Se, useCallback as Ce } from "react";
+import { EMultiSelectSearchSize as D } from "./constants.js";
+import { getInitialInputValue as Y, shouldShowMenuOnTop as Me, MULTISELECT_OPEN_EVENT as Z, mapSizeToInputSize as ee, getDropdownArrowIcon as Ee, dispatchMultiselectOpen as L, joinSelectedItems as te } from "./utils.js";
+import { Icon as Le } from "../../icons/Icon.js";
+import { Button as Te } from "../Button/Button.js";
+import { CheckboxMimir as ke } from "../CheckboxMimir/CheckboxMimir.js";
+import { Chip as ye } from "../Chip/Chip.js";
+import { I as oe } from "../../Input-BYrIS5GU.js";
+import { EInputVariant as ze } from "../Input/constants.js";
+import { H as Ae, U as ne, G as ie, K as Oe, W as Ve } from "../../combobox-CVtJDVoZ.js";
+import '../../assets/MultiSelectSearch.css';const xe = "_disabled_io0c8_5", De = "_container_io0c8_9", Pe = "_full_io0c8_27", qe = "_button_io0c8_39", Re = "_options_io0c8_53", Be = "_visible_io0c8_66", Fe = "_top_io0c8_69", je = "_bottom_io0c8_74", Ge = "_m_io0c8_2", Ue = "_l_io0c8_116", We = "_focused_io0c8_134", He = "_option_io0c8_53", Je = "_chip_io0c8_163", Ke = "_clear_io0c8_188", t = {
   "multi-select-search": "_multi-select-search_io0c8_2",
-  disabled: Ve,
-  container: xe,
+  disabled: xe,
+  container: De,
   "container-open": "_container-open_io0c8_18",
   "input-container": "_input-container_io0c8_22",
-  full: De,
+  full: Pe,
   "selected-icon": "_selected-icon_io0c8_31",
   "selector-icon-open": "_selector-icon-open_io0c8_35",
-  button: Pe,
+  button: qe,
   "selector-icon": "_selector-icon_io0c8_35",
-  options: qe,
-  visible: Re,
-  top: Be,
-  bottom: Fe,
+  options: Re,
+  visible: Be,
+  top: Fe,
+  bottom: je,
   "no-options": "_no-options_io0c8_95",
-  m: je,
-  l: Ge,
+  m: Ge,
+  l: Ue,
   "multi-select-input-disabled": "_multi-select-input-disabled_io0c8_131",
   "multi-select-input": "_multi-select-input_io0c8_131",
-  focused: Ue,
-  option: We,
+  focused: We,
+  option: He,
   "option-active": "_option-active_io0c8_153",
   "option-inner": "_option-inner_io0c8_156",
-  chip: He,
+  chip: Je,
   "chip-container": "_chip-container_io0c8_168",
   "chip-root": "_chip-root_io0c8_174",
   "right-slot": "_right-slot_io0c8_178",
   "required-mark": "_required-mark_io0c8_183",
-  clear: Je,
+  clear: Ke,
   "icon-button": "_icon-button_io0c8_197"
-}, ct = Ie(
-  (ie, se) => {
+}, lt = Ie(
+  (se, ce) => {
     const {
-      placeholder: D,
-      size: i = x.L,
+      placeholder: P,
+      size: i = D.L,
       value: d,
       onChange: s,
-      full: ce,
-      showArrow: le = !0,
+      full: le,
+      showArrow: re = !0,
       items: h = [],
-      classNameOption: re,
+      classNameOption: ae,
       displayValue: f = "name",
-      filterOnSearch: P = !0,
-      onSearch: T,
-      variant: q = ye.DefaultGray,
-      menuPlacement: w = "bottom",
+      filterOnSearch: q = !0,
+      onSearch: k,
+      variant: R = ze.DefaultGray,
+      menuPlacement: g = "bottom",
       disabled: r = !1,
-      searchProps: R,
-      withClearButton: k = !1,
-      withChip: ae = !1,
-      chipVariant: ue = "sapphire",
+      searchProps: B,
+      withClearButton: y = !1,
+      withChip: ue = !1,
+      chipVariant: de = "sapphire",
       disableInput: I = !1,
-      autocomplete: B = "on",
-      id: de,
-      autoPlacement: y = !1
-    } = ie, pe = ge(), p = de || `multiselect-${pe}`, g = Q(null), v = Q(null), [m, _] = b(!1), [N, S] = b(
-      () => X(d, f)
-    ), [c, C] = b(
+      autocomplete: F = "on",
+      id: pe,
+      autoPlacement: z = !1,
+      onIsOpen: v
+    } = se, me = Ne(), p = pe || `multiselect-${me}`, N = X(null), b = X(null), [m, _] = w(!1), [S, C] = w(
+      () => Y(d, f)
+    ), [c, M] = w(
       d || []
-    ), [O, F] = b(w), [z, j] = b(!1), [me, G] = b(!1);
-    L(() => {
-      d && (C(d), JSON.stringify(d) !== JSON.stringify(c) && S(X(d, f)));
+    ), [A, j] = w(g), [O, G] = w(!1), [_e, U] = w(!1);
+    T(() => {
+      d && (M(d), JSON.stringify(d) !== JSON.stringify(c) && C(Y(d, f)));
     }, [d, f, c]);
-    const U = Ne(() => {
+    const W = Se(() => {
       var o;
-      if (!P) return h;
-      const e = ((o = N.split(",").pop()) == null ? void 0 : o.trim().toLowerCase()) ?? "";
+      if (!q) return h;
+      const e = ((o = S.split(",").pop()) == null ? void 0 : o.trim().toLowerCase()) ?? "";
       return c.length > 0 && c[c.length - 1].name.toLowerCase() === e ? h : h.filter(
         (a) => a.name.toLowerCase().includes(e)
       );
-    }, [P, h, N, c]), _e = (e) => {
-      C(e), s == null || s(e);
-      const o = ee(e, f);
-      S(o), _(!0), E(p), setTimeout(() => {
-        if (v.current) {
-          v.current.focus(), v.current.scrollLeft = v.current.scrollWidth;
+    }, [q, h, S, c]), he = (e) => {
+      M(e), s == null || s(e);
+      const o = te(e, f);
+      C(o), _(!0), L(p), setTimeout(() => {
+        if (b.current) {
+          b.current.focus(), b.current.scrollLeft = b.current.scrollWidth;
           const a = o.length;
-          v.current.setSelectionRange(a, a);
+          b.current.setSelectionRange(a, a);
         }
       }, 0);
-    }, W = (e) => {
-      var K;
+    }, H = (e) => {
+      var $;
       if (I) return;
       const o = e.target.value;
-      S(o), T == null || T(o);
-      const a = o.split(",").map((V) => V.trim()).filter(Boolean), J = h.filter(
-        (V) => a.includes(V[f])
+      C(o), k == null || k(o);
+      const a = o.split(",").map((x) => x.trim()).filter(Boolean), K = h.filter(
+        (x) => a.includes(x[f])
       );
-      C(J), s == null || s(J), _(!0), E(p);
-      const A = (K = g.current) == null ? void 0 : K.querySelector(
+      M(K), s == null || s(K), _(!0), L(p);
+      const V = ($ = N.current) == null ? void 0 : $.querySelector(
         `.${t.options}`
       );
-      A && typeof A.scrollTo == "function" && A.scrollTo({ top: 0, behavior: "smooth" });
-    }, he = (e) => {
+      V && typeof V.scrollTo == "function" && V.scrollTo({ top: 0, behavior: "smooth" });
+    }, fe = (e) => {
       const o = c.filter(
         (a) => a.id !== e.id
       );
-      C(o), s == null || s(o), S(ee(o, f));
-    }, u = Se(() => {
-      if (!y) {
-        F(w);
+      M(o), s == null || s(o), C(te(o, f));
+    }, u = Ce(() => {
+      if (!z) {
+        j(g);
         return;
       }
-      const e = Ce(g, i);
-      F(e ? "top" : w);
-    }, [y, w, i]), H = () => {
+      const e = Me(N, i);
+      j(e ? "top" : g);
+    }, [z, g, i]), J = () => {
       const e = !m;
-      e && (u(), E(p)), _(e);
-    }, fe = (e) => {
+      e && (u(), L(p)), _(e), v == null || v(e);
+    }, ve = (e) => {
       e.preventDefault(), e.currentTarget.focus();
       const o = e.currentTarget.value.length;
       e.currentTarget.setSelectionRange(o, o);
-    }, ve = () => {
-      S(""), C([]), s == null || s([]);
-    }, be = (e) => {
-      e.stopPropagation(), ve();
+    }, be = () => {
+      C(""), M([]), s == null || s([]);
     }, we = (e) => {
+      e.stopPropagation(), be();
+    }, ge = (e) => {
       if (I) {
         e.target.blur();
         return;
       }
-      u(), _(!0), E(p);
+      u(), _(!0), L(p);
     };
-    return L(() => {
+    return T(() => {
       const e = (o) => {
-        g.current && !g.current.contains(o.target) && !o.defaultPrevented && _(!1);
+        N.current && !N.current.contains(o.target) && !o.defaultPrevented && (_(!1), v == null || v(!1));
       };
       return document.addEventListener("mousedown", e), () => {
         document.removeEventListener("mousedown", e);
       };
-    }, []), L(() => {
+    }, []), T(() => {
       const e = (o) => {
         o.detail !== p && _(!1);
       };
       return window.addEventListener(
-        Y,
+        Z,
         e
       ), () => {
         window.removeEventListener(
-          Y,
+          Z,
           e
         );
       };
-    }, [p]), L(() => {
+    }, [p]), T(() => {
       if (m) {
         u(), window.addEventListener("scroll", u), window.addEventListener("resize", u);
         const e = requestAnimationFrame(() => {
-          G(!0), j(!0);
+          U(!0), G(!0);
         });
         return () => {
           window.removeEventListener("scroll", u), window.removeEventListener("resize", u), cancelAnimationFrame(e);
         };
       } else
-        j(!1), G(!1);
-    }, [m, w, y, i, u]), /* @__PURE__ */ M("div", { ref: g, children: [
+        G(!1), U(!1);
+    }, [m, g, z, i, u]), /* @__PURE__ */ E("div", { ref: N, children: [
       /* @__PURE__ */ n(
-        Oe,
+        Ae,
         {
           multiple: !0,
           as: "div",
           value: c,
           className: l(t["multi-select-search"], {
-            [t.full]: ce,
+            [t.full]: le,
             [t.disabled]: r
           }),
-          onChange: _e,
-          ref: se,
+          onChange: he,
+          ref: ce,
           disabled: r,
-          virtual: { options: U },
-          children: /* @__PURE__ */ M(
+          virtual: { options: W },
+          children: /* @__PURE__ */ E(
             "div",
             {
               className: l(t.container, t[i], {
                 [t["container-open"]]: m
               }),
               children: [
-                I && /* @__PURE__ */ M("div", { className: t["input-container"], children: [
+                I && /* @__PURE__ */ E("div", { className: t["input-container"], children: [
                   /* @__PURE__ */ n(
-                    oe,
+                    ne,
                     {
                       disabled: r,
                       style: { width: "100%" },
-                      onClick: H,
+                      onClick: J,
                       children: /* @__PURE__ */ n(
-                        ne,
+                        ie,
                         {
-                          as: te,
-                          label: D,
-                          size: Z(i),
+                          as: oe,
+                          label: P,
+                          size: ee(i),
                           className: l(t["multi-select-input"], {
-                            [t["multi-select-input-disabled"]]: I && k
+                            [t["multi-select-input-disabled"]]: I && y
                           }),
-                          onChange: W,
-                          value: N,
+                          onChange: H,
+                          value: S,
                           disabled: r,
-                          variant: q,
+                          variant: R,
                           rightSlotClassName: t["right-slot"],
                           requiredMarkClassName: t["required-mark"],
                           "data-testid": "select-search-input",
-                          onFocus: we,
+                          onFocus: ge,
                           rightAddon: {
                             addonType: "icon",
-                            addonContent: Me(m, i)
+                            addonContent: Ee(m, i)
                           },
-                          autocomplete: B,
-                          ...R
+                          autocomplete: F,
+                          ...B
                         }
                       )
                     }
                   ),
-                  k && N && /* @__PURE__ */ n(
-                    Le,
+                  y && S && /* @__PURE__ */ n(
+                    Te,
                     {
                       tabIndex: -1,
                       className: l(t.clear, {
@@ -235,44 +236,44 @@ import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe =
                       clear: !0,
                       disabled: r,
                       variant: "secondary-gray",
-                      onClick: be,
+                      onClick: we,
                       "data-testid": "clear-button"
                     }
                   )
                 ] }),
                 !I && /* @__PURE__ */ n(
-                  ne,
+                  ie,
                   {
-                    as: te,
-                    label: D,
-                    size: Z(i),
+                    as: oe,
+                    label: P,
+                    size: ee(i),
                     className: t["multi-select-input"],
                     rightSlotClassName: t["right-slot"],
                     requiredMarkClassName: t["required-mark"],
-                    value: N,
+                    value: S,
                     disabled: r,
-                    variant: q,
-                    withClearButton: k,
+                    variant: R,
+                    withClearButton: y,
                     onFocus: () => {
-                      _(!0), E(p);
+                      _(!0), L(p);
                     },
-                    onMouseDown: fe,
-                    onChange: W,
-                    ref: v,
+                    onMouseDown: ve,
+                    onChange: H,
+                    ref: b,
                     rightAddon: {
                       addonType: "react-node",
-                      addonContent: le && /* @__PURE__ */ n(
-                        oe,
+                      addonContent: re && /* @__PURE__ */ n(
+                        ne,
                         {
                           className: l(t.button, {
                             [t.disabled]: r
                           }),
                           disabled: r,
-                          onMouseDown: H,
+                          onMouseDown: J,
                           children: /* @__PURE__ */ n(
-                            Ee,
+                            Le,
                             {
-                              iconName: i == x.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                              iconName: i == D.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
                               className: l(t["selector-icon"], {
                                 [t["selector-icon-open"]]: m
                               })
@@ -282,40 +283,40 @@ import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe =
                       )
                     },
                     "data-testid": "select-search-input",
-                    autocomplete: B,
-                    ...R
+                    autocomplete: F,
+                    ...B
                   }
                 ),
-                m && me && /* @__PURE__ */ n($, { children: h.length ? U.length ? /* @__PURE__ */ n(
-                  ze,
+                m && _e && /* @__PURE__ */ n(Q, { children: h.length ? W.length ? /* @__PURE__ */ n(
+                  Oe,
                   {
                     className: l(
                       t.options,
                       t[i],
-                      t[O],
-                      { [t.visible]: z }
+                      t[A],
+                      { [t.visible]: O }
                     ),
                     modal: !1,
                     static: !0,
                     children: ({ option: e }) => /* @__PURE__ */ n(
-                      Ae,
+                      Ve,
                       {
                         value: e,
                         className: ({ focus: o }) => l(
                           t.option,
-                          re,
+                          ae,
                           i && t[i],
                           {
                             [t["option-active"]]: o
                           }
                         ),
-                        children: /* @__PURE__ */ M($, { children: [
-                          /* @__PURE__ */ M("div", { className: t["option-inner"], children: [
+                        children: /* @__PURE__ */ E(Q, { children: [
+                          /* @__PURE__ */ E("div", { className: t["option-inner"], children: [
                             e.name,
                             e.bottom && /* @__PURE__ */ n("div", { children: e.bottom })
                           ] }),
                           /* @__PURE__ */ n(
-                            Te,
+                            ke,
                             {
                               isInteractive: !1,
                               checked: c.some(
@@ -335,8 +336,8 @@ import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe =
                       t.options,
                       t[i],
                       t["no-options"],
-                      t[O],
-                      { [t.visible]: z }
+                      t[A],
+                      { [t.visible]: O }
                     ),
                     children: "Ничего не найдено"
                   }
@@ -347,8 +348,8 @@ import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe =
                       t.options,
                       t[i],
                       t["no-options"],
-                      t[O],
-                      { [t.visible]: z }
+                      t[A],
+                      { [t.visible]: O }
                     ),
                     children: "Нет данных"
                   }
@@ -358,14 +359,14 @@ import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe =
           )
         }
       ),
-      ae && c.length > 0 && /* @__PURE__ */ n("div", { className: t["chip-container"], children: c.map((e) => /* @__PURE__ */ n(
-        ke,
+      ue && c.length > 0 && /* @__PURE__ */ n("div", { className: t["chip-container"], children: c.map((e) => /* @__PURE__ */ n(
+        ye,
         {
-          size: i === x.L ? "s" : "xs",
-          variant: ue,
+          size: i === D.L ? "s" : "xs",
+          variant: de,
           className: t["chip-root"],
           withAction: !0,
-          onClose: () => he(e),
+          onClose: () => fe(e),
           children: /* @__PURE__ */ n("span", { className: t.chip, children: e.name })
         },
         e.id
@@ -374,5 +375,5 @@ import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe =
   }
 );
 export {
-  ct as MultiSelectSearch
+  lt as MultiSelectSearch
 };

package/dist/components/MultiSelectSearch/types.d.ts

@@ -67,4 +67,6 @@ export type TMultiSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'var
      * Автоматическое определение положения выпадающего меню
      */
     autoPlacement?: boolean;
+    /** Функция обратного вызова, срабатывающая при открытии и закрытии выпадающего списка */
+    onIsOpen?: (value: boolean) => void;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.38.18",
+  "version": "1.38.20",
   "type": "module",
   "exports": {
     ".": {