urfu-ui-kit-react 2.1.7-next.4 → 2.1.7-next.5

package/dist/components/Multiselect/Multiselect.js

@@ -1,316 +1,316 @@
-import { jsxs as x, jsx as o, Fragment as Le } from "react/jsx-runtime";
-import { getFieldAccessibility$u as Be } from "../../shared/fieldAccessibility.js";
-import { useState as z, useRef as k, useMemo as le, useEffect as Ie } from "react";
+import { jsxs as b, jsx as i, Fragment as Ie } from "react/jsx-runtime";
+import { getFieldAccessibility$u as We } from "../../shared/fieldAccessibility.js";
+import { useState as M, useRef as w, useMemo as re, useEffect as _e } from "react";
 /* empty css                 */
 /* empty css             */
 /* empty css                                         */
 /* empty css                  */
 /* empty css                 */
-import { createPortal as We } from "react-dom";
-import _e from "../../hooks/useDebounce.js";
-import { useSelectEngine$u as Ge } from "../../hooks/useSelectEngine.js";
-import { OPTION_STATE_COLORS$u as ce } from "../../shared/optionStateColors.js";
-import { isSameOptionValue$u as h, getOptionKeys$u as Ye } from "../../shared/optionValue.js";
-import { getPopupTransitionStyle$u as re } from "../../shared/popupTransition.js";
-import { sizeClassName$u as Je, isCompact$u as Qe } from "../../shared/size.js";
-import { useMobilePicker$u as Ue } from "../../hooks/useMobilePicker.js";
-import { MobileOptionSheet$u as Xe } from "../Select/MobileOptionSheet.js";
-import { getPortalScopeProps$u as Ze } from "../../shared/uiKitDefaults.js";
-import { resolveValidation$u as qe } from "../../vanilla/core/validation.js";
-import { resolveSheetTitle$u as Ve } from "../../vanilla/core/sheetTitle.js";
-const yt = ({
-  "aria-label": C,
-  "aria-labelledby": M,
-  "aria-describedby": se,
-  title: y = "",
-  required: E = !1,
-  options: w,
-  styleSelectContainer: ne,
-  styleTitle: ae,
-  styleSelect: A,
-  lineUp: ue = !1,
-  placeholder: K = "Не выбрано",
-  values: i,
-  setValues: O,
-  isClearable: me = !1,
-  className: pe,
-  tableView: F = !1,
-  size: L,
-  validationText: de = "Заполните поле",
-  validationOn: B,
-  error: fe,
-  absoluteValidationText: xe,
-  disabled: l,
-  portalOn: he,
-  isSearchable: n,
-  onInputChange: b,
-  loading: g,
-  inputValue: v = "",
-  onInputValueChange: a,
-  noScroll: R,
-  id: be,
-  mobilePicker: ge
+import { createPortal as Ge } from "react-dom";
+import Ue from "../../hooks/useDebounce.js";
+import { useSelectEngine$u as Ye } from "../../hooks/useSelectEngine.js";
+import { OPTION_STATE_COLORS$u as se } from "../../shared/optionStateColors.js";
+import { isSameOptionValue$u as g, getOptionKeys$u as Je } from "../../shared/optionValue.js";
+import { getPopupTransitionStyle$u as ne } from "../../shared/popupTransition.js";
+import { sizeClassName$u as Qe, isCompact$u as Xe } from "../../shared/size.js";
+import { useMobilePicker$u as Ze } from "../../hooks/useMobilePicker.js";
+import { MobileOptionSheet$u as qe } from "../Select/MobileOptionSheet.js";
+import { getUiKitPrefix$u as o, kitCls$u as c, kitClasses$u as Ve, getPortalScopeProps$u as et } from "../../shared/uiKitDefaults.js";
+import { resolveValidation$u as tt } from "../../vanilla/core/validation.js";
+import { resolveSheetTitle$u as ot } from "../../vanilla/core/sheetTitle.js";
+const St = ({
+  "aria-label": E,
+  "aria-labelledby": K,
+  "aria-describedby": ae,
+  title: O = "",
+  required: A = !1,
+  options: R,
+  styleSelectContainer: me,
+  styleTitle: pe,
+  styleSelect: F,
+  lineUp: de = !1,
+  placeholder: L = "Не выбрано",
+  values: l,
+  setValues: S,
+  isClearable: ue = !1,
+  className: fe,
+  tableView: B = !1,
+  size: I,
+  validationText: xe = "Заполните поле",
+  validationOn: W,
+  error: he,
+  absoluteValidationText: be,
+  disabled: r,
+  portalOn: ge,
+  isSearchable: m,
+  onInputChange: v,
+  loading: y,
+  inputValue: $ = "",
+  onInputValueChange: p,
+  noScroll: P,
+  id: ve,
+  mobilePicker: ye
 }) => {
-  const s = Qe(L, F), I = Je(L, F), P = qe({ error: fe, validationOn: B, validationText: de }), [H, W] = z(""), S = k(null), _ = _e(H, 300), m = le(() => w.filter((e) => (e.label ?? "").toLowerCase().includes((_ || "").toLowerCase())), [_, w]), G = m.findIndex(
-    (e) => i.some((t) => h(t == null ? void 0 : t.value, e == null ? void 0 : e.value))
-  ), u = Ge({
-    optionsLength: m.length,
-    initialIndex: Math.max(0, G),
-    selectedIndex: G,
-    disabled: l,
-    portalOn: he,
-    loading: g,
-    id: be,
-    idPrefix: "u-multiselect",
+  const a = Xe(I, B), _ = Qe(I, B), H = tt({ error: he, validationOn: W, validationText: xe }), [j, G] = M(""), k = w(null), U = Ue(j, 300), u = re(() => R.filter((e) => (e.label ?? "").toLowerCase().includes((U || "").toLowerCase())), [U, R]), Y = u.findIndex(
+    (e) => l.some((t) => g(t == null ? void 0 : t.value, e == null ? void 0 : e.value))
+  ), d = Ye({
+    optionsLength: u.length,
+    initialIndex: Math.max(0, Y),
+    selectedIndex: Y,
+    disabled: r,
+    portalOn: ge,
+    loading: y,
+    id: ve,
+    idPrefix: c("multiselect"),
     getPortalPosition: (e) => ({ x: e.x, y: e.y + 60 + e.height + e.scrollY }),
     // Поле растёт от чипов: строке варианта нужна его базовая высота, а не текущая.
     measureFieldHeight: (e) => {
-      const t = Number.parseFloat(getComputedStyle(e).minHeight), r = e.getBoundingClientRect().height;
-      return t > 0 ? Math.min(t, r) : r;
+      const t = Number.parseFloat(getComputedStyle(e).minHeight), n = e.getBoundingClientRect().height;
+      return t > 0 ? Math.min(t, n) : n;
     },
     onSelectByIndex: (e) => {
-      const t = m[e];
-      t && Z.current(t);
+      const t = u[e];
+      t && V.current(t);
     }
   }), {
-    isOpen: f,
-    blockRef: Y,
-    portalOptionsRef: ve,
-    optionsListRef: ye,
-    listboxId: p,
-    activeDescendantId: Oe,
-    activeIndex: Se,
+    isOpen: h,
+    blockRef: J,
+    portalOptionsRef: $e,
+    optionsListRef: Oe,
+    listboxId: f,
+    activeDescendantId: Se,
+    activeIndex: ke,
     hoveredIndex: Ne,
-    setHoveredIndex: J,
-    handleKeyDown: Q,
-    shouldRenderPortal: ke,
-    portalStatus: we,
-    shouldRenderLocal: Re,
-    localStatus: Pe,
-    isAnimated: U,
-    portalWidth: He,
-    usePortal: X
-  } = u, d = u.portalPosition, je = Be(p, y, E, P, {
-    "aria-label": C,
-    "aria-labelledby": M,
-    "aria-describedby": se
+    setHoveredIndex: Q,
+    handleKeyDown: X,
+    shouldRenderPortal: we,
+    portalStatus: Re,
+    shouldRenderLocal: Pe,
+    localStatus: He,
+    isAnimated: Z,
+    portalWidth: je,
+    usePortal: q
+  } = d, x = d.portalPosition, Ce = We(f, O, A, H, {
+    "aria-label": E,
+    "aria-labelledby": K,
+    "aria-describedby": ae
   }), N = (e) => {
     var t;
-    l || (i.some((r) => h(r.value, e.value)) ? O(i.filter((r) => !h(r.value, e.value))) : O([...i, e]), n && (W(""), (t = S.current) == null || t.focus()), n && a && a(""));
-  }, Z = k(N);
-  Z.current = N;
+    r || (l.some((n) => g(n.value, e.value)) ? S(l.filter((n) => !g(n.value, e.value))) : S([...l, e]), m && (G(""), (t = k.current) == null || t.focus()), m && p && p(""));
+  }, V = w(N);
+  V.current = N;
   const De = (e) => {
-    l || O(i.filter((t) => !h(t.value, e.value)));
-  }, q = k(null), V = me && !l && (i == null ? void 0 : i.length) > 0, $e = () => {
-    if (l) return;
-    O([]), u.close();
-    const e = n && !c ? S.current : q.current;
+    r || S(l.filter((t) => !g(t.value, e.value)));
+  }, ee = w(null), te = ue && !r && (l == null ? void 0 : l.length) > 0, Te = () => {
+    if (r) return;
+    S([]), d.close();
+    const e = m && !s ? k.current : ee.current;
     e == null || e.focus();
-  }, j = typeof v == "string" && typeof a == "function", Te = j ? v : H, ze = (e) => {
-    l || (j ? a && a(e.target.value) : W(e.target.value), b && b(e.target.value));
-  }, Ce = le(() => Ye(m), [m]), c = Ue(ge), [ee, D] = z(!1), [Me, Ee] = z(""), te = k(u.close);
-  te.current = u.close, Ie(() => {
-    c ? te.current() : D(!1);
-  }, [c]);
-  const oe = () => {
-    l || (Ee(Ve(Y.current, { title: y, ariaLabel: C, ariaLabelledBy: M, placeholder: K })), D(!0));
-  }, Ae = (e) => {
-    e.key !== "Enter" && e.key !== " " && e.key !== "ArrowDown" || (e.preventDefault(), oe());
-  }, Ke = (e) => {
-    j && (a == null || a(e)), b == null || b(e);
-  }, ie = (e, t, r) => {
-    const $ = i.some((T) => h(T.value, e.value)), Fe = Ne === t || Se === t;
-    return /* @__PURE__ */ o(
+  }, C = typeof $ == "string" && typeof p == "function", ze = C ? $ : j, Me = (e) => {
+    r || (C ? p && p(e.target.value) : G(e.target.value), v && v(e.target.value));
+  }, Ee = re(() => Je(u), [u]), s = Ze(ye), [oe, D] = M(!1), [Ke, Ae] = M(""), ie = w(d.close);
+  ie.current = d.close, _e(() => {
+    s ? ie.current() : D(!1);
+  }, [s]);
+  const le = () => {
+    r || (Ae(ot(J.current, { title: O, ariaLabel: E, ariaLabelledBy: K, placeholder: L }, o())), D(!0));
+  }, Fe = (e) => {
+    e.key !== "Enter" && e.key !== " " && e.key !== "ArrowDown" || (e.preventDefault(), le());
+  }, Le = (e) => {
+    C && (p == null || p(e)), v == null || v(e);
+  }, ce = (e, t, n) => {
+    const T = l.some((z) => g(z.value, e.value)), Be = Ne === t || ke === t;
+    return /* @__PURE__ */ i(
       "div",
       {
-        className: "u-multiselectbox-option",
+        className: c("multiselectbox-option"),
         "data-option-index": t,
-        id: `${p}-option-${t}`,
+        id: `${f}-option-${t}`,
         role: "option",
-        "aria-selected": $,
+        "aria-selected": T,
         style: Object.assign(
           {},
-          s ? {
+          a ? {
             // Плотное поле — 43, а строка была 37: держим её не ниже поля
             // и центрируем текст по вертикали.
-            minHeight: "var(--u-option-min-height, var(--u-compact-height))",
+            minHeight: `var(--${o()}-option-min-height, var(--${o()}-compact-height))`,
             display: "flex",
             alignItems: "center",
-            fontSize: "var(--u-compact-font-size)",
+            fontSize: `var(--${o()}-compact-font-size)`,
             lineHeight: 1.6667,
             padding: "calc(8 * var(--u-unit, 1px)) calc(5 * var(--u-unit, 1px))"
           } : null,
-          $ ? { backgroundColor: ce.selectedBackground } : Fe ? { backgroundColor: ce.hoveredBackground } : null,
-          r && R ? {
+          T ? { backgroundColor: se.selectedBackground } : Be ? { backgroundColor: se.hoveredBackground } : null,
+          n && P ? {
             maxHeight: "none"
           } : null,
-          A
+          F
         ),
-        onMouseEnter: () => J(t),
-        onMouseLeave: () => J(null),
-        children: /* @__PURE__ */ x(
+        onMouseEnter: () => Q(t),
+        onMouseLeave: () => Q(null),
+        children: /* @__PURE__ */ b(
           "label",
           {
-            className: "u-multiselectbox-option-checkbox",
-            style: s ? {
+            className: c("multiselectbox-option-checkbox"),
+            style: a ? {
               // Строка плотного варианта — flex: без растяжения метка сжималась
               // до ширины текста, и клик по правой части строки не отмечал вариант.
               flex: 1,
               minHeight: 0,
               padding: 0,
               lineHeight: "calc(20 * var(--u-unit, 1px))",
-              color: "var(--u-option-color, #222222)"
-            } : { color: "var(--u-option-color, #222222)" },
+              color: `var(--${o()}-option-color, #222222)`
+            } : { color: `var(--${o()}-option-color, #222222)` },
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ i(
                 "input",
                 {
                   type: "checkbox",
-                  checked: $,
-                  onChange: (T) => {
-                    T.stopPropagation(), N(e);
+                  checked: T,
+                  onChange: (z) => {
+                    z.stopPropagation(), N(e);
                   }
                 }
               ),
-              /* @__PURE__ */ o("div", { style: s ? { marginRight: "calc(8 * var(--u-unit, 1px))" } : null }),
+              /* @__PURE__ */ i("div", { style: a ? { marginRight: "calc(8 * var(--u-unit, 1px))" } : null }),
               e.label
             ]
           }
         )
       },
-      Ce[t]
+      Ee[t]
     );
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ b(
     "div",
     {
-      className: `u-react-multiselect-container${I ? ` ${I}` : ""} ${pe ?? ""}`,
+      className: `${o()}-react-multiselect-container${_ ? ` ${_}` : ""} ${fe ?? ""}`,
       children: [
-        /* @__PURE__ */ x(
+        /* @__PURE__ */ b(
           "div",
           {
             style: Object.assign(
               {
                 display: "flex",
-                gap: "calc(4 * var(--u-preset-unit, 1px))",
-                flexDirection: ue ? "row" : "column"
+                gap: `calc(4 * var(--${o()}-preset-unit, 1px))`,
+                flexDirection: de ? "row" : "column"
               },
-              ne
+              me
             ),
             children: [
-              y && /* @__PURE__ */ o(
+              O && /* @__PURE__ */ i(
                 "div",
                 {
-                  id: `${p}-label`,
-                  className: `${E ? "u-required" : ""} u-react-select-title`,
+                  id: `${f}-label`,
+                  className: `${A ? c("required") : ""} ${o()}-react-select-title`,
                   style: Object.assign(
                     {
-                      color: "var(--u-field-title-color, #545454)",
-                      fontSize: "var(--u-field-label-size-main, calc(14 * var(--u-unit, 1px)))"
+                      color: `var(--${o()}-field-title-color, #545454)`,
+                      fontSize: `var(--${o()}-field-label-size-main, calc(14 * var(--u-unit, 1px)))`
                     },
-                    ae
+                    pe
                   ),
-                  children: y
+                  children: O
                 }
               ),
-              /* @__PURE__ */ x(
+              /* @__PURE__ */ b(
                 "div",
                 {
-                  className: `u-multiselectbox${l ? " u-multiselectbox-disabled" : ""} u-react-multiselect`,
-                  ref: Y,
+                  className: `${o()}-multiselectbox${r ? ` ${o()}-multiselectbox-disabled` : ""} ${o()}-react-multiselect`,
+                  ref: J,
                   style: Object.assign(
                     {
                       width: "100%"
                     },
-                    A
+                    F
                   ),
                   children: [
-                    /* @__PURE__ */ x(
+                    /* @__PURE__ */ b(
                       "div",
                       {
-                        ref: q,
-                        className: f ? "u-multiselectbox-select u-multiselectbox-select-open" : "u-multiselectbox-select",
-                        tabIndex: n && !c || l ? -1 : 0,
+                        ref: ee,
+                        className: h ? Ve("multiselectbox-select", "multiselectbox-select-open") : c("multiselectbox-select"),
+                        tabIndex: m && !s || r ? -1 : 0,
                         role: "combobox",
-                        ...je,
-                        "aria-expanded": c ? ee : f,
-                        "aria-haspopup": c ? "dialog" : "listbox",
-                        "aria-controls": c ? void 0 : p,
-                        "aria-disabled": l || void 0,
-                        "aria-activedescendant": c ? void 0 : Oe,
-                        onKeyDown: c ? Ae : n ? void 0 : Q,
+                        ...Ce,
+                        "aria-expanded": s ? oe : h,
+                        "aria-haspopup": s ? "dialog" : "listbox",
+                        "aria-controls": s ? void 0 : f,
+                        "aria-disabled": r || void 0,
+                        "aria-activedescendant": s ? void 0 : Se,
+                        onKeyDown: s ? Fe : m ? void 0 : X,
                         onClick: (e) => {
                           var t;
-                          if (c) {
-                            oe();
+                          if (s) {
+                            le();
                             return;
                           }
-                          !f && n && !l && ((t = S.current) == null || t.focus()), u.toggle(e.currentTarget);
+                          !h && m && !r && ((t = k.current) == null || t.focus()), d.toggle(e.currentTarget);
                         },
                         style: Object.assign(
-                          s ? {
+                          a ? {
                             padding: "calc(6 * var(--u-unit, 1px)) calc(28 * var(--u-unit, 1px)) calc(5 * var(--u-unit, 1px)) calc(10 * var(--u-unit, 1px))",
                             gridRowGap: "calc(4 * var(--u-unit, 1px))",
                             borderRadius: "calc(8 * var(--u-unit, 1px))",
                             minHeight: "calc(43 * var(--u-unit, 1px))"
                           } : {},
                           // Плотному полю справа хватало места только под стрелку — крестику нужен свой резерв.
-                          s && V ? { paddingRight: "calc(56 * var(--u-unit, 1px))" } : {},
-                          B && { border: "1px solid var(--u-color-error, #EF302B)" }
+                          a && te ? { paddingRight: "calc(56 * var(--u-unit, 1px))" } : {},
+                          W && { border: `1px solid var(--${o()}-color-error, #EF302B)` }
                         ),
                         children: [
-                          (i == null ? void 0 : i.length) <= 0 && H.length === 0 && (v == null ? void 0 : v.length) === 0 ? /* @__PURE__ */ o(
+                          (l == null ? void 0 : l.length) <= 0 && j.length === 0 && ($ == null ? void 0 : $.length) === 0 ? /* @__PURE__ */ i(
                             "span",
                             {
                               style: Object.assign(
-                                { color: "var(--u-field-title-color, #545454)" },
-                                s ? { fontSize: "var(--u-compact-font-size)" } : {}
+                                { color: `var(--${o()}-field-title-color, #545454)` },
+                                a ? { fontSize: `var(--${o()}-compact-font-size)` } : {}
                               ),
-                              className: "u-multiselectbox-select-label",
-                              children: K
+                              className: c("multiselectbox-select-label"),
+                              children: L
                             }
-                          ) : /* @__PURE__ */ o(Le, {}),
-                          i == null ? void 0 : i.map((e, t) => /* @__PURE__ */ o("div", { className: "u-multiselectbox-select-item-wrapper", children: /* @__PURE__ */ x("div", { className: `u-multiselectbox-select-item-container${s ? " u-multiselectbox-select-item-container--compact" : ""}`, children: [
-                            /* @__PURE__ */ o("span", { className: "u-multiselectbox-select-item", children: e.label }),
-                            /* @__PURE__ */ o("div", { className: "u-multiselectbox-select-cross", onClick: (r) => {
-                              r.stopPropagation(), De(e);
+                          ) : /* @__PURE__ */ i(Ie, {}),
+                          l == null ? void 0 : l.map((e, t) => /* @__PURE__ */ i("div", { className: c("multiselectbox-select-item-wrapper"), children: /* @__PURE__ */ b("div", { className: `${o()}-multiselectbox-select-item-container${a ? ` ${o()}-multiselectbox-select-item-container--compact` : ""}`, children: [
+                            /* @__PURE__ */ i("span", { className: c("multiselectbox-select-item"), children: e.label }),
+                            /* @__PURE__ */ i("div", { className: c("multiselectbox-select-cross"), onClick: (n) => {
+                              n.stopPropagation(), De(e);
                             } })
                           ] }) }, t)),
-                          n && !c && /* @__PURE__ */ o(
+                          m && !s && /* @__PURE__ */ i(
                             "input",
                             {
-                              ref: S,
-                              className: "u-multiselectbox-search",
-                              disabled: l,
-                              "aria-disabled": l || void 0,
-                              value: Te,
-                              onChange: ze,
+                              ref: k,
+                              className: c("multiselectbox-search"),
+                              disabled: r,
+                              "aria-disabled": r || void 0,
+                              value: ze,
+                              onChange: Me,
                               onClick: (e) => {
-                                f && e.stopPropagation();
+                                h && e.stopPropagation();
                               },
-                              onKeyDown: Q
+                              onKeyDown: X
                             }
                           ),
-                          V ? /* @__PURE__ */ o(
+                          te ? /* @__PURE__ */ i(
                             "i",
                             {
-                              className: `u-selectbox-select-icon-cross u-multiselectbox-clear${s ? " u-multiselectbox-clear--compact" : ""}`,
+                              className: `${o()}-selectbox-select-icon-cross ${o()}-multiselectbox-clear${a ? ` ${o()}-multiselectbox-clear--compact` : ""}`,
                               role: "button",
                               "aria-label": "Очистить",
                               onClick: (e) => {
-                                e.stopPropagation(), $e();
+                                e.stopPropagation(), Te();
                               }
                             }
                           ) : null,
-                          /* @__PURE__ */ o(
+                          /* @__PURE__ */ i(
                             "i",
                             {
-                              className: "u-multiselectbox-select-icon-arrow",
+                              className: c("multiselectbox-select-icon-arrow"),
                               style: Object.assign(
-                                f ? {
+                                h ? {
                                   transform: "rotate(180deg)"
                                 } : {},
-                                s ? {
+                                a ? {
                                   top: "calc(15 * var(--u-unit, 1px))"
                                 } : {}
                               )
@@ -319,61 +319,61 @@ const yt = ({
                         ]
                       }
                     ),
-                    f && g ? /* @__PURE__ */ o("div", { className: "u-multiselectbox-options", style: { textAlign: "center", padding: "calc(16 * var(--u-unit, 1px))" }, children: /* @__PURE__ */ o("span", { className: "u-multiselectbox-loading", children: "Загрузка..." }) }) : null,
-                    !g && X && ke && d && We(
-                      /* @__PURE__ */ o(
+                    h && y ? /* @__PURE__ */ i("div", { className: c("multiselectbox-options"), style: { textAlign: "center", padding: "calc(16 * var(--u-unit, 1px))" }, children: /* @__PURE__ */ i("span", { className: c("multiselectbox-loading"), children: "Загрузка..." }) }) : null,
+                    !y && q && we && x && Ge(
+                      /* @__PURE__ */ i(
                         "div",
                         {
-                          className: "u-multiselectbox-options",
-                          ref: ve,
-                          ...Ze(),
-                          id: p,
+                          className: c("multiselectbox-options"),
+                          ref: $e,
+                          ...et(),
+                          id: f,
                           role: "listbox",
                           "aria-multiselectable": !0,
                           style: Object.assign(
                             {
-                              width: He,
-                              left: d == null ? void 0 : d.x,
-                              top: (d == null ? void 0 : d.y) - 60,
+                              width: je,
+                              left: x == null ? void 0 : x.x,
+                              top: (x == null ? void 0 : x.y) - 60,
                               opacity: 1,
                               visibility: "visible",
                               height: "fit-content",
                               // Переменная, чтобы список внутри модалки можно было
                               // поднять над ней, не трогая код потребителя.
-                              zIndex: "var(--u-select-popup-z, 10010)",
+                              zIndex: `var(--${o()}-select-popup-z, 10010)`,
                               display: "block"
                             },
-                            R ? {
+                            P ? {
                               maxHeight: "none"
                             } : {},
-                            u.optionsStyle,
-                            re(we, U)
+                            d.optionsStyle,
+                            ne(Re, Z)
                           ),
-                          children: m.map((e, t) => ie(e, t, !1))
+                          children: u.map((e, t) => ce(e, t, !1))
                         }
                       ),
                       document.body
                     ),
-                    !g && !X && Re ? /* @__PURE__ */ o(
+                    !y && !q && Pe ? /* @__PURE__ */ i(
                       "div",
                       {
-                        ref: ye,
-                        id: p,
+                        ref: Oe,
+                        id: f,
                         role: "listbox",
                         "aria-multiselectable": !0,
-                        className: "u-multiselectbox-options",
+                        className: c("multiselectbox-options"),
                         style: Object.assign(
                           {},
                           // см. Select: свой `display` на всё время жизни узла,
                           // иначе переход срывается кадром с `display: none`
                           { display: "block" },
-                          R ? {
+                          P ? {
                             maxHeight: "none"
                           } : {},
-                          u.optionsStyle,
-                          re(Pe, U)
+                          d.optionsStyle,
+                          ne(He, Z)
                         ),
-                        children: m.map((e, t) => ie(e, t, !0))
+                        children: u.map((e, t) => ce(e, t, !0))
                       }
                     ) : null
                   ]
@@ -382,27 +382,27 @@ const yt = ({
             ]
           }
         ),
-        P.showText && /* @__PURE__ */ o("h5", { id: `${p}-error`, className: "h5 clr-red-main", style: xe ? {
+        H.showText && /* @__PURE__ */ i("h5", { id: `${f}-error`, className: "h5 clr-red-main", style: be ? {
           position: "absolute",
           bottom: "calc(-20 * var(--u-unit, 1px))"
-        } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: P.text }),
-        c ? /* @__PURE__ */ o(
-          Xe,
+        } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: H.text }),
+        s ? /* @__PURE__ */ i(
+          qe,
           {
-            active: ee,
-            title: Me,
-            options: w,
+            active: oe,
+            title: Ke,
+            options: R,
             multiple: !0,
-            isSelected: (e) => i.some((t) => h(t == null ? void 0 : t.value, e == null ? void 0 : e.value)),
+            isSelected: (e) => l.some((t) => g(t == null ? void 0 : t.value, e == null ? void 0 : e.value)),
             onSelect: N,
             onClose: () => D(!1),
-            searchable: n,
-            onSearchChange: Ke,
-            loading: g
+            searchable: m,
+            onSearchChange: Le,
+            loading: y
           }
         ) : null
       ]
     }
   );
 };
-export { yt as Multiselect$u };
+export { St as Multiselect$u };