@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -1,179 +1,201 @@
-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 { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
-import { useEventListener } from '../../hooks/useEventListener';
-import { useExternRef } from '../../hooks/useExternRef';
-import { easeInOutSine } from '../../lib/fx';
-import { HorizontalScrollArrow } from './HorizontalScrollArrow';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import * as React from "react";
+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";
 /**
  * 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 = 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 = 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
- */
-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 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 = _object_without_properties(_param, [
+        "children",
+        "getScrollToLeft",
+        "getScrollToRight",
+        "showArrows",
+        "arrowSize",
+        "scrollAnimationDuration",
+        "getRef",
+        "className",
+        "scrollOnAnyWheel"
+    ]);
+    var _React_useState = _sliced_to_array(React.useState(false), 2), canScrollLeft = _React_useState[0], setCanScrollLeft = _React_useState[1];
+    var _React_useState1 = _sliced_to_array(React.useState(false), 2), canScrollRight = _React_useState1[0], setCanScrollRight = _React_useState1[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_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 = 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 = useEventListener("wheel", onwheel);
+    React.useEffect(function() {
+        if (!scrollerRef.current || !scrollOnAnyWheel) {
+            return noop;
+        }
+        wheelEvent.add(scrollerRef.current);
+        return wheelEvent.remove;
+    }, [
+        wheelEvent,
+        scrollerRef,
+        scrollOnAnyWheel
+    ]);
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        className: 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, {
+        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
+    }));
 };
+
 //# sourceMappingURL=HorizontalScroll.js.map

package/dist/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","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","useState","canScrollLeft","setCanScrollLeft","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":"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"}

package/dist/components/HorizontalScroll/HorizontalScrollArrow.js

@@ -1,37 +1,38 @@
-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';
-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 _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLeft } from "@vkontakte/icons";
+import { classNames } from "@vkontakte/vkjs";
+import { Tappable } from "../Tappable/Tappable";
+export var HorizontalScrollArrow = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, direction = _param.direction, onClick = _param.onClick, className = _param.className, restProps = _object_without_properties(_param, [
+        "size",
+        "direction",
+        "onClick",
+        "className"
+    ]);
+    var ArrowIcon;
+    if (size === "m") {
+        ArrowIcon = direction === "left" ? Icon16ChevronLeft : Icon16Chevron;
+    } else {
+        ArrowIcon = direction === "left" ? Icon24ChevronCompactLeft : Icon24Chevron;
+    }
+    return /*#__PURE__*/ React.createElement(Tappable, _object_spread_props(_object_spread({}, restProps), {
+        Component: "button",
+        hasHover: false,
+        hasActive: false,
+        className: classNames("vkuiHorizontalScrollArrow", {
+            m: "vkuiHorizontalScrollArrow--size-m",
+            l: "vkuiHorizontalScrollArrow--size-l"
+        }[size], {
+            left: "vkuiHorizontalScrollArrow--direction-left",
+            right: "vkuiHorizontalScrollArrow--direction-right"
+        }[direction], className),
+        onClick: onClick
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: "vkuiHorizontalScrollArrow__icon"
+    }, /*#__PURE__*/ React.createElement(ArrowIcon, null)));
 };
+
 //# sourceMappingURL=HorizontalScrollArrow.js.map

package/dist/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;AAU/C,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","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;AAUhD,OAAO,IAAMC,wBAAwB,iBAMH;6BALhCC,MAAAA,gCAAO,mBACPC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE;IAEJ,IAAIL,SAAS,KAAK;QAChBK,YAAYJ,cAAc,SAASP,oBAAoBD,aAAa;IACtE,OAAO;QACLY,YAAYJ,cAAc,SAASL,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG,kDACKM;QACJE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWN,wCAET;YACEY,CAAC;YACDC,CAAC;QACH,CAAC,CAACV,KAAK,EACP;YACEW,IAAI;YACJC,KAAK;QACP,CAAC,CAACX,UAAU,EACZE;QAEFD,SAASA;sBAET,oBAACW;QAAKV,SAAS;qBACb,oBAACE;AAIT,EAAE"}