@vkontakte/vkui 5.1.2 → 5.2.1

package/dist/cjs/components/FormField/FormField.js

@@ -9,17 +9,21 @@ exports.FormField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _adaptivity = require("../../lib/adaptivity");
 var _excluded = ["Component", "status", "children", "getRootRef", "before", "after", "disabled", "mode", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiFormField--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiFormField--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */
 var FormField = function FormField(_ref) {
   var _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'div' : _ref$Component,
+    Component = _ref$Component === void 0 ? 'span' : _ref$Component,
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? 'default' : _ref$status,
     children = _ref.children,
@@ -32,7 +36,8 @@ var FormField = function FormField(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     hover = _React$useState2[0],
@@ -45,21 +50,17 @@ var FormField = function FormField(_ref) {
     e.stopPropagation();
     setHover(false);
   };
-  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
-    role: "presentation"
-  }, restProps, {
+  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    className: (0, _vkjs.classNames)("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], (0, _getSizeYClassName.getSizeYClassName)("vkuiFormField", sizeY), disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
-  }), before && /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
+    className: (0, _vkjs.classNames)("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
+  }), before && /*#__PURE__*/React.createElement("span", {
     className: "vkuiFormField__before"
-  }, before), children, after && /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
+  }, before), children, after && /*#__PURE__*/React.createElement("span", {
     className: "vkuiFormField__after"
-  }, after), /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
+  }, after), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
     className: "vkuiFormField__border"
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","classNames","styles","getSizeYClassName"],"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './FormField.module.css';\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 = 'div',\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 } = 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      role=\"presentation\"\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        styles[`FormField--mode-${mode}`],\n        styles[`FormField--status-${status}`],\n        getSizeYClassName(styles['FormField'], sizeY),\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && (\n        <div role=\"presentation\" className={styles['FormField__before']}>\n          {before}\n        </div>\n      )}\n      {children}\n      {after && (\n        <div role=\"presentation\" className={styles['FormField__after']}>\n          {after}\n        </div>\n      )}\n      <div role=\"presentation\" className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAAoE;AAkCpE;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAS,OAWG;EAAA,0BAVvBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAClBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,sBAA0BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC;EAED,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIF,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC;EAED,oBACE,oBAAC,SAAS;IACR,IAAI,EAAC;EAAc,GACfN,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEa,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAE,IAAAC,gBAAU,mBAEnBC,MAAM,2BAAoBd,IAAI,EAAG,EACjCc,MAAM,6BAAsBpB,MAAM,EAAG,EACrC,IAAAqB,oCAAiB,mBAAsBX,KAAK,CAAC,EAC7CL,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIQ,KAAK,0BAA8B,EAChDN,SAAS;EACT,IAEDJ,MAAM,iBACL;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,GAC7DA,MAAM,CAEV,EACAF,QAAQ,EACRG,KAAK,iBACJ;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA6B,GAC5DA,KAAK,CAET,eACD;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,EAAG,CACzD;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormField.js","names":["sizeYClassNames","none","SizeType","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","classNames","styles","REGULAR"],"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        styles[`FormField--mode-${mode}`],\n        styles[`FormField--status-${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 && <span className={styles['FormField__after']}>{after}</span>}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAgD;AAIhD,IAAMA,eAAe;EACnBC,IAAI;AAAiC,GACpCC,oBAAQ,CAACC,OAAO,iCAClB;AAiCD;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAWG;EAAA,0BAVvBC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAAA,mBAClBC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAClBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,sBAA0BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC;EAED,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIF,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC;EAED,oBACE,oBAAC,SAAS,6BACJN,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEa,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAE,IAAAC,gBAAU,mBAEnBC,MAAM,2BAAoBd,IAAI,EAAG,EACjCc,MAAM,6BAAsBpB,MAAM,EAAG,EACrCU,KAAK,KAAKd,oBAAQ,CAACyB,OAAO,IAAI3B,eAAe,CAACgB,KAAK,CAAC,EACpDL,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIQ,KAAK,0BAA8B,EAChDN,SAAS;EACT,IAEDJ,MAAM,iBAAI;IAAM,SAAS;EAA8B,GAAEA,MAAM,CAAQ,EACvEF,QAAQ,EACRG,KAAK,iBAAI;IAAM,SAAS;EAA6B,GAAEA,KAAK,CAAQ,eACrE;IAAM,mBAAW;IAAC,SAAS;EAA8B,EAAG,CAClD;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/FormItem/FormItem.js

@@ -8,15 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _useExternRef = require("../../hooks/useExternRef");
-var _Subhead = require("../Typography/Subhead/Subhead");
-var _Footnote = require("../Typography/Footnote/Footnote");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useExternRef = require("../../hooks/useExternRef");
+var _adaptivity = require("../../lib/adaptivity");
 var _Removable = require("../Removable/Removable");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _Footnote = require("../Typography/Footnote/Footnote");
+var _Subhead = require("../Typography/Subhead/Subhead");
 var _excluded = ["children", "top", "bottom", "status", "Component", "removable", "onRemove", "removePlaceholder", "getRootRef", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiFormItem--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiFormItem--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
@@ -38,7 +42,8 @@ var FormItem = function FormItem(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var wrappedChildren = /*#__PURE__*/React.createElement(React.Fragment, null, (0, _vkjs.hasReactNode)(top) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
     className: "vkuiFormItem__top"
   }, top), children, (0, _vkjs.hasReactNode)(bottom) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
@@ -46,7 +51,7 @@ var FormItem = function FormItem(_ref) {
   }, bottom));
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
     ref: rootEl,
-    className: (0, _vkjs.classNames)("vkuiFormItem", status !== 'default' && styles["FormItem--status-".concat(status)], (0, _getSizeYClassName.getSizeYClassName)("vkuiFormItem", sizeY), (0, _vkjs.hasReactNode)(top) && "vkuiFormItem--withTop", removable && "vkuiFormItem--removable", className)
+    className: (0, _vkjs.classNames)("vkuiFormItem", status !== 'default' && styles["FormItem--status-".concat(status)], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], (0, _vkjs.hasReactNode)(top) && "vkuiFormItem--withTop", removable && "vkuiFormItem--removable", className)
   }), removable ? /*#__PURE__*/React.createElement(_Removable.Removable, {
     align: "start",
     onRemove: function onRemove(e) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormItem.js","names":["FormItem","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","hasReactNode","classNames","styles","getSizeYClassName","e","current"],"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './FormItem.module.css';\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 } = 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        status !== 'default' && styles[`FormItem--status-${status}`],\n        getSizeYClassName(styles['FormItem'], sizeY),\n        hasReactNode(top) && styles['FormItem--withTop'],\n        removable && styles['FormItem--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 className={styles['FormItem__removable']}>{wrappedChildren}</div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AAiBpE;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAYA;EAAA,IAXnBC,QAAQ,QAARA,QAAQ;IACRC,GAAG,QAAHA,GAAG;IACHC,MAAM,QAANA,MAAM;IAAA,mBACNC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAAA,sBAClBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,SAAQ,8BAAGC,UAAI;IAAA,6BACfC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,MAAM,GAAG,IAAAC,0BAAY,EAACJ,UAAU,CAAC;EACvC,qBAAkB,IAAAK,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAMC,eAAe,gBACnB,oBAAC,KAAK,CAAC,QAAQ,QACZ,IAAAC,kBAAY,EAAChB,GAAG,CAAC,iBAAI,oBAAC,gBAAO;IAAC,SAAS;EAA0B,GAAEA,GAAG,CAAW,EACjFD,QAAQ,EACR,IAAAiB,kBAAY,EAACf,MAAM,CAAC,iBAAI,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAAEA,MAAM,CAAY,CAEhG;EAED,oBACE,oBAAC,SAAS,6BACJS,SAAS;IACb,GAAG,EAAEC,MAAO;IACZ,SAAS,EAAE,IAAAM,gBAAU,kBAEnBf,MAAM,KAAK,SAAS,IAAIgB,MAAM,4BAAqBhB,MAAM,EAAG,EAC5D,IAAAiB,oCAAiB,kBAAqBL,KAAK,CAAC,EAC5C,IAAAE,kBAAY,EAAChB,GAAG,CAAC,2BAA+B,EAChDI,SAAS,6BAAiC,EAC1CK,SAAS;EACT,IAEDL,SAAS,gBACR,oBAAC,oBAAS;IACR,KAAK,EAAC,OAAO;IACb,QAAQ,EAAE,kBAACgB,CAAC,EAAK;MACf,IAAIT,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEU,OAAO,EAAE;QACnBhB,SAAQ,CAACe,CAAC,EAAET,MAAM,CAACU,OAAO,CAAC;MAC7B;IACF,CAAE;IACF,iBAAiB,EAAEd;EAAkB,gBAErC;IAAK,SAAS;EAAgC,GAAEQ,eAAe,CAAO,CAC5D,GAEZA,eACD,CACS;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormItem.js","names":["sizeYClassNames","none","SizeType","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","hasReactNode","classNames","styles","REGULAR","e","current"],"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: styles['FormItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormItem--sizeY-compact'],\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        status !== 'default' && styles[`FormItem--status-${status}`],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) && styles['FormItem--withTop'],\n        removable && styles['FormItem--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 className={styles['FormItem__removable']}>{wrappedChildren}</div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAwD;AAGxD,IAAMA,eAAe;EACnBC,IAAI;AAAgC,GACnCC,oBAAQ,CAACC,OAAO,gCAClB;AAgBD;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAYA;EAAA,IAXnBC,QAAQ,QAARA,QAAQ;IACRC,GAAG,QAAHA,GAAG;IACHC,MAAM,QAANA,MAAM;IAAA,mBACNC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAAA,sBAClBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,SAAQ,8BAAGC,UAAI;IAAA,6BACfC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,MAAM,GAAG,IAAAC,0BAAY,EAACJ,UAAU,CAAC;EACvC,qBAA2B,IAAAK,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAMC,eAAe,gBACnB,oBAAC,KAAK,CAAC,QAAQ,QACZ,IAAAC,kBAAY,EAAChB,GAAG,CAAC,iBAAI,oBAAC,gBAAO;IAAC,SAAS;EAA0B,GAAEA,GAAG,CAAW,EACjFD,QAAQ,EACR,IAAAiB,kBAAY,EAACf,MAAM,CAAC,iBAAI,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAAEA,MAAM,CAAY,CAEhG;EAED,oBACE,oBAAC,SAAS,6BACJS,SAAS;IACb,GAAG,EAAEC,MAAO;IACZ,SAAS,EAAE,IAAAM,gBAAU,kBAEnBf,MAAM,KAAK,SAAS,IAAIgB,MAAM,4BAAqBhB,MAAM,EAAG,EAC5DY,KAAK,KAAKlB,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACoB,KAAK,CAAC,EACpD,IAAAE,kBAAY,EAAChB,GAAG,CAAC,2BAA+B,EAChDI,SAAS,6BAAiC,EAC1CK,SAAS;EACT,IAEDL,SAAS,gBACR,oBAAC,oBAAS;IACR,KAAK,EAAC,OAAO;IACb,QAAQ,EAAE,kBAACgB,CAAC,EAAK;MACf,IAAIT,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEU,OAAO,EAAE;QACnBhB,SAAQ,CAACe,CAAC,EAAET,MAAM,CAACU,OAAO,CAAC;MAC7B;IACF,CAAE;IACF,iBAAiB,EAAEd;EAAkB,gBAErC;IAAK,SAAS;EAAgC,GAAEQ,eAAe,CAAO,CAC5D,GAEZA,eACD,CACS;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js

@@ -8,13 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormLayoutGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _useExternRef = require("../../hooks/useExternRef");
+var _adaptivity = require("../../lib/adaptivity");
 var _Removable = require("../Removable/Removable");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _excluded = ["children", "mode", "removable", "segmented", "removePlaceholder", "onRemove", "getRootRef", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiFormLayoutGroup--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiFormLayoutGroup--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
  */
@@ -32,13 +36,14 @@ var FormLayoutGroup = function FormLayoutGroup(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var isRemovable = removable && mode === 'horizontal';
   var isSegmented = segmented && mode === 'horizontal';
   var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     ref: rootEl,
-    className: (0, _vkjs.classNames)("vkuiFormLayoutGroup", (0, _getSizeYClassName.getSizeYClassName)("vkuiFormLayoutGroup", sizeY), styles["FormLayoutGroup--mode-".concat(mode)], isRemovable && "vkuiFormLayoutGroup--removable", isSegmented && "vkuiFormLayoutGroup--segmented", className)
+    className: (0, _vkjs.classNames)("vkuiFormLayoutGroup", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], styles["FormLayoutGroup--mode-".concat(mode)], isRemovable && "vkuiFormLayoutGroup--removable", isSegmented && "vkuiFormLayoutGroup--segmented", className)
   }, restProps), isRemovable ? /*#__PURE__*/React.createElement(_Removable.Removable, {
     className: "vkuiFormLayoutGroup__removable",
     align: "start",

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

@@ -1 +1 @@
-{"version":3,"file":"FormLayoutGroup.js","names":["FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","className","restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","classNames","getSizeYClassName","styles","e","current"],"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './FormLayoutGroup.module.css';\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 } = 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        styles['FormLayoutGroup'],\n        getSizeYClassName(styles['FormLayoutGroup'], sizeY),\n        styles[`FormLayoutGroup--mode-${mode}`],\n        isRemovable && styles['FormLayoutGroup--removable'],\n        isSegmented && styles['FormLayoutGroup--segmented'],\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"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAoE;AAmBpE;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAUA;EAAA,IAT1BC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IAAA,6BACTC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAAA,qBAC7BC,QAAQ;IAARA,SAAQ,8BAAGC,UAAI;IACfC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,IAAMC,WAAW,GAAGV,SAAS,IAAID,IAAI,KAAK,YAAY;EACtD,IAAMY,WAAW,GAAGV,SAAS,IAAIF,IAAI,KAAK,YAAY;EACtD,IAAMa,MAAM,GAAG,IAAAC,0BAAY,EAACR,UAAU,CAAC;EAEvC,oBACE;IACE,GAAG,EAAEO,MAAO;IACZ,SAAS,EAAE,IAAAE,gBAAU,yBAEnB,IAAAC,oCAAiB,yBAA4BN,KAAK,CAAC,EACnDO,MAAM,iCAA0BjB,IAAI,EAAG,EACvCW,WAAW,oCAAwC,EACnDC,WAAW,oCAAwC,EACnDL,SAAS;EACT,GACEC,SAAS,GAEZG,WAAW,gBACV,oBAAC,oBAAS;IACR,SAAS,kCAAuC;IAChD,KAAK,EAAC,OAAO;IACb,iBAAiB,EAAER,iBAAkB;IACrC,QAAQ,EAAE,kBAACe,CAAC,EAAK;MACf,IAAIL,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEM,OAAO,EAAE;QACnBf,SAAQ,CAACc,CAAC,EAAEL,MAAM,CAACM,OAAO,CAAC;MAC7B;IACF;EAAE,GAEDpB,QAAQ,CACC,gBAEZ,oBAAC,KAAK,CAAC,QAAQ,QACZA,QAAQ,eACT;IAAM,SAAS,+BAAoC;IAAC;EAAW,EAAG,CAErE,CACG;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormLayoutGroup.js","names":["sizeYClassNames","none","SizeType","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","className","restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","classNames","REGULAR","styles","e","current"],"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: styles['FormLayoutGroup--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormLayoutGroup--sizeY-compact'],\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        styles['FormLayoutGroup'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        styles[`FormLayoutGroup--mode-${mode}`],\n        isRemovable && styles['FormLayoutGroup--removable'],\n        isSegmented && styles['FormLayoutGroup--segmented'],\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"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAmE;AAGnE,IAAMA,eAAe;EACnBC,IAAI;AAAuC,GAC1CC,oBAAQ,CAACC,OAAO,uCAClB;AAkBD;AACA;AACA;AACO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAUA;EAAA,IAT1BC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IAAA,6BACTC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAAA,qBAC7BC,QAAQ;IAARA,SAAQ,8BAAGC,UAAI;IACfC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,WAAW,GAAGV,SAAS,IAAID,IAAI,KAAK,YAAY;EACtD,IAAMY,WAAW,GAAGV,SAAS,IAAIF,IAAI,KAAK,YAAY;EACtD,IAAMa,MAAM,GAAG,IAAAC,0BAAY,EAACR,UAAU,CAAC;EAEvC,oBACE;IACE,GAAG,EAAEO,MAAO;IACZ,SAAS,EAAE,IAAAE,gBAAU,yBAEnBL,KAAK,KAAKd,oBAAQ,CAACoB,OAAO,IAAItB,eAAe,CAACgB,KAAK,CAAC,EACpDO,MAAM,iCAA0BjB,IAAI,EAAG,EACvCW,WAAW,oCAAwC,EACnDC,WAAW,oCAAwC,EACnDL,SAAS;EACT,GACEC,SAAS,GAEZG,WAAW,gBACV,oBAAC,oBAAS;IACR,SAAS,kCAAuC;IAChD,KAAK,EAAC,OAAO;IACb,iBAAiB,EAAER,iBAAkB;IACrC,QAAQ,EAAE,kBAACe,CAAC,EAAK;MACf,IAAIL,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEM,OAAO,EAAE;QACnBf,SAAQ,CAACc,CAAC,EAAEL,MAAM,CAACM,OAAO,CAAC;MAC7B;IACF;EAAE,GAEDpB,QAAQ,CACC,gBAEZ,oBAAC,KAAK,CAAC,QAAQ,QACZA,QAAQ,eACT;IAAM,SAAS,+BAAoC;IAAC;EAAW,EAAG,CAErE,CACG;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridAvatar.js","names":["GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","warnOnce","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","classNames","map","url","index","backgroundImage","Badge","GridAvatarBadge"],"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { type ImageBaseProps, ImageBase } from '../ImageBase/ImageBase';\nimport { type GridAvatarBadgeProps, GridAvatarBadge } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+F;AAKxF,IAAMA,wBAAwB,GAAG,EAAE;AAAC;AAEpC,IAAMC,eAAe,GAAG,CAAC;AAAC;AASjC,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAMA;EAAA,oBALrBC,GAAG;IAAHA,GAAG,yBAAG,EAAE;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGN,wBAAwB;IAC/BO,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,GAAG,CAACQ,MAAM,GAAGZ,eAAe,EAAE;MAChCC,IAAI,0FAAuBG,GAAG,CAACQ,MAAM,8HAA0BZ,eAAe,QAAK,OAAO,CAAC;IAC7F;EACF;EAEA,oBACE,oBAAC,oBAAS,6BAAKQ,SAAS;IAAE,IAAI,EAAEH,IAAK;IAAC,SAAS,EAAE,IAAAQ,gBAAU,oBAAuBP,SAAS;EAAE,iBAC3F;IAAK,SAAS,sBAA2B;IAAC;EAAW,GAClDF,GAAG,CAACU,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;IAAA,OAClBA,KAAK,GAAGhB,eAAe,gBACrB;MACE,GAAG,EAAEe,GAAI;MACT,SAAS,wBAA6B;MACtC,KAAK,EAAE;QAAEE,eAAe,gBAASF,GAAG;MAAI;IAAE,EAC1C,GACA,IAAI;EAAA,EACT,CACG,EACLR,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFJ,UAAU,CAACe,KAAK,GAAGC,gCAAe"}
+{"version":3,"file":"GridAvatar.js","names":["GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","warnOnce","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","classNames","map","url","index","backgroundImage","Badge","GridAvatarBadge"],"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+F;AAKxF,IAAMA,wBAAwB,GAAG,EAAE;AAAC;AAEpC,IAAMC,eAAe,GAAG,CAAC;AAAC;AASjC,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAMA;EAAA,oBALrBC,GAAG;IAAHA,GAAG,yBAAG,EAAE;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGN,wBAAwB;IAC/BO,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,GAAG,CAACQ,MAAM,GAAGZ,eAAe,EAAE;MAChCC,IAAI,0FAAuBG,GAAG,CAACQ,MAAM,8HAA0BZ,eAAe,QAAK,OAAO,CAAC;IAC7F;EACF;EAEA,oBACE,oBAAC,oBAAS,6BAAKQ,SAAS;IAAE,IAAI,EAAEH,IAAK;IAAC,SAAS,EAAE,IAAAQ,gBAAU,oBAAuBP,SAAS;EAAE,iBAC3F;IAAK,SAAS,sBAA2B;IAAC;EAAW,GAClDF,GAAG,CAACU,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;IAAA,OAClBA,KAAK,GAAGhB,eAAe,gBACrB;MACE,GAAG,EAAEe,GAAI;MACT,SAAS,wBAA6B;MACtC,KAAK,EAAE;QAAEE,eAAe,gBAASF,GAAG;MAAI;IAAE,EAC1C,GACA,IAAI;EAAA,EACT,CACG,EACLR,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFJ,UAAU,CAACe,KAAK,GAAGC,gCAAe"}

package/dist/cjs/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridAvatarBadge.js","names":["GridAvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNames"],"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseBadgeProps, ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAkG;AAK3F,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAA0D;EAAA,IAApDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,gBAAU,yBAEnBD,IAAI,GAAG,EAAE,kCAAsC,EAC/CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}
+{"version":3,"file":"GridAvatarBadge.js","names":["GridAvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNames"],"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAkG;AAK3F,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAA0D;EAAA,IAApDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,gBAAU,yBAEnBD,IAAI,GAAG,EAAE,kCAAsC,EAC/CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}

package/dist/cjs/components/Group/Group.js

@@ -8,18 +8,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.Group = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _platform = require("../../lib/platform");
 var _vkjs = require("@vkontakte/vkjs");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _usePlatform = require("../../hooks/usePlatform");
-var _Spacing = require("../Spacing/Spacing");
-var _Separator = require("../Separator/Separator");
-var _Footnote = require("../Typography/Footnote/Footnote");
+var _adaptivity = require("../../lib/adaptivity");
+var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
+var _Separator = require("../Separator/Separator");
+var _Spacing = require("../Spacing/Spacing");
+var _Footnote = require("../Typography/Footnote/Footnote");
 var _excluded = ["header", "description", "children", "separator", "getRootRef", "mode", "padding", "className", "tabIndex"];
+var _sizeXClassNames;
+var sizeXClassNames = (_sizeXClassNames = {
+  none: "vkuiGroup--sizeX-none"
+}, (0, _defineProperty2.default)(_sizeXClassNames, _adaptivity.SizeType.COMPACT, "vkuiGroup--sizeX-compact"), (0, _defineProperty2.default)(_sizeXClassNames, _adaptivity.SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _sizeXClassNames);
 var warn = (0, _warnOnce.warnOnce)('TabsItem');
 var Group = function Group(_ref) {
   var header = _ref.header,
@@ -38,7 +43,8 @@ var Group = function Group(_ref) {
     isInsideModal = _React$useContext.isInsideModal;
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   var mode = modeProps;
   if (!modeProps) {
     // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
@@ -53,7 +59,7 @@ var Group = function Group(_ref) {
   return /*#__PURE__*/React.createElement("section", (0, _extends2.default)({}, restProps, {
     tabIndex: tabIndex,
     ref: getRootRef,
-    className: (0, _vkjs.classNames)("vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", (0, _getSizeXClassName.getSizeXClassName)("vkuiGroup", sizeX), mode && styles["Group--mode-".concat(mode)], styles["Group--padding-".concat(padding)], className)
+    className: (0, _vkjs.classNames)("vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && styles["Group--mode-".concat(mode)], styles["Group--padding-".concat(padding)], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiGroup__inner"
   }, header, children, (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","names":["warn","warnOnce","Group","header","description","children","separator","getRootRef","modeProps","mode","padding","className","tabIndexProp","tabIndex","restProps","React","useContext","ModalRootContext","isInsideModal","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNames","Platform","IOS","getSizeXClassName","styles","hasReactNode"],"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Platform } from '../../lib/platform';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport styles from './Group.module.css';\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 } = 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    <section\n      {...restProps}\n      tabIndex={tabIndex}\n      ref={getRootRef}\n      className={classNames(\n        styles['Group'],\n        platform === Platform.IOS && styles['Group--ios'],\n        getSizeXClassName(styles['Group'], sizeX),\n        mode && styles[`Group--mode-${mode}`],\n        styles[`Group--padding-${padding}`],\n        className,\n      )}\n    >\n      <div className={styles['Group__inner']}>\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </div>\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    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA0BpE,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;AAE1B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,IAVhBC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,UAAU,QAAVA,UAAU;IACJC,SAAS,QAAfC,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,GAAG;IACbC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,wBAA0BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAApDC,aAAa,qBAAbA,aAAa;EACrB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAIb,IAAiC,GAAGD,SAAS;EAEjD,IAAI,CAACA,SAAS,EAAE;IACd;IACAC,IAAI,GAAGS,aAAa,GAAG,OAAO,GAAG,MAAM;EACzC;EAEA,IAAMK,UAAU,GAAGT,SAAS,CAACU,IAAI,KAAK,UAAU;EAEhD,IACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IACtCJ,UAAU,KACT,CAACT,SAAS,CAAC,eAAe,CAAC,IAAI,CAACA,SAAS,CAAC,IAAI,CAAC,CAAC,EACjD;IACAd,IAAI,CACF,6FAA6F,CAC9F;EACH;EAEA,IAAMa,QAAQ,GAAGU,UAAU,IAAIX,YAAY,KAAKgB,SAAS,GAAG,CAAC,GAAGhB,YAAY;EAE5E,IAAMiB,kBAAkB,GAAG,IAAAC,gBAAU,0BAEnCxB,SAAS,KAAK,MAAM,iCAAqC,CAC1D;EAED,oBACE,0DACMQ,SAAS;IACb,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAEN,UAAW;IAChB,SAAS,EAAE,IAAAuB,gBAAU,eAEnBX,QAAQ,KAAKY,kBAAQ,CAACC,GAAG,oBAAwB,EACjD,IAAAC,oCAAiB,eAAkBX,KAAK,CAAC,EACzCb,IAAI,IAAIyB,MAAM,uBAAgBzB,IAAI,EAAG,EACrCyB,MAAM,0BAAmBxB,OAAO,EAAG,EACnCC,SAAS;EACT,iBAEF;IAAK,SAAS;EAAyB,GACpCR,MAAM,EACNE,QAAQ,EACR,IAAA8B,kBAAY,EAAC/B,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,EACLE,SAAS,KAAK,MAAM,iBACnB,oBAAC,KAAK,CAAC,QAAQ,qBACb,oBAAC,gBAAO;IACN,SAAS,EAAE,IAAAwB,gBAAU,EAACD,kBAAkB,kCAAuC;IAC/E,IAAI,EAAE;EAAG,EACT,eACF,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAAC,gBAAU,EAACD,kBAAkB;EAAyC,EACjF,CAEL,CACO;AAEd,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Group.js","names":["sizeXClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","Group","header","description","children","separator","getRootRef","modeProps","mode","padding","className","tabIndexProp","tabIndex","restProps","React","useContext","ModalRootContext","isInsideModal","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNames","Platform","IOS","styles","hasReactNode"],"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    <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 && styles[`Group--mode-${mode}`],\n        styles[`Group--padding-${padding}`],\n        className,\n      )}\n    >\n      <div className={styles['Group__inner']}>\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </div>\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    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAA2D;AAAA;AAG3D,IAAMA,eAAe;EACnBC,IAAI;AAA6B,mDAChCC,oBAAQ,CAACC,OAAO,+EAChBD,oBAAQ,CAACE,OAAO,gDAClB;AAyBD,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;AAE1B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,IAVhBC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,UAAU,QAAVA,UAAU;IACJC,SAAS,QAAfC,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,GAAG;IACbC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,wBAA0BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAApDC,aAAa,qBAAbA,aAAa;EACrB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAIb,IAAiC,GAAGD,SAAS;EAEjD,IAAI,CAACA,SAAS,EAAE;IACd;IACAC,IAAI,GAAGS,aAAa,GAAG,OAAO,GAAG,MAAM;EACzC;EAEA,IAAMK,UAAU,GAAGT,SAAS,CAACU,IAAI,KAAK,UAAU;EAEhD,IACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IACtCJ,UAAU,KACT,CAACT,SAAS,CAAC,eAAe,CAAC,IAAI,CAACA,SAAS,CAAC,IAAI,CAAC,CAAC,EACjD;IACAd,IAAI,CACF,6FAA6F,CAC9F;EACH;EAEA,IAAMa,QAAQ,GAAGU,UAAU,IAAIX,YAAY,KAAKgB,SAAS,GAAG,CAAC,GAAGhB,YAAY;EAE5E,IAAMiB,kBAAkB,GAAG,IAAAC,gBAAU,0BAEnCxB,SAAS,KAAK,MAAM,iCAAqC,CAC1D;EAED,oBACE,0DACMQ,SAAS;IACb,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAEN,UAAW;IAChB,SAAS,EAAE,IAAAuB,gBAAU,eAEnBX,QAAQ,KAAKY,kBAAQ,CAACC,GAAG,oBAAwB,EACjDrC,eAAe,CAAC2B,KAAK,CAAC,EACtBb,IAAI,IAAIwB,MAAM,uBAAgBxB,IAAI,EAAG,EACrCwB,MAAM,0BAAmBvB,OAAO,EAAG,EACnCC,SAAS;EACT,iBAEF;IAAK,SAAS;EAAyB,GACpCR,MAAM,EACNE,QAAQ,EACR,IAAA6B,kBAAY,EAAC9B,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,EACLE,SAAS,KAAK,MAAM,iBACnB,oBAAC,KAAK,CAAC,QAAQ,qBACb,oBAAC,gBAAO;IACN,SAAS,EAAE,IAAAwB,gBAAU,EAACD,kBAAkB,kCAAuC;IAC/E,IAAI,EAAE;EAAG,EACT,eACF,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAAC,gBAAU,EAACD,kBAAkB;EAAyC,EACjF,CAEL,CACO;AAEd,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/Header/Header.js

@@ -12,11 +12,11 @@ var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _Headline = require("../Typography/Headline/Headline");
 var _Footnote = require("../Typography/Footnote/Footnote");
-var _Title = require("../Typography/Title/Title");
-var _Text = require("../Typography/Text/Text");
+var _Headline = require("../Typography/Headline/Headline");
 var _Subhead = require("../Typography/Subhead/Subhead");
+var _Text = require("../Typography/Text/Text");
+var _Title = require("../Typography/Title/Title");
 var _excluded = ["mode"],
   _excluded2 = ["mode", "children", "subtitle", "indicator", "aside", "getRootRef", "multiline", "className"];
 var HeaderContent = function HeaderContent(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":["HeaderContent","mode","restProps","platform","usePlatform","Platform","IOS","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","Subhead","Text","SubtitleTypography","Footnote","classNames","ANDROID","styles","isPrimitiveReactNode","hasReactNode","undefined"],"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 { HasComponent, HasRootRef } from '../../types';\nimport { Platform } from '../../lib/platform';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Title } from '../Typography/Title/Title';\nimport { Text } from '../Typography/Text/Text';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\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' | 'className'> & HasComponent;\n\nconst HeaderContent = ({ mode, ...restProps }: HeaderContentProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\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 <Headline weight=\"3\" {...restProps} />;\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\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  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        styles[`Header--mode-${mode}`],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent className={styles['Header__content']} Component=\"span\" mode={mode}>\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"],"mappings":"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"}
+{"version":3,"file":"Header.js","names":["HeaderContent","mode","restProps","platform","usePlatform","Platform","IOS","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","Subhead","Text","SubtitleTypography","Footnote","classNames","ANDROID","styles","isPrimitiveReactNode","hasReactNode","undefined"],"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  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' | 'className'> & HasComponent;\n\nconst HeaderContent = ({ mode, ...restProps }: HeaderContentProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\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 <Headline weight=\"3\" {...restProps} />;\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\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  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        styles[`Header--mode-${mode}`],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent className={styles['Header__content']} Component=\"span\" mode={mode}>\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"],"mappings":"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"}

package/dist/cjs/components/HorizontalCell/HorizontalCell.js

@@ -10,11 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _Caption = require("../Typography/Caption/Caption");
+var _Avatar = require("../Avatar/Avatar");
 var _Tappable = require("../Tappable/Tappable");
-var _Subhead = require("../Typography/Subhead/Subhead");
+var _Caption = require("../Typography/Caption/Caption");
 var _Footnote = require("../Typography/Footnote/Footnote");
-var _Avatar = require("../Avatar/Avatar");
+var _Subhead = require("../Typography/Subhead/Subhead");
 var _excluded = ["size", "children"],
   _excluded2 = ["className", "header", "style", "subtitle", "size", "children", "getRootRef", "getRef"];
 var CellTypography = function CellTypography(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCell.js","names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","classNames","styles","hasReactNode"],"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Avatar } from '../Avatar/Avatar';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        styles[`HorizontalCell--size-${size}`],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && (\n            <CellTypography size={size} className={styles['HorizontalCell__title']}>\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0C;EAAA;AAQ1C,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAA8D;EAAA,IAAxDC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,SAAS;EACpD,OAAOF,IAAI,KAAK,GAAG,gBACjB,oBAAC,gBAAO,EAAKE,SAAS,EAAGD,QAAQ,CAAW,gBAE5C,oBAAC,gBAAO,EAAKC,SAAS,EAAGD,QAAQ,CAClC;AACH,CAAC;AAaD;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAc,QAUA;EAAA,IATzBC,SAAS,SAATA,SAAS;IACTC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,QAAQ,SAARA,QAAQ;IAAA,mBACRP,IAAI;IAAJA,IAAI,2BAAG,GAAG;IAAA,uBACVC,QAAQ;IAARA,QAAQ,4CAAG,oBAAC,cAAM;MAAC,IAAI,EAAE;IAAG,EAAG;IAC/BO,UAAU,SAAVA,UAAU;IACVC,MAAM,SAANA,MAAM;IACHP,SAAS;EAEZ,oBACE;IACE,GAAG,EAAEM,UAAW;IAChB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAI,gBAAU,wBAEnBC,MAAM,gCAAyBX,IAAI,EAAG,EACtCI,SAAS;EACT,gBAEF,oBAAC,kBAAQ;IAAC,SAAS,4BAAiC;IAAC,UAAU,EAAEK;EAAO,GAAKP,SAAS,GACnF,IAAAU,kBAAY,EAACX,QAAQ,CAAC,iBACrB;IAAK,SAAS;EAAkC,GAAEA,QAAQ,CAC3D,eACD;IAAK,SAAS;EAAoC,GAC/C,IAAAW,kBAAY,EAACP,MAAM,CAAC,iBACnB,oBAAC,cAAc;IAAC,IAAI,EAAEL,IAAK;IAAC,SAAS;EAAkC,GACpEK,MAAM,CAEV,EACA,IAAAO,kBAAY,EAACL,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,SAAS;EAAqC,GAAEA,QAAQ,CACnE,CACG,CACG,CACP;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"HorizontalCell.js","names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","classNames","styles","hasReactNode"],"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        styles[`HorizontalCell--size-${size}`],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && (\n            <CellTypography size={size} className={styles['HorizontalCell__title']}>\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAwD;EAAA;AAOxD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAA8D;EAAA,IAAxDC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,SAAS;EACpD,OAAOF,IAAI,KAAK,GAAG,gBACjB,oBAAC,gBAAO,EAAKE,SAAS,EAAGD,QAAQ,CAAW,gBAE5C,oBAAC,gBAAO,EAAKC,SAAS,EAAGD,QAAQ,CAClC;AACH,CAAC;AAaD;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAc,QAUA;EAAA,IATzBC,SAAS,SAATA,SAAS;IACTC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,QAAQ,SAARA,QAAQ;IAAA,mBACRP,IAAI;IAAJA,IAAI,2BAAG,GAAG;IAAA,uBACVC,QAAQ;IAARA,QAAQ,4CAAG,oBAAC,cAAM;MAAC,IAAI,EAAE;IAAG,EAAG;IAC/BO,UAAU,SAAVA,UAAU;IACVC,MAAM,SAANA,MAAM;IACHP,SAAS;EAEZ,oBACE;IACE,GAAG,EAAEM,UAAW;IAChB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAI,gBAAU,wBAEnBC,MAAM,gCAAyBX,IAAI,EAAG,EACtCI,SAAS;EACT,gBAEF,oBAAC,kBAAQ;IAAC,SAAS,4BAAiC;IAAC,UAAU,EAAEK;EAAO,GAAKP,SAAS,GACnF,IAAAU,kBAAY,EAACX,QAAQ,CAAC,iBACrB;IAAK,SAAS;EAAkC,GAAEA,QAAQ,CAC3D,eACD;IAAK,SAAS;EAAoC,GAC/C,IAAAW,kBAAY,EAACP,MAAM,CAAC,iBACnB,oBAAC,cAAc;IAAC,IAAI,EAAEL,IAAK;IAAC,SAAS;EAAkC,GACpEK,MAAM,CAEV,EACA,IAAAO,kBAAY,EAACL,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,SAAS;EAAqC,GAAEA,QAAQ,CACnE,CACG,CACG,CACP;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js

@@ -10,12 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
-var _HorizontalScrollArrow = require("./HorizontalScrollArrow");
-var _fx = require("../../lib/fx");
 var _useEventListener = require("../../hooks/useEventListener");
 var _useExternRef = require("../../hooks/useExternRef");
-var _vkjs = require("@vkontakte/vkjs");
+var _fx = require("../../lib/fx");
+var _HorizontalScrollArrow = require("./HorizontalScrollArrow");
 var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "getRef", "className"];
 /**
  * timing method

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["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","easeInOutSine","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEventListener","useEffect","add","classNames","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HasRef } from '../../types';\nimport { classNames } from '@vkontakte/vkjs';\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/**\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  ...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  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        showArrows === 'always' && styles['HorizontalScroll--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"],"mappings":"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"}
+{"version":3,"file":"HorizontalScroll.js","names":["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","easeInOutSine","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEventListener","useEffect","add","classNames","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } 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/**\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  ...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  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        showArrows === 'always' && styles['HorizontalScroll--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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollArrow.js","names":["HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","classNames","styles"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n  Icon16Chevron,\n  Icon16ChevronLeft,\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        styles[`HorizontalScrollArrow--size-${size}`],\n        styles[`HorizontalScrollArrow--direction-${direction}`],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAMA;AACA;AAAgD;AAUzC,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqB,OAMA;EAAA,qBALhCC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,SAAuC;EAE3C,IAAIL,IAAI,KAAK,GAAG,EAAE;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGK,wBAAiB,GAAGC,oBAAa;EACtE,CAAC,MAAM;IACLF,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGO,+BAAwB,GAAGC,oBAAa;EAC7E;EAEA,oBACE,oBAAC,kBAAQ,6BACHL,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAE,IAAAM,gBAAU,+BAEnBC,MAAM,uCAAgCX,IAAI,EAAG,EAC7CW,MAAM,4CAAqCV,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"HorizontalScrollArrow.js","names":["HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","classNames","styles"],"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        styles[`HorizontalScrollArrow--size-${size}`],\n        styles[`HorizontalScrollArrow--direction-${direction}`],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAMA;AACA;AAAgD;AAUzC,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqB,OAMA;EAAA,qBALhCC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,SAAuC;EAE3C,IAAIL,IAAI,KAAK,GAAG,EAAE;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGK,wBAAiB,GAAGC,oBAAa;EACtE,CAAC,MAAM;IACLF,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGO,+BAAwB,GAAGC,oBAAa;EAC7E;EAEA,oBACE,oBAAC,kBAAQ,6BACHL,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAE,IAAAM,gBAAU,+BAEnBC,MAAM,uCAAgCX,IAAI,EAAG,EAC7CW,MAAM,4CAAqCV,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/HoverPopper/HoverPopper.js

@@ -10,11 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _Popper = require("../Popper/Popper");
 var _useEventListener = require("../../hooks/useEventListener");
-var _useTimeout = require("../../hooks/useTimeout");
 var _usePatchChildrenRef3 = require("../../hooks/usePatchChildrenRef");
+var _useTimeout = require("../../hooks/useTimeout");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _Popper = require("../Popper/Popper");
 var _excluded = ["getRef", "content", "children", "onShownChange", "shown", "showDelay", "hideDelay"];
 var HoverPopper = function HoverPopper(_ref) {
   var getRef = _ref.getRef,