@vkontakte/vkui 4.23.0 → 4.25.2

package/src/components/TabsItem/TabsItem.css

@@ -28,7 +28,7 @@
 }
 
 .Tabs--default .TabsItem::after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: 16px;
@@ -144,8 +144,10 @@
   background: var(--separator_common);
 }
 
-.PanelHeader--ios .Tabs--segmented.TabsItem:not(.TabsItem--selected).TabsItem--active .TabsItem__in {
-  opacity: .7;
+.PanelHeader--ios
+  .Tabs--segmented.TabsItem:not(.TabsItem--selected).TabsItem--active
+  .TabsItem__in {
+  opacity: 0.7;
 }
 
 .PanelHeader--ios .Tabs--segmented .TabsItem {

package/src/components/TabsItem/TabsItem.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable from '../Tappable/Tappable';
-import { classNames } from '../../lib/classNames';
-import { VKCOM } from '../../lib/platform';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import { TabsProps, TabsModeContext } from '../Tabs/Tabs';
-import Headline from '../Typography/Headline/Headline';
-import Subhead from '../Typography/Subhead/Subhead';
-import Text from '../Typography/Text/Text';
-import './TabsItem.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable from "../Tappable/Tappable";
+import { classNames } from "../../lib/classNames";
+import { VKCOM } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import { TabsProps, TabsModeContext } from "../Tabs/Tabs";
+import Headline from "../Typography/Headline/Headline";
+import Subhead from "../Typography/Subhead/Subhead";
+import Text from "../Typography/Text/Text";
+import "./TabsItem.css";
 
 export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
   after?: React.ReactNode;
@@ -23,11 +23,10 @@ const TabsItem: React.FC<TabsItemProps> = ({
   ...restProps
 }: TabsItemProps) => {
   const platform = usePlatform();
-  const mode: TabsProps['mode'] = React.useContext(TabsModeContext);
+  const mode: TabsProps["mode"] = React.useContext(TabsModeContext);
 
-  let TypographyComponent = mode === 'buttons' || mode === 'segmented'
-    ? Subhead
-    : Headline;
+  let TypographyComponent =
+    mode === "buttons" || mode === "segmented" ? Subhead : Headline;
 
   if (platform === VKCOM) {
     TypographyComponent = Text;
@@ -36,12 +35,20 @@ const TabsItem: React.FC<TabsItemProps> = ({
   return (
     <Tappable
       {...restProps}
-      vkuiClass={classNames(getClassName('TabsItem', platform), { 'TabsItem--selected': selected })}
-      hasActive={mode === 'segmented'}
+      vkuiClass={classNames(getClassName("TabsItem", platform), {
+        "TabsItem--selected": selected,
+      })}
+      hasActive={mode === "segmented"}
       activeMode="TabsItem--active"
-      focusVisibleMode={mode === 'segmented' ? 'outside' : 'inside'}
+      focusVisibleMode={mode === "segmented" ? "outside" : "inside"}
     >
-      <TypographyComponent Component="span" vkuiClass="TabsItem__in" weight="medium">{children}</TypographyComponent>
+      <TypographyComponent
+        Component="span"
+        vkuiClass="TabsItem__in"
+        weight="medium"
+      >
+        {children}
+      </TypographyComponent>
       {hasReactNode(after) && <div vkuiClass="TabsItem__after">{after}</div>}
     </Tappable>
   );
@@ -51,4 +58,5 @@ TabsItem.defaultProps = {
   selected: false,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default TabsItem;

package/src/components/Tappable/Tappable.css

@@ -1,12 +1,14 @@
 .Tappable {
   position: relative;
+  cursor: pointer;
 }
 
-.Tappable:not([disabled]):not([aria-disabled="true"]) {
-  cursor: pointer;
+.Tappable[disabled],
+.Tappable[aria-disabled="true"] {
+  cursor: default;
 }
 
-.AppRoot--keyboard-input .Tappable:focus-visible {
+.Tappable--focus-visible {
   outline: none;
 }
 
@@ -19,7 +21,7 @@
 }
 
 .Tappable--active-opacity.Tappable--active-opacity.Tappable--active-opacity {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 /**
@@ -41,18 +43,18 @@
 }
 
 .Tappable--hover-opacity {
-  opacity: .8;
+  opacity: 0.8;
 }
 
 /**
  * mouse
  */
 .Tappable--mouse {
-  transition: opacity .15s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
 .Tappable--mouse .Tappable__hoverShadow {
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
 }
 
 /**
@@ -61,7 +63,7 @@
 .Tappable--ios {
   position: relative;
   border-radius: 10px;
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
 }
 
 .Tappable--ios.Tappable--active-background {
@@ -73,7 +75,7 @@
  */
 .Tappable--android {
   position: relative;
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
   border-radius: 8px;
 }
 
@@ -98,17 +100,17 @@
   height: 24px;
   margin: -12px 0 0 -12px;
   opacity: 0;
-  content: '';
+  content: "";
   border-radius: 50%;
-  background: rgba(127, 127, 127, .1);
-  animation: vkui-animation-wave .3s var(--android-easing);
+  background: rgba(127, 127, 127, 0.1);
+  animation: vkui-animation-wave 0.3s var(--android-easing);
 }
 
 /**
  * VKCOM tappable
  */
 .Tappable--vkcom {
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
   border-radius: 8px;
 }
 

package/src/components/Tappable/Tappable.tsx

@@ -1,24 +1,41 @@
-import * as React from 'react';
-import mitt from 'mitt';
-import { noop } from '@vkontakte/vkjs';
-import { Touch, TouchEvent, TouchProps } from '../Touch/Touch';
-import TouchRootContext from '../Touch/TouchContext';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { ANDROID } from '../../lib/platform';
-import { getOffsetRect } from '../../lib/offset';
-import { coordX, coordY } from '../../lib/touch';
-import { HasComponent, HasRootRef } from '../../types';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import './Tappable.css';
-
-export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent {
+import * as React from "react";
+import mitt from "mitt";
+import { noop } from "@vkontakte/vkjs";
+import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
+import TouchRootContext from "../Touch/TouchContext";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { ANDROID } from "../../lib/platform";
+import { getOffsetRect } from "../../lib/offset";
+import { coordX, coordY } from "../../lib/touch";
+import { HasComponent, HasRootRef } from "../../types";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { shouldTriggerClickOnEnterOrSpace } from "../../lib/accessibility";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { FocusVisible, FocusVisibleMode } from "../FocusVisible/FocusVisible";
+import { useTimeout } from "../../hooks/useTimeout";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useFocusVisible } from "../../hooks/useFocusVisible";
+import { callMultiple } from "../../lib/callMultiple";
+import "./Tappable.css";
+
+export interface TappableProps
+  extends Omit<
+      React.AllHTMLAttributes<HTMLElement>,
+      | "onTouchStart"
+      | "onTouchMove"
+      | "onTouchEnd"
+      | "onTouchCancel"
+      | "onMouseDown"
+      | "onMouseMove"
+      | "onMouseUp"
+      | "onMouseLeave"
+    >,
+    HasRootRef<HTMLElement>,
+    AdaptivityProps,
+    HasComponent,
+    Pick<TouchProps, "onStart" | "onEnd" | "onMove"> {
   /**
    * Длительность показа active-состояния
    */
@@ -35,15 +52,15 @@ export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, Has
   /**
    * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
    */
-  activeMode?: 'opacity' | 'background' | string;
+  activeMode?: "opacity" | "background" | string;
   /**
    * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
    */
-  hoverMode?: 'opacity' | 'background' | string;
+  hoverMode?: "opacity" | "background" | string;
   /**
-   * Стиль аутлайна focus visible.
+   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
    */
-  focusVisibleMode?: FocusVisibleMode;
+  focusVisibleMode?: FocusVisibleMode | string;
 }
 
 interface Wave {
@@ -63,12 +80,19 @@ const activeBus = mitt<{ active: string }>();
 const TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;
 
 type TappableContextInterface = { onHoverChange: (s: boolean) => void };
-const TappableContext = React.createContext<TappableContextInterface>({ onHoverChange: noop });
+const TappableContext = React.createContext<TappableContextInterface>({
+  onHoverChange: noop,
+});
 
 function useActivity(hasActive: boolean, stopDelay: number) {
-  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);
+  const id = React.useMemo(
+    () => Math.round(Math.random() * 1e8).toString(16),
+    []
+  );
 
-  const [activity, setActivity] = React.useState<typeof TapState[keyof typeof TapState]>(TapState.none);
+  const [activity, setActivity] = React.useState<
+    typeof TapState[keyof typeof TapState]
+  >(TapState.none);
   const _stop = () => setActivity(TapState.none);
   const start = () => hasActive && setActivity(TapState.active);
   const delayStart = () => {
@@ -87,7 +111,7 @@ function useActivity(hasActive: boolean, stopDelay: number) {
       return stopTimeout.clear;
     }
     if (activity === TapState.active) {
-      activeBus.emit('active', id);
+      activeBus.emit("active", id);
     }
     return noop;
   }, [activity]);
@@ -99,8 +123,8 @@ function useActivity(hasActive: boolean, stopDelay: number) {
     const onActiveChange = (activeId: string) => {
       activeId !== id && _stop();
     };
-    activeBus.on('active', onActiveChange);
-    return () => activeBus.off('active', onActiveChange);
+    activeBus.on("active", onActiveChange);
+    return () => activeBus.off("active", onActiveChange);
   }, [activity === TapState.none]);
 
   useIsomorphicLayoutEffect(() => {
@@ -130,17 +154,18 @@ const Tappable: React.FC<TappableProps> = ({
   hasMouse,
   deviceHasHover,
   hasHover: _hasHover = true,
-  hoverMode = 'background',
+  hoverMode = "background",
   hasActive: _hasActive = true,
-  activeMode = 'background',
-  focusVisibleMode = 'inside',
+  activeMode = "background",
+  focusVisibleMode = "inside",
   ...props
 }: TappableProps) => {
-  Component = Component || (props.href ? 'a' : 'div') as React.ElementType;
+  Component = Component || ((props.href ? "a" : "div") as React.ElementType);
 
   const { onHoverChange } = React.useContext(TappableContext);
   const insideTouchRoot = React.useContext(TouchRootContext);
   const platform = usePlatform();
+  const { focusVisible, onBlur, onFocus } = useFocusVisible();
 
   const [clicks, setClicks] = React.useState<Wave[]>([]);
   const [childHover, setChildHover] = React.useState(false);
@@ -149,11 +174,18 @@ const Tappable: React.FC<TappableProps> = ({
   const hovered = _hovered && !props.disabled;
   const hasActive = _hasActive && !childHover && !props.disabled;
   const hasHover = deviceHasHover && _hasHover && !childHover;
-  const isCustomElement = Component !== 'a' && Component !== 'button' && !props.contentEditable;
-  const isPresetHoverMode = ['opacity', 'background'].includes(hoverMode);
-  const isPresetActiveMode = ['opacity', 'background'].includes(activeMode);
+  const isCustomElement =
+    Component !== "a" && Component !== "button" && !props.contentEditable;
+  const isPresetHoverMode = ["opacity", "background"].includes(hoverMode);
+  const isPresetActiveMode = ["opacity", "background"].includes(activeMode);
+  const isPresetFocusVisibleMode = ["inside", "outside"].includes(
+    focusVisibleMode
+  );
 
-  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);
+  const [activity, { start, stop, delayStart }] = useActivity(
+    hasActive,
+    activeEffectDelay
+  );
   const active = activity === TapState.active || activity === TapState.exiting;
 
   const containerRef = useExternRef(getRootRef);
@@ -178,11 +210,7 @@ const Tappable: React.FC<TappableProps> = ({
   function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {
     if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {
       e.preventDefault();
-      containerRef.current.click();
-    }
-
-    if (typeof _onKeyDown === 'function') {
-      return _onKeyDown(e);
+      containerRef.current?.click();
     }
   }
 
@@ -195,8 +223,8 @@ const Tappable: React.FC<TappableProps> = ({
 
       if (platform === ANDROID) {
         const { top, left } = getOffsetRect(containerRef.current);
-        const x = coordX(originalEvent) - left;
-        const y = coordY(originalEvent) - top;
+        const x = coordX(originalEvent) - (left ?? 0);
+        const y = coordY(originalEvent) - (top ?? 0);
         setClicks([...clicks, { x, y, id: Date.now().toString() }]);
       }
 
@@ -225,28 +253,39 @@ const Tappable: React.FC<TappableProps> = ({
   }
 
   const classes = classNames(
-    getClassName('Tappable', platform),
+    getClassName("Tappable", platform),
     `Tappable--sizeX-${sizeX}`,
+    hasHover && hovered && !isPresetHoverMode && hoverMode,
+    hasActive && active && !isPresetActiveMode && activeMode,
+    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,
     {
-      'Tappable--active': hasActive && active,
-      'Tappable--mouse': hasMouse,
-      [`Tappable--hover-${hoverMode}`]: hasHover && hovered && isPresetHoverMode,
-      [`Tappable--active-${activeMode}`]: hasActive && active && isPresetActiveMode,
-      [hoverMode]: hasHover && hovered && !isPresetHoverMode,
-      [activeMode]: hasActive && active && !isPresetActiveMode,
-    });
+      "Tappable--active": hasActive && active,
+      "Tappable--mouse": hasMouse,
+      [`Tappable--hover-${hoverMode}`]:
+        hasHover && hovered && isPresetHoverMode,
+      [`Tappable--active-${activeMode}`]:
+        hasActive && active && isPresetActiveMode,
+      "Tappable--focus-visible": focusVisible,
+    }
+  );
 
-  const handlers: RootComponentProps = { onStart, onMove, onEnd, onClick, onKeyDown };
-  const role = props.href ? 'link' : 'button';
+  const handlers: RootComponentProps = {
+    onStart: callMultiple(onStart, props.onStart),
+    onMove: callMultiple(onMove, props.onMove),
+    onEnd: callMultiple(onEnd, props.onEnd),
+    onClick,
+    onKeyDown: callMultiple(onKeyDown, _onKeyDown),
+  };
+  const role = props.href ? "link" : "button";
 
   return (
     <Touch
       onEnter={() => setHovered(true)}
       onLeave={() => setHovered(false)}
-      type={Component === 'button' ? 'button' : undefined}
+      type={Component === "button" ? "button" : undefined}
       tabIndex={isCustomElement && !props.disabled ? 0 : undefined}
       role={isCustomElement ? role : undefined}
-      aria-disabled={isCustomElement ? props.disabled : null}
+      aria-disabled={isCustomElement ? props.disabled : undefined}
       stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}
       {...props}
       slideThreshold={20}
@@ -254,27 +293,48 @@ const Tappable: React.FC<TappableProps> = ({
       vkuiClass={classes}
       Component={Component}
       getRootRef={containerRef}
-      {...(props.disabled ? {} : handlers)}>
+      onBlur={callMultiple(onBlur, props.onBlur)}
+      onFocus={callMultiple(onFocus, props.onFocus)}
+      {...(props.disabled ? {} : handlers)}
+    >
       <TappableContext.Provider value={childContext}>
         {children}
       </TappableContext.Provider>
-      {platform === ANDROID && !hasMouse && hasActive && activeMode === 'background' && (
-        <span aria-hidden="true" vkuiClass="Tappable__waves">
-          {clicks.map((wave) => (
-            <Wave {...wave} key={wave.id} onClear={() => setClicks(clicks.filter((c) => c.id !== wave.id))} />
-          ))}
-        </span>
+      {platform === ANDROID &&
+        !hasMouse &&
+        hasActive &&
+        activeMode === "background" && (
+          <span aria-hidden="true" vkuiClass="Tappable__waves">
+            {clicks.map((wave) => (
+              <Wave
+                {...wave}
+                key={wave.id}
+                onClear={() =>
+                  setClicks(clicks.filter((c) => c.id !== wave.id))
+                }
+              />
+            ))}
+          </span>
+        )}
+      {hasHover && hoverMode === "background" && (
+        <span aria-hidden="true" vkuiClass="Tappable__hoverShadow" />
+      )}
+      {!props.disabled && isPresetFocusVisibleMode && (
+        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />
       )}
-      {hasHover && hoverMode === 'background' && <span aria-hidden="true" vkuiClass="Tappable__hoverShadow" />}
-      {!props.disabled && <FocusVisible mode={focusVisibleMode} />}
     </Touch>
   );
 };
 
-export default withAdaptivity(Tappable, { sizeX: true, hasMouse: true, deviceHasHover: true });
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Tappable, {
+  sizeX: true,
+  hasMouse: true,
+  deviceHasHover: true,
+});
 
 function Wave({ x, y, onClear }: Wave & { onClear: VoidFunction }) {
   const timeout = useTimeout(onClear, 225);
-  React.useEffect(() => timeout.set(), []);
+  React.useEffect(() => timeout.set(), [timeout]);
   return <span vkuiClass="Tappable__wave" style={{ top: y, left: x }} />;
 }

package/src/components/TextTooltip/Readme.md

@@ -1,7 +1,11 @@
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
 Тултип, открывающийся при наведеннии мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-  <TextTooltip text="Привет">
-    <Button style={{ margin: 20 }}>Наведи</Button>
-  </TextTooltip>
+<TextTooltip text="Привет">
+  <Button style={{ margin: 20 }}>Наведи</Button>
+</TextTooltip>
 ```

package/src/components/TextTooltip/TextTooltip.css

@@ -1,12 +1,18 @@
 .TextTooltip {
   border-radius: 8px;
-  background: rgba(44, 45, 46, .88); /*TODO узнать у дизайнеров название токена*/
+  background: rgba(
+    44,
+    45,
+    46,
+    0.88
+  ); /*TODO узнать у дизайнеров название токена*/
+
   padding: 8px 12px 9px;
   color: var(--white);
-  box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 4px 32px rgba(0, 0, 0, .16);
-  animation: vkui-popper-fadein .2s ease;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
+  animation: vkui-popper-fadein 0.2s ease;
 }
 
 .TextTooltip__arrow {
-  color: rgba(44, 45, 46, .88);
+  color: rgba(44, 45, 46, 0.88);
 }

package/src/components/TextTooltip/TextTooltip.tsx

@@ -1,49 +1,14 @@
-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 { Placement } from '../Popper/Popper';
-import Subhead from '../Typography/Subhead/Subhead';
-import { prefixClass } from '../../lib/prefixClass';
-import './TextTooltip.css';
+import * as React from "react";
+import { HoverPopper, HoverPopperProps } 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 "./TextTooltip.css";
 
-// Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
-// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
-export interface TextTooltipProps {
-  /**
-   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
-   */
-  shown?: boolean;
-  /**
-   * Вызывается при каждом изменении видимости тултипа
-   */
-  onShownChange?: (shown: boolean) => void;
-  /**
-   * Количество миллисекунд, после которых произойдет показ дропдауна
-   */
-  showDelay?: number;
-  /**
-   * Количество миллисекунд, после которых произойдет скрытие дропдауна
-   */
-  hideDelay?: number;
-  /**
-   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
-   */
-  children?: React.ReactElement;
-  /**
-   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
-   */
-  placement?: Placement;
-  /**
-   * Отступ по вспомогательной оси
-   */
-  offsetSkidding?: number;
-  /**
-   * Отступ по главной оси
-   */
-  offsetDistance?: number;
-  onPlacementChange?: (data: { placement?: Placement }) => void;
+export interface TextTooltipProps
+  extends Omit<HoverPopperProps, "arrow" | "arrowClassName" | "content"> {
   /**
    * Текст тултипа
    */
@@ -54,18 +19,39 @@ export interface TextTooltipProps {
   header?: React.ReactNode;
 }
 
-export const TextTooltip: React.FC<TextTooltipProps> = ({ children, text, header, ...popperProps }: TextTooltipProps) => {
+export const TextTooltip: React.FC<TextTooltipProps> = ({
+  children,
+  text,
+  header,
+  ...popperProps
+}: TextTooltipProps) => {
   const platform = usePlatform();
 
   return (
     <HoverPopper
-      vkuiClass={getClassName('TextTooltip', platform)}
+      vkuiClass={getClassName("TextTooltip", platform)}
       arrow
-      arrowClassName={prefixClass('TextTooltip__arrow')}
+      arrowClassName={prefixClass("TextTooltip__arrow")}
       content={
         <React.Fragment>
-          {hasReactNode(header) && <Subhead Component="span" weight="medium" vkuiClass="TextTooltip__header">{header}</Subhead>}
-          {hasReactNode(text) && <Subhead Component="span" weight="regular" vkuiClass="TextTooltip__text">{text}</Subhead>}
+          {hasReactNode(header) && (
+            <Subhead
+              Component="span"
+              weight="medium"
+              vkuiClass="TextTooltip__header"
+            >
+              {header}
+            </Subhead>
+          )}
+          {hasReactNode(text) && (
+            <Subhead
+              Component="span"
+              weight="regular"
+              vkuiClass="TextTooltip__text"
+            >
+              {text}
+            </Subhead>
+          )}
         </React.Fragment>
       }
       {...popperProps}