@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAShD,OAAO,IAAMC,sBAAsB,GAAG;AAEtC,IAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,IAAMC,iBAAiB;IACrB,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;AACV;AA6BA;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAOJ,mCACPK,mBAAAA,WACAC,uBAAAA,eACAC,kBAAAA,UACAC,sBAAAA,cACAC,kBAAAA,UACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,IAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,IAAME,wBAAwBN,WAAWO,YAAYN;IAErD,qBACE,oBAACZ,mDACKc;QACJN,MAAMA;QACNI,cAAcK;QACdR,WAAWV,yBAETgB,4CACAC,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;QAGDE,0BACC,oBAACQ;QACCV,SAAS;QACTW,OAAO;YACLC,UAAUlB,oBAAoBK;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,QAAQrB;AAEfM,OAAOgB,kBAAkBrB;AAEzBK,OAAOiB,UAAUxB,UAAUwB"}
+{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAShD,OAAO,IAAMC,sBAAsB,GAAG;AAEtC,IAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,IAAMC,iBAAiB;IACrB,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;AACV;AA6BA;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAOJ,mCACPK,mBAAAA,WACAC,uBAAAA,eACAC,kBAAAA,UACAC,sBAAAA,cACAC,kBAAAA,UACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,IAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,IAAME,wBAAwBN,WAAWO,YAAYN;IAErD,qBACE,oBAACZ,mDACKc;QACJN,MAAMA;QACNI,cAAcK;QACdR,WAAWV,yBAETgB,4CACAC,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;QAGDE,0BACC,oBAACQ;QACCV,SAAS;QACTW,OAAO;YACLC,UAAUlB,oBAAoBK;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,KAAK,GAAGrB;AAEfM,OAAOgB,eAAe,GAAGrB;AAEzBK,OAAOiB,OAAO,GAAGxB,UAAUwB,OAAO"}

package/dist/components/Avatar/AvatarBadge/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAKlG,OAAO,IAAMC,cAAc;QAAGC,mBAAAA,WAAcC;QAAdD;;IAC5B,IAAM,AAAEE,OAASP,MAAMQ,WAAWL,kBAA1BI;IACR,qBACE,oBAACL,UAAUO,+CACLH;QACJD,WAAWJ,8BAETM,OAAO,kCACPF;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAKlG,OAAO,IAAMC,cAAc;QAAGC,mBAAAA,WAAcC;QAAdD;;IAC5B,IAAM,AAAEE,OAASP,MAAMQ,UAAU,CAACL,kBAA1BI;IACR,qBACE,oBAACL,UAAUO,KAAK,0CACVH;QACJD,WAAWJ,8BAETM,OAAO,kCACPF;;AAIR,EAAE"}

package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAa3D,OAAO,IAAMC,wBAAwB;+BACnCC,QAAAA,oCAAS,0BACTC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,IAAM,AAAEE,OAASX,MAAMY,WAAWR,kBAA1BO;IACR,IAAME,YAAYX,gCAAgCS;IAClD,IAAMG,iBAAiBN,WAAW;IAClC,IAAMO,kBAAkBD;IAGxB,IAAME,OAAOF,iBAAiBT,eAAeC;IAE7C,qBACE,oBAACH,UAAUc;QACTC,YAAW;QACXT,WAAWR,8BAAkCc,iBAAiBN;OAC1DC,0BAEJ,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAa3D,OAAO,IAAMC,wBAAwB;+BACnCC,QAAAA,oCAAS,0BACTC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,IAAM,AAAEE,OAASX,MAAMY,UAAU,CAACR,kBAA1BO;IACR,IAAME,YAAYX,gCAAgCS;IAClD,IAAMG,iBAAiBN,WAAW;IAClC,IAAMO,kBAAkBD;IAGxB,IAAME,OAAOF,iBAAiBT,eAAeC;IAE7C,qBACE,oBAACH,UAAUc,KAAK;QACdC,YAAW;QACXT,WAAWR,8BAAkCc,iBAAiBN;OAC1DC,0BAEJ,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}

package/dist/components/Avatar/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from '../ImageBase/ImageBase';\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":"AAEA,IAAMA,gBAAgB;AACtB,IAAMC,sBAAqC;AAC3C,IAAMC,gBAAgBF,gBAAgBC;AAEtC;;CAEC,GACD,OAAO,SAASE,oBAAoBC,UAAkB;IACpD,IAAIA,cAAc,IAAI;QACpB,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,aAAa,IAAI;QAC1B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAcH,qBAAqB;QAC5C,OAAOD;IACT;IAEA,IAAMK,qBAAqBC,KAAKC,KAAKH,aAAaF;IAClD,IAAMM,UAAUH,qBAAqB;IACrC,OAAOA,qBAAqBG;AAC9B"}
+{"version":3,"sources":["../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from '../ImageBase/ImageBase';\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":"AAEA,IAAMA,gBAAgB;AACtB,IAAMC,sBAAqC;AAC3C,IAAMC,gBAAgBF,gBAAgBC;AAEtC;;CAEC,GACD,OAAO,SAASE,oBAAoBC,UAAkB;IACpD,IAAIA,cAAc,IAAI;QACpB,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,aAAa,IAAI;QAC1B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAcH,qBAAqB;QAC5C,OAAOD;IACT;IAEA,IAAMK,qBAAqBC,KAAKC,IAAI,CAACH,aAAaF;IAClD,IAAMM,UAAUH,qBAAqB;IACrC,OAAOA,qBAAqBG;AAC9B"}

package/dist/components/Banner/Banner.d.ts

@@ -65,8 +65,12 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRo
      * - `gap="m" mode="vertical" stretched`
      */
     actions?: React.ReactNode;
+    /**
+     * Удаляет отступы у компонента
+     */
+    noPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, getRootRef, ...restProps }: BannerProps) => React.JSX.Element;
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, getRootRef, noPadding, ...restProps }: BannerProps) => React.JSX.Element;

package/dist/components/Banner/Banner.js

@@ -15,7 +15,7 @@ import { Title } from "../Typography/Title/Title";
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */ export var Banner = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_imageTheme = _param.imageTheme, imageTheme = _param_imageTheme === void 0 ? "dark" : _param_imageTheme, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, before = _param.before, asideMode = _param.asideMode, header = _param.header, subheader = _param.subheader, text = _param.text, children = _param.children, background = _param.background, actions = _param.actions, onDismiss = _param.onDismiss, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, getRootRef = _param.getRootRef, restProps = _object_without_properties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_imageTheme = _param.imageTheme, imageTheme = _param_imageTheme === void 0 ? "dark" : _param_imageTheme, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, before = _param.before, asideMode = _param.asideMode, header = _param.header, subheader = _param.subheader, text = _param.text, children = _param.children, background = _param.background, actions = _param.actions, onDismiss = _param.onDismiss, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, getRootRef = _param.getRootRef, noPadding = _param.noPadding, restProps = _object_without_properties(_param, [
         "mode",
         "imageTheme",
         "size",
@@ -30,7 +30,8 @@ import { Title } from "../Typography/Title/Title";
         "onDismiss",
         "dismissLabel",
         "className",
-        "getRootRef"
+        "getRootRef",
+        "noPadding"
     ]);
     var platform = usePlatform();
     var HeaderTypography = size === "m" ? Title : Headline;
@@ -57,7 +58,7 @@ import { Title } from "../Typography/Title/Title";
         className: "vkuiBanner__actions"
     }, actions)));
     return /*#__PURE__*/ React.createElement("section", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiBanner", platform === Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", {
+        className: classNames("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", {
             s: "vkuiBanner--size-s",
             m: "vkuiBanner--size-m"
         }[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted", className),

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\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 './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAsElD;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWzB;IAEjB,IAAM0B,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,IAAMuB,sBAAsBhB,SAAS,MAAML,OAAOD;IAElD,IAAMuB,iBAAiBnB,SAAS,UAAUb,oBAAoBC;IAE9D,IAAMgC,wBACJ,0CACGpB,SAAS,WAAWS,4BACnB,oBAACY;QAAIC,eAAAA;QAAYT,SAAS;OACvBJ,aAIJN,wBAAU,oBAACkB;QAAIR,SAAS;OAA6BV,uBAEtD,oBAACkB;QAAIR,SAAS;OACXvB,aAAae,yBACZ,oBAACY;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACY;QAAoBK,WAAU;QAAIV,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK0B,WAAU;QAAIV,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM0C,SAASC,MAAMjB,WAAW,mBACxD,oBAACW;QAAIR,SAAS;OAA8BH;IAMpD,qBACE,oBAACkB,mDACKb;QACJF,WAAWxB,yBAET2B,aAAaxB,SAASqC,0BACtB7B,SAAS,qCACT;YACE8B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC7B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFmB,KAAKlB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACToB,YAAYjB,aAAaxB,SAASqC,MAAM,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIR,SAAS;qBACZ,oBAAC3B;QAAc2B,SAAS;yBAI5B,oBAACQ;QAAIR,SAAS;OACXO,SAEAhB,cAAc,2BACb,oBAACiB;QAAIR,SAAS;qBACZ,oBAACpB;QACC0C,cAAYvB;QACZC,SAAS;QACTuB,SAASzB;QACT0B,WAAU;QACVC,WAAW;OAEVtB,aAAaxB,SAASqC,oBAAM,oBAACV,sCAAoB,oBAAClC;AAQnE,EAAE"}
+{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\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 './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  noPadding,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        !noPadding && styles['Banner--withPadding'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","noPadding","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AA0ElD;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAhBHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAW1B;IAEjB,IAAM2B,mBAAmBhB,SAAS,MAAMJ,QAAQH;IAChD,IAAMwB,sBAAsBjB,SAAS,MAAML,OAAOD;IAElD,IAAMwB,iBAAiBpB,SAAS,UAAUb,oBAAoBC;IAE9D,IAAMiC,wBACJ,0CACGrB,SAAS,WAAWS,4BACnB,oBAACa;QAAIC,eAAAA;QAAYV,SAAS;OACvBJ,aAIJN,wBAAU,oBAACmB;QAAIT,SAAS;OAA6BV,uBAEtD,oBAACmB;QAAIT,SAAS;OACXvB,aAAae,yBACZ,oBAACa;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOxB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACa;QAAoBK,WAAU;QAAIX,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK2B,WAAU;QAAIX,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM2C,QAAQ,CAACC,KAAK,CAAClB,WAAW,mBACxD,oBAACY;QAAIT,SAAS;OAA8BH;IAMpD,qBACE,oBAACmB,mDACKb;QACJH,WAAWxB,yBAET,CAAC0B,wCACDE,aAAazB,SAASsC,GAAG,uBACzB9B,SAAS,qCACT;YACE+B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC9B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFoB,KAAKnB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACTqB,YAAYjB,aAAazB,SAASsC,GAAG,GAAG,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIT,SAAS;qBACZ,oBAAC3B;QAAc2B,SAAS;yBAI5B,oBAACS;QAAIT,SAAS;OACXQ,SAEAjB,cAAc,2BACb,oBAACkB;QAAIT,SAAS;qBACZ,oBAACpB;QACC2C,cAAYxB;QACZC,SAAS;QACTwB,SAAS1B;QACT2B,WAAU;QACVC,WAAW;OAEVtB,aAAazB,SAASsC,GAAG,iBAAG,oBAACV,sCAAoB,oBAACnC;AAQnE,EAAE"}

package/dist/components/BaseGallery/BaseGallery.js

@@ -107,11 +107,12 @@ export var BaseGallery = function(_param) {
         var _rootRef_current, _viewportRef_current, _layoutState_current_slides_slideIndex, _localSlides_slideIndex;
         var _React_Children_map;
         var localSlides = (_React_Children_map = React.Children.map(children, function(_item, i) {
+            var _elem, _elem1;
             var elem = slidesStore.current["slide-".concat(i)];
             var _elem_offsetLeft, _elem_offsetWidth;
             return {
-                coordX: (_elem_offsetLeft = elem === null || elem === void 0 ? void 0 : elem.offsetLeft) !== null && _elem_offsetLeft !== void 0 ? _elem_offsetLeft : 0,
-                width: (_elem_offsetWidth = elem === null || elem === void 0 ? void 0 : elem.offsetWidth) !== null && _elem_offsetWidth !== void 0 ? _elem_offsetWidth : 0
+                coordX: (_elem_offsetLeft = (_elem = elem) === null || _elem === void 0 ? void 0 : _elem.offsetLeft) !== null && _elem_offsetLeft !== void 0 ? _elem_offsetLeft : 0,
+                width: (_elem_offsetWidth = (_elem1 = elem) === null || _elem1 === void 0 ? void 0 : _elem1.offsetWidth) !== null && _elem_offsetWidth !== void 0 ? _elem_offsetWidth : 0
             };
         })) !== null && _React_Children_map !== void 0 ? _React_Children_map : [];
         var _rootRef_current_offsetWidth;
@@ -181,12 +182,14 @@ export var BaseGallery = function(_param) {
         slideIndex
     ]);
     var slideLeft = function(event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(slideIndex - 1);
-        onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(event);
+        var _onChange, _onPrevClick;
+        (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(slideIndex - 1);
+        (_onPrevClick = onPrevClick) === null || _onPrevClick === void 0 ? void 0 : _onPrevClick(event);
     };
     var slideRight = function(event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(slideIndex + 1);
-        onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(event);
+        var _onChange, _onNextClick;
+        (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(slideIndex + 1);
+        (_onNextClick = onNextClick) === null || _onNextClick === void 0 ? void 0 : _onNextClick(event);
     };
     /*
    * Получает индекс слайда, к которому будет осуществлен переход
@@ -212,7 +215,8 @@ export var BaseGallery = function(_param) {
         return targetIndex;
     };
     var onStart = function(e) {
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e);
+        var _onDragStart;
+        (_onDragStart = onDragStart) === null || _onDragStart === void 0 ? void 0 : _onDragStart(e);
         setShiftState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
                 animation: false
@@ -235,8 +239,9 @@ export var BaseGallery = function(_param) {
         }
     };
     var onEnd = function(e) {
+        var _onDragEnd;
         var targetIndex = e.isSlide ? getTarget(e) : slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0;
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e, targetIndex);
+        (_onDragEnd = onDragEnd) === null || _onDragEnd === void 0 ? void 0 : _onDragEnd(e, targetIndex);
         var nextShiftState = {
             animation: true,
             dragging: false,
@@ -251,7 +256,8 @@ export var BaseGallery = function(_param) {
             return _object_spread({}, prevState, nextShiftState);
         });
         if (targetIndex !== slideIndex) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(targetIndex);
+            var _onChange;
+            (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(targetIndex);
         }
     };
     var indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;

package/dist/components/BaseGallery/BaseGallery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  className,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n        className,\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(\n            styles['BaseGallery__bullets'],\n            {\n              dark: styles['BaseGallery__bullets--dark'],\n              light: styles['BaseGallery__bullets--light'],\n            }[bullets],\n          )}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","ScrollArrow","Touch","calcMax","calcMin","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","useState","shiftState","setShiftState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","div","ref","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","onClick","size"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  className,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n        className,\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(\n            styles['BaseGallery__bullets'],\n            {\n              dark: styles['BaseGallery__bullets--dark'],\n              light: styles['BaseGallery__bullets--light'],\n            }[bullets],\n          )}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","ScrollArrow","Touch","calcMax","calcMin","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","useState","shiftState","setShiftState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","div","ref","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","onClick","size"],"mappings":"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"}

package/dist/components/BaseGallery/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { HasAlign } from '../../types';\nimport { LayoutState } from './types';\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign['align'];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case 'left':\n      return containerWidth - layerWidth;\n    case 'right':\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"mappings":"AAQA,OAAO,IAAMA,UAAU;sCACrBC,gBAAAA,oDAAiB,qDACjBC,YAAAA,4CAAa,6CACbC,QAAAA,oCAAS,EAAE,qDACXC,qBAAAA,8DAAsB,gCACtBC,cAAAA,OACAC,gCAAAA;IAEA,OAAQD;QACN,KAAK;YACH,OAAOJ,iBAAiBC;QAC1B,KAAK;YACH,OAAOE,sBAAsBF;QAC/B,KAAK;YACH,IAAII,2BAA2BH,OAAOI,QAAQ;gBAC5C,IAA0BJ,WAAAA,MAAM,CAACA,OAAOI,SAAS,EAAE,EAA3CC,SAAkBL,SAAlBK,QAAQC,QAAUN,SAAVM;gBAChB,OAAOL,sBAAsB,IAAII,SAASC,QAAQ;YACpD,OAAO;gBACL,OAAOL,sBAAsB,AAACH,CAAAA,iBAAiBG,mBAAkB,IAAK,IAAIF;YAC5E;IACJ;IACA,OAAOQ;AACT,EAAE;AAMF,OAAO,IAAMC,UAAU;8BACrBR,QAAAA,oCAAS,EAAE,qDACXC,qBAAAA,8DAAsB,gCACtBE,gCAAAA;IAEA,IAAIA,2BAA2BH,OAAOI,QAAQ;QAC5C,IAA0BJ,WAAAA,MAAM,CAAC,EAAE,EAA3BM,QAAkBN,SAAlBM,OAAOD,SAAWL,SAAXK;QACf,OAAOJ,sBAAsB,IAAII,SAASC,QAAQ;IACpD;IACA,OAAO;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { HasAlign } from '../../types';\nimport { LayoutState } from './types';\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign['align'];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case 'left':\n      return containerWidth - layerWidth;\n    case 'right':\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"mappings":"AAQA,OAAO,IAAMA,UAAU;sCACrBC,gBAAAA,oDAAiB,qDACjBC,YAAAA,4CAAa,6CACbC,QAAAA,oCAAS,EAAE,qDACXC,qBAAAA,8DAAsB,gCACtBC,cAAAA,OACAC,gCAAAA;IAEA,OAAQD;QACN,KAAK;YACH,OAAOJ,iBAAiBC;QAC1B,KAAK;YACH,OAAOE,sBAAsBF;QAC/B,KAAK;YACH,IAAII,2BAA2BH,OAAOI,MAAM,EAAE;gBAC5C,IAA0BJ,WAAAA,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,EAA3CC,SAAkBL,SAAlBK,QAAQC,QAAUN,SAAVM;gBAChB,OAAOL,sBAAsB,IAAII,SAASC,QAAQ;YACpD,OAAO;gBACL,OAAOL,sBAAsB,AAACH,CAAAA,iBAAiBG,mBAAkB,IAAK,IAAIF;YAC5E;IACJ;IACA,OAAOQ;AACT,EAAE;AAMF,OAAO,IAAMC,UAAU;8BACrBR,QAAAA,oCAAS,EAAE,qDACXC,qBAAAA,8DAAsB,gCACtBE,gCAAAA;IAEA,IAAIA,2BAA2BH,OAAOI,MAAM,EAAE;QAC5C,IAA0BJ,WAAAA,MAAM,CAAC,EAAE,EAA3BM,QAAkBN,SAAlBM,OAAOD,SAAWL,SAAXK;QACf,OAAOJ,sBAAsB,IAAII,SAASC,QAAQ;IACpD;IACA,OAAO;AACT,EAAE"}

package/dist/components/Button/Button.d.ts

@@ -10,10 +10,11 @@ export interface VKUIButtonProps extends HasAlign {
     before?: React.ReactNode;
     after?: React.ReactNode;
     loading?: boolean;
+    disableSpinnerAnimation?: boolean;
 }
 export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */
-export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, stopPropagation, className, ...restProps }: ButtonProps) => React.JSX.Element;
+export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, stopPropagation, className, disableSpinnerAnimation, ...restProps }: ButtonProps) => React.JSX.Element;

package/dist/components/Button/Button.js

@@ -16,7 +16,7 @@ var sizeYClassNames = _define_property({
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */ export var Button = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, children = _param.children, before = _param.before, after = _param.after, getRootRef = _param.getRootRef, loading = _param.loading, onClick = _param.onClick, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? true : _param_stopPropagation, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, children = _param.children, before = _param.before, after = _param.after, getRootRef = _param.getRootRef, loading = _param.loading, onClick = _param.onClick, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? true : _param_stopPropagation, className = _param.className, disableSpinnerAnimation = _param.disableSpinnerAnimation, restProps = _object_without_properties(_param, [
         "size",
         "mode",
         "appearance",
@@ -29,7 +29,8 @@ var sizeYClassNames = _define_property({
         "loading",
         "onClick",
         "stopPropagation",
-        "className"
+        "className",
+        "disableSpinnerAnimation"
     ]);
     var hasIcons = Boolean(before || after);
     var hasIconOnly = !children && Boolean(after) !== Boolean(before);
@@ -68,7 +69,8 @@ var sizeYClassNames = _define_property({
         getRootRef: getRootRef
     }), loading && /*#__PURE__*/ React.createElement(Spinner, {
         size: "small",
-        className: "vkuiButton__spinner"
+        className: "vkuiButton__spinner",
+        disableAnimation: disableSpinnerAnimation
     }), /*#__PURE__*/ React.createElement("span", {
         className: "vkuiButton__in"
     }, hasReactNode(before) && /*#__PURE__*/ React.createElement("span", {

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.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 { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        {\n          s: styles['Button--size-s'],\n          m: styles['Button--size-m'],\n          l: styles['Button--size-l'],\n        }[size],\n        {\n          primary: styles['Button--mode-primary'],\n          secondary: styles['Button--mode-secondary'],\n          tertiary: styles['Button--mode-tertiary'],\n          outline: styles['Button--mode-outline'],\n          link: styles['Button--mode-link'],\n        }[mode],\n        {\n          'accent': styles['Button--appearance-accent'],\n          'positive': styles['Button--appearance-positive'],\n          'negative': styles['Button--appearance-negative'],\n          'neutral': styles['Button--appearance-neutral'],\n          'overlay': styles['Button--appearance-overlay'],\n          'accent-invariable': styles['Button--appearance-accent-invariable'],\n        }[appearance],\n        {\n          left: styles['Button--align-left'],\n          center: styles['Button--align-center'],\n          right: styles['Button--align-right'],\n        }[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['Button--ios'],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","s","m","l","primary","secondary","tertiary","outline","link","left","center","right","COMPACT","IOS","span","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAI/D,IAAMC;IACJC,IAAI;GACHL,SAASM;AAeZ;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,+BAClBC,mBAAAA,WACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQT,UAAUC;IACnC,IAAMS,cAAc,CAACX,YAAYU,QAAQR,WAAWQ,QAAQT;IAC5D,IAA2BhB,iBAAAA,wCAAAA,eAAnB2B,OAAAA,0CAAQ;IAChB,IAAMC,WAAW3B;IAEjB,qBACE,oBAACI;QACCwB,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,OAAO,MAAM;QAClCC,kBAAiB;OACbV;QACJH,SAASD,UAAUe,YAAYd;QAC/BC,iBAAiBA;QACjBC,WAAWxB,WACTwB,yBAEA;YACEa,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAC3B,KAAK,EACP;YACE4B,OAAO;YACPC,SAAS;YACTC,QAAQ;YACRC,OAAO;YACPC,IAAI;QACN,CAAC,CAAC/B,KAAK,EACP;YACE,QAAQ;YACR,UAAU;YACV,UAAU;YACV,SAAS;YACT,SAAS;YACT,mBAAmB;QACrB,CAAC,CAACC,WAAW,EACb;YACE+B,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAAC/B,MAAM,EACRa,UAAUzB,SAAS4C,WAAWxC,eAAe,CAACqB,MAAM,EACpDC,aAAazB,SAAS4C,0BACtBlC,sCACAW,qCACAE,eAAe,CAACb,uCAChBM;QAEFD,YAAYA;QAEXC,yBAAW,oBAACf;QAAQM,MAAK;QAAQY,SAAS;sBAC3C,oBAAC0B;QAAK1B,SAAS;OACZvB,aAAaiB,yBACZ,oBAACgC;QACC1B,SAAS;QACT2B,MAAK;QACLC,eAAaC,QAAQC,IAAIC,aAAa,SAAS,WAAWnB;OAEzDlB,SAGJjB,aAAagB,2BACZ,oBAACiC;QACC1B,SAAS;QACT4B,eAAaC,QAAQC,IAAIC,aAAa,SAAS,aAAanB;OAE3DnB,WAGJhB,aAAakB,wBACZ,oBAAC+B;QACC1B,SAAS;QACT2B,MAAK;QACLC,eAAaC,QAAQC,IAAIC,aAAa,SAAS,UAAUnB;OAExDjB;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/Button/Button.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 { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n  disableSpinnerAnimation?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  disableSpinnerAnimation,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        {\n          s: styles['Button--size-s'],\n          m: styles['Button--size-m'],\n          l: styles['Button--size-l'],\n        }[size],\n        {\n          primary: styles['Button--mode-primary'],\n          secondary: styles['Button--mode-secondary'],\n          tertiary: styles['Button--mode-tertiary'],\n          outline: styles['Button--mode-outline'],\n          link: styles['Button--mode-link'],\n        }[mode],\n        {\n          'accent': styles['Button--appearance-accent'],\n          'positive': styles['Button--appearance-positive'],\n          'negative': styles['Button--appearance-negative'],\n          'neutral': styles['Button--appearance-neutral'],\n          'overlay': styles['Button--appearance-overlay'],\n          'accent-invariable': styles['Button--appearance-accent-invariable'],\n        }[appearance],\n        {\n          left: styles['Button--align-left'],\n          center: styles['Button--align-center'],\n          right: styles['Button--align-right'],\n        }[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['Button--ios'],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"small\"\n          className={styles.Button__spinner}\n          disableAnimation={disableSpinnerAnimation}\n        />\n      )}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","disableSpinnerAnimation","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","s","m","l","primary","secondary","tertiary","outline","link","left","center","right","COMPACT","IOS","disableAnimation","span","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAI/D,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAgBnB;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,+BAClBC,mBAAAA,WACAC,iCAAAA,yBACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQV,UAAUC;IACnC,IAAMU,cAAc,CAACZ,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,IAA2BhB,iBAAAA,wCAAAA,eAAnB4B,OAAAA,0CAAQ;IAChB,IAAMC,WAAW5B;IAEjB,qBACE,oBAACI;QACCyB,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;OACbV;QACJJ,SAASD,UAAUgB,YAAYf;QAC/BC,iBAAiBA;QACjBC,WAAWxB,WACTwB,yBAEA;YACEc,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAC5B,KAAK,EACP;YACE6B,OAAO;YACPC,SAAS;YACTC,QAAQ;YACRC,OAAO;YACPC,IAAI;QACN,CAAC,CAAChC,KAAK,EACP;YACE,QAAQ;YACR,UAAU;YACV,UAAU;YACV,SAAS;YACT,SAAS;YACT,mBAAmB;QACrB,CAAC,CAACC,WAAW,EACb;YACEgC,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAAChC,MAAM,EACRc,UAAU1B,SAAS6C,OAAO,IAAIzC,eAAe,CAACsB,MAAM,EACpDC,aAAa1B,SAAS6C,GAAG,uBACzBnC,sCACAY,qCACAE,eAAe,CAACd,uCAChBM;QAEFD,YAAYA;QAEXC,yBACC,oBAACf;QACCM,MAAK;QACLY,SAAS;QACT2B,kBAAkB1B;sBAGtB,oBAAC2B;QAAK5B,SAAS;OACZvB,aAAaiB,yBACZ,oBAACkC;QACC5B,SAAS;QACT6B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWpB;OAEzDnB,SAGJjB,aAAagB,2BACZ,oBAACmC;QACC5B,SAAS;QACT8B,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAapB;OAE3DpB,WAGJhB,aAAakB,wBACZ,oBAACiC;QACC5B,SAAS;QACT6B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUpB;OAExDlB;AAMb,EAAE"}

package/dist/components/Calendar/Calendar.js

@@ -92,7 +92,8 @@ var warn = warnOnce("Calendar");
         viewDate
     ]);
     var onDayChange = React.useCallback(function(date) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(setTimeEqual(date, value));
+        var _onChange;
+        (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(setTimeEqual(date, value));
     }, [
         value,
         onChange

package/dist/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(\n        styles['Calendar'],\n        size === 's' && styles['Calendar--size-s'],\n        className,\n      )}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","div","ref","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(\n        styles['Calendar'],\n        size === 's' && styles['Calendar--size-s'],\n        className,\n      )}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","div","ref","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur"],"mappings":"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"}

package/dist/components/CalendarDay/CalendarDay.js

@@ -35,13 +35,15 @@ export var CalendarDay = /*#__PURE__*/ React.memo(function(_param) {
         onChange
     ]);
     var handleEnter = React.useCallback(function() {
-        return onEnter === null || onEnter === void 0 ? void 0 : onEnter(day);
+        var _onEnter;
+        return (_onEnter = onEnter) === null || _onEnter === void 0 ? void 0 : _onEnter(day);
     }, [
         day,
         onEnter
     ]);
     var handleLeave = React.useCallback(function() {
-        return onLeave === null || onLeave === void 0 ? void 0 : onLeave(day);
+        var _onLeave;
+        return (_onLeave = onLeave) === null || _onLeave === void 0 ? void 0 : _onLeave(day);
     }, [
         day,
         onLeave

package/dist/components/CalendarDay/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size === 's' && styles['CalendarDay--size-s'],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? '' : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","div","hoverMode","hasActive","aria-label","Intl","DateTimeFormat","weekday","year","month","format","tabIndex","getRootRef","focusVisibleMode","getDate","displayName"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gCAAgC,QAAQ,sCAAsC;AACvF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,QAAQ,QAA8B,uBAAuB;AA4BtE,OAAO,IAAMC,4BAAcL,MAAMM,KAC/B;QACEC,aAAAA,KACAC,eAAAA,OACAC,kBAAAA,UACAC,kBAAAA,UACAC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,wBAAAA,gBACAC,sBAAAA,cACAC,iBAAAA,SACAC,iBAAAA,SACAC,iBAAAA,SACAC,gBAAAA,QACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,mBAAAA,WACAC,cAAAA,MACAC,mBAAAA,WACGC;QAlBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWvB,oBAAXuB;IACR,IAAMC,MAAM3B,MAAM4B,OAAoB;IACtC,IAAMC,UAAU7B,MAAM8B,YAAY;eAAMpB,SAASH;OAAM;QAACA;QAAKG;KAAS;IACtE,IAAMqB,cAAc/B,MAAM8B,YAAY;QAAMb,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUV;OAAM;QAACA;QAAKU;KAAQ;IAC1E,IAAMe,cAAchC,MAAM8B,YAAY;QAAMZ,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUX;OAAM;QAACA;QAAKW;KAAQ;IAE1ElB,MAAMiC,UAAU;QACd,IAAIjB,WAAWW,IAAIO,SAAS;YAC1BP,IAAIO,QAAQC,cAAc,IAAIC,MAAMlC,kCAAkC;gBAAEmC,SAAS;YAAK;YACtFV,IAAIO,QAAQI;QACd;IACF,GAAG;QAACtB;KAAQ;IAEZ,IAAIL,QAAQ;QACV,qBAAO,oBAAC4B;YAAIf,SAAS;;IACvB;IAEA,qBACE,oBAACpB;QACCoB,WAAWvB,8BAETsB,SAAS,kCACTf,mCACAC,YAAY,CAACG,yCACbE,sDACAC,kDACAH,yCACA,CAACU,gDACDE;QAEFgB,WAAW3B,SAAS;QACpB4B,WAAW;QACXZ,SAASA;QACTjB,UAAUA;QACV8B,cAAY,IAAIC,KAAKC,eAAelB,QAAQ;YAC1CmB,SAAS;YACTC,MAAM;YACNC,OAAO;YACPxC,KAAK;QACP,GAAGyC,OAAOzC;QACV0C,UAAU,CAAC;QACXC,YAAYvB;QACZwB,kBAAkBtC,SAAS,YAAY;QACvCI,SAASc;QACTb,SAASc;OACLP,sBAEJ,oBAACc;QACCf,WAAWvB,sCAETkB,6CACAC,oEACAC;qBAGF,oBAACkB;QACCf,WAAWvB,qCAETY,UAAU,CAACD;qBAGb,oBAAC2B;QAAIf,SAAS;OAAsCjB,IAAI6C;AAKlE,GACA;AAEF/C,YAAYgD,cAAc"}
+{"version":3,"sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size === 's' && styles['CalendarDay--size-s'],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? '' : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","div","hoverMode","hasActive","aria-label","Intl","DateTimeFormat","weekday","year","month","format","tabIndex","getRootRef","focusVisibleMode","getDate","displayName"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gCAAgC,QAAQ,sCAAsC;AACvF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,QAAQ,QAA8B,uBAAuB;AA4BtE,OAAO,IAAMC,4BAAcL,MAAMM,IAAI,CACnC;QACEC,aAAAA,KACAC,eAAAA,OACAC,kBAAAA,UACAC,kBAAAA,UACAC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,wBAAAA,gBACAC,sBAAAA,cACAC,iBAAAA,SACAC,iBAAAA,SACAC,iBAAAA,SACAC,gBAAAA,QACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,mBAAAA,WACAC,cAAAA,MACAC,mBAAAA,WACGC;QAlBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWvB,oBAAXuB;IACR,IAAMC,MAAM3B,MAAM4B,MAAM,CAAc;IACtC,IAAMC,UAAU7B,MAAM8B,WAAW,CAAC;eAAMpB,SAASH;OAAM;QAACA;QAAKG;KAAS;IACtE,IAAMqB,cAAc/B,MAAM8B,WAAW,CAAC;YAAMb;gBAAAA,WAAAA,qBAAAA,+BAAAA,SAAUV;OAAM;QAACA;QAAKU;KAAQ;IAC1E,IAAMe,cAAchC,MAAM8B,WAAW,CAAC;YAAMZ;gBAAAA,WAAAA,qBAAAA,+BAAAA,SAAUX;OAAM;QAACA;QAAKW;KAAQ;IAE1ElB,MAAMiC,SAAS,CAAC;QACd,IAAIjB,WAAWW,IAAIO,OAAO,EAAE;YAC1BP,IAAIO,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAMlC,kCAAkC;gBAAEmC,SAAS;YAAK;YACtFV,IAAIO,OAAO,CAACI,KAAK;QACnB;IACF,GAAG;QAACtB;KAAQ;IAEZ,IAAIL,QAAQ;QACV,qBAAO,oBAAC4B;YAAIf,SAAS;;IACvB;IAEA,qBACE,oBAACpB;QACCoB,WAAWvB,8BAETsB,SAAS,kCACTf,mCACAC,YAAY,CAACG,yCACbE,sDACAC,kDACAH,yCACA,CAACU,gDACDE;QAEFgB,WAAW3B,SAAS;QACpB4B,WAAW;QACXZ,SAASA;QACTjB,UAAUA;QACV8B,cAAY,IAAIC,KAAKC,cAAc,CAAClB,QAAQ;YAC1CmB,SAAS;YACTC,MAAM;YACNC,OAAO;YACPxC,KAAK;QACP,GAAGyC,MAAM,CAACzC;QACV0C,UAAU,CAAC;QACXC,YAAYvB;QACZwB,kBAAkBtC,SAAS,YAAY;QACvCI,SAASc;QACTb,SAASc;OACLP,sBAEJ,oBAACc;QACCf,WAAWvB,sCAETkB,6CACAC,oEACAC;qBAGF,oBAACkB;QACCf,WAAWvB,qCAETY,UAAU,CAACD;qBAGb,oBAAC2B;QAAIf,SAAS;OAAsCjB,IAAI6C,OAAO;AAKzE,GACA;AAEF/C,YAAYgD,WAAW,GAAG"}