mimir-ui-kit 1.38.7 → 1.38.8

package/dist/components/Accordion/Accordion.d.ts

@@ -7,7 +7,7 @@ type TChildrenProps = {
 };
 export type TProps = {
     /** Заголовок аккордеона */
-    title: string;
+    title: string | ReactNode;
     /** Размер аккордеона */
     size?: EAccordionSize | `${EAccordionSize}`;
     /** Преобразование заголовка в верхний регистр */

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

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

package/dist/components/MultiSelectSearch/MultiSelectSearch.js

@@ -1,199 +1,217 @@
-import { jsxs as b, jsx as o, Fragment as P } from "react/jsx-runtime";
+import { jsxs as I, jsx as o, Fragment as W } from "react/jsx-runtime";
 import { c as r } from "../../index-DIxK0V-G.js";
-import { forwardRef as ce, useRef as F, useState as E, useEffect as L, useMemo as ae } from "react";
-import { EMultiSelectSearchSize as O } from "./constants.js";
-import { getInitialInputValue as j, MULTISELECT_OPEN_EVENT as G, mapSizeToInputSize as U, getDropdownArrowIcon as ue, dispatchMultiselectOpen as I, joinSelectedItems as W } from "./utils.js";
-import { Icon as de } from "../../icons/Icon.js";
-import { Button as pe } from "../Button/Button.js";
-import { CheckboxMimir as me } from "../CheckboxMimir/CheckboxMimir.js";
-import { Chip as _e } from "../Chip/Chip.js";
-import { I as H } from "../../Input-BYrIS5GU.js";
-import { EInputVariant as he } from "../Input/constants.js";
-import { H as fe, U as J, G as K, K as ke, W as qe } from "../../combobox-CVtJDVoZ.js";
-import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve = "_container_17kql_9", be = "_full_17kql_27", Ie = "_button_17kql_39", we = "_options_17kql_53", Ne = "_top_17kql_64", Ce = "_bottom_17kql_69", Se = "_m_17kql_2", Me = "_l_17kql_111", Ee = "_focused_17kql_129", Le = "_option_17kql_53", Oe = "_chip_17kql_158", Te = "_clear_17kql_183", t = {
+import { forwardRef as he, useId as fe, useRef as H, useState as N, useEffect as S, useMemo as ke } from "react";
+import { EMultiSelectSearchSize as y } from "./constants.js";
+import { getInitialInputValue as J, MULTISELECT_OPEN_EVENT as K, mapSizeToInputSize as $, getDropdownArrowIcon as ve, dispatchMultiselectOpen as C, joinSelectedItems as Q, shouldShowMenuOnTop as we } from "./utils.js";
+import { Icon as qe } from "../../icons/Icon.js";
+import { Button as ge } from "../Button/Button.js";
+import { CheckboxMimir as Ie } from "../CheckboxMimir/CheckboxMimir.js";
+import { Chip as be } from "../Chip/Chip.js";
+import { I as X } from "../../Input-BYrIS5GU.js";
+import { EInputVariant as Ne } from "../Input/constants.js";
+import { H as Se, U as Y, G as Z, K as Ce, W as Ee } from "../../combobox-CVtJDVoZ.js";
+import '../../assets/MultiSelectSearch.css';const Me = "_disabled_17kql_5", Le = "_container_17kql_9", Te = "_full_17kql_27", Oe = "_button_17kql_39", ye = "_options_17kql_53", ze = "_top_17kql_64", xe = "_bottom_17kql_69", De = "_m_17kql_2", Pe = "_l_17kql_111", Ae = "_focused_17kql_129", Ve = "_option_17kql_53", Be = "_chip_17kql_158", Re = "_clear_17kql_183", t = {
   "multi-select-search": "_multi-select-search_17kql_2",
-  disabled: ge,
-  container: ve,
+  disabled: Me,
+  container: Le,
   "container-open": "_container-open_17kql_18",
   "input-container": "_input-container_17kql_22",
-  full: be,
+  full: Te,
   "selected-icon": "_selected-icon_17kql_31",
   "selector-icon-open": "_selector-icon-open_17kql_35",
-  button: Ie,
+  button: Oe,
   "selector-icon": "_selector-icon_17kql_35",
-  options: we,
-  top: Ne,
-  bottom: Ce,
+  options: ye,
+  top: ze,
+  bottom: xe,
   "no-options": "_no-options_17kql_90",
-  m: Se,
-  l: Me,
+  m: De,
+  l: Pe,
   "multi-select-input-disabled": "_multi-select-input-disabled_17kql_126",
   "multi-select-input": "_multi-select-input_17kql_126",
-  focused: Ee,
-  option: Le,
+  focused: Ae,
+  option: Ve,
   "option-active": "_option-active_17kql_148",
   "option-inner": "_option-inner_17kql_151",
-  chip: Oe,
+  chip: Be,
   "chip-container": "_chip-container_17kql_163",
   "chip-root": "_chip-root_17kql_169",
   "right-slot": "_right-slot_17kql_173",
   "required-mark": "_required-mark_17kql_178",
-  clear: Te,
+  clear: Re,
   "icon-button": "_icon-button_17kql_192"
-}, Ue = ce(
-  ($, Q) => {
+}, Ze = he(
+  (ee, te) => {
     const {
-      placeholder: T,
-      size: i = O.L,
+      placeholder: z,
+      size: s = y.L,
       value: u,
-      onChange: s,
-      full: X,
-      showArrow: Y = !0,
-      items: d = [],
-      classNameOption: Z,
-      displayValue: p = "name",
+      onChange: l,
+      full: ne,
+      showArrow: oe = !0,
+      items: p = [],
+      classNameOption: se,
+      displayValue: m = "name",
       filterOnSearch: x = !0,
-      onSearch: w,
-      variant: y = he.DefaultGray,
-      menuPlacement: N = "bottom",
+      onSearch: E,
+      variant: D = Ne.DefaultGray,
+      menuPlacement: b = "bottom",
       disabled: c = !1,
-      searchProps: D,
-      withClearButton: C = !1,
-      withChip: ee = !1,
-      chipVariant: te = "sapphire",
-      disableInput: f = !1,
-      autocomplete: z = "on",
-      id: m = `multiselect-${Math.random().toString(36).slice(2, 11)}`
-    } = $, S = F(null), _ = F(null), [k, h] = E(!1), [q, g] = E(
-      () => j(u, p)
-    ), [l, v] = E(
+      searchProps: P,
+      withClearButton: M = !1,
+      withChip: le = !1,
+      chipVariant: ie = "sapphire",
+      disableInput: k = !1,
+      autocomplete: A = "on",
+      id: re,
+      autoPlacement: V = !1
+    } = ee, ce = fe(), _ = re || `multiselect-${ce}`, v = H(null), h = H(null), [d, f] = N(!1), [w, q] = N(
+      () => J(u, m)
+    ), [i, g] = N(
       u || []
-    );
-    L(() => {
-      u && (v(u), JSON.stringify(u) !== JSON.stringify(l) && g(j(u, p)));
-    }, [u, p, l]);
-    const V = ae(() => {
+    ), [L, B] = N(b);
+    S(() => {
+      u && (g(u), JSON.stringify(u) !== JSON.stringify(i) && q(J(u, m)));
+    }, [u, m, i]);
+    const R = ke(() => {
       var n;
-      if (!x) return d;
-      const e = ((n = q.split(",").pop()) == null ? void 0 : n.trim().toLowerCase()) ?? "";
-      return l.length > 0 && l[l.length - 1].name.toLowerCase() === e ? d : d.filter(
+      if (!x) return p;
+      const e = ((n = w.split(",").pop()) == null ? void 0 : n.trim().toLowerCase()) ?? "";
+      return i.length > 0 && i[i.length - 1].name.toLowerCase() === e ? p : p.filter(
         (a) => a.name.toLowerCase().includes(e)
       );
-    }, [x, d, q, l]), ne = (e) => {
-      v(e), s == null || s(e);
-      const n = W(e, p);
-      g(n), h(!0), I(m), setTimeout(() => {
-        if (_.current) {
-          _.current.focus(), _.current.scrollLeft = _.current.scrollWidth;
+    }, [x, p, w, i]), ae = (e) => {
+      g(e), l == null || l(e);
+      const n = Q(e, m);
+      q(n), f(!0), C(_), setTimeout(() => {
+        if (h.current) {
+          h.current.focus(), h.current.scrollLeft = h.current.scrollWidth;
           const a = n.length;
-          _.current.setSelectionRange(a, a);
+          h.current.setSelectionRange(a, a);
         }
       }, 0);
-    }, A = (e) => {
-      if (f) return;
+    }, F = (e) => {
+      var U;
+      if (k) return;
       const n = e.target.value;
-      g(n), w == null || w(n);
-      const a = n.split(",").map((M) => M.trim()).filter(Boolean), R = d.filter(
-        (M) => a.includes(M[p])
+      q(n), E == null || E(n);
+      const a = n.split(",").map((O) => O.trim()).filter(Boolean), G = p.filter(
+        (O) => a.includes(O[m])
       );
-      v(R), s == null || s(R), h(!0), I(m);
-    }, oe = (e) => {
-      const n = l.filter(
+      g(G), l == null || l(G), f(!0), C(_);
+      const T = (U = v.current) == null ? void 0 : U.querySelector(
+        `.${t.options}`
+      );
+      T && typeof T.scrollTo == "function" && T.scrollTo({ top: 0, behavior: "smooth" });
+    }, ue = (e) => {
+      const n = i.filter(
         (a) => a.id !== e.id
       );
-      v(n), s == null || s(n), g(W(n, p));
-    }, B = () => {
-      const e = !k;
-      h(e), e && I(m);
-    }, se = (e) => {
+      g(n), l == null || l(n), q(Q(n, m));
+    }, j = () => {
+      const e = !d;
+      f(e), e && C(_);
+    }, de = (e) => {
       e.preventDefault(), e.currentTarget.focus();
       const n = e.currentTarget.value.length;
       e.currentTarget.setSelectionRange(n, n);
-    }, ie = () => {
-      g(""), v([]), s == null || s([]);
-    }, le = (e) => {
-      e.stopPropagation(), ie();
-    }, re = (e) => {
-      f && e.target.blur();
+    }, pe = () => {
+      q(""), g([]), l == null || l([]);
+    }, me = (e) => {
+      e.stopPropagation(), pe();
+    }, _e = (e) => {
+      k && e.target.blur();
     };
-    return L(() => {
+    return S(() => {
       const e = (n) => {
-        S.current && !S.current.contains(n.target) && !n.defaultPrevented && h(!1);
+        v.current && !v.current.contains(n.target) && !n.defaultPrevented && f(!1);
       };
       return document.addEventListener("mousedown", e), () => {
         document.removeEventListener("mousedown", e);
       };
-    }, []), L(() => {
+    }, []), S(() => {
       const e = (n) => {
-        n.detail !== m && h(!1);
+        n.detail !== _ && f(!1);
       };
       return window.addEventListener(
-        G,
+        K,
         e
       ), () => {
         window.removeEventListener(
-          G,
+          K,
           e
         );
       };
-    }, [m]), /* @__PURE__ */ b("div", { ref: S, children: [
+    }, [_]), S(() => {
+      const e = () => {
+        if (!V) {
+          B(b);
+          return;
+        }
+        const n = we(v, s);
+        B(n ? "top" : b);
+      };
+      return d && (e(), window.addEventListener("scroll", e), window.addEventListener("resize", e)), () => {
+        window.removeEventListener("scroll", e), window.removeEventListener("resize", e);
+      };
+    }, [d, b, V, s]), /* @__PURE__ */ I("div", { ref: v, children: [
       /* @__PURE__ */ o(
-        fe,
+        Se,
         {
           multiple: !0,
           as: "div",
-          value: l,
+          value: i,
           className: r(t["multi-select-search"], {
-            [t.full]: X,
+            [t.full]: ne,
             [t.disabled]: c
           }),
-          onChange: ne,
-          ref: Q,
+          onChange: ae,
+          ref: te,
           disabled: c,
-          virtual: { options: V },
-          children: /* @__PURE__ */ b(
+          virtual: { options: R },
+          children: /* @__PURE__ */ I(
             "div",
             {
-              className: r(t.container, t[i], {
-                [t["container-open"]]: k
+              className: r(t.container, t[s], {
+                [t["container-open"]]: d
               }),
               children: [
-                f && /* @__PURE__ */ b("div", { className: t["input-container"], children: [
+                k && /* @__PURE__ */ I("div", { className: t["input-container"], children: [
                   /* @__PURE__ */ o(
-                    J,
+                    Y,
                     {
                       disabled: c,
                       style: { width: "100%" },
-                      onClick: B,
+                      onClick: j,
                       children: /* @__PURE__ */ o(
-                        K,
+                        Z,
                         {
-                          as: H,
-                          label: T,
-                          size: U(i),
+                          as: X,
+                          label: z,
+                          size: $(s),
                           className: r(t["multi-select-input"], {
-                            [t["multi-select-input-disabled"]]: f && C
+                            [t["multi-select-input-disabled"]]: k && M
                           }),
-                          onChange: A,
-                          value: q,
+                          onChange: F,
+                          value: w,
                           disabled: c,
-                          variant: y,
+                          variant: D,
                           rightSlotClassName: t["right-slot"],
                           requiredMarkClassName: t["required-mark"],
                           "data-testid": "select-search-input",
-                          onFocus: re,
+                          onFocus: _e,
                           rightAddon: {
                             addonType: "icon",
-                            addonContent: ue(k, i)
+                            addonContent: ve(d, s)
                           },
-                          autocomplete: z,
-                          ...D
+                          autocomplete: A,
+                          ...P
                         }
                       )
                     }
                   ),
-                  C && q && /* @__PURE__ */ o(
-                    pe,
+                  M && w && /* @__PURE__ */ o(
+                    ge,
                     {
                       tabIndex: -1,
                       className: r(t.clear, {
@@ -206,46 +224,46 @@ import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve =
                       clear: !0,
                       disabled: c,
                       variant: "secondary-gray",
-                      onClick: le,
+                      onClick: me,
                       "data-testid": "clear-button"
                     }
                   )
                 ] }),
-                !f && /* @__PURE__ */ o(
-                  K,
+                !k && /* @__PURE__ */ o(
+                  Z,
                   {
-                    as: H,
-                    label: T,
-                    size: U(i),
+                    as: X,
+                    label: z,
+                    size: $(s),
                     className: t["multi-select-input"],
                     rightSlotClassName: t["right-slot"],
                     requiredMarkClassName: t["required-mark"],
-                    value: q,
+                    value: w,
                     disabled: c,
-                    variant: y,
-                    withClearButton: C,
+                    variant: D,
+                    withClearButton: M,
                     onFocus: () => {
-                      h(!0), I(m);
+                      f(!0), C(_);
                     },
-                    onMouseDown: se,
-                    onChange: A,
-                    ref: _,
+                    onMouseDown: de,
+                    onChange: F,
+                    ref: h,
                     rightAddon: {
                       addonType: "react-node",
-                      addonContent: Y && /* @__PURE__ */ o(
-                        J,
+                      addonContent: oe && /* @__PURE__ */ o(
+                        Y,
                         {
                           className: r(t.button, {
                             [t.disabled]: c
                           }),
                           disabled: c,
-                          onMouseDown: B,
+                          onMouseDown: j,
                           children: /* @__PURE__ */ o(
-                            de,
+                            qe,
                             {
-                              iconName: i == O.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                              iconName: s == y.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
                               className: r(t["selector-icon"], {
-                                [t["selector-icon-open"]]: k
+                                [t["selector-icon-open"]]: d
                               })
                             }
                           )
@@ -253,42 +271,42 @@ import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve =
                       )
                     },
                     "data-testid": "select-search-input",
-                    autocomplete: z,
-                    ...D
+                    autocomplete: A,
+                    ...P
                   }
                 ),
-                k && /* @__PURE__ */ o(P, { children: d.length ? V.length ? /* @__PURE__ */ o(
-                  ke,
+                d && /* @__PURE__ */ o(W, { children: p.length ? R.length ? /* @__PURE__ */ o(
+                  Ce,
                   {
                     className: r(
                       t.options,
-                      t[i],
-                      t[N]
+                      t[s],
+                      t[L]
                     ),
                     modal: !1,
                     static: !0,
                     children: ({ option: e }) => /* @__PURE__ */ o(
-                      qe,
+                      Ee,
                       {
                         value: e,
                         className: ({ focus: n }) => r(
                           t.option,
-                          Z,
-                          i && t[i],
+                          se,
+                          s && t[s],
                           {
                             [t["option-active"]]: n
                           }
                         ),
-                        children: /* @__PURE__ */ b(P, { children: [
-                          /* @__PURE__ */ b("div", { className: t["option-inner"], children: [
+                        children: /* @__PURE__ */ I(W, { children: [
+                          /* @__PURE__ */ I("div", { className: t["option-inner"], children: [
                             e.name,
                             e.bottom && /* @__PURE__ */ o("div", { children: e.bottom })
                           ] }),
                           /* @__PURE__ */ o(
-                            me,
+                            Ie,
                             {
                               isInteractive: !1,
-                              checked: l.some(
+                              checked: i.some(
                                 (n) => n.id === e.id
                               )
                             }
@@ -303,9 +321,9 @@ import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve =
                   {
                     className: r(
                       t.options,
-                      t[i],
+                      t[s],
                       t["no-options"],
-                      t[N]
+                      t[L]
                     ),
                     children: "Ничего не найдено"
                   }
@@ -314,9 +332,9 @@ import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve =
                   {
                     className: r(
                       t.options,
-                      t[i],
+                      t[s],
                       t["no-options"],
-                      t[N]
+                      t[L]
                     ),
                     children: "Нет данных"
                   }
@@ -326,14 +344,14 @@ import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve =
           )
         }
       ),
-      ee && l.length > 0 && /* @__PURE__ */ o("div", { className: t["chip-container"], children: l.map((e) => /* @__PURE__ */ o(
-        _e,
+      le && i.length > 0 && /* @__PURE__ */ o("div", { className: t["chip-container"], children: i.map((e) => /* @__PURE__ */ o(
+        be,
         {
-          size: i === O.L ? "s" : "xs",
-          variant: te,
+          size: s === y.L ? "s" : "xs",
+          variant: ie,
           className: t["chip-root"],
           withAction: !0,
-          onClose: () => oe(e),
+          onClose: () => ue(e),
           children: /* @__PURE__ */ o("span", { className: t.chip, children: e.name })
         },
         e.id
@@ -342,5 +360,5 @@ import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve =
   }
 );
 export {
-  Ue as MultiSelectSearch
+  Ze as MultiSelectSearch
 };

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

@@ -2,3 +2,6 @@ export declare enum EMultiSelectSearchSize {
     M = "m",
     L = "l"
 }
+export declare const MOBILE_BREAKPOINT = 767;
+export declare const MOBILE_MENU_HEIGHT = 264;
+export declare const DESKTOP_MENU_HEIGHT = 320;

package/dist/components/MultiSelectSearch/constants.js

@@ -1,4 +1,8 @@
-var m = /* @__PURE__ */ ((r) => (r.M = "m", r.L = "l", r))(m || {});
+var I = /* @__PURE__ */ ((E) => (E.M = "m", E.L = "l", E))(I || {});
+const _ = 767, n = 264, o = 320;
 export {
-  m as EMultiSelectSearchSize
+  o as DESKTOP_MENU_HEIGHT,
+  I as EMultiSelectSearchSize,
+  _ as MOBILE_BREAKPOINT,
+  n as MOBILE_MENU_HEIGHT
 };

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

@@ -63,4 +63,8 @@ export type TMultiSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'var
      * Уникальный идентификатор мультиселекта
      */
     id?: string;
+    /**
+     * Автоматическое определение положения выпадающего меню
+     */
+    autoPlacement?: boolean;
 };

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

@@ -8,3 +8,4 @@ export declare const getInitialInputValue: (value: TMultiSelectOption[] | undefi
 export declare const joinSelectedItems: (items: TMultiSelectOption[], displayValue: string) => string;
 export declare const MULTISELECT_OPEN_EVENT = "multiselectOpen";
 export declare const dispatchMultiselectOpen: (id: string) => void;
+export declare const shouldShowMenuOnTop: (selectRef: React.RefObject<HTMLDivElement>, size: EMultiSelectSearchSize) => boolean;

package/dist/components/MultiSelectSearch/utils.js

@@ -1,23 +1,28 @@
-import { EMultiSelectSearchSize as o } from "./constants.js";
+import { EMultiSelectSearchSize as o, MOBILE_MENU_HEIGHT as c, DESKTOP_MENU_HEIGHT as s } from "./constants.js";
 import "../../Input-BYrIS5GU.js";
-import { EInputSize as e } from "../Input/constants.js";
-const w = (t) => {
+import { EInputSize as r } from "../Input/constants.js";
+const m = (t) => {
   switch (t) {
     case o.M:
-      return e.M;
+      return r.M;
     case o.L:
-      return e.L;
+      return r.L;
     default:
-      return e.M;
+      return r.M;
   }
-}, s = (t, r) => t ? r === o.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : r === o.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", m = (t, r) => t && t.length > 0 ? t.map((n) => n[r]).join(", ") : "", d = (t, r) => t.map((n) => n[r]).join(", "), p = "multiselectOpen", a = (t) => {
-  window.dispatchEvent(new CustomEvent(p, { detail: t }));
+}, a = (t, e) => t ? e === o.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : e === o.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", M = (t, e) => t && t.length > 0 ? t.map((n) => n[e]).join(", ") : "", h = (t, e) => t.map((n) => n[e]).join(", "), u = "multiselectOpen", I = (t) => {
+  window.dispatchEvent(new CustomEvent(u, { detail: t }));
+}, S = (t, e) => {
+  if (!t.current) return !1;
+  const n = t.current.getBoundingClientRect(), i = window.innerHeight, p = e === o.M ? c : s;
+  return i - n.bottom < p;
 };
 export {
-  p as MULTISELECT_OPEN_EVENT,
-  a as dispatchMultiselectOpen,
-  s as getDropdownArrowIcon,
-  m as getInitialInputValue,
-  d as joinSelectedItems,
-  w as mapSizeToInputSize
+  u as MULTISELECT_OPEN_EVENT,
+  I as dispatchMultiselectOpen,
+  a as getDropdownArrowIcon,
+  M as getInitialInputValue,
+  h as joinSelectedItems,
+  m as mapSizeToInputSize,
+  S as shouldShowMenuOnTop
 };

package/package.json

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