@vkontakte/vkui 4.34.2 → 4.35.0

package/dist/cssm/components/TextTooltip/TextTooltip.css

@@ -1 +1 @@
-.vkuiTextTooltip{border-radius:8px;background:rgba(44,45,46,.88);padding:8px 12px 9px;color:#fff;color:var(--white);box-shadow:0 0 4px rgba(0,0,0,.04),0 4px 32px rgba(0,0,0,.16);-webkit-animation:vkui-popper-fadein .2s ease;animation:vkui-popper-fadein .2s ease}.vkuiTextTooltip__arrow{color:rgba(44,45,46,.88)}
+.vkuiTextTooltip{-webkit-animation:vkui-popper-fadein .2s ease;animation:vkui-popper-fadein .2s ease;background-color:#fff;background-color:var(--vkui--color_background_modal,#fff);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));color:#000;color:var(--vkui--color_text_primary,#000);padding:8px 12px 9px}.vkuiTextTooltip__arrow{color:#fff;color:var(--vkui--color_background_modal,#fff)}.vkuiTextTooltip--accent{background-color:#5a9eff;background-color:var(--vkui--color_background_accent_tint,#5a9eff);color:#fff;color:var(--vkui--color_text_contrast,#fff)}.vkuiTextTooltip--accent .vkuiTextTooltip__arrow{color:#5a9eff;color:var(--vkui--color_background_accent_tint,#5a9eff)}.vkuiTextTooltip--white{background-color:#fff;background-color:var(--vkui--color_background_contrast,#fff);color:#000;color:var(--vkui--color_text_primary_invariably,#000)}.vkuiTextTooltip--white .vkuiTextTooltip__arrow{color:#fff;color:var(--vkui--color_background_contrast,#fff)}.vkuiTextTooltip--black{background-color:#2d2d2e;background-color:var(--vkui--color_background_contrast_inverse,#2d2d2e);color:#fff;color:var(--vkui--color_text_contrast,#fff)}.vkuiTextTooltip--black .vkuiTextTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_contrast_inverse,#2d2d2e)}.vkuiTextTooltip--inversion{background-color:#2d2d2e;background-color:var(--vkui--color_background_modal_inverse,#2d2d2e);color:#fff;color:var(--vkui--color_text_contrast_themed,#fff)}.vkuiTextTooltip--inversion .vkuiTextTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_modal_inverse,#2d2d2e)}

package/dist/cssm/components/TextTooltip/TextTooltip.d.ts

@@ -10,8 +10,12 @@ export interface TextTooltipProps extends Omit<HoverPopperProps, "arrow" | "arro
      * Заголовок тултипа
      */
     header?: React.ReactNode;
+    /**
+     * Стиль отображения подсказки
+     */
+    appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
  */
-export declare const TextTooltip: ({ children, text, header, ...popperProps }: TextTooltipProps) => JSX.Element;
+export declare const TextTooltip: ({ children, text, header, appearance, ...popperProps }: TextTooltipProps) => JSX.Element;

package/dist/cssm/components/TextTooltip/TextTooltip.js

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "text", "header"];
+var _excluded = ["children", "text", "header", "appearance"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { HoverPopper } from "../HoverPopper/HoverPopper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { prefixClass } from "../../lib/prefixClass";
+import { classNames } from "../../lib/classNames";
 import "./TextTooltip.css";
 
 /**
@@ -18,19 +17,18 @@ export 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 = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   return createScopedElement(HoverPopper, _extends({
-    vkuiClass: getClassName("TextTooltip", platform),
+    vkuiClass: classNames("TextTooltip", "TextTooltip--".concat(appearance)),
     arrow: true,
     arrowClassName: prefixClass("TextTooltip__arrow"),
     content: createScopedElement(React.Fragment, null, hasReactNode(header) && createScopedElement(Subhead, {
-      Component: "span",
       weight: "2",
       vkuiClass: "TextTooltip__header"
     }, header), hasReactNode(text) && createScopedElement(Subhead, {
-      Component: "span",
       vkuiClass: "TextTooltip__text"
     }, text))
   }, popperProps), children);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["React","HoverPopper","getClassName","usePlatform","hasReactNode","Subhead","prefixClass","TextTooltip","children","text","header","popperProps","platform"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA;;AAcA;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGT,WAAW,EAA5B;AAEA,SACE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAED,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CADzB;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAH7B;AAIE,IAAA,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACM,MAAD,CAAZ,IACC,oBAAC,OAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,MAAM,EAAC,GAFT;AAGE,MAAA,SAAS,EAAC;AAHZ,OAKGA,MALH,CAFJ,EAUGN,YAAY,CAACK,IAAD,CAAZ,IACC,oBAAC,OAAD;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":["React","HoverPopper","hasReactNode","Subhead","prefixClass","classNames","TextTooltip","children","text","header","appearance","popperProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA;;AAkBA;AACA;AACA;AACA,OAAO,IAAMC,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,oBAAC,WAAD;AACE,IAAA,SAAS,EAAEN,UAAU,CAAC,aAAD,yBAAgCK,UAAhC,EADvB;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAH7B;AAIE,IAAA,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACO,MAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,MAAA,MAAM,EAAC,GAAhB;AAAoB,MAAA,SAAS,EAAC;AAA9B,OACGA,MADH,CAFJ,EAMGP,YAAY,CAACM,IAAD,CAAZ,IACC,oBAAC,OAAD;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/cssm/components/Textarea/Textarea.css

@@ -1 +1 @@
-.vkuiTextarea{position:relative}.vkuiTextarea__el{margin:0;width:100%;display:block;box-sizing:border-box;resize:none;-webkit-appearance:none;appearance:none;font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400);font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);color:#000;color:var(--text_primary, var(--vkui--color_text_primary));padding:12px;max-height:204px;border:0;z-index:2;position:relative;background:0 0}.vkuiTextarea__el[cols]{width:initial}.vkuiTextarea--sizeY-compact .vkuiTextarea__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px);max-height:196px}.vkuiTextarea__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder, var(--vkui--color_text_secondary))}.vkuiTextarea__el::placeholder{color:#818c99;color:var(--field_text_placeholder, var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,0.64)}.vkuiTextarea__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled::placeholder{color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary))}
+.vkuiTextarea{position:relative}.vkuiTextarea__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:block;font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);margin:0;max-height:204px;padding:12px;position:relative;resize:none;width:100%;z-index:2}.vkuiTextarea__el[cols]{width:auto}.vkuiTextarea--sizeY-compact .vkuiTextarea__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px);max-height:196px}.vkuiTextarea__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el::-moz-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el::-ms-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el::placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiTextarea__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled::-moz-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled::placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}

package/dist/cssm/components/Tooltip/Tooltip.css

@@ -1 +1 @@
-.vkuiTooltip{position:absolute;left:0;top:0;height:100%;width:100%;z-index:2;white-space:normal}.vkuiTooltip__container{position:absolute}.vkuiTooltip__container[data-popper-placement^=bottom] .vkuiTooltip__corner{top:-8px}.vkuiTooltip__container[data-popper-placement^=top] .vkuiTooltip__corner{bottom:-8px}.vkuiTooltip__container[data-popper-placement^=top] .vkuiTooltip__corner::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.vkuiTooltip__container[data-popper-placement^=left] .vkuiTooltip__corner{right:-14px}.vkuiTooltip__container[data-popper-placement^=left] .vkuiTooltip__corner::before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.vkuiTooltip__container[data-popper-placement^=right] .vkuiTooltip__corner{left:-14px}.vkuiTooltip__container[data-popper-placement^=right] .vkuiTooltip__corner::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.vkuiTooltip__corner{width:20px;height:8px;position:absolute}.vkuiTooltip__corner::before{content:"";display:block;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjNDdhM2ZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);width:20px;height:8px}.vkuiTooltip--light .vkuiTooltip__corner::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==)}.vkuiTooltip__content{background-color:#47a3ff;box-shadow:0 4px 32px 0 rgba(0,0,0,.16),0 0 4px 0 rgba(0,0,0,.04);padding:8px 12px 10px;border-radius:10px;color:#fff;max-width:220px}.vkuiTooltip--light .vkuiTooltip__content{background:#fff;color:#2c2d2e}
+.vkuiTooltip{height:100%;left:0;top:0;white-space:normal;width:100%;z-index:2}.vkuiTooltip,.vkuiTooltip__container{position:absolute}.vkuiTooltip__content{background-color:#fff;background-color:var(--vkui--color_background_modal,#fff);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));color:#000;color:var(--vkui--color_text_primary,#000);max-width:220px;padding:9px 12px 10px}.vkuiTooltip__arrow{color:#fff;color:var(--vkui--color_background_modal,#fff)}.vkuiTooltip--accent .vkuiTooltip__content{background-color:#5a9eff;background-color:var(--vkui--color_background_accent_tint,#5a9eff);color:#fff;color:var(--vkui--color_text_contrast,#fff)}.vkuiTooltip--accent .vkuiTooltip__arrow{color:#5a9eff;color:var(--vkui--color_background_accent_tint,#5a9eff)}.vkuiTooltip--white .vkuiTooltip__content{background-color:#fff;background-color:var(--vkui--color_background_contrast,#fff);color:#000;color:var(--vkui--color_text_primary_invariably,#000)}.vkuiTooltip--white .vkuiTooltip__arrow{color:#fff;color:var(--vkui--color_background_contrast,#fff)}.vkuiTooltip--black .vkuiTooltip__content{background-color:#2d2d2e;background-color:var(--vkui--color_background_contrast_inverse,#2d2d2e);color:#fff;color:var(--vkui--color_text_contrast,#fff)}.vkuiTooltip--black .vkuiTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_contrast_inverse,#2d2d2e)}.vkuiTooltip--inversion .vkuiTooltip__content{background-color:#2d2d2e;background-color:var(--vkui--color_background_modal_inverse,#2d2d2e);color:#fff;color:var(--vkui--color_text_contrast_themed,#fff)}.vkuiTooltip--inversion .vkuiTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_modal_inverse,#2d2d2e)}

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Placement } from "@popperjs/core";
 import { HasRootRef } from "../../types";
 import "./Tooltip.css";
 export interface TooltipProps {
@@ -8,7 +9,15 @@ export interface TooltipProps {
      * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
      */
     children: React.ReactElement<HasRootRef<any>> | React.ReactElement<React.PropsWithRef<any>>;
+    /**
+     * @deprecated будет удалено в 5.0.0, устанавливать стиль следует через appearance
+     * Стиль отображения подсказки
+     */
     mode?: "accent" | "light";
+    /**
+     * Стиль отображения подсказки
+     */
+    appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
     /**
      * Если передан `false`, то рисуется просто `children`.
      */
@@ -39,6 +48,10 @@ export interface TooltipProps {
      * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).
      */
     offsetY?: number;
+    /**
+     * Отображать ли стрелку, указывающую на якорный элемент
+     */
+    arrow?: boolean;
     /**
      * Сдвиг стрелочки относительно центра дочернего элемента.
      */
@@ -51,8 +64,12 @@ export interface TooltipProps {
      * Callback, который вызывается при клике по любому месту в пределах экрана.
      */
     onClose?: () => void;
+    /**
+     * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+     */
+    placement?: Placement;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: _isShown, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, mode, ...restProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, isShown: _isShown, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, mode, appearance, arrow, placement, ...restProps }: TooltipProps) => JSX.Element;

package/dist/cssm/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-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"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -11,12 +11,14 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
+import { PopperArrow } from "../PopperArrow/PopperArrow";
 import { usePopper } from "react-popper";
 import { tooltipContainerAttr } from "./TooltipContainer";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useDOM } from "../../lib/dom";
 import { warnOnce } from "../../lib/warnOnce";
 import { hasReactNode } from "../../lib/utils";
+import { prefixClass } from "../../lib/prefixClass";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import "./Tooltip.css";
 
@@ -28,29 +30,28 @@ var baseClassName = getClassName("Tooltip");
 var warn = 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 createScopedElement("div", {
-    vkuiClass: classNames(baseClassName, "Tooltip--".concat(mode))
+    vkuiClass: classNames(baseClassName, "Tooltip--".concat(appearance))
   }, createScopedElement("div", _extends({
     vkuiClass: "Tooltip__container",
     ref: ref,
     style: style.container
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), createScopedElement("div", _extends({
-    vkuiClass: "Tooltip__corner",
-    style: style.arrow
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.arrow, {
-    ref: arrowRef
-  })), createScopedElement("div", {
+  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), arrow && createScopedElement(PopperArrow, {
+    style: style.arrow,
+    attributes: attributes === null || attributes === void 0 ? void 0 : attributes.arrow,
+    arrowClassName: prefixClass("Tooltip__arrow")
+  }), createScopedElement("div", {
     vkuiClass: "Tooltip__content"
   }, header && createScopedElement(Subhead, {
-    weight: "1",
+    weight: "2",
     vkuiClass: "Tooltip__title"
   }, header), text && createScopedElement(Subhead, {
     vkuiClass: "Tooltip__text"
@@ -79,6 +80,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
  */
@@ -102,6 +116,10 @@ export 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 = _objectWithoutProperties(_ref2, _excluded);
 
   var _useNavTransition = useNavTransition(),
@@ -114,15 +132,10 @@ export 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 = _slicedToArray(_React$useState3, 2),
-      tooltipArrowRef = _React$useState4[0],
-      setTooltipArrowRef = _React$useState4[1];
-
-  var _React$useState5 = React.useState(),
-      _React$useState6 = _slicedToArray(_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
@@ -149,63 +162,70 @@ export 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 (isVerticalPlacement(state.placement)) {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.x = cornerAbsoluteOffset;
-          } else {
-            var _state$modifiersData$;
+          if (!state.modifiersData.arrow) {
+            return;
+          }
+
+          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 (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 (((_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 = 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;
@@ -220,14 +240,15 @@ export var Tooltip = function Tooltip(_ref2) {
   var childRef = /*#__PURE__*/React.isValidElement(children) && (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);
   var patchedRef = useExternRef(setTarget, childRef);
   var child = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _defineProperty({}, isDOMTypeElement(children) ? "ref" : "getRootRef", patchedRef)) : children;
+
+  var _appearance = calculateAppearance(mode, appearance);
+
   return createScopedElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ReactDOM.createPortal(createScopedElement(SimpleTooltip, _extends({}, 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/cssm/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","useGlobalEventListener","isDOMTypeElement","element","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","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","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":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","PopperArrow","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","prefixClass","useGlobalEventListener","isDOMTypeElement","element","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","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","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/cssm/components/Typography/Caption/Caption.css

@@ -1 +1 @@
-.vkuiCaption{display:block;margin:0}.vkuiCaption--caps{text-transform:uppercase}.vkuiCaption--l-1{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400)}.vkuiCaption--l-1.vkuiCaption--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400)}.vkuiCaption--l-2{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular,12px);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular,14px);font-weight:400;font-weight:var(--vkui--font_caption1--font_weight--regular,400)}.vkuiCaption--l-2.vkuiCaption--caps{font-size:12px;font-size:var(--vkui--font_caption1_caps--font_size--regular,12px);line-height:14px;line-height:var(--vkui--font_caption1_caps--line_height--regular,14px);font-weight:600;font-weight:var(--vkui--font_caption1_caps--font_weight--regular,600)}.vkuiCaption--l-3{font-size:11px;font-size:var(--vkui--font_caption2--font_size--regular,11px);line-height:14px;line-height:var(--vkui--font_caption2--line_height--regular,14px);font-weight:400;font-weight:var(--vkui--font_caption2--font_weight--regular,400)}.vkuiCaption--l-3.vkuiCaption--caps{font-size:11px;font-size:var(--vkui--font_caption2_caps--font_size--regular,11px);line-height:14px;line-height:var(--vkui--font_caption2_caps--line_height--regular,14px);font-weight:600;font-weight:var(--vkui--font_caption2_caps--font_weight--regular,600)}.vkuiCaption--l-4{font-size:9px;font-size:var(--vkui--font_caption3--font_size--regular,9px);line-height:12px;line-height:var(--vkui--font_caption3--line_height--regular,12px);font-weight:400;font-weight:var(--vkui--font_caption3--font_weight--regular,400)}.vkuiCaption--l-4.vkuiCaption--caps{font-size:9px;font-size:var(--vkui--font_caption3_caps--font_size--regular,9px);line-height:12px;line-height:var(--vkui--font_caption3_caps--line_height--regular,12px);font-weight:600;font-weight:var(--vkui--font_caption3_caps--font_weight--regular,600)}.vkuiCaption.vkuiCaption--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiCaption.vkuiCaption--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiCaption.vkuiCaption--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}.vkuiCaption--w-regular{font-weight:400}.vkuiCaption--w-medium{font-weight:500}.vkuiCaption--w-semibold{font-weight:600}.vkuiCaption--w-bold{font-weight:700}
+.vkuiCaption{display:block;margin:0}.vkuiCaption--caps{text-transform:uppercase}.vkuiCaption--l-1{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px)}.vkuiCaption--l-1.vkuiCaption--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px)}.vkuiCaption--l-2{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular,12px);font-weight:400;font-weight:var(--vkui--font_caption1--font_weight--regular,400);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular,14px)}.vkuiCaption--l-2.vkuiCaption--caps{font-size:12px;font-size:var(--vkui--font_caption1_caps--font_size--regular,12px);font-weight:600;font-weight:var(--vkui--font_caption1_caps--font_weight--regular,600);line-height:14px;line-height:var(--vkui--font_caption1_caps--line_height--regular,14px)}.vkuiCaption--l-3{font-size:11px;font-size:var(--vkui--font_caption2--font_size--regular,11px);font-weight:400;font-weight:var(--vkui--font_caption2--font_weight--regular,400);line-height:14px;line-height:var(--vkui--font_caption2--line_height--regular,14px)}.vkuiCaption--l-3.vkuiCaption--caps{font-size:11px;font-size:var(--vkui--font_caption2_caps--font_size--regular,11px);font-weight:600;font-weight:var(--vkui--font_caption2_caps--font_weight--regular,600);line-height:14px;line-height:var(--vkui--font_caption2_caps--line_height--regular,14px)}.vkuiCaption--l-4{font-size:9px;font-size:var(--vkui--font_caption3--font_size--regular,9px);font-weight:400;font-weight:var(--vkui--font_caption3--font_weight--regular,400);line-height:12px;line-height:var(--vkui--font_caption3--line_height--regular,12px)}.vkuiCaption--l-4.vkuiCaption--caps{font-size:9px;font-size:var(--vkui--font_caption3_caps--font_size--regular,9px);font-weight:600;font-weight:var(--vkui--font_caption3_caps--font_weight--regular,600);line-height:12px;line-height:var(--vkui--font_caption3_caps--line_height--regular,12px)}.vkuiCaption.vkuiCaption--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiCaption.vkuiCaption--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiCaption.vkuiCaption--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}.vkuiCaption--w-regular{font-weight:400}.vkuiCaption--w-medium{font-weight:500}.vkuiCaption--w-semibold{font-weight:600}.vkuiCaption--w-bold{font-weight:700}

package/dist/cssm/components/Typography/Footnote/Footnote.css

@@ -1 +1 @@
-.vkuiFootnote{display:block;margin:0;font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400)}.vkuiFootnote--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400);text-transform:uppercase}.vkuiFootnote--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiFootnote--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiFootnote--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiFootnote{display:block;font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px);margin:0}.vkuiFootnote--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px);text-transform:uppercase}.vkuiFootnote--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiFootnote--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiFootnote--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/Typography/Headline/Headline.css

@@ -1 +1 @@
-.vkuiHeadline{display:block;margin:0}.vkuiHeadline--l-1{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular,16px);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular,20px);font-weight:500;font-weight:var(--vkui--font_headline1--font_weight--regular,500)}.vkuiHeadline--l-2{font-size:15px;font-size:var(--vkui--font_headline2--font_size--regular,15px);line-height:20px;line-height:var(--vkui--font_headline2--line_height--regular,20px);font-weight:500;font-weight:var(--vkui--font_headline2--font_weight--regular,500)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-1{font-size:15px;font-size:var(--vkui--font_headline1--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_headline1--line_height--compact,20px)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-2{font-size:14px;font-size:var(--vkui--font_headline2--font_size--compact,14px);line-height:20px;line-height:var(--vkui--font_headline2--line_height--compact,20px)}.vkuiHeadline--w-regular{font-weight:400}.vkuiHeadline--w-medium{font-weight:500}.vkuiHeadline--w-semibold{font-weight:600}.vkuiHeadline--android.vkuiHeadline--w-semibold{font-weight:500}.vkuiHeadline--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiHeadline--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiHeadline--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiHeadline{display:block;margin:0}.vkuiHeadline--l-1{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular,16px);font-weight:500;font-weight:var(--vkui--font_headline1--font_weight--regular,500);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular,20px)}.vkuiHeadline--l-2{font-size:15px;font-size:var(--vkui--font_headline2--font_size--regular,15px);font-weight:500;font-weight:var(--vkui--font_headline2--font_weight--regular,500);line-height:20px;line-height:var(--vkui--font_headline2--line_height--regular,20px)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-1{font-size:15px;font-size:var(--vkui--font_headline1--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_headline1--line_height--compact,20px)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-2{font-size:14px;font-size:var(--vkui--font_headline2--font_size--compact,14px);line-height:20px;line-height:var(--vkui--font_headline2--line_height--compact,20px)}.vkuiHeadline--w-regular{font-weight:400}.vkuiHeadline--w-medium{font-weight:500}.vkuiHeadline--w-semibold{font-weight:600}.vkuiHeadline--android.vkuiHeadline--w-semibold{font-weight:500}.vkuiHeadline--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiHeadline--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiHeadline--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/Typography/Headline/Headline.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { HasComponent } from "../../../types";
+import { HasComponent, HasRootRef } from "../../../types";
 import "./Headline.css";
-export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
+export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
     /**
      * Задаёт начертание шрифта отличное от стандартного.
      *
@@ -13,4 +13,4 @@ export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
-export declare const Headline: ({ children, weight, level, Component, ...restProps }: HeadlineProps) => JSX.Element;
+export declare const Headline: ({ children, weight, level, Component, getRootRef, ...restProps }: HeadlineProps) => JSX.Element;

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

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "weight", "level", "Component"];
+var _excluded = ["children", "weight", "level", "Component", "getRootRef"];
 import { createScopedElement } from "../../../lib/jsxRuntime";
 import { usePlatform } from "../../../hooks/usePlatform";
 import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { classNames } from "../../../lib/classNames";
+import { warnOnce } from "../../../lib/warnOnce";
 import { getClassName } from "../../../helpers/getClassName";
 import "./Headline.css";
-
+var warn = warnOnce("Headline");
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
+
 export var Headline = function Headline(_ref) {
   var children = _ref.children,
       _ref$weight = _ref.weight,
@@ -19,6 +21,7 @@ export 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 = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
@@ -26,7 +29,12 @@ export var Headline = function Headline(_ref) {
   var _useAdaptivity = useAdaptivity(),
       sizeY = _useAdaptivity.sizeY;
 
+  if (process.env.NODE_ENV === "development" && typeof Component !== "string" && getRootRef) {
+    warn("getRootRef может использоваться только с элементами DOM", "error");
+  }
+
   return createScopedElement(Component, _extends({}, restProps, {
+    ref: getRootRef,
     vkuiClass: classNames(getClassName("Headline", platform), // TODO: v5 remove
     "Headline--sizeY-".concat(sizeY), // TODO: новая адаптивность
     "Headline--l-".concat(level), "Headline--w-".concat(weight))