@vkontakte/vkui 5.0.0 → 5.0.1

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

@@ -1,158 +1,123 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HorizontalScroll = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-
+var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
 var _HorizontalScrollArrow = require("./HorizontalScrollArrow");
-
 var _fx = require("../../lib/fx");
-
 var _useEventListener = require("../../hooks/useEventListener");
-
 var _useExternRef = require("../../hooks/useExternRef");
-
 var _classNames = require("../../lib/classNames");
-
-var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "getRef"];
-
+var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "getRef", "className"];
 /**
  * timing method
  */
 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);
 };
+
 /**
  * Код анимации скрола, на основе полифила: 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;
-
+    getScrollPosition = _ref.getScrollPosition,
+    animationQueue = _ref.animationQueue,
+    onScrollToRightBorder = _ref.onScrollToRightBorder,
+    onScrollEnd = _ref.onScrollEnd,
+    onScrollStart = _ref.onScrollStart,
+    initialScrollWidth = _ref.initialScrollWidth,
+    _ref$scrollAnimationD = _ref.scrollAnimationDuration,
+    scrollAnimationDuration = _ref$scrollAnimationD === void 0 ? SCROLL_ONE_FRAME_TIME : _ref$scrollAnimationD;
   if (!scrollElement || !getScrollPosition) {
     return;
   }
+
   /**
    * максимальное значение сдвига влево
    */
-
-
   var maxLeft = initialScrollWidth - scrollElement.offsetWidth;
   var startLeft = roundUpElementScrollLeft(scrollElement);
   var endLeft = getScrollPosition(startLeft);
   onScrollStart();
-
   if (endLeft >= maxLeft) {
     onScrollToRightBorder();
     endLeft = maxLeft;
   }
-
   var startTime = now();
-
   (function scroll() {
     if (!scrollElement) {
       onScrollEnd();
       return;
     }
-
     var time = now();
     var elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
     var value = (0, _fx.easeInOutSine)(elapsed);
     var currentLeft = startLeft + (endLeft - startLeft) * value;
     scrollElement.scrollLeft = Math.ceil(currentLeft);
-
     if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
       requestAnimationFrame(scroll);
       return;
     }
-
     onScrollEnd();
     animationQueue.shift();
-
     if (animationQueue.length > 0) {
       animationQueue[0]();
     }
   })();
 }
+
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-
-
 var HorizontalScroll = function HorizontalScroll(_ref2) {
   var children = _ref2.children,
-      getScrollToLeft = _ref2.getScrollToLeft,
-      getScrollToRight = _ref2.getScrollToRight,
-      _ref2$showArrows = _ref2.showArrows,
-      showArrows = _ref2$showArrows === void 0 ? true : _ref2$showArrows,
-      _ref2$arrowSize = _ref2.arrowSize,
-      arrowSize = _ref2$arrowSize === void 0 ? "l" : _ref2$arrowSize,
-      _ref2$scrollAnimation = _ref2.scrollAnimationDuration,
-      scrollAnimationDuration = _ref2$scrollAnimation === void 0 ? SCROLL_ONE_FRAME_TIME : _ref2$scrollAnimation,
-      getRef = _ref2.getRef,
-      restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-
+    getScrollToLeft = _ref2.getScrollToLeft,
+    getScrollToRight = _ref2.getScrollToRight,
+    _ref2$showArrows = _ref2.showArrows,
+    showArrows = _ref2$showArrows === void 0 ? true : _ref2$showArrows,
+    _ref2$arrowSize = _ref2.arrowSize,
+    arrowSize = _ref2$arrowSize === void 0 ? "l" : _ref2$arrowSize,
+    _ref2$scrollAnimation = _ref2.scrollAnimationDuration,
+    scrollAnimationDuration = _ref2$scrollAnimation === void 0 ? SCROLL_ONE_FRAME_TIME : _ref2$scrollAnimation,
+    getRef = _ref2.getRef,
+    className = _ref2.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      canScrollLeft = _React$useState2[0],
-      setCanScrollLeft = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    canScrollLeft = _React$useState2[0],
+    setCanScrollLeft = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      canScrollRight = _React$useState4[0],
-      setCanScrollRight = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    canScrollRight = _React$useState4[0],
+    setCanScrollRight = _React$useState4[1];
   var isCustomScrollingRef = React.useRef(false);
   var scrollerRef = (0, _useExternRef.useExternRef)(getRef);
   var animationQueue = React.useRef([]);
-
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      hasMouse = _useAdaptivity.hasMouse;
-
+  var hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
   var scrollTo = React.useCallback(function (getScrollPosition) {
     var scrollElement = scrollerRef.current;
     animationQueue.current.push(function () {
       var _scrollElement$firstE;
-
       return doScroll({
         scrollElement: scrollElement,
         getScrollPosition: getScrollPosition,
@@ -170,7 +135,6 @@ var HorizontalScroll = function HorizontalScroll(_ref2) {
         scrollAnimationDuration: scrollAnimationDuration
       });
     });
-
     if (animationQueue.current.length === 1) {
       animationQueue.current[0]();
     }
@@ -188,12 +152,12 @@ var HorizontalScroll = function HorizontalScroll(_ref2) {
     scrollTo(getScrollPosition);
   }, [getScrollToRight, scrollTo, scrollerRef]);
   var onscroll = React.useCallback(function () {
-    if (showArrows && hasMouse && scrollerRef.current && !isCustomScrollingRef.current) {
+    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
       var scrollElement = scrollerRef.current;
       setCanScrollLeft(scrollElement.scrollLeft > 0);
       setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
     }
-  }, [hasMouse, scrollerRef, showArrows]);
+  }, [hasPointer, scrollerRef, showArrows]);
   var scrollEvent = (0, _useEventListener.useEventListener)("scroll", onscroll);
   React.useEffect(function () {
     if (scrollerRef.current) {
@@ -201,25 +165,24 @@ var HorizontalScroll = function HorizontalScroll(_ref2) {
     }
   }, [scrollEvent, scrollerRef]);
   React.useEffect(onscroll, [scrollerRef, children, onscroll]);
-  return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)("HorizontalScroll", showArrows === "always" && "HorizontalScroll--withConstArrows")
-  }), showArrows && (hasMouse || hasMouse === undefined) && canScrollLeft && (0, _jsxRuntime.createScopedElement)(_HorizontalScrollArrow.HorizontalScrollArrow, {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
+    className: (0, _classNames.classNamesString)("vkuiHorizontalScroll", showArrows === "always" && "vkuiHorizontalScroll--withConstArrows", className)
+  }), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/React.createElement(_HorizontalScrollArrow.HorizontalScrollArrow, {
     size: arrowSize,
     direction: "left",
-    vkuiClass: "HorizontalScroll__arrowLeft",
+    className: "vkuiHorizontalScroll__arrowLeft",
     onClick: scrollToLeft
-  }), showArrows && (hasMouse || hasMouse === undefined) && canScrollRight && (0, _jsxRuntime.createScopedElement)(_HorizontalScrollArrow.HorizontalScrollArrow, {
+  }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/React.createElement(_HorizontalScrollArrow.HorizontalScrollArrow, {
     size: arrowSize,
     direction: "right",
-    vkuiClass: "HorizontalScroll__arrowRight",
+    className: "vkuiHorizontalScroll__arrowRight",
     onClick: scrollToRight
-  }), (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "HorizontalScroll__in",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiHorizontalScroll__in",
     ref: scrollerRef
-  }, (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "HorizontalScroll__in-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiHorizontalScroll__in-wrapper"
   }, children)));
 };
-
 exports.HorizontalScroll = HorizontalScroll;
 //# sourceMappingURL=HorizontalScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["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","easeInOutSine","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","useExternRef","useAdaptivity","hasMouse","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEventListener","useEffect","add","classNames","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./HorizontalScroll.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 (\n      roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n      elapsed !== 1\n    ) {\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  ...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 { hasMouse } = useAdaptivity();\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:\n            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 (\n      showArrows &&\n      hasMouse &&\n      scrollerRef.current &&\n      !isCustomScrollingRef.current\n    ) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth\n      );\n    }\n  }, [hasMouse, 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      vkuiClass={classNames(\n        \"HorizontalScroll\",\n        showArrows === \"always\" && \"HorizontalScroll--withConstArrows\"\n      )}\n    >\n      {showArrows && (hasMouse || hasMouse === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          vkuiClass=\"HorizontalScroll__arrowLeft\"\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasMouse || hasMouse === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          vkuiClass=\"HorizontalScroll__arrowRight\"\n          onClick={scrollToRight}\n        />\n      )}\n      <div vkuiClass=\"HorizontalScroll__in\" ref={scrollerRef}>\n        <div vkuiClass=\"HorizontalScroll__in-wrapper\">{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalScroll.js","names":["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","easeInOutSine","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEventListener","useEffect","add","classNamesString","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\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 (\n      roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n      elapsed !== 1\n    ) {\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:\n            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 (\n      showArrows &&\n      hasPointer &&\n      scrollerRef.current &&\n      !isCustomScrollingRef.current\n    ) {\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={classNamesString(\n        styles[\"HorizontalScroll\"],\n        showArrows === \"always\" && styles[\"HorizontalScroll--withConstArrows\"],\n        className\n      )}\n    >\n      {showArrows &&\n        (hasPointer || hasPointer === undefined) &&\n        canScrollLeft && (\n          <HorizontalScrollArrow\n            size={arrowSize}\n            direction=\"left\"\n            className={styles[\"HorizontalScroll__arrowLeft\"]}\n            onClick={scrollToLeft}\n          />\n        )}\n      {showArrows &&\n        (hasPointer || hasPointer === undefined) &&\n        canScrollRight && (\n          <HorizontalScrollArrow\n            size={arrowSize}\n            direction=\"right\"\n            className={styles[\"HorizontalScroll__arrowRight\"]}\n            onClick={scrollToRight}\n          />\n        )}\n      <div className={styles[\"HorizontalScroll__in\"]} ref={scrollerRef}>\n        <div className={styles[\"HorizontalScroll__in-wrapper\"]}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface HorizontalScrollArrowProps {
+    direction: "left" | "right";
+    size?: "m" | "l";
+    onClick(event: React.MouseEvent): void;
+    className?: string;
+}
+export declare const HorizontalScrollArrow: ({ size, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;

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

@@ -1,55 +1,46 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HorizontalScrollArrow = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
+var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
-
 var _classNames = require("../../lib/classNames");
-
-var _usePlatform = require("../../hooks/usePlatform");
-
-var _platform = require("../../lib/platform");
-
 var _Tappable = require("../Tappable/Tappable");
-
-var _excluded = ["size", "direction", "onClick"];
-
+var _excluded = ["size", "direction", "onClick", "className"];
 var HorizontalScrollArrow = function HorizontalScrollArrow(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "l" : _ref$size,
-      direction = _ref.direction,
-      onClick = _ref.onClick,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
+    size = _ref$size === void 0 ? "l" : _ref$size,
+    direction = _ref.direction,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var ArrowIcon;
-
   if (size === "m") {
     ArrowIcon = direction === "left" ? _icons.Icon16ChevronLeft : _icons.Icon16Chevron;
   } else {
     ArrowIcon = direction === "left" ? _icons.Icon24ChevronCompactLeft : _icons.Icon24Chevron;
   }
-
-  return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
+  return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
     Component: "button",
     hasHover: false,
     hasActive: false,
-    vkuiClass: (0, _classNames.classNames)("HorizontalScrollArrow", "HorizontalScrollArrow--size-".concat(size), "HorizontalScrollArrow--direction-".concat(direction), platform === _platform.Platform.IOS && "HorizontalScrollArrow--ios"),
+    className: (0, _classNames.classNamesString)("vkuiHorizontalScrollArrow", styles["HorizontalScrollArrow--size-".concat(size)], styles["HorizontalScrollArrow--direction-".concat(direction)], className),
     onClick: onClick
-  }), (0, _jsxRuntime.createScopedElement)("span", {
-    vkuiClass: "HorizontalScrollArrow__icon"
-  }, (0, _jsxRuntime.createScopedElement)(ArrowIcon, null)));
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "vkuiHorizontalScrollArrow__icon"
+  }, /*#__PURE__*/React.createElement(ArrowIcon, null)));
 };
-
 exports.HorizontalScrollArrow = HorizontalScrollArrow;
+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"
+};
 //# sourceMappingURL=HorizontalScrollArrow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollArrow.js","names":["HorizontalScrollArrow","size","direction","onClick","restProps","platform","usePlatform","ArrowIcon","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","classNames","Platform","IOS"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n  Icon16Chevron,\n  Icon16ChevronLeft,\n} from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport \"./HorizontalScrollArrow.css\";\n\nexport interface HorizontalScrollArrowProps {\n  direction: \"left\" | \"right\";\n  size?: \"m\" | \"l\";\n  onClick(): void;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = \"l\",\n  direction,\n  onClick,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  const platform = usePlatform();\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      vkuiClass={classNames(\n        \"HorizontalScrollArrow\",\n        `HorizontalScrollArrow--size-${size}`,\n        `HorizontalScrollArrow--direction-${direction}`,\n        platform === Platform.IOS && \"HorizontalScrollArrow--ios\"\n      )}\n      onClick={onClick}\n    >\n      <span vkuiClass=\"HorizontalScrollArrow__icon\">\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;AASO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,OAKH;EAAA,qBAJhCC,IAIgC;EAAA,IAJhCA,IAIgC,0BAJzB,GAIyB;EAAA,IAHhCC,SAGgC,QAHhCA,SAGgC;EAAA,IAFhCC,OAEgC,QAFhCA,OAEgC;EAAA,IAD7BC,SAC6B;EAChC,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;EACA,IAAIC,SAAJ;;EAEA,IAAIN,IAAI,KAAK,GAAb,EAAkB;IAChBM,SAAS,GAAGL,SAAS,KAAK,MAAd,GAAuBM,wBAAvB,GAA2CC,oBAAvD;EACD,CAFD,MAEO;IACLF,SAAS,GAAGL,SAAS,KAAK,MAAd,GAAuBQ,+BAAvB,GAAkDC,oBAA9D;EACD;;EAED,OACE,qCAAC,kBAAD,6BACMP,SADN;IAEE,SAAS,EAAC,QAFZ;IAGE,QAAQ,EAAE,KAHZ;IAIE,SAAS,EAAE,KAJb;IAKE,SAAS,EAAE,IAAAQ,sBAAA,EACT,uBADS,wCAEsBX,IAFtB,8CAG2BC,SAH3B,GAITG,QAAQ,KAAKQ,kBAAA,CAASC,GAAtB,IAA6B,4BAJpB,CALb;IAWE,OAAO,EAAEX;EAXX,IAaE;IAAM,SAAS,EAAC;EAAhB,GACE,qCAAC,SAAD,OADF,CAbF,CADF;AAmBD,CAlCM"}
+{"version":3,"file":"HorizontalScrollArrow.js","names":["HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","classNamesString","styles"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n  Icon16Chevron,\n  Icon16ChevronLeft,\n} from \"@vkontakte/icons\";\nimport { classNamesString } from \"../../lib/classNames\";\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={classNamesString(\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;AACA;AAMA;AACA;AAAgD;AAUzC,IAAMA,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,GAAGK,wBAAiB,GAAGC,oBAAa;EACtE,CAAC,MAAM;IACLF,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGO,+BAAwB,GAAGC,oBAAa;EAC7E;EAEA,oBACE,oBAAC,kBAAQ,6BACHL,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAE,IAAAM,4BAAgB,+BAEzBC,MAAM,uCAAgCX,IAAI,EAAG,EAC7CW,MAAM,4CAAqCV,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/HoverPopper/HoverPopper.js

@@ -1,85 +1,61 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HoverPopper = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _Popper = require("../Popper/Popper");
-
 var _useEventListener = require("../../hooks/useEventListener");
-
 var _useTimeout = require("../../hooks/useTimeout");
-
 var _usePatchChildrenRef3 = require("../../hooks/usePatchChildrenRef");
-
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-
 var _excluded = ["getRef", "content", "children", "onShownChange", "shown", "showDelay", "hideDelay"];
-
 var HoverPopper = function HoverPopper(_ref) {
   var getRef = _ref.getRef,
-      content = _ref.content,
-      children = _ref.children,
-      onShownChange = _ref.onShownChange,
-      _shown = _ref.shown,
-      _ref$showDelay = _ref.showDelay,
-      showDelay = _ref$showDelay === void 0 ? 150 : _ref$showDelay,
-      _ref$hideDelay = _ref.hideDelay,
-      hideDelay = _ref$hideDelay === void 0 ? 150 : _ref$hideDelay,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    content = _ref.content,
+    children = _ref.children,
+    onShownChange = _ref.onShownChange,
+    _shown = _ref.shown,
+    _ref$showDelay = _ref.showDelay,
+    showDelay = _ref$showDelay === void 0 ? 150 : _ref$showDelay,
+    _ref$hideDelay = _ref.hideDelay,
+    hideDelay = _ref$hideDelay === void 0 ? 150 : _ref$hideDelay,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState(_shown || false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      computedShown = _React$useState2[0],
-      setComputedShown = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    computedShown = _React$useState2[0],
+    setComputedShown = _React$useState2[1];
   var shown = typeof _shown === "boolean" ? _shown : computedShown;
-
   var setShown = function setShown(value) {
     if (typeof _shown !== "boolean") {
       setComputedShown(value);
     }
-
     typeof onShownChange === "function" && onShownChange(value);
   };
-
   var showTimeout = (0, _useTimeout.useTimeout)(function () {
     setShown(true);
   }, showDelay);
   var hideTimeout = (0, _useTimeout.useTimeout)(function () {
     setShown(false);
   }, hideDelay);
-
   var _usePatchChildrenRef = (0, _usePatchChildrenRef3.usePatchChildrenRef)(children),
-      _usePatchChildrenRef2 = (0, _slicedToArray2.default)(_usePatchChildrenRef, 2),
-      childRef = _usePatchChildrenRef2[0],
-      child = _usePatchChildrenRef2[1];
-
+    _usePatchChildrenRef2 = (0, _slicedToArray2.default)(_usePatchChildrenRef, 2),
+    childRef = _usePatchChildrenRef2[0],
+    child = _usePatchChildrenRef2[1];
   var onTargetEnter = function onTargetEnter() {
     hideTimeout.clear();
     showTimeout.set();
   };
-
   var onTargetLeave = function onTargetLeave() {
     showTimeout.clear();
     hideTimeout.set();
   };
-
   var targetEnterListener = (0, _useEventListener.useEventListener)("pointerenter", onTargetEnter);
   var targetLeaveListener = (0, _useEventListener.useEventListener)("pointerleave", onTargetLeave);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
@@ -88,13 +64,12 @@ var HoverPopper = function HoverPopper(_ref) {
       targetLeaveListener.add(childRef.current);
     }
   }, []);
-  return (0, _jsxRuntime.createScopedElement)(React.Fragment, null, child, shown && (0, _jsxRuntime.createScopedElement)(_Popper.Popper, (0, _extends2.default)({}, restProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, child, shown && /*#__PURE__*/React.createElement(_Popper.Popper, (0, _extends2.default)({}, restProps, {
     onMouseOver: hideTimeout.clear,
     onMouseOut: onTargetLeave,
     getRef: getRef,
     targetRef: childRef
   }), content));
 };
-
 exports.HoverPopper = HoverPopper;
 //# sourceMappingURL=HoverPopper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HoverPopper.js","names":["HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add"],"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Popper, PopperCommonProps } from \"../Popper/Popper\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === \"boolean\" ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== \"boolean\") {\n      setComputedShown(value);\n    }\n    typeof onShownChange === \"function\" && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener(\"pointerenter\", onTargetEnter);\n  const targetLeaveListener = useEventListener(\"pointerleave\", onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA6BO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OASH;EAAA,IARtBC,MAQsB,QARtBA,MAQsB;EAAA,IAPtBC,OAOsB,QAPtBA,OAOsB;EAAA,IANtBC,QAMsB,QANtBA,QAMsB;EAAA,IALtBC,aAKsB,QALtBA,aAKsB;EAAA,IAJfC,MAIe,QAJtBC,KAIsB;EAAA,0BAHtBC,SAGsB;EAAA,IAHtBA,SAGsB,+BAHV,GAGU;EAAA,0BAFtBC,SAEsB;EAAA,IAFtBA,SAEsB,+BAFV,GAEU;EAAA,IADnBC,SACmB;;EACtB,sBAA0CC,KAAK,CAACC,QAAN,CAAeN,MAAM,IAAI,KAAzB,CAA1C;EAAA;EAAA,IAAOO,aAAP;EAAA,IAAsBC,gBAAtB;;EAEA,IAAMP,KAAK,GAAG,OAAOD,MAAP,KAAkB,SAAlB,GAA8BA,MAA9B,GAAuCO,aAArD;;EAEA,IAAME,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAoB;IACnC,IAAI,OAAOV,MAAP,KAAkB,SAAtB,EAAiC;MAC/BQ,gBAAgB,CAACE,KAAD,CAAhB;IACD;;IACD,OAAOX,aAAP,KAAyB,UAAzB,IAAuCA,aAAa,CAACW,KAAD,CAApD;EACD,CALD;;EAOA,IAAMC,WAAW,GAAG,IAAAC,sBAAA,EAAW,YAAM;IACnCH,QAAQ,CAAC,IAAD,CAAR;EACD,CAFmB,EAEjBP,SAFiB,CAApB;EAIA,IAAMW,WAAW,GAAG,IAAAD,sBAAA,EAAW,YAAM;IACnCH,QAAQ,CAAC,KAAD,CAAR;EACD,CAFmB,EAEjBN,SAFiB,CAApB;;EAIA,2BAA0B,IAAAW,yCAAA,EAAoBhB,QAApB,CAA1B;EAAA;EAAA,IAAOiB,QAAP;EAAA,IAAiBC,KAAjB;;EAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;IAC1BJ,WAAW,CAACK,KAAZ;IACAP,WAAW,CAACQ,GAAZ;EACD,CAHD;;EAKA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;IAC1BT,WAAW,CAACO,KAAZ;IACAL,WAAW,CAACM,GAAZ;EACD,CAHD;;EAKA,IAAME,mBAAmB,GAAG,IAAAC,kCAAA,EAAiB,cAAjB,EAAiCL,aAAjC,CAA5B;EACA,IAAMM,mBAAmB,GAAG,IAAAD,kCAAA,EAAiB,cAAjB,EAAiCF,aAAjC,CAA5B;EAEA,IAAAI,oDAAA,EAA0B,YAAM;IAC9B,IAAIT,QAAQ,CAACU,OAAb,EAAsB;MACpBJ,mBAAmB,CAACK,GAApB,CAAwBX,QAAQ,CAACU,OAAjC;MACAF,mBAAmB,CAACG,GAApB,CAAwBX,QAAQ,CAACU,OAAjC;IACD;EACF,CALD,EAKG,EALH;EAOA,OACE,qCAAC,KAAD,CAAO,QAAP,QACGT,KADH,EAEGf,KAAK,IACJ,qCAAC,cAAD,6BACMG,SADN;IAEE,WAAW,EAAES,WAAW,CAACK,KAF3B;IAGE,UAAU,EAAEE,aAHd;IAIE,MAAM,EAAExB,MAJV;IAKE,SAAS,EAAEmB;EALb,IAOGlB,OAPH,CAHJ,CADF;AAgBD,CAnEM"}
+{"version":3,"file":"HoverPopper.js","names":["HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add"],"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Popper, PopperCommonProps } from \"../Popper/Popper\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === \"boolean\" ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== \"boolean\") {\n      setComputedShown(value);\n    }\n    typeof onShownChange === \"function\" && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener(\"pointerenter\", onTargetEnter);\n  const targetLeaveListener = useEventListener(\"pointerleave\", onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAgF;AA6BzE,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACNC,MAAM,QAAbC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACZC,SAAS;EAEZ,sBAA0CC,KAAK,CAACC,QAAQ,CAACN,MAAM,IAAI,KAAK,CAAC;IAAA;IAAlEO,aAAa;IAAEC,gBAAgB;EAEtC,IAAMP,KAAK,GAAG,OAAOD,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGO,aAAa;EAElE,IAAME,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAOV,MAAM,KAAK,SAAS,EAAE;MAC/BQ,gBAAgB,CAACE,KAAK,CAAC;IACzB;IACA,OAAOX,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACW,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAG,IAAAC,sBAAU,EAAC,YAAM;IACnCH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAEP,SAAS,CAAC;EAEb,IAAMW,WAAW,GAAG,IAAAD,sBAAU,EAAC,YAAM;IACnCH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAEN,SAAS,CAAC;EAEb,2BAA0B,IAAAW,yCAAmB,EAAChB,QAAQ,CAAC;IAAA;IAAhDiB,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BJ,WAAW,CAACK,KAAK,EAAE;IACnBP,WAAW,CAACQ,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BT,WAAW,CAACO,KAAK,EAAE;IACnBL,WAAW,CAACM,GAAG,EAAE;EACnB,CAAC;EAED,IAAME,mBAAmB,GAAG,IAAAC,kCAAgB,EAAC,cAAc,EAAEL,aAAa,CAAC;EAC3E,IAAMM,mBAAmB,GAAG,IAAAD,kCAAgB,EAAC,cAAc,EAAEF,aAAa,CAAC;EAE3E,IAAAI,oDAAyB,EAAC,YAAM;IAC9B,IAAIT,QAAQ,CAACU,OAAO,EAAE;MACpBJ,mBAAmB,CAACK,GAAG,CAACX,QAAQ,CAACU,OAAO,CAAC;MACzCF,mBAAmB,CAACG,GAAG,CAACX,QAAQ,CAACU,OAAO,CAAC;IAC3C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZT,KAAK,EACLf,KAAK,iBACJ,oBAAC,cAAM,6BACDG,SAAS;IACb,WAAW,EAAES,WAAW,CAACK,KAAM;IAC/B,UAAU,EAAEE,aAAc;IAC1B,MAAM,EAAExB,MAAO;IACf,SAAS,EAAEmB;EAAS,IAEnBlB,OAAO,CAEX,CACc;AAErB,CAAC;AAAC"}

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { TappableProps } from "../Tappable/Tappable";
+export interface IconButtonProps extends TappableProps {
+    children?: React.ReactNode;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/IconButton
+ */
+export declare const IconButton: ({ children, Component, className, ...restProps }: IconButtonProps) => JSX.Element;