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

package/dist/components/Tooltip/Tooltip.js

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