@alphakits/ui 2.5.3 → 2.5.5

package/dist/modal/components/modals/index.css

@@ -1 +1 @@
-.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:34px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}.bottomSheet_CI-8{inset:0!important;width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;border-radius:0!important;transform:translateY(100%);transition:transform .25s cubic-bezier(.32,.72,0,1)}@supports not (height: 100dvh){.bottomSheet_CI-8{height:100vh;max-height:100vh}}.bottomSheet_CI-8.open_eGDW{transform:translateY(0)}.bottomSheet_CI-8[data-anim-done=true]{transform:none;transition:none}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;right:0!important;left:0!important}.content_p1kc{box-shadow:none!important;margin:0!important}.button_js2W{top:16px!important;right:16px!important}}
+.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:34px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}.bottomSheet_CI-8{top:100dvh!important;bottom:auto!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;border-radius:0!important;transition:top .25s cubic-bezier(.32,.72,0,1)}@supports not (height: 100dvh){.bottomSheet_CI-8{top:100vh!important;height:100vh;max-height:100vh}}.bottomSheet_CI-8.open_eGDW{top:0!important}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;right:0!important;left:0!important}.content_p1kc{box-shadow:none!important;margin:0!important}.button_js2W{top:16px!important;right:16px!important}}

package/dist/modal/components/modals/modal.js

@@ -1,16 +1,16 @@
-import { jsxs as w, jsx as d } from "react/jsx-runtime";
-import z from "@alphakits/icons/dist/CloseM";
-import k from "classnames";
-import { useState as S, useRef as T, useLayoutEffect as j, useCallback as p, useEffect as A } from "react";
-import { Button as B } from "../../../button/component.js";
-import { showConfirm as q } from "../../../confirm-popup/component.js";
-import { useMatchMedia as K } from "../../../mq/use-match-media.js";
+import { jsxs as E, jsx as l } from "react/jsx-runtime";
+import O from "@alphakits/icons/dist/CloseM";
+import C from "classnames";
+import { useState as L, useRef as w, useLayoutEffect as N, useEffect as k, useCallback as S } from "react";
+import { Button as z } from "../../../button/component.js";
+import { showConfirm as j } from "../../../confirm-popup/component.js";
+import { useMatchMedia as B } from "../../../mq/use-match-media.js";
 import s from "./index.module.css.js";
-const N = {
+const R = {
   s: 488,
   m: 888,
   full: "96%"
-}, F = 102, _ = "(max-width: 823px)", P = (e) => e === "full" ? `calc(-96vw - ${F}px)` : -N[e] - F, $ = [
+}, T = 102, D = "(max-width: 823px)", K = (e) => e === "full" ? `calc(-96vw - ${T}px)` : -R[e] - T, _ = [
   'a[href]:not([tabindex="-1"])',
   'area[href]:not([tabindex="-1"])',
   'button:not([disabled]):not([tabindex="-1"])',
@@ -25,44 +25,37 @@ const N = {
   'audio[controls]:not([tabindex="-1"])',
   'video[controls]:not([tabindex="-1"])',
   'details > summary:first-of-type:not([tabindex="-1"])'
-].join(","), R = (e) => e ? Array.from(e.querySelectorAll($)).filter((r) => {
+].join(","), F = (e) => e ? Array.from(e.querySelectorAll(_)).filter((r) => {
   if (r.hidden || r.getAttribute("aria-hidden") === "true") return !1;
   const a = window.getComputedStyle(r);
   return a.visibility === "hidden" || a.display === "none" ? !1 : r.offsetWidth > 0 || r.offsetHeight > 0 || r.getClientRects().length > 0;
-}) : [], Q = ({ modal: e, t: c, index: r, dirtyModals: a, closeModal: y, currentModalId: u }) => {
-  const O = P(e.props.size), [f] = K(_), [m, h] = S(!1), [L, x] = S(!1), i = T(null), v = T(null);
-  j(() => {
-    const t = requestAnimationFrame(() => h(!0));
-    return () => cancelAnimationFrame(t);
-  }, [e.id]);
-  const D = p(
-    (t) => {
-      t.propertyName === "transform" && t.target === t.currentTarget && (!m || !f || x(!0));
-    },
-    [m, f]
-  );
-  A(() => {
+}) : [], W = ({ modal: e, t: c, index: r, dirtyModals: a, closeModal: m, currentModalId: u }) => {
+  const A = K(e.props.size), [b] = B(D), [p, y] = L(!1), i = w(null), x = w(null);
+  N(() => {
+    const o = requestAnimationFrame(() => y(!0));
+    return () => cancelAnimationFrame(o);
+  }, [e.id]), k(() => {
     if (e.id !== u) return;
-    v.current = document.activeElement || null;
-    const t = setTimeout(() => {
-      const o = R(i.current)[0] || i.current;
-      o && typeof o.focus == "function" && o.focus({ preventScroll: !0 });
+    x.current = document.activeElement || null;
+    const o = setTimeout(() => {
+      const n = F(i.current)[0] || i.current;
+      n && typeof n.focus == "function" && n.focus({ preventScroll: !0 });
     }, 50);
     return () => {
-      clearTimeout(t);
-      const n = document.activeElement;
-      if (!n || !i.current?.contains(n)) return;
-      const o = v.current;
-      if (o && typeof o.focus == "function" && document.body.contains(o))
+      clearTimeout(o);
+      const t = document.activeElement;
+      if (!t || !i.current?.contains(t)) return;
+      const n = x.current;
+      if (n && typeof n.focus == "function" && document.body.contains(n))
         try {
-          o.focus({ preventScroll: !0 });
+          n.focus({ preventScroll: !0 });
         } catch {
           document.body.focus();
         }
     };
   }, [e.id, u]);
-  const g = p(
-    (t) => a[t] ? q({
+  const h = S(
+    (o) => a[o] ? j({
       title: c("common:exitConfirm"),
       confirmText: c("common:Да"),
       cancelText: c("common:Нет"),
@@ -70,38 +63,38 @@ const N = {
     }) : Promise.resolve(!0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [a, c]
-  ), l = p(
-    async (t) => {
-      const { id: n } = e;
-      await g(t || n) && (x(!1), requestAnimationFrame(() => h(!1)), setTimeout(() => {
-        e.props.closeCallback && e.props.closeCallback(), y(t || n);
+  ), f = S(
+    async (o) => {
+      const { id: t } = e;
+      await h(o || t) && (y(!1), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), m(o || t);
       }, 250));
     },
-    [y, g, e]
+    [m, h, e]
   );
-  return A(() => {
-    const t = (n) => {
-      if (n.key === "27" || n.key === "Escape") {
-        l(u);
+  return k(() => {
+    const o = (t) => {
+      if (t.key === "27" || t.key === "Escape") {
+        f(u);
         return;
       }
-      if (n.key !== "Tab") return;
-      const o = R(i.current);
-      if (!o.length) {
-        n.preventDefault(), i.current && i.current.focus({ preventScroll: !0 });
+      if (t.key !== "Tab") return;
+      const n = F(i.current);
+      if (!n.length) {
+        t.preventDefault(), i.current && i.current.focus({ preventScroll: !0 });
         return;
       }
-      const E = o[0], C = o[o.length - 1], b = document.activeElement;
-      if (n.shiftKey && (b === E || !i.current?.contains(b))) {
-        n.preventDefault(), C.focus({ preventScroll: !0 });
+      const v = n[0], g = n[n.length - 1], d = document.activeElement;
+      if (t.shiftKey && (d === v || !i.current?.contains(d))) {
+        t.preventDefault(), g.focus({ preventScroll: !0 });
         return;
       }
-      !n.shiftKey && (b === C || !i.current?.contains(b)) && (n.preventDefault(), E.focus({ preventScroll: !0 }));
+      !t.shiftKey && (d === g || !i.current?.contains(d)) && (t.preventDefault(), v.focus({ preventScroll: !0 }));
     };
-    return e.id === u && window?.addEventListener("keydown", t), () => {
-      window?.removeEventListener("keydown", t);
+    return e.id === u && window?.addEventListener("keydown", o), () => {
+      window?.removeEventListener("keydown", o);
     };
-  }, [l, u, e.id]), /* @__PURE__ */ w(
+  }, [f, u, e.id]), /* @__PURE__ */ E(
     "div",
     {
       className: s.container,
@@ -109,60 +102,58 @@ const N = {
         zIndex: 9999998 + r
       },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ l(
           "div",
           {
             ref: i,
-            className: k(s.right, s.content, {
-              [s.open]: m,
-              [s.bottomSheet]: f
+            className: C(s.right, s.content, {
+              [s.open]: p,
+              [s.bottomSheet]: b
             }),
             style: {
               zIndex: 9999999 + r,
-              width: N[e.props.size],
+              width: R[e.props.size],
               // На десктопе right-slide управляется JS-ом (старая
               // схема — анимация ширины и right'а синхронны). На
               // мобиле right=0 всегда, а появление контролируется
-              // CSS-классом .open → transform: translateY(0).
-              right: f || m ? 0 : O
+              // CSS (.bottomSheet.open → top: 0).
+              right: b || p ? 0 : A
             },
-            onTransitionEnd: D,
-            "data-anim-done": f && L ? "true" : void 0,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": `modal-title-${e.id}`,
             tabIndex: -1,
-            children: /* @__PURE__ */ w("div", { className: s.inner, children: [
-              /* @__PURE__ */ d(
+            children: /* @__PURE__ */ E("div", { className: s.inner, children: [
+              /* @__PURE__ */ l(
                 e.modal,
                 {
                   ...e.props,
                   modalId: e.id,
-                  close: () => l()
+                  close: () => f()
                 }
               ),
-              /* @__PURE__ */ d(
-                B,
+              /* @__PURE__ */ l(
+                z,
                 {
-                  className: k(s.button, {
+                  className: C(s.button, {
                     [s.doubleModal]: e.props.isDouble
                   }),
                   view: "secondary",
                   size: "xs",
-                  leftAddons: /* @__PURE__ */ d(z, {}),
-                  onClick: () => l()
+                  leftAddons: /* @__PURE__ */ l(O, {}),
+                  onClick: () => f()
                 }
               )
             ] })
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ l(
           "button",
           {
             className: s.bg,
             "aria-label": "Close dialog",
             type: "button",
-            onClick: () => l()
+            onClick: () => f()
           }
         )
       ]
@@ -170,5 +161,5 @@ const N = {
   );
 };
 export {
-  Q as Modal
+  W as Modal
 };

package/dist/select/components/base-select/component.js

@@ -1,326 +1,350 @@
-import { jsx as a, jsxs as rt } from "react/jsx-runtime";
-import ne from "classnames";
-import { useMultipleSelection as re, useCombobox as B } from "downshift";
-import st, { forwardRef as ot, useRef as y, useMemo as T, useCallback as W, useEffect as se, useLayoutEffect as ct } from "react";
+import { jsx as l, jsxs as rt } from "react/jsx-runtime";
+import re from "classnames";
+import { useMultipleSelection as se, useCombobox as L } from "downshift";
+import st, { forwardRef as ot, useRef as g, useMemo as N, useCallback as W, useEffect as j } from "react";
 import oe from "react-merge-refs";
-import { ResizeObserver as it } from "resize-observer";
-import { getDataTestId as j } from "../../../__internal/utils/get-data-test-id.js";
-import { Popover as lt } from "../../../popover/component.js";
-import { processOptions as at } from "../../utils.js";
-import { NativeSelect as dt } from "../native-select/component.js";
-import v from "./index.module.css.js";
-const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
-  const x = y(o);
-  return x.current = o, x;
-}, vt = ot(
+import { ResizeObserver as ct } from "resize-observer";
+import { getDataTestId as A } from "../../../__internal/utils/get-data-test-id.js";
+import { Popover as it } from "../../../popover/component.js";
+import { processOptions as lt } from "../../utils.js";
+import { NativeSelect as at } from "../native-select/component.js";
+import k from "./index.module.css.js";
+const ce = (s) => s ? s.key?.toString() : "", ie = (s) => {
+  const x = g(s);
+  return x.current = s, x;
+}, kt = ot(
   ({
-    dataTestId: o = "",
+    dataTestId: s = "",
     className: x,
     fieldClassName: le,
     filteredOptions: ae,
     popoverOuterClassname: de,
     optionsListClassName: ue,
-    optionClassName: A,
+    optionClassName: $,
     options: R,
-    actionButton: $,
-    autocomplete: I = !1,
-    multiple: m = !1,
-    allowUnselect: M = !1,
-    disabled: u = !1,
-    closeOnSelect: H = !m,
+    actionButton: H,
+    autocomplete: y = !1,
+    multiple: p = !1,
+    allowUnselect: T = !1,
+    disabled: d = !1,
+    closeOnSelect: U = !p,
     circularNavigation: fe = !1,
-    nativeSelect: w = !1,
-    defaultOpen: U = !1,
-    open: N,
+    nativeSelect: I = !1,
+    defaultOpen: V = !1,
+    open: O,
     popoverPosition: pe = "bottom-start",
     offset: me,
     withArrow: he,
     preventFlip: ge = !0,
-    optionsListWidth: V = "field",
-    name: h,
+    optionsListWidth: _ = "field",
+    name: m,
     id: ye,
     required: Ie,
-    selected: C,
+    selected: v,
     size: S = "m",
-    optionsSize: _ = S,
+    optionsSize: q = S,
     error: we,
     hint: be,
     block: ke = !0,
-    label: O,
-    placeholder: ve,
-    fieldProps: xe = {},
-    optionsListProps: Re = {},
-    optionProps: q = {},
+    label: D,
+    placeholder: xe,
+    fieldProps: Re = {},
+    optionsListProps: ve = {},
+    optionProps: z = {},
     valueRenderer: Ce,
-    onChange: Pe,
-    onOpen: De,
+    onChange: Me,
+    onOpen: Ne,
     onFocus: Te,
-    onBlur: Me,
-    onScroll: Ne,
-    Arrow: z,
-    Field: Se = () => null,
-    OptionsList: Oe = () => null,
+    onBlur: Oe,
+    onScroll: Se,
+    Arrow: G,
+    Field: De = () => null,
+    OptionsList: Pe = () => null,
     Optgroup: Ee = () => null,
-    Option: G = () => null,
+    Option: J = () => null,
     updatePopover: Fe,
     zIndexPopover: Ke,
-    showEmptyOptionsList: Le = !1,
-    visibleOptions: Be
+    showEmptyOptionsList: Be = !1,
+    visibleOptions: Le
   }, We) => {
-    const b = y(null), J = y(null), k = y(null), Q = y(null), g = y(null), X = ie(Pe), Y = ie(De), { flatOptions: c, selectedOptions: Z } = T(
-      () => at(R || [], C),
-      [R, C]
-    ), ee = T(() => {
+    const w = g(null), Q = g(null), b = g(null), X = g(null), h = g(null), Y = ie(Me), Z = ie(Ne), { flatOptions: o, selectedOptions: ee } = N(
+      () => lt(R || [], v),
+      [R, v]
+    ), te = N(() => {
       const e = /* @__PURE__ */ new Map();
-      return c.forEach((t, s) => {
-        e.set(t.key, s);
+      return o.forEach((t, r) => {
+        e.set(t.key, r);
       }), e;
-    }, [c]), je = T(
+    }, [o]), je = N(
       () => ({
         itemToString: ce,
         onSelectedItemsChange: (e) => {
           const { selectedItems: t = [] } = e;
-          X.current?.({
+          Y.current?.({
             selectedMultiple: t,
             selected: t.length ? t[0] : null,
-            name: h
+            name: m
           });
         },
         stateReducer: (e, t) => {
-          const { type: s, changes: n } = t;
-          return !M && s === re.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
+          const { type: r, changes: n } = t;
+          return !T && r === se.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
         },
-        ...C !== void 0 ? { selectedItems: Z } : {}
+        ...v !== void 0 ? { selectedItems: ee } : {}
       }),
-      [M, h, C, Z, X]
+      [T, m, v, ee, Y]
     ), {
-      selectedItems: i,
+      selectedItems: c,
       addSelectedItem: Ae,
-      setSelectedItems: E,
+      setSelectedItems: P,
       removeSelectedItem: $e,
       getDropdownProps: He
-    } = re(je), F = T(
-      () => new Set(i.map((e) => e.key)),
-      [i]
+    } = se(je), E = N(
+      () => new Set(c.map((e) => e.key)),
+      [c]
     ), {
-      isOpen: l,
+      isOpen: i,
       getMenuProps: Ue,
       getInputProps: Ve,
-      getItemProps: te,
+      getItemProps: ne,
       getComboboxProps: _e,
       getLabelProps: qe,
-      highlightedIndex: P,
-      toggleMenu: K,
-      openMenu: f
-    } = B({
+      highlightedIndex: C,
+      toggleMenu: F,
+      openMenu: u
+    } = L({
       id: ye,
-      isOpen: N,
+      isOpen: O,
       circularNavigation: fe,
-      items: c,
+      items: o,
       itemToString: ce,
-      defaultHighlightedIndex: i.length === 0 ? -1 : void 0,
+      defaultHighlightedIndex: c.length === 0 ? -1 : void 0,
       onIsOpenChange: (e) => {
-        Y.current && setTimeout(() => {
-          Y.current?.({ open: e.isOpen, name: h });
+        Z.current && setTimeout(() => {
+          Z.current?.({ open: e.isOpen, name: m });
         }, 0);
       },
       stateReducer: (e, t) => {
-        const { type: s, changes: n } = t, { selectedItem: d } = n;
-        switch (s) {
-          case B.stateChangeTypes.InputKeyDownEnter:
-          case B.stateChangeTypes.ItemClick:
-            if (d && !d.disabled) {
-              const D = F.has(d.key), r = M || m && i.length > 1;
-              D && r && $e(d), D || (m ? Ae(d) : E([d]));
+        const { type: r, changes: n } = t, { selectedItem: a } = n;
+        switch (r) {
+          case L.stateChangeTypes.InputKeyDownEnter:
+          case L.stateChangeTypes.ItemClick:
+            if (a && !a.disabled) {
+              const M = E.has(a.key), B = T || p && c.length > 1;
+              M && B && $e(a), M || (p ? Ae(a) : P([a]));
             }
             return {
               ...n,
-              isOpen: !H,
-              highlightedIndex: e.isOpen && !H ? e.highlightedIndex : n.highlightedIndex
+              isOpen: !U,
+              highlightedIndex: e.isOpen && !U ? e.highlightedIndex : n.highlightedIndex
             };
           default:
             return n;
         }
       }
     }), ze = Ue(
-      { ref: k },
+      { ref: b },
       { suppressRefError: !0 }
-    ), p = Ve(He({ ref: oe([We, J]) })), Ge = (e) => {
-      Te?.(e), I && !l && f();
+    ), f = Ve(He({ ref: oe([We, Q]) })), Ge = (e) => {
+      Te?.(e), y && !i && u();
     }, Je = (e) => {
       const t = e.relatedTarget || document.activeElement;
-      !!(t && k.current?.contains(t)) || (Me?.(e), p.onBlur(e));
+      !!(t && b.current?.contains(t)) || (Oe?.(e), f.onBlur(e));
     }, Qe = (e) => {
-      p.onKeyDown(e), I && !l && e.key.length === 1 && f(), [" ", "Enter"].includes(e.key) && !I && !w && e.target.tagName !== "INPUT" && (e.preventDefault(), (!l || P === -1) && K());
+      f.onKeyDown(e), y && !i && e.key.length === 1 && u(), [" ", "Enter"].includes(e.key) && !y && !I && e.target.tagName !== "INPUT" && (e.preventDefault(), (!i || C === -1) && F());
     }, Xe = (e) => {
-      k.current?.contains(e.target) || (!I || e.target.tagName !== "INPUT" ? K() : f());
+      b.current?.contains(e.target) || (!y || e.target.tagName !== "INPUT" ? F() : u());
     }, Ye = W(
       (e) => {
-        E(
+        P(
           Array.from(e.target.options).reduce(
-            (t, s, n) => s.selected ? t.concat(c[n]) : t,
+            (t, r, n) => r.selected ? t.concat(o[n]) : t,
             []
           )
         );
       },
-      [c, E]
+      [o, P]
     ), Ze = W(
-      ({ option: e, index: t, ...s }) => {
+      ({ option: e, index: t, ...r }) => {
         if (!e) return null;
-        const n = ee.get(e.key);
+        const n = te.get(e.key);
         if (n === void 0) return null;
-        const d = c[n], D = te({
-          item: d,
+        const a = o[n], M = ne({
+          item: a,
           index: n,
           disabled: e.disabled,
-          onMouseDown: (r) => r.preventDefault(),
-          onPointerDown: (r) => {
-            r.preventDefault(), r.stopPropagation();
-          },
-          onTouchStart: (r) => {
-            r.preventDefault(), r.stopPropagation();
-          },
-          onClick: (r) => {
-            r.stopPropagation();
-          }
+          /*
+           * Стандартный паттерн для menu-items: блокируем
+           * только дефолт mouseDown, чтобы input/combobox
+           * не терял фокус во время клика по опции.
+           *
+           * ВАЖНО: НЕ добавлять preventDefault на touchstart
+           * или pointerdown! Спецификация W3C Touch Events
+           * (§5.6): "If the preventDefault() method is called
+           * on the touchstart event, the user agent should
+           * not dispatch any compatibility mouse events."
+           *
+           * Конкретно: touchstart.preventDefault() блокирует
+           * последующие mousedown → mouseup → click → focus.
+           * Downshift навешивает выбор опции на onClick
+           * (см. useCombobox/useMultipleSelection), который
+           * после preventDefault() на touchstart НЕ
+           * срабатывает. На мобиле опции рендерятся, но
+           * клик по ним игнорируется — выбора нет.
+           *
+           * pointerdown.preventDefault() ведёт себя
+           * аналогично в Chromium/Safari: подавляет
+           * compatibility mouse events. См. PointerEvent
+           * spec §10.1.
+           *
+           * stopPropagation тоже не нужен: дропдаун рендерится
+           * в Portal (вне DOM-дерева модалки), всплытие
+           * click'а до модалки не происходит структурно.
+           *
+           * Регрессия исправлена тут — раньше добавили
+           * onTouchStart/onPointerDown с preventDefault как
+           * "защиту от потери фокуса", но потеряли работающий
+           * select на мобиле.
+           */
+          onMouseDown: (B) => B.preventDefault()
         });
-        return /* @__PURE__ */ a(st.Fragment, { children: G({
-          ...q,
-          ...s,
-          className: A,
-          innerProps: D,
+        return /* @__PURE__ */ l(st.Fragment, { children: J({
+          ...z,
+          ...r,
+          className: $,
+          innerProps: M,
           index: t,
           option: e,
-          size: _,
+          size: q,
           disabled: e.disabled,
-          highlighted: n === P,
-          selected: F.has(e.key)
+          highlighted: n === C,
+          selected: E.has(e.key)
         }) }, e.key);
       },
       [
-        q,
-        c,
-        ee,
-        A,
+        z,
+        o,
         te,
-        _,
-        P,
-        F,
-        G
+        $,
+        ne,
+        q,
+        C,
+        E,
+        J
       ]
     );
-    se(() => {
-      U && f();
-    }, [U, f]), se(() => {
-      N === !0 && f();
-    }, [N, f]);
-    const L = W(() => {
-      if (!k.current || !b.current) return;
-      const e = V === "field" ? "width" : "minWidth", t = Math.round(b.current.getBoundingClientRect().width);
-      Q.current !== t && (Q.current = t, k.current.style[e] = `${t}px`);
-    }, [V]);
-    ct(() => {
-      if (!l || !b.current) return;
+    j(() => {
+      V && u();
+    }, [V, u]), j(() => {
+      O === !0 && u();
+    }, [O, u]);
+    const K = W(() => {
+      if (!b.current || !w.current) return;
+      const e = _ === "field" ? "width" : "minWidth", t = Math.round(w.current.getBoundingClientRect().width);
+      X.current !== t && (X.current = t, b.current.style[e] = `${t}px`);
+    }, [_]);
+    j(() => {
+      if (!i || !w.current) return;
       const e = () => {
-        g.current && window.clearTimeout(g.current), g.current = window.setTimeout(L, 50);
-      }, t = new it(e);
-      return t.observe(b.current), L(), () => {
-        t.disconnect(), g.current && window.clearTimeout(g.current), g.current = null;
+        h.current && window.clearTimeout(h.current), h.current = window.setTimeout(K, 50);
+      }, t = new ct(e);
+      return t.observe(w.current), K(), () => {
+        t.disconnect(), h.current && window.clearTimeout(h.current), h.current = null;
       };
-    }, [l, L]);
-    const et = m ? i.map((e) => e.key?.toString()) : i[0]?.key?.toString(), tt = c.length > 0 || Le || !!$, nt = O ? /* @__PURE__ */ a("span", { ...qe(), children: Ie ? `${O} *` : O }) : void 0;
+    }, [i, K]);
+    const et = p ? c.map((e) => e.key?.toString()) : c[0]?.key?.toString(), tt = o.length > 0 || Be || !!H, nt = D ? /* @__PURE__ */ l("span", { ...qe(), children: Ie ? `${D} *` : D }) : void 0;
     return /* @__PURE__ */ rt(
       "div",
       {
         ..._e({
-          ref: b,
-          ...u && { "aria-disabled": !0 },
-          className: ne(v.component, { [v.block]: ke }, x)
+          ref: w,
+          ...d && { "aria-disabled": !0 },
+          className: re(k.component, { [k.block]: ke }, x)
         }),
-        onKeyDown: u ? void 0 : Qe,
+        onKeyDown: d ? void 0 : Qe,
         tabIndex: -1,
         id: "slect_wrapper",
-        "data-test-id": j("combobox", o),
+        "data-test-id": A("combobox", s),
         children: [
-          w && /* @__PURE__ */ a(
-            dt,
+          I && /* @__PURE__ */ l(
+            at,
             {
-              className: v.nativeSelect,
-              disabled: u,
-              multiple: m,
-              name: h,
+              className: k.nativeSelect,
+              disabled: d,
+              multiple: p,
+              name: m,
               value: et,
               onChange: Ye,
               options: R
             }
           ),
-          /* @__PURE__ */ a(
-            Se,
+          /* @__PURE__ */ l(
+            De,
             {
-              selectedMultiple: i,
-              selected: i[0],
-              multiple: m,
-              open: l,
-              disabled: u,
+              selectedMultiple: c,
+              selected: c[0],
+              multiple: p,
+              open: i,
+              disabled: d,
               size: S,
-              placeholder: ve,
+              placeholder: xe,
               label: nt,
-              Arrow: z && /* @__PURE__ */ a(z, { open: l }),
+              Arrow: G && /* @__PURE__ */ l(G, { open: i }),
               error: we,
               hint: be,
               valueRenderer: Ce,
               className: le,
               innerProps: {
                 onBlur: Je,
-                onFocus: u ? void 0 : Ge,
-                onClick: u ? void 0 : Xe,
-                tabIndex: w || u ? -1 : 0,
-                ref: oe([p.ref]),
-                id: p.id,
-                "aria-labelledby": p["aria-labelledby"],
-                "aria-controls": p["aria-controls"],
-                "aria-autocomplete": I ? p["aria-autocomplete"] : void 0
+                onFocus: d ? void 0 : Ge,
+                onClick: d ? void 0 : Xe,
+                tabIndex: I || d ? -1 : 0,
+                ref: oe([f.ref]),
+                id: f.id,
+                "aria-labelledby": f["aria-labelledby"],
+                "aria-controls": f["aria-controls"],
+                "aria-autocomplete": y ? f["aria-autocomplete"] : void 0
               },
-              dataTestId: j("field", o),
-              ...xe
+              dataTestId: A("field", s),
+              ...Re
             }
           ),
-          h && !w && i.map((e) => /* @__PURE__ */ a("input", { type: "hidden", name: h, value: e.key }, e.key)),
-          !w && /* @__PURE__ */ a(
-            lt,
+          m && !I && c.map((e) => /* @__PURE__ */ l("input", { type: "hidden", name: m, value: e.key }, e.key)),
+          !I && /* @__PURE__ */ l(
+            it,
             {
-              open: l,
+              open: i,
               withTransition: !1,
-              anchorElement: J.current,
+              anchorElement: Q.current,
               position: pe,
               offset: me,
               withArrow: he,
               preventFlip: ge,
               className: de,
-              popperClassName: v.popoverInner,
+              popperClassName: k.popoverInner,
               update: Fe,
               zIndex: Ke,
-              children: tt && /* @__PURE__ */ a(
+              children: tt && /* @__PURE__ */ l(
                 "div",
                 {
                   ...ze,
-                  className: ne(ue, v.optionsList),
-                  children: /* @__PURE__ */ a(
-                    Oe,
+                  className: re(ue, k.optionsList),
+                  children: /* @__PURE__ */ l(
+                    Pe,
                     {
-                      ...Re,
-                      flatOptions: c,
-                      highlightedIndex: P,
-                      open: l,
+                      ...ve,
+                      flatOptions: o,
+                      highlightedIndex: C,
+                      open: i,
                       size: S,
-                      toggleMenu: K,
-                      actionButton: $,
+                      toggleMenu: F,
+                      actionButton: H,
                       options: ae ?? R,
                       Optgroup: Ee,
                       Option: Ze,
-                      visibleOptions: Be,
-                      onScroll: Ne,
-                      dataTestId: j("options-list", o)
+                      visibleOptions: Le,
+                      onScroll: Se,
+                      dataTestId: A("options-list", s)
                     }
                   )
                 }
@@ -333,5 +357,5 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
   }
 );
 export {
-  vt as BaseSelect
+  kt as BaseSelect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alphakits/ui",
-    "version": "2.5.3",
+    "version": "2.5.5",
     "files": [
         "dist"
     ],