@vkontakte/vkui 4.34.0 → 4.35.0

package/dist/cjs/components/TabsItem/TabsItem.js

@@ -17,8 +17,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var React = _interopRequireWildcard(require("react"));
 
-var _getClassName = require("../../helpers/getClassName");
-
 var _Tappable = require("../Tappable/Tappable");
 
 var _classNames = require("../../lib/classNames");
@@ -27,7 +25,7 @@ var _platform = require("../../lib/platform");
 
 var _usePlatform = require("../../hooks/usePlatform");
 
-var _utils = require("../../lib/utils");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
 var _Tabs = require("../Tabs/Tabs");
 
@@ -35,42 +33,61 @@ var _Headline = require("../Typography/Headline/Headline");
 
 var _Subhead = require("../Typography/Subhead/Subhead");
 
-var _Text = require("../Typography/Text/Text");
-
-var _excluded = ["children", "selected", "after"];
+var _excluded = ["before", "children", "status", "after", "selected"];
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
 var TabsItem = function TabsItem(_ref) {
-  var children = _ref.children,
+  var before = _ref.before,
+      children = _ref.children,
+      status = _ref.status,
+      after = _ref.after,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
-      after = _ref.after,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-  var mode = React.useContext(_Tabs.TabsModeContext);
-  var ItemTypography = mode === "buttons" || mode === "segmented" ? _Subhead.Subhead : _Headline.Headline;
 
-  if (platform === _platform.VKCOM) {
-    ItemTypography = _Text.Text;
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var _React$useContext = React.useContext(_Tabs.TabsModeContext),
+      mode = _React$useContext.mode,
+      withGaps = _React$useContext.withGaps;
+
+  var statusComponent = null;
+
+  if (status) {
+    statusComponent = typeof status === "number" ? (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
+      Component: "span",
+      vkuiClass: "TabsItem__status TabsItem__status--count",
+      weight: "2"
+    }, status) : (0, _jsxRuntime.createScopedElement)("span", {
+      vkuiClass: "TabsItem__status"
+    }, status);
   }
 
   return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("TabsItem", platform), {
-      "TabsItem--selected": selected
-    }),
-    hasActive: mode === "segmented",
+    vkuiClass: (0, _classNames.classNames)("TabsItem", (platform === _platform.IOS || platform === _platform.VKCOM) && "TabsItem--".concat(platform), mode && "TabsItem--".concat(mode), selected && "TabsItem--selected", // TODO v5.0.0 новая адаптивность
+    sizeY && "TabsItem--sizeY-".concat(sizeY), withGaps && "TabsItem--withGaps"),
+    hoverMode: "TabsItem--hover",
     activeMode: "TabsItem--active",
-    focusVisibleMode: mode === "segmented" ? "outside" : "inside"
-  }), (0, _jsxRuntime.createScopedElement)(ItemTypography, {
+    focusVisibleMode: mode === "segmented" ? "outside" : "inside",
+    hasActive: mode === "segmented"
+  }), before && (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "TabsItem__before"
+  }, before), (0, _jsxRuntime.createScopedElement)(_Headline.Headline, {
     Component: "span",
-    vkuiClass: "TabsItem__in",
+    vkuiClass: "TabsItem__label",
+    level: mode === "default" ? "1" : "2",
     weight: "2"
-  }, children), (0, _utils.hasReactNode)(after) && (0, _jsxRuntime.createScopedElement)("div", {
+  }, children), statusComponent, after && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "TabsItem__after"
-  }, after));
+  }, after), mode === "default" && (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "TabsItem__underline",
+    "aria-hidden": true,
+    "data-selected": selected
+  }));
 };
 
 exports.TabsItem = TabsItem;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":["TabsItem","children","selected","after","restProps","platform","mode","React","useContext","TabsModeContext","ItemTypography","Subhead","Headline","VKCOM","Text"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAQA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAKH;AAAA,MAJnBC,QAImB,QAJnBA,QAImB;AAAA,2BAHnBC,QAGmB;AAAA,MAHnBA,QAGmB,8BAHR,KAGQ;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,IAAuB,GAAGC,KAAK,CAACC,UAAN,CAAiBC,qBAAjB,CAAhC;AAEA,MAAIC,cAAc,GAChBJ,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAA/B,GAA6CK,gBAA7C,GAAuDC,kBADzD;;AAGA,MAAIP,QAAQ,KAAKQ,eAAjB,EAAwB;AACtBH,IAAAA,cAAc,GAAGI,UAAjB;AACD;;AAED,SACE,qCAAC,kBAAD,6BACMV,SADN;AAEE;AACA,IAAA,SAAS,EAAE,4BAAW,gCAAa,UAAb,EAAyBC,QAAzB,CAAX,EAA+C;AACxD,4BAAsBH;AADkC,KAA/C,CAHb;AAME,IAAA,SAAS,EAAEI,IAAI,KAAK,WANtB;AAOE,IAAA,UAAU,EAAC,kBAPb;AAQE,IAAA,gBAAgB,EAAEA,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC;AARvD,MAUE,qCAAC,cAAD;AAAgB,IAAA,SAAS,EAAC,MAA1B;AAAiC,IAAA,SAAS,EAAC,cAA3C;AAA0D,IAAA,MAAM,EAAC;AAAjE,KACGL,QADH,CAVF,EAaG,yBAAaE,KAAb,KAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAb1B,CADF;AAiBD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { TabsProps, TabsModeContext } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Text } from \"../Typography/Text/Text\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  after?: React.ReactNode;\n  selected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  children,\n  selected = false,\n  after,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const mode: TabsProps[\"mode\"] = React.useContext(TabsModeContext);\n\n  let ItemTypography =\n    mode === \"buttons\" || mode === \"segmented\" ? Subhead : Headline;\n\n  if (platform === VKCOM) {\n    ItemTypography = Text;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"TabsItem\", platform), {\n        \"TabsItem--selected\": selected,\n      })}\n      hasActive={mode === \"segmented\"}\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n    >\n      <ItemTypography Component=\"span\" vkuiClass=\"TabsItem__in\" weight=\"2\">\n        {children}\n      </ItemTypography>\n      {hasReactNode(after) && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n    </Tappable>\n  );\n};\n"],"file":"TabsItem.js"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":["TabsItem","before","children","status","after","selected","restProps","platform","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","IOS","VKCOM"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA6BA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAOH;AAAA,MANnBC,MAMmB,QANnBA,MAMmB;AAAA,MALnBC,QAKmB,QALnBA,QAKmB;AAAA,MAJnBC,MAImB,QAJnBA,MAImB;AAAA,MAHnBC,KAGmB,QAHnBA,KAGmB;AAAA,2BAFnBC,QAEmB;AAAA,MAFnBA,QAEmB,8BAFR,KAEQ;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,0BACEC,KAAK,CAACC,UAAN,CAAiBC,qBAAjB,CADF;AAAA,MAAQC,IAAR,qBAAQA,IAAR;AAAA,MAAcC,QAAd,qBAAcA,QAAd;;AAEA,MAAIC,eAAe,GAAG,IAAtB;;AAEA,MAAIX,MAAJ,EAAY;AACVW,IAAAA,eAAe,GACb,OAAOX,MAAP,KAAkB,QAAlB,GACE,qCAAC,gBAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,SAAS,EAAC,0CAFZ;AAGE,MAAA,MAAM,EAAC;AAHT,OAKGA,MALH,CADF,GASE;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAoCA,MAApC,CAVJ;AAYD;;AAED,SACE,qCAAC,kBAAD,6BACMG,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,UADS,EAET,CAACC,QAAQ,KAAKQ,aAAb,IAAoBR,QAAQ,KAAKS,eAAlC,yBAAyDT,QAAzD,CAFS,EAGTK,IAAI,wBAAiBA,IAAjB,CAHK,EAITP,QAAQ,IAAI,oBAJH,EAKT;AACAG,IAAAA,KAAK,8BAAuBA,KAAvB,CANI,EAOTK,QAAQ,IAAI,oBAPH,CAFb;AAWE,IAAA,SAAS,EAAC,iBAXZ;AAYE,IAAA,UAAU,EAAC,kBAZb;AAaE,IAAA,gBAAgB,EAAED,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC,QAbvD;AAcE,IAAA,SAAS,EAAEA,IAAI,KAAK;AAdtB,MAgBGX,MAAM,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,MAAnC,CAhBb,EAiBE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,IAAA,KAAK,EAAEW,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;AAIE,IAAA,MAAM,EAAC;AAJT,KAMGV,QANH,CAjBF,EAyBGY,eAzBH,EA0BGV,KAAK,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CA1BZ,EA2BGQ,IAAI,KAAK,SAAT,IACC;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,uBAFF;AAGE,qBAAeP;AAHjB,IA5BJ,CADF;AAqCD,CAlEM","sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          vkuiClass=\"TabsItem__status TabsItem__status--count\"\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span vkuiClass=\"TabsItem__status\">{status}</span>\n      );\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        \"TabsItem\",\n        (platform === IOS || platform === VKCOM) && `TabsItem--${platform}`,\n        mode && `TabsItem--${mode}`,\n        selected && \"TabsItem--selected\",\n        // TODO v5.0.0 новая адаптивность\n        sizeY && `TabsItem--sizeY-${sizeY}`,\n        withGaps && \"TabsItem--withGaps\"\n      )}\n      hoverMode=\"TabsItem--hover\"\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n      hasActive={mode === \"segmented\"}\n    >\n      {before && <div vkuiClass=\"TabsItem__before\">{before}</div>}\n      <Headline\n        Component=\"span\"\n        vkuiClass=\"TabsItem__label\"\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n      {mode === \"default\" && (\n        <div\n          vkuiClass=\"TabsItem__underline\"\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"file":"TabsItem.js"}

package/dist/cjs/components/TextTooltip/TextTooltip.js

@@ -19,17 +19,15 @@ var React = _interopRequireWildcard(require("react"));
 
 var _HoverPopper = require("../HoverPopper/HoverPopper");
 
-var _getClassName = require("../../helpers/getClassName");
-
-var _usePlatform = require("../../hooks/usePlatform");
-
 var _utils = require("../../lib/utils");
 
 var _Subhead = require("../Typography/Subhead/Subhead");
 
 var _prefixClass = require("../../lib/prefixClass");
 
-var _excluded = ["children", "text", "header"];
+var _classNames = require("../../lib/classNames");
+
+var _excluded = ["children", "text", "header", "appearance"];
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
@@ -38,18 +36,17 @@ var TextTooltip = function TextTooltip(_ref) {
   var children = _ref.children,
       text = _ref.text,
       header = _ref.header,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "black" : _ref$appearance,
       popperProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)(_HoverPopper.HoverPopper, (0, _extends2.default)({
-    vkuiClass: (0, _getClassName.getClassName)("TextTooltip", platform),
+    vkuiClass: (0, _classNames.classNames)("TextTooltip", "TextTooltip--".concat(appearance)),
     arrow: true,
     arrowClassName: (0, _prefixClass.prefixClass)("TextTooltip__arrow"),
     content: (0, _jsxRuntime.createScopedElement)(React.Fragment, null, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
-      Component: "span",
       weight: "2",
       vkuiClass: "TextTooltip__header"
     }, header), (0, _utils.hasReactNode)(text) && (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
-      Component: "span",
       vkuiClass: "TextTooltip__text"
     }, text))
   }, popperProps), children);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["TextTooltip","children","text","header","popperProps","platform"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAeA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAKH;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,IAGsB,QAHtBA,IAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,WACmB;AACtB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,wBAAD;AACE,IAAA,SAAS,EAAE,gCAAa,aAAb,EAA4BA,QAA5B,CADb;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAE,8BAAY,oBAAZ,CAHlB;AAIE,IAAA,OAAO,EACL,qCAAC,KAAD,CAAO,QAAP,QACG,yBAAaF,MAAb,KACC,qCAAC,gBAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,MAAM,EAAC,GAFT;AAGE,MAAA,SAAS,EAAC;AAHZ,OAKGA,MALH,CAFJ,EAUG,yBAAaD,IAAb,KACC,qCAAC,gBAAD;AAAS,MAAA,SAAS,EAAC,MAAnB;AAA0B,MAAA,SAAS,EAAC;AAApC,OACGA,IADH,CAXJ;AALJ,KAsBME,WAtBN,GAwBGH,QAxBH,CADF;AA4BD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport \"./TextTooltip.css\";\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\" | \"content\"> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  ...popperProps\n}: TextTooltipProps) => {\n  const platform = usePlatform();\n\n  return (\n    <HoverPopper\n      vkuiClass={getClassName(\"TextTooltip\", platform)}\n      arrow\n      arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead\n              Component=\"span\"\n              weight=\"2\"\n              vkuiClass=\"TextTooltip__header\"\n            >\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead Component=\"span\" vkuiClass=\"TextTooltip__text\">\n              {text}\n            </Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"TextTooltip.js"}
+{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["TextTooltip","children","text","header","appearance","popperProps"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAmBA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAMH;AAAA,MALtBC,QAKsB,QALtBA,QAKsB;AAAA,MAJtBC,IAIsB,QAJtBA,IAIsB;AAAA,MAHtBC,MAGsB,QAHtBA,MAGsB;AAAA,6BAFtBC,UAEsB;AAAA,MAFtBA,UAEsB,gCAFT,OAES;AAAA,MADnBC,WACmB;AACtB,SACE,qCAAC,wBAAD;AACE,IAAA,SAAS,EAAE,4BAAW,aAAX,yBAA0CD,UAA1C,EADb;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAE,8BAAY,oBAAZ,CAHlB;AAIE,IAAA,OAAO,EACL,qCAAC,KAAD,CAAO,QAAP,QACG,yBAAaD,MAAb,KACC,qCAAC,gBAAD;AAAS,MAAA,MAAM,EAAC,GAAhB;AAAoB,MAAA,SAAS,EAAC;AAA9B,OACGA,MADH,CAFJ,EAMG,yBAAaD,IAAb,KACC,qCAAC,gBAAD;AAAS,MAAA,SAAS,EAAC;AAAnB,OAAwCA,IAAxC,CAPJ;AALJ,KAgBMG,WAhBN,GAkBGJ,QAlBH,CADF;AAsBD,CA7BM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./TextTooltip.css\";\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\" | \"content\"> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = \"black\", // TODO v5 сменить по умолчанию на \"neutral\"\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      vkuiClass={classNames(\"TextTooltip\", `TextTooltip--${appearance}`)}\n      arrow\n      arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead weight=\"2\" vkuiClass=\"TextTooltip__header\">\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead vkuiClass=\"TextTooltip__text\">{text}</Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"TextTooltip.js"}

package/dist/cjs/components/Textarea/Textarea.js

@@ -31,9 +31,6 @@ var _useExternRef = require("../../hooks/useExternRef");
 
 var _excluded = ["defaultValue", "grow", "style", "onResize", "className", "getRootRef", "getRef", "sizeY", "rows", "maxHeight"];
 
-/**
- * @see https://vkcom.github.io/VKUI/#/Textarea
- */
 var TextareaComponent = function TextareaComponent(_ref) {
   var _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
@@ -90,11 +87,15 @@ var TextareaComponent = function TextareaComponent(_ref) {
     onChange: onChange,
     ref: elementRef
   })));
-}; // eslint-disable-next-line import/no-default-export
+};
+/**
+ * @see https://vkcom.github.io/VKUI/#/Textarea
+ */
 
 
 var Textarea = (0, _withAdaptivity.withAdaptivity)(TextareaComponent, {
   sizeY: true
 });
 exports.Textarea = Textarea;
+Textarea.displayName = "Textarea";
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":["TextareaComponent","defaultValue","grow","style","onResize","className","getRootRef","getRef","sizeY","rows","maxHeight","restProps","value","onChange","currentScrollHeight","React","useRef","elementRef","useEffect","el","current","offsetParent","height","scrollHeight","disabled","Textarea"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;AAcA;AACA;AACA;AACA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAYL;AAAA,+BAXnBC,YAWmB;AAAA,MAXnBA,YAWmB,kCAXJ,EAWI;AAAA,uBAVnBC,IAUmB;AAAA,MAVnBA,IAUmB,0BAVZ,IAUY;AAAA,MATnBC,KASmB,QATnBA,KASmB;AAAA,MARnBC,QAQmB,QARnBA,QAQmB;AAAA,MAPnBC,SAOmB,QAPnBA,SAOmB;AAAA,MANnBC,UAMmB,QANnBA,UAMmB;AAAA,MALnBC,MAKmB,QALnBA,MAKmB;AAAA,MAJnBC,KAImB,QAJnBA,KAImB;AAAA,uBAHnBC,IAGmB;AAAA,MAHnBA,IAGmB,0BAHZ,CAGY;AAAA,MAFnBC,SAEmB,QAFnBA,SAEmB;AAAA,MADhBC,SACgB;;AACnB,2BAA0B,2CAAkBA,SAAlB,EAA6B;AAAEV,IAAAA,YAAY,EAAZA;AAAF,GAA7B,CAA1B;AAAA;AAAA,MAAOW,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,mBAAmB,GAAGC,KAAK,CAACC,MAAN,EAA5B;AACA,MAAMC,UAAU,GAAG,gCAAaV,MAAb,CAAnB,CAHmB,CAKnB;;AACAQ,EAAAA,KAAK,CAACG,SAAN,CAAgB,YAAM;AACpB,QAAMC,EAAE,GAAGF,UAAU,CAACG,OAAtB;;AAEA,QAAIlB,IAAI,IAAIiB,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEE,YAAhB,EAA8B;AAC5BF,MAAAA,EAAE,CAAChB,KAAH,CAASmB,MAAT,GAAkB,EAAlB;AACAH,MAAAA,EAAE,CAAChB,KAAH,CAASmB,MAAT,aAAqBH,EAAE,CAACI,YAAxB;;AAEA,UAAIJ,EAAE,CAACI,YAAH,KAAoBT,mBAAmB,CAACM,OAAxC,IAAmDhB,QAAvD,EAAiE;AAC/DA,QAAAA,QAAQ,CAACe,EAAD,CAAR;AACAL,QAAAA,mBAAmB,CAACM,OAApB,GAA8BD,EAAE,CAACI,YAAjC;AACD;AACF;AACF,GAZD,EAYG,CAACrB,IAAD,EAAOU,KAAP,EAAcJ,KAAd,EAAqBS,UAArB,EAAiCb,QAAjC,CAZH;AAcA,SACE,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAE,4BACT,UADS,EAET;AAFS,8BAGUI,KAHV,EADb;AAME,IAAA,SAAS,EAAEH,SANb;AAOE,IAAA,KAAK,EAAEF,KAPT;AAQE,IAAA,UAAU,EAAEG,UARd;AASE,IAAA,QAAQ,EAAEK,SAAS,CAACa;AATtB,KAWE,4EACMb,SADN;AAEE,IAAA,KAAK,EAAE;AAAED,MAAAA,SAAS,EAATA;AAAF,KAFT;AAGE,IAAA,IAAI,EAAED,IAHR;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,KAAK,EAAEG,KALT;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,GAAG,EAAEI;AAPP,KAXF,CADF;AAuBD,CAvDD,C,CAyDA;;;AACO,IAAMQ,QAAQ,GAAG,oCAAezB,iBAAf,EAAkC;AAAEQ,EAAAA,KAAK,EAAE;AAAT,CAAlC,CAAjB","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport \"./Textarea.css\";\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    AdaptivityProps,\n    Pick<React.CSSProperties, \"maxHeight\"> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nconst TextareaComponent = ({\n  defaultValue = \"\",\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  sizeY,\n  rows = 2,\n  maxHeight,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = \"\";\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      vkuiClass={classNames(\n        \"Textarea\",\n        // TODO. v5.0.0 Новая адаптивность\n        `Textarea--sizeY-${sizeY}`\n      )}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <textarea\n        {...restProps}\n        style={{ maxHeight }}\n        rows={rows}\n        vkuiClass=\"Textarea__el\"\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport const Textarea = withAdaptivity(TextareaComponent, { sizeY: true });\n"],"file":"Textarea.js"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":["TextareaComponent","defaultValue","grow","style","onResize","className","getRootRef","getRef","sizeY","rows","maxHeight","restProps","value","onChange","currentScrollHeight","React","useRef","elementRef","useEffect","el","current","offsetParent","height","scrollHeight","disabled","Textarea","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;AAcA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAYL;AAAA,+BAXnBC,YAWmB;AAAA,MAXnBA,YAWmB,kCAXJ,EAWI;AAAA,uBAVnBC,IAUmB;AAAA,MAVnBA,IAUmB,0BAVZ,IAUY;AAAA,MATnBC,KASmB,QATnBA,KASmB;AAAA,MARnBC,QAQmB,QARnBA,QAQmB;AAAA,MAPnBC,SAOmB,QAPnBA,SAOmB;AAAA,MANnBC,UAMmB,QANnBA,UAMmB;AAAA,MALnBC,MAKmB,QALnBA,MAKmB;AAAA,MAJnBC,KAImB,QAJnBA,KAImB;AAAA,uBAHnBC,IAGmB;AAAA,MAHnBA,IAGmB,0BAHZ,CAGY;AAAA,MAFnBC,SAEmB,QAFnBA,SAEmB;AAAA,MADhBC,SACgB;;AACnB,2BAA0B,2CAAkBA,SAAlB,EAA6B;AAAEV,IAAAA,YAAY,EAAZA;AAAF,GAA7B,CAA1B;AAAA;AAAA,MAAOW,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,mBAAmB,GAAGC,KAAK,CAACC,MAAN,EAA5B;AACA,MAAMC,UAAU,GAAG,gCAAaV,MAAb,CAAnB,CAHmB,CAKnB;;AACAQ,EAAAA,KAAK,CAACG,SAAN,CAAgB,YAAM;AACpB,QAAMC,EAAE,GAAGF,UAAU,CAACG,OAAtB;;AAEA,QAAIlB,IAAI,IAAIiB,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEE,YAAhB,EAA8B;AAC5BF,MAAAA,EAAE,CAAChB,KAAH,CAASmB,MAAT,GAAkB,EAAlB;AACAH,MAAAA,EAAE,CAAChB,KAAH,CAASmB,MAAT,aAAqBH,EAAE,CAACI,YAAxB;;AAEA,UAAIJ,EAAE,CAACI,YAAH,KAAoBT,mBAAmB,CAACM,OAAxC,IAAmDhB,QAAvD,EAAiE;AAC/DA,QAAAA,QAAQ,CAACe,EAAD,CAAR;AACAL,QAAAA,mBAAmB,CAACM,OAApB,GAA8BD,EAAE,CAACI,YAAjC;AACD;AACF;AACF,GAZD,EAYG,CAACrB,IAAD,EAAOU,KAAP,EAAcJ,KAAd,EAAqBS,UAArB,EAAiCb,QAAjC,CAZH;AAcA,SACE,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAE,4BACT,UADS,EAET;AAFS,8BAGUI,KAHV,EADb;AAME,IAAA,SAAS,EAAEH,SANb;AAOE,IAAA,KAAK,EAAEF,KAPT;AAQE,IAAA,UAAU,EAAEG,UARd;AASE,IAAA,QAAQ,EAAEK,SAAS,CAACa;AATtB,KAWE,4EACMb,SADN;AAEE,IAAA,KAAK,EAAE;AAAED,MAAAA,SAAS,EAATA;AAAF,KAFT;AAGE,IAAA,IAAI,EAAED,IAHR;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,KAAK,EAAEG,KALT;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,GAAG,EAAEI;AAPP,KAXF,CADF;AAuBD,CAvDD;AAyDA;AACA;AACA;;;AACO,IAAMQ,QAAQ,GAAG,oCAAezB,iBAAf,EAAkC;AAAEQ,EAAAA,KAAK,EAAE;AAAT,CAAlC,CAAjB;;AAEPiB,QAAQ,CAACC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport \"./Textarea.css\";\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    AdaptivityProps,\n    Pick<React.CSSProperties, \"maxHeight\"> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\nconst TextareaComponent = ({\n  defaultValue = \"\",\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  sizeY,\n  rows = 2,\n  maxHeight,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = \"\";\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      vkuiClass={classNames(\n        \"Textarea\",\n        // TODO. v5.0.0 Новая адаптивность\n        `Textarea--sizeY-${sizeY}`\n      )}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <textarea\n        {...restProps}\n        style={{ maxHeight }}\n        rows={rows}\n        vkuiClass=\"Textarea__el\"\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = withAdaptivity(TextareaComponent, { sizeY: true });\n\nTextarea.displayName = \"Textarea\";\n"],"file":"Textarea.js"}

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":"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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 { 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"}