urfu-ui-kit-react 2.1.2 → 2.1.4

package/dist/components/Table/useTableVirtualization.js

@@ -0,0 +1,145 @@
+import { useRef as i, useState as A, useLayoutEffect as k, useCallback as N, useMemo as Z, useEffect as B } from "react";
+const ot = ({
+  filteredData: e,
+  virtualizationOn: c,
+  visibleRows: q,
+  rowHeight: I,
+  isLoading: C,
+  isLoadingPreloader: S,
+  id: E,
+  page: H,
+  pageSize: p
+}) => {
+  const s = i(null), [h, P] = A(0), [_, $] = A(0), d = i([]), j = i([]), F = i([]), G = i([]), J = i([]), K = i({}), T = i(0);
+  k(() => {
+    if (!C && !S && s.current) {
+      if (e.length === 0) {
+        T.current = 0;
+        return;
+      }
+      const t = s.current.getBoundingClientRect().height;
+      t > 0 && (T.current = t);
+    }
+  });
+  const [L, O] = A(void 0), Q = N(
+    (t) => d.current[t] ?? I,
+    [I]
+  ), l = Z(() => {
+    const t = new Array(e.length + 1).fill(0);
+    for (let n = 0; n < e.length; n++)
+      t[n + 1] = t[n] + Q(n);
+    return t;
+  }, [e.length, Q, _]), a = Z(
+    () => l.length > 0 ? l[l.length - 1] : 0,
+    [l]
+  ), w = q + 1, U = N(
+    (t) => {
+      let n = 0, o = l.length - 1;
+      for (; n < o; ) {
+        const r = Math.floor((n + o) / 2);
+        l[r] <= t ? n = r + 1 : o = r;
+      }
+      return Math.max(0, Math.min(e.length - 1, n - 1));
+    },
+    [l, e.length]
+  ), X = typeof H == "number" && typeof p == "number" && p > 0, z = X ? e.slice((H - 1) * p, H * p) : e, f = c && !X && e.length > q, D = f ? l[h] : 0, tt = f ? Math.max(
+    0,
+    a - l[Math.min(e.length, h + w)]
+  ) : 0, V = N(
+    (t) => {
+      if (!f)
+        return;
+      const n = t.target, o = Math.max(0, e.length - w), r = Math.min(o, U(n.scrollTop));
+      P(r);
+    },
+    [e.length, U, f, w]
+  );
+  B(() => {
+    if (c && s.current) {
+      const t = s.current;
+      return t.addEventListener("scroll", V), () => {
+        t == null || t.removeEventListener("scroll", V);
+      };
+    }
+  }, [c, V]), B(() => {
+    c && s.current && e.length < h && (s.current.scrollTo({ top: 0 }), P(0));
+  }, [e.length, h, c]);
+  const [M, et] = A(0);
+  B(() => {
+    const t = s.current;
+    if (!c || !t || typeof ResizeObserver > "u") return;
+    let n = t.clientWidth;
+    const o = new ResizeObserver((r) => {
+      var m;
+      const u = ((m = r[0]) == null ? void 0 : m.contentRect.width) ?? 0;
+      u <= 0 || Math.abs(u - n) <= 0.5 || (n = u, et((v) => v + 1));
+    });
+    return o.observe(t), () => o.disconnect();
+  }, [c]);
+  const Y = i(null);
+  return k(() => {
+    if (!c || C) return;
+    const t = Y.current;
+    Y.current = { data: e, width: M }, !(!t || t.data === e && t.width === M) && (d.current = [], $((n) => n + 1));
+  }, [c, C, e, M]), B(() => {
+    if (!c)
+      return;
+    const t = f ? h : 0, n = f ? Math.min(e.length, h + w) : e.length;
+    let o = !1;
+    for (let r = t; r < n; r++) {
+      const u = K.current[r];
+      if (!u) continue;
+      const m = u.getBoundingClientRect().height;
+      (!d.current[r] || Math.abs(d.current[r] - m) > 0.5) && (d.current[r] = m, o = !0);
+    }
+    o && $((r) => r + 1);
+  }, [c, f, h, w, e.length, M]), k(() => {
+    var t;
+    if (!C && e.length > 0) {
+      const n = Array.from(((t = s.current) == null ? void 0 : t.querySelectorAll(".table tbody tr")) ?? []).filter((b) => b.cells.length > 0), o = new Array(e.length).fill(void 0), r = new Array(e.length).fill(void 0), u = new Array(e.length).fill(void 0), m = new Array(e.length).fill(void 0), v = new Array(e.length).fill(void 0);
+      n.forEach((b, W) => {
+        const y = Number(b.dataset.virtualIndex ?? W);
+        if (isNaN(y)) return;
+        const nt = b.getBoundingClientRect().height;
+        o[y] = nt;
+        const x = Array.from(b.children);
+        r[y] = x.map((R) => R.getBoundingClientRect().height), u[y] = x.map((R) => {
+          const g = R.firstElementChild;
+          return g ? g.getBoundingClientRect().height : 0;
+        }), m[y] = x.map((R) => {
+          const g = R.firstElementChild;
+          return g ? g.getBoundingClientRect().width : 0;
+        }), v[y] = x.map((R) => {
+          const g = window.getComputedStyle(R);
+          return {
+            padding: g.padding,
+            border: g.border,
+            background: g.background
+          };
+        });
+      }), d.current = o.map((b, W) => b ?? d.current[W]), j.current = r.filter(Boolean), F.current = u.filter(Boolean), G.current = m.filter(Boolean), J.current = v.filter(Boolean);
+    }
+  }, [C, e, E, H, p, h, w]), B(() => {
+    !S && e.length > 0 && setTimeout(() => {
+      const t = document.querySelector(`#${E} .table tbody`);
+      t && O(t.getBoundingClientRect().height);
+    }, 0);
+  }, [S, e, E]), {
+    rootRef: s,
+    start: h,
+    visibleCount: w,
+    pagedData: z,
+    hasOverflow: f,
+    topPadding: D,
+    bottomPadding: tt,
+    rowRefs: K,
+    rowHeightsRef: d,
+    tdHeightsRef: j,
+    tdContentHeightsRef: F,
+    tdContentWidthsRef: G,
+    tdStylesRef: J,
+    preloaderRealHeight: L,
+    lastLoadedHeightRef: T
+  };
+};
+export { ot as useTableVirtualization$u };

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

@@ -1,4 +1,5 @@
 
+
 import './Tabs.less';
 import '../../styles/tokens.less';
 import type { TabsProperties } from './Tabs.types';

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,aAAa,CAAC;AACrB,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,cAAc,CAAC;AAQvE,eAAO,MAAM,IAAI,GAAI,8FASlB,cAAc,4CA+JhB,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;AAQvE,eAAO,MAAM,IAAI,GAAI,8FASlB,cAAc,4CA+JhB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,135 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+/* empty css                 */
+/* empty css                                  */
+/* empty css      */
+/* empty css                  */
+import { useState as _, useRef as y, useId as F, useEffect as H } from "react";
+import { Icon$u as d } from "../Icon/Icon.js";
+import { Tooltip$u as L } from "../Tooltip/Tooltip.js";
+import { useDismiss$u as Y } from "../../hooks/useDismiss.js";
+import { useTabsOverflow$u as G } from "./useTabsOverflow.js";
+const J = [], ne = ({
+  onClick: f,
+  tabsData: s = J,
+  activeTab: p,
+  className: v = "",
+  variant: R = "line",
+  fullWidth: w = !1,
+  tooltipOn: T = !1,
+  tooltipDisabled: E = !1
+}) => {
+  const { containerRef: M, measureRef: P, moreMeasureRef: S, visible: B, overflow: l, paddingOf: K, promote: U } = G(s, p, w), [u, a] = _(!1), N = y(null), b = y(null), $ = y(null), A = F(), h = R === "segment", g = h ? "u-tab-segment" : "u-tab-line", j = h ? "u-tab-segment-active" : "u-tab-active";
+  Y({ refs: [N], enabled: u, onDismiss: () => a(!1) }), H(() => {
+    l.length || a(!1);
+  }, [l.length]);
+  const k = (e) => {
+    var o, r;
+    if ((o = s[e]) != null && o.disabled) return;
+    const t = l.includes(e);
+    U(e), a(!1), f == null || f(s[e]), t && ((r = b.current) == null || r.focus({ preventScroll: !0 }));
+  }, I = () => {
+    var e;
+    return Array.from(((e = $.current) == null ? void 0 : e.querySelectorAll('button:not([aria-disabled="true"])')) || []);
+  }, q = (e) => {
+    var o;
+    const t = I();
+    (o = t[e < 0 ? t.length - 1 : e]) == null || o.focus();
+  }, z = (e) => {
+    var m, c;
+    const t = I(), o = t.indexOf(document.activeElement), r = e.key === "ArrowDown" ? (o + 1) % t.length : e.key === "ArrowUp" ? (o - 1 + t.length) % t.length : e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : -1;
+    r >= 0 ? (e.preventDefault(), (m = t[r]) == null || m.focus()) : e.key === "Escape" && (e.preventDefault(), a(!1), (c = b.current) == null || c.focus());
+  }, C = (e) => {
+    if (!e.icon) return /* @__PURE__ */ n("span", { className: "u-tabs-title", children: e.title });
+    const t = e.iconPosition === "right";
+    return /* @__PURE__ */ i("span", { className: `u-tabs-content${t ? " u-tabs-content-reverse" : ""}`, children: [
+      /* @__PURE__ */ n(d, { name: e.icon, className: "u-tabs-icon" }),
+      !e.iconOnly && /* @__PURE__ */ n("span", { className: "u-tabs-title", children: e.title })
+    ] });
+  }, O = (e, t = !1) => {
+    const o = s[e], r = !!(o.icon && o.iconOnly), m = o.icon ? r ? " u-tab-icon-only" : ` u-tab-with-icon${o.iconPosition === "right" ? " u-tab-icon-right" : ""}` : "", c = /* @__PURE__ */ n(
+      "button",
+      {
+        className: `${g}${m}${o.id === p ? ` ${j}` : ""}${o.disabled ? " u-tab--disabled" : ""}`,
+        type: "button",
+        "data-label": r ? void 0 : o.title,
+        "aria-label": r ? o.title : void 0,
+        "data-measure-tab": t ? "" : void 0,
+        style: t ? void 0 : K(e),
+        tabIndex: t || o.disabled ? -1 : void 0,
+        "aria-current": !t && o.id === p ? "page" : void 0,
+        "aria-disabled": !t && o.disabled ? "true" : void 0,
+        onClick: t ? void 0 : () => k(e),
+        children: C(o)
+      }
+    );
+    return /* @__PURE__ */ n("div", { className: "u-tabs-item", children: T && !E && !t ? /* @__PURE__ */ n(L, { tooltipText: o.title, portalOn: !0, className: "u-tabs-tooltip", children: c }) : c }, e);
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: M,
+      className: `u-tabs ${h ? "u-tabs-segment" : "u-tabs-line"}${w ? " u-tabs-full-width" : ""}${v ? ` ${v}` : ""}`,
+      children: [
+        /* @__PURE__ */ i("div", { className: "u-tabs-track", children: [
+          B.map((e) => O(e)),
+          l.length > 0 && /* @__PURE__ */ i(
+            "div",
+            {
+              className: "u-tabs-more",
+              ref: N,
+              onKeyDown: z,
+              onBlur: (e) => {
+                const t = e.relatedTarget;
+                t && !e.currentTarget.contains(t) && a(!1);
+              },
+              children: [
+                /* @__PURE__ */ i(
+                  "button",
+                  {
+                    type: "button",
+                    ref: b,
+                    className: `${g} u-tabs-more-trigger`,
+                    "aria-expanded": u,
+                    "aria-haspopup": "menu",
+                    "aria-controls": A,
+                    onClick: () => a((e) => !e),
+                    onKeyDown: (e) => {
+                      (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), a(!0), requestAnimationFrame(() => q(e.key === "ArrowUp" ? -1 : 0)));
+                    },
+                    children: [
+                      /* @__PURE__ */ n("span", { children: "Ещё" }),
+                      /* @__PURE__ */ n(d, { name: "down", size: 14, rotate: u ? 180 : 0 })
+                    ]
+                  }
+                ),
+                u && /* @__PURE__ */ n("div", { className: "u-tabs-more-menu", role: "menu", id: A, ref: $, children: l.map((e) => /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    "aria-disabled": s[e].disabled ? "true" : void 0,
+                    tabIndex: s[e].disabled ? -1 : void 0,
+                    onClick: () => k(e),
+                    children: s[e].icon ? /* @__PURE__ */ i("span", { className: "u-tabs-content", children: [
+                      /* @__PURE__ */ n(d, { name: s[e].icon, className: "u-tabs-icon" }),
+                      /* @__PURE__ */ n("span", { children: s[e].title })
+                    ] }) : s[e].title
+                  },
+                  e
+                )) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { ref: P, className: "u-tabs-measure", "aria-hidden": "true", children: [
+          s.map((e, t) => O(t, !0)),
+          /* @__PURE__ */ i("button", { ref: S, type: "button", tabIndex: -1, className: `${g} u-tabs-more-trigger u-tabs-more-measure`, children: [
+            /* @__PURE__ */ n("span", { children: "Ещё" }),
+            /* @__PURE__ */ n(d, { name: "down", size: 14 })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export { ne as Tabs$u };

package/dist/components/Tabs/useTabsOverflow.js

@@ -0,0 +1,49 @@
+import { useRef as R, useState as B, useCallback as P, useLayoutEffect as T } from "react";
+import { TAB_PADDING_MIN_RATIO$u as _, distributeTabs$u as D, tabsSqueeze$u as G } from "../../vanilla/core/distributeTabs.js";
+const K = (l, y, g) => {
+  const u = R(null), p = R(null), O = R(null), m = JSON.stringify(l.map((t) => t.id)), L = l.map((t, e) => e), [F, q] = B({ signature: m, order: L }), h = F.signature === m ? F.order : L, [r, M] = B({ widths: [], paddings: [], available: 0, gap: 0, more: 0 }), i = P(() => {
+    var x;
+    const t = u.current, e = p.current;
+    if (!t || !e) return;
+    const n = getComputedStyle(t), d = t.getBoundingClientRect().width - (parseFloat(n.borderLeftWidth) || 0) - (parseFloat(n.borderRightWidth) || 0) - (parseFloat(n.paddingLeft) || 0) - (parseFloat(n.paddingRight) || 0), s = Array.from(e.querySelectorAll("[data-measure-tab]")), w = s.map((o) => o.getBoundingClientRect().width), v = s.map((o) => {
+      const c = getComputedStyle(o);
+      return [parseFloat(c.paddingLeft) || 0, parseFloat(c.paddingRight) || 0];
+    }), f = {
+      widths: w,
+      paddings: v,
+      available: d,
+      gap: parseFloat(n.columnGap || "0") || 0,
+      more: ((x = O.current) == null ? void 0 : x.getBoundingClientRect().width) || 0
+    };
+    M((o) => o.available === f.available && o.gap === f.gap && o.more === f.more && o.widths.length === w.length && o.widths.every((c, b) => c === w[b]) && o.paddings.every(([c, b], A) => {
+      var E, I;
+      return c === ((E = v[A]) == null ? void 0 : E[0]) && b === ((I = v[A]) == null ? void 0 : I[1]);
+    }) ? o : f);
+  }, []);
+  T(() => {
+    var n, d;
+    i();
+    let t = !1;
+    const e = typeof ResizeObserver > "u" ? null : new ResizeObserver(i);
+    return u.current && (e == null || e.observe(u.current)), p.current && (e == null || e.observe(p.current)), window.addEventListener("resize", i), (n = document.fonts) == null || n.addEventListener("loadingdone", i), (d = document.fonts) == null || d.ready.then(() => {
+      t || i();
+    }), () => {
+      var s;
+      t = !0, e == null || e.disconnect(), window.removeEventListener("resize", i), (s = document.fonts) == null || s.removeEventListener("loadingdone", i);
+    };
+  }, [i, l, g]);
+  const N = y === void 0 ? -1 : l.findIndex((t) => t.id === y), S = r.widths.length === l.length && r.widths.every((t) => t > 0), z = g ? [] : r.paddings.map(([t, e]) => (t + e) * (1 - _)), a = S ? D(h, r.widths, r.available, r.gap, r.more, N, g, z) : { visible: h, overflow: [] }, C = S && !g ? G(a.visible, r.widths, z, r.available, r.gap, r.more, a.overflow.length > 0) : 0;
+  return { containerRef: u, measureRef: p, moreMeasureRef: O, ...a, paddingOf: (t) => {
+    const e = r.paddings[t];
+    if (!C || !e) return;
+    const n = 1 - C * (1 - _);
+    return { paddingLeft: e[0] * n, paddingRight: e[1] * n };
+  }, promote: (t) => {
+    if (!a.overflow.includes(t)) return;
+    const e = a.visible[a.visible.length - 1];
+    if (e === void 0) return;
+    const n = [...h], d = n.indexOf(t), s = n.indexOf(e);
+    [n[d], n[s]] = [n[s], n[d]], q({ signature: m, order: n });
+  } };
+};
+export { K as useTabsOverflow$u };

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,102 @@
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+/* empty css                 */
+import { useAutoId$u as S } from "../../hooks/useAutoId.js";
+import { getFieldAccessibility$u as C } from "../../shared/fieldAccessibility.js";
+import { sizeClassName$u as F } from "../../shared/size.js";
+import { resolveValidation$u as G } from "../../vanilla/core/validation.js";
+const J = ({
+  "aria-label": d,
+  "aria-labelledby": x,
+  "aria-describedby": p,
+  title: r = "",
+  placeholder: m = "",
+  defaultValue: b,
+  value: h,
+  id: v,
+  name: f = "",
+  onChange: y,
+  required: s = !1,
+  disabled: g = !1,
+  lineUp: i = !1,
+  rowGap: $ = 4,
+  columnGap: w = 20,
+  styleInputContainer: j,
+  styleTitle: N,
+  styleInput: T,
+  className: z = "",
+  size: E,
+  validationText: A = "Заполните поле",
+  validationOn: B
+}) => {
+  const a = S(v, "u-textarea"), o = F(E), e = G({ validationOn: B, validationText: A }), c = e.showText && !!e.text, O = C(a, r, s, { ...e, showText: c }, {
+    "aria-label": d,
+    "aria-labelledby": x,
+    "aria-describedby": p
+  }), n = (t) => typeof t == "number" ? `calc(${t} * var(--u-preset-unit, 1px))` : String(t);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `u-react-input-container${o ? ` ${o}` : ""} ${z}`,
+      children: [
+        /* @__PURE__ */ u(
+          "div",
+          {
+            style: Object.assign(
+              {
+                display: "flex",
+                flexDirection: i ? "row" : "column",
+                rowGap: i ? null : n($),
+                columnGap: i ? n(w) : null
+              },
+              j
+            ),
+            children: [
+              r && /* @__PURE__ */ l(
+                "div",
+                {
+                  id: `${a}-label`,
+                  className: `${s ? "u-required" : ""} u-react-input-title`,
+                  style: Object.assign(
+                    {
+                      color: "var(--u-field-title-color, #545454)",
+                      fontSize: "var(--u-field-label-size-main, calc(14 * var(--u-unit, 1px)))"
+                    },
+                    N
+                  ),
+                  children: r
+                }
+              ),
+              /* @__PURE__ */ l(
+                "textarea",
+                {
+                  ...O,
+                  className: `u-textarea${e.hasError ? " u-textarea-required" : ""}`,
+                  id: a,
+                  name: f,
+                  placeholder: m,
+                  value: h,
+                  defaultValue: b,
+                  disabled: g,
+                  onChange: y,
+                  style: Object.assign(
+                    {
+                      minHeight: "max(var(--u-textarea-min-height, 48px), calc(20 * var(--u-unit, 1px) + 2px))",
+                      // Строка, рамка и отступы должны помещаться при минимальной высоте.
+                      paddingBlock: "clamp(0px, calc((var(--u-textarea-min-height, 48px) - 20 * var(--u-unit, 1px) - 2px) / 2), var(--u-input-padding-y, 14px))"
+                    },
+                    e.hasError && { border: "1px solid var(--u-color-error, #EF302B)" },
+                    // `styleInput` идёт последним: как и в остальных полях,
+                    // потребитель может перекрыть стили компонента.
+                    T
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        c && /* @__PURE__ */ l("h5", { id: `${a}-error`, className: "h5 clr-red-main", style: { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: e.text })
+      ]
+    }
+  );
+};
+export { J as Textarea$u };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,5 @@
 
+
 import "./Tooltip.less";
 import { TooltipProperties } from './Tooltip.types';
 export declare const Tooltip: ({ children, className, portalOn, id, tooltipText, style, tooltipStyle, position, isActive, showWhenActive }: TooltipProperties) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAiOpD,eAAO,MAAM,OAAO,GAAI,6GAWrB,iBAAiB,4CA6OnB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,sDAAsD,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAiOpD,eAAO,MAAM,OAAO,GAAI,6GAWrB,iBAAiB,4CAkPnB,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,218 @@
+import { jsxs as $, jsx as P } from "react/jsx-runtime";
+import { useRef as D, useState as C, useCallback as z, useLayoutEffect as U, useEffect as Y, useId as V } from "react";
+/* empty css                 */
+import { createPortal as J } from "react-dom";
+/* empty css                                     */
+/* empty css         */
+import { getPortalScopeProps$u as Q } from "../../shared/uiKitDefaults.js";
+const Z = 100, W = (r, t, n, f) => {
+  const s = G(O), p = t.x + t.width / 2, a = t.y + t.height / 2 - f / 2 + t.scrollY;
+  return r === "bottom" ? { x: p, y: t.y + t.height + t.scrollY + s } : r === "right" ? { x: t.x + t.width + s + n / 2, y: a } : r === "left" ? { x: t.x - s - n / 2, y: a } : { x: p, y: t.y + t.scrollY - s - f };
+}, _ = 8, O = 10, q = 14, G = (r) => {
+  if (typeof window > "u" || typeof document > "u") return r;
+  const t = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return !Number.isFinite(t) || t <= 0 ? r : r * (t / 16);
+}, tt = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+}, et = (r, t, n, f) => {
+  const s = G(O), p = t.x + t.width / 2, a = t.y + t.height / 2 - f / 2 + t.scrollY;
+  return r === "top" ? { x: p, y: t.y + t.scrollY - s - f } : r === "bottom" ? { x: p, y: t.y + t.height + t.scrollY + s } : r === "right" ? { x: t.x + t.width + s + n / 2, y: a } : { x: t.x - s - n / 2, y: a };
+}, nt = (r, t, n, f) => {
+  var M, u;
+  const s = W(r, t, n, f);
+  if (typeof window > "u")
+    return { placement: r, ...s, arrowShift: 0 };
+  const p = ((M = document.documentElement) == null ? void 0 : M.clientHeight) || window.innerHeight, a = ((u = document.documentElement) == null ? void 0 : u.clientWidth) || window.innerWidth, w = [r, tt[r]];
+  for (const d of ["top", "bottom", "left", "right"])
+    w.includes(d) || w.push(d);
+  const g = (d) => {
+    const h = d.y - t.scrollY, E = d.x - n / 2;
+    return Math.max(0, _ - h) + Math.max(0, h + f - (p - _)) + Math.max(0, _ - E) + Math.max(0, E + n - (a - _));
+  };
+  let l = null;
+  for (const d of w) {
+    const h = d === r ? s : et(d, t, n, f), E = g(h);
+    if (E === 0)
+      return { placement: d, x: h.x, y: h.y, arrowShift: 0 };
+    (!l || E < l.overflow) && (l = { placement: d, x: h.x, y: h.y, overflow: E });
+  }
+  const m = l;
+  let x = m.x;
+  const b = n / 2;
+  x - b < _ ? x = b + _ : x + b > a - _ && (x = a - _ - b);
+  const y = t.x + t.width / 2, T = Math.max(0, b - q), I = Math.max(-T, Math.min(T, y - x));
+  return { placement: m.placement, x, y: m.y, arrowShift: I };
+}, k = (r) => {
+  const t = document.activeElement;
+  if (!r || !t || !r.contains(t)) return !1;
+  const n = document.documentElement.getAttribute("data-input-mode");
+  if (n) return n === "keyboard";
+  try {
+    return t.matches(":focus-visible");
+  } catch {
+    return !0;
+  }
+}, rt = 1e3;
+let j = -1 / 0, H = !1;
+const ot = () => {
+  H || typeof document > "u" || (H = !0, document.addEventListener("pointerdown", () => {
+    j = Date.now();
+  }, { capture: !0, passive: !0 }));
+}, it = () => document.documentElement.getAttribute("data-input-mode") !== "keyboard" && Date.now() - j < rt, mt = ({
+  children: r = /* @__PURE__ */ P("div", {}),
+  className: t = "",
+  portalOn: n = !1,
+  id: f = "",
+  tooltipText: s = /* @__PURE__ */ P("div", {}),
+  style: p,
+  tooltipStyle: a,
+  position: w = "top",
+  isActive: g = !0,
+  showWhenActive: l = !1
+}) => {
+  const m = D(null), x = D(null), b = D(null), [y, T] = C(!1), [I, M] = C(null), [u, d] = C(null), [h, E] = C(w), [X, B] = C(!1), F = () => {
+    b.current && (clearTimeout(b.current), b.current = null);
+  }, S = z(() => {
+    F(), T(!1), M(null), d(null), B(!1), E(w);
+  }, [w]), L = z((e) => {
+    F();
+    const { x: i, y: o, width: c, height: v } = e.getBoundingClientRect();
+    M({ x: i, y: o, width: c, height: v, scrollY: window.scrollY }), T(!0);
+  }, []), N = z((e) => {
+    const { x: i, y: o, width: c, height: v } = e.getBoundingClientRect();
+    M((R) => R && { x: i, y: o, width: c, height: v, scrollY: window.scrollY });
+  }, []);
+  U(() => {
+    if (!n || !y || !I) return;
+    const e = x.current;
+    if (!e) return;
+    const { width: i, height: o } = e.getBoundingClientRect(), c = nt(w, I, i, o);
+    E(c.placement), d({ x: c.x, y: c.y, arrowShift: c.arrowShift });
+  }, [n, y, I, w, s]), Y(() => {
+    if (u)
+      return b.current = setTimeout(() => B(!0), Z), F;
+  }, [u]), Y(() => {
+    g || S();
+  }, [g, S]), Y(() => {
+    if (!y) return;
+    const e = () => {
+      if (l && g) return;
+      const i = m.current;
+      if (i && k(i)) {
+        N(i);
+        return;
+      }
+      S();
+    };
+    return window.addEventListener("scroll", e, !0), () => window.removeEventListener("scroll", e, !0);
+  }, [y, l, g, S, N]), Y(() => {
+    if (!n || !y) return;
+    let e;
+    const i = () => {
+      e !== void 0 && window.cancelAnimationFrame(e), e = window.requestAnimationFrame(() => {
+        const R = m.current;
+        R && N(R);
+      });
+    };
+    window.addEventListener("resize", i);
+    const o = typeof ResizeObserver > "u" ? null : new ResizeObserver(i);
+    let c = m.current;
+    for (; c; )
+      o == null || o.observe(c), c = c.parentElement;
+    const v = x.current;
+    return v && (o == null || o.observe(v)), () => {
+      window.removeEventListener("resize", i), o == null || o.disconnect(), e !== void 0 && window.cancelAnimationFrame(e);
+    };
+  }, [n, y, N]), Y(() => {
+    if (!l || !n) return;
+    if (!g) {
+      S();
+      return;
+    }
+    const e = m.current;
+    e && L(e);
+  }, [l, n, g, S, L]), Y(() => F, []), Y(ot, []);
+  const K = V(), A = f ? `u-tooltip${f}` : `u-tooltip${K.replace(/:/g, "")}`;
+  return Y(() => {
+    const e = m.current;
+    if (!n || !y || !e) return;
+    const i = document.activeElement, o = i instanceof HTMLElement && e.contains(i) ? i : e, c = new Set((o.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+    return c.add(A), o.setAttribute("aria-describedby", [...c].join(" ")), () => {
+      const v = (o.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((R) => R && R !== A);
+      v.length ? o.setAttribute("aria-describedby", v.join(" ")) : o.removeAttribute("aria-describedby");
+    };
+  }, [n, y, A]), n ? /* @__PURE__ */ $(
+    "div",
+    {
+      ref: m,
+      style: p,
+      onMouseEnter: l ? void 0 : (e) => {
+        g && L(e.currentTarget);
+      },
+      onMouseLeave: l ? void 0 : () => {
+        k(m.current) || S();
+      },
+      onFocus: l ? void 0 : (e) => {
+        g && !it() && L(e.currentTarget);
+      },
+      onBlur: l ? void 0 : (e) => {
+        e.currentTarget.contains(e.relatedTarget) || S();
+      },
+      onKeyDown: (e) => {
+        e.key === "Escape" && S();
+      },
+      className: `u-help ${t}`,
+      children: [
+        y && J(
+          /* @__PURE__ */ P(
+            "div",
+            {
+              ref: x,
+              ...Q(),
+              style: {
+                left: (u == null ? void 0 : u.x) ?? 0,
+                top: (u == null ? void 0 : u.y) ?? 0,
+                opacity: X ? 1 : 0,
+                /**
+                 * До первого замера подсказка скрыта, но занимает место —
+                 * `visibility` сохраняет размеры, поэтому её есть чем измерить.
+                 */
+                visibility: u ? "visible" : "hidden",
+                /**
+                 * Переход только по прозрачности. В vanilla у `.u-help-tooltip`
+                 * стоит `transition: 0.3s` — на все свойства сразу, включая
+                 * координаты, и подсказка съезжала к месту через пол-экрана:
+                 * сначала при уточнении позиции по замеру, а с выносом замера
+                 * вперёд — ещё и от начальной точки.
+                 */
+                transition: "opacity 0.3s",
+                height: "fit-content",
+                /**
+                 * Как во Vue-ките: над окнами (1000), фильтрами таблицы (9999) и выпадающими
+                 * списками (10010). Одно значение у обоих китов — на странице с оболочкой и
+                 * сервисом слой подсказки не зависит от того, чей кит объявил токен на :root.
+                 */
+                zIndex: "var(--u-tooltip-z, 10020)",
+                "--u-tooltip-arrow-shift": `${(u == null ? void 0 : u.arrowShift) ?? 0}px`,
+                ...a
+              },
+              className: `u-help-tooltip u-help-tooltip-portal--${h}`,
+              id: A,
+              role: "tooltip",
+              children: s
+            }
+          ),
+          document.body
+        ),
+        /* @__PURE__ */ P("div", { className: "u-help__content", children: r })
+      ]
+    }
+  ) : /* @__PURE__ */ $("div", { style: p, className: `u-help ${t}`, children: [
+    /* @__PURE__ */ P("div", { className: `u-help-tooltip u-help-tooltip--${w}`, children: s }),
+    /* @__PURE__ */ P("div", { className: "u-help__content", children: r })
+  ] });
+};
+export { mt as Tooltip$u };