@vkontakte/vkui 5.2.0 → 5.2.2

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,

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

@@ -1 +1 @@
-{"version":3,"file":"HoverPopper.js","names":["HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add"],"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAgF;AA6BzE,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACNC,MAAM,QAAbC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACZC,SAAS;EAEZ,sBAA0CC,KAAK,CAACC,QAAQ,CAACN,MAAM,IAAI,KAAK,CAAC;IAAA;IAAlEO,aAAa;IAAEC,gBAAgB;EAEtC,IAAMP,KAAK,GAAG,OAAOD,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGO,aAAa;EAElE,IAAME,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAOV,MAAM,KAAK,SAAS,EAAE;MAC/BQ,gBAAgB,CAACE,KAAK,CAAC;IACzB;IACA,OAAOX,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACW,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAG,IAAAC,sBAAU,EAAC,YAAM;IACnCH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAEP,SAAS,CAAC;EAEb,IAAMW,WAAW,GAAG,IAAAD,sBAAU,EAAC,YAAM;IACnCH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAEN,SAAS,CAAC;EAEb,2BAA0B,IAAAW,yCAAmB,EAAChB,QAAQ,CAAC;IAAA;IAAhDiB,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BJ,WAAW,CAACK,KAAK,EAAE;IACnBP,WAAW,CAACQ,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BT,WAAW,CAACO,KAAK,EAAE;IACnBL,WAAW,CAACM,GAAG,EAAE;EACnB,CAAC;EAED,IAAME,mBAAmB,GAAG,IAAAC,kCAAgB,EAAC,cAAc,EAAEL,aAAa,CAAC;EAC3E,IAAMM,mBAAmB,GAAG,IAAAD,kCAAgB,EAAC,cAAc,EAAEF,aAAa,CAAC;EAE3E,IAAAI,oDAAyB,EAAC,YAAM;IAC9B,IAAIT,QAAQ,CAACU,OAAO,EAAE;MACpBJ,mBAAmB,CAACK,GAAG,CAACX,QAAQ,CAACU,OAAO,CAAC;MACzCF,mBAAmB,CAACG,GAAG,CAACX,QAAQ,CAACU,OAAO,CAAC;IAC3C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZT,KAAK,EACLf,KAAK,iBACJ,oBAAC,cAAM,6BACDG,SAAS;IACb,WAAW,EAAES,WAAW,CAACK,KAAM;IAC/B,UAAU,EAAEE,aAAc;IAC1B,MAAM,EAAExB,MAAO;IACf,SAAS,EAAEmB;EAAS,IAEnBlB,OAAO,CAEX,CACc;AAErB,CAAC;AAAC"}
+{"version":3,"file":"HoverPopper.js","names":["HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add"],"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA6D;AA6BtD,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACNC,MAAM,QAAbC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACZC,SAAS;EAEZ,sBAA0CC,KAAK,CAACC,QAAQ,CAACN,MAAM,IAAI,KAAK,CAAC;IAAA;IAAlEO,aAAa;IAAEC,gBAAgB;EAEtC,IAAMP,KAAK,GAAG,OAAOD,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGO,aAAa;EAElE,IAAME,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAOV,MAAM,KAAK,SAAS,EAAE;MAC/BQ,gBAAgB,CAACE,KAAK,CAAC;IACzB;IACA,OAAOX,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACW,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAG,IAAAC,sBAAU,EAAC,YAAM;IACnCH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAEP,SAAS,CAAC;EAEb,IAAMW,WAAW,GAAG,IAAAD,sBAAU,EAAC,YAAM;IACnCH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAEN,SAAS,CAAC;EAEb,2BAA0B,IAAAW,yCAAmB,EAAChB,QAAQ,CAAC;IAAA;IAAhDiB,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BJ,WAAW,CAACK,KAAK,EAAE;IACnBP,WAAW,CAACQ,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BT,WAAW,CAACO,KAAK,EAAE;IACnBL,WAAW,CAACM,GAAG,EAAE;EACnB,CAAC;EAED,IAAME,mBAAmB,GAAG,IAAAC,kCAAgB,EAAC,cAAc,EAAEL,aAAa,CAAC;EAC3E,IAAMM,mBAAmB,GAAG,IAAAD,kCAAgB,EAAC,cAAc,EAAEF,aAAa,CAAC;EAE3E,IAAAI,oDAAyB,EAAC,YAAM;IAC9B,IAAIT,QAAQ,CAACU,OAAO,EAAE;MACpBJ,mBAAmB,CAACK,GAAG,CAACX,QAAQ,CAACU,OAAO,CAAC;MACzCF,mBAAmB,CAACG,GAAG,CAACX,QAAQ,CAACU,OAAO,CAAC;IAC3C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZT,KAAK,EACLf,KAAK,iBACJ,oBAAC,cAAM,6BACDG,SAAS;IACb,WAAW,EAAES,WAAW,CAACK,KAAM;IAC/B,UAAU,EAAEE,aAAc;IAC1B,MAAM,EAAExB,MAAO;IACf,SAAS,EAAEmB;EAAS,IAEnBlB,OAAO,CAEX,CACc;AAErB,CAAC;AAAC"}

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

@@ -6,4 +6,4 @@ export interface IconButtonProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export declare const IconButton: ({ children, Component, className, ...restProps }: IconButtonProps) => JSX.Element;
+export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => JSX.Element;

package/dist/cjs/components/IconButton/IconButton.js

@@ -8,15 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.IconButton = 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 _Tappable = require("../Tappable/Tappable");
 var _vkjs = require("@vkontakte/vkjs");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _warnOnce = require("../../lib/warnOnce");
-var _excluded = ["children", "Component", "className"];
+var _Tappable = require("../Tappable/Tappable");
+var _excluded = ["children", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiIconButton--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiIconButton--sizeY-compact");
 var warn = (0, _warnOnce.warnOnce)('IconButton');
 
 /**
@@ -24,13 +28,12 @@ var warn = (0, _warnOnce.warnOnce)('IconButton');
  */
 var IconButton = function IconButton(_ref) {
   var children = _ref.children,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'button' : _ref$Component,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   if (process.env.NODE_ENV === 'development') {
     var isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];
     if (!isAccessible) {
@@ -39,10 +42,10 @@ var IconButton = function IconButton(_ref) {
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
     activeEffectDelay: 200,
-    activeMode: "background"
+    activeMode: "background",
+    Component: restProps.href ? 'a' : 'button'
   }, restProps, {
-    Component: restProps.href ? 'a' : Component,
-    className: (0, _vkjs.classNames)("vkuiIconButton", (0, _getSizeYClassName.getSizeYClassName)("vkuiIconButton", sizeY), platform === _platform.Platform.IOS && "vkuiIconButton--ios", className)
+    className: (0, _vkjs.classNames)("vkuiIconButton", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], platform === _platform.Platform.IOS && "vkuiIconButton--ios", className)
   }), children);
 };
 exports.IconButton = IconButton;

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["warn","warnOnce","IconButton","children","Component","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","classNames","getSizeYClassName","Platform","IOS"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({\n  children,\n  Component = 'button',\n  className,\n  ...restProps\n}: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      className={classNames(\n        styles['IconButton'],\n        getSizeYClassName(styles['IconButton'], sizeY),\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+D;AAO/D,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,IAJrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGR,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACQ,YAAY,EAAE;MACjBd,IAAI,CAACe,yBAAe,CAACC,IAAI,CAACV,SAAS,CAACW,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,kBAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC;EAAY,GACnBX,SAAS;IACb,SAAS,EAAEA,SAAS,CAACW,IAAI,GAAG,GAAG,GAAGb,SAAU;IAC5C,SAAS,EAAE,IAAAc,gBAAU,oBAEnB,IAAAC,oCAAiB,oBAAuBT,KAAK,CAAC,EAC9CH,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,yBAA6B,EACtDhB,SAAS;EACT,IAEDF,QAAQ,CACA;AAEf,CAAC;AAAC"}
+{"version":3,"file":"IconButton.js","names":["sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","IconButton","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","classNames","REGULAR","Platform","IOS"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+D;AAG/D,IAAMA,eAAe;EACnBC,IAAI;AAAkC,GACrCC,oBAAQ,CAACC,OAAO,kCAClB;AAMD,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAA+D;EAAA,IAAzDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC5D,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGR,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACQ,YAAY,EAAE;MACjBb,IAAI,CAACc,yBAAe,CAACC,IAAI,CAACV,SAAS,CAACW,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,kBAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC,YAAY;IACvB,SAAS,EAAEX,SAAS,CAACW,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCX,SAAS;IACb,SAAS,EAAE,IAAAY,gBAAU,oBAEnBR,KAAK,KAAKX,oBAAQ,CAACoB,OAAO,IAAItB,eAAe,CAACa,KAAK,CAAC,EACpDH,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,yBAA6B,EACtDhB,SAAS;EACT,IAEDD,QAAQ,CACA;AAEf,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ImageBaseProps, type ImageBaseOverlayProps } from '../ImageBase/ImageBase';
+import { type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type ImageBadgeProps } from './ImageBadge/ImageBadge';
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
 export declare const IMAGE_DEFAULT_SIZE = 48;

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","classNames","Badge","ImageBadge","Overlay","ImageBase"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseProps, type ImageBaseOverlayProps, ImageBase } from '../ImageBase/ImageBase';\nimport { type ImageBadgeProps, ImageBadge } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={classNames(styles['Image'], className)}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAA2E;AAKpE,IAAMA,kBAAkB,GAAG,EAAE;AAAC;AASrC;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,oBAAS,6BACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,8DAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAE,IAAAK,gBAAU,eAAkBF,SAAS;EAAE,GAClD;AAEN,CAAC;AAAC;AAEFL,KAAK,CAACQ,KAAK,GAAGC,sBAAU;AAExBT,KAAK,CAACU,OAAO,GAAGC,oBAAS,CAACD,OAAO"}
+{"version":3,"file":"Image.js","names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","classNames","Badge","ImageBadge","Overlay","ImageBase"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={classNames(styles['Image'], className)}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAA2E;AAKpE,IAAMA,kBAAkB,GAAG,EAAE;AAAC;AASrC;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,oBAAS,6BACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,8DAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAE,IAAAK,gBAAU,eAAkBF,SAAS;EAAE,GAClD;AAEN,CAAC;AAAC;AAEFL,KAAK,CAACQ,KAAK,GAAGC,sBAAU;AAExBT,KAAK,CAACU,OAAO,GAAGC,oBAAS,CAACD,OAAO"}

package/dist/cjs/components/Image/ImageBadge/ImageBadge.js.map

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

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { HasRef, HasRootRef } from '../../types';
 import { type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
 import { type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
-import type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from './types';
 import { ImageBaseContext } from './context';
+import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';
 export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, };
 export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from './helpers';
 export { ImageBaseContext };