urfu-ui-kit-react 2.1.5 → 2.1.6

package/dist/components/Table/TableRow.js

@@ -1,136 +1,140 @@
 import { jsx as p, jsxs as X } from "react/jsx-runtime";
 import { adaptTypographyStyle$u as S, pxAdd$u as w } from "./Table.helpers.js";
-import { handleDragOver$u as Y, handleDragStart$u as o } from "./Functions.js";
-const q = "auto", J = ({
+import { handleDragOver$u as Y, handleDragStart$u as q } from "./Functions.js";
+import { prefersReducedMotion$u as z } from "../../vanilla/core/motion.js";
+const C = "auto", P = ({
   item: r,
   i: e,
-  level: k,
-  rowKey: b,
-  absoluteIndex: s,
+  level: v,
+  rowKey: o,
+  absoluteIndex: i,
   filteredColumns: f,
   id: $,
   virtualizationOn: h,
   start: j,
-  draggable: L,
-  rowRefs: D,
+  draggable: D,
+  rowRefs: L,
   resize: a,
   columnWidths: y,
-  parentDataField: i,
+  parentDataField: s,
   calcLeftValues: W,
   handleDrop: x,
   insertChildRows: B,
   removeChildRows: E,
-  cellStyle: N,
-  tdStyle: A,
-  allTdStyleFunction: g,
-  cellContentStyle: M,
-  tdContentStyle: R,
-  allTdContentStyleFunction: v,
-  fillColumnIndex: O = -1
+  cellStyle: M,
+  tdStyle: N,
+  allTdStyleFunction: k,
+  cellContentStyle: R,
+  tdContentStyle: A,
+  allTdContentStyleFunction: g,
+  fillColumnIndex: b = -1
 }) => /* @__PURE__ */ p(
   "tr",
   {
-    "data-virtual-index": h && s !== void 0 ? s : void 0,
-    id: `row${k ? `${k}.` : ""}${e}`,
-    draggable: L,
-    onDragStart: (t) => o(t, String(e)),
+    "data-virtual-index": h && i !== void 0 ? i : void 0,
+    id: `row${v ? `${v}.` : ""}${e}`,
+    draggable: D,
+    onDragStart: (t) => q(t, String(e)),
     onDragOver: (t) => Y(t),
     onDrop: (t) => x(t, e),
-    ref: h && s !== void 0 ? (t) => {
-      D.current[s] = t;
+    ref: h && i !== void 0 ? (t) => {
+      L.current[i] = t;
     } : void 0,
-    children: f == null ? void 0 : f.map((t, d) => /* @__PURE__ */ X(
-      "td",
-      {
-        id: `${$}td${e}${d}`,
-        className: `${t.sticky ? "sticky" : ""}`,
-        style: S(
-          Object.assign(
-            {
-              left: t.sticky ? W(d) : "",
-              // Вид по умолчанию 2.0 — как в Meetings: 15px сверху и снизу,
-              // боковой отступ держит блок содержимого (.u-table-td-content).
-              // Инлайном, потому что vanilla задаёт ячейке свои 20px и порядок
-              // подключения стилей у проектов разный. tdStyle по-прежнему главнее.
-              padding: "calc(15 * var(--u-unit, 1px)) 0",
-              display: i && d === 0 && r[i] ? "flex" : "table-cell",
-              gap: "calc(4 * var(--u-preset-unit, 1px))"
-            },
-            N,
-            A,
-            t.tdStyle,
-            t.cellStyle,
-            g && g(r),
-            t.tdStyleFunction && t.tdStyleFunction(r)
-          )
-        ),
-        children: [
-          /* @__PURE__ */ p(
-            "div",
-            {
-              className: "u-table-td-content",
-              style: S(
-                Object.assign(
+    children: f == null ? void 0 : f.map((t, d) => {
+      var O;
+      return /* @__PURE__ */ X(
+        "td",
+        {
+          id: `${$}td${e}${d}`,
+          className: `${t.sticky ? "sticky" : ""}`,
+          style: S(
+            Object.assign(
+              {
+                left: t.sticky ? W(d) : "",
+                // Вид по умолчанию 2.0 — как в Meetings: 15px сверху и снизу,
+                // боковой отступ держит блок содержимого (.u-table-td-content).
+                // Инлайном, потому что vanilla задаёт ячейке свои 20px и порядок
+                // подключения стилей у проектов разный. tdStyle по-прежнему главнее.
+                padding: "calc(15 * var(--u-unit, 1px)) 0",
+                display: s && d === 0 && r[s] ? "flex" : "table-cell",
+                gap: "calc(4 * var(--u-preset-unit, 1px))"
+              },
+              M,
+              N,
+              t.tdStyle,
+              t.cellStyle,
+              k && k(r),
+              t.tdStyleFunction && t.tdStyleFunction(r)
+            )
+          ),
+          children: [
+            /* @__PURE__ */ p(
+              "div",
+              {
+                className: "u-table-td-content",
+                style: S(
+                  Object.assign(
+                    {
+                      // Растянутая колонка: width колонки — нижняя граница, иначе текст
+                      // переносится по ней посреди широкой пустой ячейки, а скелетон
+                      // меряет тот же узкий блок и висит по центру.
+                      width: d === b && !(a && !t.resizeOff) ? "100%" : a && !t.resizeOff && (t != null && t.width) ? y[t.field] >= t.width ? y[t.field] : w(t.width) : a && !t.resizeOff || t != null && t.width ? y[t.field] || (t == null ? void 0 : t.width) : C,
+                      minWidth: d === b && !(a && !t.resizeOff) && t.width ? w(t.width) : a && !t.resizeOff && t.width ? w(t.width) : "",
+                      position: t.sticky ? "sticky" : "",
+                      overflowX: "hidden",
+                      // break-word, а не anywhere: с anywhere минимальная ширина колонки без width — одна буква,
+                      // и на узком экране слова рвались посередине («Петр/ов»). Как во Vue-ките.
+                      overflowWrap: "break-word",
+                      overflowY: "hidden",
+                      display: "-webkit-box",
+                      WebkitLineClamp: 15,
+                      WebkitBoxOrient: "vertical"
+                    },
+                    R,
+                    A,
+                    t.tdContentStyle,
+                    t.cellContentStyle,
+                    g && g(r),
+                    t.tdContentStyleFunction && t.tdContentStyleFunction(r)
+                  )
+                ),
+                children: t.render ? t.render(r, e) : r[t.field]
+              }
+            ),
+            !r.notExpandable && s && d === 0 && (((O = r[s]) == null ? void 0 : O.length) ?? 0) > 0 && /* @__PURE__ */ p(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 13",
+                fill: "none",
+                style: {
+                  cursor: "pointer",
+                  margin: "auto calc(8 * var(--u-preset-unit, 1px)) auto auto",
+                  transform: r.parentDataOpened ? "rotate(180deg)" : "",
+                  transition: z() ? "none" : "transform var(--u-duration-base, .2s) var(--u-ease-move, cubic-bezier(.2, 0, 0, 1))"
+                },
+                onClick: () => {
+                  r.parentDataOpened ? E(e) : B(e);
+                },
+                children: /* @__PURE__ */ p(
+                  "path",
                   {
-                    // Растянутая колонка: width колонки — нижняя граница, иначе текст
-                    // переносится по ней посреди широкой пустой ячейки, а скелетон
-                    // меряет тот же узкий блок и висит по центру.
-                    width: d === O && !(a && !t.resizeOff) ? "100%" : a && !t.resizeOff && (t != null && t.width) ? y[t.field] >= t.width ? y[t.field] : w(t.width) : a && !t.resizeOff || t != null && t.width ? y[t.field] || (t == null ? void 0 : t.width) : q,
-                    minWidth: d === O && !(a && !t.resizeOff) && t.width ? w(t.width) : a && !t.resizeOff && t.width ? w(t.width) : "",
-                    position: t.sticky ? "sticky" : "",
-                    overflowX: "hidden",
-                    // break-word, а не anywhere: с anywhere минимальная ширина колонки без width — одна буква,
-                    // и на узком экране слова рвались посередине («Петр/ов»). Как во Vue-ките.
-                    overflowWrap: "break-word",
-                    overflowY: "hidden",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 15,
-                    WebkitBoxOrient: "vertical"
-                  },
-                  M,
-                  R,
-                  t.tdContentStyle,
-                  t.cellContentStyle,
-                  v && v(r),
-                  t.tdContentStyleFunction && t.tdContentStyleFunction(r)
+                    d: "M1 4.5625L5.99999 9.5625L11 4.5625",
+                    stroke: "#1E4391",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
                 )
-              ),
-              children: t.render ? t.render(r, e) : r[t.field]
-            }
-          ),
-          !r.notExpandable && i && d === 0 && r[i] && r[i].length > 0 && /* @__PURE__ */ p(
-            "svg",
-            {
-              width: "12",
-              height: "12",
-              viewBox: "0 0 12 13",
-              fill: "none",
-              style: {
-                cursor: "pointer",
-                margin: "auto calc(8 * var(--u-preset-unit, 1px)) auto auto",
-                transform: r.parentDataOpened ? "rotate(180deg)" : "",
-                transition: "transform 0.2s ease"
-              },
-              onClick: () => {
-                r.parentDataOpened ? E(e) : B(e);
-              },
-              children: /* @__PURE__ */ p(
-                "path",
-                {
-                  d: "M1 4.5625L5.99999 9.5625L11 4.5625",
-                  stroke: "#1E4391",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              )
-            }
-          )
-        ]
-      },
-      t.key ? t.key : t.field ? t.field : d
-    ))
+              }
+            )
+          ]
+        },
+        t.key ? t.key : t.field ? t.field : d
+      );
+    })
   },
-  b ?? r.id ?? (h ? j + e : e)
+  o ?? r.id ?? (h ? j + e : e)
 );
-export { J as TableRow$u };
+export { P as TableRow$u };

package/dist/components/Table/useTableColumnPinning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnPinning.d.ts","sourceRoot":"","sources":["../../../src/components/Table/useTableColumnPinning.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAa5D,uEAAuE;AACvE,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,EAC3E,OAAO,EAAE,sBAAsB,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO;;;;;;;;;;;;;;;;;;;sBAiBa,GAAG;6BAGzE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAHmE,GAAG;8BAGzE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyC5B"}
+{"version":3,"file":"useTableColumnPinning.d.ts","sourceRoot":"","sources":["../../../src/components/Table/useTableColumnPinning.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAa5D,uEAAuE;AACvE,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,EAC3E,OAAO,EAAE,sBAAsB,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO;;;;;;;;;;;;;;;;;;;sBAyB3B,GAAG;6BAG9C,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAHwC,GAAG;8BAG9C,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCf"}

package/dist/components/Table/useTableVirtualization.d.ts

@@ -1,6 +1,6 @@
 import type { SkeletonTdStyle } from "./Table.types";
-interface UseTableVirtualizationParams {
-    filteredData: any[];
+interface UseTableVirtualizationParams<Row> {
+    filteredData: Row[];
     virtualizationOn?: boolean;
     visibleRows: number;
     rowHeight: number;
@@ -10,13 +10,13 @@ interface UseTableVirtualizationParams {
     page?: number;
     pageSize?: number;
 }
-export declare const useTableVirtualization: ({ filteredData, virtualizationOn, visibleRows, rowHeight, isLoading, isLoadingPreloader, id, page, pageSize, }: UseTableVirtualizationParams) => {
+export declare const useTableVirtualization: <Row>({ filteredData, virtualizationOn, visibleRows, rowHeight, isLoading, isLoadingPreloader, id, page, pageSize, }: UseTableVirtualizationParams<Row>) => {
     rootRef: import("react").MutableRefObject<HTMLDivElement>;
     start: number;
     visibleCount: number;
-    pagedData: any[];
+    pagedData: Row[];
     hasOverflow: boolean;
-    topPadding: any;
+    topPadding: number;
     bottomPadding: number;
     rowRefs: import("react").MutableRefObject<Record<number, HTMLTableRowElement>>;
     rowHeightsRef: import("react").MutableRefObject<number[]>;

package/dist/components/Table/useTableVirtualization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableVirtualization.d.ts","sourceRoot":"","sources":["../../../src/components/Table/useTableVirtualization.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,UAAU,4BAA4B;IACpC,YAAY,EAAE,GAAG,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,sBAAsB,GAAI,gHAUpC,4BAA4B;;;;;;;;;;;;;;;;CAwP9B,CAAC"}
+{"version":3,"file":"useTableVirtualization.d.ts","sourceRoot":"","sources":["../../../src/components/Table/useTableVirtualization.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,UAAU,4BAA4B,CAAC,GAAG;IACxC,YAAY,EAAE,GAAG,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,sBAAsB,GAAI,GAAG,EAAE,gHAUzC,4BAA4B,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;CAwPnC,CAAC"}

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

@@ -3,5 +3,5 @@
 import './Tabs.less';
 import '../../styles/tokens.less';
 import type { TabsProperties } from './Tabs.types';
-export declare const Tabs: ({ onClick, tabsData, activeTab, className, variant, fullWidth, tooltipOn, tooltipDisabled, }: TabsProperties) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ onClick, tabsData, activeTab, className, variant, fullWidth, tooltipOn, tooltipDisabled, LinkComponent, ariaLabel, }: TabsProperties) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

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;AAWvE,eAAO,MAAM,IAAI,GAAI,8FASlB,cAAc,4CAyKhB,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;AA0BvE,eAAO,MAAM,IAAI,GAAI,wHAWlB,cAAc,4CA6LhB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -1,141 +1,146 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
 /* empty css                 */
 /* empty css                                  */
 /* empty css      */
 /* empty css                  */
-import { useState as Q, useRef as f, useId as V, useEffect as X } from "react";
-import { Icon$u as p } from "../Icon/Icon.js";
-import { Tooltip$u as Z } from "../Tooltip/Tooltip.js";
-import { useDismiss$u as W } from "../../hooks/useDismiss.js";
-import { useMountTransition$u as x } from "../../hooks/useMountTransition.js";
-import { getPopupTransitionStyle$u as D, POPUP_TRANSITION_MS$u as ee } from "../../shared/popupTransition.js";
-import { useTabsOverflow$u as te } from "./useTabsOverflow.js";
-import { useTabsIndicator$u as ne } from "./useTabsIndicator.js";
-const oe = [], ye = ({
-  onClick: b,
-  tabsData: r = oe,
+import { useState as x, useRef as p, useId as D, useEffect as ee, Fragment as oe } from "react";
+import { Icon$u as b } from "../Icon/Icon.js";
+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 { isPlainLeftClick$u as ue } from "../../vanilla/core/linkClick.js";
+const me = [], Ie = ({
+  onClick: h,
+  tabsData: n = me,
   activeTab: m,
-  className: w = "",
-  variant: $ = "line",
-  fullWidth: h = !1,
-  tooltipOn: P = !1,
-  tooltipDisabled: M = !1
+  className: $ = "",
+  variant: g = "line",
+  fullWidth: y = !1,
+  tooltipOn: U = !1,
+  tooltipDisabled: _ = !1,
+  LinkComponent: v,
+  ariaLabel: B
 }) => {
-  const { containerRef: E, measureRef: U, moreMeasureRef: _, visible: B, overflow: l, paddingOf: K, promote: j } = te(r, m, h), [c, a] = Q(!1), v = f(null), y = f(null), O = f(null), R = V(), { shouldRender: q, status: z, isAnimated: C } = x({ isOpen: c, duration: ee }), A = f(l);
-  c && (A.current = l);
-  const g = $ === "segment", N = g ? "u-tab-segment" : "u-tab-line", F = g ? "u-tab-segment-active" : "u-tab-active", { trackRef: H, indicatorRef: J } = ne(m, `${$}|${h}|${JSON.stringify(r.map((e) => e.id))}`);
-  W({ refs: [v], enabled: c, onDismiss: () => a(!1) }), X(() => {
-    l.length || a(!1);
-  }, [l.length]);
-  const T = (e) => {
-    var n, s;
-    if ((n = r[e]) != null && n.disabled) return;
-    const t = l.includes(e);
-    j(e), a(!1), b == null || b(r[e]), t && ((s = y.current) == null || s.focus({ preventScroll: !0 }));
-  }, I = () => {
+  const { containerRef: K, measureRef: j, moreMeasureRef: q, visible: z, overflow: u, paddingOf: F, promote: L } = le(n, m, y, g !== "segment"), [d, c] = x(!1), R = p(null), N = p(null), k = p(null), O = D(), { shouldRender: H, status: J, isAnimated: Y } = ne({ isOpen: d, duration: ie }), A = p(u);
+  d && (A.current = u);
+  const f = g === "segment", T = n.some((e) => e.url), w = f ? "u-tab-segment" : "u-tab-line", G = f ? "u-tab-segment-active" : "u-tab-active", { trackRef: I, indicatorRef: Q } = 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) => {
+    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 = () => {
     var e;
-    return Array.from(((e = O.current) == null ? void 0 : e.querySelectorAll('button:not([aria-disabled="true"])')) || []);
-  }, L = (e) => {
-    var n;
-    const t = I();
-    (n = t[e < 0 ? t.length - 1 : e]) == null || n.focus();
-  }, Y = (e) => {
-    var d, u;
-    const t = I(), n = t.indexOf(document.activeElement), s = e.key === "ArrowDown" ? (n + 1) % t.length : e.key === "ArrowUp" ? (n - 1 + t.length) % t.length : e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : -1;
-    s >= 0 ? (e.preventDefault(), (d = t[s]) == null || d.focus()) : e.key === "Escape" && (e.preventDefault(), a(!1), (u = y.current) == null || u.focus());
-  }, k = (e) => /* @__PURE__ */ o("span", { className: "u-tabs-title", "data-label": e.title, children: e.title }), G = (e) => {
-    if (!e.icon) return k(e);
-    const t = e.iconPosition === "right";
-    return /* @__PURE__ */ i("span", { className: `u-tabs-content${t ? " u-tabs-content-reverse" : ""}`, children: [
-      /* @__PURE__ */ o(p, { name: e.icon, className: "u-tabs-icon" }),
-      !e.iconOnly && k(e)
+    return Array.from(((e = k.current) == null ? void 0 : e.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) || []);
+  }, V = (e) => {
+    var t;
+    const o = P();
+    (t = o[e < 0 ? o.length - 1 : e]) == null || t.focus();
+  }, X = (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;
+    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) => {
+    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: [
+      /* @__PURE__ */ r(b, { name: e.icon, className: "u-tabs-icon" }),
+      !e.iconOnly && M(e)
     ] });
-  }, S = (e, t = !1) => {
-    const n = r[e], s = !!(n.icon && n.iconOnly), d = n.icon ? s ? " u-tab-icon-only" : ` u-tab-with-icon${n.iconPosition === "right" ? " u-tab-icon-right" : ""}` : "", u = /* @__PURE__ */ o(
-      "button",
-      {
-        className: `${N}${d}${n.id === m ? ` ${F}` : ""}${n.disabled ? " u-tab--disabled" : ""}`,
-        type: "button",
-        "data-label": s ? void 0 : n.title,
-        "aria-label": s ? n.title : void 0,
-        "data-measure-tab": t ? "" : void 0,
-        style: t ? void 0 : K(e),
-        tabIndex: t || n.disabled ? -1 : void 0,
-        "aria-current": !t && n.id === m ? "page" : void 0,
-        "aria-disabled": !t && n.disabled ? "true" : void 0,
-        onClick: t ? void 0 : () => T(e),
-        children: G(n)
-      }
-    );
-    return /* @__PURE__ */ o("div", { className: "u-tabs-item", children: P && !M && !t ? /* @__PURE__ */ o(Z, { tooltipText: n.title, portalOn: !0, className: "u-tabs-tooltip", children: u }) : u }, e);
+  }, 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 });
+    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);
+    };
+    return v ? /* @__PURE__ */ r(v, { 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: `${w}${i}${t.id === m ? ` ${G}` : ""}${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,
+      // Не хватает места — сначала ужимаются отступы вкладок, подпись остаётся целой.
+      style: o ? void 0 : F(e),
+      // Отключённая вкладка не попадает в обход по Tab; нативный disabled не ставим —
+      // он гасит события мыши, и подсказка с объяснением не показалась бы.
+      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(te, { tooltipText: t.title, portalOn: !0, className: "u-tabs-tooltip", children: l }) : l }, e);
   };
-  return /* @__PURE__ */ i(
-    "div",
+  return /* @__PURE__ */ a(
+    T ? "nav" : "div",
     {
-      ref: E,
-      className: `u-tabs ${g ? "u-tabs-segment" : "u-tabs-line"}${h ? " u-tabs-full-width" : ""}${w ? ` ${w}` : ""}`,
+      ref: K,
+      className: `u-tabs ${f ? "u-tabs-segment" : "u-tabs-line"}${y ? " u-tabs-full-width" : ""}${$ ? ` ${$}` : ""}`,
+      "aria-label": T ? B : void 0,
       children: [
-        /* @__PURE__ */ i("div", { className: "u-tabs-track", ref: H, children: [
-          /* @__PURE__ */ o("span", { className: "u-tabs-indicator", ref: J, "aria-hidden": "true" }),
-          B.map((e) => S(e)),
-          l.length > 0 && /* @__PURE__ */ i(
+        /* @__PURE__ */ a("div", { className: "u-tabs-track", ref: I, children: [
+          /* @__PURE__ */ r("span", { className: "u-tabs-indicator", ref: Q, "aria-hidden": "true" }),
+          z.map((e) => E(e)),
+          u.length > 0 && /* @__PURE__ */ a(
             "div",
             {
               className: "u-tabs-more",
-              ref: v,
-              onKeyDown: Y,
+              ref: R,
+              onKeyDown: X,
               onBlur: (e) => {
-                const t = e.relatedTarget;
-                t && !e.currentTarget.contains(t) && a(!1);
+                const o = e.relatedTarget;
+                o && !e.currentTarget.contains(o) && c(!1);
               },
               children: [
-                /* @__PURE__ */ i(
+                /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
-                    ref: y,
-                    className: `${N} u-tabs-more-trigger`,
-                    "aria-expanded": c,
+                    ref: N,
+                    className: `${w} u-tabs-more-trigger`,
+                    "aria-expanded": d,
                     "aria-haspopup": "menu",
-                    "aria-controls": R,
-                    onClick: () => a((e) => !e),
+                    "aria-controls": O,
+                    onClick: () => c((e) => !e),
                     onKeyDown: (e) => {
-                      (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), a(!0), requestAnimationFrame(() => L(e.key === "ArrowUp" ? -1 : 0)));
+                      (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), c(!0), requestAnimationFrame(() => V(e.key === "ArrowUp" ? -1 : 0)));
                     },
                     children: [
-                      /* @__PURE__ */ o("span", { children: "Ещё" }),
-                      /* @__PURE__ */ o(p, { name: "down", size: 14, rotate: c ? 180 : 0 })
+                      /* @__PURE__ */ r("span", { children: "Ещё" }),
+                      /* @__PURE__ */ r(b, { name: "down", size: 14, rotate: d ? 180 : 0 })
                     ]
                   }
                 ),
-                q && /* @__PURE__ */ o("div", { className: "u-tabs-more-menu", role: "menu", id: R, ref: O, style: D(z, C), children: A.current.filter((e) => r[e]).map((e) => /* @__PURE__ */ o(
-                  "button",
-                  {
-                    type: "button",
-                    role: "menuitem",
-                    "aria-disabled": r[e].disabled ? "true" : void 0,
-                    tabIndex: r[e].disabled ? -1 : void 0,
-                    onClick: () => T(e),
-                    children: r[e].icon ? /* @__PURE__ */ i("span", { className: "u-tabs-content", children: [
-                      /* @__PURE__ */ o(p, { name: r[e].icon, className: "u-tabs-icon" }),
-                      /* @__PURE__ */ o("span", { children: r[e].title })
-                    ] }) : r[e].title
-                  },
-                  e
-                )) })
+                H && /* @__PURE__ */ r("div", { className: "u-tabs-more-menu", role: "menu", id: O, ref: k, style: se(J, Y), children: A.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
+                }, n[e].icon ? /* @__PURE__ */ a("span", { className: "u-tabs-content", children: [
+                  /* @__PURE__ */ r(b, { name: n[e].icon, className: "u-tabs-icon" }),
+                  /* @__PURE__ */ r("span", { children: n[e].title })
+                ] }) : n[e].title) }, e)) })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ i("div", { ref: U, className: "u-tabs-measure", "aria-hidden": "true", children: [
-          r.map((e, t) => S(t, !0)),
-          /* @__PURE__ */ i("button", { ref: _, type: "button", tabIndex: -1, className: `${N} u-tabs-more-trigger u-tabs-more-measure`, children: [
-            /* @__PURE__ */ o("span", { children: "Ещё" }),
-            /* @__PURE__ */ o(p, { name: "down", size: 14 })
+        /* @__PURE__ */ a("div", { ref: j, className: "u-tabs-measure", "aria-hidden": "true", children: [
+          n.map((e, o) => E(o, !0)),
+          f && /* @__PURE__ */ a("button", { ref: q, type: "button", tabIndex: -1, className: `${w} u-tabs-more-trigger u-tabs-more-measure`, children: [
+            /* @__PURE__ */ r("span", { children: "Ещё" }),
+            /* @__PURE__ */ r(b, { name: "down", size: 14 })
           ] })
         ] })
       ]
     }
   );
 };
-export { ye as Tabs$u };
+export { Ie as Tabs$u };

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

@@ -1,6 +1,13 @@
+import type { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 export type TabsDataProperties = Partial<{
     id: string | number;
     title: string;
+    /**
+     * Адрес раздела. Есть хотя бы у одной вкладки — вкладки становятся ссылками (режим навигации):
+     * Ctrl/Cmd/Shift/средний клик и «Открыть в новой вкладке» работают как у обычной ссылки,
+     * обычный клик вызывает `onClick`, как раньше. Без `LinkComponent` — `<a href>` с переходом браузера.
+     */
+    url: string;
     /** Имя иконки кита (как у `Icon`): `'list-view'`, `'table-view'` и т. д. Без него вкладка — только текст. */
     icon: string;
     /** Сторона иконки относительно текста; по умолчанию слева. */
@@ -12,11 +19,24 @@ export type TabsDataProperties = Partial<{
     iconOnly: boolean;
     /**
      * Вкладку нельзя выбрать: клик и Enter не вызывают `onClick`, кнопка с `aria-disabled="true"`
-     * выпадает из обхода по Tab и стрелками в меню «Ещё», вид приглушён. Если она уже активна
+     * выпадает из обхода по Tab и стрелками в меню «Ещё» сегментов, вид приглушён. Если она уже активна
      * (`activeTab`), выбор не меняется — кит её не переключает сам.
      */
     disabled: boolean;
 }>;
+/** Пропсы, которые кит передаёт `LinkComponent` вкладки-ссылки (как у `Link` react-router). */
+export type TabsLinkProperties = {
+    to: string;
+    className?: string;
+    children?: ReactNode;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    tabIndex?: number;
+    style?: CSSProperties;
+    role?: string;
+    'aria-current'?: 'page';
+    'aria-label'?: string;
+    'data-label'?: string;
+};
 export type TabsProperties = Partial<{
     onClick: (...args: unknown[]) => unknown;
     tabsData: Array<TabsDataProperties>;
@@ -32,5 +52,13 @@ export type TabsProperties = Partial<{
     tooltipOn: boolean;
     /** Отключает китовую подсказку и при `tooltipOn`; по умолчанию false. */
     tooltipDisabled: boolean;
+    /**
+     * Компонент ссылки роутера для вкладок с `url` (react-router `Link`): получает `to={url}`, классы
+     * и обработчик клика, обычный клик переходит без перезагрузки страницы. Без него — `<a href>`.
+     * Функция наряду с `ComponentType`: `to` у `Link` шире строки, а `propTypes` в `ComponentType` это запрещают.
+     */
+    LinkComponent: ComponentType<TabsLinkProperties> | ((props: TabsLinkProperties) => ReactNode);
+    /** Подпись области навигации (`<nav aria-label>`) в режиме ссылок, если на странице несколько `nav`. */
+    ariaLabel: string;
 }>;
 //# sourceMappingURL=Tabs.types.d.ts.map