@vkontakte/vkui 5.2.3 → 5.3.0

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

@@ -1,67 +1,63 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "HorizontalCell", {
+    enumerable: true,
+    get: function() {
+        return HorizontalCell;
+    }
 });
-exports.HorizontalCell = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+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 _vkjs = require("@vkontakte/vkjs");
-var _Avatar = require("../Avatar/Avatar");
-var _Tappable = require("../Tappable/Tappable");
-var _Caption = require("../Typography/Caption/Caption");
-var _Footnote = require("../Typography/Footnote/Footnote");
-var _Subhead = require("../Typography/Subhead/Subhead");
-var _excluded = ["size", "children"],
-  _excluded2 = ["className", "header", "style", "subtitle", "size", "children", "getRootRef", "getRef"];
-var CellTypography = function CellTypography(_ref) {
-  var size = _ref.size,
-    children = _ref.children,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return size === 's' ? /*#__PURE__*/React.createElement(_Caption.Caption, restProps, children) : /*#__PURE__*/React.createElement(_Subhead.Subhead, restProps, children);
+var _avatar = require("../Avatar/Avatar");
+var _tappable = require("../Tappable/Tappable");
+var _caption = require("../Typography/Caption/Caption");
+var _footnote = require("../Typography/Footnote/Footnote");
+var _subhead = require("../Typography/Subhead/Subhead");
+var CellTypography = function(_param) {
+    var size = _param.size, children = _param.children, restProps = _objectWithoutProperties(_param, [
+        "size",
+        "children"
+    ]);
+    return size === "s" ? /*#__PURE__*/ _react.createElement(_caption.Caption, restProps, children) : /*#__PURE__*/ _react.createElement(_subhead.Subhead, restProps, children);
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/HorizontalCell
- */
-var HorizontalCell = function HorizontalCell(_ref2) {
-  var className = _ref2.className,
-    header = _ref2.header,
-    style = _ref2.style,
-    subtitle = _ref2.subtitle,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 's' : _ref2$size,
-    _ref2$children = _ref2.children,
-    children = _ref2$children === void 0 ? /*#__PURE__*/React.createElement(_Avatar.Avatar, {
-      size: 56
-    }) : _ref2$children,
-    getRootRef = _ref2.getRootRef,
-    getRef = _ref2.getRef,
-    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: getRootRef,
-    style: style,
-    className: (0, _vkjs.classNames)("vkuiHorizontalCell", styles["HorizontalCell--size-".concat(size)], className)
-  }, /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-    className: "vkuiHorizontalCell__body",
-    getRootRef: getRef
-  }, restProps), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalCell__image"
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalCell__content"
-  }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(CellTypography, {
-    size: size,
-    className: "vkuiHorizontalCell__title"
-  }, header), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
-    className: "vkuiHorizontalCell__subtitle"
-  }, subtitle))));
-};
-exports.HorizontalCell = HorizontalCell;
-var styles = {
-  "HorizontalCell--size-s": "vkuiHorizontalCell--size-s",
-  "HorizontalCell--size-m": "vkuiHorizontalCell--size-m",
-  "HorizontalCell--size-l": "vkuiHorizontalCell--size-l"
+var HorizontalCell = function(_param) {
+    var className = _param.className, header = _param.header, style = _param.style, subtitle = _param.subtitle, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? /*#__PURE__*/ _react.createElement(_avatar.Avatar, {
+        size: 56
+    }) : _param_children, getRootRef = _param.getRootRef, getRef = _param.getRef, restProps = _objectWithoutProperties(_param, [
+        "className",
+        "header",
+        "style",
+        "subtitle",
+        "size",
+        "children",
+        "getRootRef",
+        "getRef"
+    ]);
+    return /*#__PURE__*/ _react.createElement("div", {
+        ref: getRootRef,
+        style: style,
+        className: (0, _vkjs.classNames)("vkuiHorizontalCell", {
+            s: "vkuiHorizontalCell--size-s",
+            m: "vkuiHorizontalCell--size-m",
+            l: "vkuiHorizontalCell--size-l"
+        }[size], className)
+    }, /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpread({
+        className: "vkuiHorizontalCell__body",
+        getRootRef: getRef
+    }, restProps), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiHorizontalCell__image"
+    }, children), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiHorizontalCell__content"
+    }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(CellTypography, {
+        size: size
+    }, header), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+        className: "vkuiHorizontalCell__subtitle"
+    }, subtitle))));
 };
+
 //# sourceMappingURL=HorizontalCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCell.js","names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","classNames","styles","hasReactNode"],"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        styles[`HorizontalCell--size-${size}`],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && (\n            <CellTypography size={size} className={styles['HorizontalCell__title']}>\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAwD;EAAA;AAOxD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAA8D;EAAA,IAAxDC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,SAAS;EACpD,OAAOF,IAAI,KAAK,GAAG,gBACjB,oBAAC,gBAAO,EAAKE,SAAS,EAAGD,QAAQ,CAAW,gBAE5C,oBAAC,gBAAO,EAAKC,SAAS,EAAGD,QAAQ,CAClC;AACH,CAAC;AAaD;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAc,QAUA;EAAA,IATzBC,SAAS,SAATA,SAAS;IACTC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,QAAQ,SAARA,QAAQ;IAAA,mBACRP,IAAI;IAAJA,IAAI,2BAAG,GAAG;IAAA,uBACVC,QAAQ;IAARA,QAAQ,4CAAG,oBAAC,cAAM;MAAC,IAAI,EAAE;IAAG,EAAG;IAC/BO,UAAU,SAAVA,UAAU;IACVC,MAAM,SAANA,MAAM;IACHP,SAAS;EAEZ,oBACE;IACE,GAAG,EAAEM,UAAW;IAChB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAI,gBAAU,wBAEnBC,MAAM,gCAAyBX,IAAI,EAAG,EACtCI,SAAS;EACT,gBAEF,oBAAC,kBAAQ;IAAC,SAAS,4BAAiC;IAAC,UAAU,EAAEK;EAAO,GAAKP,SAAS,GACnF,IAAAU,kBAAY,EAACX,QAAQ,CAAC,iBACrB;IAAK,SAAS;EAAkC,GAAEA,QAAQ,CAC3D,eACD;IAAK,SAAS;EAAoC,GAC/C,IAAAW,kBAAY,EAACP,MAAM,CAAC,iBACnB,oBAAC,cAAc;IAAC,IAAI,EAAEL,IAAK;IAAC,SAAS;EAAkC,GACpEK,MAAM,CAEV,EACA,IAAAO,kBAAY,EAACL,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,SAAS;EAAqC,GAAEA,QAAQ,CACnE,CACG,CACG,CACP;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[size],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["HorizontalCell","CellTypography","size","children","restProps","Caption","Subhead","className","header","style","subtitle","Avatar","getRootRef","getRef","div","ref","classNames","s","m","l","Tappable","hasReactNode","Footnote"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;2DApCU;oBACkB;sBAElB;wBACE;uBACD;wBACC;uBACD;AAOxB,IAAMC,iBAAiB,iBAA2D;QAAxDC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,qBAACG,gBAAO,EAAKD,WAAYD,0BAEzB,qBAACG,gBAAO,EAAKF,WAAYD,SAC1B;AACH;AAgBO,IAAMH,iBAAiB,iBAUH;QATzBO,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAR,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,qBAACQ,cAAM;QAACT,MAAM;0BACzBU,oBAAAA,YACAC,gBAAAA,QACGT;QARHG;QACAC;QACAC;QACAC;QACAR;QACAC;QACAS;QACAC;;IAGA,qBACE,qBAACC;QACCC,KAAKH;QACLH,OAAOA;QACPF,WAAWS,IAAAA,gBAAU,wBAEnB;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACjB,KAAK,EACPK;qBAGF,qBAACa,kBAAQ;QAACb,SAAS;QAAkCK,YAAYC;OAAYT,YAC1EiB,IAAAA,kBAAY,EAAClB,2BACZ,qBAACW;QAAIP,SAAS;OAAoCJ,yBAEpD,qBAACW;QAAIP,SAAS;OACXc,IAAAA,kBAAY,EAACb,yBAAW,qBAACP;QAAeC,MAAMA;OAAOM,SACrDa,IAAAA,kBAAY,EAACX,2BACZ,qBAACY,kBAAQ;QAACf,SAAS;OAAuCG;AAMtE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HasRef } from '../../types';
-export declare type ScrollPositionHandler = (currentPosition: number) => number;
+export type ScrollPositionHandler = (currentPosition: number) => number;
 export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Функция для расчета величины прокрутки при клике на левую стрелку.
@@ -13,8 +13,13 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
     arrowSize?: 'm' | 'l';
     showArrows?: boolean | 'always';
     scrollAnimationDuration?: number;
+    /**
+     * Добавляет возможность прокручивать контент на любое колесо мыши.
+     * По умолчанию прокручивается как любой горизонтальный контент через shift.
+     */
+    scrollOnAnyWheel?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, scrollAnimationDuration, getRef, className, ...restProps }: HorizontalScrollProps) => JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;

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

@@ -1,188 +1,210 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "HorizontalScroll", {
+    enumerable: true,
+    get: function() {
+        return HorizontalScroll;
+    }
 });
-exports.HorizontalScroll = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+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 _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
 var _useEventListener = require("../../hooks/useEventListener");
 var _useExternRef = require("../../hooks/useExternRef");
 var _fx = require("../../lib/fx");
-var _HorizontalScrollArrow = require("./HorizontalScrollArrow");
-var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "getRef", "className"];
+var _horizontalScrollArrow = require("./HorizontalScrollArrow");
 /**
  * timing method
- */
-function now() {
-  return performance && performance.now ? performance.now() : Date.now();
+ */ function now() {
+    return performance && performance.now ? performance.now() : Date.now();
 }
-
 /**
  * Округляем el.scrollLeft
  * https://github.com/VKCOM/VKUI/pull/2445
- */
-var roundUpElementScrollLeft = function roundUpElementScrollLeft(el) {
-  return Math.ceil(el.scrollLeft);
+ */ var roundUpElementScrollLeft = function(el) {
+    return Math.ceil(el.scrollLeft);
 };
-
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
  * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
- */
-var SCROLL_ONE_FRAME_TIME = 250;
-function doScroll(_ref) {
-  var scrollElement = _ref.scrollElement,
-    getScrollPosition = _ref.getScrollPosition,
-    animationQueue = _ref.animationQueue,
-    onScrollToRightBorder = _ref.onScrollToRightBorder,
-    onScrollEnd = _ref.onScrollEnd,
-    onScrollStart = _ref.onScrollStart,
-    initialScrollWidth = _ref.initialScrollWidth,
-    _ref$scrollAnimationD = _ref.scrollAnimationDuration,
-    scrollAnimationDuration = _ref$scrollAnimationD === void 0 ? SCROLL_ONE_FRAME_TIME : _ref$scrollAnimationD;
-  if (!scrollElement || !getScrollPosition) {
-    return;
-  }
-
-  /**
-   * максимальное значение сдвига влево
-   */
-  var maxLeft = initialScrollWidth - scrollElement.offsetWidth;
-  var startLeft = roundUpElementScrollLeft(scrollElement);
-  var endLeft = getScrollPosition(startLeft);
-  onScrollStart();
-  if (endLeft >= maxLeft) {
-    onScrollToRightBorder();
-    endLeft = maxLeft;
-  }
-  var startTime = now();
-  (function scroll() {
-    if (!scrollElement) {
-      onScrollEnd();
-      return;
-    }
-    var time = now();
-    var elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
-    var value = (0, _fx.easeInOutSine)(elapsed);
-    var currentLeft = startLeft + (endLeft - startLeft) * value;
-    scrollElement.scrollLeft = Math.ceil(currentLeft);
-    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
-      requestAnimationFrame(scroll);
-      return;
+ */ var SCROLL_ONE_FRAME_TIME = 250;
+function doScroll(param) {
+    var scrollElement = param.scrollElement, getScrollPosition = param.getScrollPosition, animationQueue = param.animationQueue, onScrollToRightBorder = param.onScrollToRightBorder, onScrollEnd = param.onScrollEnd, onScrollStart = param.onScrollStart, initialScrollWidth = param.initialScrollWidth, _param_scrollAnimationDuration = param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration;
+    if (!scrollElement || !getScrollPosition) {
+        return;
     }
-    onScrollEnd();
-    animationQueue.shift();
-    if (animationQueue.length > 0) {
-      animationQueue[0]();
+    /**
+   * максимальное значение сдвига влево
+   */ var maxLeft = initialScrollWidth - scrollElement.offsetWidth;
+    var startLeft = roundUpElementScrollLeft(scrollElement);
+    var endLeft = getScrollPosition(startLeft);
+    onScrollStart();
+    if (endLeft >= maxLeft) {
+        onScrollToRightBorder();
+        endLeft = maxLeft;
     }
-  })();
+    var startTime = now();
+    (function scroll() {
+        if (!scrollElement) {
+            onScrollEnd();
+            return;
+        }
+        var time = now();
+        var elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
+        var value = (0, _fx.easeInOutSine)(elapsed);
+        var currentLeft = startLeft + (endLeft - startLeft) * value;
+        scrollElement.scrollLeft = Math.ceil(currentLeft);
+        if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
+            requestAnimationFrame(scroll);
+            return;
+        }
+        onScrollEnd();
+        animationQueue.shift();
+        if (animationQueue.length > 0) {
+            animationQueue[0]();
+        }
+    })();
 }
-
-/**
- * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
- */
-var HorizontalScroll = function HorizontalScroll(_ref2) {
-  var children = _ref2.children,
-    getScrollToLeft = _ref2.getScrollToLeft,
-    getScrollToRight = _ref2.getScrollToRight,
-    _ref2$showArrows = _ref2.showArrows,
-    showArrows = _ref2$showArrows === void 0 ? true : _ref2$showArrows,
-    _ref2$arrowSize = _ref2.arrowSize,
-    arrowSize = _ref2$arrowSize === void 0 ? 'l' : _ref2$arrowSize,
-    _ref2$scrollAnimation = _ref2.scrollAnimationDuration,
-    scrollAnimationDuration = _ref2$scrollAnimation === void 0 ? SCROLL_ONE_FRAME_TIME : _ref2$scrollAnimation,
-    getRef = _ref2.getRef,
-    className = _ref2.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    canScrollLeft = _React$useState2[0],
-    setCanScrollLeft = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    canScrollRight = _React$useState4[0],
-    setCanScrollRight = _React$useState4[1];
-  var isCustomScrollingRef = React.useRef(false);
-  var scrollerRef = (0, _useExternRef.useExternRef)(getRef);
-  var animationQueue = React.useRef([]);
-  var hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
-  var scrollTo = React.useCallback(function (getScrollPosition) {
-    var scrollElement = scrollerRef.current;
-    animationQueue.current.push(function () {
-      var _scrollElement$firstE;
-      return doScroll({
-        scrollElement: scrollElement,
-        getScrollPosition: getScrollPosition,
-        animationQueue: animationQueue.current,
-        onScrollToRightBorder: function onScrollToRightBorder() {
-          return setCanScrollRight(false);
-        },
-        onScrollEnd: function onScrollEnd() {
-          return isCustomScrollingRef.current = false;
-        },
-        onScrollStart: function onScrollStart() {
-          return isCustomScrollingRef.current = true;
-        },
-        initialScrollWidth: (scrollElement === null || scrollElement === void 0 ? void 0 : (_scrollElement$firstE = scrollElement.firstElementChild) === null || _scrollElement$firstE === void 0 ? void 0 : _scrollElement$firstE.scrollWidth) || 0,
-        scrollAnimationDuration: scrollAnimationDuration
-      });
-    });
-    if (animationQueue.current.length === 1) {
-      animationQueue.current[0]();
-    }
-  }, [scrollAnimationDuration, scrollerRef]);
-  var scrollToLeft = React.useCallback(function () {
-    var getScrollPosition = getScrollToLeft !== null && getScrollToLeft !== void 0 ? getScrollToLeft : function (i) {
-      return i - scrollerRef.current.offsetWidth;
-    };
-    scrollTo(getScrollPosition);
-  }, [getScrollToLeft, scrollTo, scrollerRef]);
-  var scrollToRight = React.useCallback(function () {
-    var getScrollPosition = getScrollToRight !== null && getScrollToRight !== void 0 ? getScrollToRight : function (i) {
-      return i + scrollerRef.current.offsetWidth;
-    };
-    scrollTo(getScrollPosition);
-  }, [getScrollToRight, scrollTo, scrollerRef]);
-  var onscroll = React.useCallback(function () {
-    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
-      var scrollElement = scrollerRef.current;
-      setCanScrollLeft(scrollElement.scrollLeft > 0);
-      setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
-    }
-  }, [hasPointer, scrollerRef, showArrows]);
-  var scrollEvent = (0, _useEventListener.useEventListener)('scroll', onscroll);
-  React.useEffect(function () {
-    if (scrollerRef.current) {
-      scrollEvent.add(scrollerRef.current);
-    }
-  }, [scrollEvent, scrollerRef]);
-  React.useEffect(onscroll, [scrollerRef, children, onscroll]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiHorizontalScroll", showArrows === 'always' && "vkuiHorizontalScroll--withConstArrows", className)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalScroll__in",
-    ref: scrollerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalScroll__in-wrapper"
-  }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/React.createElement(_HorizontalScrollArrow.HorizontalScrollArrow, {
-    size: arrowSize,
-    direction: "left",
-    className: "vkuiHorizontalScroll__arrowLeft",
-    onClick: scrollToLeft
-  }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/React.createElement(_HorizontalScrollArrow.HorizontalScrollArrow, {
-    size: arrowSize,
-    direction: "right",
-    className: "vkuiHorizontalScroll__arrowRight",
-    onClick: scrollToRight
-  }));
+var HorizontalScroll = function(_param) {
+    var children = _param.children, getScrollToLeft = _param.getScrollToLeft, getScrollToRight = _param.getScrollToRight, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, _param_scrollAnimationDuration = _param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, getRef = _param.getRef, className = _param.className, _param_scrollOnAnyWheel = _param.scrollOnAnyWheel, scrollOnAnyWheel = _param_scrollOnAnyWheel === void 0 ? false : _param_scrollOnAnyWheel, restProps = _objectWithoutProperties(_param, [
+        "children",
+        "getScrollToLeft",
+        "getScrollToRight",
+        "showArrows",
+        "arrowSize",
+        "scrollAnimationDuration",
+        "getRef",
+        "className",
+        "scrollOnAnyWheel"
+    ]);
+    var _React_useState = _slicedToArray(_react.useState(false), 2), canScrollLeft = _React_useState[0], setCanScrollLeft = _React_useState[1];
+    var _React_useState1 = _slicedToArray(_react.useState(false), 2), canScrollRight = _React_useState1[0], setCanScrollRight = _React_useState1[1];
+    var isCustomScrollingRef = _react.useRef(false);
+    var scrollerRef = (0, _useExternRef.useExternRef)(getRef);
+    var animationQueue = _react.useRef([]);
+    var hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
+    var scrollTo = _react.useCallback(function(getScrollPosition) {
+        var scrollElement = scrollerRef.current;
+        animationQueue.current.push(function() {
+            var _scrollElement_firstElementChild;
+            return doScroll({
+                scrollElement: scrollElement,
+                getScrollPosition: getScrollPosition,
+                animationQueue: animationQueue.current,
+                onScrollToRightBorder: function() {
+                    return setCanScrollRight(false);
+                },
+                onScrollEnd: function() {
+                    return isCustomScrollingRef.current = false;
+                },
+                onScrollStart: function() {
+                    return isCustomScrollingRef.current = true;
+                },
+                initialScrollWidth: (scrollElement === null || scrollElement === void 0 ? void 0 : (_scrollElement_firstElementChild = scrollElement.firstElementChild) === null || _scrollElement_firstElementChild === void 0 ? void 0 : _scrollElement_firstElementChild.scrollWidth) || 0,
+                scrollAnimationDuration: scrollAnimationDuration
+            });
+        });
+        if (animationQueue.current.length === 1) {
+            animationQueue.current[0]();
+        }
+    }, [
+        scrollAnimationDuration,
+        scrollerRef
+    ]);
+    var scrollToLeft = _react.useCallback(function() {
+        var getScrollPosition = getScrollToLeft !== null && getScrollToLeft !== void 0 ? getScrollToLeft : function(i) {
+            return i - scrollerRef.current.offsetWidth;
+        };
+        scrollTo(getScrollPosition);
+    }, [
+        getScrollToLeft,
+        scrollTo,
+        scrollerRef
+    ]);
+    var scrollToRight = _react.useCallback(function() {
+        var getScrollPosition = getScrollToRight !== null && getScrollToRight !== void 0 ? getScrollToRight : function(i) {
+            return i + scrollerRef.current.offsetWidth;
+        };
+        scrollTo(getScrollPosition);
+    }, [
+        getScrollToRight,
+        scrollTo,
+        scrollerRef
+    ]);
+    var onscroll = _react.useCallback(function() {
+        if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
+            var scrollElement = scrollerRef.current;
+            setCanScrollLeft(scrollElement.scrollLeft > 0);
+            setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
+        }
+    }, [
+        hasPointer,
+        scrollerRef,
+        showArrows
+    ]);
+    var scrollEvent = (0, _useEventListener.useEventListener)("scroll", onscroll);
+    _react.useEffect(function() {
+        if (scrollerRef.current) {
+            scrollEvent.add(scrollerRef.current);
+        }
+    }, [
+        scrollEvent,
+        scrollerRef
+    ]);
+    _react.useEffect(onscroll, [
+        scrollerRef,
+        children,
+        onscroll
+    ]);
+    /**
+   * Прокрутка с помощью любого колеса мыши
+   */ var onwheel = _react.useCallback(function(e) {
+        scrollerRef.current.scrollBy({
+            left: e.deltaX + e.deltaY,
+            behavior: "auto"
+        });
+        e.preventDefault();
+    }, [
+        scrollerRef
+    ]);
+    var wheelEvent = (0, _useEventListener.useEventListener)("wheel", onwheel);
+    _react.useEffect(function() {
+        if (!scrollerRef.current || !scrollOnAnyWheel) {
+            return _vkjs.noop;
+        }
+        wheelEvent.add(scrollerRef.current);
+        return wheelEvent.remove;
+    }, [
+        wheelEvent,
+        scrollerRef,
+        scrollOnAnyWheel
+    ]);
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", showArrows === "always" && "vkuiInternalHorizontalScroll--withConstArrows", className)
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiHorizontalScroll__in",
+        ref: scrollerRef
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiHorizontalScroll__in-wrapper"
+    }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ _react.createElement(_horizontalScrollArrow.HorizontalScrollArrow, {
+        size: arrowSize,
+        direction: "left",
+        className: "vkuiHorizontalScroll__arrowLeft",
+        onClick: scrollToLeft
+    }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ _react.createElement(_horizontalScrollArrow.HorizontalScrollArrow, {
+        size: arrowSize,
+        direction: "right",
+        className: "vkuiHorizontalScroll__arrowRight",
+        onClick: scrollToRight
+    }));
 };
-exports.HorizontalScroll = HorizontalScroll;
+
 //# sourceMappingURL=HorizontalScroll.js.map