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

package/dist/cjs/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadiusProp","borderRadius","style","className","restProps","ImageBase","Badge","ImageBadge","Overlay"],"mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAYAC,KAAK;eAALA;;;;;;;+DAlBU;yBACoD;0BAC1B;AAI1C,IAAMD,qBAAqB;AAY3B,IAAMC,QAAQ;6BACnBC,MAAAA,gCAAOF,kCACOG,aAAdC,cAAcD,mBAAAA,iBAAmB,MAAnBA,KACdE,eAAAA,OACAC,mBAAAA,WACGC;QAJHL;QACAE;QACAC;QACAC;;IAGA,IAAIF;IAEJ,OAAQD;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB;gBACAA,eAAe;YACjB;IACF;IAEA,qBACE,qBAACI,oBAAS,8CACJD;QACJL,MAAMA;QACNG,OAAO,4CAAKA;YAAOD,cAAAA;;QACnBE,WAAWA;;AAGjB;AAEAL,MAAMQ,KAAK,GAAGC,sBAAU;AAExBT,MAAMU,OAAO,GAAGH,oBAAS,CAACG,OAAO"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  const borderRadius = React.useMemo(\n    () => getBorderRadiusBySize(size, borderRadiusProp),\n    [size, borderRadiusProp],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["IMAGE_DEFAULT_SIZE","Image","getBorderRadiusBySize","size","borderRadius","borderRadiusProp","style","className","restProps","React","useMemo","ImageBase","Badge","ImageBadge","Overlay"],"mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAoEAC,KAAK;eAALA;;;;;;;+DA1EU;yBACoD;0BAC1B;AAI1C,IAAMD,qBAAqB;AASlC,IAAME,wBAAwB,SAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAKO,IAAMF,QAAQ;6BACnBE,MAAAA,gCAAOH,kCACOK,aAAdD,cAAcC,mBAAAA,iBAAmB,MAAnBA,KACdC,eAAAA,OACAC,mBAAAA,WACGC;QAJHL;QACAC;QACAE;QACAC;;IAGA,IAAMH,eAAeK,OAAMC,OAAO,CAChC;eAAMR,sBAAsBC,MAAME;OAClC;QAACF;QAAME;KAAiB;IAG1B,qBACE,qBAACM,oBAAS,8CACJH;QACJL,MAAMA;QACNG,OAAO,4CAAKA;YAAOF,cAAAA;;QACnBG,WAAWA;;AAGjB;AAEAN,MAAMW,KAAK,GAAGC,sBAAU;AAExBZ,MAAMa,OAAO,GAAGH,oBAAS,CAACG,OAAO"}

package/dist/cjs/components/ImageBase/ImageBase.d.ts

@@ -39,7 +39,7 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */
 export declare const ImageBase: {
-    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): React.JSX.Element;
-    Badge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
+    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): React.JSX.Element;
+    Badge: ({ background, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
     Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };

package/dist/cjs/components/ImageBase/ImageBase.js

@@ -32,13 +32,15 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _useExternRef = require("../../hooks/useExternRef");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _ImageBaseBadge = require("./ImageBaseBadge/ImageBaseBadge");
 var _ImageBaseOverlay = require("./ImageBaseOverlay/ImageBaseOverlay");
 var _context = require("./context");
 var _validators = require("./validators");
 var _helpers = require("./helpers");
 var ImageBase = function(_param) {
-    var alt = _param.alt, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, src = _param.src, srcSet = _param.srcSet, useMap = _param.useMap, getRef = _param.getRef, _param_size = _param.size, size = _param_size === void 0 ? 24 : _param_size, width = _param.width, height = _param.height, style = _param.style, className = _param.className, getRootRef = _param.getRootRef, _param_withBorder = _param.withBorder, withBorder = _param_withBorder === void 0 ? true : _param_withBorder, fallbackIconProp = _param["fallbackIcon"], children = _param.children, ariaLabel = _param["aria-label"], onClick = _param.onClick, onLoad = _param.onLoad, onError = _param.onError, restProps = _object_without_properties._(_param, [
+    var alt = _param.alt, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, src = _param.src, srcSet = _param.srcSet, useMap = _param.useMap, getRef = _param.getRef, _param_size = _param.size, size = _param_size === void 0 ? 24 : _param_size, width = _param.width, height = _param.height, style = _param.style, _param_withBorder = _param.withBorder, withBorder = _param_withBorder === void 0 ? true : _param_withBorder, fallbackIconProp = _param["fallbackIcon"], children = _param.children, ariaLabel = _param["aria-label"], onClick = _param.onClick, onLoad = _param.onLoad, onError = _param.onError, restProps = _object_without_properties._(_param, [
         "alt",
         "crossOrigin",
         "decoding",
@@ -53,8 +55,6 @@ var ImageBase = function(_param) {
         "width",
         "height",
         "style",
-        "className",
-        "getRootRef",
         "withBorder",
         "fallbackIcon",
         "children",
@@ -79,6 +79,9 @@ var ImageBase = function(_param) {
     }
     var handleImageLoad = function(event) {
         var _onLoad;
+        if (loaded) {
+            return;
+        }
         setLoaded(true);
         setFailed(false);
         (_onLoad = onLoad) === null || _onLoad === void 0 ? void 0 : _onLoad(event);
@@ -89,6 +92,21 @@ var ImageBase = function(_param) {
         setFailed(true);
         (_onError = onError) === null || _onError === void 0 ? void 0 : _onError(event);
     };
+    var imgRef = (0, _useExternRef.useExternRef)(getRef);
+    var isOnLoadStatusCheckedRef = _react.useRef(false);
+    _react.useEffect(function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {
+        if (isOnLoadStatusCheckedRef.current) {
+            return;
+        }
+        isOnLoadStatusCheckedRef.current = true;
+        if (imgRef.current && imgRef.current.complete && !loaded) {
+            var event = new Event("load");
+            imgRef.current.dispatchEvent(event);
+        }
+    }, [
+        imgRef,
+        loaded
+    ]);
     var sizeClassName = function() {
         switch(size){
             case 28:
@@ -108,18 +126,17 @@ var ImageBase = function(_param) {
         value: {
             size: size
         }
-    }, /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        ref: getRootRef,
+    }, /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         style: _object_spread_props._(_object_spread._({}, style), {
             width: size,
             height: size
         }),
-        className: (0, _vkjs.classNames)(className, "vkuiImageBase", sizeClassName, loaded && "vkuiImageBase--loaded"),
+        baseClassName: (0, _vkjs.classNames)("vkuiImageBase", sizeClassName, loaded && "vkuiImageBase--loaded"),
         role: hasSrc ? "img" : "presentation",
         "aria-label": ariaLabel,
         onClick: onClick
     }), hasSrc && /*#__PURE__*/ _react.createElement("img", {
-        ref: getRef,
+        ref: imgRef,
         alt: alt,
         className: "vkuiImageBase__img",
         crossOrigin: crossOrigin,
@@ -135,7 +152,7 @@ var ImageBase = function(_param) {
         onLoad: handleImageLoad,
         onError: handleImageError
     }), fallbackIcon && /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiImageBase__fallback")
+        className: "vkuiImageBase__fallback"
     }, fallbackIcon), children, withBorder && /*#__PURE__*/ _react.createElement("div", {
         "aria-hidden": true,
         className: "vkuiImageBase__border"

package/dist/cjs/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBaseContext","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","classNames","role","aria-label","img","aria-hidden","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <RootComponent\n        {...restProps}\n        style={{ ...style, width: size, height: size }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </RootComponent>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBaseContext","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","imgRef","useExternRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","sizeClassName","Provider","RootComponent","baseClassName","classNames","role","aria-label","img","ref","className","div","aria-hidden","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":";;;;;;;;;;;IAqBEA,+BAA+B;eAA/BA,wCAA+B;;IAC/BC,kCAAkC;eAAlCA,2CAAkC;;IAClCC,iCAAiC;eAAjCA,0CAAiC;;IAG1BC,gBAAgB;eAAhBA,yBAAgB;;IAqCZC,SAAS;eAATA;;;;;;;;+DA/DU;oBACI;4BACE;6BAEC;8BAC2B;gCACI;uBAC5B;0BAEkB;uBAe5C;AAuCA,IAAMA,YAAY;QACvBC,aAAAA,KACAC,qBAAAA,aACAC,kBAAAA,UACAC,iBAAAA,SACAC,wBAAAA,gBACAC,eAAAA,OACAC,aAAAA,KACAC,gBAAAA,QACAC,gBAAAA,QACAC,gBAAAA,6BACAC,MAAAA,gCAAO,kBACPC,eAAAA,OACAC,gBAAAA,QACAC,eAAAA,kCACAC,YAAAA,4CAAa,0BACb,AAAgBC,0BAAhB,iBACAC,kBAAAA,UACA,AAAcC,mBAAd,eACAC,iBAAAA,SACAC,gBAAAA,QACAC,iBAAAA,SACGC;QArBHrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACA;QACAE;QACA;QACAE;QACAC;QACAC;;IAGA,IAA4BE,qCAAAA,OAAMC,QAAQ,CAAC,YAApCC,SAAqBF,oBAAbG,YAAaH;IAC5B,IAA4BA,sCAAAA,OAAMC,QAAQ,CAAC,YAApCG,SAAqBJ,qBAAbK,YAAaL;IAE5B,IAAMM,SAAStB,OAAOC;IACtB,IAAMsB,uBAAuB,AAACH,CAAAA,UAAU,CAACE,MAAK,mBAAMN,OAAMQ,cAAc,CAACf;IAEzE,IAAMgB,eAAeF,uBAAuBd,mBAAmB;IAE/D,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CC,IAAAA,wBAAY,EAACzB;QACb,IAAIqB,cAAc;YAChBK,IAAAA,gCAAoB,EAAC1B,MAAM;gBAAE2B,MAAM;gBAAgBC,OAAOP;YAAa;QACzE;IACF;IAEA,IAAMQ,kBAAkB,SAACC;YAOvBrB;QANA,IAAIK,QAAQ;YACV;QACF;QAEAC,UAAU;QACVE,UAAU;SACVR,UAAAA,oBAAAA,8BAAAA,QAASqB;IACX;IAEA,IAAMC,mBAAmB,SAACD;YAGxBpB;QAFAK,UAAU;QACVE,UAAU;SACVP,WAAAA,qBAAAA,+BAAAA,SAAUoB;IACZ;IAEA,IAAME,SAASC,IAAAA,0BAAY,EAAClC;IAC5B,IAAMmC,2BAA2BtB,OAAMuB,MAAM,CAAC;IAC9CvB,OAAMwB,SAAS,CACb,SAASC;QACP,IAAIH,yBAAyBI,OAAO,EAAE;YACpC;QACF;QACAJ,yBAAyBI,OAAO,GAAG;QAEnC,IAAIN,OAAOM,OAAO,IAAIN,OAAOM,OAAO,CAACC,QAAQ,IAAI,CAACzB,QAAQ;YACxD,IAAMgB,QAAQ,IAAIU,MAAM;YACxBR,OAAOM,OAAO,CAACG,aAAa,CAACX;QAC/B;IACF,GACA;QAACE;QAAQlB;KAAO;IAGlB,IAAM4B,gBAAgB,AAAC;QACrB,OAAQ1C;YACN,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;QACJ;QAEA,OAAO;IACT;IAEA,qBACE,qBAACZ,yBAAgB,CAACuD,QAAQ;QAACf,OAAO;YAAE5B,MAAAA;QAAK;qBACvC,qBAAC4C,4BAAa,8CACRjC;QACJR,OAAO,4CAAKA;YAAOF,OAAOD;YAAME,QAAQF;;QACxC6C,eAAeC,IAAAA,gBAAU,mBAEvBJ,eACA5B;QAEFiC,MAAM7B,SAAS,QAAQ;QACvB8B,cAAYzC;QACZC,SAASA;QAERU,wBACC,qBAAC+B;QACCC,KAAKlB;QACL1C,KAAKA;QACL6D,SAAS;QACT5D,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,KAAKA;QACLC,QAAQA;QACRC,QAAQA;QACRG,OAAOA;QACPC,QAAQA;QACRO,QAAQoB;QACRnB,SAASqB;QAGZV,8BAAgB,qBAAC+B;QAAID,SAAS;OAAkC9B,eAChEf,UACAF,4BAAc,qBAACgD;QAAIC,eAAAA;QAAYF,SAAS;;AAIjD;AAEA9D,UAAUiE,KAAK,GAAGC,8BAAc;AAEhClE,UAAUmE,OAAO,GAAGC,kCAAgB"}

package/dist/cjs/components/ImageBase/ImageBaseBadge/ImageBaseBadge.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HasRootRef } from '../../../types';
 import type { ImageBaseExpectedIconProps } from '../types';
-export interface ImageBaseBadgeProps extends React.AriaAttributes {
+export interface ImageBaseBadgeProps extends React.AriaAttributes, HasRootRef<HTMLDivElement> {
     /**
      * Вид подложки под иконку.
      *
@@ -27,4 +28,4 @@ export interface ImageBaseBadgeProps extends React.AriaAttributes {
  *
  * > Не используйте при `size < 24`
  */
-export declare const ImageBaseBadge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
+export declare const ImageBaseBadge: ({ background, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;

package/dist/cjs/components/ImageBase/ImageBaseBadge/ImageBaseBadge.js

@@ -14,6 +14,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../../RootComponent/RootComponent");
 var _context = require("../context");
 var _validators = require("../validators");
 var backgroundStyles = {
@@ -21,24 +22,22 @@ var backgroundStyles = {
     shadow: "vkuiImageBaseBadge--background-shadow"
 };
 var ImageBaseBadge = function(_param) {
-    var _param_background = _param.background, background = _param_background === void 0 ? "shadow" : _param_background, children = _param.children, className = _param.className, restProps = _object_without_properties._(_param, [
-        "background",
-        "children",
-        "className"
+    var _param_background = _param.background, background = _param_background === void 0 ? "shadow" : _param_background, restProps = _object_without_properties._(_param, [
+        "background"
     ]);
     if (process.env.NODE_ENV === "development") {
-        if (children) {
+        if (restProps.children) {
             // eslint-disable-next-line react-hooks/rules-of-hooks
             var size = _react.useContext(_context.ImageBaseContext).size;
             (0, _validators.validateBadgeIcon)(size, {
                 name: "children",
-                value: children
+                value: restProps.children
             });
         }
     }
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiImageBaseBadge", backgroundStyles[background], className)
-    }), children);
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiImageBaseBadge", backgroundStyles[background])
+    }));
 };
 
 //# sourceMappingURL=ImageBaseBadge.js.map

package/dist/cjs/components/ImageBase/ImageBaseBadge/ImageBaseBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends React.AriaAttributes {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({\n  background = 'shadow',\n  children,\n  className,\n  ...restProps\n}: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["ImageBaseBadge","backgroundStyles","stroke","shadow","background","children","className","restProps","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateBadgeIcon","name","value","div","classNames"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;+DAxCU;oBACI;uBACM;0BAEC;AAGlC,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AA8BO,IAAMH,iBAAiB;mCAC5BI,YAAAA,4CAAa,8BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZ,sDAAsD;YACtD,IAAM,AAAEM,OAASC,OAAMC,UAAU,CAACC,yBAAgB,EAA1CH;YACRI,IAAAA,6BAAiB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOZ;YAAS;QAC9D;IACF;IAEA,qBACE,qBAACa,mDACKX;QACJD,WAAWa,IAAAA,gBAAU,wBAA2BlB,gBAAgB,CAACG,WAAW,EAAEE;QAE7ED;AAGP"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends React.AriaAttributes, HasRootRef<HTMLDivElement> {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (restProps.children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: restProps.children });\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}\n    />\n  );\n};\n"],"names":["ImageBaseBadge","backgroundStyles","stroke","shadow","background","restProps","process","env","NODE_ENV","children","size","React","useContext","ImageBaseContext","validateBadgeIcon","name","value","RootComponent","baseClassName","classNames"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;;+DA1CU;oBACI;6BAEG;uBACG;0BAEC;AAGlC,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AA8BO,IAAMH,iBAAiB;mCAAGI,YAAAA,4CAAa,8BAAaC;QAA1BD;;IAC/B,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIH,UAAUI,QAAQ,EAAE;YACtB,sDAAsD;YACtD,IAAM,AAAEC,OAASC,OAAMC,UAAU,CAACC,yBAAgB,EAA1CH;YACRI,IAAAA,6BAAiB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOX,UAAUI,QAAQ;YAAC;QACxE;IACF;IAEA,qBACE,qBAACQ,4BAAa,8CACRZ;QACJa,eAAeC,IAAAA,gBAAU,wBAA2BlB,gBAAgB,CAACG,WAAW;;AAGtF"}

package/dist/cjs/components/InfoRow/InfoRow.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     header: React.ReactNode;
 }
 /**

package/dist/cjs/components/InfoRow/InfoRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead","VisuallyHidden"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACkB;wBAChB;uBACD;8BACO;AAUxB,IAAMA,UAAU;QAAGC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,qBAACE,kBAAQ,8CACHD;QACJE,WAAU;QACVH,WAAWI,IAAAA,gBAAU,iBAAoBJ;QACzCK,QAAO;QAENC,IAAAA,kBAAY,EAACR,yBACZ,qBAACS,gBAAO;QAACJ,WAAU;QAASH,SAAS;OAClCF,sBACD,qBAACU,8BAAc,QAAC,UAGnBT;AACO"}
+{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead","VisuallyHidden"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACkB;wBAEhB;uBACD;8BACO;AAUxB,IAAMA,UAAU;QAAGC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,qBAACE,kBAAQ,8CACHD;QACJE,WAAU;QACVH,WAAWI,IAAAA,gBAAU,iBAAoBJ;QACzCK,QAAO;QAENC,IAAAA,kBAAY,EAACR,yBACZ,qBAACS,gBAAO;QAACJ,WAAU;QAASH,SAAS;OAClCF,sBACD,qBAACU,8BAAc,QAAC,UAGnBT;AACO"}

package/dist/cjs/components/InputLike/InputLike.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface InputLikeProps extends React.HTMLAttributes<HTMLSpanElement>, HasRootRef<HTMLSpanElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface InputLikeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     length: number;
     index: number;
     value?: string;
     onElementSelect?(index: number): void;
 }
 export declare const InputLike: {
-    ({ value, length, index, onElementSelect, onClick, onFocus, getRootRef, className, ...props }: InputLikeProps): React.JSX.Element;
+    ({ value, length, index, onElementSelect, onClick, onFocus, ...props }: InputLikeProps): React.JSX.Element;
     displayName: string;
 };

package/dist/cjs/components/InputLike/InputLike.js

@@ -12,9 +12,9 @@ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcar
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _callMultiple = require("../../lib/callMultiple");
 var _utils = require("../../lib/utils");
+var _RootComponent = require("../RootComponent/RootComponent");
 var MASK_SYMBOL = String.fromCharCode(0x2007);
 function getMaskElements(length) {
     var result = [];
@@ -27,15 +27,13 @@ function getMaskElements(length) {
     return result;
 }
 var InputLike = function(_param) {
-    var value = _param.value, length = _param.length, index = _param.index, onElementSelect = _param.onElementSelect, onClick = _param.onClick, onFocus = _param.onFocus, getRootRef = _param.getRootRef, className = _param.className, props = _object_without_properties._(_param, [
+    var value = _param.value, length = _param.length, index = _param.index, onElementSelect = _param.onElementSelect, onClick = _param.onClick, onFocus = _param.onFocus, props = _object_without_properties._(_param, [
         "value",
         "length",
         "index",
         "onElementSelect",
         "onClick",
-        "onFocus",
-        "getRootRef",
-        "className"
+        "onFocus"
     ]);
     var _value, _value1, _value2, _value3;
     var handleElementSelect = _react.useCallback(function(event) {
@@ -47,10 +45,10 @@ var InputLike = function(_param) {
         onElementSelect
     ]);
     var _value_length;
-    return /*#__PURE__*/ _react.createElement("span", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiInputLike", ((_value = value) === null || _value === void 0 ? void 0 : _value.length) === length && "vkuiInputLike--full", className),
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        Component: "span",
+        baseClassName: ((_value = value) === null || _value === void 0 ? void 0 : _value.length) === length ? "vkuiInputLike--full" : undefined,
         tabIndex: 0,
-        ref: getRootRef,
         onClick: (0, _callMultiple.callMultiple)(onClick, handleElementSelect),
         onFocus: (0, _callMultiple.callMultiple)(_utils.stopPropagation, onFocus)
     }, props), (_value1 = value) === null || _value1 === void 0 ? void 0 : _value1.slice(0, length - 1), ((_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.slice(length - 1)) && /*#__PURE__*/ _react.createElement("span", {

package/dist/cjs/components/InputLike/InputLike.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  getRootRef,\n  className,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <span\n      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles['InputLike--full'],\n        className,\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </span>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","React","useCallback","event","stopPropagation","classNames","tabIndex","ref","callMultiple","slice","displayName"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;+DA9BU;oBACI;4BACE;qBACG;AAahC,IAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,IAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,qBAACC;YAAKC,KAAKH;YAAOI,SAAS;WACxBV;IAGP;IACA,OAAOK;AACT;AAEO,IAAMN,YAAY;QACvBY,eAAAA,OACAP,gBAAAA,QACAE,eAAAA,OACAM,yBAAAA,iBACAC,iBAAAA,SACAC,iBAAAA,SACAC,oBAAAA,YACAL,mBAAAA,WACGM;QARHL;QACAP;QACAE;QACAM;QACAC;QACAC;QACAC;QACAL;;QAeMC,QASDA,SACAA,SAK0BA;IA3B/B,IAAMM,sBAAsBC,OAAMC,WAAW,CAC3C,SAACC;YAECR;QADAS,IAAAA,sBAAe,EAACD;SAChBR,mBAAAA,6BAAAA,uCAAAA,iBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;QAsBKD;IAnB/B,qBACE,qBAACH;QACCE,WAAWY,IAAAA,gBAAU,mBAEnBX,EAAAA,SAAAA,mBAAAA,6BAAAA,OAAOP,MAAM,MAAKA,iCAClBM;QAEFa,UAAU;QACVC,KAAKT;QACLF,SAASY,IAAAA,0BAAY,EAACZ,SAASI;QAC/BH,SAASW,IAAAA,0BAAY,EAACJ,sBAAe,EAAEP;OACnCE,SAEHL,UAAAA,mBAAAA,8BAAAA,QAAOe,KAAK,CAAC,GAAGtB,SAAS,IACzBO,EAAAA,UAAAA,mBAAAA,8BAAAA,QAAOe,KAAK,CAACtB,SAAS,qBACrB,qBAACI;QAAKC,KAAKH;QAAOI,SAAS;OACxBC,MAAMe,KAAK,CAACtB,SAAS,KAGzBD,gBAAgBC,SAAUO,CAAAA,CAAAA,iBAAAA,UAAAA,mBAAAA,8BAAAA,QAAOP,MAAM,cAAbO,2BAAAA,gBAAiB,CAAA;AAGlD;AAEAZ,UAAU4B,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <RootComponent\n      Component=\"span\"\n      baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n      tabIndex={0}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </RootComponent>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","value","onElementSelect","onClick","onFocus","props","handleElementSelect","React","useCallback","event","stopPropagation","RootComponent","Component","baseClassName","undefined","tabIndex","callMultiple","slice","displayName"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;+DA5BU;4BACM;qBACG;6BAEF;AAU9B,IAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,IAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,qBAACC;YAAKC,KAAKH;YAAOI,SAAS;WACxBV;IAGP;IACA,OAAOK;AACT;AAEO,IAAMN,YAAY;QACvBY,eAAAA,OACAP,gBAAAA,QACAE,eAAAA,OACAM,yBAAAA,iBACAC,iBAAAA,SACAC,iBAAAA,SACGC;QANHJ;QACAP;QACAE;QACAM;QACAC;QACAC;;QAcmBH,QAMdA,SACAA,SAK0BA;IAvB/B,IAAMK,sBAAsBC,OAAMC,WAAW,CAC3C,SAACC;YAECP;QADAQ,IAAAA,sBAAe,EAACD;SAChBP,mBAAAA,6BAAAA,uCAAAA,iBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;QAkBKD;IAf/B,qBACE,qBAACU,4BAAa;QACZC,WAAU;QACVC,eAAeZ,EAAAA,SAAAA,mBAAAA,6BAAAA,OAAOP,MAAM,MAAKA,iCAAqCoB;QACtEC,UAAU;QACVZ,SAASa,IAAAA,0BAAY,EAACb,SAASG;QAC/BF,SAASY,IAAAA,0BAAY,EAACN,sBAAe,EAAEN;OACnCC,SAEHJ,UAAAA,mBAAAA,8BAAAA,QAAOgB,KAAK,CAAC,GAAGvB,SAAS,IACzBO,EAAAA,UAAAA,mBAAAA,8BAAAA,QAAOgB,KAAK,CAACvB,SAAS,qBACrB,qBAACI;QAAKC,KAAKH;QAAOI,SAAS;OACxBC,MAAMgB,KAAK,CAACvB,SAAS,KAGzBD,gBAAgBC,SAAUO,CAAAA,CAAAA,iBAAAA,UAAAA,mBAAAA,8BAAAA,QAAOP,MAAM,cAAbO,2BAAAA,gBAAiB,CAAA;AAGlD;AAEAZ,UAAU6B,WAAW,GAAG"}

package/dist/cjs/components/List/List.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-export type ListProps = React.HTMLAttributes<HTMLDivElement>;
+import { HTMLAttributesWithRootRef } from '../../types';
+export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export declare const List: ({ children, className, ...restProps }: ListProps) => React.JSX.Element;
+export declare const List: ({ children, ...restProps }: ListProps) => React.JSX.Element;

package/dist/cjs/components/List/List.js

@@ -15,17 +15,17 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _ListContext = require("./ListContext");
 var List = function(_param) {
-    var children = _param.children, className = _param.className, restProps = _object_without_properties._(_param, [
-        "children",
-        "className"
+    var children = _param.children, restProps = _object_without_properties._(_param, [
+        "children"
     ]);
     var _React_useState = _sliced_to_array._(_react.useState(false), 2), isDragging = _React_useState[0], toggleDrag = _React_useState[1];
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         role: "list"
     }, restProps), {
-        className: (0, _vkjs.classNames)("vkuiList", isDragging && "vkuiInternalList--dragging", className)
+        baseClassName: (0, _vkjs.classNames)("vkuiList", isDragging && "vkuiInternalList--dragging")
     }), /*#__PURE__*/ _react.createElement(_ListContext.ListContext.Provider, {
         value: _react.useMemo(function() {
             return {

package/dist/cjs/components/List/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, className, ...restProps }: ListProps) => {\n  const [isDragging, toggleDrag] = React.useState(false);\n\n  return (\n    <div\n      role=\"list\"\n      {...restProps}\n      className={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging', className)}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </div>\n  );\n};\n"],"names":["List","children","className","restProps","React","useState","isDragging","toggleDrag","div","role","classNames","ListContext","Provider","value","useMemo"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;+DAVU;oBACI;2BACC;AAQrB,IAAMA,OAAO;QAAGC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IAC/B,IAAiCE,qCAAAA,OAAMC,QAAQ,CAAC,YAAzCC,aAA0BF,oBAAdG,aAAcH;IAEjC,qBACE,qBAACI;QACCC,MAAK;OACDN;QACJD,WAAWQ,IAAAA,gBAAU,cAAiBJ,cAAc,8BAA8BJ;sBAElF,qBAACS,wBAAW,CAACC,QAAQ;QAACC,OAAOT,OAAMU,OAAO,CAAC;mBAAO;gBAAEP,YAAAA;YAAW;WAAI,EAAE;OAClEN;AAIT"}
+{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, ...restProps }: ListProps) => {\n  const [isDragging, toggleDrag] = React.useState(false);\n\n  return (\n    <RootComponent\n      role=\"list\"\n      {...restProps}\n      baseClassName={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging')}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["List","children","restProps","React","useState","isDragging","toggleDrag","RootComponent","role","baseClassName","classNames","ListContext","Provider","value","useMemo"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;;+DAZU;oBACI;6BAEG;2BACF;AAQrB,IAAMA,OAAO;QAAGC,kBAAAA,UAAaC;QAAbD;;IACrB,IAAiCE,qCAAAA,OAAMC,QAAQ,CAAC,YAAzCC,aAA0BF,oBAAdG,aAAcH;IAEjC,qBACE,qBAACI,4BAAa;QACZC,MAAK;OACDN;QACJO,eAAeC,IAAAA,gBAAU,cAAiBL,cAAc;sBAExD,qBAACM,wBAAW,CAACC,QAAQ;QAACC,OAAOV,OAAMW,OAAO,CAAC;mBAAO;gBAAER,YAAAA;YAAW;WAAI,EAAE;OAClEL;AAIT"}

package/dist/cjs/components/MiniInfoCell/MiniInfoCell.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Иконка слева.<br />
      * Рекомендуется использовать иконки размера 20.

package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js

@@ -15,8 +15,19 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Tappable = require("../Tappable/Tappable");
 var _Paragraph = require("../Typography/Paragraph/Paragraph");
+var stylesMode = {
+    add: "vkuiMiniInfoCell--mode-add",
+    accent: "vkuiMiniInfoCell--mode-accent",
+    more: "vkuiMiniInfoCell--mode-more"
+};
+var stylesTextWrap = {
+    nowrap: "vkuiMiniInfoCell--textWrap-nowrap",
+    full: "vkuiMiniInfoCell--textWrap-full",
+    short: "vkuiMiniInfoCell--textWrap-short"
+};
 var MiniInfoCell = function(_param) {
     var before = _param.before, after = _param.after, children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "base" : _param_mode, _param_textWrap = _param.textWrap, textWrap = _param_textWrap === void 0 ? "nowrap" : _param_textWrap, _param_expandable = _param.expandable, expandable = _param_expandable === void 0 ? false : _param_expandable, className = _param.className, restProps = _object_without_properties._(_param, [
         "before",
@@ -27,16 +38,8 @@ var MiniInfoCell = function(_param) {
         "expandable",
         "className"
     ]);
-    var cellClasses = (0, _vkjs.classNames)("vkuiMiniInfoCell", {
-        nowrap: "vkuiMiniInfoCell--textWrap-nowrap",
-        full: "vkuiMiniInfoCell--textWrap-full",
-        short: "vkuiMiniInfoCell--textWrap-short"
-    }[textWrap], mode !== "base" && ({
-        add: "vkuiMiniInfoCell--mode-add",
-        accent: "vkuiMiniInfoCell--mode-accent",
-        more: "vkuiMiniInfoCell--mode-more"
-    })[mode], className);
-    var cellContent = /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("span", {
+    var cellClasses = (0, _vkjs.classNames)("vkuiMiniInfoCell", stylesTextWrap[textWrap], mode !== "base" && stylesMode[mode], className);
+    var cellContent = /*#__PURE__*/ _react.createElement(_react.Fragment, null, (0, _vkjs.hasReactNode)(before) && /*#__PURE__*/ _react.createElement("span", {
         className: "vkuiMiniInfoCell__before"
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiMiniInfoCell__middle"
@@ -51,8 +54,8 @@ var MiniInfoCell = function(_param) {
         role: "button"
     }, restProps), {
         className: cellClasses
-    }), cellContent) : /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: cellClasses
+    }), cellContent) : /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: cellClasses
     }), cellContent);
 };
 

package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: 'base' | 'accent' | 'add' | 'more';\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: 'nowrap' | 'short' | 'full';\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = 'base',\n  textWrap = 'nowrap',\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    styles['MiniInfoCell'],\n    {\n      nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n      full: styles['MiniInfoCell--textWrap-full'],\n      short: styles['MiniInfoCell--textWrap-short'],\n    }[textWrap],\n    mode !== 'base' &&\n      {\n        add: styles['MiniInfoCell--mode-add'],\n        accent: styles['MiniInfoCell--mode-accent'],\n        more: styles['MiniInfoCell--mode-more'],\n      }[mode],\n    className,\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span className={styles['MiniInfoCell__before']}>{before}</span>\n      <div className={styles['MiniInfoCell__middle']}>\n        <Paragraph\n          className={styles['MiniInfoCell__content']}\n          weight={mode === 'more' ? '2' : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable Component=\"div\" role=\"button\" {...restProps} className={cellClasses}>\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"names":["MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","nowrap","full","short","add","accent","more","cellContent","React","Fragment","span","div","Paragraph","weight","undefined","Icon16Chevron","hasReactNode","onClick","Tappable","Component","role"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;+DAhDU;qBACO;oBACW;wBAChB;yBACC;AA4CnB,IAAMA,eAAe;QAC1BC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,+CACPC,UAAAA,wCAAW,uDACXC,YAAAA,4CAAa,2BACbC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,cAAcC,IAAAA,gBAAU,sBAE5B;QACEC,MAAM;QACNC,IAAI;QACJC,KAAK;IACP,CAAC,CAACR,SAAS,EACXD,SAAS,UACP,CAAA;QACEU,GAAG;QACHC,MAAM;QACNC,IAAI;IACN,CAAA,CAAC,CAACZ,KAAK,EACTG;IAGF,IAAMU,4BACJ,qBAACC,OAAMC,QAAQ,sBACb,qBAACC;QAAKb,SAAS;OAAmCN,uBAClD,qBAACoB;QAAId,SAAS;qBACZ,qBAACe,oBAAS;QACRf,SAAS;QACTgB,QAAQnB,SAAS,SAAS,MAAMoB;OAE/BrB,WAEFG,4BAAc,qBAACmB,oBAAa,UAE9BC,IAAAA,kBAAY,EAACxB,wBAAU,qBAACkB;QAAKb,SAAS;OAAkCL;IAI7E,OAAOM,UAAUmB,OAAO,iBACtB,qBAACC,kBAAQ;QAACC,WAAU;QAAMC,MAAK;OAAatB;QAAWD,WAAWE;QAC/DQ,6BAGH,qBAACI,mDAAQb;QAAWD,WAAWE;QAC5BQ;AAGP"}
+{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nconst stylesMode = {\n  add: styles['MiniInfoCell--mode-add'],\n  accent: styles['MiniInfoCell--mode-accent'],\n  more: styles['MiniInfoCell--mode-more'],\n};\n\nconst stylesTextWrap = {\n  nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n  full: styles['MiniInfoCell--textWrap-full'],\n  short: styles['MiniInfoCell--textWrap-short'],\n};\n\nexport interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: 'base' | 'accent' | 'add' | 'more';\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: 'nowrap' | 'short' | 'full';\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = 'base',\n  textWrap = 'nowrap',\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    styles['MiniInfoCell'],\n    stylesTextWrap[textWrap],\n    mode !== 'base' && stylesMode[mode],\n    className,\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      {hasReactNode(before) && <span className={styles['MiniInfoCell__before']}>{before}</span>}\n      <div className={styles['MiniInfoCell__middle']}>\n        <Paragraph\n          className={styles['MiniInfoCell__content']}\n          weight={mode === 'more' ? '2' : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable Component=\"div\" role=\"button\" {...restProps} className={cellClasses}>\n      {cellContent}\n    </Tappable>\n  ) : (\n    <RootComponent {...restProps} baseClassName={cellClasses}>\n      {cellContent}\n    </RootComponent>\n  );\n};\n"],"names":["MiniInfoCell","stylesMode","add","accent","more","stylesTextWrap","nowrap","full","short","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","cellContent","React","Fragment","hasReactNode","span","div","Paragraph","weight","undefined","Icon16Chevron","onClick","Tappable","Component","role","RootComponent","baseClassName"],"mappings":";;;;+BA8DaA;;;eAAAA;;;;;;;+DA9DU;qBACO;oBACW;6BAEX;wBACL;yBACC;AAG1B,IAAMC,aAAa;IACjBC,GAAG;IACHC,MAAM;IACNC,IAAI;AACN;AAEA,IAAMC,iBAAiB;IACrBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AA2CO,IAAMR,eAAe;QAC1BS,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,+CACPC,UAAAA,wCAAW,uDACXC,YAAAA,4CAAa,2BACbC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,cAAcC,IAAAA,gBAAU,sBAE5Bb,cAAc,CAACQ,SAAS,EACxBD,SAAS,UAAUX,UAAU,CAACW,KAAK,EACnCG;IAGF,IAAMI,4BACJ,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAACb,yBAAW,qBAACc;QAAKR,SAAS;OAAmCN,uBAC3E,qBAACe;QAAIT,SAAS;qBACZ,qBAACU,oBAAS;QACRV,SAAS;QACTW,QAAQd,SAAS,SAAS,MAAMe;OAE/BhB,WAEFG,4BAAc,qBAACc,oBAAa,UAE9BN,IAAAA,kBAAY,EAACZ,wBAAU,qBAACa;QAAKR,SAAS;OAAkCL;IAI7E,OAAOM,UAAUa,OAAO,iBACtB,qBAACC,kBAAQ;QAACC,WAAU;QAAMC,MAAK;OAAahB;QAAWD,WAAWE;QAC/DE,6BAGH,qBAACc,4BAAa,8CAAKjB;QAAWkB,eAAejB;QAC1CE;AAGP"}

package/dist/cjs/components/ModalCard/ModalCard.d.ts

@@ -6,4 +6,4 @@ export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
-export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, className, size, getRootRef, ...restProps }: ModalCardProps) => React.JSX.Element;
+export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, size, ...restProps }: ModalCardProps) => React.JSX.Element;

package/dist/cjs/components/ModalCard/ModalCard.js

@@ -21,6 +21,7 @@ var _warnOnce = require("../../lib/warnOnce");
 var _ModalCardBase = require("../ModalCardBase/ModalCardBase");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _types = require("../ModalRoot/types");
+var _RootComponent = require("../RootComponent/RootComponent");
 var platformClassNames = {
     ios: "vkuiModalCard--ios",
     android: "vkuiModalCard--android",
@@ -28,7 +29,7 @@ var platformClassNames = {
 };
 var warn = (0, _warnOnce.warnOnce)("ModalCard");
 var ModalCard = function(_param) {
-    var icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, nav = _param.nav, id = _param.id, className = _param.className, size = _param.size, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
+    var icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, nav = _param.nav, id = _param.id, size = _param.size, restProps = _object_without_properties._(_param, [
         "icon",
         "header",
         "subheader",
@@ -37,9 +38,7 @@ var ModalCard = function(_param) {
         "onClose",
         "nav",
         "id",
-        "className",
-        "size",
-        "getRootRef"
+        "size"
     ]);
     var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
     var platform = (0, _usePlatform.usePlatform)();
@@ -48,10 +47,9 @@ var ModalCard = function(_param) {
         nav: nav,
         id: id
     }, warn), _types.ModalType.CARD).refs;
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        ref: getRootRef,
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         id: id,
-        className: (0, _vkjs.classNames)("vkuiModalCard", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCard--desktop", className)
+        baseClassName: (0, _vkjs.classNames)("vkuiModalCard", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCard--desktop")
     }), /*#__PURE__*/ _react.createElement(_ModalCardBase.ModalCardBase, {
         className: "vkuiModalCard__in",
         getRootRef: refs.innerElement,

package/dist/cjs/components/ModalCard/ModalCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  size,\n  getRootRef,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","ModalType","CARD","div","ref","classNames","hasOwnProperty","ModalCardBase","innerElement"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;+DAxBU;oBACI;+CACqB;2BACpB;wBACS;wBACZ;6BACyB;gCACC;qBACzB;AAG1B,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY;QACvBO,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,mBAAAA,WACAC,cAAAA,MACAC,oBAAAA,YACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,eAAeC,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEC,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAEhB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOyB,gBAAS,CAACC,IAAI,EAArEJ;IAER,qBACE,qBAACK,mDACKd;QACJe,KAAKhB;QACLH,IAAIA;QACJC,WAAWmB,IAAAA,gBAAU,mBAEnBjC,mBAAmBkC,cAAc,CAACd,YAC9BpB,kBAAkB,CAACoB,SAAS,GAC5BpB,mBAAmBE,OAAO,EAC9BgB,uCACAJ;sBAGF,qBAACqB,4BAAa;QACZrB,SAAS;QACTE,YAAYU,KAAKU,YAAY;QAC7B9B,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWW,aAAaX,OAAO;QACxCI,MAAMA;OAELN;AAIT"}
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  size,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <RootComponent\n      {...restProps}\n      id={id}\n      baseClassName={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </RootComponent>\n  );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","subheader","children","actions","onClose","nav","id","size","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","ModalType","CARD","RootComponent","baseClassName","classNames","hasOwnProperty","ModalCardBase","className","getRootRef","innerElement"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;+DAzBU;oBACI;+CACqB;2BACpB;wBACS;wBACZ;6BACyB;gCACC;qBACzB;6BACI;AAG9B,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY;QACvBO,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,cAAAA,MACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,eAAeC,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEC,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAEd,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOuB,gBAAS,CAACC,IAAI,EAArEJ;IAER,qBACE,qBAACK,4BAAa,8CACRd;QACJF,IAAIA;QACJiB,eAAeC,IAAAA,gBAAU,mBAEvB/B,mBAAmBgC,cAAc,CAACd,YAC9BlB,kBAAkB,CAACkB,SAAS,GAC5BlB,mBAAmBE,OAAO,EAC9Bc;sBAGF,qBAACiB,4BAAa;QACZC,SAAS;QACTC,YAAYX,KAAKY,YAAY;QAC7B9B,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWS,aAAaT,OAAO;QACxCG,MAAMA;OAELL;AAIT"}

package/dist/cjs/components/ModalCardBase/ModalCardBase.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface ModalCardBaseProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface ModalCardBaseProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Иконка.
      *
@@ -40,4 +40,4 @@ export interface ModalCardBaseProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
  */
-export declare const ModalCardBase: ({ getRootRef, icon, header, subheader, children, actions, onClose, dismissLabel, className, style, size: sizeProp, ...restProps }: ModalCardBaseProps) => React.JSX.Element;
+export declare const ModalCardBase: ({ icon, header, subheader, children, actions, onClose, dismissLabel, style, size: sizeProp, ...restProps }: ModalCardBaseProps) => React.JSX.Element;