@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/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/cssm/components/HorizontalScroll/HorizontalScroll.js

@@ -1,180 +1,172 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "getRef", "className"];
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
 import { HorizontalScrollArrow } from './HorizontalScrollArrow';
-import "./HorizontalScroll.module.css";
+import styles from './HorizontalScroll.module.css';
 /**
  * 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);
-};
-
+ */ const roundUpElementScrollLeft = (el)=>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 = 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;
+ */ const SCROLL_ONE_FRAME_TIME = 250;
+function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrollToRightBorder , onScrollEnd , onScrollStart , initialScrollWidth , scrollAnimationDuration =SCROLL_ONE_FRAME_TIME  }) {
+    if (!scrollElement || !getScrollPosition) {
+        return;
     }
-    onScrollEnd();
-    animationQueue.shift();
-    if (animationQueue.length > 0) {
-      animationQueue[0]();
+    /**
+   * максимальное значение сдвига влево
+   */ const maxLeft = initialScrollWidth - scrollElement.offsetWidth;
+    let startLeft = roundUpElementScrollLeft(scrollElement);
+    let endLeft = getScrollPosition(startLeft);
+    onScrollStart();
+    if (endLeft >= maxLeft) {
+        onScrollToRightBorder();
+        endLeft = maxLeft;
     }
-  })();
+    const startTime = now();
+    (function scroll() {
+        if (!scrollElement) {
+            onScrollEnd();
+            return;
+        }
+        const time = now();
+        const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
+        const value = easeInOutSine(elapsed);
+        const 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
- */
-export 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 = _objectWithoutProperties(_ref2, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    canScrollLeft = _React$useState2[0],
-    setCanScrollLeft = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    canScrollRight = _React$useState4[0],
-    setCanScrollRight = _React$useState4[1];
-  var isCustomScrollingRef = React.useRef(false);
-  var scrollerRef = useExternRef(getRef);
-  var animationQueue = React.useRef([]);
-  var hasPointer = 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 = 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", _extends({}, restProps, {
-    className: 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, {
-    size: arrowSize,
-    direction: "left",
-    className: "vkuiHorizontalScroll__arrowLeft",
-    onClick: scrollToLeft
-  }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/React.createElement(HorizontalScrollArrow, {
-    size: arrowSize,
-    direction: "right",
-    className: "vkuiHorizontalScroll__arrowRight",
-    onClick: scrollToRight
-  }));
+ */ export const HorizontalScroll = ({ children , getScrollToLeft , getScrollToRight , showArrows =true , arrowSize ='l' , scrollAnimationDuration =SCROLL_ONE_FRAME_TIME , getRef , className , scrollOnAnyWheel =false , ...restProps })=>{
+    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+    const [canScrollRight, setCanScrollRight] = React.useState(false);
+    const isCustomScrollingRef = React.useRef(false);
+    const scrollerRef = useExternRef(getRef);
+    const animationQueue = React.useRef([]);
+    const hasPointer = useAdaptivityHasPointer();
+    const scrollTo = React.useCallback((getScrollPosition)=>{
+        const scrollElement = scrollerRef.current;
+        animationQueue.current.push(()=>doScroll({
+                scrollElement,
+                getScrollPosition,
+                animationQueue: animationQueue.current,
+                onScrollToRightBorder: ()=>setCanScrollRight(false),
+                onScrollEnd: ()=>isCustomScrollingRef.current = false,
+                onScrollStart: ()=>isCustomScrollingRef.current = true,
+                initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
+                scrollAnimationDuration
+            }));
+        if (animationQueue.current.length === 1) {
+            animationQueue.current[0]();
+        }
+    }, [
+        scrollAnimationDuration,
+        scrollerRef
+    ]);
+    const scrollToLeft = React.useCallback(()=>{
+        const getScrollPosition = getScrollToLeft ?? ((i)=>i - scrollerRef.current.offsetWidth);
+        scrollTo(getScrollPosition);
+    }, [
+        getScrollToLeft,
+        scrollTo,
+        scrollerRef
+    ]);
+    const scrollToRight = React.useCallback(()=>{
+        const getScrollPosition = getScrollToRight ?? ((i)=>i + scrollerRef.current.offsetWidth);
+        scrollTo(getScrollPosition);
+    }, [
+        getScrollToRight,
+        scrollTo,
+        scrollerRef
+    ]);
+    const onscroll = React.useCallback(()=>{
+        if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
+            const scrollElement = scrollerRef.current;
+            setCanScrollLeft(scrollElement.scrollLeft > 0);
+            setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
+        }
+    }, [
+        hasPointer,
+        scrollerRef,
+        showArrows
+    ]);
+    const scrollEvent = useEventListener('scroll', onscroll);
+    React.useEffect(()=>{
+        if (scrollerRef.current) {
+            scrollEvent.add(scrollerRef.current);
+        }
+    }, [
+        scrollEvent,
+        scrollerRef
+    ]);
+    React.useEffect(onscroll, [
+        scrollerRef,
+        children,
+        onscroll
+    ]);
+    /**
+   * Прокрутка с помощью любого колеса мыши
+   */ const onwheel = React.useCallback((e)=>{
+        scrollerRef.current.scrollBy({
+            left: e.deltaX + e.deltaY,
+            behavior: 'auto'
+        });
+        e.preventDefault();
+    }, [
+        scrollerRef
+    ]);
+    const wheelEvent = useEventListener('wheel', onwheel);
+    React.useEffect(()=>{
+        if (!scrollerRef.current || !scrollOnAnyWheel) {
+            return noop;
+        }
+        wheelEvent.add(scrollerRef.current);
+        return wheelEvent.remove;
+    }, [
+        wheelEvent,
+        scrollerRef,
+        scrollOnAnyWheel
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['HorizontalScroll'], 'vkuiInternalHorizontalScroll', showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows', className)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['HorizontalScroll__in'],
+        ref: scrollerRef
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['HorizontalScroll__in-wrapper']
+    }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
+        size: arrowSize,
+        direction: "left",
+        className: styles['HorizontalScroll__arrowLeft'],
+        onClick: scrollToLeft
+    }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
+        size: arrowSize,
+        direction: "right",
+        className: styles['HorizontalScroll__arrowRight'],
+        onClick: scrollToRight
+    }));
 };
+
 //# sourceMappingURL=HorizontalScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["React","classNames","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","direction","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,aAAa,QAAQ,eAAe;AAE7C,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,OAAOC,YAAY,gCAAgC;AAwCnD;;CAEC,GACD,SAASC,MAAM;IACb,OAAOC,eAAeA,YAAYD,GAAG,GAAGC,YAAYD,GAAG,KAAKE,KAAKF,GAAG,EAAE;AACxE;AAEA;;;CAGC,GACD,MAAMG,2BAA2B,CAACC,KAAoBC,KAAKC,IAAI,CAACF,GAAGG,UAAU;AAE7E;;;;CAIC,GACD,MAAMC,wBAAwB;AAE9B,SAASC,SAAS,EAChBC,cAAa,EACbC,kBAAiB,EACjBC,eAAc,EACdC,sBAAqB,EACrBC,YAAW,EACXC,cAAa,EACbC,mBAAkB,EAClBC,yBAA0BT,sBAAqB,EACjC,EAAE;IAChB,IAAI,CAACE,iBAAiB,CAACC,mBAAmB;QACxC;IACF,CAAC;IAED;;GAEC,GACD,MAAMO,UAAUF,qBAAqBN,cAAcS,WAAW;IAE9D,IAAIC,YAAYjB,yBAAyBO;IACzC,IAAIW,UAAUV,kBAAkBS;IAEhCL;IAEA,IAAIM,WAAWH,SAAS;QACtBL;QACAQ,UAAUH;IACZ,CAAC;IAED,MAAMI,YAAYtB;IAEjB,CAAA,SAASuB,SAAS;QACjB,IAAI,CAACb,eAAe;YAClBI;YACA;QACF,CAAC;QAED,MAAMU,OAAOxB;QACb,MAAMyB,UAAUpB,KAAKqB,GAAG,CAAC,AAACF,CAAAA,OAAOF,SAAQ,IAAKL,yBAAyB;QAEvE,MAAMU,QAAQ9B,cAAc4B;QAE5B,MAAMG,cAAcR,YAAY,AAACC,CAAAA,UAAUD,SAAQ,IAAKO;QACxDjB,cAAcH,UAAU,GAAGF,KAAKC,IAAI,CAACsB;QAErC,IAAIzB,yBAAyBO,mBAAmBL,KAAKwB,GAAG,CAAC,GAAGR,YAAYI,YAAY,GAAG;YACrFK,sBAAsBP;YACtB;QACF,CAAC;QAEDT;QACAF,eAAemB,KAAK;QACpB,IAAInB,eAAeoB,MAAM,GAAG,GAAG;YAC7BpB,cAAc,CAAC,EAAE;QACnB,CAAC;IACH,CAAA;AACF;AAEA;;CAEC,GACD,OAAO,MAAMqB,mBAAmB,CAAC,EAC/BC,SAAQ,EACRC,gBAAe,EACfC,iBAAgB,EAChBC,YAAa,IAAI,CAAA,EACjBC,WAAY,IAAG,EACfrB,yBAA0BT,sBAAqB,EAC/C+B,OAAM,EACNC,UAAS,EACTC,kBAAmB,KAAK,CAAA,EACxB,GAAGC,WACmB,GAAK;IAC3B,MAAM,CAACC,eAAeC,iBAAiB,GAAGrD,MAAMsD,QAAQ,CAAC,KAAK;IAC9D,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGxD,MAAMsD,QAAQ,CAAC,KAAK;IAEhE,MAAMG,uBAAuBzD,MAAM0D,MAAM,CAAC,KAAK;IAE/C,MAAMC,cAActD,aAAa2C;IAEjC,MAAM3B,iBAAiBrB,MAAM0D,MAAM,CAAiB,EAAE;IAEtD,MAAME,aAAazD;IAEnB,MAAM0D,WAAW7D,MAAM8D,WAAW,CAChC,CAAC1C,oBAA6C;QAC5C,MAAMD,gBAAgBwC,YAAYI,OAAO;QAEzC1C,eAAe0C,OAAO,CAACC,IAAI,CAAC,IAC1B9C,SAAS;gBACPC;gBACAC;gBACAC,gBAAgBA,eAAe0C,OAAO;gBACtCzC,uBAAuB,IAAMkC,kBAAkB,KAAK;gBACpDjC,aAAa,IAAOkC,qBAAqBM,OAAO,GAAG,KAAK;gBACxDvC,eAAe,IAAOiC,qBAAqBM,OAAO,GAAG,IAAI;gBACzDtC,oBAAoBN,eAAe8C,mBAAmBC,eAAe;gBACrExC;YACF;QAEF,IAAIL,eAAe0C,OAAO,CAACtB,MAAM,KAAK,GAAG;YACvCpB,eAAe0C,OAAO,CAAC,EAAE;QAC3B,CAAC;IACH,GACA;QAACrC;QAAyBiC;KAAY;IAGxC,MAAMQ,eAAenE,MAAM8D,WAAW,CAAC,IAAM;QAC3C,MAAM1C,oBACJwB,mBAAoB,CAAA,CAACwB,IAAcA,IAAIT,YAAYI,OAAO,CAAEnC,WAAW,AAAD;QACxEiC,SAASzC;IACX,GAAG;QAACwB;QAAiBiB;QAAUF;KAAY;IAE3C,MAAMU,gBAAgBrE,MAAM8D,WAAW,CAAC,IAAM;QAC5C,MAAM1C,oBACJyB,oBAAqB,CAAA,CAACuB,IAAcA,IAAIT,YAAYI,OAAO,CAAEnC,WAAW,AAAD;QACzEiC,SAASzC;IACX,GAAG;QAACyB;QAAkBgB;QAAUF;KAAY;IAE5C,MAAMW,WAAWtE,MAAM8D,WAAW,CAAC,IAAM;QACvC,IAAIhB,cAAcc,cAAcD,YAAYI,OAAO,IAAI,CAACN,qBAAqBM,OAAO,EAAE;YACpF,MAAM5C,gBAAgBwC,YAAYI,OAAO;YAEzCV,iBAAiBlC,cAAcH,UAAU,GAAG;YAC5CwC,kBACE5C,yBAAyBO,iBAAiBA,cAAcS,WAAW,GACjET,cAAc+C,WAAW;QAE/B,CAAC;IACH,GAAG;QAACN;QAAYD;QAAab;KAAW;IAExC,MAAMyB,cAAcnE,iBAAiB,UAAUkE;IAC/CtE,MAAMwE,SAAS,CAAC,IAAM;QACpB,IAAIb,YAAYI,OAAO,EAAE;YACvBQ,YAAYE,GAAG,CAACd,YAAYI,OAAO;QACrC,CAAC;IACH,GAAG;QAACQ;QAAaZ;KAAY;IAC7B3D,MAAMwE,SAAS,CAACF,UAAU;QAACX;QAAahB;QAAU2B;KAAS;IAE3D;;GAEC,GACD,MAAMI,UAAU1E,MAAM8D,WAAW,CAC/B,CAACa,IAAkB;QACjBhB,YAAYI,OAAO,CAAEa,QAAQ,CAAC;YAAEC,MAAMF,EAAEG,MAAM,GAAGH,EAAEI,MAAM;YAAEC,UAAU;QAAO;QAC5EL,EAAEM,cAAc;IAClB,GACA;QAACtB;KAAY;IAGf,MAAMuB,aAAa9E,iBAAiB,SAASsE;IAC7C1E,MAAMwE,SAAS,CAAC,IAAM;QACpB,IAAI,CAACb,YAAYI,OAAO,IAAI,CAACb,kBAAkB;YAC7C,OAAOhD;QACT,CAAC;QAEDgF,WAAWT,GAAG,CAACd,YAAYI,OAAO;QAElC,OAAOmB,WAAWC,MAAM;IAC1B,GAAG;QAACD;QAAYvB;QAAaT;KAAiB;IAE9C,qBACE,oBAACkC;QACE,GAAGjC,SAAS;QACbF,WAAWhD,WACTO,MAAM,CAAC,mBAAmB,EAC1B,gCACAsC,eAAe,YAAY,iDAC3BG;qBAGF,oBAACmC;QAAInC,WAAWzC,MAAM,CAAC,uBAAuB;QAAE6E,KAAK1B;qBACnD,oBAACyB;QAAInC,WAAWzC,MAAM,CAAC,+BAA+B;OAAGmC,YAE1DG,cAAec,CAAAA,cAAcA,eAAe0B,SAAQ,KAAMlC,+BACzD,oBAAC7C;QACCgF,MAAMxC;QACNyC,WAAU;QACVvC,WAAWzC,MAAM,CAAC,8BAA8B;QAChDiF,SAAStB;QAGZrB,cAAec,CAAAA,cAAcA,eAAe0B,SAAQ,KAAM/B,gCACzD,oBAAChD;QACCgF,MAAMxC;QACNyC,WAAU;QACVvC,WAAWzC,MAAM,CAAC,+BAA+B;QACjDiF,SAASpB;;AAKnB,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.module.css

@@ -1 +1 @@
-.vkuiHorizontalScroll{overflow-x:hidden;position:relative}.vkuiHorizontalScroll__in{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:none}.vkuiHorizontalScroll__in::-webkit-scrollbar{display:none}.vkuiHorizontalScroll__in-wrapper{transition:transform .2s}.vkuiHorizontalScroll__arrowLeft:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(8px)}.vkuiHorizontalScroll__arrowRight:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(-8px)}.vkuiTabs .vkuiHorizontalScroll{min-width:100%}.vkuiTabs__in .vkuiHorizontalScroll__in-wrapper{align-items:stretch;display:flex}.vkuiTabs--withGaps .vkuiHorizontalScroll__in-wrapper:after,.vkuiTabs--withGaps .vkuiHorizontalScroll__in-wrapper:before{content:"";display:block;flex-shrink:0;height:1px;width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}
+.vkuiHorizontalScroll{overflow-x:hidden;position:relative}.vkuiHorizontalScroll__in{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:none}.vkuiHorizontalScroll__in::-webkit-scrollbar{display:none}.vkuiHorizontalScroll__in-wrapper{transition:transform .2s}.vkuiHorizontalScroll__arrowLeft:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(8px)}.vkuiHorizontalScroll__arrowRight:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(-8px)}.vkuiInternalTabs .vkuiHorizontalScroll{min-width:100%}.vkuiInternalTabs .vkuiHorizontalScroll__in-wrapper{align-items:stretch;display:flex}.vkuiInternalTabs--withGaps .vkuiHorizontalScroll__in-wrapper:after,.vkuiInternalTabs--withGaps .vkuiHorizontalScroll__in-wrapper:before{content:"";display:block;flex-shrink:0;height:1px;width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js

@@ -1,38 +1,31 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "direction", "onClick", "className"];
 import * as React from 'react';
 import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLeft } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { Tappable } from '../Tappable/Tappable';
-import "./HorizontalScrollArrow.module.css";
-export var HorizontalScrollArrow = function HorizontalScrollArrow(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'l' : _ref$size,
-    direction = _ref.direction,
-    onClick = _ref.onClick,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var ArrowIcon;
-  if (size === 'm') {
-    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;
-  } else {
-    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;
-  }
-  return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
-    Component: "button",
-    hasHover: false,
-    hasActive: false,
-    className: classNames("vkuiHorizontalScrollArrow", styles["HorizontalScrollArrow--size-".concat(size)], styles["HorizontalScrollArrow--direction-".concat(direction)], className),
-    onClick: onClick
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "vkuiHorizontalScrollArrow__icon"
-  }, /*#__PURE__*/React.createElement(ArrowIcon, null)));
-};
-var styles = {
-  "HorizontalScrollArrow--size-m": "vkuiHorizontalScrollArrow--size-m",
-  "HorizontalScrollArrow--size-l": "vkuiHorizontalScrollArrow--size-l",
-  "HorizontalScrollArrow--direction-left": "vkuiHorizontalScrollArrow--direction-left",
-  "HorizontalScrollArrow--direction-right": "vkuiHorizontalScrollArrow--direction-right"
+import styles from './HorizontalScrollArrow.module.css';
+export const HorizontalScrollArrow = ({ size ='l' , direction , onClick , className , ...restProps })=>{
+    let ArrowIcon;
+    if (size === 'm') {
+        ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;
+    } else {
+        ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;
+    }
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        ...restProps,
+        Component: "button",
+        hasHover: false,
+        hasActive: false,
+        className: classNames(styles['HorizontalScrollArrow'], {
+            m: styles['HorizontalScrollArrow--size-m'],
+            l: styles['HorizontalScrollArrow--size-l']
+        }[size], {
+            left: styles['HorizontalScrollArrow--direction-left'],
+            right: styles['HorizontalScrollArrow--direction-right']
+        }[direction], className),
+        onClick: onClick
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles['HorizontalScrollArrow__icon']
+    }, /*#__PURE__*/ React.createElement(ArrowIcon, null)));
 };
+
 //# sourceMappingURL=HorizontalScrollArrow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollArrow.js","names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","styles"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        styles[`HorizontalScrollArrow--size-${size}`],\n        styles[`HorizontalScrollArrow--direction-${direction}`],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAUhD,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAMA;EAAA,qBALhCC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,SAAuC;EAE3C,IAAIL,IAAI,KAAK,GAAG,EAAE;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGP,iBAAiB,GAAGD,aAAa;EACtE,CAAC,MAAM;IACLY,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGL,wBAAwB,GAAGD,aAAa;EAC7E;EAEA,oBACE,oBAAC,QAAQ,eACHS,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAEP,UAAU,8BAEnBS,MAAM,uCAAgCN,IAAI,EAAG,EAC7CM,MAAM,4CAAqCL,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","styles","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Component","hasHover","hasActive","m","l","left","right","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,qCAAqC;AASxD,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,MAAO,IAAG,EACVC,UAAS,EACTC,QAAO,EACPC,UAAS,EACT,GAAGC,WACwB,GAAK;IAChC,IAAIC;IAEJ,IAAIL,SAAS,KAAK;QAChBK,YAAYJ,cAAc,SAASR,oBAAoBD,aAAa;IACtE,OAAO;QACLa,YAAYJ,cAAc,SAASN,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG;QACE,GAAGO,SAAS;QACbE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWP,WACTE,MAAM,CAAC,wBAAwB,EAC/B;YACEW,GAAGX,MAAM,CAAC,gCAAgC;YAC1CY,GAAGZ,MAAM,CAAC,gCAAgC;QAC5C,CAAC,CAACE,KAAK,EACP;YACEW,MAAMb,MAAM,CAAC,wCAAwC;YACrDc,OAAOd,MAAM,CAAC,yCAAyC;QACzD,CAAC,CAACG,UAAU,EACZE;QAEFD,SAASA;qBAET,oBAACW;QAAKV,WAAWL,MAAM,CAAC,8BAA8B;qBACpD,oBAACO;AAIT,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.module.css

@@ -1 +1 @@
-.vkuiHorizontalScrollArrow{background-color:initial;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;opacity:0;padding:0;position:absolute;top:0;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--vkui--animation_easing_platform);-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.vkuiHorizontalScrollArrow__icon{align-items:center;background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;justify-content:center}.vkuiHorizontalScrollArrow--size-m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--size-l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--direction-left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--direction-right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiBaseGallery:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiBaseGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}
+.vkuiHorizontalScrollArrow{background-color:initial;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;opacity:0;padding:0;position:absolute;top:0;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--vkui--animation_easing_platform);-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.vkuiHorizontalScrollArrow__icon{align-items:center;background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;justify-content:center}.vkuiHorizontalScrollArrow--size-m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--size-l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--direction-left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--direction-right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiInternalBaseGallery:hover .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInternalBaseGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiInternalHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}