@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","sizeY","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAIhD,IAAMC;IACJC,IAAI;GACHF,SAASG,OAAO;AAkCnB;;CAEC,GACD,OAAO,IAAMC,YAAY,iBAWA;kCAVvBC,WAAAA,0CAAY,kDACZC,QAAAA,oCAAS,2BACTC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2Bd,iBAAAA,wCAAAA,eAAnBgB,OAAAA,0CAAQ;IAChB,IAA0BlB,mCAAAA,MAAMmB,QAAQ,CAAC,KAAK,OAAvCC,QAAmBpB,oBAAZqB,WAAYrB;IAE1B,IAAMsB,mBAAmB,SAACC,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,IAAI;IACf;IAEA,IAAMI,mBAAmB,SAACF,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACb,mDACKS;QACJS,KAAKf;QACLgB,cAAcL;QACdM,cAAcH;QACdT,WAAWf,4BAETc,SAAS,4CACTN,WAAW,aACT,CAAA;YACEoB,KAAK;YACLC,KAAK;QACP,CAAA,CAAC,CAACrB,OAAO,EACXS,UAAUf,SAAS4B,OAAO,IAAI3B,eAAe,CAACc,MAAM,EACpDJ,uCACA,CAACA,YAAYM,iCACbJ;QAGDJ,wBAAU,oBAACoB;QAAKhB,SAAS;OAAgCJ,SACzDF,UACAG,uBACC,oBAACmB;QAAKhB,WAAWf,mCAAuC;OACrDY,sBAGL,oBAACmB;QAAKC,eAAAA,IAAW;QAACjB,SAAS;;AAGjC,EAAE"}
+{"version":3,"sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(elRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n      <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden","thin","visible"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAG5D,IAAMC;IACJC,IAAI;GACHH,SAASI,OAAO;AAkCnB;;CAEC,GACD,OAAO,IAAMC,YAAY,iBAWA;kCAVvBC,WAAAA,0CAAY,kDACZC,QAAAA,oCAAS,2BACTC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,QAAQlB,aAAaW;IAC3B,IAAMQ,cAAclB,eAAeiB;IACnC,IAA2BnB,iBAAAA,wCAAAA,eAAnBqB,OAAAA,0CAAQ;IAChB,IAA0BvB,mCAAAA,MAAMwB,QAAQ,CAAC,KAAK,OAAvCC,QAAmBzB,oBAAZ0B,WAAY1B;IAE1B,IAAM2B,mBAAmB,SAACC,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,IAAI;IACf;IAEA,IAAMI,mBAAmB,SAACF,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACf,mDACKS;QACJW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWlB,4BAETiB,SAAS,4CACTN,WAAW,aACT,CAAA;YACEsB,KAAK;YACLC,KAAK;QACP,CAAA,CAAC,CAACvB,OAAO,EACXW,UAAUlB,SAAS+B,OAAO,IAAI7B,eAAe,CAACgB,MAAM,EACpDN,uCACA,CAACA,YAAYQ,iCACbN;QAGDJ,wBAAU,oBAACsB;QAAKlB,SAAS;OAAgCJ,SACzDF,UACAG,uBACC,oBAACqB;QAAKlB,WAAWlB,mCAAuC;OACrDe,sBAGL,oBAACqB;QAAKC,eAAAA,IAAW;QAACnB,SAAS;sBAC3B,oBAACb;QAAaiC,MAAAA,IAAI;QAACC,SAASlB;QAAaJ,MAAK;;AAGpD,EAAE"}

package/dist/components/FormItem/FormItem.d.ts

@@ -7,8 +7,10 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
     status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
+     *
+     * Режим `indent` предназначен для визуального отступа
      */
-    removable?: boolean;
+    removable?: boolean | 'indent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem

package/dist/components/FormItem/FormItem.js

@@ -48,7 +48,8 @@ var sizeYClassNames = _define_property({
                 onRemove(e, rootEl.current);
             }
         },
-        removePlaceholder: removePlaceholder
+        removePlaceholder: removePlaceholder,
+        indent: removable === "indent"
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiFormItem__removable", "vkuiInternalFormItem__removable")
     }, wrappedChildren)) : wrappedChildren);

package/dist/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  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: 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  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\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        >\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","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","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;AAGxD,IAAMC,kBAEJ;IADAC,MAAMV,uCAA2C;GAChDK,SAASM,OAAO,EAAGX,0CAElB;AAkBJ;;CAEC,GACD,OAAO,IAAMY,WAAW,iBAYH;QAXnBC,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWjB,0DACXkB,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASpB,aAAaiB;IAC5B,IAA2BlB,iBAAAA,wCAAAA,eAAnBsB,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,oBAAC3B,MAAM4B,QAAQ,QACZ1B,aAAaa,sBAAQ,oBAACN;QAAQc,SAAS;OAA4BR,MACnED,UACAZ,aAAac,yBAAW,oBAACR;QAASe,SAAS;OAA+BP;IAI/E,qBACE,oBAACE,mDACKM;QACJK,KAAKJ;QACLF,WAAWtB,2BAET,wBACAgB,WAAW,aACT,CAAA;YACEa,OAAO7B,yCAEL;YAEF8B,OAAO9B,yCAEL;QAEJ,CAAA,CAAC,CAACgB,OAAO,EACXS,UAAUpB,SAAS0B,OAAO,IAAItB,eAAe,CAACgB,MAAM,EACpDxB,aAAaa,QACXd,oCAAwC,kCAC1CkB,aAAalB,sCAA0C,oCACvDsB;QAGDJ,0BACC,oBAACZ;QACC0B,OAAM;QACNb,UAAU,SAACc,GAAM;YACf,IAAIT,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQU,OAAO,EAAE;gBACnBf,SAASc,GAAGT,OAAOU,OAAO;YAC5B,CAAC;QACH;QACAd,mBAAmBA;qBAEnB,oBAACe;QACCb,WAAWtB,sCAA0C;OAEpD0B,oBAILA,eACD;AAGP,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 { 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  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  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\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","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","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;AAGxD,IAAMC,kBAEJ;IADAC,MAAMV,uCAA2C;GAChDK,SAASM,OAAO,EAAGX,0CAElB;AAoBJ;;CAEC,GACD,OAAO,IAAMY,WAAW,iBAYH;QAXnBC,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWjB,0DACXkB,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASpB,aAAaiB;IAC5B,IAA2BlB,iBAAAA,wCAAAA,eAAnBsB,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,oBAAC3B,MAAM4B,QAAQ,QACZ1B,aAAaa,sBAAQ,oBAACN;QAAQc,SAAS;OAA4BR,MACnED,UACAZ,aAAac,yBAAW,oBAACR;QAASe,SAAS;OAA+BP;IAI/E,qBACE,oBAACE,mDACKM;QACJK,KAAKJ;QACLF,WAAWtB,2BAET,wBACAgB,WAAW,aACT,CAAA;YACEa,OAAO7B,yCAEL;YAEF8B,OAAO9B,yCAEL;QAEJ,CAAA,CAAC,CAACgB,OAAO,EACXS,UAAUpB,SAAS0B,OAAO,IAAItB,eAAe,CAACgB,MAAM,EACpDxB,aAAaa,QACXd,oCAAwC,kCAC1CkB,aAAalB,sCAA0C,oCACvDsB;QAGDJ,0BACC,oBAACZ;QACC0B,OAAM;QACNb,UAAU,SAACc,GAAM;YACf,IAAIT,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQU,OAAO,EAAE;gBACnBf,SAASc,GAAGT,OAAOU,OAAO;YAC5B,CAAC;QACH;QACAd,mBAAmBA;QACnBe,QAAQjB,cAAc;qBAEtB,oBAACkB;QACCd,WAAWtB,sCAA0C;OAEpD0B,oBAILA,eACD;AAGP,EAAE"}

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

@@ -5,8 +5,10 @@ export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElemen
     mode?: 'vertical' | 'horizontal';
     /**
      * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
+     *
+     * Режим `indent` предназначен для визуального отступа.
      */
-    removable?: boolean;
+    removable?: boolean | 'indent';
     /**
      * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.
      */

package/dist/components/FormLayoutGroup/FormLayoutGroup.js

@@ -38,7 +38,8 @@ var sizeYClassNames = _define_property({
             if (rootEl === null || rootEl === void 0 ? void 0 : rootEl.current) {
                 onRemove(e, rootEl.current);
             }
-        }
+        },
+        indent: removable === "indent"
     }, children) : /*#__PURE__*/ React.createElement(React.Fragment, null, children, /*#__PURE__*/ React.createElement("span", {
         className: "vkuiFormLayoutGroup__offset",
         "aria-hidden": true

package/dist/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  removable?: boolean;\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        >\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","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","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;AAGnE,IAAMC,kBAKJ;IAJAC,MAAMP,8CAEJ;GAEDI,SAASI,OAAO,EAAGR,iDAElB;AAoBJ;;CAEC,GACD,OAAO,IAAMS,kBAAkB,iBAUH;QAT1BC,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWd,wBACXe,oBAAAA,YACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2Bf,iBAAAA,wCAAAA,eAAnBiB,OAAAA,0CAAQ;IAChB,IAAMC,cAAcR,aAAaD,SAAS;IAC1C,IAAMU,cAAcR,aAAaF,SAAS;IAC1C,IAAMW,SAASnB,aAAaa;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWjB,WACTmB,UAAUf,SAASqB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPX,mDAEE,iDAEJoB,eACEpB,6CAEE,2CAEJqB,eACErB,6CAEE,2CAEJiB;OAEEC,YAEHE,4BACC,oBAACf;QACCY,SAAS;QACTS,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,SAACY,GAAM;YACf,IAAIL,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQM,OAAO,EAAE;gBACnBb,SAASY,GAAGL,OAAOM,OAAO;YAC5B,CAAC;QACH;OAEClB,0BAGH,oBAACX,MAAM8B,QAAQ,QACZnB,wBACD,oBAACoB;QAAKb,SAAS;QAAqCc,eAAAA,IAAW;OAElE;AAGP,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 { 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","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;AAGnE,IAAMC,kBAKJ;IAJAC,MAAMP,8CAEJ;GAEDI,SAASI,OAAO,EAAGR,iDAElB;AAsBJ;;CAEC,GACD,OAAO,IAAMS,kBAAkB,iBAUH;QAT1BC,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWd,wBACXe,oBAAAA,YACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2Bf,iBAAAA,wCAAAA,eAAnBiB,OAAAA,0CAAQ;IAChB,IAAMC,cAAcR,aAAaD,SAAS;IAC1C,IAAMU,cAAcR,aAAaF,SAAS;IAC1C,IAAMW,SAASnB,aAAaa;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWjB,WACTmB,UAAUf,SAASqB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPX,mDAEE,iDAEJoB,eACEpB,6CAEE,2CAEJqB,eACErB,6CAEE,2CAEJiB;OAEEC,YAEHE,4BACC,oBAACf;QACCY,SAAS;QACTS,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,SAACY,GAAM;YACf,IAAIL,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQM,OAAO,EAAE;gBACnBb,SAASY,GAAGL,OAAOM,OAAO;YAC5B,CAAC;QACH;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACX,MAAM+B,QAAQ,QACZpB,wBACD,oBAACqB;QAAKd,SAAS;QAAqCe,eAAAA,IAAW;OAElE;AAGP,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {
+import { HasChildren, HasRootRef } from '../../types';
+export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, HasChildren {
     header?: React.ReactNode;
     description?: React.ReactNode;
     /**
@@ -20,6 +20,8 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
      * Отвечает за отступы вокруг контента в режиме 'card'.
      */
     padding?: 's' | 'm';
-    children?: React.ReactNode;
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */
 export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => JSX.Element;

package/dist/components/Group/Group.js

@@ -17,8 +17,10 @@ var _obj;
 var sizeXClassNames = (_obj = {
     none: "vkuiGroup--sizeX-none"
 }, _define_property(_obj, SizeType.COMPACT, "vkuiGroup--sizeX-compact"), _define_property(_obj, SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _obj);
-var warn = warnOnce("TabsItem");
-export var Group = function(_param) {
+var warn = warnOnce("Group");
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */ export var Group = function(_param) {
     var header = _param.header, description = _param.description, children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? "auto" : _param_separator, getRootRef = _param.getRootRef, modeProps = _param.mode, _param_padding = _param.padding, padding = _param_padding === void 0 ? "m" : _param_padding, className = _param.className, tabIndexProp = _param.tabIndex, restProps = _object_without_properties(_param, [
         "header",
         "description",
@@ -47,7 +49,7 @@ export var Group = function(_param) {
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", _object_spread_props(_object_spread({}, restProps), {
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: classNames("vkuiGroup", platform === Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
+        className: classNames("vkuiInternalGroup", "vkuiGroup", platform === Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
             none: classNames("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
             plain: classNames("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
             card: classNames("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")

package/dist/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 { 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: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<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`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\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  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  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          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(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","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;IAGnC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBR,SAASS,OAAO,gDAFK,MAGrBT,SAASU,OAAO,+BAHK;AA6BxB,IAAMC,OAAOT,SAAS;AAEtB,OAAO,IAAMU,QAAQ,iBAWH;QAVhBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkB9B,MAAM+B,UAAU,CAACvB,kBAAnCsB;IACR,IAAME,WAAW5B;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnB8B,OAAAA,0CAAQ;IAEhB,IAAIV,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,IAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,IAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,IAAMY,qBAAqBvC,mCAEzBoB,cAAc;IAGhB,qBACE,wDACE,oBAACoB,mDACKZ;QACJF,UAAUA;QACVe,KAAKpB;QACLI,WAAWzB,wBAET+B,aAAa1B,SAASqC,GAAG,sBACzB/B,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMZ,mCAAuC;YAC7C2C,OAAO3C,oCAAwC;YAC/C4C,MAAM5C,mCAAuC;QAC/C,CAAA,CAAC,CAACsB,KAAK,EACT;YACEuB,CAAC;YACDC,CAAC;QACH,CAAC,CAACtB,QAAQ,EACVC;QAGDR,QACAE,UACAlB,aAAaiB,8BACZ,oBAACR;QAASe,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,oBAACrB,MAAMgD,QAAQ,sBACb,oBAACtC;QACCgB,WAAWzB,WAAWuC;QACtBS,MAAM;sBAER,oBAACxC;QACCiB,WAAWzB,WAAWuC;;AAMlC,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 { 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: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\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`. В модальных окнах\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  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  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          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(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","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;IAGnC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBR,SAASS,OAAO,gDAFK,MAGrBT,SAASU,OAAO,+BAHK;AA+BxB,IAAMC,OAAOT,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMU,QAAQ,iBAWH;QAVhBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkB9B,MAAM+B,UAAU,CAACvB,kBAAnCsB;IACR,IAAME,WAAW5B;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnB8B,OAAAA,0CAAQ;IAEhB,IAAIV,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,IAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,IAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,IAAMY,qBAAqBvC,mCAEzBoB,cAAc;IAGhB,qBACE,wDACE,oBAACoB,mDACKZ;QACJF,UAAUA;QACVe,KAAKpB;QACLI,WAAWzB,WACT,kCAEA+B,aAAa1B,SAASqC,GAAG,sBACzB/B,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMZ,mCAAuC;YAC7C2C,OAAO3C,oCAAwC;YAC/C4C,MAAM5C,mCAAuC;QAC/C,CAAA,CAAC,CAACsB,KAAK,EACT;YACEuB,CAAC;YACDC,CAAC;QACH,CAAC,CAACtB,QAAQ,EACVC;QAGDR,QACAE,UACAlB,aAAaiB,8BACZ,oBAACR;QAASe,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,oBAACrB,MAAMgD,QAAQ,sBACb,oBAACtC;QACCgB,WAAWzB,WAAWuC;QACtBS,MAAM;sBAER,oBAACxC;QACCiB,WAAWzB,WAAWuC;;AAMlC,EAAE"}

package/dist/components/Header/Header.js

@@ -7,8 +7,8 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Headline } from "../Typography/Headline/Headline";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
 var HeaderContent = function(_param) {
     var mode = _param.mode, size = _param.size, restProps = _object_without_properties(_param, [
@@ -27,16 +27,16 @@ var HeaderContent = function(_param) {
                     weight: "1",
                     level: "3"
                 }, restProps));
+            case "secondary":
+                return /*#__PURE__*/ React.createElement(Footnote, _object_spread({
+                    weight: "1",
+                    caps: true
+                }, restProps));
             case "tertiary":
                 return /*#__PURE__*/ React.createElement(Title, _object_spread({
                     weight: "1",
                     level: "3"
                 }, restProps));
-            case "secondary":
-                return /*#__PURE__*/ React.createElement(Footnote, _object_spread({
-                    weight: "2",
-                    caps: true
-                }, restProps));
         }
     }
     if (platform === Platform.VKCOM) {
@@ -46,9 +46,14 @@ var HeaderContent = function(_param) {
                     level: "2",
                     weight: "1"
                 }, restProps)) : /*#__PURE__*/ React.createElement(Headline, _object_spread({
-                    weight: "3"
+                    level: "1",
+                    weight: "2"
                 }, restProps));
             case "secondary":
+                return /*#__PURE__*/ React.createElement(Footnote, _object_spread({
+                    caps: true,
+                    weight: "1"
+                }, restProps));
             case "tertiary":
                 return /*#__PURE__*/ React.createElement(Footnote, restProps);
         }
@@ -61,15 +66,15 @@ var HeaderContent = function(_param) {
             }, restProps)) : /*#__PURE__*/ React.createElement(Headline, _object_spread({
                 weight: "2"
             }, restProps));
-        case "tertiary":
-            return /*#__PURE__*/ React.createElement(Headline, _object_spread({
-                weight: "2"
-            }, restProps));
         case "secondary":
             return /*#__PURE__*/ React.createElement(Footnote, _object_spread({
                 weight: "1",
                 caps: true
             }, restProps));
+        case "tertiary":
+            return /*#__PURE__*/ React.createElement(Headline, _object_spread({
+                weight: "2"
+            }, restProps));
     }
     return null;
 };
@@ -88,15 +93,14 @@ var HeaderContent = function(_param) {
         "className"
     ]);
     var platform = usePlatform();
-    var AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
-    var SubtitleTypography = mode === "secondary" ? Subhead : Footnote;
+    var AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;
     return /*#__PURE__*/ React.createElement("header", _object_spread_props(_object_spread({}, restProps), {
         ref: getRootRef,
         className: classNames("vkuiHeader", platform === Platform.VKCOM && "vkuiHeader--vkcom", platform === Platform.ANDROID && "vkuiHeader--android", platform === Platform.IOS && "vkuiHeader--ios", {
             primary: "vkuiHeader--mode-primary",
             secondary: "vkuiHeader--mode-secondary",
             tertiary: "vkuiHeader--mode-tertiary"
-        }[mode], isPrimitiveReactNode(indicator) && "vkuiHeader--pi", className)
+        }[mode], isPrimitiveReactNode(indicator) && "vkuiHeader--pi", hasReactNode(subtitle) && "vkuiHeader--with-subtitle", className)
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiHeader__main"
     }, /*#__PURE__*/ React.createElement(HeaderContent, {
@@ -108,8 +112,8 @@ var HeaderContent = function(_param) {
         className: classNames("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
     }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiHeader__indicator",
-        weight: mode === "primary" || mode === "secondary" ? "1" : undefined
-    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(SubtitleTypography, {
+        weight: "2"
+    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
         className: "vkuiHeader__subtitle",
         Component: "span"
     }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(AsideTypography, {

package/dist/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 { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\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 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case 'secondary':\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline weight=\"3\" {...restProps} />\n        );\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...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 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...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  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\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        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-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote\n              className={styles['Header__indicator']}\n              weight={mode === 'primary' || mode === 'secondary' ? '1' : undefined}\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Subhead","Text","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","SubtitleTypography","header","ref","ANDROID","primary","secondary","tertiary","div","Component","span","undefined"],"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, 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  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline level=\"1\" weight=\"2\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote caps weight=\"1\" {...restProps} />;\n      case 'tertiary':\n        return <Footnote {...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  const AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\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-in--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 className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","header","ref","ANDROID","primary","secondary","tertiary","div","Component","span"],"mappings":"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"}

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -11,6 +11,10 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
      */
     getScrollToRight?: ScrollPositionHandler;
     arrowSize?: 'm' | 'l';
+    /**
+     * Смещает иконки кнопок навигации по вертикали.
+     */
+    arrowOffsetY?: number | string;
     showArrows?: boolean | 'always';
     scrollAnimationDuration?: number;
     /**
@@ -22,4 +26,4 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -65,12 +65,13 @@ function doScroll(param) {
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */ export var HorizontalScroll = function(_param) {
-    var children = _param.children, getScrollToLeft = _param.getScrollToLeft, getScrollToRight = _param.getScrollToRight, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, _param_scrollAnimationDuration = _param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, getRef = _param.getRef, className = _param.className, _param_scrollOnAnyWheel = _param.scrollOnAnyWheel, scrollOnAnyWheel = _param_scrollOnAnyWheel === void 0 ? false : _param_scrollOnAnyWheel, restProps = _object_without_properties(_param, [
+    var children = _param.children, getScrollToLeft = _param.getScrollToLeft, getScrollToRight = _param.getScrollToRight, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, arrowOffsetY = _param.arrowOffsetY, _param_scrollAnimationDuration = _param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, getRef = _param.getRef, className = _param.className, _param_scrollOnAnyWheel = _param.scrollOnAnyWheel, scrollOnAnyWheel = _param_scrollOnAnyWheel === void 0 ? false : _param_scrollOnAnyWheel, restProps = _object_without_properties(_param, [
         "children",
         "getScrollToLeft",
         "getScrollToRight",
         "showArrows",
         "arrowSize",
+        "arrowOffsetY",
         "scrollAnimationDuration",
         "getRef",
         "className",
@@ -187,11 +188,13 @@ function doScroll(param) {
         className: "vkuiHorizontalScroll__in-wrapper"
     }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "left",
         className: "vkuiHorizontalScroll__arrowLeft",
         onClick: scrollToLeft
     }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "right",
         className: "vkuiHorizontalScroll__arrowRight",
         onClick: scrollToRight

package/dist/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","scrollOnAnyWheel","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","direction","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","offsetY","direction","onClick"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,aAAa,QAAQ,eAAe;AAE7C,SAASC,qBAAqB,QAAQ,0BAA0B;AA6ChE;;CAEC,GACD,SAASC,MAAM;IACb,OAAOC,eAAeA,YAAYD,GAAG,GAAGC,YAAYD,GAAG,KAAKE,KAAKF,GAAG,EAAE;AACxE;AAEA;;;CAGC,GACD,IAAMG,2BAA2B,SAACC;WAAoBC,KAAKC,IAAI,CAACF,GAAGG,UAAU;;AAE7E;;;;CAIC,GACD,IAAMC,wBAAwB;AAE9B,SAASC,SAAS,KASF,EAAE;QARhBC,gBADgB,MAChBA,eACAC,oBAFgB,MAEhBA,mBACAC,iBAHgB,MAGhBA,gBACAC,wBAJgB,MAIhBA,uBACAC,cALgB,MAKhBA,aACAC,gBANgB,MAMhBA,eACAC,qBAPgB,MAOhBA,qDAPgB,MAQhBC,yBAAAA,sEAA0BT;IAE1B,IAAI,CAACE,iBAAiB,CAACC,mBAAmB;QACxC;IACF,CAAC;IAED;;GAEC,GACD,IAAMO,UAAUF,qBAAqBN,cAAcS,WAAW;IAE9D,IAAIC,YAAYjB,yBAAyBO;IACzC,IAAIW,UAAUV,kBAAkBS;IAEhCL;IAEA,IAAIM,WAAWH,SAAS;QACtBL;QACAQ,UAAUH;IACZ,CAAC;IAED,IAAMI,YAAYtB;IAEjB,CAAA,SAASuB,SAAS;QACjB,IAAI,CAACb,eAAe;YAClBI;YACA;QACF,CAAC;QAED,IAAMU,OAAOxB;QACb,IAAMyB,UAAUpB,KAAKqB,GAAG,CAAC,AAACF,CAAAA,OAAOF,SAAQ,IAAKL,yBAAyB;QAEvE,IAAMU,QAAQ7B,cAAc2B;QAE5B,IAAMG,cAAcR,YAAY,AAACC,CAAAA,UAAUD,SAAQ,IAAKO;QACxDjB,cAAcH,UAAU,GAAGF,KAAKC,IAAI,CAACsB;QAErC,IAAIzB,yBAAyBO,mBAAmBL,KAAKwB,GAAG,CAAC,GAAGR,YAAYI,YAAY,GAAG;YACrFK,sBAAsBP;YACtB;QACF,CAAC;QAEDT;QACAF,eAAemB,KAAK;QACpB,IAAInB,eAAeoB,MAAM,GAAG,GAAG;YAC7BpB,cAAc,CAAC,EAAE;QACnB,CAAC;IACH,CAAA;AACF;AAEA;;CAEC,GACD,OAAO,IAAMqB,mBAAmB,iBAYH;QAX3BC,kBAAAA,UACAC,yBAAAA,iBACAC,0BAAAA,6CACAC,YAAAA,4CAAa,IAAI,gDACjBC,WAAAA,0CAAY,wBACZC,sBAAAA,sDACAtB,yBAAAA,sEAA0BT,wDAC1BgC,gBAAAA,QACAC,mBAAAA,4CACAC,kBAAAA,wDAAmB,KAAK,4BACrBC;QAVHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB;QACAuB;QACAC;QACAC;;IAGA,IAA0ClD,mCAAAA,MAAMoD,QAAQ,CAAC,KAAK,OAAvDC,gBAAmCrD,oBAApBsD,mBAAoBtD;IAC1C,IAA4CA,oCAAAA,MAAMoD,QAAQ,CAAC,KAAK,OAAzDG,iBAAqCvD,qBAArBwD,oBAAqBxD;IAE5C,IAAMyD,uBAAuBzD,MAAM0D,MAAM,CAAC,KAAK;IAE/C,IAAMC,cAActD,aAAa2C;IAEjC,IAAM5B,iBAAiBpB,MAAM0D,MAAM,CAAiB,EAAE;IAEtD,IAAME,aAAazD;IAEnB,IAAM0D,WAAW7D,MAAM8D,WAAW,CAChC,SAAC3C,mBAA6C;QAC5C,IAAMD,gBAAgByC,YAAYI,OAAO;QAEzC3C,eAAe2C,OAAO,CAACC,IAAI,CAAC;gBAQJ9C;YAPtBD,OAAAA,SAAS;gBACPC,eAAAA;gBACAC,mBAAAA;gBACAC,gBAAgBA,eAAe2C,OAAO;gBACtC1C,uBAAuB;2BAAMmC,kBAAkB,KAAK;;gBACpDlC,aAAa;2BAAOmC,qBAAqBM,OAAO,GAAG,KAAK;;gBACxDxC,eAAe;2BAAOkC,qBAAqBM,OAAO,GAAG,IAAI;;gBACzDvC,oBAAoBN,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,CAAAA,mCAAAA,cAAe+C,iBAAiB,cAAhC/C,8CAAAA,KAAAA,IAAAA,iCAAkCgD,WAAF,AAAD,KAAkB;gBACrEzC,yBAAAA;YACF;;QAEF,IAAIL,eAAe2C,OAAO,CAACvB,MAAM,KAAK,GAAG;YACvCpB,eAAe2C,OAAO,CAAC,EAAE;QAC3B,CAAC;IACH,GACA;QAACtC;QAAyBkC;KAAY;IAGxC,IAAMQ,eAAenE,MAAM8D,WAAW,CAAC,WAAM;QAC3C,IAAM3C,oBACJwB,4BAAAA,6BAAAA,kBAAoB,SAACyB;mBAAcA,IAAIT,YAAYI,OAAO,CAAEpC,WAAW;SAAC;QAC1EkC,SAAS1C;IACX,GAAG;QAACwB;QAAiBkB;QAAUF;KAAY;IAE3C,IAAMU,gBAAgBrE,MAAM8D,WAAW,CAAC,WAAM;QAC5C,IAAM3C,oBACJyB,6BAAAA,8BAAAA,mBAAqB,SAACwB;mBAAcA,IAAIT,YAAYI,OAAO,CAAEpC,WAAW;SAAC;QAC3EkC,SAAS1C;IACX,GAAG;QAACyB;QAAkBiB;QAAUF;KAAY;IAE5C,IAAMW,WAAWtE,MAAM8D,WAAW,CAAC,WAAM;QACvC,IAAIjB,cAAce,cAAcD,YAAYI,OAAO,IAAI,CAACN,qBAAqBM,OAAO,EAAE;YACpF,IAAM7C,gBAAgByC,YAAYI,OAAO;YAEzCT,iBAAiBpC,cAAcH,UAAU,GAAG;YAC5CyC,kBACE7C,yBAAyBO,iBAAiBA,cAAcS,WAAW,GACjET,cAAcgD,WAAW;QAE/B,CAAC;IACH,GAAG;QAACN;QAAYD;QAAad;KAAW;IAExC,IAAM0B,cAAcnE,iBAAiB,UAAUkE;IAC/CtE,MAAMwE,SAAS,CAAC,WAAM;QACpB,IAAIb,YAAYI,OAAO,EAAE;YACvBQ,YAAYE,GAAG,CAACd,YAAYI,OAAO;QACrC,CAAC;IACH,GAAG;QAACQ;QAAaZ;KAAY;IAC7B3D,MAAMwE,SAAS,CAACF,UAAU;QAACX;QAAajB;QAAU4B;KAAS;IAE3D;;GAEC,GACD,IAAMI,UAAU1E,MAAM8D,WAAW,CAC/B,SAACa,GAAkB;QACjBhB,YAAYI,OAAO,CAAEa,QAAQ,CAAC;YAAEC,MAAMF,EAAEG,MAAM,GAAGH,EAAEI,MAAM;YAAEC,UAAU;QAAO;QAC5EL,EAAEM,cAAc;IAClB,GACA;QAACtB;KAAY;IAGf,IAAMuB,aAAa9E,iBAAiB,SAASsE;IAC7C1E,MAAMwE,SAAS,CAAC,WAAM;QACpB,IAAI,CAACb,YAAYI,OAAO,IAAI,CAACb,kBAAkB;YAC7C,OAAOhD;QACT,CAAC;QAEDgF,WAAWT,GAAG,CAACd,YAAYI,OAAO;QAElC,OAAOmB,WAAWC,MAAM;IAC1B,GAAG;QAACD;QAAYvB;QAAaT;KAAiB;IAE9C,qBACE,oBAACkC,+CACKjC;QACJF,WAAWhD,mCAET,gCACA4C,eAAe,YAAY,iDAC3BI;sBAGF,oBAACmC;QAAInC,SAAS;QAAkCoC,KAAK1B;qBACnD,oBAACyB;QAAInC,SAAS;OAA2CP,YAE1DG,cAAee,CAAAA,cAAcA,eAAe0B,SAAQ,KAAMjC,+BACzD,oBAAC9C;QACCgF,MAAMzC;QACN0C,SAASzC;QACT0C,WAAU;QACVxC,SAAS;QACTyC,SAASvB;QAGZtB,cAAee,CAAAA,cAAcA,eAAe0B,SAAQ,KAAM/B,gCACzD,oBAAChD;QACCgF,MAAMzC;QACN0C,SAASzC;QACT0C,WAAU;QACVxC,SAAS;QACTyC,SAASrB;;AAKnB,EAAE"}

package/dist/components/HorizontalScroll/HorizontalScrollArrow.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 export interface HorizontalScrollArrowProps {
     direction: 'left' | 'right';
     size?: 'm' | 'l';
+    offsetY?: number | string;
     onClick(event: React.MouseEvent): void;
     className?: string;
 }
-export declare const HorizontalScrollArrow: ({ size, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;
+export declare const HorizontalScrollArrow: ({ size, offsetY, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;

package/dist/components/HorizontalScroll/HorizontalScrollArrow.js

@@ -6,8 +6,9 @@ import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLe
 import { classNames } from "@vkontakte/vkjs";
 import { Tappable } from "../Tappable/Tappable";
 export var HorizontalScrollArrow = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, direction = _param.direction, onClick = _param.onClick, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, offsetY = _param.offsetY, direction = _param.direction, onClick = _param.onClick, className = _param.className, restProps = _object_without_properties(_param, [
         "size",
+        "offsetY",
         "direction",
         "onClick",
         "className"
@@ -31,7 +32,10 @@ export var HorizontalScrollArrow = function(_param) {
         }[direction], className),
         onClick: onClick
     }), /*#__PURE__*/ React.createElement("span", {
-        className: "vkuiHorizontalScrollArrow__icon"
+        className: "vkuiHorizontalScrollArrow__icon",
+        style: offsetY ? {
+            top: offsetY
+        } : undefined
     }, /*#__PURE__*/ React.createElement(ArrowIcon, null)));
 };
 

package/dist/components/HorizontalScroll/HorizontalScrollArrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Component","hasHover","hasActive","m","l","left","right","span"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAUhD,OAAO,IAAMC,wBAAwB,iBAMH;6BALhCC,MAAAA,gCAAO,mBACPC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE;IAEJ,IAAIL,SAAS,KAAK;QAChBK,YAAYJ,cAAc,SAASP,oBAAoBD,aAAa;IACtE,OAAO;QACLY,YAAYJ,cAAc,SAASL,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG,kDACKM;QACJE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWN,wCAET;YACEY,CAAC;YACDC,CAAC;QACH,CAAC,CAACV,KAAK,EACP;YACEW,IAAI;YACJC,KAAK;QACP,CAAC,CAACX,UAAU,EACZE;QAEFD,SAASA;sBAET,oBAACW;QAAKV,SAAS;qBACb,oBAACE;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  offsetY?: number | string;\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span\n        className={styles['HorizontalScrollArrow__icon']}\n        style={offsetY ? { top: offsetY } : undefined}\n      >\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","HorizontalScrollArrow","size","offsetY","direction","onClick","className","restProps","ArrowIcon","Component","hasHover","hasActive","m","l","left","right","span","style","top","undefined"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAWhD,OAAO,IAAMC,wBAAwB,iBAOH;6BANhCC,MAAAA,gCAAO,mBACPC,iBAAAA,SACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IAEJ,IAAIN,SAAS,KAAK;QAChBM,YAAYJ,cAAc,SAASR,oBAAoBD,aAAa;IACtE,OAAO;QACLa,YAAYJ,cAAc,SAASN,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG,kDACKO;QACJE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWP,wCAET;YACEa,CAAC;YACDC,CAAC;QACH,CAAC,CAACX,KAAK,EACP;YACEY,IAAI;YACJC,KAAK;QACP,CAAC,CAACX,UAAU,EACZE;QAEFD,SAASA;sBAET,oBAACW;QACCV,SAAS;QACTW,OAAOd,UAAU;YAAEe,KAAKf;QAAQ,IAAIgB,SAAS;qBAE7C,oBAACX;AAIT,EAAE"}

package/dist/components/HoverPopper/HoverPopper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PopperCommonProps } from '../Popper/Popper';
-export interface HoverPopperProps extends PopperCommonProps {
+export interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {
     /**
      * Содержимое тултипа
      */

package/dist/components/HoverPopper/HoverPopper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","useState","computedShown","setComputedShown","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,IAAMC,cAAc,iBASH;QARtBC,gBAAAA,QACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,AAAOC,gBAAPD,iCACAE,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,wBACTC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA0Cd,mCAAAA,MAAMgB,QAAQ,CAACJ,UAAU,KAAK,OAAjEK,gBAAmCjB,oBAApBkB,mBAAoBlB;IAE1C,IAAMW,QAAQ,OAAOC,WAAW,YAAYA,SAASK,aAAa;IAElE,IAAME,WAAW,SAACC,OAAmB;QACnC,IAAI,OAAOR,WAAW,WAAW;YAC/BM,iBAAiBE;QACnB,CAAC;QACD,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,IAAMC,cAAclB,WAAW,WAAM;QACnCgB,SAAS,IAAI;IACf,GAAGN;IAEH,IAAMS,cAAcnB,WAAW,WAAM;QACnCgB,SAAS,KAAK;IAChB,GAAGL;IAEH,IAA0BZ,wCAAAA,oBAAoBO,eAAvCc,WAAmBrB,yBAATsB,QAAStB;IAE1B,IAAMuB,gBAAgB,WAAM;QAC1BH,YAAYI,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,IAAMC,gBAAgB,WAAM;QAC1BP,YAAYK,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,IAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,IAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B,WAAM;QAC9B,IAAImB,SAASQ,OAAO,EAAE;YACpBF,oBAAoBG,GAAG,CAACT,SAASQ,OAAO;YACxCD,oBAAoBE,GAAG,CAACT,SAASQ,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,QAAQ,QACZT,OACAb,uBACC,oBAACN,gDACKU;QACJmB,aAAaZ,YAAYI,KAAK;QAC9BS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;QAEVf;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","useState","computedShown","setComputedShown","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,IAAMC,cAAc,iBASH;QARtBC,gBAAAA,QACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,AAAOC,gBAAPD,iCACAE,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,wBACTC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA0Cd,mCAAAA,MAAMgB,QAAQ,CAACJ,UAAU,KAAK,OAAjEK,gBAAmCjB,oBAApBkB,mBAAoBlB;IAE1C,IAAMW,QAAQ,OAAOC,WAAW,YAAYA,SAASK,aAAa;IAElE,IAAME,WAAW,SAACC,OAAmB;QACnC,IAAI,OAAOR,WAAW,WAAW;YAC/BM,iBAAiBE;QACnB,CAAC;QACD,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,IAAMC,cAAclB,WAAW,WAAM;QACnCgB,SAAS,IAAI;IACf,GAAGN;IAEH,IAAMS,cAAcnB,WAAW,WAAM;QACnCgB,SAAS,KAAK;IAChB,GAAGL;IAEH,IAA0BZ,wCAAAA,oBAAoBO,eAAvCc,WAAmBrB,yBAATsB,QAAStB;IAE1B,IAAMuB,gBAAgB,WAAM;QAC1BH,YAAYI,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,IAAMC,gBAAgB,WAAM;QAC1BP,YAAYK,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,IAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,IAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B,WAAM;QAC9B,IAAImB,SAASQ,OAAO,EAAE;YACpBF,oBAAoBG,GAAG,CAACT,SAASQ,OAAO;YACxCD,oBAAoBE,GAAG,CAACT,SAASQ,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,QAAQ,QACZT,OACAb,uBACC,oBAACN,gDACKU;QACJmB,aAAaZ,YAAYI,KAAK;QAC9BS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;QAEVf;AAKX,EAAE"}

package/dist/components/IconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+/// <reference types="react" />
+import { HasChildren } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
-export interface IconButtonProps extends TappableProps {
-    children?: React.ReactNode;
+export interface IconButtonProps extends TappableProps, HasChildren {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton