@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/cssm/components/FormItem/FormItem.js

@@ -4,6 +4,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { Removable } from '../Removable/Removable';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './FormItem.module.css';
@@ -11,9 +12,13 @@ const sizeYClassNames = {
     none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),
     [SizeType.COMPACT]: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact')
 };
+const stylesStatus = {
+    error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),
+    valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid')
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
- */ export const FormItem = ({ children, top, bottom, status = 'default', Component = 'div', removable, onRemove = noop, removePlaceholder = 'Удалить', getRootRef, className, htmlFor, bottomId, ...restProps })=>{
+ */ export const FormItem = ({ children, top, bottom, status = 'default', removable, onRemove = noop, removePlaceholder = 'Удалить', getRootRef, htmlFor, bottomId, noPadding, ...restProps })=>{
     const rootEl = useExternRef(getRootRef);
     const { sizeY = 'none' } = useAdaptivity();
     const wrappedChildren = /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(top) && /*#__PURE__*/ React.createElement(Subhead, {
@@ -25,13 +30,10 @@ const sizeYClassNames = {
         id: bottomId,
         role: status === 'error' ? 'alert' : undefined
     }, bottom));
-    return /*#__PURE__*/ React.createElement(Component, {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        ref: rootEl,
-        className: classNames(styles['FormItem'], 'vkuiInternalFormItem', status !== 'default' && ({
-            error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),
-            valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid')
-        })[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], hasReactNode(top) && classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'), removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'), className)
+        getRootRef: rootEl,
+        baseClassName: classNames(styles['FormItem'], !noPadding && styles['FormItem--withPadding'], 'vkuiInternalFormItem', status !== 'default' && stylesStatus[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], hasReactNode(top) && classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'), removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'))
     }, removable ? /*#__PURE__*/ React.createElement(Removable, {
         align: "start",
         onRemove: (e)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  bottomId,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","bottomId","restProps","rootEl","sizeY","wrappedChildren","Fragment","id","role","undefined","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAwBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,SAAS,SAAS,EAClBC,YAAY,KAAK,EACjBC,SAAS,EACTC,WAAWlB,IAAI,EACfmB,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACR,GAAGC,WACW;IACd,MAAMC,SAASvB,aAAakB;IAC5B,MAAM,EAAEM,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAM0B,gCACJ,oBAAC9B,MAAM+B,QAAQ,QACZ7B,aAAac,sBACZ,oBAACP;QACCe,WAAWd,MAAM,CAAC,gBAAgB;QAClCS,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAb,aAAae,yBACZ,oBAACT;QACCgB,WAAWd,MAAM,CAAC,mBAAmB;QACrCsB,IAAIN;QACJO,MAAMf,WAAW,UAAU,UAAUgB;OAEpCjB;IAMT,qBACE,oBAACE;QACE,GAAGQ,SAAS;QACbQ,KAAKP;QACLJ,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEkB,OAAOnC,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEF2B,OAAOpC,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXW,UAAUvB,SAASgC,OAAO,IAAI3B,eAAe,CAACkB,MAAM,EACpD3B,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACCgC,OAAM;QACNlB,UAAU,CAACmB;YACT,IAAIZ,QAAQa,SAAS;gBACnBpB,SAASmB,GAAGZ,OAAOa,OAAO;YAC5B;QACF;QACAnB,mBAAmBA;QACnBoB,QAAQtB,cAAc;qBAEtB,oBAACuB;QACCnB,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDoB,oBAILA;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nconst stylesStatus = {\n  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles['FormItem'],\n        !noPadding && styles['FormItem--withPadding'],\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","RootComponent","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","stylesStatus","error","valid","FormItem","children","top","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","restProps","rootEl","sizeY","wrappedChildren","Fragment","className","Component","id","role","undefined","baseClassName","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMZ,WAAWU,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACL,SAASQ,OAAO,CAAC,EAAEb,WAClBU,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAEA,MAAMI,eAAe;IACnBC,OAAOf,WAAWU,MAAM,CAAC,yBAAyB,EAAE;IACpDM,OAAOhB,WAAWU,MAAM,CAAC,yBAAyB,EAAE;AACtD;AA6BA;;CAEC,GACD,OAAO,MAAMO,WAAW,CAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,WAAWrB,IAAI,EACfsB,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACW;IACd,MAAMC,SAAS1B,aAAaqB;IAC5B,MAAM,EAAEM,QAAQ,MAAM,EAAE,GAAG5B;IAE3B,MAAM6B,gCACJ,oBAACjC,MAAMkC,QAAQ,QACZhC,aAAakB,sBACZ,oBAACV;QACCyB,WAAWxB,MAAM,CAAC,gBAAgB;QAClCyB,WAAWT,UAAU,UAAU;QAC/BA,SAASA;OAERP,MAGJD,UACAjB,aAAamB,yBACZ,oBAACZ;QACC0B,WAAWxB,MAAM,CAAC,mBAAmB;QACrC0B,IAAIT;QACJU,MAAMhB,WAAW,UAAU,UAAUiB;OAEpClB;IAMT,qBACE,oBAACb;QACE,GAAGsB,SAAS;QACbJ,YAAYK;QACZS,eAAevC,WACbU,MAAM,CAAC,WAAW,EAClB,CAACkB,aAAalB,MAAM,CAAC,wBAAwB,EAC7C,wBACAW,WAAW,aAAaP,YAAY,CAACO,OAAO,EAC5CU,UAAU1B,SAASmC,OAAO,IAAI7B,eAAe,CAACoB,MAAM,EACpD9B,aAAakB,QACXnB,WAAWU,MAAM,CAAC,oBAAoB,EAAE,kCAC1CY,aAAatB,WAAWU,MAAM,CAAC,sBAAsB,EAAE;OAGxDY,0BACC,oBAAChB;QACCmC,OAAM;QACNlB,UAAU,CAACmB;YACT,IAAIZ,QAAQa,SAAS;gBACnBpB,SAASmB,GAAGZ,OAAOa,OAAO;YAC5B;QACF;QACAnB,mBAAmBA;QACnBoB,QAAQtB,cAAc;qBAEtB,oBAACuB;QACCX,WAAWlC,WAAWU,MAAM,CAAC,sBAAsB,EAAE;OAEpDsB,oBAILA;AAIR,EAAE"}

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

@@ -1,5 +1,8 @@
 .FormItem {
   display: block;
+}
+
+.FormItem--withPadding {
   padding: var(--vkui--size_form_item_padding_vertical--regular)
     var(--vkui--size_base_padding_horizontal--regular);
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
-export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+export interface FormLayoutGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement>, RemovableProps {
     mode?: 'vertical' | 'horizontal';
     /**
      * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
@@ -17,4 +17,4 @@ export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
  */
-export declare const FormLayoutGroup: ({ children, mode, removable, segmented, removePlaceholder, onRemove, getRootRef, className, ...restProps }: FormLayoutGroupProps) => React.JSX.Element;
+export declare const FormLayoutGroup: ({ children, mode, removable, segmented, removePlaceholder, onRemove, getRootRef, ...restProps }: FormLayoutGroupProps) => React.JSX.Element;

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js

@@ -4,6 +4,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { Removable } from '../Removable/Removable';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './FormLayoutGroup.module.css';
 const sizeYClassNames = {
     none: classNames(styles['FormLayoutGroup--sizeY-none'], 'vkuiInternalFormLayoutGroup--sizeY-none'),
@@ -11,14 +12,14 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
- */ export const FormLayoutGroup = ({ children, mode = 'vertical', removable, segmented, removePlaceholder = 'Удалить', onRemove = noop, getRootRef, className, ...restProps })=>{
+ */ export const FormLayoutGroup = ({ children, mode = 'vertical', removable, segmented, removePlaceholder = 'Удалить', onRemove = noop, getRootRef, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const isRemovable = removable && mode === 'horizontal';
     const isSegmented = segmented && mode === 'horizontal';
     const rootEl = useExternRef(getRootRef);
-    return /*#__PURE__*/ React.createElement("div", {
-        ref: rootEl,
-        className: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], mode === 'horizontal' && classNames(styles['FormLayoutGroup--mode-horizontal'], 'vkuiInternalFormLayoutGroup--mode-horizontal'), isRemovable && classNames(styles['FormLayoutGroup--removable'], 'vkuiInternalFormLayoutGroup--removable'), isSegmented && classNames(styles['FormLayoutGroup--segmented'], 'vkuiInternalFormLayoutGroup--segmented'), className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        getRootRef: rootEl,
+        baseClassName: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], mode === 'horizontal' && classNames(styles['FormLayoutGroup--mode-horizontal'], 'vkuiInternalFormLayoutGroup--mode-horizontal'), isRemovable && classNames(styles['FormLayoutGroup--removable'], 'vkuiInternalFormLayoutGroup--removable'), isSegmented && classNames(styles['FormLayoutGroup--segmented'], 'vkuiInternalFormLayoutGroup--segmented')),
         ...restProps
     }, isRemovable ? /*#__PURE__*/ React.createElement(Removable, {
         className: styles['FormLayoutGroup__removable'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,OAAO,CAAC,EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAoBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWf,IAAI,EACfgB,UAAU,EACVC,SAAS,EACT,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY;YACT,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM,OAAO;YAC5B;QACF;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACZ,MAAMgC,QAAQ,QACZpB,wBACD,oBAACqB;QAAKd,WAAWZ,MAAM,CAAC,0BAA0B;QAAE2B,eAAAA;;AAK9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    RemovableProps {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","RootComponent","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","isSegmented","rootEl","baseClassName","REGULAR","className","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMT,WACJO,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACH,SAASM,OAAO,CAAC,EAAEV,WAClBO,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAmBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWhB,IAAI,EACfiB,UAAU,EACV,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcP,aAAaD,SAAS;IAC1C,MAAMS,cAAcP,aAAaF,SAAS;IAC1C,MAAMU,SAASpB,aAAae;IAE5B,qBACE,oBAACZ;QACCY,YAAYK;QACZC,eAAexB,WACboB,UAAUhB,SAASqB,OAAO,IAAIjB,eAAe,CAACY,MAAM,EACpDP,SAAS,gBACPb,WACEO,MAAM,CAAC,mCAAmC,EAC1C,iDAEJc,eACErB,WACEO,MAAM,CAAC,6BAA6B,EACpC,2CAEJe,eACEtB,WACEO,MAAM,CAAC,6BAA6B,EACpC;QAGL,GAAGY,SAAS;OAEZE,4BACC,oBAAChB;QACCqB,WAAWnB,MAAM,CAAC,6BAA6B;QAC/CoB,OAAM;QACNX,mBAAmBA;QACnBC,UAAU,CAACW;YACT,IAAIL,QAAQM,SAAS;gBACnBZ,SAASW,GAAGL,OAAOM,OAAO;YAC5B;QACF;QACAC,QAAQhB,cAAc;OAErBF,0BAGH,oBAACb,MAAMgC,QAAQ,QACZnB,wBACD,oBAACoB;QAAKN,WAAWnB,MAAM,CAAC,0BAA0B;QAAE0B,eAAAA;;AAK9D,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'default' | 'error';
     header?: React.ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAS7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrF,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrF,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Тип градиента
      */
@@ -12,4 +13,4 @@ export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
  */
-export declare const Gradient: ({ mode, children, to, className, ...restProps }: GradientProps) => React.JSX.Element;
+export declare const Gradient: ({ mode, to, ...restProps }: GradientProps) => React.JSX.Element;

package/dist/cssm/components/Gradient/Gradient.js

@@ -1,21 +1,24 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Gradient.module.css';
+const stylesMode = {
+    tint: styles['Gradient--mode-tint'],
+    black: styles['Gradient--mode-black'],
+    white: styles['Gradient--mode-white']
+};
+const stylesTo = {
+    top: styles['Gradient--to-top'],
+    bottom: styles['Gradient--to-bottom']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
- */ export const Gradient = ({ mode = 'tint', children, to = 'top', className, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("div", {
+ */ export const Gradient = ({ mode = 'tint', to = 'top', ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         role: "presentation",
         ...restProps,
-        className: classNames({
-            tint: styles['Gradient--mode-tint'],
-            black: styles['Gradient--mode-black'],
-            white: styles['Gradient--mode-white']
-        }[mode], {
-            top: styles['Gradient--to-top'],
-            bottom: styles['Gradient--to-bottom']
-        }[to], className)
-    }, children);
+        baseClassName: classNames(stylesMode[mode], stylesTo[to])
+    });
 };
 
 //# sourceMappingURL=Gradient.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'tint',\n  children,\n  to = 'top',\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNames(\n        {\n          tint: styles['Gradient--mode-tint'],\n          black: styles['Gradient--mode-black'],\n          white: styles['Gradient--mode-white'],\n        }[mode],\n        {\n          top: styles['Gradient--to-top'],\n          bottom: styles['Gradient--to-bottom'],\n        }[to],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Gradient","mode","children","to","className","restProps","div","role","tint","black","white","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,MAAM,EACbC,QAAQ,EACRC,KAAK,KAAK,EACVC,SAAS,EACT,GAAGC,WACW;IACd,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGF,SAAS;QACbD,WAAWN,WACT;YACEU,MAAMT,MAAM,CAAC,sBAAsB;YACnCU,OAAOV,MAAM,CAAC,uBAAuB;YACrCW,OAAOX,MAAM,CAAC,uBAAuB;QACvC,CAAC,CAACE,KAAK,EACP;YACEU,KAAKZ,MAAM,CAAC,mBAAmB;YAC/Ba,QAAQb,MAAM,CAAC,sBAAsB;QACvC,CAAC,CAACI,GAAG,EACLC;OAGDF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nconst stylesMode = {\n  tint: styles['Gradient--mode-tint'],\n  black: styles['Gradient--mode-black'],\n  white: styles['Gradient--mode-white'],\n};\n\nconst stylesTo = {\n  top: styles['Gradient--to-top'],\n  bottom: styles['Gradient--to-bottom'],\n};\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'tint', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(stylesMode[mode], stylesTo[to])}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesMode","tint","black","white","stylesTo","top","bottom","Gradient","mode","to","restProps","role","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,aAAa;IACjBC,MAAMF,MAAM,CAAC,sBAAsB;IACnCG,OAAOH,MAAM,CAAC,uBAAuB;IACrCI,OAAOJ,MAAM,CAAC,uBAAuB;AACvC;AAEA,MAAMK,WAAW;IACfC,KAAKN,MAAM,CAAC,mBAAmB;IAC/BO,QAAQP,MAAM,CAAC,sBAAsB;AACvC;AAaA;;CAEC,GACD,OAAO,MAAMQ,WAAW,CAAC,EAAEC,OAAO,MAAM,EAAEC,KAAK,KAAK,EAAE,GAAGC,WAA0B;IACjF,qBACE,oBAACZ;QACCa,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAef,WAAWG,UAAU,CAACQ,KAAK,EAAEJ,QAAQ,CAACK,GAAG;;AAG9D,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasChildren, HasRootRef } from '../../types';
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, HasChildren {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {
     header?: React.ReactNode;
     description?: React.ReactNode;
     /**
@@ -24,4 +24,4 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
  */
-export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => React.JSX.Element;
+export declare const Group: ({ header, description, children, separator, mode: modeProps, padding, tabIndex: tabIndexProp, ...restProps }: GroupProps) => React.JSX.Element;

package/dist/cssm/components/Group/Group.js

@@ -5,7 +5,9 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
+import { AppRootContext } from '../AppRoot/AppRootContext';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Separator } from '../Separator/Separator';
 import { Spacing } from '../Spacing/Spacing';
 import { Footnote } from '../Typography/Footnote/Footnote';
@@ -14,38 +16,51 @@ const sizeXClassNames = {
     none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),
     [SizeType.COMPACT]: styles['Group--sizeX-compact']
 };
+const stylesMode = {
+    none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),
+    plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),
+    card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card')
+};
+const stylesPadding = {
+    s: styles['Group--padding-s'],
+    m: styles['Group--padding-m']
+};
+/**
+ * Вычисляем mode для Group.
+ */ function useGroupMode(forcedMode, sizeX, isInsideModal) {
+    const { layout } = React.useContext(AppRootContext);
+    if (forcedMode) {
+        return forcedMode;
+    }
+    if (isInsideModal) {
+        return 'plain';
+    }
+    if (layout) {
+        return layout;
+    }
+    if (sizeX !== 'none') {
+        return sizeX === SizeType.REGULAR ? 'card' : 'plain';
+    }
+    return 'none';
+}
 const warn = warnOnce('Group');
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
- */ export const Group = ({ header, description, children, separator = 'auto', getRootRef, mode: modeProps, padding = 'm', className, tabIndex: tabIndexProp, ...restProps })=>{
+ */ export const Group = ({ header, description, children, separator = 'auto', mode: modeProps, padding = 'm', tabIndex: tabIndexProp, ...restProps })=>{
     const { isInsideModal } = React.useContext(ModalRootContext);
     const platform = usePlatform();
     const { sizeX = 'none' } = useAdaptivity();
-    let mode = modeProps;
-    if (!modeProps) {
-        // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
-        mode = isInsideModal ? 'plain' : 'none';
-    }
-    if (mode === 'none' && sizeX !== 'none') {
-        mode = sizeX === SizeType.REGULAR ? 'card' : 'plain';
-    }
+    const mode = useGroupMode(modeProps, sizeX, isInsideModal);
     const isTabPanel = restProps.role === 'tabpanel';
     if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
         warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
     }
     const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(RootComponent, {
+        Component: "section",
         ...restProps,
         tabIndex: tabIndex,
-        ref: getRootRef,
-        className: classNames('vkuiInternalGroup', styles['Group'], isInsideModal && styles['Group--inside-modal'], platform === Platform.IOS && styles['Group--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
-            none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),
-            plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),
-            card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card')
-        })[mode], {
-            s: styles['Group--padding-s'],
-            m: styles['Group--padding-m']
-        }[padding], className)
+        baseClassName: classNames('vkuiInternalGroup', styles['Group'], isInsideModal && styles['Group--inside-modal'], platform === Platform.IOS && styles['Group--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && stylesMode[mode], stylesPadding[padding])
     }, header, children, hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Group__description']
     }, description)), separator !== 'hide' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Spacing, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n   * В модальных окнах по умолчанию `plain`.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме `card`.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  if (mode === 'none' && sizeX !== 'none') {\n    mode = sizeX === SizeType.REGULAR ? 'card' : 'plain';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","REGULAR","isTabPanel","role","process","env","NODE_ENV","undefined","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMb,WAAWW,MAAM,CAAC,oBAAoB,EAAE;IAC9C,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AA2BA,MAAMI,OAAOT,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMU,QAAQ,CAAC,EACpBC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,YAAY,MAAM,EAClBC,UAAU,EACVC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,SAAS,EACTC,UAAUC,YAAY,EACtB,GAAGC,WACQ;IACX,MAAM,EAAEC,aAAa,EAAE,GAAG9B,MAAM+B,UAAU,CAACvB;IAC3C,MAAMwB,WAAW5B;IACjB,MAAM,EAAE6B,QAAQ,MAAM,EAAE,GAAG9B;IAE3B,IAAIoB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAIP,SAAS,UAAUU,UAAU,QAAQ;QACvCV,OAAOU,UAAU5B,SAAS6B,OAAO,GAAG,SAAS;IAC/C;IAEA,MAAMC,aAAaN,UAAUO,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACN,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,MAAMW,WAAWQ,cAAcP,iBAAiBY,YAAY,IAAIZ;IAEhE,qBACE,wDACE,oBAACa;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAWzB,WACT,qBACAW,MAAM,CAAC,QAAQ,EACfkB,iBAAiBlB,MAAM,CAAC,sBAAsB,EAC9CoB,aAAa1B,SAASqC,GAAG,IAAI/B,MAAM,CAAC,aAAa,EACjDqB,UAAU5B,SAAS6B,OAAO,IAAIrB,eAAe,CAACoB,MAAM,EACpDV,QACE,CAAA;YACET,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CgC,OAAO3C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CiC,MAAM5C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACW,KAAK,EACT;YACEuB,GAAGlC,MAAM,CAAC,mBAAmB;YAC7BmC,GAAGnC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACa,QAAQ,EACVC;OAGDR,QACAE,UACAlB,aAAaiB,8BACZ,oBAACR;QAASe,WAAWd,MAAM,CAAC,qBAAqB;OAAGO,eAIvDE,cAAc,wBACb,oBAACrB,MAAMgD,QAAQ,sBACb,oBAACtC;QACCgB,WAAWzB,WAAWW,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,4BAA4B;QACrFqC,MAAM;sBAER,oBAACxC;QACCiB,WAAWzB,WACTW,MAAM,CAAC,mBAAmB,EAC1BA,MAAM,CAAC,8BAA8B,EACrCS,cAAc,UAAUT,MAAM,CAAC,0BAA0B;;AAOvE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeType | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === SizeType.REGULAR ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n   * В модальных окнах по умолчанию `plain`.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме `card`.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n          mode && stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","AppRootContext","ModalRootContext","RootComponent","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","REGULAR","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","platform","isTabPanel","role","process","env","NODE_ENV","undefined","Component","baseClassName","IOS","className","Fragment","size"],"mappings":"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"}

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

@@ -64,13 +64,15 @@
   }
 }
 
-.Group--sizeX-compact {
+.Group--sizeX-compact,
+.Group--sizeX-compact.Group--mode-card {
   padding-left: 0;
   padding-right: 0;
 }
 
 @media (max-width: 767.9px) {
-  .Group--sizeX-none {
+  .Group--sizeX-none,
+  .Group--sizeX-none.Group--mode-card {
     padding-left: 0;
     padding-right: 0;
   }
@@ -90,7 +92,27 @@
   }
 }
 
-.Group--mode-card::after {
+.Group--sizeX-compact.Group--mode-card:first-of-type {
+  border-radius: 0 0 var(--vkui--size_border_radius_paper--regular)
+    var(--vkui--size_border_radius_paper--regular);
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none.Group--mode-card:first-of-type {
+    border-radius: 0 0 var(--vkui--size_border_radius_paper--regular)
+      var(--vkui--size_border_radius_paper--regular);
+  }
+}
+
+/**
+ * Изменено с ::after на ::before
+ * потому что при ::after абсолютно позиционированный элемент накладывается
+ * поверх любого другого абсолютно позиционированного элемента внутри Group,
+ * например поверх Tooltip
+ * См. пример: Slider c пропом withTooltip
+ */
+
+.Group--mode-card::before {
   content: '';
   left: 0;
   top: 0;
@@ -103,7 +125,7 @@
 }
 
 @media (min-width: 768px) {
-  .Group--sizeX-none.Group--mode-none::after {
+  .Group--sizeX-none.Group--mode-none::before {
     content: '';
     left: 0;
     top: 0;
@@ -116,6 +138,16 @@
   }
 }
 
+.Group--sizeX-compact.Group--mode-card::before {
+  box-shadow: none;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none.Group--mode-card::before {
+    box-shadow: none;
+  }
+}
+
 .Group--mode-plain + .Group__separator,
 .Group--mode-plain + .Group__separator + .Group__separator {
   padding-top: 8px;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {
     mode?: 'primary' | 'secondary' | 'tertiary';
     size?: 'regular' | 'large';
     subtitle?: React.ReactNode;
@@ -17,4 +17,4 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootR
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export declare const Header: ({ mode, size, children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps }: HeaderProps) => React.JSX.Element;
+export declare const Header: ({ mode, size, children, subtitle, indicator, aside, multiline, ...restProps }: HeaderProps) => React.JSX.Element;

package/dist/cssm/components/Header/Header.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
@@ -61,18 +62,19 @@ const HeaderContent = ({ mode, size, ...restProps })=>{
     }
     return null;
 };
+const stylesMode = {
+    primary: styles['Header--mode-primary'],
+    secondary: styles['Header--mode-secondary'],
+    tertiary: styles['Header--mode-tertiary']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
- */ export const Header = ({ mode = 'primary', size = 'regular', children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps })=>{
+ */ export const Header = ({ mode = 'primary', size = 'regular', children, subtitle, indicator, aside, multiline, ...restProps })=>{
     const platform = usePlatform();
-    return /*#__PURE__*/ React.createElement("header", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        Component: "header",
         ...restProps,
-        ref: getRootRef,
-        className: classNames(styles['Header'], platform === Platform.IOS && styles['Header--ios'], {
-            primary: styles['Header--mode-primary'],
-            secondary: styles['Header--mode-secondary'],
-            tertiary: styles['Header--mode-tertiary']
-        }[mode], isPrimitiveReactNode(indicator) && styles['Header--pi'], hasReactNode(subtitle) && styles['Header--with-subtitle'], className)
+        baseClassName: classNames(styles['Header'], platform === Platform.IOS && styles['Header--ios'], stylesMode[mode], isPrimitiveReactNode(indicator) && styles['Header--pi'], hasReactNode(subtitle) && styles['Header--with-subtitle'])
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Header__main']
     }, /*#__PURE__*/ React.createElement(HeaderContent, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      Component=\"header\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        stylesMode[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","children","subtitle","indicator","aside","multiline","Component","baseClassName","div","className","span"],"mappings":"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"}

package/dist/cssm/components/HorizontalCell/HorizontalCell.js

@@ -6,6 +6,11 @@ import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './HorizontalCell.module.css';
+const stylesSize = {
+    s: styles['HorizontalCell--size-s'],
+    m: styles['HorizontalCell--size-m'],
+    l: styles['HorizontalCell--size-l']
+};
 const CellTypography = ({ size, children, ...restProps })=>{
     return size === 's' ? /*#__PURE__*/ React.createElement(Caption, restProps, children) : /*#__PURE__*/ React.createElement(Subhead, restProps, children);
 };
@@ -17,11 +22,7 @@ const CellTypography = ({ size, children, ...restProps })=>{
     return /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,
         style: style,
-        className: classNames(styles['HorizontalCell'], {
-            s: styles['HorizontalCell--size-s'],
-            m: styles['HorizontalCell--size-m'],
-            l: styles['HorizontalCell--size-l']
-        }[size], className)
+        className: classNames(styles['HorizontalCell'], stylesSize[size], className)
     }, /*#__PURE__*/ React.createElement(Tappable, {
         className: styles['HorizontalCell__body'],
         getRootRef: getRef,