@vkontakte/vkui 5.7.2 → 5.8.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/components/ModalCardBase/ModalCardBase.js

@@ -23,11 +23,11 @@ var _platform = require("../../lib/platform");
 var _AdaptivityContext = require("../AdaptivityProvider/AdaptivityContext");
 var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
 var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _Title = require("../Typography/Title/Title");
 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",
@@ -35,7 +35,6 @@ var ModalCardBase = function(_param) {
         "actions",
         "onClose",
         "dismissLabel",
-        "className",
         "style",
         "size"
     ]);
@@ -44,9 +43,8 @@ var ModalCardBase = function(_param) {
     var isSoftwareKeyboardOpened = (0, _useKeyboard.useKeyboard)().isOpened;
     var canShowCloseButtonIOS = platform === _platform.Platform.IOS && !isDesktop;
     var size = isDesktop ? sizeProp : undefined;
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiInternalModalCardBase", platform === _platform.Platform.IOS && "vkuiModalCardBase--ios", isDesktop && "vkuiModalCardBase--desktop", className),
-        ref: getRootRef,
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiInternalModalCardBase", platform === _platform.Platform.IOS && "vkuiModalCardBase--ios", isDesktop && "vkuiModalCardBase--desktop"),
         style: _object_spread_props._(_object_spread._({}, style), {
             maxWidth: size
         })

package/dist/cjs/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":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","size","sizeProp","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","div","classNames","ref","maxWidth","hasReactNode","Title","level","weight","AdaptivityContext","Provider","value","sizeY","SizeType","REGULAR","Subhead","ModalDismissButton","onClick","PanelHeaderButton","aria-label","Icon24Dismiss"],"mappings":";;;;+BAiEaA;;;eAAAA;;;;;;;+DAjEU;qBACO;oBACW;+CACO;2BACpB;2BACA;0BACH;wBACA;iCAES;kCACC;iCACD;uBACV;qBACF;AAoDf,IAAMA,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,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,2BAA2BC,IAAAA,wBAAW,IAAGC,QAAQ;IAEvD,IAAMC,wBAAwBP,aAAaQ,kBAAQ,CAACC,GAAG,IAAI,CAACP;IAE5D,IAAML,OAAOK,YAAYJ,WAAWY;IAEpC,qBACE,qBAACC,mDACKZ;QACJJ,WAAWiB,IAAAA,gBAAU,EACnB,6BACAZ,aAAaQ,kBAAQ,CAACC,GAAG,8BACzBP,2CACAP;QAEFkB,KAAK1B;QACLS,OAAO,4CACFA;YACHkB,UAAUjB;;sBAGZ,qBAACc;QACChB,WAAWiB,IAAAA,gBAAU,kCAEnBR;OAGDW,IAAAA,kBAAY,EAAC3B,uBAAS,qBAACuB;QAAIhB,SAAS;OAAkCP,OACtE2B,IAAAA,kBAAY,EAAC1B,yBACZ,qBAAC2B,YAAK;QACJC,OAAM;QACNC,QAAO;QACPvB,WAAWiB,IAAAA,gBAAU,+BAEnB;OAGDvB,SAGJ0B,IAAAA,kBAAY,EAACzB,4BACZ,qBAAC6B,oCAAiB,CAACC,QAAQ;QAACC,OAAO;YAAEC,OAAOC,oBAAQ,CAACC,OAAO;QAAC;qBAC3D,qBAACC,gBAAO;QACN9B,WAAWiB,IAAAA,gBAAU,kCAEnB;OAGDtB,aAKNC,UAEAwB,IAAAA,kBAAY,EAACvB,0BAAY,qBAACmB;QAAIhB,SAAS;OAAqCH,UAE5EU,2BAAa,qBAACwB,sCAAkB;QAACC,SAASlC;QAC1Cc,uCACC,qBAACqB,oCAAiB;QAChBC,cAAYnC;QACZC,SAAS;QACTgC,SAASlC;qBAET,qBAACqC,oBAAa;AAM1B"}
+{"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":["ModalCardBase","icon","header","subheader","children","actions","onClose","dismissLabel","style","size","sizeProp","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","RootComponent","baseClassName","classNames","maxWidth","div","className","hasReactNode","Title","level","weight","AdaptivityContext","Provider","value","sizeY","SizeType","REGULAR","Subhead","ModalDismissButton","onClick","PanelHeaderButton","aria-label","Icon24Dismiss"],"mappings":";;;;+BAgEaA;;;eAAAA;;;;;;;+DAhEU;qBACO;oBACW;+CACO;2BACpB;2BACA;0BACH;wBACA;iCAES;kCACC;iCACD;6BACJ;uBACN;qBACF;AAkDf,IAAMA,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,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,2BAA2BC,IAAAA,wBAAW,IAAGC,QAAQ;IAEvD,IAAMC,wBAAwBP,aAAaQ,kBAAQ,CAACC,GAAG,IAAI,CAACP;IAE5D,IAAML,OAAOK,YAAYJ,WAAWY;IAEpC,qBACE,qBAACC,4BAAa,8CACRZ;QACJa,eAAeC,IAAAA,gBAAU,EACvB,6BACAb,aAAaQ,kBAAQ,CAACC,GAAG,8BACzBP;QAEFN,OAAO,4CACFA;YACHkB,UAAUjB;;sBAGZ,qBAACkB;QACCC,WAAWH,IAAAA,gBAAU,kCAEnBT;OAGDa,IAAAA,kBAAY,EAAC5B,uBAAS,qBAAC0B;QAAIC,SAAS;OAAkC3B,OACtE4B,IAAAA,kBAAY,EAAC3B,yBACZ,qBAAC4B,YAAK;QACJC,OAAM;QACNC,QAAO;QACPJ,WAAWH,IAAAA,gBAAU,+BAEnB;OAGDvB,SAGJ2B,IAAAA,kBAAY,EAAC1B,4BACZ,qBAAC8B,oCAAiB,CAACC,QAAQ;QAACC,OAAO;YAAEC,OAAOC,oBAAQ,CAACC,OAAO;QAAC;qBAC3D,qBAACC,gBAAO;QACNX,WAAWH,IAAAA,gBAAU,kCAEnB;OAGDtB,aAKNC,UAEAyB,IAAAA,kBAAY,EAACxB,0BAAY,qBAACsB;QAAIC,SAAS;OAAqCvB,UAE5ES,2BAAa,qBAAC0B,sCAAkB;QAACC,SAASnC;QAC1Ca,uCACC,qBAACuB,oCAAiB;QAChBC,cAAYpC;QACZqB,SAAS;QACTa,SAASnC;qBAET,qBAACsC,oBAAa;AAM1B"}

package/dist/cjs/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/cjs/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":["ModalDismissButton","ariaLabel","className","restProps","Tappable","classNames","aria-label","activeMode","hoverMode","Icon20Cancel"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;+DAXU;qBACM;oBACF;wBACF;AAQlB,IAAMA,qBAAqB;QAClBC,aAAd,eAAcA,YAAAA,iBAAY,YAAZA,KACdC,mBAAAA,WACGC;QAFH;QACAD;;IAGA,qBACE,qBAACE,kBAAQ;QACPF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAChDC;QACJG,cAAYL;QACZM,UAAU;QACVC,SAAS;sBAET,qBAACC,mBAAY;AAGnB"}
+{"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":["ModalDismissButton","ariaLabel","className","restProps","Tappable","classNames","aria-label","activeMode","hoverMode","Icon20Cancel"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;+DAZU;qBACM;oBACF;wBAEF;AAQlB,IAAMA,qBAAqB;QAClBC,aAAd,eAAcA,YAAAA,iBAAY,YAAZA,KACdC,mBAAAA,WACGC;QAFH;QACAD;;IAGA,qBACE,qBAACE,kBAAQ;QACPF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAChDC;QACJG,cAAYL;QACZM,UAAU;QACVC,SAAS;sBAET,qBAACC,mBAAY;AAGnB"}

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

@@ -26,6 +26,7 @@ var _warnOnce = require("../../lib/warnOnce");
 var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _types = require("../ModalRoot/types");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _ModalPageContext = require("./ModalPageContext");
 var sizeClassName = {
     s: "vkuiModalPage--size-s",
@@ -34,7 +35,7 @@ var sizeClassName = {
 };
 var warn = (0, _warnOnce.warnOnce)("ModalPage");
 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",
@@ -47,8 +48,7 @@ var ModalPage = function(_param) {
         "getModalContentRef",
         "nav",
         "id",
-        "hideCloseButton",
-        "className"
+        "hideCloseButton"
     ]);
     var generatingId = (0, _useId.useId)();
     var id = idProp || generatingId;
@@ -82,12 +82,12 @@ var ModalPage = function(_param) {
     ]);
     return /*#__PURE__*/ _react.createElement(_ModalPageContext.ModalPageContext.Provider, {
         value: contextValue
-    }, /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": contextValue.labelId,
         id: id,
-        className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === _adaptivity.SizeType.REGULAR && "vkuiInternalModalPage--sizeX-regular", typeof size === "string" && sizeClassName[size], className)
+        baseClassName: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === _adaptivity.SizeType.REGULAR && "vkuiInternalModalPage--sizeX-regular", typeof size === "string" && sizeClassName[size])
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiModalPage__in-wrap",
         style: {
@@ -106,7 +106,10 @@ var ModalPage = function(_param) {
         ref: (0, _utils.multiRef)(refs.contentElement, getModalContentRef)
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiModalPage__content-in"
-    }, children))), isCloseButtonShown && /*#__PURE__*/ _react.createElement(_ModalDismissButton.ModalDismissButton, {
+    }, children)), /*#__PURE__*/ _react.createElement("div", {
+        ref: refs.bottomInset,
+        className: "vkuiModalPage__bottom-inset"
+    })), isCloseButtonShown && /*#__PURE__*/ _react.createElement(_ModalDismissButton.ModalDismissButton, {
         onClick: onClose || modalContext.onClose
     })))));
 };