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

package/dist/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":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadiusProp","borderRadius","style","className","restProps","Badge","Overlay"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,IAAMC,qBAAqB,GAAG;AASrC;;CAEC,GACD,OAAO,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,oBAACN,mDACKS;QACJL,MAAMA;QACNG,OAAO,wCAAKA;YAAOD,cAAAA;;QACnBE,WAAWA;;AAGjB,EAAE;AAEFL,MAAMO,KAAK,GAAGT;AAEdE,MAAMQ,OAAO,GAAGX,UAAUW,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":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","Image","borderRadiusProp","style","className","restProps","useMemo","Badge","Overlay"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,IAAMC,qBAAqB,GAAG;AASrC,IAAMC,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;AAEA;;CAEC,GACD,OAAO,IAAME,QAAQ;6BACnBF,MAAAA,gCAAOF,kCACOK,aAAdF,cAAcE,mBAAAA,iBAAmB,MAAnBA,KACdC,eAAAA,OACAC,mBAAAA,WACGC;QAJHN;QACAC;QACAG;QACAC;;IAGA,IAAMJ,eAAeN,MAAMY,OAAO,CAChC;eAAMR,sBAAsBC,MAAMG;OAClC;QAACH;QAAMG;KAAiB;IAG1B,qBACE,oBAACP,mDACKU;QACJN,MAAMA;QACNI,OAAO,wCAAKA;YAAOH,cAAAA;;QACnBI,WAAWA;;AAGjB,EAAE;AAEFH,MAAMM,KAAK,GAAGX;AAEdK,MAAMO,OAAO,GAAGb,UAAUa,OAAO"}

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

@@ -4,6 +4,8 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useExternRef } from "../../hooks/useExternRef";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { ImageBaseBadge } from "./ImageBaseBadge/ImageBaseBadge";
 import { ImageBaseOverlay } from "./ImageBaseOverlay/ImageBaseOverlay";
 import { ImageBaseContext } from "./context";
@@ -13,7 +15,7 @@ export { ImageBaseContext };
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */ export 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",
@@ -28,8 +30,6 @@ export { ImageBaseContext };
         "width",
         "height",
         "style",
-        "className",
-        "getRootRef",
         "withBorder",
         "fallbackIcon",
         "children",
@@ -54,6 +54,9 @@ export { ImageBaseContext };
     }
     var handleImageLoad = function(event) {
         var _onLoad;
+        if (loaded) {
+            return;
+        }
         setLoaded(true);
         setFailed(false);
         (_onLoad = onLoad) === null || _onLoad === void 0 ? void 0 : _onLoad(event);
@@ -64,6 +67,21 @@ export { ImageBaseContext };
         setFailed(true);
         (_onError = onError) === null || _onError === void 0 ? void 0 : _onError(event);
     };
+    var imgRef = 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:
@@ -83,18 +101,17 @@ export { ImageBaseContext };
         value: {
             size: size
         }
-    }, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
+    }, /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         style: _object_spread_props(_object_spread({}, style), {
             width: size,
             height: size
         }),
-        className: classNames(className, "vkuiImageBase", sizeClassName, loaded && "vkuiImageBase--loaded"),
+        baseClassName: 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,
@@ -110,7 +127,7 @@ export { ImageBaseContext };
         onLoad: handleImageLoad,
         onError: handleImageError
     }), fallbackIcon && /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiImageBase__fallback")
+        className: "vkuiImageBase__fallback"
     }, fallbackIcon), children, withBorder && /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
         className: "vkuiImageBase__border"

package/dist/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":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","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","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"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":["React","classNames","useExternRef","RootComponent","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","sizeClassName","Provider","baseClassName","role","aria-label","img","ref","className","div","aria-hidden","Badge","Overlay"],"mappings":"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"}

package/dist/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/components/ImageBase/ImageBaseBadge/ImageBaseBadge.js

@@ -3,6 +3,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../../RootComponent/RootComponent";
 import { ImageBaseContext } from "../context";
 import { validateBadgeIcon } from "../validators";
 var backgroundStyles = {
@@ -14,24 +15,22 @@ var backgroundStyles = {
  *
  * > Не используйте при `size < 24`
  */ export 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(ImageBaseContext).size;
             validateBadgeIcon(size, {
                 name: "children",
-                value: children
+                value: restProps.children
             });
         }
     }
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiImageBaseBadge", backgroundStyles[background], className)
-    }), children);
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiImageBaseBadge", backgroundStyles[background])
+    }));
 };
 
 //# sourceMappingURL=ImageBaseBadge.js.map

package/dist/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":["React","classNames","ImageBaseContext","validateBadgeIcon","backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","size","useContext","name","value","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,iBAAiB,QAAQ,gBAAgB;AAGlD,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AAyBA;;;;CAIC,GACD,OAAO,IAAMC,iBAAiB;mCAC5BC,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,OAASf,MAAMgB,UAAU,CAACd,kBAA1Ba;YACRZ,kBAAkBY,MAAM;gBAAEE,MAAM;gBAAYC,OAAOT;YAAS;QAC9D;IACF;IAEA,qBACE,oBAACU,+CACKR;QACJD,WAAWT,iCAAqCG,gBAAgB,CAACI,WAAW,EAAEE;QAE7ED;AAGP,EAAE"}
+{"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":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","process","env","NODE_ENV","children","size","useContext","name","value","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,iBAAiB,QAAQ,gBAAgB;AAGlD,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AAyBA;;;;CAIC,GACD,OAAO,IAAMC,iBAAiB;mCAAGC,YAAAA,4CAAa,8BAAaC;QAA1BD;;IAC/B,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIH,UAAUI,QAAQ,EAAE;YACtB,sDAAsD;YACtD,IAAM,AAAEC,OAASf,MAAMgB,UAAU,CAACb,kBAA1BY;YACRX,kBAAkBW,MAAM;gBAAEE,MAAM;gBAAYC,OAAOR,UAAUI,QAAQ;YAAC;QACxE;IACF;IAEA,qBACE,oBAACZ,uDACKQ;QACJS,eAAelB,iCAAqCI,gBAAgB,CAACI,WAAW;;AAGtF,EAAE"}

package/dist/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/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":["React","classNames","hasReactNode","Headline","Subhead","VisuallyHidden","InfoRow","header","children","className","restProps","Component","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAOlE;;CAEC,GACD,OAAO,IAAMC,UAAU;QAAGC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,oBAACN,kDACKO;QACJC,WAAU;QACVF,WAAWR,0BAA8BQ;QACzCG,QAAO;QAENV,aAAaK,yBACZ,oBAACH;QAAQO,WAAU;QAASF,SAAS;OAClCF,sBACD,oBAACF,sBAAe,UAGnBG;AACO,EACV"}
+{"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":["React","classNames","hasReactNode","Headline","Subhead","VisuallyHidden","InfoRow","header","children","className","restProps","Component","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAOlE;;CAEC,GACD,OAAO,IAAMC,UAAU;QAAGC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,oBAACN,kDACKO;QACJC,WAAU;QACVF,WAAWR,0BAA8BQ;QACzCG,QAAO;QAENV,aAAaK,yBACZ,oBAACH;QAAQO,WAAU;QAASF,SAAS;OAClCF,sBACD,oBAACF,sBAAe,UAGnBG;AACO,EACV"}

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

@@ -1,9 +1,9 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { callMultiple } from "../../lib/callMultiple";
 import { stopPropagation } from "../../lib/utils";
+import { RootComponent } from "../RootComponent/RootComponent";
 var MASK_SYMBOL = String.fromCharCode(0x2007);
 function getMaskElements(length) {
     var result = [];
@@ -16,15 +16,13 @@ function getMaskElements(length) {
     return result;
 }
 export 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) {
@@ -36,10 +34,10 @@ export var InputLike = function(_param) {
         onElementSelect
     ]);
     var _value_length;
-    return /*#__PURE__*/ React.createElement("span", _object_spread({
-        className: classNames("vkuiInputLike", ((_value = value) === null || _value === void 0 ? void 0 : _value.length) === length && "vkuiInputLike--full", className),
+    return /*#__PURE__*/ React.createElement(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: callMultiple(onClick, handleElementSelect),
         onFocus: callMultiple(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/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":["React","classNames","callMultiple","stopPropagation","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","tabIndex","ref","slice","displayName"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAalD,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,oBAACC;YAAKC,KAAKH;YAAOI,SAAS;WACxBV;IAGP;IACA,OAAOK;AACT;AAEA,OAAO,IAAMM,YAAY;QACvBC,eAAAA,OACAR,gBAAAA,QACAE,eAAAA,OACAO,yBAAAA,iBACAC,iBAAAA,SACAC,iBAAAA,SACAC,oBAAAA,YACAN,mBAAAA,WACGO;QARHL;QACAR;QACAE;QACAO;QACAC;QACAC;QACAC;QACAN;;QAeME,QASDA,SACAA,SAK0BA;IA3B/B,IAAMM,sBAAsBtB,MAAMuB,WAAW,CAC3C,SAACC;YAECP;QADAd,gBAAgBqB;SAChBP,mBAAAA,6BAAAA,uCAAAA,iBAAkBP;IACpB,GACA;QAACA;QAAOO;KAAgB;QAsBKD;IAnB/B,qBACE,oBAACJ;QACCE,WAAWb,4BAETe,EAAAA,SAAAA,mBAAAA,6BAAAA,OAAOR,MAAM,MAAKA,iCAClBM;QAEFW,UAAU;QACVC,KAAKN;QACLF,SAAShB,aAAagB,SAASI;QAC/BH,SAASjB,aAAaC,iBAAiBgB;OACnCE,SAEHL,UAAAA,mBAAAA,8BAAAA,QAAOW,KAAK,CAAC,GAAGnB,SAAS,IACzBQ,EAAAA,UAAAA,mBAAAA,8BAAAA,QAAOW,KAAK,CAACnB,SAAS,qBACrB,oBAACI;QAAKC,KAAKH;QAAOI,SAAS;OACxBE,MAAMW,KAAK,CAACnB,SAAS,KAGzBD,gBAAgBC,SAAUQ,CAAAA,CAAAA,iBAAAA,UAAAA,mBAAAA,8BAAAA,QAAOR,MAAM,cAAbQ,2BAAAA,gBAAiB,CAAA;AAGlD,EAAE;AAEFD,UAAUa,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":["React","callMultiple","stopPropagation","RootComponent","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","InputLike","value","onElementSelect","onClick","onFocus","props","handleElementSelect","useCallback","event","Component","baseClassName","undefined","tabIndex","slice","displayName"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAElD,SAASC,aAAa,QAAQ,iCAAiC;AAU/D,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,oBAACC;YAAKC,KAAKH;YAAOI,SAAS;WACxBV;IAGP;IACA,OAAOK;AACT;AAEA,OAAO,IAAMM,YAAY;QACvBC,eAAAA,OACAR,gBAAAA,QACAE,eAAAA,OACAO,yBAAAA,iBACAC,iBAAAA,SACAC,iBAAAA,SACGC;QANHJ;QACAR;QACAE;QACAO;QACAC;QACAC;;QAcmBH,QAMdA,SACAA,SAK0BA;IAvB/B,IAAMK,sBAAsBrB,MAAMsB,WAAW,CAC3C,SAACC;YAECN;QADAf,gBAAgBqB;SAChBN,mBAAAA,6BAAAA,uCAAAA,iBAAkBP;IACpB,GACA;QAACA;QAAOO;KAAgB;QAkBKD;IAf/B,qBACE,oBAACb;QACCqB,WAAU;QACVC,eAAeT,EAAAA,SAAAA,mBAAAA,6BAAAA,OAAOR,MAAM,MAAKA,iCAAqCkB;QACtEC,UAAU;QACVT,SAASjB,aAAaiB,SAASG;QAC/BF,SAASlB,aAAaC,iBAAiBiB;OACnCC,SAEHJ,UAAAA,mBAAAA,8BAAAA,QAAOY,KAAK,CAAC,GAAGpB,SAAS,IACzBQ,EAAAA,UAAAA,mBAAAA,8BAAAA,QAAOY,KAAK,CAACpB,SAAS,qBACrB,oBAACI;QAAKC,KAAKH;QAAOI,SAAS;OACxBE,MAAMY,KAAK,CAACpB,SAAS,KAGzBD,gBAAgBC,SAAUQ,CAAAA,CAAAA,iBAAAA,UAAAA,mBAAAA,8BAAAA,QAAOR,MAAM,cAAbQ,2BAAAA,gBAAiB,CAAA;AAGlD,EAAE;AAEFD,UAAUc,WAAW,GAAG"}

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

@@ -4,19 +4,19 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { ListContext } from "./ListContext";
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */ export 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, _object_spread_props(_object_spread({
         role: "list"
     }, restProps), {
-        className: classNames("vkuiList", isDragging && "vkuiInternalList--dragging", className)
+        baseClassName: classNames("vkuiList", isDragging && "vkuiInternalList--dragging")
     }), /*#__PURE__*/ React.createElement(ListContext.Provider, {
         value: React.useMemo(function() {
             return {

package/dist/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":["React","classNames","ListContext","List","children","className","restProps","useState","isDragging","toggleDrag","div","role","Provider","value","useMemo"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gBAAgB;AAK5C;;CAEC,GACD,OAAO,IAAMC,OAAO;QAAGC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IAC/B,IAAiCL,mCAAAA,MAAMO,QAAQ,CAAC,YAAzCC,aAA0BR,oBAAdS,aAAcT;IAEjC,qBACE,oBAACU;QACCC,MAAK;OACDL;QACJD,WAAWJ,uBAA2BO,cAAc,8BAA8BH;sBAElF,oBAACH,YAAYU,QAAQ;QAACC,OAAOb,MAAMc,OAAO,CAAC;mBAAO;gBAAEL,YAAAA;YAAW;WAAI,EAAE;OAClEL;AAIT,EAAE"}
+{"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":["React","classNames","RootComponent","ListContext","List","children","restProps","useState","isDragging","toggleDrag","role","baseClassName","Provider","value","useMemo"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,WAAW,QAAQ,gBAAgB;AAK5C;;CAEC,GACD,OAAO,IAAMC,OAAO;QAAGC,kBAAAA,UAAaC;QAAbD;;IACrB,IAAiCL,mCAAAA,MAAMO,QAAQ,CAAC,YAAzCC,aAA0BR,oBAAdS,aAAcT;IAEjC,qBACE,oBAACE;QACCQ,MAAK;OACDJ;QACJK,eAAeV,uBAA2BO,cAAc;sBAExD,oBAACL,YAAYS,QAAQ;QAACC,OAAOb,MAAMc,OAAO,CAAC;mBAAO;gBAAEL,YAAAA;YAAW;WAAI,EAAE;OAClEJ;AAIT,EAAE"}

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

@@ -4,8 +4,19 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { Icon16Chevron } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 import { Paragraph } from "../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"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
  */ export var MiniInfoCell = function(_param) {
@@ -18,16 +29,8 @@ import { Paragraph } from "../Typography/Paragraph/Paragraph";
         "expandable",
         "className"
     ]);
-    var cellClasses = 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 = classNames("vkuiMiniInfoCell", stylesTextWrap[textWrap], mode !== "base" && stylesMode[mode], className);
+    var cellContent = /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(before) && /*#__PURE__*/ React.createElement("span", {
         className: "vkuiMiniInfoCell__before"
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiMiniInfoCell__middle"
@@ -42,8 +45,8 @@ import { Paragraph } from "../Typography/Paragraph/Paragraph";
         role: "button"
     }, restProps), {
         className: cellClasses
-    }), cellContent) : /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: cellClasses
+    }), cellContent) : /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: cellClasses
     }), cellContent);
 };
 

package/dist/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":["React","Icon16Chevron","classNames","hasReactNode","Tappable","Paragraph","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","nowrap","full","short","add","accent","more","cellContent","Fragment","span","div","weight","undefined","onClick","Component","role"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,QAAQ,oCAAoC;AAyC9D;;CAEC,GACD,OAAO,IAAMC,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,cAAcb,+BAElB;QACEc,MAAM;QACNC,IAAI;QACJC,KAAK;IACP,CAAC,CAACP,SAAS,EACXD,SAAS,UACP,CAAA;QACES,GAAG;QACHC,MAAM;QACNC,IAAI;IACN,CAAA,CAAC,CAACX,KAAK,EACTG;IAGF,IAAMS,4BACJ,oBAACtB,MAAMuB,QAAQ,sBACb,oBAACC;QAAKX,SAAS;OAAmCN,uBAClD,oBAACkB;QAAIZ,SAAS;qBACZ,oBAACR;QACCQ,SAAS;QACTa,QAAQhB,SAAS,SAAS,MAAMiB;OAE/BlB,WAEFG,4BAAc,oBAACX,uBAEjBE,aAAaK,wBAAU,oBAACgB;QAAKX,SAAS;OAAkCL;IAI7E,OAAOM,UAAUc,OAAO,iBACtB,oBAACxB;QAASyB,WAAU;QAAMC,MAAK;OAAahB;QAAWD,WAAWE;QAC/DO,6BAGH,oBAACG,+CAAQX;QAAWD,WAAWE;QAC5BO;AAGP,EAAE"}
+{"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":["React","Icon16Chevron","classNames","hasReactNode","RootComponent","Tappable","Paragraph","stylesMode","add","accent","more","stylesTextWrap","nowrap","full","short","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","cellContent","Fragment","span","div","weight","undefined","onClick","Component","role","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,QAAQ,oCAAoC;AAG9D,IAAMC,aAAa;IACjBC,GAAG;IACHC,MAAM;IACNC,IAAI;AACN;AAEA,IAAMC,iBAAiB;IACrBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAwCA;;CAEC,GACD,OAAO,IAAMC,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,cAActB,+BAElBS,cAAc,CAACS,SAAS,EACxBD,SAAS,UAAUZ,UAAU,CAACY,KAAK,EACnCG;IAGF,IAAMG,4BACJ,oBAACzB,MAAM0B,QAAQ,QACZvB,aAAaa,yBAAW,oBAACW;QAAKL,SAAS;OAAmCN,uBAC3E,oBAACY;QAAIN,SAAS;qBACZ,oBAAChB;QACCgB,SAAS;QACTO,QAAQV,SAAS,SAAS,MAAMW;OAE/BZ,WAEFG,4BAAc,oBAACpB,uBAEjBE,aAAac,wBAAU,oBAACU;QAAKL,SAAS;OAAkCL;IAI7E,OAAOM,UAAUQ,OAAO,iBACtB,oBAAC1B;QAAS2B,WAAU;QAAMC,MAAK;OAAaV;QAAWD,WAAWE;QAC/DC,6BAGH,oBAACrB,uDAAkBmB;QAAWW,eAAeV;QAC1CC;AAGP,EAAE"}

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

@@ -10,6 +10,7 @@ import { warnOnce } from "../../lib/warnOnce";
 import { ModalCardBase } from "../ModalCardBase/ModalCardBase";
 import { ModalRootContext, useModalRegistry } from "../ModalRoot/ModalRootContext";
 import { ModalType } from "../ModalRoot/types";
+import { RootComponent } from "../RootComponent/RootComponent";
 var platformClassNames = {
     ios: "vkuiModalCard--ios",
     android: "vkuiModalCard--android",
@@ -19,7 +20,7 @@ var warn = warnOnce("ModalCard");
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */ export 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",
@@ -28,9 +29,7 @@ var warn = warnOnce("ModalCard");
         "onClose",
         "nav",
         "id",
-        "className",
-        "size",
-        "getRootRef"
+        "size"
     ]);
     var isDesktop = useAdaptivityWithJSMediaQueries().isDesktop;
     var platform = usePlatform();
@@ -39,10 +38,9 @@ var warn = warnOnce("ModalCard");
         nav: nav,
         id: id
     }, warn), ModalType.CARD).refs;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         id: id,
-        className: classNames("vkuiModalCard", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCard--desktop", className)
+        baseClassName: classNames("vkuiModalCard", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCard--desktop")
     }), /*#__PURE__*/ React.createElement(ModalCardBase, {
         className: "vkuiModalCard__in",
         getRootRef: refs.innerElement,

package/dist/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":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","ModalType","platformClassNames","ios","android","vkcom","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","platform","modalContext","useContext","refs","CARD","div","ref","hasOwnProperty","innerElement"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAA4B,iCAAiC;AACnF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMU,YAAY;QACvBC,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,YAAc1B,kCAAd0B;IACR,IAAMC,WAAW1B;IAEjB,IAAM2B,eAAe9B,MAAM+B,UAAU,CAACxB;IACtC,IAAM,AAAEyB,OAASxB,iBAAiBJ,SAAS;QAAEkB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOL,UAAUwB,IAAI,EAArED;IAER,qBACE,oBAACE,+CACKP;QACJQ,KAAKT;QACLH,IAAIA;QACJC,WAAWvB,4BAETS,mBAAmB0B,cAAc,CAACP,YAC9BnB,kBAAkB,CAACmB,SAAS,GAC5BnB,mBAAmBE,OAAO,EAC9BgB,uCACAJ;sBAGF,oBAAClB;QACCkB,SAAS;QACTE,YAAYM,KAAKK,YAAY;QAC7BrB,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWS,aAAaT,OAAO;QACxCI,MAAMA;OAELN;AAIT,EAAE"}
+{"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":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","ModalType","RootComponent","platformClassNames","ios","android","vkcom","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","size","restProps","isDesktop","platform","modalContext","useContext","refs","CARD","baseClassName","hasOwnProperty","className","getRootRef","innerElement"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAA4B,iCAAiC;AACnF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMW,YAAY;QACvBC,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,YAAczB,kCAAdyB;IACR,IAAMC,WAAWzB;IAEjB,IAAM0B,eAAe7B,MAAM8B,UAAU,CAACvB;IACtC,IAAM,AAAEwB,OAASvB,iBAAiBJ,SAAS;QAAEmB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAON,UAAUuB,IAAI,EAArED;IAER,qBACE,oBAACrB,uDACKgB;QACJF,IAAIA;QACJS,eAAehC,4BAEbU,mBAAmBuB,cAAc,CAACN,YAC9BjB,kBAAkB,CAACiB,SAAS,GAC5BjB,mBAAmBE,OAAO,EAC9Bc;sBAGF,oBAACrB;QACC6B,SAAS;QACTC,YAAYL,KAAKM,YAAY;QAC7BpB,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWO,aAAaP,OAAO;QACxCG,MAAMA;OAELL;AAIT,EAAE"}

package/dist/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;