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

package/dist/components/SearchSelect/SearchSelect.js

@@ -1,256 +1,267 @@
-import { jsx as o, jsxs as S } from "react/jsx-runtime";
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
 import { getFieldAccessibility$u as Ee } from "../../shared/fieldAccessibility.js";
-import { useState as Ke, useRef as V, useEffect as z, useMemo as Pe } from "react";
+import { useState as Ke, useRef as _, useEffect as k, useMemo as Pe } from "react";
 /* empty css                 */
 import { createPortal as Ae } from "react-dom";
 /* empty css                  */
 /* empty css                 */
-import { useSelectEngine$u as Be } from "../../hooks/useSelectEngine.js";
-import { isSameOptionValue$u as Fe, getOptionKeys$u as He } from "../../shared/optionValue.js";
-import { getPopupTransitionStyle$u as C } from "../../shared/popupTransition.js";
+import { useSelectEngine$u as Fe } from "../../hooks/useSelectEngine.js";
+import { isSameOptionValue$u as He, getOptionKeys$u as Be } from "../../shared/optionValue.js";
+import { getPopupTransitionStyle$u as U } from "../../shared/popupTransition.js";
 import { useFlippedPlacement$u as Ge } from "./useFlippedPlacement.js";
 import { SearchSelectOption$u as Me } from "./SearchSelectOption.js";
 import { isCompact$u as We, sizeClassName$u as Ye } from "../../shared/size.js";
 import { getPortalScopeProps$u as qe } from "../../shared/uiKitDefaults.js";
 import { resolveValidation$u as Je } from "../../vanilla/core/validation.js";
 const ot = ({
-  "aria-label": ee,
-  "aria-labelledby": te,
-  "aria-describedby": ce,
-  title: O = "",
-  required: R = !1,
-  options: T,
-  styleSelectContainer: se,
-  styleTitle: ie,
-  styleSelect: le,
-  lineUp: v = !1,
-  rowGap: re = 4,
-  columnGap: oe = 20,
-  placeholder: ae = "Не выбрано",
+  "aria-label": I,
+  "aria-labelledby": C,
+  "aria-describedby": V,
+  title: v = "",
+  required: z = !1,
+  options: R,
+  styleSelectContainer: ee,
+  styleTitle: te,
+  styleSelect: ce,
+  lineUp: S = !1,
+  rowGap: se = 4,
+  columnGap: ie = 20,
+  placeholder: re = "Не выбрано",
   value: t,
-  isClearable: g = !1,
+  isClearable: le = !1,
   onChange: f,
-  className: ne,
-  tableView: $ = !1,
-  size: D,
-  validationText: de = "Заполните поле",
-  validationOn: L,
-  error: pe,
-  absoluteValidationText: fe,
+  className: oe,
+  tableView: T = !1,
+  size: $,
+  validationText: ae = "Заполните поле",
+  validationOn: D,
+  error: ne,
+  absoluteValidationText: de,
   disabled: n,
-  portalOn: me,
-  onInputChange: y,
-  loading: b,
-  inputValue: x,
+  portalOn: pe,
+  onInputChange: u,
+  loading: x,
+  inputValue: y,
   onInputValueChange: c,
-  emptyOptionsText: be = "Ничего не найдено",
-  id: xe
+  emptyOptionsText: fe = "Ничего не найдено",
+  id: me
 }) => {
-  const u = We(D, $), E = Ye(D, $), w = Je({ error: pe, validationOn: L, validationText: de }), [j, m] = Ke(""), K = V(!1), a = typeof x == "string" && typeof c == "function", r = j && !a ? T.filter((e) => (e.label ?? "").toLowerCase().includes((a ? x : j).toLowerCase())) : T, P = r.findIndex((e) => Fe(e == null ? void 0 : e.value, t == null ? void 0 : t.value)), d = Be({
-    optionsLength: r.length,
-    initialIndex: Math.max(0, P),
-    selectedIndex: P,
+  const m = We($, T), L = Ye($, T), O = Je({ error: ne, validationOn: D, validationText: ae }), [g, b] = Ke(""), E = _(!1), a = typeof y == "string" && typeof c == "function", o = g && !a ? R.filter((e) => (e.label ?? "").toLowerCase().includes((a ? y : g).toLowerCase())) : R, K = o.findIndex((e) => He(e == null ? void 0 : e.value, t == null ? void 0 : t.value)), d = Fe({
+    optionsLength: o.length,
+    initialIndex: Math.max(0, K),
+    selectedIndex: K,
     disabled: n,
-    portalOn: me,
-    loading: b,
-    id: xe,
+    portalOn: pe,
+    loading: x,
+    id: me,
     idPrefix: "u-search-select",
     // Под полем, а не в 30 пикселях от его верха: прежняя постоянная
     // подходила только компактному полю и накрывала обычное.
     getPortalPosition: (e) => ({ x: e.x, y: e.y + 60 + e.height + e.scrollY }),
     onSelectByIndex: (e) => {
-      const l = r[e];
-      l && W.current(l);
+      const r = o[e];
+      r && M.current(r);
     }
   }), {
-    isOpen: i,
-    blockRef: A,
-    portalOptionsRef: B,
+    isOpen: s,
+    blockRef: P,
+    portalOptionsRef: A,
     optionsListRef: F,
     listboxId: p,
-    activeDescendantId: ye,
-    activeIndex: ue,
-    hoveredIndex: he,
-    setHoveredIndex: Se,
-    handleKeyDown: Oe,
+    activeDescendantId: be,
+    activeIndex: xe,
+    hoveredIndex: ye,
+    setHoveredIndex: ue,
+    handleKeyDown: he,
     shouldRenderPortal: ve,
-    portalStatus: ge,
-    shouldRenderLocal: we,
-    localStatus: je,
+    portalStatus: Se,
+    shouldRenderLocal: Oe,
+    localStatus: ge,
     isAnimated: H,
-    portalWidth: ke,
-    anchor: Ne,
-    usePortal: k
-  } = d, s = d.portalPosition, ze = Ee(p, O, R, w, {
-    "aria-label": ee,
-    "aria-labelledby": te,
-    "aria-describedby": ce
-  }), G = d.close, M = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), W = V(() => {
-  }), { flippedTop: Re, flippedUp: Te } = Ge({
-    isOpen: i,
-    portalOn: k,
-    anchor: Ne,
-    blockRef: A,
-    portalOptionsRef: B,
+    portalWidth: we,
+    anchor: je,
+    usePortal: w
+  } = d, i = d.portalPosition, Ne = Ee(p, v, z, O, {
+    "aria-label": I,
+    "aria-labelledby": C,
+    "aria-describedby": V
+  }), B = d.close, G = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), M = _(() => {
+  }), { flippedTop: ke, flippedUp: ze } = Ge({
+    isOpen: s,
+    portalOn: w,
+    anchor: je,
+    blockRef: P,
+    portalOptionsRef: A,
     optionsListRef: F,
-    dependencies: [s == null ? void 0 : s.x, s == null ? void 0 : s.y, r.length, b]
+    dependencies: [i == null ? void 0 : i.x, i == null ? void 0 : i.y, o.length, x]
   });
-  z(() => {
-    t && Object.keys(t).length == 0 && m("");
-  }, [t]), z(() => {
-    t != null && t.label && Object.keys(t).length && !i && m(t.label);
-  }, [i, t]);
-  const N = a ? x : j, $e = (e) => {
-    n || (i || d.open(e.currentTarget), a ? c && c(e.target.value) : m(e.target.value), y && y(e.target.value));
-  }, h = !!(t && typeof t == "object" && t.value !== void 0 && String(t.value).length > 0), Y = t != null && t.label && Object.keys(t).length ? t.label : "", q = !i && !N ? Y : "";
-  z(() => {
-    const e = K.current;
-    K.current = i, e && !i && a && h && x.length > 0 && (c == null || c(""));
-  }, [i, a, h, x, c]);
-  const De = () => {
-    n || (f == null || f(null), a ? c == null || c("") : m(""), y && y(""), G());
+  k(() => {
+    t && Object.keys(t).length == 0 && b("");
+  }, [t]), k(() => {
+    t != null && t.label && Object.keys(t).length && !s && b(t.label);
+  }, [s, t]);
+  const j = a ? y : g, Re = (e) => {
+    n || (s || d.open(e.currentTarget), a ? c && c(e.target.value) : b(e.target.value), u && u(e.target.value));
+  }, N = !!(t && typeof t == "object" && t.value !== void 0 && String(t.value).length > 0), W = t != null && t.label && Object.keys(t).length ? t.label : "", Y = !s && !j ? W : "";
+  k(() => {
+    const e = E.current;
+    E.current = s, e && !s && a && N && y.length > 0 && (c == null || c(""));
+  }, [s, a, N, y, c]);
+  const Te = () => {
+    n || (f == null || f(null), a ? c == null || c("") : b(""), u && u(""), B());
+  }, q = (e) => {
+    e.preventDefault(), e.stopPropagation(), Te();
   }, J = (e) => {
-    e.preventDefault(), e.stopPropagation(), De();
-  }, Q = (e) => {
-    f == null || f(e), G(), a ? c == null || c("") : m(e.label ?? "");
-  }, Le = Pe(() => He(r), [r]);
-  W.current = Q;
-  const X = g && h ? u ? "calc(28 * var(--u-unit, 1px))" : "calc(40 * var(--u-unit, 1px))" : void 0, Z = g ? { display: "block" } : null, _ = /* @__PURE__ */ o("div", { className: "u-selectbox-empty-text", children: be }), U = (e, l) => /* @__PURE__ */ o(
+    f == null || f(e), B(), a ? c == null || c("") : b(e.label ?? "");
+  }, $e = Pe(() => Be(o), [o]);
+  M.current = J;
+  const Q = le && !n && N, De = Q ? m ? "calc(44 * var(--u-unit, 1px))" : "calc(64 * var(--u-unit, 1px))" : m ? "calc(28 * var(--u-unit, 1px))" : "calc(40 * var(--u-unit, 1px))", X = /* @__PURE__ */ l("div", { className: "u-selectbox-empty-text", children: fe }), Z = (e, r) => /* @__PURE__ */ l(
     Me,
     {
       option: e,
-      index: l,
+      index: r,
       listboxId: p,
       selectedValue: t == null ? void 0 : t.value,
-      isActive: he === l || ue === l,
-      tableView: u,
-      onSelect: Q,
-      onHover: Se
+      isActive: ye === r || xe === r,
+      tableView: m,
+      onSelect: J,
+      onHover: ue
     },
-    Le[l]
-  ), I = /* @__PURE__ */ o(
+    $e[r]
+  ), Le = /* @__PURE__ */ l(
     "input",
     {
-      className: i ? "u-selectbox-select u-selectbox-select-open" : "u-selectbox-select",
+      className: s ? "u-selectbox-select u-selectbox-select-open" : "u-selectbox-select",
       role: "combobox",
-      ...ze,
-      "aria-expanded": i,
+      ...Ne,
+      "aria-expanded": s,
       "aria-haspopup": "listbox",
       "aria-controls": p,
       "aria-autocomplete": "list",
-      "aria-activedescendant": ye,
+      "aria-activedescendant": be,
       onClick: (e) => {
-        N.length > 0 && (a ? c && c("") : m("")), !n && i && e.currentTarget.blur(), d.toggle(e.currentTarget);
+        j.length > 0 && (a ? c && c("") : b("")), !n && s && e.currentTarget.blur(), d.toggle(e.currentTarget);
       },
       style: Object.assign(
-        u ? {
+        m ? {
           height: "var(--u-compact-height)",
           fontSize: "var(--u-compact-font-size)",
           lineHeight: 1,
           padding: "var(--u-compact-padding)",
           borderRadius: "calc(8 * var(--u-unit, 1px))"
         } : {},
-        X != null ? { paddingRight: X } : {},
-        L && { border: "1px solid var(--u-color-error, #EF302B)" }
+        { paddingRight: De },
+        D && { border: "1px solid var(--u-color-error, #EF302B)" }
       ),
       type: "text",
       disabled: n,
-      value: N || q,
+      value: j || Y,
       onFocus: (e) => {
-        q && e.currentTarget.select();
+        Y && e.currentTarget.select();
       },
-      onChange: $e,
-      onKeyDown: Oe,
-      placeholder: Y || ae
+      onChange: Re,
+      onKeyDown: he,
+      placeholder: W || re
     }
   );
-  return /* @__PURE__ */ S("div", { className: `u-react-select-container${E ? ` ${E}` : ""} ${ne ?? ""}`, style: { position: "relative" }, children: [
-    /* @__PURE__ */ S(
+  return /* @__PURE__ */ h("div", { className: `u-react-select-container${L ? ` ${L}` : ""} ${oe ?? ""}`, style: { position: "relative" }, children: [
+    /* @__PURE__ */ h(
       "div",
       {
         style: Object.assign(
           {
             display: "flex",
-            flexDirection: v ? "row" : "column",
-            rowGap: v ? null : M(re),
-            columnGap: v ? M(oe) : null
+            flexDirection: S ? "row" : "column",
+            rowGap: S ? null : G(se),
+            columnGap: S ? G(ie) : null
           },
-          se
+          ee
         ),
         children: [
-          O && /* @__PURE__ */ o(
+          v && /* @__PURE__ */ l(
             "div",
             {
               id: `${p}-label`,
-              className: `${R ? "u-required" : ""} u-react-select-title`,
+              className: `${z ? "u-required" : ""} u-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)))"
                 },
-                ie
+                te
               ),
-              children: O
+              children: v
             }
           ),
-          /* @__PURE__ */ S(
+          /* @__PURE__ */ h(
             "div",
             {
               className: `u-selectbox${n ? " u-selectbox-disabled" : ""} u-react-select`,
-              ref: A,
+              ref: P,
               style: Object.assign(
                 {
                   width: "100%"
                 },
-                le
+                ce
               ),
               children: [
-                g ? /* @__PURE__ */ S("div", { style: { position: "relative", width: "100%" }, children: [
-                  I,
-                  !n && h ? /* @__PURE__ */ o(
+                /* @__PURE__ */ h("div", { style: { position: "relative", width: "100%" }, children: [
+                  Le,
+                  Q ? /* @__PURE__ */ l(
                     "div",
                     {
                       role: "button",
                       tabIndex: -1,
                       className: "u-selectbox-select-icon-cross",
                       "aria-label": "Очистить",
-                      onClick: J,
+                      onClick: q,
                       onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && J(e);
+                        (e.key === "Enter" || e.key === " ") && q(e);
                       },
-                      style: {
-                        zIndex: 2,
-                        cursor: "pointer",
-                        right: u ? "calc(8 * var(--u-unit, 1px))" : "calc(20 * var(--u-unit, 1px))"
-                      }
+                      style: Object.assign(
+                        { zIndex: 2, cursor: "pointer" },
+                        m ? { right: "calc(28 * var(--u-unit, 1px))" } : {}
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ l(
+                    "i",
+                    {
+                      className: "u-selectbox-select-icon-arrow",
+                      "aria-hidden": "true",
+                      style: Object.assign(
+                        { pointerEvents: "none" },
+                        s ? {
+                          transform: "rotate(180deg)",
+                          top: "calc(50% - calc(4 * var(--u-unit, 1px)))"
+                        } : {},
+                        m ? { right: "calc(8 * var(--u-unit, 1px))" } : {}
+                      )
                     }
-                  ) : null
-                ] }) : I,
-                i && b ? /* @__PURE__ */ o(
+                  )
+                ] }),
+                s && x ? /* @__PURE__ */ l(
                   "div",
                   {
                     className: "u-selectbox-options",
-                    style: Object.assign(
-                      { textAlign: "center", padding: "calc(16 * var(--u-unit, 1px))" },
-                      Z ?? {}
-                    ),
-                    children: /* @__PURE__ */ o("span", { className: "u-selectbox-loading", children: "Загрузка..." })
+                    style: { textAlign: "center", padding: "calc(16 * var(--u-unit, 1px))", display: "block" },
+                    children: /* @__PURE__ */ l("span", { className: "u-selectbox-loading", children: "Загрузка..." })
                   }
                 ) : null,
-                !b && k && ve && s && Ae(
-                  /* @__PURE__ */ o(
+                !x && w && ve && i && Ae(
+                  /* @__PURE__ */ l(
                     "div",
                     {
-                      ref: B,
+                      ref: A,
                       ...qe(),
                       id: p,
                       role: "listbox",
                       className: "u-selectbox-options",
                       style: Object.assign(
                         {
-                          width: ke,
-                          left: s == null ? void 0 : s.x,
-                          top: Re ?? (s == null ? void 0 : s.y) - 60,
+                          width: we,
+                          left: i == null ? void 0 : i.x,
+                          top: ke ?? (i == null ? void 0 : i.y) - 60,
                           opacity: 1,
                           visibility: "visible",
                           height: "fit-content",
@@ -260,30 +271,29 @@ const ot = ({
                           display: "block"
                         },
                         d.optionsStyle,
-                        C(ge, H)
+                        U(Se, H)
                       ),
-                      children: r.length > 0 ? r.map((e, l) => U(e, l)) : _
+                      children: o.length > 0 ? o.map((e, r) => Z(e, r)) : X
                     }
                   ),
                   document.body
                 ),
-                !b && !k && we ? /* @__PURE__ */ o(
+                !x && !w && Oe ? /* @__PURE__ */ l(
                   "div",
                   {
                     ref: F,
                     id: p,
                     role: "listbox",
-                    className: Te ? "u-selectbox-options u-selectbox-options-up" : "u-selectbox-options",
+                    className: ze ? "u-selectbox-options u-selectbox-options-up" : "u-selectbox-options",
                     style: Object.assign(
                       {},
-                      Z ?? {},
                       // см. Select: без своего `display` переход срывается на кадре,
                       // когда vanilla уже спрятала список, а узел ещё нужен
                       { display: "block" },
                       d.optionsStyle,
-                      C(je, H)
+                      U(ge, H)
                     ),
-                    children: r.length > 0 ? r.map((e, l) => U(e, l)) : _
+                    children: o.length > 0 ? o.map((e, r) => Z(e, r)) : X
                   }
                 ) : null
               ]
@@ -292,7 +302,7 @@ const ot = ({
         ]
       }
     ),
-    w.showText && /* @__PURE__ */ o("h5", { id: `${p}-error`, className: "h5 clr-red-main", style: fe ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: w.text })
+    O.showText && /* @__PURE__ */ l("h5", { id: `${p}-error`, className: "h5 clr-red-main", style: de ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: O.text })
   ] });
 };
 export { ot as SearchSelect$u };

package/dist/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAC3D,OAAO,aAAa,CAAC;AACrB,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,cAAc,CAAC;AA2BvE,eAAO,MAAM,IAAI,GAAI,wHAWlB,cAAc,4CA6LhB,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAC3D,OAAO,aAAa,CAAC;AACrB,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,cAAc,CAAC;AA2BvE,eAAO,MAAM,IAAI,GAAI,wHAWlB,cAAc,4CA8LhB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -3,20 +3,20 @@ import { jsxs as a, jsx as r } from "react/jsx-runtime";
 /* empty css                                  */
 /* empty css      */
 /* empty css                  */
-import { useState as x, useRef as p, useEffect as D, Fragment as ee } from "react";
+import { useState as D, useRef as p, useEffect as ee, Fragment as oe } from "react";
 import { Icon$u as b } from "../Icon/Icon.js";
-import { Tooltip$u as oe } from "../Tooltip/Tooltip.js";
-import { useDismiss$u as te } from "../../hooks/useDismiss.js";
-import { useMountTransition$u as re } from "../../hooks/useMountTransition.js";
-import { getPopupTransitionStyle$u as ne, POPUP_TRANSITION_MS$u as se } from "../../shared/popupTransition.js";
-import { useTabsOverflow$u as ie } from "./useTabsOverflow.js";
-import { useTabsIndicator$u as le } from "./useTabsIndicator.js";
-import { useTabsScroll$u as ae } from "./useTabsScroll.js";
-import { useAutoId$u as ce } from "../../hooks/useAutoId.js";
-import { isPlainLeftClick$u as ue } from "../../vanilla/core/linkClick.js";
-const me = [], Se = ({
+import { Tooltip$u as te } from "../Tooltip/Tooltip.js";
+import { useDismiss$u as re } from "../../hooks/useDismiss.js";
+import { useMountTransition$u as ne } from "../../hooks/useMountTransition.js";
+import { getPopupTransitionStyle$u as se, POPUP_TRANSITION_MS$u as ie } from "../../shared/popupTransition.js";
+import { useTabsOverflow$u as le } from "./useTabsOverflow.js";
+import { useTabsIndicator$u as ae } from "./useTabsIndicator.js";
+import { useTabsScroll$u as ce } from "./useTabsScroll.js";
+import { useAutoId$u as ue } from "../../hooks/useAutoId.js";
+import { isPlainLeftClick$u as me } from "../../vanilla/core/linkClick.js";
+const de = [], Se = ({
   onClick: h,
-  tabsData: n = me,
+  tabsData: n = de,
   activeTab: m,
   className: w = "",
   variant: g = "line",
@@ -26,29 +26,29 @@ const me = [], Se = ({
   LinkComponent: $,
   ariaLabel: B
 }) => {
-  const { containerRef: K, measureRef: j, moreMeasureRef: q, visible: z, overflow: u, paddingOf: F, promote: L } = ie(n, m, y, g !== "segment"), [d, c] = x(!1), R = p(null), N = p(null), k = p(null), A = ce(void 0, "u-tabs-menu"), { shouldRender: H, status: J, isAnimated: Y } = re({ isOpen: d, duration: se }), O = p(u);
+  const { containerRef: K, measureRef: j, moreMeasureRef: q, visible: z, overflow: u, paddingOf: F, morePadding: L, promote: H } = le(n, m, y, g !== "segment"), [d, c] = D(!1), R = p(null), N = p(null), k = p(null), A = ue(void 0, "u-tabs-menu"), { shouldRender: J, status: Y, isAnimated: G } = ne({ isOpen: d, duration: ie }), O = p(u);
   d && (O.current = u);
-  const f = g === "segment", T = n.some((e) => e.url), v = f ? "u-tab-segment" : "u-tab-line", G = f ? "u-tab-segment-active" : "u-tab-active", { trackRef: I, indicatorRef: Q } = le(m, `${g}|${y}|${JSON.stringify(n.map((e) => e.id))}`);
-  ae(I, !f, m), te({ refs: [R], enabled: d, onDismiss: () => c(!1) }), D(() => {
+  const f = g === "segment", T = n.some((e) => e.url), v = f ? "u-tab-segment" : "u-tab-line", Q = f ? "u-tab-segment-active" : "u-tab-active", { trackRef: I, indicatorRef: V } = ae(m, `${g}|${y}|${JSON.stringify(n.map((e) => e.id))}`);
+  ce(I, !f, m), re({ refs: [R], enabled: d, onDismiss: () => c(!1) }), ee(() => {
     u.length || c(!1);
   }, [u.length]);
-  const S = (e) => {
+  const P = (e) => {
     var t, s;
     if ((t = n[e]) != null && t.disabled) return;
     const o = u.includes(e);
-    L(e), c(!1), h == null || h(n[e]), o && ((s = N.current) == null || s.focus({ preventScroll: !0 }));
-  }, P = () => {
+    H(e), c(!1), h == null || h(n[e]), o && ((s = N.current) == null || s.focus({ preventScroll: !0 }));
+  }, S = () => {
     var e;
     return Array.from(((e = k.current) == null ? void 0 : e.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) || []);
-  }, V = (e) => {
+  }, X = (e) => {
     var t;
-    const o = P();
+    const o = S();
     (t = o[e < 0 ? o.length - 1 : e]) == null || t.focus();
-  }, X = (e) => {
+  }, Z = (e) => {
     var i, l;
-    const o = P(), t = o.indexOf(document.activeElement), s = e.key === "ArrowDown" ? (t + 1) % o.length : e.key === "ArrowUp" ? (t - 1 + o.length) % o.length : e.key === "Home" ? 0 : e.key === "End" ? o.length - 1 : -1;
+    const o = S(), t = o.indexOf(document.activeElement), s = e.key === "ArrowDown" ? (t + 1) % o.length : e.key === "ArrowUp" ? (t - 1 + o.length) % o.length : e.key === "Home" ? 0 : e.key === "End" ? o.length - 1 : -1;
     s >= 0 ? (e.preventDefault(), (i = o[s]) == null || i.focus()) : e.key === "Escape" && (e.preventDefault(), c(!1), (l = N.current) == null || l.focus());
-  }, M = (e) => /* @__PURE__ */ r("span", { className: "u-tabs-title", "data-label": e.title, children: e.title }), Z = (e) => {
+  }, M = (e) => /* @__PURE__ */ r("span", { className: "u-tabs-title", "data-label": e.title, children: e.title }), W = (e) => {
     if (!e.icon) return M(e);
     const o = e.iconPosition === "right";
     return /* @__PURE__ */ a("span", { className: `u-tabs-content${o ? " u-tabs-content-reverse" : ""}`, children: [
@@ -58,16 +58,16 @@ const me = [], Se = ({
   }, C = (e, o, t, s = !1) => {
     const i = n[e];
     if (!i.url)
-      return /* @__PURE__ */ r("button", { type: "button", ...o, onClick: s ? void 0 : () => S(e), children: t });
+      return /* @__PURE__ */ r("button", { type: "button", ...o, onClick: s ? void 0 : () => P(e), children: t });
     if (s || i.disabled)
       return /* @__PURE__ */ r("a", { ...o, role: o.role ?? (s ? void 0 : "link"), children: t });
-    const l = (W) => {
-      ue(W) && S(e);
+    const l = (x) => {
+      me(x) && P(e);
     };
     return $ ? /* @__PURE__ */ r($, { to: i.url, ...o, onClick: l, children: t }) : /* @__PURE__ */ r("a", { href: i.url, ...o, onClick: l, children: t });
   }, E = (e, o = !1) => {
     const t = n[e], s = !!(t.icon && t.iconOnly), i = t.icon ? s ? " u-tab-icon-only" : ` u-tab-with-icon${t.iconPosition === "right" ? " u-tab-icon-right" : ""}` : "", l = C(e, {
-      className: `${v}${i}${t.id === m ? ` ${G}` : ""}${t.disabled ? " u-tab--disabled" : ""}`,
+      className: `${v}${i}${t.id === m ? ` ${Q}` : ""}${t.disabled ? " u-tab--disabled" : ""}`,
       "data-label": s ? void 0 : t.title,
       "aria-label": s ? t.title : void 0,
       "data-measure-tab": o ? "" : void 0,
@@ -78,8 +78,8 @@ const me = [], Se = ({
       tabIndex: o || t.disabled ? -1 : void 0,
       "aria-current": !o && t.id === m ? "page" : void 0,
       "aria-disabled": !o && t.disabled ? "true" : void 0
-    }, Z(t), o);
-    return /* @__PURE__ */ r("div", { className: "u-tabs-item", children: U && !_ && !o ? /* @__PURE__ */ r(oe, { tooltipText: t.title, portalOn: !0, className: "u-tabs-tooltip", children: l }) : l }, e);
+    }, W(t), o);
+    return /* @__PURE__ */ r("div", { className: "u-tabs-item", children: U && !_ && !o ? /* @__PURE__ */ r(te, { tooltipText: t.title, portalOn: !0, className: "u-tabs-tooltip", children: l }) : l }, e);
   };
   return /* @__PURE__ */ a(
     T ? "nav" : "div",
@@ -89,14 +89,14 @@ const me = [], Se = ({
       "aria-label": T ? B : void 0,
       children: [
         /* @__PURE__ */ a("div", { className: "u-tabs-track", ref: I, children: [
-          /* @__PURE__ */ r("span", { className: "u-tabs-indicator", ref: Q, "aria-hidden": "true" }),
+          /* @__PURE__ */ r("span", { className: "u-tabs-indicator", ref: V, "aria-hidden": "true" }),
           z.map((e) => E(e)),
           u.length > 0 && /* @__PURE__ */ a(
             "div",
             {
               className: "u-tabs-more",
               ref: R,
-              onKeyDown: X,
+              onKeyDown: Z,
               onBlur: (e) => {
                 const o = e.relatedTarget;
                 o && !e.currentTarget.contains(o) && c(!1);
@@ -108,12 +108,13 @@ const me = [], Se = ({
                     type: "button",
                     ref: N,
                     className: `${v} u-tabs-more-trigger`,
+                    style: L(),
                     "aria-expanded": d,
                     "aria-haspopup": "menu",
                     "aria-controls": A,
                     onClick: () => c((e) => !e),
                     onKeyDown: (e) => {
-                      (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), c(!0), requestAnimationFrame(() => V(e.key === "ArrowUp" ? -1 : 0)));
+                      (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), c(!0), requestAnimationFrame(() => X(e.key === "ArrowUp" ? -1 : 0)));
                     },
                     children: [
                       /* @__PURE__ */ r("span", { children: "Ещё" }),
@@ -121,7 +122,7 @@ const me = [], Se = ({
                     ]
                   }
                 ),
-                H && /* @__PURE__ */ r("div", { className: "u-tabs-more-menu", role: "menu", id: A, ref: k, style: ne(J, Y), children: O.current.filter((e) => n[e]).map((e) => /* @__PURE__ */ r(ee, { children: C(e, {
+                J && /* @__PURE__ */ r("div", { className: "u-tabs-more-menu", role: "menu", id: A, ref: k, style: se(Y, G), children: O.current.filter((e) => n[e]).map((e) => /* @__PURE__ */ r(oe, { children: C(e, {
                   role: "menuitem",
                   "aria-disabled": n[e].disabled ? "true" : void 0,
                   tabIndex: n[e].disabled ? -1 : void 0