@vkontakte/vkui 5.6.2 → 5.7.0

package/dist/cssm/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","styles","isDOMTypeElement","element","isValidElement","type","warn","stylesAppearance","accent","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","isShownProp","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","arrowPadding","ArrowIcon","placementProp","text","header","className","restProps","arrowRef","setArrowRef","useState","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","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","strategy","middleware","whileElementsMounted","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","styles","isDOMTypeElement","element","isValidElement","type","warn","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","isShownProp","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","arrow","arrowPadding","placementProp","restProps","arrowRef","setArrowRef","useState","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","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","strategy","middleware","whileElementsMounted","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/cssm/components/Tooltip/Tooltip.module.css

@@ -1,57 +1,7 @@
-.Tooltip {
-  position: absolute;
+.Tooltip__overlay {
+  position: fixed;
   left: 0;
   top: 0;
-  height: 100%;
   width: 100%;
-  white-space: normal;
-}
-
-.Tooltip__content {
-  background-color: var(--vkui--color_background_modal);
-  box-shadow: var(--vkui--elevation3);
-  padding: 9px 12px 10px;
-  border-radius: var(--vkui--size_border_radius--regular);
-  color: var(--vkui--color_text_primary);
-  max-width: 220px;
-}
-
-.Tooltip__arrow {
-  color: var(--vkui--color_background_modal);
-}
-
-.Tooltip--appearance-accent .Tooltip__content {
-  background-color: var(--vkui--color_background_accent_tint);
-  color: var(--vkui--color_text_contrast);
-}
-
-.Tooltip--appearance-accent .Tooltip__arrow {
-  color: var(--vkui--color_background_accent_tint);
-}
-
-.Tooltip--appearance-white .Tooltip__content {
-  background-color: var(--vkui--color_background_contrast);
-  color: var(--vkui--color_text_primary_invariably);
-}
-
-.Tooltip--appearance-white .Tooltip__arrow {
-  color: var(--vkui--color_background_contrast);
-}
-
-.Tooltip--appearance-black .Tooltip__content {
-  background-color: var(--vkui--color_background_contrast_inverse);
-  color: var(--vkui--color_text_contrast);
-}
-
-.Tooltip--appearance-black .Tooltip__arrow {
-  color: var(--vkui--color_background_contrast_inverse);
-}
-
-.Tooltip--appearance-inversion .Tooltip__content {
-  background-color: var(--vkui--color_background_modal_inverse);
-  color: var(--vkui--color_text_contrast_themed);
-}
-
-.Tooltip--appearance-inversion .Tooltip__arrow {
-  color: var(--vkui--color_background_modal_inverse);
+  height: 100%;
 }

package/dist/cssm/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/cssm/components/TooltipBase/TooltipBase.js

@@ -0,0 +1,37 @@
+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';
+import styles from './TooltipBase.module.css';
+const stylesAppearance = {
+    accent: styles['TooltipBase--appearance-accent'],
+    white: styles['TooltipBase--appearance-white'],
+    black: styles['TooltipBase--appearance-black'],
+    inversion: styles['TooltipBase--appearance-inversion']
+};
+/**
+ * Низкоуровневый компонент для отрисовки тултипа.
+ * Примеры использования и Readme можно найти в документации Tooltip
+ * @see https://vkcom.github.io/VKUI/#/Tooltip
+ */ export const TooltipBase = ({ appearance = 'accent', withArrow = true, arrowCoords, arrowPlacement = 'top', getArrowRef, getRootRef, floatingStyle, ArrowIcon = DefaultIcon, text, header, className, ...restProps })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['TooltipBase'], appearance !== 'neutral' && stylesAppearance[appearance], className)
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: getRootRef,
+        style: floatingStyle
+    }, withArrow && /*#__PURE__*/ React.createElement(PopperArrow, {
+        coords: arrowCoords,
+        placement: arrowPlacement,
+        arrowClassName: styles['TooltipBase__arrow'],
+        getRootRef: getArrowRef,
+        Icon: ArrowIcon
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles['TooltipBase__content']
+    }, header && /*#__PURE__*/ React.createElement(Subhead, {
+        weight: "2"
+    }, header), text && /*#__PURE__*/ React.createElement(Subhead, null, text))));
+};
+
+//# sourceMappingURL=TooltipBase.js.map

package/dist/cssm/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","styles","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;AACxD,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,iCAAiC;IAChDG,OAAOH,MAAM,CAAC,gCAAgC;IAC9CI,OAAOJ,MAAM,CAAC,gCAAgC;IAC9CK,WAAWL,MAAM,CAAC,oCAAoC;AACxD;AA2CA;;;;CAIC,GACD,OAAO,MAAMM,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,YAAY,IAAI,EAChBC,WAAW,EACXC,iBAAiB,KAAK,EACtBC,WAAW,EACXC,UAAU,EACVC,aAAa,EACbC,YAAYjB,WAAW,EACvBkB,IAAI,EACJC,MAAM,EACNC,SAAS,EACT,GAAGC,WACc;IACjB,qBACE,oBAACC;QACE,GAAGD,SAAS;QACbD,WAAWrB,WACTI,MAAM,CAAC,cAAc,EACrBO,eAAe,aAAaN,gBAAgB,CAACM,WAAW,EACxDU;qBAGF,oBAACE;QAAIC,KAAKR;QAAYS,OAAOR;OAC1BL,2BACC,oBAACV;QACCwB,QAAQb;QACRc,WAAWb;QACXc,gBAAgBxB,MAAM,CAAC,qBAAqB;QAC5CY,YAAYD;QACZc,MAAMX;sBAGV,oBAACK;QAAIF,WAAWjB,MAAM,CAAC,uBAAuB;OAC3CgB,wBAAU,oBAACjB;QAAQ2B,QAAO;OAAKV,SAC/BD,sBAAQ,oBAAChB,eAASgB;AAK7B,EAAE"}

package/dist/cssm/components/TooltipBase/TooltipBase.module.css

@@ -0,0 +1,57 @@
+.TooltipBase {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  white-space: normal;
+}
+
+.TooltipBase__content {
+  background-color: var(--vkui--color_background_modal);
+  box-shadow: var(--vkui--elevation3);
+  padding: 9px 12px 10px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  color: var(--vkui--color_text_primary);
+  max-width: 220px;
+}
+
+.TooltipBase__arrow {
+  color: var(--vkui--color_background_modal);
+}
+
+.TooltipBase--appearance-accent .TooltipBase__content {
+  background-color: var(--vkui--color_background_accent_tint);
+  color: var(--vkui--color_text_contrast);
+}
+
+.TooltipBase--appearance-accent .TooltipBase__arrow {
+  color: var(--vkui--color_background_accent_tint);
+}
+
+.TooltipBase--appearance-white .TooltipBase__content {
+  background-color: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_primary_invariably);
+}
+
+.TooltipBase--appearance-white .TooltipBase__arrow {
+  color: var(--vkui--color_background_contrast);
+}
+
+.TooltipBase--appearance-black .TooltipBase__content {
+  background-color: var(--vkui--color_background_contrast_inverse);
+  color: var(--vkui--color_text_contrast);
+}
+
+.TooltipBase--appearance-black .TooltipBase__arrow {
+  color: var(--vkui--color_background_contrast_inverse);
+}
+
+.TooltipBase--appearance-inversion .TooltipBase__content {
+  background-color: var(--vkui--color_background_modal_inverse);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.TooltipBase--appearance-inversion .TooltipBase__arrow {
+  color: var(--vkui--color_background_modal_inverse);
+}