@sberbusiness/triplex-next 1.34.0 → 1.35.0

package/components/Tooltip/components/desktop/components/TooltipDesktopBase.js

@@ -1,241 +1,380 @@
-var _ = Object.defineProperty;
-var H = (p, a, i) => a in p ? _(p, a, { enumerable: !0, configurable: !0, writable: !0, value: i }) : p[a] = i;
-var t = (p, a, i) => H(p, typeof a != "symbol" ? a + "" : a, i);
-import { jsxs as S, Fragment as P, jsx as x } from "react/jsx-runtime";
-import O from "react";
-import { i as M, c as $ } from "../../../../../chunks/vendor-D5cfSbgz.js";
-import { TooltipContext as X } from "../../../TootlipContext.js";
-import { Portal as Y } from "../../../../Portal/Portal.js";
-import { ETooltipPreferPlace as u, ETooltipDirection as B, ETooltipAlign as z, ETooltipFlowTypes as I, ETooltipSizeParameter as r, ETooltipTypeName as C, ETooltipEndCoordinates as N, ETooltipStartCoordinates as R, ETooltipAxesType as G, ETooltipSize as U } from "../../../enums.js";
-import { TooltipDesktopTip as V } from "./TooltipDesktopTip.js";
-import { pickZone as j, axes as q, calcRelPos as K, centerOfBoundsFromBounds as Z, calcBounds as L, equalCoords as J } from "../../../utils/Positioning.js";
-import { s as f } from "../../../../../chunks/TooltipDesktop.module-Bfmd95Xq.js";
-const Q = {
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { i as isEqual, c as clsx } from "../../../../../chunks/vendor-Bco_z_Yi.js";
+import { TooltipContext } from "../../../TootlipContext.js";
+import { Portal } from "../../../../Portal/Portal.js";
+import { ETooltipPreferPlace, ETooltipDirection, ETooltipAlign, ETooltipFlowTypes, ETooltipSizeParameter, ETooltipTypeName, ETooltipEndCoordinates, ETooltipStartCoordinates, ETooltipAxesType, ETooltipSize } from "../../../enums.js";
+import { TooltipDesktopTip } from "./TooltipDesktopTip.js";
+import { pickZone, axes, calcRelPos, centerOfBoundsFromBounds, calcBounds, equalCoords } from "../../../utils/Positioning.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-BO54anEf.js";
+const flowToTipTranslations = {
   column: "translateX",
   row: "translateY"
-}, b = {
+};
+const flowToTooltipTranslations = {
   column: "translateY",
   row: "translateX"
-}, tt = {
-  [u.ABOVE]: B.DOWN,
-  [u.BELOW]: B.UP,
-  [u.LEFT]: B.RIGHT,
-  [u.RIGHT]: B.LEFT
-}, ot = 200, st = 500, v = 2, n = 8, h = 16;
-class W extends O.Component {
+};
+const DIRECTIONS = {
+  [ETooltipPreferPlace.ABOVE]: ETooltipDirection.DOWN,
+  [ETooltipPreferPlace.BELOW]: ETooltipDirection.UP,
+  [ETooltipPreferPlace.LEFT]: ETooltipDirection.RIGHT,
+  [ETooltipPreferPlace.RIGHT]: ETooltipDirection.LEFT
+};
+const REFRESH_INTERVAL_MS = 200;
+const ENTER_EXIT_TRANSITION_DURATION_MS = 500;
+const OFFSET = 2;
+const TIP_HEIGHT = 8;
+const MAX_FROM_EDGE_FOR_TIP = 16;
+class TooltipDesktopBase extends React__default.Component {
   constructor() {
     super(...arguments);
-    t(this, "zone", {
-      [C.FLOW]: I.COLUMN,
-      [C.STANDING]: u.ABOVE,
-      [C.SIDE]: z.CENTER,
+    __publicField(this, "zone", {
+      [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,
+      [ETooltipTypeName.STANDING]: ETooltipPreferPlace.ABOVE,
+      [ETooltipTypeName.SIDE]: ETooltipAlign.CENTER,
       cutOff: 0,
       order: 0,
-      [r.H]: 0,
-      [r.W]: 0
-    });
-    t(this, "tooltipBodySize", {
-      [r.H]: 0,
-      [r.W]: 0
-    });
-    t(this, "targetBounds", {
-      [R.X]: 0,
-      [N.X]: 0,
-      [R.Y]: 0,
-      [N.Y]: 0,
-      [r.H]: 0,
-      [r.W]: 0
-    });
-    t(this, "windowBounds", {
-      [R.X]: 0,
-      [N.X]: 0,
-      [R.Y]: 0,
-      [N.Y]: 0,
-      [r.H]: 0,
-      [r.W]: 0
-    });
-    t(this, "bodyRef", O.createRef());
-    t(this, "tipRef", O.createRef());
-    t(this, "tipEl", null);
-    t(this, "bodyEl", null);
-    t(this, "tooltipNode", null);
-    t(this, "hasTracked", !1);
-    t(this, "exitingAnimationTimer1", null);
-    t(this, "exitingAnimationTimer2", null);
-    t(this, "checkLayoutInterval", null);
-    t(this, "state", {
-      exiting: !1,
+      [ETooltipSizeParameter.H]: 0,
+      [ETooltipSizeParameter.W]: 0
+    });
+    __publicField(this, "tooltipBodySize", {
+      [ETooltipSizeParameter.H]: 0,
+      [ETooltipSizeParameter.W]: 0
+    });
+    __publicField(this, "targetBounds", {
+      [ETooltipStartCoordinates.X]: 0,
+      [ETooltipEndCoordinates.X]: 0,
+      [ETooltipStartCoordinates.Y]: 0,
+      [ETooltipEndCoordinates.Y]: 0,
+      [ETooltipSizeParameter.H]: 0,
+      [ETooltipSizeParameter.W]: 0
+    });
+    __publicField(this, "windowBounds", {
+      [ETooltipStartCoordinates.X]: 0,
+      [ETooltipEndCoordinates.X]: 0,
+      [ETooltipStartCoordinates.Y]: 0,
+      [ETooltipEndCoordinates.Y]: 0,
+      [ETooltipSizeParameter.H]: 0,
+      [ETooltipSizeParameter.W]: 0
+    });
+    __publicField(this, "bodyRef", React__default.createRef());
+    __publicField(this, "tipRef", React__default.createRef());
+    __publicField(this, "tipEl", null);
+    __publicField(this, "bodyEl", null);
+    __publicField(this, "tooltipNode", null);
+    __publicField(this, "hasTracked", false);
+    __publicField(this, "exitingAnimationTimer1", null);
+    __publicField(this, "exitingAnimationTimer2", null);
+    __publicField(this, "checkLayoutInterval", null);
+    __publicField(this, "state", {
+      exiting: false,
       // для отслеживания того что анимация при закрытии тултипа в прогрессе.
       isOpen: this.props.isOpen,
       // для отслеживания открыт/закрыт ли tooltip.
       needRenderTooltip: this.props.isOpen,
       // нужно рендерить тултип или нет, признак анимационно зависимого рендериннга открыт/закрыт ли tooltip
-      standing: u.ABOVE
+      standing: ETooltipPreferPlace.ABOVE
     });
     // Открыть поповер
-    t(this, "prepareOpen", () => {
-      this.state.exiting && this.animateExitStop(), this.setState({ isOpen: !0, needRenderTooltip: !0 });
+    __publicField(this, "prepareOpen", () => {
+      if (this.state.exiting) {
+        this.animateExitStop();
+      }
+      this.setState({ isOpen: true, needRenderTooltip: true });
     });
     // Закрыть поповер
-    t(this, "close", () => {
-      this.setState({ isOpen: !1 });
+    __publicField(this, "close", () => {
+      this.setState({ isOpen: false });
     });
     // Метод начала отслеживания поповера и анимация его появления
-    t(this, "enter", () => {
-      this.trackTooltip(), this.animateEnter(), this.props.onShow && this.tooltipNode && this.props.onShow(this.tooltipNode);
+    __publicField(this, "enter", () => {
+      this.trackTooltip();
+      this.animateEnter();
+      if (this.props.onShow && this.tooltipNode) {
+        this.props.onShow(this.tooltipNode);
+      }
     });
     // Метод окончания отслеживания поповера и анимация его исчезновения
-    t(this, "exit", () => {
-      this.animateExit(), this.untrackTooltip();
+    __publicField(this, "exit", () => {
+      this.animateExit();
+      this.untrackTooltip();
     });
-    t(this, "setTooltipNode", (i) => {
-      const { setTooltipRef: s } = this.props;
-      i && (this.bodyEl = this.bodyRef.current, this.tipEl = this.tipRef.current), this.tooltipNode = i, s == null || s(this.tooltipNode);
+    __publicField(this, "setTooltipNode", (node) => {
+      const { setTooltipRef } = this.props;
+      if (node) {
+        this.bodyEl = this.bodyRef.current;
+        this.tipEl = this.tipRef.current;
+      }
+      this.tooltipNode = node;
+      setTooltipRef == null ? void 0 : setTooltipRef(this.tooltipNode);
     });
     // Рендер поповера
-    t(this, "resolveTooltipLayout", () => {
-      if (!this.tooltipNode)
+    __publicField(this, "resolveTooltipLayout", () => {
+      if (!this.tooltipNode) {
         return;
-      const { alignTip: i } = this.props, s = j(
+      }
+      const { alignTip } = this.props;
+      const zone = pickZone(
         this.props.preferPlace,
         this.windowBounds,
         this.targetBounds,
-        n,
-        h,
+        TIP_HEIGHT,
+        MAX_FROM_EDGE_FOR_TIP,
         {
-          h: this.tooltipBodySize.h + n,
-          w: this.tooltipBodySize.w + n
+          h: this.tooltipBodySize.h + TIP_HEIGHT,
+          w: this.tooltipBodySize.w + TIP_HEIGHT
         }
       );
-      this.zone = s, this.setState({
-        standing: s.standing
+      this.zone = zone;
+      this.setState({
+        standing: zone.standing
       });
-      const o = q[s.flow], l = { ...this.tooltipBodySize };
-      l[s.flow === I.ROW ? r.W : r.H] += n;
-      const e = K(s, this.targetBounds, l);
-      e[o.main.start] += v * s.order;
-      let T = 0;
-      this.bodyEl && (T = Math.round(+getComputedStyle(this.bodyEl).borderRadius.slice(0, -2)) || 0);
-      const d = n + v, m = T * 2 + n * 2 + d, k = this.windowBounds[o.cross.start], A = this.windowBounds[o.cross.end], w = this.windowBounds[o.cross.size], c = w - d * 2, y = k + d, g = A - d, D = e[o.cross.start], F = e[o.cross.end];
-      i === z.START ? e[o.cross.start] = this.targetBounds[o.cross.end] - h - n - this.targetBounds[o.cross.size] / 2 : i === z.END ? e[o.cross.start] = this.targetBounds[o.cross.start] - l[o.cross.size] + h + n + this.targetBounds[o.cross.size] / 2 : e.crossLength > w ? e[o.cross.start] = 0 : this.targetBounds[o.cross.end] < m ? e[o.cross.start] = this.targetBounds[o.cross.end] - m : this.targetBounds[o.cross.start] > g ? e[o.cross.start] = this.targetBounds[o.cross.start] - l[o.cross.size] : e.crossLength > c ? e[o.cross.start] = (w - e.crossLength) / 2 : D < y ? e[o.cross.start] = y : F > g && (e[o.cross.start] = e[o.cross.start] - (e[o.cross.end] - g)), this.tooltipNode.style.flexFlow = s.flow, this.bodyEl && (this.bodyEl.style.order = s.order.toString()), this.tooltipNode.style.top = `${e.y}px`, this.tooltipNode.style.left = `${e.x}px`;
-      let E = Z(s.flow, G.CROSS, this.targetBounds, e) - n;
-      E < h ? E = h : E > e.crossLength - h - n * 2 && (E = e.crossLength - h - n * 2), this.tipEl && (this.tipEl.style.transform = `${Q[s.flow]}(${E}px)`, this.tipEl.style.borderWidth = `${n}px`);
+      const axis = axes[zone.flow];
+      const tooltipSize = { ...this.tooltipBodySize };
+      tooltipSize[zone.flow === ETooltipFlowTypes.ROW ? ETooltipSizeParameter.W : ETooltipSizeParameter.H] += TIP_HEIGHT;
+      const pos = calcRelPos(zone, this.targetBounds, tooltipSize);
+      pos[axis.main.start] += OFFSET * zone.order;
+      let dockingEdgeBufferLength = 0;
+      if (this.bodyEl) {
+        dockingEdgeBufferLength = Math.round(+getComputedStyle(this.bodyEl).borderRadius.slice(0, -2)) || 0;
+      }
+      const frameBuffer = TIP_HEIGHT + OFFSET;
+      const hangingBufferLength = dockingEdgeBufferLength * 2 + TIP_HEIGHT * 2 + frameBuffer;
+      const frameCrossStart = this.windowBounds[axis.cross.start];
+      const frameCrossEnd = this.windowBounds[axis.cross.end];
+      const frameCrossLength = this.windowBounds[axis.cross.size];
+      const frameCrossInnerLength = frameCrossLength - frameBuffer * 2;
+      const frameCrossInnerStart = frameCrossStart + frameBuffer;
+      const frameCrossInnerEnd = frameCrossEnd - frameBuffer;
+      const tooltipCrossStart = pos[axis.cross.start];
+      const tooltipCrossEnd = pos[axis.cross.end];
+      if (alignTip === ETooltipAlign.START) {
+        pos[axis.cross.start] = this.targetBounds[axis.cross.end] - MAX_FROM_EDGE_FOR_TIP - TIP_HEIGHT - this.targetBounds[axis.cross.size] / 2;
+      } else if (alignTip === ETooltipAlign.END) {
+        pos[axis.cross.start] = this.targetBounds[axis.cross.start] - tooltipSize[axis.cross.size] + MAX_FROM_EDGE_FOR_TIP + TIP_HEIGHT + this.targetBounds[axis.cross.size] / 2;
+      } else if (pos.crossLength > frameCrossLength) {
+        pos[axis.cross.start] = 0;
+      } else if (this.targetBounds[axis.cross.end] < hangingBufferLength) {
+        pos[axis.cross.start] = this.targetBounds[axis.cross.end] - hangingBufferLength;
+      } else if (this.targetBounds[axis.cross.start] > frameCrossInnerEnd) {
+        pos[axis.cross.start] = this.targetBounds[axis.cross.start] - tooltipSize[axis.cross.size];
+      } else if (pos.crossLength > frameCrossInnerLength) {
+        pos[axis.cross.start] = (frameCrossLength - pos.crossLength) / 2;
+      } else if (tooltipCrossStart < frameCrossInnerStart) {
+        pos[axis.cross.start] = frameCrossInnerStart;
+      } else if (tooltipCrossEnd > frameCrossInnerEnd) {
+        pos[axis.cross.start] = pos[axis.cross.start] - (pos[axis.cross.end] - frameCrossInnerEnd);
+      }
+      this.tooltipNode.style.flexFlow = zone.flow;
+      if (this.bodyEl) {
+        this.bodyEl.style.order = zone.order.toString();
+      }
+      this.tooltipNode.style.top = `${pos.y}px`;
+      this.tooltipNode.style.left = `${pos.x}px`;
+      let tipCrossPos = centerOfBoundsFromBounds(zone.flow, ETooltipAxesType.CROSS, this.targetBounds, pos) - TIP_HEIGHT;
+      if (tipCrossPos < MAX_FROM_EDGE_FOR_TIP) {
+        tipCrossPos = MAX_FROM_EDGE_FOR_TIP;
+      } else if (tipCrossPos > pos.crossLength - MAX_FROM_EDGE_FOR_TIP - TIP_HEIGHT * 2) {
+        tipCrossPos = pos.crossLength - MAX_FROM_EDGE_FOR_TIP - TIP_HEIGHT * 2;
+      }
+      if (this.tipEl) {
+        this.tipEl.style.transform = `${flowToTipTranslations[zone.flow]}(${tipCrossPos}px)`;
+        this.tipEl.style.borderWidth = `${TIP_HEIGHT}px`;
+      }
     });
     // Метод проверки изменения границ обернутого элемента.
-    t(this, "setAndCheckResizeTargetBounds", () => {
-      const { targetRef: i } = this.props;
-      if (!i.current)
-        return !1;
-      const s = L(i.current);
-      return this.targetBounds && J(this.targetBounds, s) ? !1 : (this.targetBounds = s, !0);
+    __publicField(this, "setAndCheckResizeTargetBounds", () => {
+      const { targetRef } = this.props;
+      if (!targetRef.current) {
+        return false;
+      }
+      const newTargetBounds = calcBounds(targetRef.current);
+      if (this.targetBounds && equalCoords(this.targetBounds, newTargetBounds)) {
+        return false;
+      }
+      this.targetBounds = newTargetBounds;
+      return true;
     });
     // Метод проверки необходимости перерисовки лейаута
-    t(this, "checkTargetReposition", () => {
-      this.setAndCheckResizeTargetBounds() && this.resolveTooltipLayout();
+    __publicField(this, "checkTargetReposition", () => {
+      if (this.setAndCheckResizeTargetBounds()) {
+        this.resolveTooltipLayout();
+      }
     });
     // Метод измерения размеров тела тултипа (без стрелочки)
-    t(this, "setTooltipBodySize", () => {
-      this.bodyEl && (this.tooltipBodySize = { w: this.bodyEl.offsetWidth, h: this.bodyEl.offsetHeight });
+    __publicField(this, "setTooltipBodySize", () => {
+      if (!this.bodyEl) {
+        return;
+      }
+      this.tooltipBodySize = { w: this.bodyEl.offsetWidth, h: this.bodyEl.offsetHeight };
     });
     // Очистка таймеров анимации исчезновения
-    t(this, "animateExitStop", () => {
-      this.exitingAnimationTimer1 && window.clearTimeout(this.exitingAnimationTimer1), this.exitingAnimationTimer2 && window.clearTimeout(this.exitingAnimationTimer2), this.setState({ exiting: !1 });
+    __publicField(this, "animateExitStop", () => {
+      if (this.exitingAnimationTimer1) {
+        window.clearTimeout(this.exitingAnimationTimer1);
+      }
+      if (this.exitingAnimationTimer2) {
+        window.clearTimeout(this.exitingAnimationTimer2);
+      }
+      this.setState({ exiting: false });
     });
     // Анимация исчезновения
-    t(this, "animateExit", () => {
-      this.setState({ exiting: !0 }), this.exitingAnimationTimer2 = window.setTimeout(() => {
+    __publicField(this, "animateExit", () => {
+      this.setState({ exiting: true });
+      this.exitingAnimationTimer2 = window.setTimeout(() => {
         window.setTimeout(() => {
-          this.tooltipNode && (this.tooltipNode.style.transform = `${b[this.zone.flow]}(${this.zone.order * 50}px)`, this.tooltipNode.style.opacity = "0");
+          if (!this.tooltipNode) {
+            return;
+          }
+          this.tooltipNode.style.transform = `${flowToTooltipTranslations[this.zone.flow]}(${this.zone.order * 50}px)`;
+          this.tooltipNode.style.opacity = "0";
         }, 0);
-      }, 0), this.exitingAnimationTimer1 = window.setTimeout(() => {
-        this.setState({ exiting: !1, needRenderTooltip: !1 });
-      }, st);
+      }, 0);
+      this.exitingAnimationTimer1 = window.setTimeout(() => {
+        this.setState({ exiting: false, needRenderTooltip: false });
+      }, ENTER_EXIT_TRANSITION_DURATION_MS);
     });
     // Анимация появления
-    t(this, "animateEnter", () => {
-      this.tooltipNode && (this.tooltipNode.style.transform = `${b[this.zone.flow]}(${this.zone.order * 50}px)`, this.tooltipNode.style.opacity = "0", this.tooltipNode.offsetHeight, this.tipEl && (this.tipEl.style.transition = "transform 150ms ease-in"), this.tooltipNode.style.transitionProperty = "opacity, transform", this.tooltipNode.style.transitionDuration = "500ms", this.tooltipNode.style.transitionTimingFunction = "cubic-bezier(0.230, 1.000, 0.320, 1.000)", this.tooltipNode.style.opacity = "1", this.tooltipNode.style.transform = "translateY(0)");
+    __publicField(this, "animateEnter", () => {
+      if (!this.tooltipNode) {
+        return;
+      }
+      this.tooltipNode.style.transform = `${flowToTooltipTranslations[this.zone.flow]}(${this.zone.order * 50}px)`;
+      this.tooltipNode.style.opacity = "0";
+      this.tooltipNode.offsetHeight;
+      if (this.tipEl) {
+        this.tipEl.style.transition = "transform 150ms ease-in";
+      }
+      this.tooltipNode.style.transitionProperty = "opacity, transform";
+      this.tooltipNode.style.transitionDuration = "500ms";
+      this.tooltipNode.style.transitionTimingFunction = "cubic-bezier(0.230, 1.000, 0.320, 1.000)";
+      this.tooltipNode.style.opacity = "1";
+      this.tooltipNode.style.transform = "translateY(0)";
     });
     //  Отслеживание поповера
-    t(this, "trackTooltip", () => {
-      this.tooltipNode && (this.hasTracked = !0, this.checkLayoutInterval = window.setInterval(this.checkTargetReposition, ot), window.addEventListener("scroll", this.onWindowScroll), window.addEventListener("resize", this.onWindowResize), this.windowBounds = L(window), this.setTooltipBodySize(), this.setAndCheckResizeTargetBounds(), this.resolveTooltipLayout());
+    __publicField(this, "trackTooltip", () => {
+      if (!this.tooltipNode) {
+        return;
+      }
+      this.hasTracked = true;
+      this.checkLayoutInterval = window.setInterval(this.checkTargetReposition, REFRESH_INTERVAL_MS);
+      window.addEventListener("scroll", this.onWindowScroll);
+      window.addEventListener("resize", this.onWindowResize);
+      this.windowBounds = calcBounds(window);
+      this.setTooltipBodySize();
+      this.setAndCheckResizeTargetBounds();
+      this.resolveTooltipLayout();
     });
     // Отписка от отслеживания поповера
-    t(this, "untrackTooltip", () => {
-      this.tooltipNode && (this.checkLayoutInterval && window.clearInterval(this.checkLayoutInterval), window.removeEventListener("scroll", this.onWindowScroll), window.removeEventListener("resize", this.onWindowResize), this.hasTracked = !1);
+    __publicField(this, "untrackTooltip", () => {
+      if (!this.tooltipNode) {
+        return;
+      }
+      if (this.checkLayoutInterval) {
+        window.clearInterval(this.checkLayoutInterval);
+      }
+      window.removeEventListener("scroll", this.onWindowScroll);
+      window.removeEventListener("resize", this.onWindowResize);
+      this.hasTracked = false;
     });
     // Перерисовка при скролле "рамки"
-    t(this, "onWindowScroll", () => {
-      this.setAndCheckResizeTargetBounds(), this.resolveTooltipLayout();
+    __publicField(this, "onWindowScroll", () => {
+      this.setAndCheckResizeTargetBounds();
+      this.resolveTooltipLayout();
     });
     // Перерисовка при изменении размеров "рамки"
-    t(this, "onWindowResize", () => {
-      this.windowBounds = L(window), this.resolveTooltipLayout();
+    __publicField(this, "onWindowResize", () => {
+      this.windowBounds = calcBounds(window);
+      this.resolveTooltipLayout();
     });
     // Отрисовка самого Tooltip
-    t(this, "tooltipRender", () => {
+    __publicField(this, "tooltipRender", () => {
       const {
-        className: i,
-        size: s,
-        preferPlace: o,
-        alignTip: l,
-        isOpen: e,
-        renderContainer: T,
-        onShow: d,
-        setTooltipRef: m,
-        onKeyDown: k,
-        targetRef: A,
-        ...w
-      } = this.props, { elements: c } = this.context, y = s === U.SM ? f.tooltipSM : f.tooltipLG, g = $(
-        f.tooltipDesktop,
-        y,
-        { [f.closable]: !!c.closeButton },
-        i
+        className,
+        size,
+        preferPlace,
+        alignTip,
+        isOpen,
+        renderContainer,
+        onShow,
+        setTooltipRef,
+        onKeyDown,
+        targetRef,
+        ...rest
+      } = this.props;
+      const { elements } = this.context;
+      const sizeClass = size === ETooltipSize.SM ? styles.tooltipSM : styles.tooltipLG;
+      const classNames = clsx(
+        styles.tooltipDesktop,
+        sizeClass,
+        { [styles.closable]: !!elements.closeButton },
+        className
       );
-      return /* @__PURE__ */ x("div", { className: f.tooltipOverlay, children: /* @__PURE__ */ S("div", { className: g, ...w, ref: this.setTooltipNode, children: [
-        /* @__PURE__ */ S("div", { className: f.tooltipDesktopContent, ref: this.bodyRef, children: [
-          c.body,
-          c.link,
-          c.closeButton
+      return /* @__PURE__ */ jsx("div", { className: styles.tooltipOverlay, children: /* @__PURE__ */ jsxs("div", { className: classNames, ...rest, ref: this.setTooltipNode, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.tooltipDesktopContent, ref: this.bodyRef, children: [
+          elements.body,
+          elements.link,
+          elements.closeButton
         ] }),
-        /* @__PURE__ */ x(V, { direction: tt[this.state.standing], ref: this.tipRef })
+        /* @__PURE__ */ jsx(TooltipDesktopTip, { direction: DIRECTIONS[this.state.standing], ref: this.tipRef })
       ] }) });
     });
   }
   render() {
-    const { renderContainer: i } = this.props, { needRenderTooltip: s } = this.state, { elements: o } = this.context;
-    return /* @__PURE__ */ S(P, { children: [
-      o.target,
-      s && /* @__PURE__ */ x(Y, { container: i ?? document.body, children: this.tooltipRender() })
+    const { renderContainer } = this.props;
+    const { needRenderTooltip } = this.state;
+    const { elements } = this.context;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      elements.target,
+      needRenderTooltip && /* @__PURE__ */ jsx(Portal, { container: renderContainer ?? document.body, children: this.tooltipRender() })
     ] });
   }
   componentDidMount() {
-    this.props.isOpen && this.enter();
+    if (this.props.isOpen) {
+      this.enter();
+    }
   }
-  componentDidUpdate(i, s) {
-    const o = this.props, l = this.state, e = !i.isOpen && o.isOpen, T = i.isOpen && !o.isOpen;
-    if (e) {
+  componentDidUpdate(prevProps, prevState) {
+    const props = this.props;
+    const state = this.state;
+    const willOpen = !prevProps.isOpen && props.isOpen;
+    const willClose = prevProps.isOpen && !props.isOpen;
+    if (willOpen) {
       this.prepareOpen();
       return;
-    } else if (T) {
+    } else if (willClose) {
       this.close();
       return;
     }
-    const d = !s.isOpen && l.isOpen, m = s.isOpen && !l.isOpen;
-    if (d) {
+    const didOpen = !prevState.isOpen && state.isOpen;
+    const didClose = prevState.isOpen && !state.isOpen;
+    if (didOpen) {
       this.enter();
       return;
-    } else if (m) {
+    } else if (didClose) {
       this.exit();
       return;
     }
-    l.isOpen && !M(i.children, o.children) && (this.setTooltipBodySize(), this.setAndCheckResizeTargetBounds(), this.resolveTooltipLayout());
+    if (state.isOpen && !isEqual(prevProps.children, props.children)) {
+      this.setTooltipBodySize();
+      this.setAndCheckResizeTargetBounds();
+      this.resolveTooltipLayout();
+    }
   }
   componentWillUnmount() {
-    this.animateExitStop(), this.hasTracked && this.untrackTooltip();
+    this.animateExitStop();
+    if (this.hasTracked) {
+      this.untrackTooltip();
+    }
   }
 }
-t(W, "displayName", "TooltipBase"), t(W, "contextType", X);
+__publicField(TooltipDesktopBase, "displayName", "TooltipBase");
+__publicField(TooltipDesktopBase, "contextType", TooltipContext);
 export {
-  W as TooltipDesktopBase
+  TooltipDesktopBase
 };
 //# sourceMappingURL=TooltipDesktopBase.js.map

package/components/Tooltip/components/desktop/components/TooltipDesktopBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipDesktopBase.js","sources":["../../../../../../src/components/Tooltip/components/desktop/components/TooltipDesktopBase.tsx"],"sourcesContent":["import React from \"react\";\nimport isEqual from \"lodash-es/isEqual\";\nimport clsx from \"clsx\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { Portal } from \"@sberbusiness/triplex-next/components/Portal/Portal\";\nimport {\n    ETooltipAlign,\n    ETooltipAxesType,\n    ETooltipDirection,\n    ETooltipEndCoordinates,\n    ETooltipFlowTypes,\n    ETooltipPreferPlace,\n    ETooltipSize,\n    ETooltipSizeParameter,\n    ETooltipStartCoordinates,\n    ETooltipTypeName,\n} from \"@sberbusiness/triplex-next/components/Tooltip/enums\";\nimport { TooltipDesktopTip } from \"@sberbusiness/triplex-next/components/Tooltip/components/desktop/components/TooltipDesktopTip\";\nimport {\n    ITooltipBounds,\n    ITooltipDesktopProps,\n    ITooltipDomainSize,\n    ITooltipSize,\n} from \"@sberbusiness/triplex-next/components/Tooltip/types\";\nimport {\n    axes,\n    calcBounds,\n    calcRelPos,\n    centerOfBoundsFromBounds,\n    equalCoords,\n    pickZone,\n} from \"@sberbusiness/triplex-next/components/Tooltip/utils/Positioning\";\nimport styles from \"@sberbusiness/triplex-next/components/Tooltip/styles/TooltipDesktop.module.less\";\n\n// Маппер flow в translate для Tip (стрелочка)\nconst flowToTipTranslations: { [key: string]: string } = {\n    column: \"translateX\",\n    row: \"translateY\",\n};\n\n// Маппер flow в translate для самого Tooltip\nconst flowToTooltipTranslations: { [key: string]: string } = {\n    column: \"translateY\",\n    row: \"translateX\",\n};\n\n// Маппер EPreferPlace в EDirection для Tip (стрелочка)\nconst DIRECTIONS = {\n    [ETooltipPreferPlace.ABOVE]: ETooltipDirection.DOWN,\n    [ETooltipPreferPlace.BELOW]: ETooltipDirection.UP,\n    [ETooltipPreferPlace.LEFT]: ETooltipDirection.RIGHT,\n    [ETooltipPreferPlace.RIGHT]: ETooltipDirection.LEFT,\n};\n\n// Интервал опроса в ms необходимости обновления layout\nconst REFRESH_INTERVAL_MS = 200;\n// Время анимаций появления и исчезновения Tooltip'а\nconst ENTER_EXIT_TRANSITION_DURATION_MS = 500;\n// Отступ Tooltip от элемента, px\nconst OFFSET = 2;\n// Высота Tip (стрелочки), px\nconst TIP_HEIGHT = 8;\n// Уголок бегает по периметру максимально на 16 px от края\nconst MAX_FROM_EDGE_FOR_TIP = 16;\n\n/** Свойства компонента TooltipDesktopBase. */\nexport interface ITooltipDesktopBaseProps extends Omit<ITooltipDesktopProps, \"forwardedRef\"> {\n    /** Получение ноды Tooltip. */\n    setTooltipRef?: (node: HTMLDivElement | null) => void;\n}\n\n/** Состояния компонента TooltipDesktopBase. */\ninterface ITooltipDesktopBaseState {\n    /** Для отслеживания того что анимация при закрытии тултипа в прогрессе. */\n    exiting: boolean;\n    /** Положение Tooltip'a. */\n    standing: ETooltipPreferPlace;\n    /** Открыт/закрыт ли tooltip. */\n    isOpen: boolean;\n    /** Нужно рендерить тултип или нет, признак анимационно зависимого рендериннга открыт/закрыт ли tooltip. */\n    needRenderTooltip: boolean;\n}\n\n/** Базовый компонент \"Тултипа\". */\nexport class TooltipDesktopBase extends React.Component<ITooltipDesktopBaseProps, ITooltipDesktopBaseState> {\n    public static displayName = \"TooltipBase\";\n    public static contextType = TooltipContext;\n\n    declare context: React.ContextType<typeof TooltipContext>;\n\n    private zone: ITooltipDomainSize = {\n        [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,\n        [ETooltipTypeName.STANDING]: ETooltipPreferPlace.ABOVE,\n        [ETooltipTypeName.SIDE]: ETooltipAlign.CENTER,\n        cutOff: 0,\n        order: 0,\n        [ETooltipSizeParameter.H]: 0,\n        [ETooltipSizeParameter.W]: 0,\n    };\n    private tooltipBodySize: ITooltipSize = {\n        [ETooltipSizeParameter.H]: 0,\n        [ETooltipSizeParameter.W]: 0,\n    };\n    private targetBounds: ITooltipBounds = {\n        [ETooltipStartCoordinates.X]: 0,\n        [ETooltipEndCoordinates.X]: 0,\n        [ETooltipStartCoordinates.Y]: 0,\n        [ETooltipEndCoordinates.Y]: 0,\n        [ETooltipSizeParameter.H]: 0,\n        [ETooltipSizeParameter.W]: 0,\n    };\n    private windowBounds: ITooltipBounds = {\n        [ETooltipStartCoordinates.X]: 0,\n        [ETooltipEndCoordinates.X]: 0,\n        [ETooltipStartCoordinates.Y]: 0,\n        [ETooltipEndCoordinates.Y]: 0,\n        [ETooltipSizeParameter.H]: 0,\n        [ETooltipSizeParameter.W]: 0,\n    };\n\n    private bodyRef = React.createRef<HTMLDivElement>();\n    private tipRef = React.createRef<HTMLDivElement>();\n\n    private tipEl: HTMLElement | null = null;\n    private bodyEl: HTMLElement | null = null;\n    private tooltipNode: HTMLDivElement | null = null;\n    private hasTracked = false;\n    private exitingAnimationTimer1: number | null = null;\n    private exitingAnimationTimer2: number | null = null;\n    private checkLayoutInterval: number | null = null;\n\n    public state: ITooltipDesktopBaseState = {\n        exiting: false, // для отслеживания того что анимация при закрытии тултипа в прогрессе.\n        isOpen: this.props.isOpen, // для отслеживания открыт/закрыт ли tooltip.\n        needRenderTooltip: this.props.isOpen, // нужно рендерить тултип или нет, признак анимационно зависимого рендериннга открыт/закрыт ли tooltip\n        standing: ETooltipPreferPlace.ABOVE,\n    };\n\n    public render() {\n        const { renderContainer } = this.props;\n        const { needRenderTooltip } = this.state;\n        const { elements } = this.context;\n\n        return (\n            <>\n                {elements.target}\n                {needRenderTooltip && (\n                    <Portal container={renderContainer ?? document.body}>{this.tooltipRender()}</Portal>\n                )}\n            </>\n        );\n    }\n\n    public componentDidMount(): void {\n        if (this.props.isOpen) {\n            this.enter();\n        }\n    }\n\n    public componentDidUpdate(prevProps: ITooltipDesktopBaseProps, prevState: ITooltipDesktopBaseState): void {\n        const props = this.props;\n        const state = this.state;\n\n        const willOpen = !prevProps.isOpen && props.isOpen;\n        const willClose = prevProps.isOpen && !props.isOpen;\n\n        if (willOpen) {\n            this.prepareOpen();\n            return;\n        } else if (willClose) {\n            this.close();\n            return;\n        }\n\n        const didOpen = !prevState.isOpen && state.isOpen;\n        const didClose = prevState.isOpen && !state.isOpen;\n\n        if (didOpen) {\n            this.enter();\n            return;\n        } else if (didClose) {\n            this.exit();\n            return;\n        }\n\n        if (state.isOpen && !isEqual(prevProps.children, props.children)) {\n            this.setTooltipBodySize();\n            this.setAndCheckResizeTargetBounds();\n            this.resolveTooltipLayout();\n        }\n    }\n\n    public componentWillUnmount(): void {\n        /* If the Tooltip is unmounted while animating,\n            clear the animation so no setState occurred. */\n        this.animateExitStop();\n\n        if (this.hasTracked) {\n            this.untrackTooltip();\n        }\n    }\n\n    // Открыть поповер\n    private prepareOpen = () => {\n        if (this.state.exiting) {\n            this.animateExitStop();\n        }\n        this.setState({ isOpen: true, needRenderTooltip: true });\n    };\n\n    // Закрыть поповер\n    private close = () => {\n        this.setState({ isOpen: false });\n    };\n\n    // Метод начала отслеживания поповера и анимация его появления\n    private enter = () => {\n        this.trackTooltip();\n        this.animateEnter();\n        if (this.props.onShow && this.tooltipNode) {\n            this.props.onShow(this.tooltipNode);\n        }\n    };\n\n    // Метод окончания отслеживания поповера и анимация его исчезновения\n    private exit = () => {\n        this.animateExit();\n        this.untrackTooltip();\n    };\n\n    private setTooltipNode = (node: HTMLDivElement) => {\n        const { setTooltipRef } = this.props;\n\n        if (node) {\n            // Получение ссылок на тело подсказки и стрелочку.\n            this.bodyEl = this.bodyRef.current;\n            this.tipEl = this.tipRef.current;\n        }\n\n        this.tooltipNode = node;\n\n        setTooltipRef?.(this.tooltipNode);\n    };\n\n    // Рендер поповера\n    private resolveTooltipLayout = () => {\n        if (!this.tooltipNode) {\n            return;\n        }\n\n        const { alignTip } = this.props;\n\n        // Поиск оптимальной зоны для позиционирования. Измеряет размер каждой зоны и использует наибольшую.\n        // В качестве размера тултипа берется размер тела тултипа плюс высота стрелочки с обеих сторон.\n        const zone = pickZone(\n            this.props.preferPlace,\n            this.windowBounds,\n            this.targetBounds,\n            TIP_HEIGHT,\n            MAX_FROM_EDGE_FOR_TIP,\n            {\n                h: this.tooltipBodySize.h + TIP_HEIGHT,\n                w: this.tooltipBodySize.w + TIP_HEIGHT,\n            },\n        );\n\n        this.zone = zone;\n\n        this.setState({\n            standing: zone.standing,\n        });\n\n        const axis = axes[zone.flow];\n\n        // Для расчета позиции тултипа, размер тултипа вычисляется в зависимости от зоны где он будет располагаться,\n        // если тултип в сверху или снизу то высота стрелочки прибавляется к высоте тултипа\n        const tooltipSize = { ...this.tooltipBodySize };\n        tooltipSize[zone.flow === ETooltipFlowTypes.ROW ? ETooltipSizeParameter.W : ETooltipSizeParameter.H] +=\n            TIP_HEIGHT;\n\n        /* При позиционировании на вспомогательной оси нельзя превышать границы. Для достижения этого: Сначала\n            позиционируется вспомогательной оси относительно центра вспомогательной оси обернутого элемента, затем\n            смещение на необходимую величину, чтобы выйти за границы.\n            */\n        const pos = calcRelPos(zone, this.targetBounds, tooltipSize);\n\n        // Смещение позволяет разработчику контролировать дистанцию между Tip (стрелочкой) и обернутым элементом.\n        pos[axis.main.start] += OFFSET * zone.order;\n\n        let dockingEdgeBufferLength = 0;\n        if (this.bodyEl) {\n            dockingEdgeBufferLength = Math.round(+getComputedStyle(this.bodyEl).borderRadius.slice(0, -2)) || 0;\n        }\n        /*\n         * Ограничение позиционирование обертки внутри элемента рамки. Попытка не попасть в визуально допустимый\n         * буфер элемента рамки. Буфер рассчитывается в зависимости от размера Tip (стрелочка) и его OFFSET (отступ).\n         */\n        const frameBuffer = TIP_HEIGHT + OFFSET;\n        const hangingBufferLength = dockingEdgeBufferLength * 2 + TIP_HEIGHT * 2 + frameBuffer;\n        const frameCrossStart = this.windowBounds[axis.cross.start];\n        const frameCrossEnd = this.windowBounds[axis.cross.end];\n        const frameCrossLength = this.windowBounds[axis.cross.size];\n        const frameCrossInnerLength = frameCrossLength - frameBuffer * 2;\n        const frameCrossInnerStart = frameCrossStart + frameBuffer;\n        const frameCrossInnerEnd = frameCrossEnd - frameBuffer;\n        const tooltipCrossStart = pos[axis.cross.start];\n        const tooltipCrossEnd = pos[axis.cross.end];\n\n        if (alignTip === ETooltipAlign.START) {\n            pos[axis.cross.start] =\n                this.targetBounds[axis.cross.end] -\n                MAX_FROM_EDGE_FOR_TIP -\n                TIP_HEIGHT -\n                this.targetBounds[axis.cross.size] / 2;\n        } else if (alignTip === ETooltipAlign.END) {\n            pos[axis.cross.start] =\n                this.targetBounds[axis.cross.start] -\n                tooltipSize[axis.cross.size] +\n                MAX_FROM_EDGE_FOR_TIP +\n                TIP_HEIGHT +\n                this.targetBounds[axis.cross.size] / 2;\n        } else if (pos.crossLength > frameCrossLength) {\n            /*\n             * Если Tooltip не влезает в frameCrossLength тогда просто позиционируем его в `frameCrossStart`.\n             * CrossLength тултипа будет принудительно forced to overflow into the `Frame` .\n             */\n            pos[axis.cross.start] = 0;\n\n            // Если tooltipCrossStart выходит за некое пороговое значение targetCrossLength, тогда ограничить его tooltipCrossStart\n        } else if (this.targetBounds[axis.cross.end] < hangingBufferLength) {\n            pos[axis.cross.start] = this.targetBounds[axis.cross.end] - hangingBufferLength;\n\n            /*\n             * Проверка, что начало вспомогательной оси в пределах обернутого элемента и его рамок, имеет ли смысл\n             * пытаться вместить Tooltip туда\n             */\n        } else if (this.targetBounds[axis.cross.start] > frameCrossInnerEnd) {\n            pos[axis.cross.start] = this.targetBounds[axis.cross.start] - tooltipSize[axis.cross.size];\n\n            /* Если tooltipCrossStart не влазит внутрь рамок (honouring buffers) тогда просто центруем поповер в\n                 оставшейся frameCrossLength.\n                */\n        } else if (pos.crossLength > frameCrossInnerLength) {\n            pos[axis.cross.start] = (frameCrossLength - pos.crossLength) / 2;\n        } else if (tooltipCrossStart < frameCrossInnerStart) {\n            pos[axis.cross.start] = frameCrossInnerStart;\n        } else if (tooltipCrossEnd > frameCrossInnerEnd) {\n            pos[axis.cross.start] = pos[axis.cross.start] - (pos[axis.cross.end] - frameCrossInnerEnd);\n        }\n        /**\n         * Применение стилей flow и order. Это может повлиять на последующие измерения высоты и ширины контейнера.\n         * Когда Tip (стрелочка) меняет ориентацию из-за изменений `row`/`column`, будет затронуты ширина и высота.\n         * Мониторинг лейаута перехватит эти изменения и сам пересчитает лейаут.\n         */\n        this.tooltipNode.style.flexFlow = zone.flow;\n        if (this.bodyEl) {\n            this.bodyEl.style.order = zone.order.toString();\n        }\n\n        // Применение абсолютного позиционирования\n        this.tooltipNode.style.top = `${pos.y}px`;\n        this.tooltipNode.style.left = `${pos.x}px`;\n\n        // Расчёт позиционирования Tip (стрелочки)\n        let tipCrossPos =\n            centerOfBoundsFromBounds(zone.flow, ETooltipAxesType.CROSS, this.targetBounds, pos) - TIP_HEIGHT;\n\n        if (tipCrossPos < MAX_FROM_EDGE_FOR_TIP) {\n            tipCrossPos = MAX_FROM_EDGE_FOR_TIP;\n        } else if (tipCrossPos > pos.crossLength - MAX_FROM_EDGE_FOR_TIP - TIP_HEIGHT * 2) {\n            tipCrossPos = pos.crossLength - MAX_FROM_EDGE_FOR_TIP - TIP_HEIGHT * 2;\n        }\n\n        if (this.tipEl) {\n            this.tipEl.style.transform = `${flowToTipTranslations[zone.flow]}(${tipCrossPos}px)`;\n            this.tipEl.style.borderWidth = `${TIP_HEIGHT}px`;\n        }\n    };\n\n    // Метод проверки изменения границ обернутого элемента.\n    private setAndCheckResizeTargetBounds = () => {\n        const { targetRef } = this.props;\n\n        if (!targetRef.current) {\n            return false;\n        }\n\n        const newTargetBounds = calcBounds(targetRef.current);\n        if (this.targetBounds && equalCoords(this.targetBounds, newTargetBounds)) {\n            return false;\n        }\n\n        this.targetBounds = newTargetBounds;\n        return true;\n    };\n\n    // Метод проверки необходимости перерисовки лейаута\n    private checkTargetReposition = () => {\n        if (this.setAndCheckResizeTargetBounds()) {\n            this.resolveTooltipLayout();\n        }\n    };\n\n    // Метод измерения размеров тела тултипа (без стрелочки)\n    private setTooltipBodySize = () => {\n        if (!this.bodyEl) {\n            return;\n        }\n\n        this.tooltipBodySize = { w: this.bodyEl.offsetWidth, h: this.bodyEl.offsetHeight };\n    };\n\n    // Очистка таймеров анимации исчезновения\n    private animateExitStop = () => {\n        if (this.exitingAnimationTimer1) {\n            window.clearTimeout(this.exitingAnimationTimer1);\n        }\n        if (this.exitingAnimationTimer2) {\n            window.clearTimeout(this.exitingAnimationTimer2);\n        }\n        this.setState({ exiting: false });\n    };\n\n    // Анимация исчезновения\n    private animateExit = () => {\n        this.setState({ exiting: true });\n        this.exitingAnimationTimer2 = window.setTimeout(() => {\n            window.setTimeout(() => {\n                if (!this.tooltipNode) {\n                    return;\n                }\n                this.tooltipNode.style.transform = `${flowToTooltipTranslations[this.zone.flow]}(${\n                    this.zone.order * 50\n                }px)`;\n                this.tooltipNode.style.opacity = \"0\";\n            }, 0);\n        }, 0);\n\n        this.exitingAnimationTimer1 = window.setTimeout(() => {\n            this.setState({ exiting: false, needRenderTooltip: false });\n        }, ENTER_EXIT_TRANSITION_DURATION_MS);\n    };\n\n    // Анимация появления\n    private animateEnter = () => {\n        if (!this.tooltipNode) {\n            return;\n        }\n\n        // Подготовка стилей появления, чтобы можно было анимировать.\n        this.tooltipNode.style.transform = `${flowToTooltipTranslations[this.zone.flow]}(${this.zone.order * 50}px)`;\n        this.tooltipNode.style.opacity = \"0\";\n\n        /* Hack: http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes */\n        // После инициализации лейаута применяем анимации transition.\n        // Без этой строчки не всегда применяются стили добавленные в style, из-за чего иногда тултип появляется резко подергиваясь\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        this.tooltipNode.offsetHeight;\n\n        if (this.tipEl) {\n            this.tipEl.style.transition = \"transform 150ms ease-in\";\n        }\n        this.tooltipNode.style.transitionProperty = \"opacity, transform\";\n        this.tooltipNode.style.transitionDuration = \"500ms\";\n        this.tooltipNode.style.transitionTimingFunction = \"cubic-bezier(0.230, 1.000, 0.320, 1.000)\";\n        this.tooltipNode.style.opacity = \"1\";\n        this.tooltipNode.style.transform = \"translateY(0)\";\n    };\n\n    //  Отслеживание поповера\n    private trackTooltip = () => {\n        if (!this.tooltipNode) {\n            return;\n        }\n        this.hasTracked = true;\n\n        // Установка опроса для проверки изменилось ли положение. Другого способа узнать этого без опроса\n        this.checkLayoutInterval = window.setInterval(this.checkTargetReposition, REFRESH_INTERVAL_MS);\n\n        /*\n        Наблюдение за изменением границ на всех уровнях, при необходимости - перерасчет. Привязка лэйаут монитора\n        должна быть сделана сразу, т.к. перерасчет может вызывать рекурсивно изменение в границах. Поэтому если мы\n        сделали одноразовый force-layout перед наблюдением, наши расчеты окончательной позиции могут быть неверными.\n        */\n\n        window.addEventListener(\"scroll\", this.onWindowScroll);\n        window.addEventListener(\"resize\", this.onWindowResize);\n\n        // Запуск лейаута при первой прогрузке\n        this.windowBounds = calcBounds(window); // запомнили размер окна\n        this.setTooltipBodySize(); // заполнили размер тултипа\n        this.setAndCheckResizeTargetBounds();\n        this.resolveTooltipLayout();\n    };\n\n    // Отписка от отслеживания поповера\n    private untrackTooltip = () => {\n        if (!this.tooltipNode) {\n            return;\n        }\n        if (this.checkLayoutInterval) {\n            window.clearInterval(this.checkLayoutInterval);\n        }\n        window.removeEventListener(\"scroll\", this.onWindowScroll);\n        window.removeEventListener(\"resize\", this.onWindowResize);\n        this.hasTracked = false;\n    };\n\n    // Перерисовка при скролле \"рамки\"\n    private onWindowScroll = () => {\n        this.setAndCheckResizeTargetBounds();\n        this.resolveTooltipLayout();\n    };\n\n    // Перерисовка при изменении размеров \"рамки\"\n    private onWindowResize = () => {\n        this.windowBounds = calcBounds(window);\n        this.resolveTooltipLayout();\n    };\n\n    // Отрисовка самого Tooltip\n    private tooltipRender: () => React.ReactElement = () => {\n        const {\n            className,\n            size,\n            preferPlace,\n            alignTip,\n            isOpen,\n            renderContainer,\n            onShow,\n            setTooltipRef,\n            onKeyDown,\n            targetRef,\n            ...rest\n        } = this.props;\n        const { elements } = this.context;\n\n        const sizeClass = size === ETooltipSize.SM ? styles.tooltipSM : styles.tooltipLG;\n        const classNames = clsx(\n            styles.tooltipDesktop,\n            sizeClass,\n            { [styles.closable]: !!elements.closeButton },\n            className,\n        );\n\n        return (\n            <div className={styles.tooltipOverlay}>\n                <div className={classNames} {...rest} ref={this.setTooltipNode}>\n                    <div className={styles.tooltipDesktopContent} ref={this.bodyRef}>\n                        {elements.body}\n                        {elements.link}\n                        {elements.closeButton}\n                    </div>\n                    <TooltipDesktopTip direction={DIRECTIONS[this.state.standing]} ref={this.tipRef} />\n                </div>\n            </div>\n        );\n    };\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,wBAAmD;AAAA,EACrD,QAAQ;AAAA,EACR,KAAK;AACT;AAGA,MAAM,4BAAuD;AAAA,EACzD,QAAQ;AAAA,EACR,KAAK;AACT;AAGA,MAAM,aAAa;AAAA,EACf,CAAC,oBAAoB,KAAK,GAAG,kBAAkB;AAAA,EAC/C,CAAC,oBAAoB,KAAK,GAAG,kBAAkB;AAAA,EAC/C,CAAC,oBAAoB,IAAI,GAAG,kBAAkB;AAAA,EAC9C,CAAC,oBAAoB,KAAK,GAAG,kBAAkB;AACnD;AAGA,MAAM,sBAAsB;AAE5B,MAAM,oCAAoC;AAE1C,MAAM,SAAS;AAEf,MAAM,aAAa;AAEnB,MAAM,wBAAwB;AAqBvB,MAAM,2BAA2BA,eAAM,UAA8D;AAAA,EAArG;AAAA;AAMK,gCAA2B;AAAA,MAC/B,CAAC,iBAAiB,IAAI,GAAG,kBAAkB;AAAA,MAC3C,CAAC,iBAAiB,QAAQ,GAAG,oBAAoB;AAAA,MACjD,CAAC,iBAAiB,IAAI,GAAG,cAAc;AAAA,MACvC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,CAAC,sBAAsB,CAAC,GAAG;AAAA,MAC3B,CAAC,sBAAsB,CAAC,GAAG;AAAA,IAAA;AAEvB,2CAAgC;AAAA,MACpC,CAAC,sBAAsB,CAAC,GAAG;AAAA,MAC3B,CAAC,sBAAsB,CAAC,GAAG;AAAA,IAAA;AAEvB,wCAA+B;AAAA,MACnC,CAAC,yBAAyB,CAAC,GAAG;AAAA,MAC9B,CAAC,uBAAuB,CAAC,GAAG;AAAA,MAC5B,CAAC,yBAAyB,CAAC,GAAG;AAAA,MAC9B,CAAC,uBAAuB,CAAC,GAAG;AAAA,MAC5B,CAAC,sBAAsB,CAAC,GAAG;AAAA,MAC3B,CAAC,sBAAsB,CAAC,GAAG;AAAA,IAAA;AAEvB,wCAA+B;AAAA,MACnC,CAAC,yBAAyB,CAAC,GAAG;AAAA,MAC9B,CAAC,uBAAuB,CAAC,GAAG;AAAA,MAC5B,CAAC,yBAAyB,CAAC,GAAG;AAAA,MAC9B,CAAC,uBAAuB,CAAC,GAAG;AAAA,MAC5B,CAAC,sBAAsB,CAAC,GAAG;AAAA,MAC3B,CAAC,sBAAsB,CAAC,GAAG;AAAA,IAAA;AAGvB,mCAAUA,eAAM,UAAA;AAChB,kCAASA,eAAM,UAAA;AAEf,iCAA4B;AAC5B,kCAA6B;AAC7B,uCAAqC;AACrC,sCAAa;AACb,kDAAwC;AACxC,kDAAwC;AACxC,+CAAqC;AAEtC,iCAAkC;AAAA,MACrC,SAAS;AAAA;AAAA,MACT,QAAQ,KAAK,MAAM;AAAA;AAAA,MACnB,mBAAmB,KAAK,MAAM;AAAA;AAAA,MAC9B,UAAU,oBAAoB;AAAA,IAAA;AAoE1B;AAAA,uCAAc,MAAM;AACxB,UAAI,KAAK,MAAM,SAAS;AACpB,aAAK,gBAAA;AAAA,MACT;AACA,WAAK,SAAS,EAAE,QAAQ,MAAM,mBAAmB,MAAM;AAAA,IAC3D;AAGQ;AAAA,iCAAQ,MAAM;AAClB,WAAK,SAAS,EAAE,QAAQ,MAAA,CAAO;AAAA,IACnC;AAGQ;AAAA,iCAAQ,MAAM;AAClB,WAAK,aAAA;AACL,WAAK,aAAA;AACL,UAAI,KAAK,MAAM,UAAU,KAAK,aAAa;AACvC,aAAK,MAAM,OAAO,KAAK,WAAW;AAAA,MACtC;AAAA,IACJ;AAGQ;AAAA,gCAAO,MAAM;AACjB,WAAK,YAAA;AACL,WAAK,eAAA;AAAA,IACT;AAEQ,0CAAiB,CAAC,SAAyB;AAC/C,YAAM,EAAE,kBAAkB,KAAK;AAE/B,UAAI,MAAM;AAEN,aAAK,SAAS,KAAK,QAAQ;AAC3B,aAAK,QAAQ,KAAK,OAAO;AAAA,MAC7B;AAEA,WAAK,cAAc;AAEnB,qDAAgB,KAAK;AAAA,IACzB;AAGQ;AAAA,gDAAuB,MAAM;AACjC,UAAI,CAAC,KAAK,aAAa;AACnB;AAAA,MACJ;AAEA,YAAM,EAAE,aAAa,KAAK;AAI1B,YAAM,OAAO;AAAA,QACT,KAAK,MAAM;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UACI,GAAG,KAAK,gBAAgB,IAAI;AAAA,UAC5B,GAAG,KAAK,gBAAgB,IAAI;AAAA,QAAA;AAAA,MAChC;AAGJ,WAAK,OAAO;AAEZ,WAAK,SAAS;AAAA,QACV,UAAU,KAAK;AAAA,MAAA,CAClB;AAED,YAAM,OAAO,KAAK,KAAK,IAAI;AAI3B,YAAM,cAAc,EAAE,GAAG,KAAK,gBAAA;AAC9B,kBAAY,KAAK,SAAS,kBAAkB,MAAM,sBAAsB,IAAI,sBAAsB,CAAC,KAC/F;AAMJ,YAAM,MAAM,WAAW,MAAM,KAAK,cAAc,WAAW;AAG3D,UAAI,KAAK,KAAK,KAAK,KAAK,SAAS,KAAK;AAEtC,UAAI,0BAA0B;AAC9B,UAAI,KAAK,QAAQ;AACb,kCAA0B,KAAK,MAAM,CAAC,iBAAiB,KAAK,MAAM,EAAE,aAAa,MAAM,GAAG,EAAE,CAAC,KAAK;AAAA,MACtG;AAKA,YAAM,cAAc,aAAa;AACjC,YAAM,sBAAsB,0BAA0B,IAAI,aAAa,IAAI;AAC3E,YAAM,kBAAkB,KAAK,aAAa,KAAK,MAAM,KAAK;AAC1D,YAAM,gBAAgB,KAAK,aAAa,KAAK,MAAM,GAAG;AACtD,YAAM,mBAAmB,KAAK,aAAa,KAAK,MAAM,IAAI;AAC1D,YAAM,wBAAwB,mBAAmB,cAAc;AAC/D,YAAM,uBAAuB,kBAAkB;AAC/C,YAAM,qBAAqB,gBAAgB;AAC3C,YAAM,oBAAoB,IAAI,KAAK,MAAM,KAAK;AAC9C,YAAM,kBAAkB,IAAI,KAAK,MAAM,GAAG;AAE1C,UAAI,aAAa,cAAc,OAAO;AAClC,YAAI,KAAK,MAAM,KAAK,IAChB,KAAK,aAAa,KAAK,MAAM,GAAG,IAChC,wBACA,aACA,KAAK,aAAa,KAAK,MAAM,IAAI,IAAI;AAAA,MAC7C,WAAW,aAAa,cAAc,KAAK;AACvC,YAAI,KAAK,MAAM,KAAK,IAChB,KAAK,aAAa,KAAK,MAAM,KAAK,IAClC,YAAY,KAAK,MAAM,IAAI,IAC3B,wBACA,aACA,KAAK,aAAa,KAAK,MAAM,IAAI,IAAI;AAAA,MAC7C,WAAW,IAAI,cAAc,kBAAkB;AAK3C,YAAI,KAAK,MAAM,KAAK,IAAI;AAAA,MAG5B,WAAW,KAAK,aAAa,KAAK,MAAM,GAAG,IAAI,qBAAqB;AAChE,YAAI,KAAK,MAAM,KAAK,IAAI,KAAK,aAAa,KAAK,MAAM,GAAG,IAAI;AAAA,MAMhE,WAAW,KAAK,aAAa,KAAK,MAAM,KAAK,IAAI,oBAAoB;AACjE,YAAI,KAAK,MAAM,KAAK,IAAI,KAAK,aAAa,KAAK,MAAM,KAAK,IAAI,YAAY,KAAK,MAAM,IAAI;AAAA,MAK7F,WAAW,IAAI,cAAc,uBAAuB;AAChD,YAAI,KAAK,MAAM,KAAK,KAAK,mBAAmB,IAAI,eAAe;AAAA,MACnE,WAAW,oBAAoB,sBAAsB;AACjD,YAAI,KAAK,MAAM,KAAK,IAAI;AAAA,MAC5B,WAAW,kBAAkB,oBAAoB;AAC7C,YAAI,KAAK,MAAM,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,MAAM,GAAG,IAAI;AAAA,MAC3E;AAMA,WAAK,YAAY,MAAM,WAAW,KAAK;AACvC,UAAI,KAAK,QAAQ;AACb,aAAK,OAAO,MAAM,QAAQ,KAAK,MAAM,SAAA;AAAA,MACzC;AAGA,WAAK,YAAY,MAAM,MAAM,GAAG,IAAI,CAAC;AACrC,WAAK,YAAY,MAAM,OAAO,GAAG,IAAI,CAAC;AAGtC,UAAI,cACA,yBAAyB,KAAK,MAAM,iBAAiB,OAAO,KAAK,cAAc,GAAG,IAAI;AAE1F,UAAI,cAAc,uBAAuB;AACrC,sBAAc;AAAA,MAClB,WAAW,cAAc,IAAI,cAAc,wBAAwB,aAAa,GAAG;AAC/E,sBAAc,IAAI,cAAc,wBAAwB,aAAa;AAAA,MACzE;AAEA,UAAI,KAAK,OAAO;AACZ,aAAK,MAAM,MAAM,YAAY,GAAG,sBAAsB,KAAK,IAAI,CAAC,IAAI,WAAW;AAC/E,aAAK,MAAM,MAAM,cAAc,GAAG,UAAU;AAAA,MAChD;AAAA,IACJ;AAGQ;AAAA,yDAAgC,MAAM;AAC1C,YAAM,EAAE,cAAc,KAAK;AAE3B,UAAI,CAAC,UAAU,SAAS;AACpB,eAAO;AAAA,MACX;AAEA,YAAM,kBAAkB,WAAW,UAAU,OAAO;AACpD,UAAI,KAAK,gBAAgB,YAAY,KAAK,cAAc,eAAe,GAAG;AACtE,eAAO;AAAA,MACX;AAEA,WAAK,eAAe;AACpB,aAAO;AAAA,IACX;AAGQ;AAAA,iDAAwB,MAAM;AAClC,UAAI,KAAK,iCAAiC;AACtC,aAAK,qBAAA;AAAA,MACT;AAAA,IACJ;AAGQ;AAAA,8CAAqB,MAAM;AAC/B,UAAI,CAAC,KAAK,QAAQ;AACd;AAAA,MACJ;AAEA,WAAK,kBAAkB,EAAE,GAAG,KAAK,OAAO,aAAa,GAAG,KAAK,OAAO,aAAA;AAAA,IACxE;AAGQ;AAAA,2CAAkB,MAAM;AAC5B,UAAI,KAAK,wBAAwB;AAC7B,eAAO,aAAa,KAAK,sBAAsB;AAAA,MACnD;AACA,UAAI,KAAK,wBAAwB;AAC7B,eAAO,aAAa,KAAK,sBAAsB;AAAA,MACnD;AACA,WAAK,SAAS,EAAE,SAAS,MAAA,CAAO;AAAA,IACpC;AAGQ;AAAA,uCAAc,MAAM;AACxB,WAAK,SAAS,EAAE,SAAS,KAAA,CAAM;AAC/B,WAAK,yBAAyB,OAAO,WAAW,MAAM;AAClD,eAAO,WAAW,MAAM;AACpB,cAAI,CAAC,KAAK,aAAa;AACnB;AAAA,UACJ;AACA,eAAK,YAAY,MAAM,YAAY,GAAG,0BAA0B,KAAK,KAAK,IAAI,CAAC,IAC3E,KAAK,KAAK,QAAQ,EACtB;AACA,eAAK,YAAY,MAAM,UAAU;AAAA,QACrC,GAAG,CAAC;AAAA,MACR,GAAG,CAAC;AAEJ,WAAK,yBAAyB,OAAO,WAAW,MAAM;AAClD,aAAK,SAAS,EAAE,SAAS,OAAO,mBAAmB,OAAO;AAAA,MAC9D,GAAG,iCAAiC;AAAA,IACxC;AAGQ;AAAA,wCAAe,MAAM;AACzB,UAAI,CAAC,KAAK,aAAa;AACnB;AAAA,MACJ;AAGA,WAAK,YAAY,MAAM,YAAY,GAAG,0BAA0B,KAAK,KAAK,IAAI,CAAC,IAAI,KAAK,KAAK,QAAQ,EAAE;AACvG,WAAK,YAAY,MAAM,UAAU;AAMjC,WAAK,YAAY;AAEjB,UAAI,KAAK,OAAO;AACZ,aAAK,MAAM,MAAM,aAAa;AAAA,MAClC;AACA,WAAK,YAAY,MAAM,qBAAqB;AAC5C,WAAK,YAAY,MAAM,qBAAqB;AAC5C,WAAK,YAAY,MAAM,2BAA2B;AAClD,WAAK,YAAY,MAAM,UAAU;AACjC,WAAK,YAAY,MAAM,YAAY;AAAA,IACvC;AAGQ;AAAA,wCAAe,MAAM;AACzB,UAAI,CAAC,KAAK,aAAa;AACnB;AAAA,MACJ;AACA,WAAK,aAAa;AAGlB,WAAK,sBAAsB,OAAO,YAAY,KAAK,uBAAuB,mBAAmB;AAQ7F,aAAO,iBAAiB,UAAU,KAAK,cAAc;AACrD,aAAO,iBAAiB,UAAU,KAAK,cAAc;AAGrD,WAAK,eAAe,WAAW,MAAM;AACrC,WAAK,mBAAA;AACL,WAAK,8BAAA;AACL,WAAK,qBAAA;AAAA,IACT;AAGQ;AAAA,0CAAiB,MAAM;AAC3B,UAAI,CAAC,KAAK,aAAa;AACnB;AAAA,MACJ;AACA,UAAI,KAAK,qBAAqB;AAC1B,eAAO,cAAc,KAAK,mBAAmB;AAAA,MACjD;AACA,aAAO,oBAAoB,UAAU,KAAK,cAAc;AACxD,aAAO,oBAAoB,UAAU,KAAK,cAAc;AACxD,WAAK,aAAa;AAAA,IACtB;AAGQ;AAAA,0CAAiB,MAAM;AAC3B,WAAK,8BAAA;AACL,WAAK,qBAAA;AAAA,IACT;AAGQ;AAAA,0CAAiB,MAAM;AAC3B,WAAK,eAAe,WAAW,MAAM;AACrC,WAAK,qBAAA;AAAA,IACT;AAGQ;AAAA,yCAA0C,MAAM;AACpD,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,IACH,KAAK;AACT,YAAM,EAAE,aAAa,KAAK;AAE1B,YAAM,YAAY,SAAS,aAAa,KAAK,OAAO,YAAY,OAAO;AACvE,YAAM,aAAa;AAAA,QACf,OAAO;AAAA,QACP;AAAA,QACA,EAAE,CAAC,OAAO,QAAQ,GAAG,CAAC,CAAC,SAAS,YAAA;AAAA,QAChC;AAAA,MAAA;AAGJ,aACI,oBAAC,OAAA,EAAI,WAAW,OAAO,gBACnB,UAAA,qBAAC,OAAA,EAAI,WAAW,YAAa,GAAG,MAAM,KAAK,KAAK,gBAC5C,UAAA;AAAA,QAAA,qBAAC,SAAI,WAAW,OAAO,uBAAuB,KAAK,KAAK,SACnD,UAAA;AAAA,UAAA,SAAS;AAAA,UACT,SAAS;AAAA,UACT,SAAS;AAAA,QAAA,GACd;AAAA,QACA,oBAAC,mBAAA,EAAkB,WAAW,WAAW,KAAK,MAAM,QAAQ,GAAG,KAAK,KAAK,OAAA,CAAQ;AAAA,MAAA,EAAA,CACrF,EAAA,CACJ;AAAA,IAER;AAAA;AAAA,EAnaO,SAAS;AACZ,UAAM,EAAE,oBAAoB,KAAK;AACjC,UAAM,EAAE,sBAAsB,KAAK;AACnC,UAAM,EAAE,aAAa,KAAK;AAE1B,WACI,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA,SAAS;AAAA,MACT,yCACI,QAAA,EAAO,WAAW,mBAAmB,SAAS,MAAO,UAAA,KAAK,cAAA,EAAc,CAAE;AAAA,IAAA,GAEnF;AAAA,EAER;AAAA,EAEO,oBAA0B;AAC7B,QAAI,KAAK,MAAM,QAAQ;AACnB,WAAK,MAAA;AAAA,IACT;AAAA,EACJ;AAAA,EAEO,mBAAmB,WAAqC,WAA2C;AACtG,UAAM,QAAQ,KAAK;AACnB,UAAM,QAAQ,KAAK;AAEnB,UAAM,WAAW,CAAC,UAAU,UAAU,MAAM;AAC5C,UAAM,YAAY,UAAU,UAAU,CAAC,MAAM;AAE7C,QAAI,UAAU;AACV,WAAK,YAAA;AACL;AAAA,IACJ,WAAW,WAAW;AAClB,WAAK,MAAA;AACL;AAAA,IACJ;AAEA,UAAM,UAAU,CAAC,UAAU,UAAU,MAAM;AAC3C,UAAM,WAAW,UAAU,UAAU,CAAC,MAAM;AAE5C,QAAI,SAAS;AACT,WAAK,MAAA;AACL;AAAA,IACJ,WAAW,UAAU;AACjB,WAAK,KAAA;AACL;AAAA,IACJ;AAEA,QAAI,MAAM,UAAU,CAAC,QAAQ,UAAU,UAAU,MAAM,QAAQ,GAAG;AAC9D,WAAK,mBAAA;AACL,WAAK,8BAAA;AACL,WAAK,qBAAA;AAAA,IACT;AAAA,EACJ;AAAA,EAEO,uBAA6B;AAGhC,SAAK,gBAAA;AAEL,QAAI,KAAK,YAAY;AACjB,WAAK,eAAA;AAAA,IACT;AAAA,EACJ;AAsWJ;AAzdI,cADS,oBACK,eAAc;AAC5B,cAFS,oBAEK,eAAc;"}