urfu-ui-kit-react 2.1.5 → 2.1.7-next.0

package/dist/components/Textarea/Textarea.js

@@ -1,67 +1,69 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { jsxs as d, 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,
+import { forwardRef as F } from "react";
+import { useAutoId$u as G } from "../../hooks/useAutoId.js";
+import { getFieldAccessibility$u as k } from "../../shared/fieldAccessibility.js";
+import { sizeClassName$u as q } from "../../shared/size.js";
+import { resolveValidation$u as D } from "../../vanilla/core/validation.js";
+const H = F(({
+  "aria-label": u,
+  "aria-labelledby": p,
+  "aria-describedby": x,
   title: r = "",
   placeholder: m = "",
   defaultValue: b,
-  value: h,
-  id: v,
-  name: f = "",
+  value: f,
+  id: h,
+  name: v = "",
   onChange: y,
-  required: s = !1,
-  disabled: g = !1,
+  onBlur: g,
+  required: o = !1,
+  disabled: $ = !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
+  rowGap: w = 4,
+  columnGap: N = 20,
+  styleInputContainer: T,
+  styleTitle: j,
+  styleInput: z,
+  className: E = "",
+  size: A,
+  validationText: B = "Заполните поле",
+  validationOn: O
+}, S) => {
+  const a = G(h, "u-textarea"), s = q(A), e = D({ validationOn: O, validationText: B }), c = e.showText && !!e.text, C = k(a, r, o, { ...e, showText: c }, {
+    "aria-label": u,
+    "aria-labelledby": p,
+    "aria-describedby": x
   }), n = (t) => typeof t == "number" ? `calc(${t} * var(--u-preset-unit, 1px))` : String(t);
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: `u-react-input-container${o ? ` ${o}` : ""} ${z}`,
+      className: `u-react-input-container${s ? ` ${s}` : ""} ${E}`,
       children: [
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ d(
           "div",
           {
             style: Object.assign(
               {
                 display: "flex",
                 flexDirection: i ? "row" : "column",
-                rowGap: i ? null : n($),
-                columnGap: i ? n(w) : null
+                rowGap: i ? null : n(w),
+                columnGap: i ? n(N) : null
               },
-              j
+              T
             ),
             children: [
               r && /* @__PURE__ */ l(
                 "div",
                 {
                   id: `${a}-label`,
-                  className: `${s ? "u-required" : ""} u-react-input-title`,
+                  className: `${o ? "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
+                    j
                   ),
                   children: r
                 }
@@ -69,15 +71,17 @@ const J = ({
               /* @__PURE__ */ l(
                 "textarea",
                 {
-                  ...O,
+                  ...C,
+                  ref: S,
                   className: `u-textarea${e.hasError ? " u-textarea-required" : ""}`,
                   id: a,
-                  name: f,
+                  name: v,
                   placeholder: m,
-                  value: h,
+                  value: f,
                   defaultValue: b,
-                  disabled: g,
+                  disabled: $,
                   onChange: y,
+                  onBlur: g,
                   style: Object.assign(
                     {
                       minHeight: "max(var(--u-textarea-min-height, 48px), calc(20 * var(--u-unit, 1px) + 2px))",
@@ -87,7 +91,7 @@ const J = ({
                     e.hasError && { border: "1px solid var(--u-color-error, #EF302B)" },
                     // `styleInput` идёт последним: как и в остальных полях,
                     // потребитель может перекрыть стили компонента.
-                    T
+                    z
                   )
                 }
               )
@@ -98,5 +102,6 @@ const J = ({
       ]
     }
   );
-};
-export { J as Textarea$u };
+});
+H.displayName = "Textarea";
+export { H as Textarea$u };

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

@@ -9,6 +9,7 @@ export type TextareaProperties = FieldAccessibilityProperties & Partial<{
     id: string;
     name: string;
     onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur: React.FocusEventHandler<HTMLTextAreaElement>;
     required: boolean;
     disabled: boolean;
     lineUp: boolean;

package/dist/components/Textarea/Textarea.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.types.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,MAAM,kBAAkB,GAAG,4BAA4B,GAAG,OAAO,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACxD,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB,EAAE,aAAa,CAAC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CAAC"}
+{"version":3,"file":"Textarea.types.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,MAAM,kBAAkB,GAAG,4BAA4B,GAAG,OAAO,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACxD,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACrD,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB,EAAE,aAAa,CAAC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CAAC"}

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

@@ -2,5 +2,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;
+export declare const Tooltip: ({ children, className, portalOn, id, tooltipText, style, tooltipStyle, position, isActive, showWhenActive, showDelay }: TooltipProperties) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

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,sDAAsD,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAiOpD,eAAO,MAAM,OAAO,GAAI,6GAWrB,iBAAiB,4CAkPnB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,sDAAsD,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA2OpD,eAAO,MAAM,OAAO,GAAI,wHAYrB,iBAAiB,4CAgRnB,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,51 +1,58 @@
-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";
+import { jsxs as X, jsx as $ } from "react/jsx-runtime";
+import { useRef as z, useState as N, useCallback as B, useEffect as v, useLayoutEffect as W, useId as q } from "react";
 /* empty css                 */
-import { createPortal as J } from "react-dom";
+import { createPortal as tt } 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) => {
+import { getPortalScopeProps$u as et } from "../../shared/uiKitDefaults.js";
+import { useMountTransition$u as nt } from "../../hooks/useMountTransition.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;
-  const t = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  const t = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
   return !Number.isFinite(t) || t <= 0 ? r : r * (t / 16);
-}, tt = {
+}, ut = {
   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);
+}, 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) => {
+  var _, I;
+  const u = st(r, t, n, a);
   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 - _));
+    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]];
+  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));
   };
-  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 });
+  let d = null;
+  for (const o of w) {
+    const p = o === r ? u : lt(o, t, n, 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 = 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 M = d;
+  let f = M.x;
+  const x = n / 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), Y = Math.max(-s, Math.min(s, T - f));
+  return { placement: M.placement, x: f, y: M.y, arrowShift: Y };
+}, K = (r) => {
   const t = document.activeElement;
   if (!r || !t || !r.contains(t)) return !1;
   const n = document.documentElement.getAttribute("data-input-mode");
@@ -55,140 +62,150 @@ const Z = 100, W = (r, t, n, f) => {
   } 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();
+}, dt = 1e3;
+let Q = -1 / 0, U = !1;
+const at = () => {
+  U || typeof document > "u" || (U = !0, document.addEventListener("pointerdown", () => {
+    Q = Date.now();
   }, { capture: !0, passive: !0 }));
-}, it = () => document.documentElement.getAttribute("data-input-mode") !== "keyboard" && Date.now() - j < rt, mt = ({
-  children: r = /* @__PURE__ */ P("div", {}),
+}, mt = () => document.documentElement.getAttribute("data-input-mode") !== "keyboard" && Date.now() - Q < dt, St = ({
+  children: r = /* @__PURE__ */ $("div", {}),
   className: t = "",
   portalOn: n = !1,
-  id: f = "",
-  tooltipText: s = /* @__PURE__ */ P("div", {}),
-  style: p,
-  tooltipStyle: a,
+  id: a = "",
+  tooltipText: u = /* @__PURE__ */ $("div", {}),
+  style: y,
+  tooltipStyle: m,
   position: w = "top",
   isActive: g = !0,
-  showWhenActive: l = !1
+  showWhenActive: d = !1,
+  showDelay: M = ot
 }) => {
-  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 });
+  const f = z(null), x = z(null), T = z(null), [s, Y] = N(!1), [_, I] = N(null), [o, p] = N(null), [b, H] = N(w), [k, G] = N(!1), P = () => {
+    T.current && (clearTimeout(T.current), T.current = null);
+  }, h = B(() => {
+    P(), Y(!1), I(null), G(!1);
+  }, []), { shouldRender: D, isAnimated: j } = nt({ isOpen: s, duration: rt.instant });
+  v(() => {
+    D || (p(null), H(w));
+  }, [D, w]);
+  const F = 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 }), Y(!0);
+  }, []), O = 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 });
   }, []);
-  U(() => {
-    if (!n || !y || !I) return;
+  W(() => {
+    if (!n || !s || !_) 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 { 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(() => {
+    if (o && s)
+      return T.current = setTimeout(() => G(!0), M), P;
+  }, [o, s, M]), v(() => {
+    g || h();
+  }, [g, h]), v(() => {
+    if (!s) return;
     const e = () => {
-      if (l && g) return;
-      const i = m.current;
-      if (i && k(i)) {
-        N(i);
+      if (d && g) return;
+      const c = f.current;
+      if (c && K(c)) {
+        O(c);
         return;
       }
-      S();
+      h();
     };
     return window.addEventListener("scroll", e, !0), () => window.removeEventListener("scroll", e, !0);
-  }, [y, l, g, S, N]), Y(() => {
-    if (!n || !y) return;
+  }, [s, d, g, h, O]), v(() => {
+    if (!n || !s) return;
     let e;
-    const i = () => {
+    const c = () => {
       e !== void 0 && window.cancelAnimationFrame(e), e = window.requestAnimationFrame(() => {
-        const R = m.current;
-        R && N(R);
+        const S = f.current;
+        S && O(S);
       });
     };
-    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);
+    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;
+    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, y, N]), Y(() => {
-    if (!l || !n) return;
+  }, [n, s, O]), v(() => {
+    if (!d || !n) return;
     if (!g) {
-      S();
+      h();
       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");
+    const e = f.current;
+    e && F(e);
+  }, [d, n, g, h, F]), v(() => P, []), v(at, []);
+  const Z = q(), A = a ? `u-tooltip${a}` : `u-tooltip${Z.replace(/:/g, "")}`;
+  return v(() => {
+    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(A), i.setAttribute("aria-describedby", [...l].join(" ")), () => {
+      const E = (i.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((S) => S && S !== A);
+      E.length ? i.setAttribute("aria-describedby", E.join(" ")) : i.removeAttribute("aria-describedby");
     };
-  }, [n, y, A]), n ? /* @__PURE__ */ $(
+  }, [n, s, A]), n ? /* @__PURE__ */ X(
     "div",
     {
-      ref: m,
-      style: p,
-      onMouseEnter: l ? void 0 : (e) => {
-        g && L(e.currentTarget);
+      ref: f,
+      style: y,
+      onMouseEnter: d ? void 0 : (e) => {
+        g && F(e.currentTarget);
       },
-      onMouseLeave: l ? void 0 : () => {
-        k(m.current) || S();
+      onMouseLeave: d ? void 0 : () => {
+        K(f.current) || h();
       },
-      onFocus: l ? void 0 : (e) => {
-        g && !it() && L(e.currentTarget);
+      onFocus: d ? void 0 : (e) => {
+        g && !mt() && F(e.currentTarget);
       },
-      onBlur: l ? void 0 : (e) => {
-        e.currentTarget.contains(e.relatedTarget) || S();
+      onBlur: d ? void 0 : (e) => {
+        e.currentTarget.contains(e.relatedTarget) || h();
       },
       onKeyDown: (e) => {
-        e.key === "Escape" && S();
+        e.key !== "Escape" || !s || (e.preventDefault(), h());
       },
       className: `u-help ${t}`,
       children: [
-        y && J(
-          /* @__PURE__ */ P(
+        D && tt(
+          /* @__PURE__ */ $(
             "div",
             {
               ref: x,
-              ...Q(),
+              ...et(),
               style: {
-                left: (u == null ? void 0 : u.x) ?? 0,
-                top: (u == null ? void 0 : u.y) ?? 0,
-                opacity: X ? 1 : 0,
+                left: (o == null ? void 0 : o.x) ?? 0,
+                top: (o == null ? void 0 : o.y) ?? 0,
+                opacity: k ? 1 : 0,
                 /**
                  * До первого замера подсказка скрыта, но занимает место —
                  * `visibility` сохраняет размеры, поэтому её есть чем измерить.
                  */
-                visibility: u ? "visible" : "hidden",
+                visibility: o ? "visible" : "hidden",
                 /**
-                 * Переход только по прозрачности. В vanilla у `.u-help-tooltip`
+                 * Сдвиг — свойством `translate`: `transform` уже занят центровкой.
+                 */
+                translate: j && !k ? it[b] : void 0,
+                /**
+                 * Переход только по прозрачности и сдвигу. В vanilla у `.u-help-tooltip`
                  * стоит `transition: 0.3s` — на все свойства сразу, включая
                  * координаты, и подсказка съезжала к месту через пол-экрана:
                  * сначала при уточнении позиции по замеру, а с выносом замера
                  * вперёд — ещё и от начальной точки.
+                 * Вход — `fast` + `ease-enter`, выход короче — `instant` + `ease-exit`.
                  */
-                transition: "opacity 0.3s",
+                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",
                 height: "fit-content",
                 /**
                  * Как во Vue-ките: над окнами (1000), фильтрами таблицы (9999) и выпадающими
@@ -196,23 +213,25 @@ const ot = () => {
                  * сервисом слой подсказки не зависит от того, чей кит объявил токен на :root.
                  */
                 zIndex: "var(--u-tooltip-z, 10020)",
-                "--u-tooltip-arrow-shift": `${(u == null ? void 0 : u.arrowShift) ?? 0}px`,
-                ...a
+                "--u-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--${h}`,
+              className: `u-help-tooltip u-help-tooltip-portal--${b}`,
               id: A,
               role: "tooltip",
-              children: s
+              children: u
             }
           ),
           document.body
         ),
-        /* @__PURE__ */ P("div", { className: "u-help__content", children: r })
+        /* @__PURE__ */ $("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 })
+  ) : /* @__PURE__ */ X("div", { style: y, className: `u-help ${t}`, children: [
+    /* @__PURE__ */ $("div", { className: `u-help-tooltip u-help-tooltip--${w}`, children: u }),
+    /* @__PURE__ */ $("div", { className: "u-help__content", children: r })
   ] });
 };
-export { mt as Tooltip$u };
+export { St as Tooltip$u };

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

@@ -8,13 +8,18 @@ export type TooltipProperties = Partial<{
     className: string;
     portalOn: boolean;
     id: string;
-    /** any: разные версии React/ReactNode у потребителя и при линковке пакета */
-    tooltipText: any;
+    /** ReactNode; тип `unknown`, потому что при линковке пакета у потребителя другая копия @types/react и свой ReactNode не совместим с нашим. */
+    tooltipText: unknown;
     style: CSSProperties;
     tooltipStyle: CSSProperties;
     position: 'top' | 'right' | 'bottom' | 'left';
     isActive: boolean;
     showWhenActive: boolean;
+    /**
+     * Задержка перед проявлением, мс (только с `portalOn`). По умолчанию 100 —
+     * подсказка не мигает, когда мышь проходит над элементом мимоходом.
+     */
+    showDelay: number;
     /**
      * Пропы внешнего управления подсказкой из версии 1.6.1.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,6EAA6E;IAC7E,WAAW,EAAE,GAAG,CAAC;IACjB,KAAK,EAAE,aAAa,CAAC;IACrB,YAAY,EAAE,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IAExB;;;;;;;;;;OAUG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mCAAmC;IACnC,eAAe,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAClD,mCAAmC;IACnC,kBAAkB,EAAE,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,mCAAmC;IACnC,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC,CAAC"}
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,8IAA8I;IAC9I,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;IACrB,YAAY,EAAE,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;OAUG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mCAAmC;IACnC,eAAe,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAClD,mCAAmC;IACnC,kBAAkB,EAAE,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,mCAAmC;IACnC,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC,CAAC"}