@vkontakte/vkui 5.4.2 → 5.5.0

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

@@ -8,24 +8,24 @@ Object.defineProperty(exports, "AvatarBadgeWithPreset", {
         return AvatarBadgeWithPreset;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _imageBase = require("../../ImageBase/ImageBase");
+var _ImageBase = require("../../ImageBase/ImageBase");
 var _icons = require("./icons");
 var AvatarBadgeWithPreset = function(_param) {
-    var _param_preset = _param.preset, preset = _param_preset === void 0 ? "online" : _param_preset, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_preset = _param.preset, preset = _param_preset === void 0 ? "online" : _param_preset, className = _param.className, restProps = _object_without_properties._(_param, [
         "preset",
         "className"
     ]);
-    var size = _react.useContext(_imageBase.ImageBaseContext).size;
-    var badgeSize = (0, _imageBase.getBadgeIconSizeByImageBaseSize)(size);
+    var size = _react.useContext(_ImageBase.ImageBaseContext).size;
+    var badgeSize = (0, _ImageBase.getBadgeIconSizeByImageBaseSize)(size);
     var isOnlinePreset = preset === "online";
     var presetClassName = isOnlinePreset ? "vkuiAvatarBadge--preset-online" : "vkuiAvatarBadge--preset-onlineMobile";
     var Icon = isOnlinePreset ? _icons.Icon12Circle : _icons.Icon12OnlineMobile;
-    return /*#__PURE__*/ _react.createElement(_imageBase.ImageBase.Badge, _objectSpread({
+    return /*#__PURE__*/ _react.createElement(_ImageBase.ImageBase.Badge, _object_spread._({
         background: "stroke",
         className: (0, _vkjs.classNames)("vkuiAvatarBadge", presetClassName, className)
     }, restProps), /*#__PURE__*/ _react.createElement(Icon, {

package/dist/cjs/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":["AvatarBadgeWithPreset","preset","className","restProps","size","React","useContext","ImageBaseContext","badgeSize","getBadgeIconSizeByImageBaseSize","isOnlinePreset","presetClassName","Icon","Icon12Circle","Icon12OnlineMobile","ImageBase","Badge","background","classNames","width","height"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;2DArBU;oBACI;yBAMpB;qBAC0C;AAa1C,IAAMA,wBAAwB,iBAIH;+BAHhCC,QAAAA,oCAAS,0BACTC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,IAAM,AAAEE,OAASC,OAAMC,UAAU,CAACC,2BAAgB,EAA1CH;IACR,IAAMI,YAAYC,IAAAA,0CAA+B,EAACL;IAClD,IAAMM,iBAAiBT,WAAW;IAClC,IAAMU,kBAAkBD,0FAEsB;IAC9C,IAAME,OAAOF,iBAAiBG,mBAAY,GAAGC,yBAAkB;IAE/D,qBACE,qBAACC,oBAAS,CAACC,KAAK;QACdC,YAAW;QACXf,WAAWgB,IAAAA,gBAAU,qBAAwBP,iBAAiBT;OAC1DC,0BAEJ,qBAACS;QAAKO,OAAOX;QAAWY,QAAQZ;;AAGtC"}
+{"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":["AvatarBadgeWithPreset","preset","className","restProps","size","React","useContext","ImageBaseContext","badgeSize","getBadgeIconSizeByImageBaseSize","isOnlinePreset","presetClassName","Icon","Icon12Circle","Icon12OnlineMobile","ImageBase","Badge","background","classNames","width","height"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;+DArBU;oBACI;yBAMpB;qBAC0C;AAa1C,IAAMA,wBAAwB;+BACnCC,QAAAA,oCAAS,0BACTC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,IAAM,AAAEE,OAASC,OAAMC,WAAWC,6BAA1BH;IACR,IAAMI,YAAYC,IAAAA,4CAAgCL;IAClD,IAAMM,iBAAiBT,WAAW;IAClC,IAAMU,kBAAkBD;IAGxB,IAAME,OAAOF,iBAAiBG,sBAAeC;IAE7C,qBACE,qBAACC,qBAAUC;QACTC,YAAW;QACXf,WAAWgB,IAAAA,qCAAkCP,iBAAiBT;OAC1DC,0BAEJ,qBAACS;QAAKO,OAAOX;QAAWY,QAAQZ;;AAGtC"}

package/dist/cjs/components/Avatar/AvatarBadge/icons.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from '@vkontakte/icons';
-export declare const Icon12Circle: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12CircleLib>) => JSX.Element;
-export declare const Icon12OnlineMobile: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12OnlineMobileLib>) => JSX.Element;
+export declare const Icon12Circle: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12CircleLib>) => React.JSX.Element;
+export declare const Icon12OnlineMobile: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12OnlineMobileLib>) => React.JSX.Element;

package/dist/cjs/components/Avatar/AvatarBadge/icons.js

@@ -16,28 +16,28 @@ _export(exports, {
         return Icon12OnlineMobile;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var Icon12Circle = function(_param) {
-    var _param_width = _param.width, width = _param_width === void 0 ? 12 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 12 : _param_height, restProps = _objectWithoutProperties(_param, [
+    var _param_width = _param.width, width = _param_width === void 0 ? 12 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 12 : _param_height, restProps = _object_without_properties._(_param, [
         "width",
         "height"
     ]);
-    return /*#__PURE__*/ _react.createElement(_icons.Icon12Circle, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_icons.Icon12Circle, _object_spread_props._(_object_spread._({}, restProps), {
         width: width >= 24 ? 15 : 12,
         height: height >= 24 ? 15 : 12
     }));
 };
 var Icon12OnlineMobile = function(_param) {
-    var _param_width = _param.width, width = _param_width === void 0 ? 8 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 12 : _param_height, restProps = _objectWithoutProperties(_param, [
+    var _param_width = _param.width, width = _param_width === void 0 ? 8 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 12 : _param_height, restProps = _object_without_properties._(_param, [
         "width",
         "height"
     ]);
-    return /*#__PURE__*/ _react.createElement(_icons.Icon12OnlineMobile, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_icons.Icon12OnlineMobile, _object_spread_props._(_object_spread._({}, restProps), {
         width: width >= 24 ? 9 : 8,
         height: height >= 24 ? 15 : 12
     }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"names":["Icon12Circle","Icon12OnlineMobile","width","height","restProps","Icon12CircleLib","Icon12OnlineMobileLib"],"mappings":";;;;;;;;;;;IAMaA,YAAY;eAAZA;;IAUAC,kBAAkB;eAAlBA;;;;;;;2DAhBU;qBAIhB;AAEA,IAAMD,eAAe,iBAIwB;8BAHlDE,OAAAA,kCAAQ,0CACRC,QAAAA,oCAAS,oBACNC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,mBAAe,uCAAKD;QAAWF,OAAOA,SAAS,KAAK,KAAK,EAAE;QAAEC,QAAQA,UAAU,KAAK,KAAK,EAAE;;AAEhG;AAEO,IAAMF,qBAAqB,iBAIwB;8BAHxDC,OAAAA,kCAAQ,yCACRC,QAAAA,oCAAS,oBACNC;QAFHF;QACAC;;IAGA,qBACE,qBAACG,yBAAqB,uCAChBF;QACJF,OAAOA,SAAS,KAAK,IAAI,CAAC;QAC1BC,QAAQA,UAAU,KAAK,KAAK,EAAE;;AAGpC"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"names":["Icon12Circle","Icon12OnlineMobile","width","height","restProps","Icon12CircleLib","Icon12OnlineMobileLib"],"mappings":";;;;;;;;;;;IAMaA,YAAY;eAAZA;;IAUAC,kBAAkB;eAAlBA;;;;;;;+DAhBU;qBAIhB;AAEA,IAAMD,eAAe;8BAC1BE,OAAAA,kCAAQ,0CACRC,QAAAA,oCAAS,oBACNC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,iEAAoBD;QAAWF,OAAOA,SAAS,KAAK,KAAK;QAAIC,QAAQA,UAAU,KAAK,KAAK;;AAE9F;AAEO,IAAMF,qBAAqB;8BAChCC,OAAAA,kCAAQ,yCACRC,QAAAA,oCAAS,oBACNC;QAFHF;QACAC;;IAGA,qBACE,qBAACG,uEACKF;QACJF,OAAOA,SAAS,KAAK,IAAI;QACzBC,QAAQA,UAAU,KAAK,KAAK;;AAGlC"}

package/dist/cjs/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":["getInitialsFontSize","MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":";;;;+BASgBA;;;eAAAA;;;AAPhB,IAAMC,gBAAgB;AACtB,IAAMC,sBAAqC;AAC3C,IAAMC,gBAAgBF,gBAAgBC;AAK/B,SAASF,oBAAoBI,UAAkB,EAAU;IAC9D,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,cAAcF,qBAAqB;QAC5C,OAAOD;IACT,CAAC;IAED,IAAMI,qBAAqBC,KAAKC,IAAI,CAACH,aAAaD;IAClD,IAAMK,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":["getInitialsFontSize","MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":";;;;+BASgBA;;;eAAAA;;;AAPhB,IAAMC,gBAAgB;AACtB,IAAMC,sBAAqC;AAC3C,IAAMC,gBAAgBF,gBAAgBC;AAK/B,SAASF,oBAAoBI,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,cAAcF,qBAAqB;QAC5C,OAAOD;IACT;IAEA,IAAMI,qBAAqBC,KAAKC,KAAKH,aAAaD;IAClD,IAAMK,UAAUH,qBAAqB;IACrC,OAAOA,qBAAqBG;AAC9B"}

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

@@ -5,4 +5,4 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
-export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => React.JSX.Element;

package/dist/cjs/components/Badge/Badge.js

@@ -8,17 +8,17 @@ Object.defineProperty(exports, "Badge", {
         return Badge;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var Badge = function(_param) /*#__PURE__*/ {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "new" : _param_mode, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "new" : _param_mode, className = _param.className, restProps = _object_without_properties._(_param, [
         "mode",
         "className"
     ]);
-    return _react.createElement("span", _objectSpread({
+    return _react.createElement("span", _object_spread._({
         className: (0, _vkjs.classNames)("vkuiBadge", {
             new: "vkuiBadge--mode-new",
             prominent: "vkuiBadge--mode-prominent"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Badge.module.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', className, ...restProps }: BadgeProps) => (\n  <span\n    className={classNames(\n      styles['Badge'],\n      {\n        new: styles['Badge--mode-new'],\n        prominent: styles['Badge--mode-prominent'],\n      }[mode],\n      className,\n    )}\n    {...restProps}\n  />\n);\n"],"names":["Badge","mode","className","restProps","span","classNames","new","prominent"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;2DAXU;oBACI;AAUpB,IAAMA,QAAQ,+BACnB;6BADsBC,MAAAA,gCAAO,qBAAOC,mBAAAA,WAAcC;QAA5BF;QAAcC;;WACpC,qBAACE;QACCF,WAAWG,IAAAA,gBAAU,eAEnB;YACEC,GAAG;YACHC,SAAS;QACX,CAAC,CAACN,KAAK,EACPC;OAEEC;AACL"}
+{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Badge.module.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', className, ...restProps }: BadgeProps) => (\n  <span\n    className={classNames(\n      styles['Badge'],\n      {\n        new: styles['Badge--mode-new'],\n        prominent: styles['Badge--mode-prominent'],\n      }[mode],\n      className,\n    )}\n    {...restProps}\n  />\n);\n"],"names":["Badge","mode","className","restProps","span","classNames","new","prominent"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;+DAXU;oBACI;AAUpB,IAAMA,QAAQ;6BAAGC,MAAAA,gCAAO,qBAAOC,mBAAAA,WAAcC;QAA5BF;QAAcC;;WACpC,qBAACE;QACCF,WAAWG,IAAAA,+BAET;YACEC,GAAG;YACHC,SAAS;QACX,CAAC,CAACN,KAAK,EACPC;OAEEC;AACL"}

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

@@ -72,4 +72,4 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRo
 /**
  * @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) => JSX.Element;
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, getRootRef, ...restProps }: BannerProps) => React.JSX.Element;

package/dist/cjs/components/Banner/Banner.js

@@ -8,23 +8,23 @@ Object.defineProperty(exports, "Banner", {
         return Banner;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _iconButton = require("../IconButton/IconButton");
-var _tappable = require("../Tappable/Tappable");
-var _headline = require("../Typography/Headline/Headline");
-var _subhead = require("../Typography/Subhead/Subhead");
-var _text = require("../Typography/Text/Text");
-var _title = require("../Typography/Title/Title");
+var _IconButton = require("../IconButton/IconButton");
+var _Tappable = require("../Tappable/Tappable");
+var _Headline = require("../Typography/Headline/Headline");
+var _Subhead = require("../Typography/Subhead/Subhead");
+var _Text = require("../Typography/Text/Text");
+var _Title = require("../Typography/Title/Title");
 var 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 = _objectWithoutProperties(_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, [
         "mode",
         "imageTheme",
         "size",
@@ -42,8 +42,8 @@ var Banner = function(_param) {
         "getRootRef"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var HeaderTypography = size === "m" ? _title.Title : _headline.Headline;
-    var SubheaderTypography = size === "m" ? _text.Text : _subhead.Subhead;
+    var HeaderTypography = size === "m" ? _Title.Title : _Headline.Headline;
+    var SubheaderTypography = size === "m" ? _Text.Text : _Subhead.Subhead;
     var IconDismissIOS = mode === "image" ? _icons.Icon24DismissDark : _icons.Icon24DismissSubstract;
     var content = /*#__PURE__*/ _react.createElement(_react.Fragment, null, mode === "image" && background && /*#__PURE__*/ _react.createElement("div", {
         "aria-hidden": true,
@@ -59,19 +59,19 @@ var Banner = function(_param) {
     }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(SubheaderTypography, {
         Component: "p",
         className: "vkuiBanner__subheader"
-    }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_text.Text, {
+    }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_Text.Text, {
         Component: "p",
         className: "vkuiBanner__text"
     }, text), (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__actions"
     }, actions)));
-    return /*#__PURE__*/ _react.createElement("section", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement("section", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiBanner", platform === _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),
         ref: getRootRef
-    }), asideMode === "expand" ? /*#__PURE__*/ _react.createElement(_tappable.Tappable, {
+    }), asideMode === "expand" ? /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
         className: "vkuiBanner__in",
         activeMode: platform === _platform.Platform.IOS ? "opacity" : "background",
         role: "button"
@@ -81,7 +81,7 @@ var Banner = function(_param) {
         className: "vkuiBanner__in"
     }, content, asideMode === "dismiss" && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__aside"
-    }, /*#__PURE__*/ _react.createElement(_iconButton.IconButton, {
+    }, /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
         "aria-label": dismissLabel,
         className: "vkuiBanner__dismiss",
         onClick: onDismiss,

package/dist/cjs/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   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\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 />\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":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","div","aria-hidden","hasReactNode","Component","weight","level","React","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA4FaA;;;eAAAA;;;;;;;2DA5FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,SAAS,iBAiBH;6BAhBjBC,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,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBhB,SAAS,MAAMiB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBnB,SAAS,MAAMoB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBxB,SAAS,UAAUyB,wBAAiB,GAAGC,6BAAsB;IAEpF,IAAMC,wBACJ,4CACG3B,SAAS,WAAWS,4BACnB,qBAACmB;QAAIC,eAAAA,IAAW;QAAChB,SAAS;OACvBJ,aAIJN,wBAAU,qBAACyB;QAAIf,SAAS;OAA6BV,uBAEtD,qBAACyB;QAAIf,SAAS;OACXiB,IAAAA,kBAAY,EAACzB,yBACZ,qBAACa;QAAiBa,WAAU;QAAIC,QAAO;QAAIC,OAAO/B,SAAS,MAAM,MAAM,GAAG;OACvEG,SAGJyB,IAAAA,kBAAY,EAACxB,4BACZ,qBAACe;QAAoBU,WAAU;QAAIlB,SAAS;OACzCP,YAGJwB,IAAAA,kBAAY,EAACvB,uBACZ,qBAACe,UAAI;QAACS,WAAU;QAAIlB,SAAS;OAC1BN,OAGJuB,IAAAA,kBAAY,EAACpB,YAAYwB,OAAMC,QAAQ,CAACC,KAAK,CAAC1B,WAAW,mBACxD,qBAACkB;QAAIf,SAAS;OAA8BH;IAMpD,qBACE,qBAAC2B,gDACKtB;QACJF,WAAWyB,IAAAA,gBAAU,gBAEnBtB,aAAauB,kBAAQ,CAACC,GAAG,uBACzBxC,SAAS,qCACT;YACEyC,CAAC;YACDC,CAAC;QACH,CAAC,CAACxC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF8B,KAAK7B;QAEJV,cAAc,yBACb,qBAACwC,kBAAQ;QACP/B,SAAS;QACTgC,YAAY7B,aAAauB,kBAAQ,CAACC,GAAG,GAAG,YAAY,YAAY;QAChEM,MAAK;OAEJnB,uBAED,qBAACC;QAAIf,SAAS;qBACZ,qBAACkC,oBAAa,0BAIlB,qBAACnB;QAAIf,SAAS;OACXc,SAEAvB,cAAc,2BACb,qBAACwB;QAAIf,SAAS;qBACZ,qBAACmC,sBAAU;QACTC,cAAYrC;QACZC,SAAS;QACTqC,SAASvC;QACTwC,WAAU;QACVC,WAAW,KAAK;OAEfpC,aAAauB,kBAAQ,CAACC,GAAG,iBAAG,qBAAChB,sCAAoB,qBAAC6B,mBAAY,OAAG,GAK3E;AAGP"}
+{"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   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\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 />\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":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","div","aria-hidden","hasReactNode","Component","weight","level","React","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA4FaA;;;eAAAA;;;;;;;+DA5FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,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,WAAWC,IAAAA;IAEjB,IAAMC,mBAAmBhB,SAAS,MAAMiB,eAAQC;IAChD,IAAMC,sBAAsBnB,SAAS,MAAMoB,aAAOC;IAElD,IAAMC,iBAAiBxB,SAAS,UAAUyB,2BAAoBC;IAE9D,IAAMC,wBACJ,4CACG3B,SAAS,WAAWS,4BACnB,qBAACmB;QAAIC,eAAAA;QAAYhB,SAAS;OACvBJ,aAIJN,wBAAU,qBAACyB;QAAIf,SAAS;OAA6BV,uBAEtD,qBAACyB;QAAIf,SAAS;OACXiB,IAAAA,oBAAazB,yBACZ,qBAACa;QAAiBa,WAAU;QAAIC,QAAO;QAAIC,OAAO/B,SAAS,MAAM,MAAM;OACpEG,SAGJyB,IAAAA,oBAAaxB,4BACZ,qBAACe;QAAoBU,WAAU;QAAIlB,SAAS;OACzCP,YAGJwB,IAAAA,oBAAavB,uBACZ,qBAACe;QAAKS,WAAU;QAAIlB,SAAS;OAC1BN,OAGJuB,IAAAA,oBAAapB,YAAYwB,OAAMC,SAASC,MAAM1B,WAAW,mBACxD,qBAACkB;QAAIf,SAAS;OAA8BH;IAMpD,qBACE,qBAAC2B,uDACKtB;QACJF,WAAWyB,IAAAA,gCAETtB,aAAauB,mBAASC,0BACtBxC,SAAS,qCACT;YACEyC,CAAC;YACDC,CAAC;QACH,CAAC,CAACxC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF8B,KAAK7B;QAEJV,cAAc,yBACb,qBAACwC;QACC/B,SAAS;QACTgC,YAAY7B,aAAauB,mBAASC,MAAM,YAAY;QACpDM,MAAK;OAEJnB,uBAED,qBAACC;QAAIf,SAAS;qBACZ,qBAACkC,8CAIL,qBAACnB;QAAIf,SAAS;OACXc,SAEAvB,cAAc,2BACb,qBAACwB;QAAIf,SAAS;qBACZ,qBAACmC;QACCC,cAAYrC;QACZC,SAAS;QACTqC,SAASvC;QACTwC,WAAU;QACVC,WAAW;OAEVpC,aAAauB,mBAASC,oBAAM,qBAAChB,sCAAoB,qBAAC6B;AAQnE"}

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BaseGalleryProps } from './types';
-export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, className, arrowSize, ...restProps }: BaseGalleryProps) => JSX.Element;
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, className, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;

package/dist/cjs/components/BaseGallery/BaseGallery.js

@@ -8,20 +8,20 @@ Object.defineProperty(exports, "BaseGallery", {
         return BaseGallery;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
 var _useExternRef = require("../../hooks/useExternRef");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _dom = require("../../lib/dom");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _horizontalScrollArrow = require("../HorizontalScroll/HorizontalScrollArrow");
-var _touch = require("../Touch/Touch");
+var _ScrollArrow = require("../ScrollArrow/ScrollArrow");
+var _Touch = require("../Touch/Touch");
 var _helpers = require("./helpers");
 var ANIMATION_DURATION = 0.24;
 var LAYOUT_DEFAULT_STATE = {
@@ -41,7 +41,7 @@ var SHIFT_DEFAULT_STATE = {
     indent: 0
 };
 var BaseGallery = function(_param) {
-    var _param_bullets = _param.bullets, bullets = _param_bullets === void 0 ? false : _param_bullets, getRootRef = _param.getRootRef, children = _param.children, _param_slideWidth = _param.slideWidth, slideWidth = _param_slideWidth === void 0 ? "100%" : _param_slideWidth, _param_slideIndex = _param.slideIndex, slideIndex = _param_slideIndex === void 0 ? 0 : _param_slideIndex, tmp = _param.isDraggable, isDraggableProp = tmp === void 0 ? true : tmp, onDragStart = _param.onDragStart, onDragEnd = _param.onDragEnd, onChange = _param.onChange, onPrevClick = _param.onPrevClick, onNextClick = _param.onNextClick, _param_align = _param.align, align = _param_align === void 0 ? "left" : _param_align, showArrows = _param.showArrows, getRef = _param.getRef, className = _param.className, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, restProps = _objectWithoutProperties(_param, [
+    var _param_bullets = _param.bullets, bullets = _param_bullets === void 0 ? false : _param_bullets, getRootRef = _param.getRootRef, children = _param.children, _param_slideWidth = _param.slideWidth, slideWidth = _param_slideWidth === void 0 ? "100%" : _param_slideWidth, _param_slideIndex = _param.slideIndex, slideIndex = _param_slideIndex === void 0 ? 0 : _param_slideIndex, tmp = _param.isDraggable, isDraggableProp = tmp === void 0 ? true : tmp, onDragStart = _param.onDragStart, onDragEnd = _param.onDragEnd, onChange = _param.onChange, onPrevClick = _param.onPrevClick, onNextClick = _param.onNextClick, _param_align = _param.align, align = _param_align === void 0 ? "left" : _param_align, showArrows = _param.showArrows, getRef = _param.getRef, className = _param.className, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, restProps = _object_without_properties._(_param, [
         "bullets",
         "getRootRef",
         "children",
@@ -61,7 +61,7 @@ var BaseGallery = function(_param) {
     ]);
     var slidesStore = _react.useRef({});
     var layoutState = _react.useRef(LAYOUT_DEFAULT_STATE);
-    var _React_useState = _slicedToArray(_react.useState(SHIFT_DEFAULT_STATE), 2), shiftState = _React_useState[0], setShiftState = _React_useState[1];
+    var _React_useState = _sliced_to_array._(_react.useState(SHIFT_DEFAULT_STATE), 2), shiftState = _React_useState[0], setShiftState = _React_useState[1];
     var rootRef = (0, _useExternRef.useExternRef)(getRootRef);
     var viewportRef = (0, _useExternRef.useExternRef)(getRef);
     var window = (0, _dom.useDOM)().window;
@@ -155,7 +155,7 @@ var BaseGallery = function(_param) {
         };
         var _options_animation;
         setShiftState(function(prevState) {
-            return _objectSpreadProps(_objectSpread({}, prevState), {
+            return _object_spread_props._(_object_spread._({}, prevState), {
                 shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,
                 animation: (_options_animation = options.animation) !== null && _options_animation !== void 0 ? _options_animation : prevState.shiftX === validateIndent(prevState.shiftX)
             });
@@ -181,7 +181,7 @@ var BaseGallery = function(_param) {
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
         if (shiftState.animation !== undefined) {
             setShiftState(function(prevState) {
-                return _objectSpreadProps(_objectSpread({}, prevState), {
+                return _object_spread_props._(_object_spread._({}, prevState), {
                     animation: true,
                     deltaX: 0,
                     shiftX: calculateIndent(slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0)
@@ -225,7 +225,7 @@ var BaseGallery = function(_param) {
     var onStart = function(e) {
         onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e);
         setShiftState(function(prevState) {
-            return _objectSpreadProps(_objectSpread({}, prevState), {
+            return _object_spread_props._(_object_spread._({}, prevState), {
                 animation: false
             });
         });
@@ -236,7 +236,7 @@ var BaseGallery = function(_param) {
             if (e.isSlideX) {
                 if (shiftState.deltaX !== e.shiftX) {
                     setShiftState(function(prevState) {
-                        return _objectSpreadProps(_objectSpread({}, prevState), {
+                        return _object_spread_props._(_object_spread._({}, prevState), {
                             deltaX: e.shiftX,
                             dragging: e.isSlideX
                         });
@@ -259,7 +259,7 @@ var BaseGallery = function(_param) {
             nextShiftState.shiftX = shiftXStick;
         }
         setShiftState(function(prevState) {
-            return _objectSpread({}, prevState, nextShiftState);
+            return _object_spread._({}, prevState, nextShiftState);
         });
         if (targetIndex !== slideIndex) {
             onChange === null || onChange === void 0 ? void 0 : onChange(targetIndex);
@@ -282,10 +282,10 @@ var BaseGallery = function(_param) {
     (align === "left" && layoutState.current.containerWidth - shiftState.shiftX < ((_layoutState_current_layerWidth = layoutState.current.layerWidth) !== null && _layoutState_current_layerWidth !== void 0 ? _layoutState_current_layerWidth : 0) || // otherwise we need to check current slide index (align = right or align = center)
     align !== "left" && slideIndex < layoutState.current.slides.length - 1);
     var isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiBaseGallery", "vkuiInternalBaseGallery", align === "center" && "vkuiBaseGallery--align-center", slideWidth === "custom" && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable", className),
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiBaseGallery", align === "center" && "vkuiBaseGallery--align-center", slideWidth === "custom" && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable", className),
         ref: rootRef
-    }), /*#__PURE__*/ _react.createElement(_touch.Touch, {
+    }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
         className: "vkuiBaseGallery__viewport",
         onStartX: onStart,
         onMoveX: onMoveX,
@@ -317,11 +317,13 @@ var BaseGallery = function(_param) {
             className: (0, _vkjs.classNames)("vkuiBaseGallery__bullet", index === slideIndex && "vkuiBaseGallery__bullet--active"),
             key: index
         });
-    })), showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ _react.createElement(_horizontalScrollArrow.HorizontalScrollArrow, {
+    })), showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
+        className: "vkuiBaseGallery__arrow",
         direction: "left",
         onClick: slideLeft,
         size: arrowSize
-    }), showArrows && hasPointer && canSlideRight && /*#__PURE__*/ _react.createElement(_horizontalScrollArrow.HorizontalScrollArrow, {
+    }), showArrows && hasPointer && canSlideRight && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
+        className: "vkuiBaseGallery__arrow",
         direction: "right",
         onClick: slideRight,
         size: arrowSize

package/dist/cjs/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 { HorizontalScrollArrow } from '../HorizontalScroll/HorizontalScrollArrow';\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        'vkuiInternalBaseGallery',\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        <HorizontalScrollArrow direction=\"left\" onClick={slideLeft} size={arrowSize} />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <HorizontalScrollArrow direction=\"right\" onClick={slideRight} size={arrowSize} />\n      )}\n    </div>\n  );\n};\n"],"names":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","bullets","getRootRef","children","slideWidth","slideIndex","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","React","useRef","layoutState","useState","shiftState","setShiftState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","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","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","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","classNames","ref","Touch","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","HorizontalScrollArrow","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":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","bullets","getRootRef","children","slideWidth","slideIndex","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","React","useRef","layoutState","useState","shiftState","setShiftState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","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","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","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","classNames","ref","Touch","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","ScrollArrow","onClick","size"],"mappings":"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"}

package/dist/cjs/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","calcMax","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined"],"mappings":";;;;;;;;;;;IAQaA,OAAO;eAAPA;;IA4BAC,OAAO;eAAPA;;;AA5BN,IAAMD,UAAU,gBAOR;sCANbE,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,CAAC;IACL;IACA,OAAOQ;AACT;AAMO,IAAMV,UAAU,gBAIR;8BAHbG,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,CAAC;IACD,OAAO;AACT"}
+{"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","calcMax","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined"],"mappings":";;;;;;;;;;;IAQaA,OAAO;eAAPA;;IA4BAC,OAAO;eAAPA;;;AA5BN,IAAMD,UAAU;sCACrBE,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;AAMO,IAAMV,UAAU;8BACrBG,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"}

package/dist/cjs/components/BaseGallery/types.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
-import { HorizontalScrollArrowProps } from '../HorizontalScroll/HorizontalScrollArrow';
+import { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
 import { TouchEvent, TouchEventHandler } from '../Touch/Touch';
 export interface GallerySlidesState {
     coordX: number;
@@ -39,5 +39,5 @@ export interface BaseGalleryProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     isDraggable?: boolean;
     showArrows?: boolean;
     hasPointer?: boolean;
-    arrowSize?: HorizontalScrollArrowProps['size'];
+    arrowSize?: ScrollArrowProps['size'];
 }