@vkontakte/vkui 5.6.2 → 5.7.0

package/dist/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  offsetY,\n  style,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n        style={offsetY ? { ...style, bottom: offsetY } : style}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","offsetY","style","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","bottom","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}

package/dist/components/SubnavigationButton/SubnavigationButton.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TappableProps } from '../Tappable/Tappable';
 export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
     mode?: 'primary' | 'outline' | 'tertiary';
+    appearance?: 'accent' | 'neutral';
     size?: 's' | 'm' | 'l';
     selected?: boolean;
     /**
@@ -21,4 +22,4 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
  */
-export declare const SubnavigationButton: ({ mode, size, selected, textLevel, before, after, expandable, children, className, ...restProps }: SubnavigationButtonProps) => React.JSX.Element;
+export declare const SubnavigationButton: ({ mode, appearance, size, selected, textLevel, before, after, expandable, children, className, ...restProps }: SubnavigationButtonProps) => React.JSX.Element;

package/dist/components/SubnavigationButton/SubnavigationButton.js

@@ -10,6 +10,20 @@ import { SizeType } from "../../lib/adaptivity";
 import { Tappable } from "../Tappable/Tappable";
 import { Caption } from "../Typography/Caption/Caption";
 import { Subhead } from "../Typography/Subhead/Subhead";
+var appearanceStyles = {
+    accent: "vkuiSubnavigationButton--appearance-accent",
+    neutral: "vkuiSubnavigationButton--appearance-neutral"
+};
+var modeStyles = {
+    primary: "vkuiSubnavigationButton--mode-primary",
+    outline: "vkuiSubnavigationButton--mode-outline",
+    tertiary: "vkuiSubnavigationButton--mode-tertiary"
+};
+var sizeStyles = {
+    s: "vkuiSubnavigationButton--size-s",
+    m: "vkuiSubnavigationButton--size-m",
+    l: "vkuiSubnavigationButton--size-l"
+};
 var sizeYClassNames = _define_property({
     none: "vkuiSubnavigationButton--sizeY-none"
 }, SizeType.COMPACT, "vkuiSubnavigationButton--sizeY-compact");
@@ -27,8 +41,9 @@ var SubnavigationButtonTypography = function(_param) {
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
  */ export var SubnavigationButton = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, selected = _param.selected, _param_textLevel = _param.textLevel, textLevel = _param_textLevel === void 0 ? "1" : _param_textLevel, before = _param.before, after = _param.after, expandable = _param.expandable, children = _param.children, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, selected = _param.selected, _param_textLevel = _param.textLevel, textLevel = _param_textLevel === void 0 ? "1" : _param_textLevel, before = _param.before, after = _param.after, expandable = _param.expandable, children = _param.children, className = _param.className, restProps = _object_without_properties(_param, [
         "mode",
+        "appearance",
         "size",
         "selected",
         "textLevel",
@@ -42,15 +57,7 @@ var SubnavigationButtonTypography = function(_param) {
     return /*#__PURE__*/ React.createElement(Tappable, _object_spread_props(_object_spread({}, restProps), {
         hasActive: false,
         focusVisibleMode: "outside",
-        className: classNames("vkuiSubnavigationButton", {
-            s: "vkuiSubnavigationButton--size-s",
-            m: "vkuiSubnavigationButton--size-m",
-            l: "vkuiSubnavigationButton--size-l"
-        }[size], {
-            primary: "vkuiSubnavigationButton--mode-primary",
-            outline: "vkuiSubnavigationButton--mode-outline",
-            tertiary: "vkuiSubnavigationButton--mode-tertiary"
-        }[mode], selected && "vkuiSubnavigationButton--selected", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
+        className: classNames("vkuiSubnavigationButton", sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && "vkuiSubnavigationButton--selected", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
     }), /*#__PURE__*/ React.createElement("span", {
         className: "vkuiSubnavigationButton__in"
     }, before && /*#__PURE__*/ React.createElement("span", {

package/dist/components/SubnavigationButton/SubnavigationButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AA6BnB,IAAMC,gCAAgC;QACpCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,oBAACL,SAAYM;IACtB;IAEA,qBAAO,oBAACP;QAAQQ,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,IAAME,sBAAsB;6BACjCC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAN,WAAAA,0CAAY,wBACZO,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGV;QATHG;QACAC;QACAC;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BpB,iBAAAA,wCAAAA,eAAnBqB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACnB,kDACKQ;QACJY,WAAW;QACXC,kBAAiB;QACjBH,WAAWrB,sCAET;YACEyB,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACZ,KAAK,EACP;YACEa,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAAChB,KAAK,EACPE,iDACAM,UAAUpB,SAAS6B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;sBAGF,oBAACW;QAAKX,SAAS;OACZJ,wBAAU,oBAACe;QAAKX,SAAS;OAA0CJ,uBACpE,oBAACR;QACCC,WAAWA;QACXW,SAAS;QACTY,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,SAAS;OAAyCH,QACjEC,4BAAc,oBAACpB;QAAesB,SAAS;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles['SubnavigationButton--appearance-accent'],\n  neutral: styles['SubnavigationButton--appearance-neutral'],\n};\n\nconst modeStyles = {\n  primary: styles['SubnavigationButton--mode-primary'],\n  outline: styles['SubnavigationButton--mode-outline'],\n  tertiary: styles['SubnavigationButton--mode-tertiary'],\n};\n\nconst sizeStyles = {\n  s: styles['SubnavigationButton--size-s'],\n  m: styles['SubnavigationButton--size-m'],\n  l: styles['SubnavigationButton--size-l'],\n};\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","REGULAR","span","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,IAAMC,aAAa;IACjBC,OAAO;IACPC,OAAO;IACPC,QAAQ;AACV;AAEA,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC;IACJC,IAAI;GACHhB,SAASiB,OAAO;AA8BnB,IAAMC,gCAAgC;QACpCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,oBAAChB,SAAYiB;IACtB;IAEA,qBAAO,oBAAClB;QAAQmB,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,IAAME,sBAAsB;6BACjCC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,mDACbC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAP,WAAAA,0CAAY,wBACZQ,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGX;QAVHG;QACAC;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BhC,iBAAAA,wCAAAA,eAAnBiC,OAAAA,0CAAQ;IAEhB,qBACE,oBAAC/B,kDACKmB;QACJa,WAAW;QACXC,kBAAiB;QACjBH,WAAWjC,sCAETa,UAAU,CAACc,KAAK,EAChBlB,UAAU,CAACgB,KAAK,EAChBnB,gBAAgB,CAACoB,WAAW,EAC5BE,iDACAM,UAAUhC,SAASmC,OAAO,IAAIpB,eAAe,CAACiB,MAAM,EACpDD;sBAGF,oBAACK;QAAKL,SAAS;OACZJ,wBAAU,oBAACS;QAAKL,SAAS;OAA0CJ,uBACpE,oBAACT;QACCC,WAAWA;QACXY,SAAS;QACTM,WAAU;OAETP,WAEFF,uBAAS,oBAACQ;QAAKL,SAAS;OAAyCH,QACjEC,4BAAc,oBAAChC;QAAekC,SAAS;;AAIhD,EAAE"}

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

@@ -1,34 +1,18 @@
 import * as React from 'react';
 import { type PlacementWithAuto } from '../../lib/floating';
 import { HasRootRef } from '../../types';
-import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
-export interface TooltipProps {
+import { type TooltipBaseProps } from '../TooltipBase/TooltipBase';
+export interface TooltipProps extends Omit<TooltipBaseProps, 'arrowCoords' | 'arrowPlacement' | 'getArrowRef' | 'floatingStyle' | 'withArrow'> {
     /**
      * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает
      * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,
      * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
      */
     children: React.ReactElement<HasRootRef<any>> | React.ReactElement;
-    /**
-     * Стиль отображения подсказки
-     */
-    appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
     /**
      * Если передан `false`, то рисуется просто `children`.
      */
     isShown?: boolean;
-    /**
-     * Текст тултипа.
-     */
-    text?: React.ReactNode;
-    /**
-     * Заголовок тултипа.
-     */
-    header?: React.ReactNode;
-    /**
-     * Положение по горизонтали (прижатие к левому или правому краю `children`).
-     * Если не задано, позиция по горизонтали определятся автоматически
-     */
     alignX?: 'center' | 'left' | 'right';
     /**
      * Положение по вертикали (расположение над или под `children`).
@@ -51,20 +35,6 @@ export interface TooltipProps {
      * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
      */
     arrowPadding?: number;
-    /**
-     * Пользовательская SVG иконка.
-     *
-     * Требования:
-     *
-     * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
-     * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
-     *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
-     *    (см. https://github.com/VKCOM/VKUI/pull/4496).
-     * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.
-     * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
-     * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.
-     */
-    ArrowIcon?: PopperArrowProps['Icon'];
     /**
      * Сдвиг стрелочки относительно центра дочернего элемента.
      */
@@ -81,12 +51,8 @@ export interface TooltipProps {
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
     placement?: PlacementWithAuto;
-    /**
-     * Пользовательские css-классы, будут добавлены на root-элемент
-     */
-    className?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, appearance, arrow, arrowPadding, ArrowIcon, placement: placementProp, text, header, className, ...restProps }: TooltipProps) => React.JSX.Element;
+export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, arrow, arrowPadding, placement: placementProp, ...restProps }: TooltipProps) => React.JSX.Element;

package/dist/components/Tooltip/Tooltip.js

@@ -5,27 +5,17 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { hasReactNode } from "@vkontakte/vkjs";
 import { useExternRef } from "../../hooks/useExternRef";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { useDOM } from "../../lib/dom";
 import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, useFloating } from "../../lib/floating";
 import { warnOnce } from "../../lib/warnOnce";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
-import { DefaultIcon } from "../PopperArrow/DefaultIcon";
-import { PopperArrow } from "../PopperArrow/PopperArrow";
-import { Subhead } from "../Typography/Subhead/Subhead";
+import { TooltipBase } from "../TooltipBase/TooltipBase";
 import { tooltipContainerAttr } from "./TooltipContainer";
 var isDOMTypeElement = function(element) {
     return /*#__PURE__*/ React.isValidElement(element) && typeof element.type === "string";
 };
 var warn = warnOnce("Tooltip");
-var stylesAppearance = {
-    accent: "vkuiTooltip--appearance-accent",
-    white: "vkuiTooltip--appearance-white",
-    black: "vkuiTooltip--appearance-black",
-    inversion: "vkuiTooltip--appearance-inversion"
-};
 function mapAlignX(x) {
     switch(x){
         case "left":
@@ -50,7 +40,7 @@ function isVerticalPlacement(placement) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */ export var Tooltip = function(_param) {
-    var children = _param.children, tmp = _param.isShown, isShownProp = tmp === void 0 ? true : tmp, _param_offsetX = _param.offsetX, offsetX = _param_offsetX === void 0 ? 0 : _param_offsetX, _param_offsetY = _param.offsetY, offsetY = _param_offsetY === void 0 ? 15 : _param_offsetY, alignX = _param.alignX, alignY = _param.alignY, onClose = _param.onClose, _param_cornerOffset = _param.cornerOffset, cornerOffset = _param_cornerOffset === void 0 ? 0 : _param_cornerOffset, cornerAbsoluteOffset = _param.cornerAbsoluteOffset, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_arrow = _param.arrow, arrow = _param_arrow === void 0 ? true : _param_arrow, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? 14 : _param_arrowPadding, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? DefaultIcon : _param_ArrowIcon, placementProp = _param.placement, text = _param.text, header = _param.header, className = _param.className, restProps = _object_without_properties(_param, [
+    var children = _param.children, tmp = _param.isShown, isShownProp = tmp === void 0 ? true : tmp, _param_offsetX = _param.offsetX, offsetX = _param_offsetX === void 0 ? 0 : _param_offsetX, _param_offsetY = _param.offsetY, offsetY = _param_offsetY === void 0 ? 15 : _param_offsetY, alignX = _param.alignX, alignY = _param.alignY, onClose = _param.onClose, _param_cornerOffset = _param.cornerOffset, cornerOffset = _param_cornerOffset === void 0 ? 0 : _param_cornerOffset, cornerAbsoluteOffset = _param.cornerAbsoluteOffset, _param_arrow = _param.arrow, arrow = _param_arrow === void 0 ? true : _param_arrow, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? 14 : _param_arrowPadding, placementProp = _param.placement, restProps = _object_without_properties(_param, [
         "children",
         "isShown",
         "offsetX",
@@ -60,14 +50,9 @@ function isVerticalPlacement(placement) {
         "onClose",
         "cornerOffset",
         "cornerAbsoluteOffset",
-        "appearance",
         "arrow",
         "arrowPadding",
-        "ArrowIcon",
-        "placement",
-        "text",
-        "header",
-        "className"
+        "placement"
     ]);
     var _React_useState = _sliced_to_array(React.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
     var _React_useState1 = _sliced_to_array(React.useState(null), 2), target = _React_useState1[0], setTarget = _React_useState1[1];
@@ -164,30 +149,20 @@ function isVerticalPlacement(placement) {
         middleware: memoizedMiddlewares,
         whileElementsMounted: autoUpdateFloatingElement
     }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow;
-    var document = useDOM().document;
-    useGlobalEventListener(document, "click", isShown && onClose, {
-        capture: true,
-        passive: true
-    });
     var childRef = isDOMTypeElement(children) ? children.ref : /*#__PURE__*/ React.isValidElement(children) ? children.props.getRootRef : null;
     var patchedRef = useExternRef(setTarget, refs.setReference, childRef);
     var child = /*#__PURE__*/ React.isValidElement(children) ? /*#__PURE__*/ React.cloneElement(children, _define_property({}, isDOMTypeElement(children) ? "ref" : "getRootRef", patchedRef)) : children;
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiTooltip", appearance !== "neutral" && stylesAppearance[appearance], className)
-    }), /*#__PURE__*/ React.createElement("div", {
-        ref: refs.setFloating,
-        style: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY)
-    }, arrow && /*#__PURE__*/ React.createElement(PopperArrow, {
-        coords: arrowCoords,
-        placement: resolvedPlacement,
-        arrowClassName: "vkuiTooltip__arrow",
-        getRootRef: setArrowRef,
-        Icon: ArrowIcon
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiTooltip__content"
-    }, header && /*#__PURE__*/ React.createElement(Subhead, {
-        weight: "2"
-    }, header), text && /*#__PURE__*/ React.createElement(Subhead, null, text)))), tooltipContainer));
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TooltipBase, _object_spread_props(_object_spread({}, restProps), {
+        getRootRef: refs.setFloating,
+        floatingStyle: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY),
+        withArrow: arrow,
+        arrowCoords: arrowCoords,
+        arrowPlacement: resolvedPlacement,
+        getArrowRef: setArrowRef
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiTooltip__overlay",
+        onClickCapture: onClose
+    })), tooltipContainer));
 };
 
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { DefaultIcon } from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nconst stylesAppearance = {\n  accent: styles['Tooltip--appearance-accent'],\n  white: styles['Tooltip--appearance-white'],\n  black: styles['Tooltip--appearance-black'],\n  inversion: styles['Tooltip--appearance-inversion'],\n};\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\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  arrowPadding?: number;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\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 getDefaultPlacement(\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: PlacementWithAuto) {\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: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  appearance = 'accent',\n  arrow = true,\n  arrowPadding = 14,\n  ArrowIcon = DefaultIcon,\n  placement: placementProp,\n  text,\n  header,\n  className,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = 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  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const { document } = useDOM();\n  useGlobalEventListener(document, 'click', isShown && onClose, {\n    capture: true,\n    passive: true,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, 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          <div\n            {...restProps}\n            className={classNames(\n              styles['Tooltip'],\n              appearance !== 'neutral' && stylesAppearance[appearance],\n              className,\n            )}\n          >\n            <div\n              ref={refs.setFloating}\n              style={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n            >\n              {arrow && (\n                <PopperArrow\n                  coords={arrowCoords}\n                  placement={resolvedPlacement}\n                  arrowClassName={styles['Tooltip__arrow']}\n                  getRootRef={setArrowRef}\n                  Icon={ArrowIcon}\n                />\n              )}\n              <div className={styles['Tooltip__content']}>\n                {header && <Subhead weight=\"2\">{header}</Subhead>}\n                {text && <Subhead>{text}</Subhead>}\n              </div>\n            </div>\n          </div>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","ReactDOM","classNames","hasReactNode","useExternRef","useGlobalEventListener","useDOM","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","useFloating","warnOnce","useNavTransition","DefaultIcon","PopperArrow","Subhead","tooltipContainerAttr","isDOMTypeElement","element","isValidElement","type","warn","stylesAppearance","accent","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","arrowPadding","ArrowIcon","placementProp","text","header","className","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","strategy","middleware","whileElementsMounted","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","document","capture","passive","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","Fragment","createPortal","div","setFloating","coords","arrowClassName","Icon","weight"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nexport interface TooltipProps\n  extends Omit<\n    TooltipBaseProps,\n    'arrowCoords' | 'arrowPlacement' | 'getArrowRef' | 'floatingStyle' | 'withArrow'\n  > {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\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  arrowPadding?: number;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\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 getDefaultPlacement(\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: PlacementWithAuto) {\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: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  arrow = true,\n  arrowPadding = 14,\n  placement: placementProp,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = 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  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, 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          <>\n            <TooltipBase\n              {...restProps}\n              getRootRef={refs.setFloating}\n              floatingStyle={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n              withArrow={arrow}\n              arrowCoords={arrowCoords}\n              arrowPlacement={resolvedPlacement}\n              getArrowRef={setArrowRef}\n            />\n            <div className={styles['Tooltip__overlay']} onClickCapture={onClose} />\n          </>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","ReactDOM","hasReactNode","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","useFloating","warnOnce","useNavTransition","TooltipBase","tooltipContainerAttr","isDOMTypeElement","element","isValidElement","type","warn","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","arrow","arrowPadding","placementProp","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","strategy","middleware","whileElementsMounted","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","Fragment","createPortal","setFloating","floatingStyle","withArrow","arrowPlacement","getArrowRef","div","className","onClickCapture"],"mappings":"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"}

package/dist/components/TooltipBase/TooltipBase.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
+export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
+    /**
+     * Стиль отображения подсказки
+     */
+    appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
+    /**
+     * Текст тултипа.
+     */
+    text?: React.ReactNode;
+    /**
+     * Заголовок тултипа.
+     */
+    header?: React.ReactNode;
+    /**
+     * Отображать ли стрелку, указывающую на якорный элемент
+     */
+    withArrow?: boolean;
+    arrowCoords?: PopperArrowProps['coords'];
+    arrowPlacement?: PopperArrowProps['placement'];
+    getArrowRef?: PopperArrowProps['getRootRef'];
+    /**
+     * Пользовательская SVG иконка.
+     *
+     * Требования:
+     *
+     * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
+     * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
+     *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
+     *    (см. https://github.com/VKCOM/VKUI/pull/4496).
+     * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.
+     * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
+     * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.
+     */
+    ArrowIcon?: PopperArrowProps['Icon'];
+    /**
+     * Пользовательские css-классы, будут добавлены на root-элемент
+     */
+    className?: string;
+    floatingStyle?: React.CSSProperties;
+}
+/**
+ * Низкоуровневый компонент для отрисовки тултипа.
+ * Примеры использования и Readme можно найти в документации Tooltip
+ * @see https://vkcom.github.io/VKUI/#/Tooltip
+ */
+export declare const TooltipBase: ({ appearance, withArrow, arrowCoords, arrowPlacement, getArrowRef, getRootRef, floatingStyle, ArrowIcon, text, header, className, ...restProps }: TooltipBaseProps) => React.JSX.Element;

package/dist/components/TooltipBase/TooltipBase.js

@@ -0,0 +1,51 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { DefaultIcon } from "../PopperArrow/DefaultIcon";
+import { PopperArrow } from "../PopperArrow/PopperArrow";
+import { Subhead } from "../Typography/Subhead/Subhead";
+var stylesAppearance = {
+    accent: "vkuiTooltipBase--appearance-accent",
+    white: "vkuiTooltipBase--appearance-white",
+    black: "vkuiTooltipBase--appearance-black",
+    inversion: "vkuiTooltipBase--appearance-inversion"
+};
+/**
+ * Низкоуровневый компонент для отрисовки тултипа.
+ * Примеры использования и Readme можно найти в документации Tooltip
+ * @see https://vkcom.github.io/VKUI/#/Tooltip
+ */ export var TooltipBase = function(_param) {
+    var _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_withArrow = _param.withArrow, withArrow = _param_withArrow === void 0 ? true : _param_withArrow, arrowCoords = _param.arrowCoords, _param_arrowPlacement = _param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? "top" : _param_arrowPlacement, getArrowRef = _param.getArrowRef, getRootRef = _param.getRootRef, floatingStyle = _param.floatingStyle, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? DefaultIcon : _param_ArrowIcon, text = _param.text, header = _param.header, className = _param.className, restProps = _object_without_properties(_param, [
+        "appearance",
+        "withArrow",
+        "arrowCoords",
+        "arrowPlacement",
+        "getArrowRef",
+        "getRootRef",
+        "floatingStyle",
+        "ArrowIcon",
+        "text",
+        "header",
+        "className"
+    ]);
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        className: classNames("vkuiTooltipBase", appearance !== "neutral" && stylesAppearance[appearance], className)
+    }), /*#__PURE__*/ React.createElement("div", {
+        ref: getRootRef,
+        style: floatingStyle
+    }, withArrow && /*#__PURE__*/ React.createElement(PopperArrow, {
+        coords: arrowCoords,
+        placement: arrowPlacement,
+        arrowClassName: "vkuiTooltipBase__arrow",
+        getRootRef: getArrowRef,
+        Icon: ArrowIcon
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiTooltipBase__content"
+    }, header && /*#__PURE__*/ React.createElement(Subhead, {
+        weight: "2"
+    }, header), text && /*#__PURE__*/ React.createElement(Subhead, null, text))));
+};
+
+//# sourceMappingURL=TooltipBase.js.map

package/dist/components/TooltipBase/TooltipBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { DefaultIcon } from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TooltipBase.module.css';\n\nconst stylesAppearance = {\n  accent: styles['TooltipBase--appearance-accent'],\n  white: styles['TooltipBase--appearance-white'],\n  black: styles['TooltipBase--appearance-black'],\n  inversion: styles['TooltipBase--appearance-inversion'],\n};\n\nexport interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  withArrow?: boolean;\n  arrowCoords?: PopperArrowProps['coords'];\n  arrowPlacement?: PopperArrowProps['placement'];\n  getArrowRef?: PopperArrowProps['getRootRef'];\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\n  floatingStyle?: React.CSSProperties;\n}\n\n/**\n * Низкоуровневый компонент для отрисовки тултипа.\n * Примеры использования и Readme можно найти в документации Tooltip\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const TooltipBase = ({\n  appearance = 'accent',\n  withArrow = true,\n  arrowCoords,\n  arrowPlacement = 'top',\n  getArrowRef,\n  getRootRef,\n  floatingStyle,\n  ArrowIcon = DefaultIcon,\n  text,\n  header,\n  className,\n  ...restProps\n}: TooltipBaseProps) => {\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['TooltipBase'],\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n    >\n      <div ref={getRootRef} style={floatingStyle}>\n        {withArrow && (\n          <PopperArrow\n            coords={arrowCoords}\n            placement={arrowPlacement}\n            arrowClassName={styles['TooltipBase__arrow']}\n            getRootRef={getArrowRef}\n            Icon={ArrowIcon}\n          />\n        )}\n        <div className={styles['TooltipBase__content']}>\n          {header && <Subhead weight=\"2\">{header}</Subhead>}\n          {text && <Subhead>{text}</Subhead>}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","DefaultIcon","PopperArrow","Subhead","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","withArrow","arrowCoords","arrowPlacement","getArrowRef","getRootRef","floatingStyle","ArrowIcon","text","header","className","restProps","div","ref","style","coords","placement","arrowClassName","Icon","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,WAAW,QAA+B,6BAA6B;AAChF,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;AA2CA;;;;CAIC,GACD,OAAO,IAAMC,cAAc;mCACzBC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,yBACZC,qBAAAA,4CACAC,gBAAAA,oDAAiB,+BACjBC,qBAAAA,aACAC,oBAAAA,YACAC,uBAAAA,yCACAC,WAAAA,0CAAYhB,gCACZiB,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACE,+CACKD;QACJD,WAAWpB,8BAETU,eAAe,aAAaN,gBAAgB,CAACM,WAAW,EACxDU;sBAGF,oBAACE;QAAIC,KAAKR;QAAYS,OAAOR;OAC1BL,2BACC,oBAACT;QACCuB,QAAQb;QACRc,WAAWb;QACXc,cAAc;QACdZ,YAAYD;QACZc,MAAMX;sBAGV,oBAACK;QAAIF,SAAS;OACXD,wBAAU,oBAAChB;QAAQ0B,QAAO;OAAKV,SAC/BD,sBAAQ,oBAACf,eAASe;AAK7B,EAAE"}

package/dist/components/View/View.js

@@ -132,10 +132,10 @@ var warn = warnOnce("View");
     ]);
     var transitionEndHandler = React.useCallback(function(e) {
         if ((!e || [
-            "vkui-animation-ios-next-forward",
-            "vkui-animation-ios-prev-back",
-            "vkui-animation-view-next-forward",
-            "vkui-animation-view-prev-back"
+            "vkuivkui-animation-ios-next-forward",
+            "vkuivkui-animation-ios-prev-back",
+            "vkuivkui-animation-view-next-forward",
+            "vkuivkui-animation-view-prev-back"
         ].includes(e.animationName)) && prevPanel !== null) {
             flushTransition(prevPanel, Boolean(isBack));
         }

package/dist/components/View/ViewInfinite.js

@@ -45,10 +45,10 @@ var ViewInfiniteComponent = /*#__PURE__*/ function(_superClass) {
         _define_property(_assert_this_initialized(_this), "panelNodes", {});
         _define_property(_assert_this_initialized(_this), "transitionEndHandler", function(e) {
             if ((!e || [
-                "vkui-animation-ios-next-forward",
-                "vkui-animation-ios-prev-back",
-                "vkui-animation-view-next-forward",
-                "vkui-animation-view-prev-back"
+                "vkuivkui-animation-ios-next-forward",
+                "vkuivkui-animation-ios-prev-back",
+                "vkuivkui-animation-view-next-forward",
+                "vkuivkui-animation-view-prev-back"
             ].includes(e.animationName)) && _this.state.prevPanel !== null) {
                 _this.flushTransition(_this.state.prevPanel, Boolean(_this.state.isBack));
             }