@vkontakte/vkui 4.34.2 → 4.35.0

package/src/components/Tooltip/Readme.md

@@ -31,109 +31,100 @@ import { Tooltip, Button } from "@vkontakte/vkui";
 О возможностях тултипа можно прочитать в описании свойств и методов.
 
 ```jsx
-class Example extends React.Component {
-  constructor() {
-    this.state = {
-      tooltip: true,
-      tooltip2: true,
-      tooltip3: false,
-      activePanel: "tooltip",
-    };
-  }
-
-  render() {
-    return (
-      <View activePanel={this.state.activePanel}>
-        <Panel id="tooltip">
-          <PanelHeader>Tooltip</PanelHeader>
-          <Group>
-            <List>
-              <SimpleCell>Музыка</SimpleCell>
-              <SimpleCell>Видео</SimpleCell>
-              <SimpleCell>Игры</SimpleCell>
-              <SimpleCell>Закладки</SimpleCell>
-              <SimpleCell>Документы</SimpleCell>
-              <SimpleCell>Денежные переводы</SimpleCell>
-            </List>
-          </Group>
-          <Group>
+const Example = () => {
+  const [tooltip, setTooltip] = React.useState(true);
+  const [tooltip2, setTooltip2] = React.useState(true);
+  const [tooltip3, setTooltip3] = React.useState(false);
+  const [activePanel, setActivePanel] = React.useState("tooltip");
+
+  return (
+    <View activePanel={activePanel}>
+      <Panel id="tooltip">
+        <PanelHeader>Tooltip</PanelHeader>
+        <Group>
+          <List>
+            <SimpleCell>Музыка</SimpleCell>
+            <SimpleCell>Видео</SimpleCell>
+            <SimpleCell>Игры</SimpleCell>
+            <SimpleCell>Закладки</SimpleCell>
+            <SimpleCell>Документы</SimpleCell>
+            <SimpleCell>Денежные переводы</SimpleCell>
+          </List>
+        </Group>
+        <Group>
+          <Tooltip
+            mode="light"
+            text="У нас тут brand new функционал подвезли. Зацените!"
+            isShown={tooltip}
+            onClose={() => setTooltip(false)}
+            offsetX={10}
+          >
+            <SimpleCell onClick={() => setActivePanel("tooltip2")}>
+              VK Pay
+            </SimpleCell>
+          </Tooltip>
+        </Group>
+      </Panel>
+
+      <Panel id="tooltip2">
+        <PanelHeader
+          before={
             <Tooltip
-              mode="light"
-              text="У нас тут brand new функционал подвезли. Зацените!"
-              isShown={this.state.tooltip}
-              onClose={() => this.setState({ tooltip: false })}
-              offsetX={10}
+              isShown={tooltip2}
+              onClose={() => {
+                setTooltip2(false);
+                setTooltip3(true);
+              }}
+              text="Нажмите на кнопку, если хотите вернуться"
+              header="Назад"
             >
-              <SimpleCell
-                onClick={() => this.setState({ activePanel: "tooltip2" })}
-              >
-                VK Pay
-              </SimpleCell>
+              <PanelHeaderBack onClick={() => setActivePanel("tooltip")} />
             </Tooltip>
-          </Group>
-        </Panel>
-
-        <Panel id="tooltip2">
-          <PanelHeader
-            before={
-              <Tooltip
-                isShown={this.state.tooltip2}
-                onClose={() =>
-                  this.setState({ tooltip2: false, tooltip3: true })
-                }
-                text="Нажмите на кнопку, если хотите вернуться"
-                header="Назад"
-              >
-                <PanelHeaderBack
-                  onClick={() => this.setState({ activePanel: "tooltip" })}
-                />
-              </Tooltip>
-            }
-          >
-            Tooltip
-          </PanelHeader>
-          <Group>
-            <List>
-              <SimpleCell
-                before={
-                  <Tooltip
-                    text="Теперь у нас появились аватарки в списках. Правда круто?"
-                    isShown={this.state.tooltip3}
-                    onClose={() => this.setState({ tooltip3: false })}
-                    cornerOffset={-6}
-                  >
-                    <Avatar />
-                  </Tooltip>
-                }
-                description="Веб-сайт"
-              >
-                Команда ВКонтакте
-              </SimpleCell>
-              <SimpleCell before={<Avatar />} description="Музыкант">
-                Robbie Williams
-              </SimpleCell>
-              <SimpleCell before={<Avatar />} description="Издательский дом">
-                ПостНаука
-              </SimpleCell>
-              <SimpleCell before={<Avatar />} description="Издательский дом">
-                ПостНаука
-              </SimpleCell>
-              <SimpleCell before={<Avatar />} description="Издательский дом">
-                ПостНаука
-              </SimpleCell>
-              <SimpleCell before={<Avatar />} description="Издательский дом">
-                ПостНаука
-              </SimpleCell>
-              <SimpleCell before={<Avatar />} description="Издательский дом">
-                ПостНаука
-              </SimpleCell>
-            </List>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
+          }
+        >
+          Tooltip
+        </PanelHeader>
+        <Group>
+          <List>
+            <SimpleCell
+              before={
+                <Tooltip
+                  text="Теперь у нас появились аватарки в списках. Правда круто?"
+                  isShown={tooltip3}
+                  onClose={() => setTooltip3(false)}
+                  cornerOffset={-6}
+                >
+                  <Avatar />
+                </Tooltip>
+              }
+              description="Веб-сайт"
+            >
+              Команда ВКонтакте
+            </SimpleCell>
+            <SimpleCell before={<Avatar />} description="Музыкант">
+              Robbie Williams
+            </SimpleCell>
+            <SimpleCell before={<Avatar />} description="Издательский дом">
+              ПостНаука
+            </SimpleCell>
+            <SimpleCell before={<Avatar />} description="Издательский дом">
+              ПостНаука
+            </SimpleCell>
+            <SimpleCell before={<Avatar />} description="Издательский дом">
+              ПостНаука
+            </SimpleCell>
+            <SimpleCell before={<Avatar />} description="Издательский дом">
+              ПостНаука
+            </SimpleCell>
+            <SimpleCell before={<Avatar />} description="Издательский дом">
+              ПостНаука
+            </SimpleCell>
+          </List>
+        </Group>
+      </Panel>
+    </View>
+  );
+};
 
 const ExampleWithPlatform = withPlatform(Example);
 
@@ -147,7 +138,7 @@ const ExampleWithPlatform = withPlatform(Example);
 - в скроллящемся контейнере — замените какой-нибудь элемент, внутри которого нет скролла, на `<TooltipContainer>` и добавьте ему `position: relative` (или другую не-static).
 - внутри `position: fixed` — `<TooltipContainer fixed>`
 
-```jsx { "props": { "layout": false, "frame": true } }
+```jsx { "props": { "layout": false } }
 <>
   <TooltipContainer style={{ minHeight: "120vh" }}>
     <Tooltip text="Я скроллюсь">
@@ -249,3 +240,39 @@ const ExampleWithPlatform = withPlatform(Example);
   </TooltipContainer>
 </>
 ```
+
+## Цветовые варианты
+
+```jsx { "props": { "layout": false } }
+<TooltipContainer>
+  <Tooltip placement="right" text={`appearance="accent"`} appearance="accent">
+    <div style={{ width: 50, margin: 10 }}>
+      <Avatar />
+    </div>
+  </Tooltip>
+  <Tooltip placement="right" text={`appearance="neutral"`} appearance="neutral">
+    <div style={{ width: 50, margin: 10 }}>
+      <Avatar />
+    </div>
+  </Tooltip>
+  <Tooltip placement="right" text={`appearance="white`} appearance="white">
+    <div style={{ width: 50, margin: 10 }}>
+      <Avatar />
+    </div>
+  </Tooltip>
+  <Tooltip placement="right" text={`appearance="black"`} appearance="black">
+    <div style={{ width: 50, margin: 10 }}>
+      <Avatar />
+    </div>
+  </Tooltip>
+  <Tooltip
+    placement="right"
+    text={`appearance="inversion"`}
+    appearance="inversion"
+  >
+    <div style={{ width: 50, margin: 10 }}>
+      <Avatar />
+    </div>
+  </Tooltip>
+</TooltipContainer>
+```

package/src/components/Tooltip/Tooltip.css

@@ -12,62 +12,51 @@
   position: absolute;
 }
 
-.Tooltip__container[data-popper-placement^="bottom"] .Tooltip__corner {
-  top: -8px;
-}
-
-.Tooltip__container[data-popper-placement^="top"] .Tooltip__corner {
-  bottom: -8px;
-}
-
-.Tooltip__container[data-popper-placement^="top"] .Tooltip__corner::before {
-  transform: rotate(180deg);
+.Tooltip__content {
+  background-color: var(--vkui--color_background_modal);
+  box-shadow: var(--vkui--elevation3);
+  padding: 9px 12px 10px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  color: var(--vkui--color_text_primary);
+  max-width: 220px;
 }
 
-.Tooltip__container[data-popper-placement^="left"] .Tooltip__corner {
-  right: -14px;
+.Tooltip__arrow {
+  color: var(--vkui--color_background_modal);
 }
 
-.Tooltip__container[data-popper-placement^="left"] .Tooltip__corner::before {
-  transform: rotate(90deg);
+.Tooltip--accent .Tooltip__content {
+  background-color: var(--vkui--color_background_accent_tint);
+  color: var(--vkui--color_text_contrast);
 }
 
-.Tooltip__container[data-popper-placement^="right"] .Tooltip__corner {
-  left: -14px;
+.Tooltip--accent .Tooltip__arrow {
+  color: var(--vkui--color_background_accent_tint);
 }
 
-.Tooltip__container[data-popper-placement^="right"] .Tooltip__corner::before {
-  transform: rotate(-90deg);
+.Tooltip--white .Tooltip__content {
+  background-color: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_primary_invariably);
 }
 
-.Tooltip__corner {
-  width: 20px;
-  height: 8px;
-  position: absolute;
+.Tooltip--white .Tooltip__arrow {
+  color: var(--vkui--color_background_contrast);
 }
 
-.Tooltip__corner::before {
-  content: "";
-  display: block;
-  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjNDdhM2ZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==");
-  width: 20px;
-  height: 8px;
+.Tooltip--black .Tooltip__content {
+  background-color: var(--vkui--color_background_contrast_inverse);
+  color: var(--vkui--color_text_contrast);
 }
 
-.Tooltip--light .Tooltip__corner::before {
-  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==");
+.Tooltip--black .Tooltip__arrow {
+  color: var(--vkui--color_background_contrast_inverse);
 }
 
-.Tooltip__content {
-  background-color: #47a3ff;
-  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.04);
-  padding: 8px 12px 10px;
-  border-radius: 10px;
-  color: #fff;
-  max-width: 220px;
+.Tooltip--inversion .Tooltip__content {
+  background-color: var(--vkui--color_background_modal_inverse);
+  color: var(--vkui--color_text_contrast_themed);
 }
 
-.Tooltip--light .Tooltip__content {
-  background: #fff;
-  color: #2c2d2e;
+.Tooltip--inversion .Tooltip__arrow {
+  color: var(--vkui--color_background_modal_inverse);
 }

package/src/components/Tooltip/Tooltip.tsx

@@ -4,6 +4,7 @@ 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 { Modifier, usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
 import { tooltipContainerAttr } from "./TooltipContainer";
@@ -11,13 +12,13 @@ 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 { HasRootRef } from "../../types";
 import "./Tooltip.css";
 
 interface SimpleTooltipProps extends Partial<TooltipProps> {
   target?: HTMLDivElement;
-  arrowRef?: React.Ref<HTMLDivElement>;
   style?: {
     arrow: React.CSSProperties;
     container: React.CSSProperties;
@@ -40,26 +41,27 @@ const IS_DEV = process.env.NODE_ENV === "development";
 
 const SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(
   function SimpleTooltip(
-    { mode = "accent", header, text, arrowRef, style = {}, attributes },
+    { appearance = "accent", header, text, arrow, style = {}, attributes },
     ref
   ) {
     return (
-      <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>
+      <div vkuiClass={classNames(baseClassName, `Tooltip--${appearance}`)}>
         <div
           vkuiClass="Tooltip__container"
           ref={ref}
           style={style.container}
           {...attributes?.container}
         >
-          <div
-            vkuiClass="Tooltip__corner"
-            style={style.arrow}
-            {...attributes?.arrow}
-            ref={arrowRef}
-          />
+          {arrow && (
+            <PopperArrow
+              style={style.arrow}
+              attributes={attributes?.arrow}
+              arrowClassName={prefixClass("Tooltip__arrow")}
+            />
+          )}
           <div vkuiClass="Tooltip__content">
             {header && (
-              <Subhead weight="1" vkuiClass="Tooltip__title">
+              <Subhead weight="2" vkuiClass="Tooltip__title">
                 {header}
               </Subhead>
             )}
@@ -80,7 +82,15 @@ export interface TooltipProps {
   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`.
    */
@@ -111,6 +121,10 @@ export interface TooltipProps {
    * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).
    */
   offsetY?: number;
+  /**
+   * Отображать ли стрелку, указывающую на якорный элемент
+   */
+  arrow?: boolean;
   /**
    * Сдвиг стрелочки относительно центра дочернего элемента.
    */
@@ -123,16 +137,12 @@ export interface TooltipProps {
    * Callback, который вызывается при клике по любому месту в пределах экрана.
    */
   onClose?: () => void;
+  /**
+   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+   */
+  placement?: Placement;
 }
 
-declare type ArrowOffsetModifierOptions = {
-  offset: number;
-};
-declare type ArrowOffsetModifier = Modifier<
-  "arrowOffset",
-  ArrowOffsetModifierOptions
->;
-
 function mapAlignX(x: TooltipProps["alignX"]) {
   switch (x) {
     case "left":
@@ -155,6 +165,21 @@ function isVerticalPlacement(placement: Placement) {
   return placement.startsWith("top") || placement.startsWith("bottom");
 }
 
+/**
+ * Вычисляем стиль подсказки: параметр appearance имеет приоритет, иначе мапим mode на подходящее значение из appearance
+ * TODO: v5 избавиться от пропа mode и этого метода, для appearance по умолчанию сделать "accent"
+ */
+function calculateAppearance(
+  mode: TooltipProps["mode"],
+  appearance: TooltipProps["appearance"]
+): TooltipProps["appearance"] {
+  if (appearance) {
+    return appearance;
+  }
+
+  return mode === "light" ? "white" : "accent";
+}
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
@@ -169,13 +194,14 @@ export const Tooltip = ({
   cornerOffset = 0,
   cornerAbsoluteOffset,
   mode = "accent",
+  appearance,
+  arrow = true,
+  placement,
   ...restProps
 }: TooltipProps) => {
   const { entering } = useNavTransition();
   const isShown = _isShown && !entering;
   const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);
-  const [tooltipArrowRef, setTooltipArrowRef] =
-    React.useState<HTMLElement | null>(null);
   const [target, setTarget] = React.useState<HTMLElement>();
 
   if (IS_DEV) {
@@ -215,62 +241,66 @@ export const Tooltip = ({
     );
   }
 
-  const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {
-    return {
-      name: "arrowOffset",
-      enabled: true,
-      phase: "main",
-      fn({ state }) {
-        if (!state.modifiersData.arrow) {
-          return;
-        }
-        if (isVerticalPlacement(state.placement)) {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.x = cornerAbsoluteOffset;
-          } else {
-            if (state.modifiersData.arrow?.x !== undefined) {
-              state.modifiersData.arrow.x += cornerOffset;
-            }
-          }
-        } else {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.y = cornerAbsoluteOffset;
-          } else {
-            if (state.modifiersData.arrow?.y !== undefined) {
-              state.modifiersData.arrow.y += cornerOffset;
-            }
-          }
-        }
-      },
-    };
-  }, [cornerOffset, cornerAbsoluteOffset]);
-
-  const placement = getPlacement(alignX, alignY);
-  const { styles, attributes } = usePopper(target, tooltipRef, {
-    strategy,
-    placement,
-    modifiers: [
+  const modifiers = React.useMemo(() => {
+    const modifiers: Array<Modifier<string>> = [
       {
         name: "offset",
         options: {
           offset: [offsetX, offsetY],
         },
       },
-      {
-        name: "arrow",
-        options: {
-          element: tooltipArrowRef,
-          padding: 14,
-        },
-      },
       {
         name: "preventOverflow",
       },
       {
         name: "flip",
       },
-      arrowOffsetModifier,
-    ],
+    ];
+
+    if (arrow) {
+      modifiers.push({
+        name: "arrow",
+        options: {
+          padding: 14,
+        },
+      });
+      modifiers.push({
+        name: "arrowOffset",
+        enabled: true,
+        phase: "main",
+        fn({ state }) {
+          if (!state.modifiersData.arrow) {
+            return;
+          }
+          if (isVerticalPlacement(state.placement)) {
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.x = cornerAbsoluteOffset;
+            } else {
+              if (state.modifiersData.arrow?.x !== undefined) {
+                state.modifiersData.arrow.x += cornerOffset;
+              }
+            }
+          } else {
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.y = cornerAbsoluteOffset;
+            } else {
+              if (state.modifiersData.arrow?.y !== undefined) {
+                state.modifiersData.arrow.y += cornerOffset;
+              }
+            }
+          }
+        },
+      });
+    }
+
+    return modifiers;
+  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY]);
+
+  const _placement = placement ?? getPlacement(alignX, alignY);
+  const { styles, attributes } = usePopper(target, tooltipRef, {
+    strategy,
+    placement: _placement,
+    modifiers,
   });
 
   const { document } = useDOM();
@@ -289,6 +319,8 @@ export const Tooltip = ({
       })
     : children;
 
+  const _appearance = calculateAppearance(mode, appearance);
+
   return (
     <React.Fragment>
       {child}
@@ -297,9 +329,9 @@ export const Tooltip = ({
         ReactDOM.createPortal(
           <SimpleTooltip
             {...restProps}
-            mode={mode}
+            appearance={_appearance}
+            arrow={arrow}
             ref={(el) => setTooltipRef(el)}
-            arrowRef={(el) => setTooltipArrowRef(el)}
             style={{ arrow: styles.arrow, container: styles.popper }}
             attributes={{
               arrow: attributes.arrow ?? null,

package/src/components/Typography/Headline/Headline.tsx

@@ -1,13 +1,15 @@
 import * as React from "react";
-import { HasComponent } from "../../../types";
+import { HasComponent, HasRootRef } from "../../../types";
 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";
 
 export interface HeadlineProps
   extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
     HasComponent {
   /**
    * Задаёт начертание шрифта отличное от стандартного.
@@ -18,6 +20,8 @@ export interface HeadlineProps
   level?: "1" | "2";
 }
 
+const warn = warnOnce("Headline");
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
@@ -26,14 +30,24 @@ export const Headline = ({
   weight = "3",
   level = "1",
   Component = "h3", // TODO: v5 h4
+  getRootRef,
   ...restProps
 }: HeadlineProps) => {
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
 
+  if (
+    process.env.NODE_ENV === "development" &&
+    typeof Component !== "string" &&
+    getRootRef
+  ) {
+    warn("getRootRef может использоваться только с элементами DOM", "error");
+  }
+
   return (
     <Component
       {...restProps}
+      ref={getRootRef}
       vkuiClass={classNames(
         getClassName("Headline", platform), // TODO: v5 remove
         `Headline--sizeY-${sizeY}`, // TODO: новая адаптивность