@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

@@ -17,7 +17,7 @@ https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_in
 https://github.com/VKCOM/VKUI/pull/3641
 */
 
-/* stylelint-disable-next-line @project-tools/stylelint-atomic */
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
 
 .Tappable > * {
   position: relative;
@@ -106,7 +106,7 @@ https://github.com/VKCOM/VKUI/pull/3641
   content: '';
   border-radius: 50%;
   background: var(--vkui--color_transparent--active);
-  animation: vkui-animation-wave 0.3s var(--vkui--animation_easing_platform);
+  animation: animation-wave 0.3s var(--vkui--animation_easing_platform);
 }
 
 /**
@@ -123,11 +123,15 @@ https://github.com/VKCOM/VKUI/pull/3641
   }
 }
 
+.Tappable.Tappable--borderRadiusInherit {
+  border-radius: inherit;
+}
+
 /**
  * Animations
  */
 
-@keyframes vkui-animation-wave {
+@keyframes animation-wave {
   0% {
     transform: scale(1);
     opacity: 1;

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

@@ -3,16 +3,17 @@ import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { HoverPopper } from '../HoverPopper/HoverPopper';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './TextTooltip.module.css';
+const stylesAppearance = {
+    accent: styles['TextTooltip--appearance-accent'],
+    white: styles['TextTooltip--appearance-white'],
+    black: styles['TextTooltip--appearance-black'],
+    inversion: styles['TextTooltip--appearance-inversion']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
  */ export const TextTooltip = ({ children, text, header, appearance = 'neutral', className, ...popperProps })=>{
     return /*#__PURE__*/ React.createElement(HoverPopper, {
-        className: classNames(styles['TextTooltip'], appearance !== 'neutral' && ({
-            accent: styles['TextTooltip--appearance-accent'],
-            white: styles['TextTooltip--appearance-white'],
-            black: styles['TextTooltip--appearance-black'],
-            inversion: styles['TextTooltip--appearance-inversion']
-        })[appearance], className),
+        className: classNames(styles['TextTooltip'], appearance !== 'neutral' && stylesAppearance[appearance], className),
         arrow: true,
         arrowClassName: styles['TextTooltip__arrow'],
         content: /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(header) && /*#__PURE__*/ React.createElement(Subhead, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['TextTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['TextTooltip--appearance-accent'],\n            white: styles['TextTooltip--appearance-white'],\n            black: styles['TextTooltip--appearance-black'],\n            inversion: styles['TextTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","HoverPopper","Subhead","styles","TextTooltip","children","text","header","appearance","className","popperProps","accent","white","black","inversion","arrow","arrowClassName","content","Fragment","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,2BAA2B;AAkB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,aAAa,SAAS,EACtBC,SAAS,EACT,GAAGC,aACc;IACjB,qBACE,oBAACT;QACCQ,WAAWV,WACTI,MAAM,CAAC,cAAc,EACrBK,eAAe,aACb,CAAA;YACEG,QAAQR,MAAM,CAAC,iCAAiC;YAChDS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,OAAOV,MAAM,CAAC,gCAAgC;YAC9CW,WAAWX,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACK,WAAW,EACfC;QAEFM,OAAAA;QACAC,gBAAgBb,MAAM,CAAC,qBAAqB;QAC5Cc,uBACE,oBAACnB,MAAMoB,QAAQ,QACZlB,aAAaO,yBAAW,oBAACL;YAAQiB,QAAO;WAAKZ,SAC7CP,aAAaM,uBAAS,oBAACJ,eAASI;QAGpC,GAAGI,WAAW;OAEdL;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nconst stylesAppearance = {\n  accent: styles['TextTooltip--appearance-accent'],\n  white: styles['TextTooltip--appearance-white'],\n  black: styles['TextTooltip--appearance-black'],\n  inversion: styles['TextTooltip--appearance-inversion'],\n};\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['TextTooltip'],\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","HoverPopper","Subhead","styles","stylesAppearance","accent","white","black","inversion","TextTooltip","children","text","header","appearance","className","popperProps","arrow","arrowClassName","content","Fragment","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,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;AAkBA;;CAEC,GACD,OAAO,MAAMM,cAAc,CAAC,EAC1BC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,aAAa,SAAS,EACtBC,SAAS,EACT,GAAGC,aACc;IACjB,qBACE,oBAACd;QACCa,WAAWf,WACTI,MAAM,CAAC,cAAc,EACrBU,eAAe,aAAaT,gBAAgB,CAACS,WAAW,EACxDC;QAEFE,OAAAA;QACAC,gBAAgBd,MAAM,CAAC,qBAAqB;QAC5Ce,uBACE,oBAACpB,MAAMqB,QAAQ,QACZnB,aAAaY,yBAAW,oBAACV;YAAQkB,QAAO;WAAKR,SAC7CZ,aAAaW,uBAAS,oBAACT,eAASS;QAGpC,GAAGI,WAAW;OAEdL;AAGP,EAAE"}

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

@@ -4,7 +4,7 @@
   padding: 8px 12px 9px;
   color: var(--vkui--color_text_primary);
   box-shadow: var(--vkui--elevation3);
-  animation: vkui-texttooltip-fadein 0.2s ease;
+  animation: texttooltip-fade-in 0.2s ease;
 }
 
 .TextTooltip__arrow {
@@ -47,7 +47,7 @@
   color: var(--vkui--color_background_modal_inverse);
 }
 
-@keyframes vkui-texttooltip-fadein {
+@keyframes texttooltip-fade-in {
   from {
     opacity: 0;
   }

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

@@ -55,4 +55,4 @@ export interface TooltipProps extends Omit<TooltipBaseProps, 'arrowCoords' | 'ar
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, arrow, arrowPadding, placement: placementProp, ...restProps }: TooltipProps) => React.JSX.Element;
+export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, arrow, arrowPadding, placement: placementProp, maxWidth, ...restProps }: TooltipProps) => React.JSX.Element;

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

@@ -5,7 +5,7 @@ import { useExternRef } from '../../hooks/useExternRef';
 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 { TooltipBase } from '../TooltipBase/TooltipBase';
+import { TOOLTIP_MAX_WIDTH, TooltipBase } from '../TooltipBase/TooltipBase';
 import { tooltipContainerAttr } from './TooltipContainer';
 import styles from './Tooltip.module.css';
 const isDOMTypeElement = (element)=>{
@@ -33,7 +33,7 @@ function isVerticalPlacement(placement) {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
- */ export const Tooltip = ({ children, isShown: isShownProp = true, offsetX = 0, offsetY = 15, alignX, alignY, onClose, cornerOffset = 0, cornerAbsoluteOffset, arrow = true, arrowPadding = 14, placement: placementProp, ...restProps })=>{
+ */ export const Tooltip = ({ children, isShown: isShownProp = true, offsetX = 0, offsetY = 15, alignX, alignY, onClose, cornerOffset = 0, cornerAbsoluteOffset, arrow = true, arrowPadding = 14, placement: placementProp, maxWidth = TOOLTIP_MAX_WIDTH, ...restProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
     const [target, setTarget] = React.useState(null);
     /* eslint-disable no-restricted-properties */ const tooltipContainer = React.useMemo(()=>target?.closest(`[${tooltipContainerAttr}]`), [
@@ -134,7 +134,8 @@ function isVerticalPlacement(placement) {
         withArrow: arrow,
         arrowCoords: arrowCoords,
         arrowPlacement: resolvedPlacement,
-        getArrowRef: setArrowRef
+        getArrowRef: setArrowRef,
+        maxWidth: maxWidth
     }), /*#__PURE__*/ React.createElement("div", {
         className: styles['Tooltip__overlay'],
         onClickCapture: onClose

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 { 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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"}
+{"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 { TOOLTIP_MAX_WIDTH, 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  maxWidth = TOOLTIP_MAX_WIDTH,\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              maxWidth={maxWidth}\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","TOOLTIP_MAX_WIDTH","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","maxWidth","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/TooltipBase/TooltipBase.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { HasRootRef } from '../../types';
 import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
+export declare const TOOLTIP_MAX_WIDTH = 220;
 export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
     /**
      * Стиль отображения подсказки
@@ -39,6 +40,12 @@ export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
      * Пользовательские css-классы, будут добавлены на root-элемент
      */
     className?: string;
+    /**
+     * Перебивает максимальную ширину заданную по умолчанию.
+     *
+     * Передача `null` полностью сбрасывает установку `max-width` на элемент.
+     */
+    maxWidth?: number | string | null;
     floatingStyle?: React.CSSProperties;
 }
 /**
@@ -46,4 +53,4 @@ export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
  * Примеры использования и 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;
+export declare const TooltipBase: ({ appearance, withArrow, arrowCoords, arrowPlacement, getArrowRef, getRootRef, floatingStyle, ArrowIcon, text, header, maxWidth, ...restProps }: TooltipBaseProps) => React.JSX.Element;

package/dist/cssm/components/TooltipBase/TooltipBase.js

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { DefaultIcon } from '../PopperArrow/DefaultIcon';
 import { PopperArrow } from '../PopperArrow/PopperArrow';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './TooltipBase.module.css';
+export const TOOLTIP_MAX_WIDTH = 220;
 const stylesAppearance = {
     accent: styles['TooltipBase--appearance-accent'],
     white: styles['TooltipBase--appearance-white'],
@@ -14,10 +16,10 @@ const stylesAppearance = {
  * Низкоуровневый компонент для отрисовки тултипа.
  * Примеры использования и 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", {
+ */ export const TooltipBase = ({ appearance = 'accent', withArrow = true, arrowCoords, arrowPlacement = 'top', getArrowRef, getRootRef, floatingStyle, ArrowIcon = DefaultIcon, text, header, maxWidth = TOOLTIP_MAX_WIDTH, ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['TooltipBase'], appearance !== 'neutral' && stylesAppearance[appearance], className)
+        baseClassName: classNames(styles['TooltipBase'], appearance !== 'neutral' && stylesAppearance[appearance])
     }, /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,
         style: floatingStyle
@@ -28,7 +30,10 @@ const stylesAppearance = {
         getRootRef: getArrowRef,
         Icon: ArrowIcon
     }), /*#__PURE__*/ React.createElement("div", {
-        className: styles['TooltipBase__content']
+        className: styles['TooltipBase__content'],
+        style: maxWidth !== null ? {
+            maxWidth
+        } : undefined
     }, header && /*#__PURE__*/ React.createElement(Subhead, {
         weight: "2"
     }, header), text && /*#__PURE__*/ React.createElement(Subhead, null, text))));

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

@@ -1 +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"}
+{"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 { RootComponent } from '../RootComponent/RootComponent';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\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  /**\n   * Перебивает максимальную ширину заданную по умолчанию.\n   *\n   * Передача `null` полностью сбрасывает установку `max-width` на элемент.\n   */\n  maxWidth?: number | string | null;\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  maxWidth = TOOLTIP_MAX_WIDTH,\n  ...restProps\n}: TooltipBaseProps) => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['TooltipBase'],\n        appearance !== 'neutral' && stylesAppearance[appearance],\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\n          className={styles['TooltipBase__content']}\n          style={maxWidth !== null ? { maxWidth } : undefined}\n        >\n          {header && <Subhead weight=\"2\">{header}</Subhead>}\n          {text && <Subhead>{text}</Subhead>}\n        </div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","DefaultIcon","PopperArrow","RootComponent","Subhead","styles","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","withArrow","arrowCoords","arrowPlacement","getArrowRef","getRootRef","floatingStyle","ArrowIcon","text","header","maxWidth","restProps","baseClassName","div","ref","style","coords","placement","arrowClassName","Icon","className","undefined","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,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,QAAQH,MAAM,CAAC,iCAAiC;IAChDI,OAAOJ,MAAM,CAAC,gCAAgC;IAC9CK,OAAOL,MAAM,CAAC,gCAAgC;IAC9CM,WAAWN,MAAM,CAAC,oCAAoC;AACxD;AAiDA;;;;CAIC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,YAAY,IAAI,EAChBC,WAAW,EACXC,iBAAiB,KAAK,EACtBC,WAAW,EACXC,UAAU,EACVC,aAAa,EACbC,YAAYnB,WAAW,EACvBoB,IAAI,EACJC,MAAM,EACNC,WAAWjB,iBAAiB,EAC5B,GAAGkB,WACc;IACjB,qBACE,oBAACrB;QACE,GAAGqB,SAAS;QACbC,eAAezB,WACbK,MAAM,CAAC,cAAc,EACrBQ,eAAe,aAAaN,gBAAgB,CAACM,WAAW;qBAG1D,oBAACa;QAAIC,KAAKT;QAAYU,OAAOT;OAC1BL,2BACC,oBAACZ;QACC2B,QAAQd;QACRe,WAAWd;QACXe,gBAAgB1B,MAAM,CAAC,qBAAqB;QAC5Ca,YAAYD;QACZe,MAAMZ;sBAGV,oBAACM;QACCO,WAAW5B,MAAM,CAAC,uBAAuB;QACzCuB,OAAOL,aAAa,OAAO;YAAEA;QAAS,IAAIW;OAEzCZ,wBAAU,oBAAClB;QAAQ+B,QAAO;OAAKb,SAC/BD,sBAAQ,oBAACjB,eAASiB;AAK7B,EAAE"}

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

@@ -13,7 +13,6 @@
   padding: 9px 12px 10px;
   border-radius: var(--vkui--size_border_radius--regular);
   color: var(--vkui--color_text_primary);
-  max-width: 220px;
 }
 
 .TooltipBase__arrow {

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

@@ -2,17 +2,18 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { Typography } from '../Typography';
 import styles from './Caption.module.css';
+const stylesLevel = {
+    '1': styles['Caption--level-1'],
+    '2': styles['Caption--level-2'],
+    '3': styles['Caption--level-3']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Caption
  */ export const Caption = ({ className, level = '1', caps, Component = 'span', normalize = true, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Typography, {
         Component: Component,
         normalize: normalize,
-        className: classNames(className, caps && styles['Caption--caps'], {
-            '1': styles['Caption--level-1'],
-            '2': styles['Caption--level-2'],
-            '3': styles['Caption--level-3']
-        }[level]),
+        className: classNames(className, caps && styles['Caption--caps'], stylesLevel[level]),
         ...restProps
     });
 };

package/dist/cssm/components/Typography/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","Typography","styles","Caption","className","level","caps","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AACrE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,SAAS,EACTC,QAAQ,GAAG,EACXC,IAAI,EACJC,YAAY,MAAM,EAClBC,YAAY,IAAI,EAChB,GAAGC,WACU;IACb,qBACE,oBAACR;QACCM,WAAWA;QACXC,WAAWA;QACXJ,WAAWJ,WACTI,WACAE,QAAQJ,MAAM,CAAC,gBAAgB,EAC/B;YACE,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;QACjC,CAAC,CAACG,MAAM;QAET,GAAGI,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nconst stylesLevel = {\n  '1': styles['Caption--level-1'],\n  '2': styles['Caption--level-2'],\n  '3': styles['Caption--level-3'],\n};\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(className, caps && styles['Caption--caps'], stylesLevel[level])}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","Typography","styles","stylesLevel","Caption","className","level","caps","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AACrE,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,cAAc;IAClB,KAAKD,MAAM,CAAC,mBAAmB;IAC/B,KAAKA,MAAM,CAAC,mBAAmB;IAC/B,KAAKA,MAAM,CAAC,mBAAmB;AACjC;AAMA;;CAEC,GACD,OAAO,MAAME,UAAU,CAAC,EACtBC,SAAS,EACTC,QAAQ,GAAG,EACXC,IAAI,EACJC,YAAY,MAAM,EAClBC,YAAY,IAAI,EAChB,GAAGC,WACU;IACb,qBACE,oBAACT;QACCO,WAAWA;QACXC,WAAWA;QACXJ,WAAWL,WAAWK,WAAWE,QAAQL,MAAM,CAAC,gBAAgB,EAAEC,WAAW,CAACG,MAAM;QACnF,GAAGI,SAAS;;AAGnB,EAAE"}

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

@@ -4,6 +4,10 @@ import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { SizeType } from '../../../lib/adaptivity';
 import { Typography } from '../Typography';
 import styles from './Headline.module.css';
+const stylesLevel = {
+    '1': styles['Headline--level-1'],
+    '2': styles['Headline--level-2']
+};
 const sizeYClassNames = {
     none: styles['Headline--sizeY-none'],
     [SizeType.COMPACT]: styles['Headline--sizeY-compact']
@@ -16,10 +20,7 @@ const sizeYClassNames = {
         Component: Component,
         normalize: normalize,
         weight: weight,
-        className: classNames(className, styles['Headline'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], {
-            '1': styles['Headline--level-1'],
-            '2': styles['Headline--level-2']
-        }[level]),
+        className: classNames(className, sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], stylesLevel[level]),
         ...restProps
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  normalize = true,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      weight={weight}\n      className={classNames(\n        className,\n        styles['Headline'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        {\n          '1': styles['Headline--level-1'],\n          '2': styles['Headline--level-2'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","Typography","styles","sizeYClassNames","none","COMPACT","Headline","className","weight","level","Component","normalize","restProps","sizeY","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,UAAU,QAAyB,gBAAgB;AAC5D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAMA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAS,EACTC,SAAS,GAAG,EACZC,QAAQ,GAAG,EACXC,YAAY,IAAI,EAChBC,YAAY,IAAI,EAChB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGd;IAE3B,qBACE,oBAACE;QACCS,WAAWA;QACXC,WAAWA;QACXH,QAAQA;QACRD,WAAWT,WACTS,WACAL,MAAM,CAAC,WAAW,EAClBW,UAAUb,SAASc,OAAO,IAAIX,eAAe,CAACU,MAAM,EACpD;YACE,KAAKX,MAAM,CAAC,oBAAoB;YAChC,KAAKA,MAAM,CAAC,oBAAoB;QAClC,CAAC,CAACO,MAAM;QAET,GAAGG,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Headline.module.css';\n\nconst stylesLevel = {\n  '1': styles['Headline--level-1'],\n  '2': styles['Headline--level-2'],\n};\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  normalize = true,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      weight={weight}\n      className={classNames(\n        className,\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        stylesLevel[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","Typography","styles","stylesLevel","sizeYClassNames","none","COMPACT","Headline","className","weight","level","Component","normalize","restProps","sizeY","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,UAAU,QAAyB,gBAAgB;AAC5D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,cAAc;IAClB,KAAKD,MAAM,CAAC,oBAAoB;IAChC,KAAKA,MAAM,CAAC,oBAAoB;AAClC;AAEA,MAAME,kBAAkB;IACtBC,MAAMH,MAAM,CAAC,uBAAuB;IACpC,CAACF,SAASM,OAAO,CAAC,EAAEJ,MAAM,CAAC,0BAA0B;AACvD;AAMA;;CAEC,GACD,OAAO,MAAMK,WAAW,CAAC,EACvBC,SAAS,EACTC,SAAS,GAAG,EACZC,QAAQ,GAAG,EACXC,YAAY,IAAI,EAChBC,YAAY,IAAI,EAChB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGf;IAE3B,qBACE,oBAACE;QACCU,WAAWA;QACXC,WAAWA;QACXH,QAAQA;QACRD,WAAWV,WACTU,WACAM,UAAUd,SAASe,OAAO,IAAIX,eAAe,CAACU,MAAM,EACpDX,WAAW,CAACO,MAAM;QAEnB,GAAGG,SAAS;;AAGnB,EAAE"}

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

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { Typography } from '../Typography';
 import styles from './Title.module.css';
+const stylesLevel = {
+    '1': styles['Title--level-1'],
+    '2': styles['Title--level-2'],
+    '3': styles['Title--level-3']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Title
  */ export const Title = ({ className, level = '1', Component, normalize = true, ...restProps })=>{
@@ -11,11 +16,7 @@ import styles from './Title.module.css';
     return /*#__PURE__*/ React.createElement(Typography, {
         Component: Component,
         normalize: normalize,
-        className: classNames(className, {
-            '1': styles['Title--level-1'],
-            '2': styles['Title--level-2'],
-            '3': styles['Title--level-3']
-        }[level]),
+        className: classNames(className, stylesLevel[level]),
         ...restProps
     });
 };

package/dist/cssm/components/Typography/Title/Title.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Title/Title.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Title.module.css';\n\nexport interface TitleProps extends TypographyProps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title = ({\n  className,\n  level = '1',\n  Component,\n  normalize = true,\n  ...restProps\n}: TitleProps) => {\n  if (!Component) {\n    Component = ('h' + level) as React.ElementType;\n  }\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        {\n          '1': styles['Title--level-1'],\n          '2': styles['Title--level-2'],\n          '3': styles['Title--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","Typography","styles","Title","className","level","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,gBAAgB;AAC5D,OAAOC,YAAY,qBAAqB;AAMxC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,SAAS,EACTC,QAAQ,GAAG,EACXC,SAAS,EACTC,YAAY,IAAI,EAChB,GAAGC,WACQ;IACX,IAAI,CAACF,WAAW;QACdA,YAAa,MAAMD;IACrB;IAEA,qBACE,oBAACJ;QACCK,WAAWA;QACXC,WAAWA;QACXH,WAAWJ,WACTI,WACA;YACE,KAAKF,MAAM,CAAC,iBAAiB;YAC7B,KAAKA,MAAM,CAAC,iBAAiB;YAC7B,KAAKA,MAAM,CAAC,iBAAiB;QAC/B,CAAC,CAACG,MAAM;QAET,GAAGG,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Typography/Title/Title.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Title.module.css';\n\nconst stylesLevel = {\n  '1': styles['Title--level-1'],\n  '2': styles['Title--level-2'],\n  '3': styles['Title--level-3'],\n};\n\nexport interface TitleProps extends TypographyProps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title = ({\n  className,\n  level = '1',\n  Component,\n  normalize = true,\n  ...restProps\n}: TitleProps) => {\n  if (!Component) {\n    Component = ('h' + level) as React.ElementType;\n  }\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(className, stylesLevel[level])}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","Typography","styles","stylesLevel","Title","className","level","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,gBAAgB;AAC5D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,cAAc;IAClB,KAAKD,MAAM,CAAC,iBAAiB;IAC7B,KAAKA,MAAM,CAAC,iBAAiB;IAC7B,KAAKA,MAAM,CAAC,iBAAiB;AAC/B;AAMA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,SAAS,EACTC,QAAQ,GAAG,EACXC,SAAS,EACTC,YAAY,IAAI,EAChB,GAAGC,WACQ;IACX,IAAI,CAACF,WAAW;QACdA,YAAa,MAAMD;IACrB;IAEA,qBACE,oBAACL;QACCM,WAAWA;QACXC,WAAWA;QACXH,WAAWL,WAAWK,WAAWF,WAAW,CAACG,MAAM;QAClD,GAAGG,SAAS;;AAGnB,EAAE"}

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

@@ -13,4 +13,4 @@ export interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, H
      */
     normalize?: boolean;
 }
-export declare const Typography: ({ className, weight, Component, normalize, getRootRef, ...restProps }: TypographyProps) => React.JSX.Element;
+export declare const Typography: ({ weight, Component, normalize, ...restProps }: TypographyProps) => React.JSX.Element;

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

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Typography.module.css';
-export const Typography = ({ className, weight, Component = 'span', normalize, getRootRef, ...restProps })=>/*#__PURE__*/ React.createElement(Component, {
-        ...restProps,
-        ref: getRootRef,
-        className: classNames(className, normalize && styles['Typography--normalize'], weight && ({
-            '1': styles['Typography--weight-1'],
-            '2': styles['Typography--weight-2'],
-            '3': styles['Typography--weight-3']
-        })[weight])
+const stylesWeight = {
+    '1': styles['Typography--weight-1'],
+    '2': styles['Typography--weight-2'],
+    '3': styles['Typography--weight-3']
+};
+export const Typography = ({ weight, Component = 'span', normalize, ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
+        Component: Component,
+        baseClassName: classNames(styles['Typography'], normalize && styles['Typography--normalize'], weight && stylesWeight[weight]),
+        ...restProps
     });
 
 //# sourceMappingURL=Typography.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './Typography.module.css';\n\nexport interface HasCaps {\n  caps?: boolean;\n}\n\nexport interface TypographyProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent,\n    HasRootRef<HTMLElement> {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n  /**\n   * Убирает внешние отступы\n   */\n  normalize?: boolean;\n}\n\nexport const Typography = ({\n  className,\n  weight,\n  Component = 'span',\n  normalize,\n  getRootRef,\n  ...restProps\n}: TypographyProps) => (\n  <Component\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      className,\n      normalize && styles['Typography--normalize'],\n      weight &&\n        {\n          '1': styles['Typography--weight-1'],\n          '2': styles['Typography--weight-2'],\n          '3': styles['Typography--weight-3'],\n        }[weight],\n    )}\n  />\n);\n"],"names":["React","classNames","styles","Typography","className","weight","Component","normalize","getRootRef","restProps","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,0BAA0B;AAoB7C,OAAO,MAAMC,aAAa,CAAC,EACzBC,SAAS,EACTC,MAAM,EACNC,YAAY,MAAM,EAClBC,SAAS,EACTC,UAAU,EACV,GAAGC,WACa,iBAChB,oBAACH;QACE,GAAGG,SAAS;QACbC,KAAKF;QACLJ,WAAWH,WACTG,WACAG,aAAaL,MAAM,CAAC,wBAAwB,EAC5CG,UACE,CAAA;YACE,KAAKH,MAAM,CAAC,uBAAuB;YACnC,KAAKA,MAAM,CAAC,uBAAuB;YACnC,KAAKA,MAAM,CAAC,uBAAuB;QACrC,CAAA,CAAC,CAACG,OAAO;OAGf"}
+{"version":3,"sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Typography.module.css';\n\nconst stylesWeight = {\n  '1': styles['Typography--weight-1'],\n  '2': styles['Typography--weight-2'],\n  '3': styles['Typography--weight-3'],\n};\n\nexport interface HasCaps {\n  caps?: boolean;\n}\n\nexport interface TypographyProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent,\n    HasRootRef<HTMLElement> {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n  /**\n   * Убирает внешние отступы\n   */\n  normalize?: boolean;\n}\n\nexport const Typography = ({\n  weight,\n  Component = 'span',\n  normalize,\n  ...restProps\n}: TypographyProps) => (\n  <RootComponent\n    Component={Component}\n    baseClassName={classNames(\n      styles['Typography'],\n      normalize && styles['Typography--normalize'],\n      weight && stylesWeight[weight],\n    )}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","styles","stylesWeight","Typography","weight","Component","normalize","restProps","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,eAAe;IACnB,KAAKD,MAAM,CAAC,uBAAuB;IACnC,KAAKA,MAAM,CAAC,uBAAuB;IACnC,KAAKA,MAAM,CAAC,uBAAuB;AACrC;AAoBA,OAAO,MAAME,aAAa,CAAC,EACzBC,MAAM,EACNC,YAAY,MAAM,EAClBC,SAAS,EACT,GAAGC,WACa,iBAChB,oBAACP;QACCK,WAAWA;QACXG,eAAeT,WACbE,MAAM,CAAC,aAAa,EACpBK,aAAaL,MAAM,CAAC,wBAAwB,EAC5CG,UAAUF,YAAY,CAACE,OAAO;QAE/B,GAAGG,SAAS;OAEf"}

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

@@ -17,3 +17,9 @@
 .Typography--weight-3.Typography--weight-3.Typography--weight-3 {
   font-weight: var(--vkui--font_weight_accent3);
 }
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-type */
+
+.Typography b {
+  font-weight: var(--vkui--font_weight_accent1);
+}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface UsersStackProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Массив ссылок на фотографии
      */
@@ -35,4 +36,4 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/UsersStack
  */
-export declare const UsersStack: ({ photos, visibleCount, count, size, layout, children, className, direction: directionProp, ...restProps }: UsersStackProps) => React.JSX.Element;
+export declare const UsersStack: ({ photos, visibleCount, count, size, layout, children, direction: directionProp, ...restProps }: UsersStackProps) => React.JSX.Element;

package/dist/cssm/components/UsersStack/UsersStack.js

@@ -2,9 +2,20 @@ import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useId } from '../../hooks/useId';
 import { warnOnce } from '../../lib/warnOnce';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './UsersStack.module.css';
+const stylesSize = {
+    s: styles['UsersStack--size-s'],
+    m: styles['UsersStack--size-m'],
+    l: styles['UsersStack--size-l']
+};
+const stylesDirection = {
+    'row': styles['UsersStack--direction-row'],
+    'row-reverse': styles['UsersStack--direction-row-reverse'],
+    'column': styles['UsersStack--direction-column']
+};
 function PathElement({ photoSize, direction, ...props }) {
     switch(direction){
         case 'circle':
@@ -56,7 +67,7 @@ const photoSizes = {
 const warn = warnOnce('UsersStack');
 /**
  * @see https://vkcom.github.io/VKUI/#/UsersStack
- */ export const UsersStack = ({ photos = [], visibleCount = 3, count = Math.max(0, photos.length - visibleCount), size = 'm', layout, children, className, direction: directionProp = 'row', ...restProps })=>{
+ */ export const UsersStack = ({ photos = [], visibleCount = 3, count = Math.max(0, photos.length - visibleCount), size = 'm', layout, children, direction: directionProp = 'row', ...restProps })=>{
     const cmpId = useId();
     const canShowOthers = count > 0 && count < 100 && size !== 's';
     const CounterTypography = size === 'l' ? Footnote : Caption;
@@ -105,17 +116,9 @@ const warn = warnOnce('UsersStack');
         warn('Свойство "layout" будет удалено в v6. Используйте свойство "direction"');
     }
     const direction = layout && (layout === 'vertical' ? 'column' : 'row') || directionProp;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames('vkuiInternalUsersStack', styles['UsersStack'], {
-            s: styles['UsersStack--size-s'],
-            m: styles['UsersStack--size-m'],
-            l: styles['UsersStack--size-l']
-        }[size], {
-            'row': styles['UsersStack--direction-row'],
-            'row-reverse': styles['UsersStack--direction-row-reverse'],
-            'column': styles['UsersStack--direction-column']
-        }[direction], className)
+        baseClassName: classNames('vkuiInternalUsersStack', styles['UsersStack'], stylesSize[size], stylesDirection[direction])
     }, (photosElements.length > 0 || othersElement) && /*#__PURE__*/ React.createElement("div", {
         className: styles['UsersStack__photos'],
         "aria-hidden": true