@vkontakte/vkui 5.7.2 → 5.8.0

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,15 +29,7 @@ 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 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", {
@@ -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      {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    <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,QACZpB,aAAaI,yBAAW,oBAACiB;QAAKX,SAAS;OAAmCN,uBAC3E,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;

package/dist/components/ModalCardBase/ModalCardBase.js

@@ -12,13 +12,13 @@ import { Platform } from "../../lib/platform";
 import { AdaptivityContext } from "../AdaptivityProvider/AdaptivityContext";
 import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Title } from "../Typography/Title/Title";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
  */ export var ModalCardBase = function(_param) {
-    var getRootRef = _param.getRootRef, icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, style = _param.style, sizeProp = _param.size, restProps = _object_without_properties(_param, [
-        "getRootRef",
+    var icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, style = _param.style, sizeProp = _param.size, restProps = _object_without_properties(_param, [
         "icon",
         "header",
         "subheader",
@@ -26,7 +26,6 @@ import { Title } from "../Typography/Title/Title";
         "actions",
         "onClose",
         "dismissLabel",
-        "className",
         "style",
         "size"
     ]);
@@ -35,9 +34,8 @@ import { Title } from "../Typography/Title/Title";
     var isSoftwareKeyboardOpened = useKeyboard().isOpened;
     var canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;
     var size = isDesktop ? sizeProp : undefined;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiInternalModalCardBase", platform === Platform.IOS && "vkuiModalCardBase--ios", isDesktop && "vkuiModalCardBase--desktop", className),
-        ref: getRootRef,
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiInternalModalCardBase", platform === Platform.IOS && "vkuiModalCardBase--ios", isDesktop && "vkuiModalCardBase--desktop"),
         style: _object_spread_props(_object_spread({}, style), {
             maxWidth: size
         })

package/dist/components/ModalCardBase/ModalCardBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  getRootRef,\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  className,\n  style,\n  size: sizeProp,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  const size = isDesktop ? sizeProp : undefined;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalModalCardBase',\n        platform === Platform.IOS && styles['ModalCardBase--ios'],\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\n      style={{\n        ...style,\n        maxWidth: size,\n      }}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title\n            level=\"2\"\n            weight=\"2\"\n            className={classNames(\n              styles['ModalCardBase__header'],\n              'vkuiInternalModalCardBase__header',\n            )}\n          >\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <AdaptivityContext.Provider value={{ sizeY: SizeType.REGULAR }}>\n            <Subhead\n              className={classNames(\n                styles['ModalCardBase__subheader'],\n                'vkuiInternalModalCardBase__subheader',\n              )}\n            >\n              {subheader}\n            </Subhead>\n          </AdaptivityContext.Provider>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Icon24Dismiss","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useKeyboard","usePlatform","SizeType","Platform","AdaptivityContext","ModalDismissButton","PanelHeaderButton","Subhead","Title","ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","size","sizeProp","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseButtonIOS","IOS","undefined","div","ref","maxWidth","level","weight","Provider","value","sizeY","REGULAR","onClick","aria-label"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAiDlD;;CAEC,GACD,OAAO,IAAMC,gBAAgB;QAC3BC,oBAAAA,YACAC,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,sCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,eAAAA,OACAC,AAAMC,kBAAND,MACGE;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMG,WAAWtB;IACjB,IAAM,AAAEuB,YAAczB,kCAAdyB;IACR,IAAMC,2BAA2BzB,cAAc0B,QAAQ;IAEvD,IAAMC,wBAAwBJ,aAAapB,SAASyB,GAAG,IAAI,CAACJ;IAE5D,IAAMJ,OAAOI,YAAYH,WAAWQ;IAEpC,qBACE,oBAACC,+CACKR;QACJJ,WAAWrB,WACT,6BACA0B,aAAapB,SAASyB,GAAG,8BACzBJ,2CACAN;QAEFa,KAAKrB;QACLS,OAAO,wCACFA;YACHa,UAAUZ;;sBAGZ,oBAACU;QACCZ,WAAWrB,2CAET4B;OAGD3B,aAAaa,uBAAS,oBAACmB;QAAIZ,SAAS;OAAkCP,OACtEb,aAAac,yBACZ,oBAACJ;QACCyB,OAAM;QACNC,QAAO;QACPhB,WAAWrB,wCAET;OAGDe,SAGJd,aAAae,4BACZ,oBAACT,kBAAkB+B,QAAQ;QAACC,OAAO;YAAEC,OAAOnC,SAASoC,OAAO;QAAC;qBAC3D,oBAAC/B;QACCW,WAAWrB,2CAET;OAGDgB,aAKNC,UAEAhB,aAAaiB,0BAAY,oBAACe;QAAIZ,SAAS;OAAqCH,UAE5ES,2BAAa,oBAACnB;QAAmBkC,SAASvB;QAC1CW,uCACC,oBAACrB;QACCkC,cAAYvB;QACZC,SAAS;QACTqB,SAASvB;qBAET,oBAACpB;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  style,\n  size: sizeProp,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  const size = isDesktop ? sizeProp : undefined;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        'vkuiInternalModalCardBase',\n        platform === Platform.IOS && styles['ModalCardBase--ios'],\n        isDesktop && styles['ModalCardBase--desktop'],\n      )}\n      style={{\n        ...style,\n        maxWidth: size,\n      }}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title\n            level=\"2\"\n            weight=\"2\"\n            className={classNames(\n              styles['ModalCardBase__header'],\n              'vkuiInternalModalCardBase__header',\n            )}\n          >\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <AdaptivityContext.Provider value={{ sizeY: SizeType.REGULAR }}>\n            <Subhead\n              className={classNames(\n                styles['ModalCardBase__subheader'],\n                'vkuiInternalModalCardBase__subheader',\n              )}\n            >\n              {subheader}\n            </Subhead>\n          </AdaptivityContext.Provider>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Dismiss","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useKeyboard","usePlatform","SizeType","Platform","AdaptivityContext","ModalDismissButton","PanelHeaderButton","RootComponent","Subhead","Title","ModalCardBase","icon","header","subheader","children","actions","onClose","dismissLabel","style","size","sizeProp","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseButtonIOS","IOS","undefined","baseClassName","maxWidth","div","className","level","weight","Provider","value","sizeY","REGULAR","onClick","aria-label"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AA+ClD;;CAEC,GACD,OAAO,IAAMC,gBAAgB;QAC3BC,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,sCACAC,cAAAA,gDAAe,gCACfC,eAAAA,OACAC,AAAMC,kBAAND,MACGE;QATHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMG,WAAWrB;IACjB,IAAM,AAAEsB,YAAcxB,kCAAdwB;IACR,IAAMC,2BAA2BxB,cAAcyB,QAAQ;IAEvD,IAAMC,wBAAwBJ,aAAanB,SAASwB,GAAG,IAAI,CAACJ;IAE5D,IAAMJ,OAAOI,YAAYH,WAAWQ;IAEpC,qBACE,oBAACrB,uDACKc;QACJQ,eAAehC,WACb,6BACAyB,aAAanB,SAASwB,GAAG,8BACzBJ;QAEFL,OAAO,wCACFA;YACHY,UAAUX;;sBAGZ,oBAACY;QACCC,WAAWnC,2CAET2B;OAGD1B,aAAaa,uBAAS,oBAACoB;QAAIC,SAAS;OAAkCrB,OACtEb,aAAac,yBACZ,oBAACH;QACCwB,OAAM;QACNC,QAAO;QACPF,WAAWnC,wCAET;OAGDe,SAGJd,aAAae,4BACZ,oBAACT,kBAAkB+B,QAAQ;QAACC,OAAO;YAAEC,OAAOnC,SAASoC,OAAO;QAAC;qBAC3D,oBAAC9B;QACCwB,WAAWnC,2CAET;OAGDgB,aAKNC,UAEAhB,aAAaiB,0BAAY,oBAACgB;QAAIC,SAAS;OAAqCjB,UAE5EQ,2BAAa,oBAAClB;QAAmBkC,SAASvB;QAC1CU,uCACC,oBAACpB;QACCkC,cAAYvB;QACZe,SAAS;QACTO,SAASvB;qBAET,oBAACpB;AAMb,EAAE"}

package/dist/components/ModalDismissButton/ModalDismissButton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
+import { HTMLAttributesWithRootRef } from '../../types';
+export type ModalDismissButtonProps = HTMLAttributesWithRootRef<HTMLButtonElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */

package/dist/components/ModalDismissButton/ModalDismissButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  'aria-label': ariaLabel = 'Закрыть',\n  className,\n  ...restProps\n}: ModalDismissButtonProps) => {\n  return (\n    <Tappable\n      className={classNames(styles['ModalDismissButton'], className)}\n      {...restProps}\n      aria-label={ariaLabel}\n      activeMode={styles['ModalDismissButton--active']}\n      hoverMode={styles['ModalDismissButton--hover']}\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","Tappable","ModalDismissButton","ariaLabel","className","restProps","aria-label","activeMode","hoverMode"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAKhD;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAClBC,aAAd,eAAcA,YAAAA,iBAAY,YAAZA,KACdC,mBAAAA,WACGC;QAFH;QACAD;;IAGA,qBACE,oBAACH;QACCG,WAAWJ,qCAAyCI;OAChDC;QACJC,cAAYH;QACZI,UAAU;QACVC,SAAS;sBAET,oBAACT;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = HTMLAttributesWithRootRef<HTMLButtonElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  'aria-label': ariaLabel = 'Закрыть',\n  className,\n  ...restProps\n}: ModalDismissButtonProps) => {\n  return (\n    <Tappable\n      className={classNames(styles['ModalDismissButton'], className)}\n      {...restProps}\n      aria-label={ariaLabel}\n      activeMode={styles['ModalDismissButton--active']}\n      hoverMode={styles['ModalDismissButton--hover']}\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","Tappable","ModalDismissButton","ariaLabel","className","restProps","aria-label","activeMode","hoverMode"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,uBAAuB;AAKhD;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAClBC,aAAd,eAAcA,YAAAA,iBAAY,YAAZA,KACdC,mBAAAA,WACGC;QAFH;QACAD;;IAGA,qBACE,oBAACH;QACCG,WAAWJ,qCAAyCI;OAChDC;QACJC,cAAYH;QACZI,UAAU;QACVC,SAAS;sBAET,oBAACT;AAGP,EAAE"}

package/dist/components/ModalPage/ModalPage.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavIdProps } from '../../lib/getNavId';
-export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface ModalPageProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
     /**
      * Шапка модальной страницы, `<ModalPageHeader />`
      */
@@ -42,4 +43,4 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Na
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
-export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton, className, ...restProps }: ModalPageProps) => React.JSX.Element;
+export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton, ...restProps }: ModalPageProps) => React.JSX.Element;

package/dist/components/ModalPage/ModalPage.js

@@ -15,6 +15,7 @@ import { warnOnce } from "../../lib/warnOnce";
 import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { ModalRootContext, useModalRegistry } from "../ModalRoot/ModalRootContext";
 import { ModalType } from "../ModalRoot/types";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { ModalPageContext } from "./ModalPageContext";
 var sizeClassName = {
     s: "vkuiModalPage--size-s",
@@ -25,7 +26,7 @@ var warn = warnOnce("ModalPage");
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */ export var ModalPage = function(_param) {
-    var children = _param.children, header = _param.header, tmp = _param.size, sizeProp = tmp === void 0 ? "s" : tmp, onOpen = _param.onOpen, onOpened = _param.onOpened, onClose = _param.onClose, onClosed = _param.onClosed, settlingHeight = _param.settlingHeight, dynamicContentHeight = _param.dynamicContentHeight, getModalContentRef = _param.getModalContentRef, nav = _param.nav, idProp = _param.id, _param_hideCloseButton = _param.hideCloseButton, hideCloseButton = _param_hideCloseButton === void 0 ? false : _param_hideCloseButton, className = _param.className, restProps = _object_without_properties(_param, [
+    var children = _param.children, header = _param.header, tmp = _param.size, sizeProp = tmp === void 0 ? "s" : tmp, onOpen = _param.onOpen, onOpened = _param.onOpened, onClose = _param.onClose, onClosed = _param.onClosed, settlingHeight = _param.settlingHeight, dynamicContentHeight = _param.dynamicContentHeight, getModalContentRef = _param.getModalContentRef, nav = _param.nav, idProp = _param.id, _param_hideCloseButton = _param.hideCloseButton, hideCloseButton = _param_hideCloseButton === void 0 ? false : _param_hideCloseButton, restProps = _object_without_properties(_param, [
         "children",
         "header",
         "size",
@@ -38,8 +39,7 @@ var warn = warnOnce("ModalPage");
         "getModalContentRef",
         "nav",
         "id",
-        "hideCloseButton",
-        "className"
+        "hideCloseButton"
     ]);
     var generatingId = useId();
     var id = idProp || generatingId;
@@ -73,12 +73,12 @@ var warn = warnOnce("ModalPage");
     ]);
     return /*#__PURE__*/ React.createElement(ModalPageContext.Provider, {
         value: contextValue
-    }, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+    }, /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": contextValue.labelId,
         id: id,
-        className: classNames("vkuiModalPage", platform === Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === SizeType.REGULAR && "vkuiInternalModalPage--sizeX-regular", typeof size === "string" && sizeClassName[size], className)
+        baseClassName: classNames("vkuiModalPage", platform === Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === SizeType.REGULAR && "vkuiInternalModalPage--sizeX-regular", typeof size === "string" && sizeClassName[size])
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiModalPage__in-wrap",
         style: {
@@ -97,7 +97,10 @@ var warn = warnOnce("ModalPage");
         ref: multiRef(refs.contentElement, getModalContentRef)
     }, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiModalPage__content-in"
-    }, children))), isCloseButtonShown && /*#__PURE__*/ React.createElement(ModalDismissButton, {
+    }, children)), /*#__PURE__*/ React.createElement("div", {
+        ref: refs.bottomInset,
+        className: "vkuiModalPage__bottom-inset"
+    })), isCloseButtonShown && /*#__PURE__*/ React.createElement(ModalDismissButton, {
         onClick: onClose || modalContext.onClose
     })))));
 };