@vkontakte/vkui 4.34.2 → 4.35.0

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -17,10 +17,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
 var React = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -33,6 +33,8 @@ var _Subhead = require("../Typography/Subhead/Subhead");
 
 var _NavTransitionContext = require("../NavTransitionContext/NavTransitionContext");
 
+var _PopperArrow = require("../PopperArrow/PopperArrow");
+
 var _reactPopper = require("react-popper");
 
 var _TooltipContainer = require("./TooltipContainer");
@@ -45,9 +47,11 @@ var _warnOnce = require("../../lib/warnOnce");
 
 var _utils = require("../../lib/utils");
 
+var _prefixClass = require("../../lib/prefixClass");
+
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 
-var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "mode"];
+var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "mode", "appearance", "arrow", "placement"];
 
 var isDOMTypeElement = function isDOMTypeElement(element) {
   return /*#__PURE__*/React.isValidElement(element) && typeof element.type === "string";
@@ -57,29 +61,28 @@ var baseClassName = (0, _getClassName.getClassName)("Tooltip");
 var warn = (0, _warnOnce.warnOnce)("Tooltip");
 var IS_DEV = process.env.NODE_ENV === "development";
 var SimpleTooltip = /*#__PURE__*/React.forwardRef(function SimpleTooltip(_ref, ref) {
-  var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "accent" : _ref$mode,
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "accent" : _ref$appearance,
       header = _ref.header,
       text = _ref.text,
-      arrowRef = _ref.arrowRef,
+      arrow = _ref.arrow,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
       attributes = _ref.attributes;
   return (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: (0, _classNames.classNames)(baseClassName, "Tooltip--".concat(mode))
+    vkuiClass: (0, _classNames.classNames)(baseClassName, "Tooltip--".concat(appearance))
   }, (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
     vkuiClass: "Tooltip__container",
     ref: ref,
     style: style.container
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
-    vkuiClass: "Tooltip__corner",
-    style: style.arrow
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.arrow, {
-    ref: arrowRef
-  })), (0, _jsxRuntime.createScopedElement)("div", {
+  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), arrow && (0, _jsxRuntime.createScopedElement)(_PopperArrow.PopperArrow, {
+    style: style.arrow,
+    attributes: attributes === null || attributes === void 0 ? void 0 : attributes.arrow,
+    arrowClassName: (0, _prefixClass.prefixClass)("Tooltip__arrow")
+  }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Tooltip__content"
   }, header && (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
-    weight: "1",
+    weight: "2",
     vkuiClass: "Tooltip__title"
   }, header), text && (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
     vkuiClass: "Tooltip__text"
@@ -108,6 +111,19 @@ function getPlacement(alignX, alignY) {
 function isVerticalPlacement(placement) {
   return placement.startsWith("top") || placement.startsWith("bottom");
 }
+/**
+ * Вычисляем стиль подсказки: параметр appearance имеет приоритет, иначе мапим mode на подходящее значение из appearance
+ * TODO: v5 избавиться от пропа mode и этого метода, для appearance по умолчанию сделать "accent"
+ */
+
+
+function calculateAppearance(mode, appearance) {
+  if (appearance) {
+    return appearance;
+  }
+
+  return mode === "light" ? "white" : "accent";
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
@@ -131,6 +147,10 @@ var Tooltip = function Tooltip(_ref2) {
       cornerAbsoluteOffset = _ref2.cornerAbsoluteOffset,
       _ref2$mode = _ref2.mode,
       mode = _ref2$mode === void 0 ? "accent" : _ref2$mode,
+      appearance = _ref2.appearance,
+      _ref2$arrow = _ref2.arrow,
+      arrow = _ref2$arrow === void 0 ? true : _ref2$arrow,
+      placement = _ref2.placement,
       restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
 
   var _useNavTransition = (0, _NavTransitionContext.useNavTransition)(),
@@ -143,15 +163,10 @@ var Tooltip = function Tooltip(_ref2) {
       tooltipRef = _React$useState2[0],
       setTooltipRef = _React$useState2[1];
 
-  var _React$useState3 = React.useState(null),
+  var _React$useState3 = React.useState(),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      tooltipArrowRef = _React$useState4[0],
-      setTooltipArrowRef = _React$useState4[1];
-
-  var _React$useState5 = React.useState(),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      target = _React$useState6[0],
-      setTarget = _React$useState6[1];
+      target = _React$useState4[0],
+      setTarget = _React$useState4[1];
 
   if (IS_DEV) {
     var multiChildren = React.Children.count(children) > 1; // Empty children is a noop
@@ -178,63 +193,70 @@ var Tooltip = function Tooltip(_ref2) {
     throw new Error("Use TooltipContainer for Tooltip outside Panel (see docs)");
   }
 
-  var arrowOffsetModifier = React.useMemo(function () {
-    return {
-      name: "arrowOffset",
-      enabled: true,
-      phase: "main",
-      fn: function fn(_ref3) {
-        var state = _ref3.state;
+  var modifiers = React.useMemo(function () {
+    var modifiers = [{
+      name: "offset",
+      options: {
+        offset: [offsetX, offsetY]
+      }
+    }, {
+      name: "preventOverflow"
+    }, {
+      name: "flip"
+    }];
 
-        if (!state.modifiersData.arrow) {
-          return;
+    if (arrow) {
+      modifiers.push({
+        name: "arrow",
+        options: {
+          padding: 14
         }
+      });
+      modifiers.push({
+        name: "arrowOffset",
+        enabled: true,
+        phase: "main",
+        fn: function fn(_ref3) {
+          var state = _ref3.state;
+
+          if (!state.modifiersData.arrow) {
+            return;
+          }
 
-        if (isVerticalPlacement(state.placement)) {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.x = cornerAbsoluteOffset;
-          } else {
-            var _state$modifiersData$;
+          if (isVerticalPlacement(state.placement)) {
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.x = cornerAbsoluteOffset;
+            } else {
+              var _state$modifiersData$;
 
-            if (((_state$modifiersData$ = state.modifiersData.arrow) === null || _state$modifiersData$ === void 0 ? void 0 : _state$modifiersData$.x) !== undefined) {
-              state.modifiersData.arrow.x += cornerOffset;
+              if (((_state$modifiersData$ = state.modifiersData.arrow) === null || _state$modifiersData$ === void 0 ? void 0 : _state$modifiersData$.x) !== undefined) {
+                state.modifiersData.arrow.x += cornerOffset;
+              }
             }
-          }
-        } else {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.y = cornerAbsoluteOffset;
           } else {
-            var _state$modifiersData$2;
-
-            if (((_state$modifiersData$2 = state.modifiersData.arrow) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== undefined) {
-              state.modifiersData.arrow.y += cornerOffset;
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.y = cornerAbsoluteOffset;
+            } else {
+              var _state$modifiersData$2;
+
+              if (((_state$modifiersData$2 = state.modifiersData.arrow) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== undefined) {
+                state.modifiersData.arrow.y += cornerOffset;
+              }
             }
           }
         }
-      }
-    };
-  }, [cornerOffset, cornerAbsoluteOffset]);
-  var placement = getPlacement(alignX, alignY);
+      });
+    }
+
+    return modifiers;
+  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY]);
+
+  var _placement = placement !== null && placement !== void 0 ? placement : getPlacement(alignX, alignY);
 
   var _usePopper = (0, _reactPopper.usePopper)(target, tooltipRef, {
     strategy: strategy,
-    placement: placement,
-    modifiers: [{
-      name: "offset",
-      options: {
-        offset: [offsetX, offsetY]
-      }
-    }, {
-      name: "arrow",
-      options: {
-        element: tooltipArrowRef,
-        padding: 14
-      }
-    }, {
-      name: "preventOverflow"
-    }, {
-      name: "flip"
-    }, arrowOffsetModifier]
+    placement: _placement,
+    modifiers: modifiers
   }),
       styles = _usePopper.styles,
       attributes = _usePopper.attributes;
@@ -249,14 +271,15 @@ var Tooltip = function Tooltip(_ref2) {
   var childRef = /*#__PURE__*/React.isValidElement(children) && (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);
   var patchedRef = (0, _useExternRef.useExternRef)(setTarget, childRef);
   var child = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, (0, _defineProperty2.default)({}, isDOMTypeElement(children) ? "ref" : "getRootRef", patchedRef)) : children;
+
+  var _appearance = calculateAppearance(mode, appearance);
+
   return (0, _jsxRuntime.createScopedElement)(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/_reactDom.default.createPortal((0, _jsxRuntime.createScopedElement)(SimpleTooltip, (0, _extends2.default)({}, restProps, {
-    mode: mode,
+    appearance: _appearance,
+    arrow: arrow,
     ref: function ref(el) {
       return setTooltipRef(el);
     },
-    arrowRef: function arrowRef(el) {
-      return setTooltipArrowRef(el);
-    },
     style: {
       arrow: styles.arrow,
       container: styles.popper

package/dist/cjs/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["isDOMTypeElement","element","React","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","mode","header","text","arrowRef","style","attributes","container","arrow","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","_isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","tooltipArrowRef","setTooltipArrowRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","tooltipContainerAttr","strategy","position","Error","arrowOffsetModifier","name","enabled","phase","fn","state","modifiersData","undefined","y","modifiers","options","offset","padding","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","ReactDOM","createPortal","el","popper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAiBA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CACvBC,OADuB,EAEmB;AAC1C,SAAO,aAAAC,KAAK,CAACC,cAAN,CAAqBF,OAArB,KAAiC,OAAOA,OAAO,CAACG,IAAf,KAAwB,QAAhE;AACD,CAJD;;AAMA,IAAMC,aAAa,GAAG,gCAAa,SAAb,CAAtB;AACA,IAAMC,IAAI,GAAG,wBAAS,SAAT,CAAb;AACA,IAAMC,MAAM,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAxC;AAEA,IAAMC,aAAa,gBAAGT,KAAK,CAACU,UAAN,CACpB,SAASD,aAAT,OAEEE,GAFF,EAGE;AAAA,uBAFEC,IAEF;AAAA,MAFEA,IAEF,0BAFS,QAET;AAAA,MAFmBC,MAEnB,QAFmBA,MAEnB;AAAA,MAF2BC,IAE3B,QAF2BA,IAE3B;AAAA,MAFiCC,QAEjC,QAFiCA,QAEjC;AAAA,wBAF2CC,KAE3C;AAAA,MAF2CA,KAE3C,2BAFmD,EAEnD;AAAA,MAFuDC,UAEvD,QAFuDA,UAEvD;AACA,SACE;AAAK,IAAA,SAAS,EAAE,4BAAWd,aAAX,qBAAsCS,IAAtC;AAAhB,KACE;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,GAAG,EAAED,GAFP;AAGE,IAAA,KAAK,EAAEK,KAAK,CAACE;AAHf,KAIMD,UAJN,aAIMA,UAJN,uBAIMA,UAAU,CAAEC,SAJlB,GAME;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,KAAK,EAAEF,KAAK,CAACG;AAFf,KAGMF,UAHN,aAGMA,UAHN,uBAGMA,UAAU,CAAEE,KAHlB;AAIE,IAAA,GAAG,EAAEJ;AAJP,KANF,EAYE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGF,MAAM,IACL,qCAAC,gBAAD;AAAS,IAAA,MAAM,EAAC,GAAhB;AAAoB,IAAA,SAAS,EAAC;AAA9B,KACGA,MADH,CAFJ,EAMGC,IAAI,IAAI,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAAoCA,IAApC,CANX,CAZF,CADF,CADF;AAyBD,CA9BmB,CAAtB;;AA+FA,SAASM,SAAT,CAAmBC,CAAnB,EAA8C;AAC5C,UAAQA,CAAR;AACE,SAAK,MAAL;AACE,aAAO,OAAP;;AACF,SAAK,OAAL;AACE,aAAO,KAAP;;AACF;AACE,aAAO,EAAP;AANJ;AAQD;;AACD,SAASC,YAAT,CACEC,MADF,EAEEC,MAFF,EAGa;AACX,SAAO,CAACA,MAAM,IAAI,QAAX,EAAqBJ,SAAS,CAACG,MAAM,IAAI,MAAX,CAA9B,EACJE,MADI,CACG,UAACC,CAAD;AAAA,WAAO,CAAC,CAACA,CAAT;AAAA,GADH,EAEJC,IAFI,CAEC,GAFD,CAAP;AAGD;;AACD,SAASC,mBAAT,CAA6BC,SAA7B,EAAmD;AACjD,SAAOA,SAAS,CAACC,UAAV,CAAqB,KAArB,KAA+BD,SAAS,CAACC,UAAV,CAAqB,QAArB,CAAtC;AACD;AAED;AACA;AACA;;;AACO,IAAMC,OAAO,GAAG,SAAVA,OAAU,QAYH;AAAA;;AAAA,MAXlBC,QAWkB,SAXlBA,QAWkB;AAAA,4BAVlBC,OAUkB;AAAA,MAVTC,QAUS,8BAVE,IAUF;AAAA,4BATlBC,OASkB;AAAA,MATlBA,OASkB,8BATR,CASQ;AAAA,4BARlBC,OAQkB;AAAA,MARlBA,OAQkB,8BARR,EAQQ;AAAA,MAPlBb,MAOkB,SAPlBA,MAOkB;AAAA,MANlBC,MAMkB,SANlBA,MAMkB;AAAA,MALlBa,OAKkB,SALlBA,OAKkB;AAAA,iCAJlBC,YAIkB;AAAA,MAJlBA,YAIkB,mCAJH,CAIG;AAAA,MAHlBC,oBAGkB,SAHlBA,oBAGkB;AAAA,yBAFlB3B,IAEkB;AAAA,MAFlBA,IAEkB,2BAFX,QAEW;AAAA,MADf4B,SACe;;AAClB,0BAAqB,6CAArB;AAAA,MAAQC,QAAR,qBAAQA,QAAR;;AACA,MAAMR,OAAO,GAAGC,QAAQ,IAAI,CAACO,QAA7B;;AACA,wBAAoCzC,KAAK,CAAC0C,QAAN,CAAmC,IAAnC,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,yBACE5C,KAAK,CAAC0C,QAAN,CAAmC,IAAnC,CADF;AAAA;AAAA,MAAOG,eAAP;AAAA,MAAwBC,kBAAxB;;AAEA,yBAA4B9C,KAAK,CAAC0C,QAAN,EAA5B;AAAA;AAAA,MAAOK,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAI3C,MAAJ,EAAY;AACV,QAAM4C,aAAa,GAAGjD,KAAK,CAACkD,QAAN,CAAeC,KAAf,CAAqBnB,QAArB,IAAiC,CAAvD,CADU,CAEV;;AACA,QAAMoB,cAAc,GAClB,yBAAapB,QAAb,KAA0B,sBAAOA,QAAP,MAAoB,QADhD;AAEA,KAACiB,aAAa,IAAIG,cAAlB,KACEhD,IAAI,CACF,CACE,sDADF,EAEE6C,aAAa,IAAI,WAFnB,EAGEG,cAAc,IAAIC,IAAI,CAACC,SAAL,CAAetB,QAAf,CAHpB,EAKGP,MALH,CAKU8B,OALV,EAMG5B,IANH,CAMQ,GANR,CADE,EAQF,OARE,CADN;AAWD;AAED;;AACA;;;AACA,MAAM6B,gBAAgB,GAAGxD,KAAK,CAACyD,OAAN,CACvB;AAAA,WAAMV,MAAN,aAAMA,MAAN,uBAAMA,MAAM,CAAEW,OAAR,YAAoBC,sCAApB,OAAN;AAAA,GADuB,EAEvB,CAACZ,MAAD,CAFuB,CAAzB;AAIA,MAAMa,QAAQ,GAAG5D,KAAK,CAACyD,OAAN,CACf;AAAA,WAAO,CAAAV,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAE/B,KAAR,CAAc6C,QAAd,MAA2B,OAA3B,GAAqC,OAArC,GAA+C,UAAtD;AAAA,GADe,EAEf,CAACd,MAAD,CAFe,CAAjB;AAIA;;AACA;;AAEA,MAAI1C,MAAM,IAAI0C,MAAV,IAAoB,CAACS,gBAAzB,EAA2C;AACzC,UAAM,IAAIM,KAAJ,CACJ,2DADI,CAAN;AAGD;;AAED,MAAMC,mBAAmB,GAAG/D,KAAK,CAACyD,OAAN,CAAmC,YAAM;AACnE,WAAO;AACLO,MAAAA,IAAI,EAAE,aADD;AAELC,MAAAA,OAAO,EAAE,IAFJ;AAGLC,MAAAA,KAAK,EAAE,MAHF;AAILC,MAAAA,EAJK,qBAIS;AAAA,YAATC,KAAS,SAATA,KAAS;;AACZ,YAAI,CAACA,KAAK,CAACC,aAAN,CAAoBlD,KAAzB,EAAgC;AAC9B;AACD;;AACD,YAAIS,mBAAmB,CAACwC,KAAK,CAACvC,SAAP,CAAvB,EAA0C;AACxC,cAAIU,oBAAoB,KAAK+B,SAA7B,EAAwC;AACtCF,YAAAA,KAAK,CAACC,aAAN,CAAoBlD,KAApB,CAA0BE,CAA1B,GAA8BkB,oBAA9B;AACD,WAFD,MAEO;AAAA;;AACL,gBAAI,0BAAA6B,KAAK,CAACC,aAAN,CAAoBlD,KAApB,gFAA2BE,CAA3B,MAAiCiD,SAArC,EAAgD;AAC9CF,cAAAA,KAAK,CAACC,aAAN,CAAoBlD,KAApB,CAA0BE,CAA1B,IAA+BiB,YAA/B;AACD;AACF;AACF,SARD,MAQO;AACL,cAAIC,oBAAoB,KAAK+B,SAA7B,EAAwC;AACtCF,YAAAA,KAAK,CAACC,aAAN,CAAoBlD,KAApB,CAA0BoD,CAA1B,GAA8BhC,oBAA9B;AACD,WAFD,MAEO;AAAA;;AACL,gBAAI,2BAAA6B,KAAK,CAACC,aAAN,CAAoBlD,KAApB,kFAA2BoD,CAA3B,MAAiCD,SAArC,EAAgD;AAC9CF,cAAAA,KAAK,CAACC,aAAN,CAAoBlD,KAApB,CAA0BoD,CAA1B,IAA+BjC,YAA/B;AACD;AACF;AACF;AACF;AAzBI,KAAP;AA2BD,GA5B2B,EA4BzB,CAACA,YAAD,EAAeC,oBAAf,CA5ByB,CAA5B;AA8BA,MAAMV,SAAS,GAAGP,YAAY,CAACC,MAAD,EAASC,MAAT,CAA9B;;AACA,mBAA+B,4BAAUuB,MAAV,EAAkBJ,UAAlB,EAA8B;AAC3DiB,IAAAA,QAAQ,EAARA,QAD2D;AAE3D/B,IAAAA,SAAS,EAATA,SAF2D;AAG3D2C,IAAAA,SAAS,EAAE,CACT;AACER,MAAAA,IAAI,EAAE,QADR;AAEES,MAAAA,OAAO,EAAE;AACPC,QAAAA,MAAM,EAAE,CAACvC,OAAD,EAAUC,OAAV;AADD;AAFX,KADS,EAOT;AACE4B,MAAAA,IAAI,EAAE,OADR;AAEES,MAAAA,OAAO,EAAE;AACP1E,QAAAA,OAAO,EAAE8C,eADF;AAEP8B,QAAAA,OAAO,EAAE;AAFF;AAFX,KAPS,EAcT;AACEX,MAAAA,IAAI,EAAE;AADR,KAdS,EAiBT;AACEA,MAAAA,IAAI,EAAE;AADR,KAjBS,EAoBTD,mBApBS;AAHgD,GAA9B,CAA/B;AAAA,MAAQa,MAAR,cAAQA,MAAR;AAAA,MAAgB3D,UAAhB,cAAgBA,UAAhB;;AA2BA,gBAAqB,kBAArB;AAAA,MAAQ4D,QAAR,WAAQA,QAAR;;AACA,sDAAuBA,QAAvB,EAAiC,OAAjC,EAA0C5C,OAAO,IAAII,OAArD,EAA8D;AAC5DyC,IAAAA,OAAO,EAAE;AADmD,GAA9D,EAxGkB,CA2GlB;;AAEA,MAAMC,QAAQ,GACZ,aAAA/E,KAAK,CAACC,cAAN,CAAqB+B,QAArB,MACClC,gBAAgB,CAACkC,QAAD,CAAhB,GAA6BA,QAAQ,CAACrB,GAAtC,GAA4CqB,QAAQ,CAACgD,KAAT,CAAeC,UAD5D,CADF;AAGA,MAAMC,UAAU,GAAG,gCAAalC,SAAb,EAAwB+B,QAAxB,CAAnB;AACA,MAAMI,KAAK,GAAG,aAAAnF,KAAK,CAACC,cAAN,CAAqB+B,QAArB,iBACVhC,KAAK,CAACoF,YAAN,CAAmBpD,QAAnB,oCACGlC,gBAAgB,CAACkC,QAAD,CAAhB,GAA6B,KAA7B,GAAqC,YADxC,EACuDkD,UADvD,EADU,GAIVlD,QAJJ;AAMA,SACE,qCAAC,KAAD,CAAO,QAAP,QACGmD,KADH,EAEGlD,OAAO,IACNc,MAAM,IAAI,IADX,iBAECsC,kBAASC,YAAT,CACE,qCAAC,aAAD,6BACM9C,SADN;AAEE,IAAA,IAAI,EAAE5B,IAFR;AAGE,IAAA,GAAG,EAAE,aAAC2E,EAAD;AAAA,aAAQ3C,aAAa,CAAC2C,EAAD,CAArB;AAAA,KAHP;AAIE,IAAA,QAAQ,EAAE,kBAACA,EAAD;AAAA,aAAQzC,kBAAkB,CAACyC,EAAD,CAA1B;AAAA,KAJZ;AAKE,IAAA,KAAK,EAAE;AAAEpE,MAAAA,KAAK,EAAEyD,MAAM,CAACzD,KAAhB;AAAuBD,MAAAA,SAAS,EAAE0D,MAAM,CAACY;AAAzC,KALT;AAME,IAAA,UAAU,EAAE;AACVrE,MAAAA,KAAK,uBAAEF,UAAU,CAACE,KAAb,iEAAsB,IADjB;AAEVD,MAAAA,SAAS,wBAAED,UAAU,CAACuE,MAAb,mEAAuB;AAFtB;AANd,KADF,EAYEhC,gBAZF,CAJJ,CADF;AAqBD,CAxJM","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { HasRootRef } from \"../../types\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n  target?: HTMLDivElement;\n  arrowRef?: React.Ref<HTMLDivElement>;\n  style?: {\n    arrow: React.CSSProperties;\n    container: React.CSSProperties;\n  };\n  attributes?: {\n    arrow: React.HTMLAttributes<HTMLDivElement> | null;\n    container: React.HTMLAttributes<HTMLDivElement> | null;\n  };\n}\n\nconst isDOMTypeElement = (\n  element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n  return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n  function SimpleTooltip(\n    { mode = \"accent\", header, text, arrowRef, style = {}, attributes },\n    ref\n  ) {\n    return (\n      <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>\n        <div\n          vkuiClass=\"Tooltip__container\"\n          ref={ref}\n          style={style.container}\n          {...attributes?.container}\n        >\n          <div\n            vkuiClass=\"Tooltip__corner\"\n            style={style.arrow}\n            {...attributes?.arrow}\n            ref={arrowRef}\n          />\n          <div vkuiClass=\"Tooltip__content\">\n            {header && (\n              <Subhead weight=\"1\" vkuiClass=\"Tooltip__title\">\n                {header}\n              </Subhead>\n            )}\n            {text && <Subhead vkuiClass=\"Tooltip__text\">{text}</Subhead>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children:\n    | React.ReactElement<HasRootRef<any>>\n    | React.ReactElement<React.PropsWithRef<any>>;\n  mode?: \"accent\" | \"light\";\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\n  alignX?: \"center\" | \"left\" | \"right\";\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: \"top\" | \"bottom\";\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n}\n\ndeclare type ArrowOffsetModifierOptions = {\n  offset: number;\n};\ndeclare type ArrowOffsetModifier = Modifier<\n  \"arrowOffset\",\n  ArrowOffsetModifierOptions\n>;\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n  switch (x) {\n    case \"left\":\n      return \"start\";\n    case \"right\":\n      return \"end\";\n    default:\n      return \"\";\n  }\n}\nfunction getPlacement(\n  alignX: TooltipProps[\"alignX\"],\n  alignY: TooltipProps[\"alignY\"]\n): Placement {\n  return [alignY || \"bottom\", mapAlignX(alignX || \"left\")]\n    .filter((p) => !!p)\n    .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n  return placement.startsWith(\"top\") || placement.startsWith(\"bottom\");\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: _isShown = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  mode = \"accent\",\n  ...restProps\n}: TooltipProps) => {\n  const { entering } = useNavTransition();\n  const isShown = _isShown && !entering;\n  const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);\n  const [tooltipArrowRef, setTooltipArrowRef] =\n    React.useState<HTMLElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement>();\n\n  if (IS_DEV) {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild =\n      hasReactNode(children) && typeof children !== \"object\";\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          \"children должен быть одним React элементом, получено\",\n          multiChildren && \"несколько\",\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(\" \"),\n        \"error\"\n      );\n  }\n\n  /* eslint-disable no-restricted-properties */\n  /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/\n  const tooltipContainer = React.useMemo(\n    () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n    [target]\n  );\n  const strategy = React.useMemo(\n    () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n    [target]\n  );\n  /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/\n  /* eslint-enable no-restricted-properties */\n\n  if (IS_DEV && target && !tooltipContainer) {\n    throw new Error(\n      \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n    );\n  }\n\n  const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {\n    return {\n      name: \"arrowOffset\",\n      enabled: true,\n      phase: \"main\",\n      fn({ state }) {\n        if (!state.modifiersData.arrow) {\n          return;\n        }\n        if (isVerticalPlacement(state.placement)) {\n          if (cornerAbsoluteOffset !== undefined) {\n            state.modifiersData.arrow.x = cornerAbsoluteOffset;\n          } else {\n            if (state.modifiersData.arrow?.x !== undefined) {\n              state.modifiersData.arrow.x += cornerOffset;\n            }\n          }\n        } else {\n          if (cornerAbsoluteOffset !== undefined) {\n            state.modifiersData.arrow.y = cornerAbsoluteOffset;\n          } else {\n            if (state.modifiersData.arrow?.y !== undefined) {\n              state.modifiersData.arrow.y += cornerOffset;\n            }\n          }\n        }\n      },\n    };\n  }, [cornerOffset, cornerAbsoluteOffset]);\n\n  const placement = getPlacement(alignX, alignY);\n  const { styles, attributes } = usePopper(target, tooltipRef, {\n    strategy,\n    placement,\n    modifiers: [\n      {\n        name: \"offset\",\n        options: {\n          offset: [offsetX, offsetY],\n        },\n      },\n      {\n        name: \"arrow\",\n        options: {\n          element: tooltipArrowRef,\n          padding: 14,\n        },\n      },\n      {\n        name: \"preventOverflow\",\n      },\n      {\n        name: \"flip\",\n      },\n      arrowOffsetModifier,\n    ],\n  });\n\n  const { document } = useDOM();\n  useGlobalEventListener(document, \"click\", isShown && onClose, {\n    passive: true,\n  });\n  // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n  const childRef =\n    React.isValidElement(children) &&\n    (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n  const patchedRef = useExternRef(setTarget, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <SimpleTooltip\n            {...restProps}\n            mode={mode}\n            ref={(el) => setTooltipRef(el)}\n            arrowRef={(el) => setTooltipArrowRef(el)}\n            style={{ arrow: styles.arrow, container: styles.popper }}\n            attributes={{\n              arrow: attributes.arrow ?? null,\n              container: attributes.popper ?? null,\n            }}\n          />,\n          tooltipContainer\n        )}\n    </React.Fragment>\n  );\n};\n"],"file":"Tooltip.js"}
+{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["isDOMTypeElement","element","React","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","appearance","header","text","arrow","style","attributes","container","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","calculateAppearance","mode","Tooltip","children","isShown","_isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","tooltipContainerAttr","strategy","position","Error","modifiers","name","options","offset","push","padding","enabled","phase","fn","state","modifiersData","undefined","y","_placement","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","_appearance","ReactDOM","createPortal","el","popper"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { PopperArrow } from \"../PopperArrow/PopperArrow\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { HasRootRef } from \"../../types\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n  target?: HTMLDivElement;\n  style?: {\n    arrow: React.CSSProperties;\n    container: React.CSSProperties;\n  };\n  attributes?: {\n    arrow: React.HTMLAttributes<HTMLDivElement> | null;\n    container: React.HTMLAttributes<HTMLDivElement> | null;\n  };\n}\n\nconst isDOMTypeElement = (\n  element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n  return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n  function SimpleTooltip(\n    { appearance = \"accent\", header, text, arrow, style = {}, attributes },\n    ref\n  ) {\n    return (\n      <div vkuiClass={classNames(baseClassName, `Tooltip--${appearance}`)}>\n        <div\n          vkuiClass=\"Tooltip__container\"\n          ref={ref}\n          style={style.container}\n          {...attributes?.container}\n        >\n          {arrow && (\n            <PopperArrow\n              style={style.arrow}\n              attributes={attributes?.arrow}\n              arrowClassName={prefixClass(\"Tooltip__arrow\")}\n            />\n          )}\n          <div vkuiClass=\"Tooltip__content\">\n            {header && (\n              <Subhead weight=\"2\" vkuiClass=\"Tooltip__title\">\n                {header}\n              </Subhead>\n            )}\n            {text && <Subhead vkuiClass=\"Tooltip__text\">{text}</Subhead>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children:\n    | React.ReactElement<HasRootRef<any>>\n    | React.ReactElement<React.PropsWithRef<any>>;\n  /**\n   * @deprecated будет удалено в 5.0.0, устанавливать стиль следует через appearance\n   * Стиль отображения подсказки\n   */\n  mode?: \"accent\" | \"light\";\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\n  alignX?: \"center\" | \"left\" | \"right\";\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: \"top\" | \"bottom\";\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n}\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n  switch (x) {\n    case \"left\":\n      return \"start\";\n    case \"right\":\n      return \"end\";\n    default:\n      return \"\";\n  }\n}\nfunction getPlacement(\n  alignX: TooltipProps[\"alignX\"],\n  alignY: TooltipProps[\"alignY\"]\n): Placement {\n  return [alignY || \"bottom\", mapAlignX(alignX || \"left\")]\n    .filter((p) => !!p)\n    .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n  return placement.startsWith(\"top\") || placement.startsWith(\"bottom\");\n}\n\n/**\n * Вычисляем стиль подсказки: параметр appearance имеет приоритет, иначе мапим mode на подходящее значение из appearance\n * TODO: v5 избавиться от пропа mode и этого метода, для appearance по умолчанию сделать \"accent\"\n */\nfunction calculateAppearance(\n  mode: TooltipProps[\"mode\"],\n  appearance: TooltipProps[\"appearance\"]\n): TooltipProps[\"appearance\"] {\n  if (appearance) {\n    return appearance;\n  }\n\n  return mode === \"light\" ? \"white\" : \"accent\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: _isShown = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  mode = \"accent\",\n  appearance,\n  arrow = true,\n  placement,\n  ...restProps\n}: TooltipProps) => {\n  const { entering } = useNavTransition();\n  const isShown = _isShown && !entering;\n  const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement>();\n\n  if (IS_DEV) {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild =\n      hasReactNode(children) && typeof children !== \"object\";\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          \"children должен быть одним React элементом, получено\",\n          multiChildren && \"несколько\",\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(\" \"),\n        \"error\"\n      );\n  }\n\n  /* eslint-disable no-restricted-properties */\n  /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/\n  const tooltipContainer = React.useMemo(\n    () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n    [target]\n  );\n  const strategy = React.useMemo(\n    () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n    [target]\n  );\n  /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/\n  /* eslint-enable no-restricted-properties */\n\n  if (IS_DEV && target && !tooltipContainer) {\n    throw new Error(\n      \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n    );\n  }\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [offsetX, offsetY],\n        },\n      },\n      {\n        name: \"preventOverflow\",\n      },\n      {\n        name: \"flip\",\n      },\n    ];\n\n    if (arrow) {\n      modifiers.push({\n        name: \"arrow\",\n        options: {\n          padding: 14,\n        },\n      });\n      modifiers.push({\n        name: \"arrowOffset\",\n        enabled: true,\n        phase: \"main\",\n        fn({ state }) {\n          if (!state.modifiersData.arrow) {\n            return;\n          }\n          if (isVerticalPlacement(state.placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              state.modifiersData.arrow.x = cornerAbsoluteOffset;\n            } else {\n              if (state.modifiersData.arrow?.x !== undefined) {\n                state.modifiersData.arrow.x += cornerOffset;\n              }\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              state.modifiersData.arrow.y = cornerAbsoluteOffset;\n            } else {\n              if (state.modifiersData.arrow?.y !== undefined) {\n                state.modifiersData.arrow.y += cornerOffset;\n              }\n            }\n          }\n        },\n      });\n    }\n\n    return modifiers;\n  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY]);\n\n  const _placement = placement ?? getPlacement(alignX, alignY);\n  const { styles, attributes } = usePopper(target, tooltipRef, {\n    strategy,\n    placement: _placement,\n    modifiers,\n  });\n\n  const { document } = useDOM();\n  useGlobalEventListener(document, \"click\", isShown && onClose, {\n    passive: true,\n  });\n  // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n  const childRef =\n    React.isValidElement(children) &&\n    (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n  const patchedRef = useExternRef(setTarget, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n      })\n    : children;\n\n  const _appearance = calculateAppearance(mode, appearance);\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <SimpleTooltip\n            {...restProps}\n            appearance={_appearance}\n            arrow={arrow}\n            ref={(el) => setTooltipRef(el)}\n            style={{ arrow: styles.arrow, container: styles.popper }}\n            attributes={{\n              arrow: attributes.arrow ?? null,\n              container: attributes.popper ?? null,\n            }}\n          />,\n          tooltipContainer\n        )}\n    </React.Fragment>\n  );\n};\n"],"file":"Tooltip.js"}

package/dist/cjs/components/Typography/Headline/Headline.js

@@ -19,13 +19,16 @@ var _useAdaptivity2 = require("../../../hooks/useAdaptivity");
 
 var _classNames = require("../../../lib/classNames");
 
-var _getClassName = require("../../../helpers/getClassName");
+var _warnOnce = require("../../../lib/warnOnce");
 
-var _excluded = ["children", "weight", "level", "Component"];
+var _getClassName = require("../../../helpers/getClassName");
 
+var _excluded = ["children", "weight", "level", "Component", "getRootRef"];
+var warn = (0, _warnOnce.warnOnce)("Headline");
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
+
 var Headline = function Headline(_ref) {
   var children = _ref.children,
       _ref$weight = _ref.weight,
@@ -34,13 +37,19 @@ var Headline = function Headline(_ref) {
       level = _ref$level === void 0 ? "1" : _ref$level,
       _ref$Component = _ref.Component,
       Component = _ref$Component === void 0 ? "h3" : _ref$Component,
+      getRootRef = _ref.getRootRef,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
 
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
       sizeY = _useAdaptivity.sizeY;
 
+  if (process.env.NODE_ENV === "development" && typeof Component !== "string" && getRootRef) {
+    warn("getRootRef может использоваться только с элементами DOM", "error");
+  }
+
   return (0, _jsxRuntime.createScopedElement)(Component, (0, _extends2.default)({}, restProps, {
+    ref: getRootRef,
     vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Headline", platform), // TODO: v5 remove
     "Headline--sizeY-".concat(sizeY), // TODO: новая адаптивность
     "Headline--l-".concat(level), "Headline--w-".concat(weight))

package/dist/cjs/components/Typography/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"names":["Headline","children","weight","level","Component","restProps","platform","sizeY"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;;;AAeA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAMH;AAAA,MALnBC,QAKmB,QALnBA,QAKmB;AAAA,yBAJnBC,MAImB;AAAA,MAJnBA,MAImB,4BAJV,GAIU;AAAA,wBAHnBC,KAGmB;AAAA,MAHnBA,KAGmB,2BAHX,GAGW;AAAA,4BAFnBC,SAEmB;AAAA,MAFnBA,SAEmB,+BAFP,IAEO;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,SACE,qCAAC,SAAD,6BACMF,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,UAAb,EAAyBC,QAAzB,CADS,EAC2B;AAD3B,8BAEUC,KAFV,GAEmB;AAFnB,0BAGMJ,KAHN,yBAIMD,MAJN;AAFb,MASGD,QATH,CADF;AAaD,CAvBM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../../types\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport \"./Headline.css\";\n\nexport interface HeadlineProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   *\n   * > ⚠️ Начертания `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n   */\n  weight?: \"regular\" | \"medium\" | \"semibold\" | \"1\" | \"2\" | \"3\";\n  level?: \"1\" | \"2\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  children,\n  weight = \"3\",\n  level = \"1\",\n  Component = \"h3\", // TODO: v5 h4\n  ...restProps\n}: HeadlineProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Component\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"Headline\", platform), // TODO: v5 remove\n        `Headline--sizeY-${sizeY}`, // TODO: новая адаптивность\n        `Headline--l-${level}`,\n        `Headline--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"file":"Headline.js"}
+{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"names":["warn","Headline","children","weight","level","Component","getRootRef","restProps","platform","sizeY","process","env","NODE_ENV"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;;AAgBA,IAAMA,IAAI,GAAG,wBAAS,UAAT,CAAb;AAEA;AACA;AACA;;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAOH;AAAA,MANnBC,QAMmB,QANnBA,QAMmB;AAAA,yBALnBC,MAKmB;AAAA,MALnBA,MAKmB,4BALV,GAKU;AAAA,wBAJnBC,KAImB;AAAA,MAJnBA,KAImB,2BAJX,GAIW;AAAA,4BAHnBC,SAGmB;AAAA,MAHnBA,SAGmB,+BAHP,IAGO;AAAA,MAFnBC,UAEmB,QAFnBA,UAEmB;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,MACEC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IACA,OAAOP,SAAP,KAAqB,QADrB,IAEAC,UAHF,EAIE;AACAN,IAAAA,IAAI,CAAC,yDAAD,EAA4D,OAA5D,CAAJ;AACD;;AAED,SACE,qCAAC,SAAD,6BACMO,SADN;AAEE,IAAA,GAAG,EAAED,UAFP;AAGE,IAAA,SAAS,EAAE,4BACT,gCAAa,UAAb,EAAyBE,QAAzB,CADS,EAC2B;AAD3B,8BAEUC,KAFV,GAEmB;AAFnB,0BAGML,KAHN,yBAIMD,MAJN;AAHb,MAUGD,QAVH,CADF;AAcD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasRootRef } from \"../../../types\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport \"./Headline.css\";\n\nexport interface HeadlineProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   *\n   * > ⚠️ Начертания `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n   */\n  weight?: \"regular\" | \"medium\" | \"semibold\" | \"1\" | \"2\" | \"3\";\n  level?: \"1\" | \"2\";\n}\n\nconst warn = warnOnce(\"Headline\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  children,\n  weight = \"3\",\n  level = \"1\",\n  Component = \"h3\", // TODO: v5 h4\n  getRootRef,\n  ...restProps\n}: HeadlineProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    typeof Component !== \"string\" &&\n    getRootRef\n  ) {\n    warn(\"getRootRef может использоваться только с элементами DOM\", \"error\");\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        getClassName(\"Headline\", platform), // TODO: v5 remove\n        `Headline--sizeY-${sizeY}`, // TODO: новая адаптивность\n        `Headline--l-${level}`,\n        `Headline--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"file":"Headline.js"}