@vkontakte/vkui 4.15.0 → 4.16.2

package/dist/cssm/components/Touch/Touch.js

@@ -1,318 +1,195 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["onStart", "onStartX", "onStartY", "onMove", "onMoveX", "onMoveY", "onLeave", "onEnter", "onEnd", "onEndX", "onEndY", "useCapture", "Component", "getRootRef", "noSlideClick", "window", "document"];
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onStart", "onStartX", "onStartY", "onMove", "onMoveX", "onMoveY", "onLeave", "onEnter", "onEnd", "onEndX", "onEndY", "onClickCapture", "useCapture", "Component", "getRootRef", "noSlideClick"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
 import { getSupportedEvents, coordX, coordY, touchEnabled } from "../../lib/touch";
-import { canUseDOM, withDOM } from "../../lib/dom";
-import { setRef, noop } from "../../lib/utils";
-var events = getSupportedEvents();
-
-var Touch = /*#__PURE__*/function (_React$Component) {
-  _inherits(Touch, _React$Component);
-
-  var _super = _createSuper(Touch);
-
-  function Touch() {
-    var _this;
-
-    _classCallCheck(this, Touch);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "didSlide", false);
-
-    _defineProperty(_assertThisInitialized(_this), "gesture", {});
-
-    _defineProperty(_assertThisInitialized(_this), "container", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "onEnter", function (e) {
-      if (_this.props.onEnter) {
-        _this.props.onEnter(e);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onLeave", function (e) {
-      if (_this.props.onLeave) {
-        _this.props.onLeave(e);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onStart", function (e) {
-      _this.gesture = {
-        startX: coordX(e),
-        startY: coordY(e),
-        startT: new Date(),
-        isPressed: true
-      }; // Вызываем нужные колбеки из props
-
-      var outputEvent = _objectSpread(_objectSpread({}, _this.gesture), {}, {
+import { useDOM } from "../../lib/dom";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useEventListener } from "../../hooks/useEventListener";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+export var Touch = function Touch(_ref) {
+  var onStart = _ref.onStart,
+      onStartX = _ref.onStartX,
+      onStartY = _ref.onStartY,
+      _onMove = _ref.onMove,
+      onMoveX = _ref.onMoveX,
+      onMoveY = _ref.onMoveY,
+      onLeave = _ref.onLeave,
+      onEnter = _ref.onEnter,
+      _onEnd = _ref.onEnd,
+      onEndX = _ref.onEndX,
+      onEndY = _ref.onEndY,
+      onClickCapture = _ref.onClickCapture,
+      _ref$useCapture = _ref.useCapture,
+      useCapture = _ref$useCapture === void 0 ? false : _ref$useCapture,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === void 0 ? 'div' : _ref$Component,
+      getRootRef = _ref.getRootRef,
+      _ref$noSlideClick = _ref.noSlideClick,
+      noSlideClick = _ref$noSlideClick === void 0 ? false : _ref$noSlideClick,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useDOM = useDOM(),
+      document = _useDOM.document;
+
+  var events = React.useMemo(getSupportedEvents, []);
+  var didSlide = React.useRef(false);
+  var gesture = React.useRef({});
+
+  var handle = function handle(e, handers) {
+    return handers.forEach(function (cb) {
+      cb && cb(_objectSpread(_objectSpread({}, gesture.current), {}, {
         originalEvent: e
-      });
-
-      if (_this.props.onStart) {
-        _this.props.onStart(outputEvent);
-      }
-
-      if (_this.props.onStartX) {
-        _this.props.onStartX(outputEvent);
-      }
-
-      if (_this.props.onStartY) {
-        _this.props.onStartY(outputEvent);
-      }
-
-      !touchEnabled && _this.subscribe(_this.document);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onMove", function (e) {
-      var _this$gesture = _this.gesture,
-          isPressed = _this$gesture.isPressed,
-          isX = _this$gesture.isX,
-          isY = _this$gesture.isY,
-          startX = _this$gesture.startX,
-          startY = _this$gesture.startY;
-
-      if (isPressed) {
-        // смещения
-        var shiftX = coordX(e) - startX;
-        var shiftY = coordY(e) - startY; // абсолютные значения смещений
-
-        var shiftXAbs = Math.abs(shiftX);
-        var shiftYAbs = Math.abs(shiftY); // Если определяем мультитач, то прерываем жест
-
-        if (!!e.touches && e.touches.length > 1) {
-          return _this.onEnd(e);
-        } // если мы ещё не определились
-
-
-        if (!isX && !isY) {
-          var willBeX = shiftXAbs >= 5 && shiftXAbs > shiftYAbs;
-          var willBeY = shiftYAbs >= 5 && shiftYAbs > shiftXAbs;
-          var willBeSlidedX = willBeX && !!_this.props.onMoveX || !!_this.props.onMove;
-          var willBeSlidedY = willBeY && !!_this.props.onMoveY || !!_this.props.onMove;
-          _this.gesture.isY = willBeY;
-          _this.gesture.isX = willBeX;
-          _this.gesture.isSlideX = willBeSlidedX;
-          _this.gesture.isSlideY = willBeSlidedY;
-          _this.gesture.isSlide = willBeSlidedX || willBeSlidedY;
-        }
-
-        if (_this.gesture.isSlide) {
-          _this.gesture.shiftX = shiftX;
-          _this.gesture.shiftY = shiftY;
-          _this.gesture.shiftXAbs = shiftXAbs;
-          _this.gesture.shiftYAbs = shiftYAbs; // Вызываем нужные колбеки из props
-
-          var _outputEvent = _objectSpread(_objectSpread({}, _this.gesture), {}, {
-            originalEvent: e
-          });
-
-          if (_this.props.onMove) {
-            _this.props.onMove(_outputEvent);
-          }
-
-          if (_this.gesture.isSlideX && _this.props.onMoveX) {
-            _this.props.onMoveX(_outputEvent);
-          }
-
-          if (_this.gesture.isSlideY && _this.props.onMoveY) {
-            _this.props.onMoveY(_outputEvent);
-          }
-        }
-      }
+      }));
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onEnd", function (e) {
-      var _this$gesture2 = _this.gesture,
-          isPressed = _this$gesture2.isPressed,
-          isSlide = _this$gesture2.isSlide,
-          isSlideX = _this$gesture2.isSlideX,
-          isSlideY = _this$gesture2.isSlideY;
-
-      if (isPressed) {
-        // Вызываем нужные колбеки из props
-        var _outputEvent2 = _objectSpread(_objectSpread({}, _this.gesture), {}, {
-          originalEvent: e
+  };
+
+  var mouseEnterHandler = useEventListener('mouseenter', onEnter);
+  var mouseLeaveHandler = useEventListener('mouseleave', onLeave);
+  var startHandler = useEventListener(events[0], function (e) {
+    gesture.current = {
+      startX: coordX(e),
+      startY: coordY(e),
+      startT: new Date(),
+      isPressed: true
+    };
+    handle(e, [onStart, onStartX, onStartY]);
+    !touchEnabled() && subscribe(document);
+  }, {
+    capture: useCapture,
+    passive: false
+  });
+  var containerRef = useExternRef(getRootRef);
+  useIsomorphicLayoutEffect(function () {
+    var el = containerRef.current;
+    mouseEnterHandler.add(el);
+    mouseLeaveHandler.add(el);
+    startHandler.add(el);
+    touchEnabled() && subscribe(el);
+  }, [Component]);
+
+  function onMove(e) {
+    var _gesture$current = gesture.current,
+        isPressed = _gesture$current.isPressed,
+        isX = _gesture$current.isX,
+        isY = _gesture$current.isY,
+        startX = _gesture$current.startX,
+        startY = _gesture$current.startY;
+
+    if (isPressed) {
+      // смещения
+      var shiftX = coordX(e) - startX;
+      var shiftY = coordY(e) - startY; // абсолютные значения смещений
+
+      var shiftXAbs = Math.abs(shiftX);
+      var shiftYAbs = Math.abs(shiftY); // Если определяем мультитач, то прерываем жест
+
+      if (!!e.touches && e.touches.length > 1) {
+        return onEnd(e);
+      } // если мы ещё не определились
+
+
+      if (!isX && !isY) {
+        var willBeX = shiftXAbs >= 5 && shiftXAbs > shiftYAbs;
+        var willBeY = shiftYAbs >= 5 && shiftYAbs > shiftXAbs;
+        var willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);
+        var willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);
+        Object.assign(gesture.current, {
+          isY: willBeY,
+          isX: willBeX,
+          isSlideX: willBeSlidedX,
+          isSlideY: willBeSlidedY,
+          isSlide: willBeSlidedX || willBeSlidedY
         });
-
-        if (_this.props.onEnd) {
-          _this.props.onEnd(_outputEvent2);
-        }
-
-        if (isSlideY && _this.props.onEndY) {
-          _this.props.onEndY(_outputEvent2);
-        }
-
-        if (isSlideX && _this.props.onEndX) {
-          _this.props.onEndX(_outputEvent2);
-        }
       }
 
-      _this.didSlide = isSlide;
-      _this.gesture = {}; // Если это был тач-евент, симулируем отмену hover
-
-      if (e.type === 'touchend' || e.type === 'touchcancel') {
-        _this.onLeave(e);
+      if (gesture.current.isSlide) {
+        Object.assign(gesture.current, {
+          shiftX: shiftX,
+          shiftY: shiftY,
+          shiftXAbs: shiftXAbs,
+          shiftYAbs: shiftYAbs
+        });
+        handle(e, [_onMove, gesture.current.isSlideX && onMoveX, gesture.current.isSlideY && onMoveY]);
       }
+    }
+  }
 
-      !touchEnabled && _this.unsubscribe();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "unsubscribe", noop);
-
-    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e) {
-      var target = e.target;
+  function onEnd(e) {
+    var _gesture$current2 = gesture.current,
+        isPressed = _gesture$current2.isPressed,
+        isSlide = _gesture$current2.isSlide,
+        isSlideX = _gesture$current2.isSlideX,
+        isSlideY = _gesture$current2.isSlideY;
 
-      if (target.tagName === 'A' || target.tagName === 'IMG') {
-        e.preventDefault();
-      }
-    });
+    if (isPressed) {
+      handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "postGestureClick", function (e) {
-      var _this$props = _this.props,
-          onClickCapture = _this$props.onClickCapture,
-          noSlideClick = _this$props.noSlideClick;
+    didSlide.current = isSlide;
+    gesture.current = {}; // Если это был тач-евент, симулируем отмену hover
 
-      if (!_this.didSlide) {
-        return onClickCapture && onClickCapture(e);
-      }
+    if (e.type === 'touchend' || e.type === 'touchcancel') {
+      onLeave && onLeave(e);
+    }
 
-      if (e.target.tagName === 'A') {
-        e.preventDefault();
-      }
+    !touchEnabled() && subscribe(null);
+  }
 
-      if (noSlideClick) {
-        e.stopPropagation();
-      } else {
-        onClickCapture && onClickCapture(e);
-      }
+  var listenerParams = {
+    capture: useCapture,
+    passive: false
+  };
+  var listeners = [useEventListener(events[1], onMove, listenerParams), useEventListener(events[2], onEnd, listenerParams), useEventListener(events[3], onEnd, listenerParams)];
 
-      _this.didSlide = false;
+  function subscribe(el) {
+    listeners.forEach(function (l) {
+      return l.add(el);
     });
+  }
+  /**
+   * Обработчик событий dragstart
+   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "getRef", function (container) {
-      _this.container = container;
-      setRef(container, _this.props.getRootRef);
-    });
 
-    return _this;
-  }
+  var onDragStart = function onDragStart(e) {
+    var target = e.target;
 
-  _createClass(Touch, [{
-    key: "document",
-    get: function get() {
-      return this.props.document;
+    if (target.tagName === 'A' || target.tagName === 'IMG') {
+      e.preventDefault();
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (canUseDOM) {
-        this.container.addEventListener(events[0], this.onStart, {
-          capture: this.props.useCapture,
-          passive: false
-        });
-        touchEnabled && this.subscribe(this.container);
-        this.container.addEventListener('mouseenter', this.onEnter, {
-          capture: this.props.useCapture,
-          passive: true
-        });
-        this.container.addEventListener('mouseleave', this.onLeave, {
-          capture: this.props.useCapture,
-          passive: true
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container.removeEventListener(events[0], this.onStart);
-      this.unsubscribe();
-      this.container.removeEventListener('mouseenter', this.onEnter);
-      this.container.removeEventListener('mouseleave', this.onLeave);
-    }
-    /**
-     * Обработчик событий mouseenter
-     *
-     * @param {Object} e Браузерное событие
-     * @return {void}
-     */
+  };
+  /**
+   * Обработчик клика по компоненту
+   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп
+   */
 
-  }, {
-    key: "subscribe",
-    value: function subscribe(element) {
-      var _this2 = this;
-
-      this.unsubscribe();
-      var listenerParams = {
-        capture: this.props.useCapture,
-        passive: false
-      };
-      element.addEventListener(events[1], this.onMove, listenerParams);
-      element.addEventListener(events[2], this.onEnd, listenerParams);
-      element.addEventListener(events[3], this.onEnd, listenerParams);
 
-      this.unsubscribe = function () {
-        // Здесь нужен последний аргумент с такими же параметрами, потому что
-        // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
-        // https://github.com/VKCOM/VKUI/issues/444
-        element.removeEventListener(events[1], _this2.onMove, listenerParams);
-        element.removeEventListener(events[2], _this2.onEnd, listenerParams);
-        element.removeEventListener(events[3], _this2.onEnd, listenerParams);
-        _this2.unsubscribe = noop;
-      };
+  var postGestureClick = function postGestureClick(e) {
+    if (!didSlide.current) {
+      return onClickCapture && onClickCapture(e);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          onStart = _this$props2.onStart,
-          onStartX = _this$props2.onStartX,
-          onStartY = _this$props2.onStartY,
-          onMove = _this$props2.onMove,
-          onMoveX = _this$props2.onMoveX,
-          onMoveY = _this$props2.onMoveY,
-          onLeave = _this$props2.onLeave,
-          onEnter = _this$props2.onEnter,
-          onEnd = _this$props2.onEnd,
-          onEndX = _this$props2.onEndX,
-          onEndY = _this$props2.onEndY,
-          useCapture = _this$props2.useCapture,
-          Component = _this$props2.Component,
-          getRootRef = _this$props2.getRootRef,
-          noSlideClick = _this$props2.noSlideClick,
-          window = _this$props2.window,
-          document = _this$props2.document,
-          restProps = _objectWithoutProperties(_this$props2, _excluded);
 
-      return createScopedElement(Component, _extends({}, restProps, {
-        onDragStart: this.onDragStart,
-        onClickCapture: this.postGestureClick,
-        ref: this.getRef
-      }), this.props.children);
+    if (e.target.tagName === 'A') {
+      e.preventDefault();
     }
-  }]);
 
-  return Touch;
-}(React.Component);
+    if (noSlideClick) {
+      e.stopPropagation();
+    } else {
+      onClickCapture && onClickCapture(e);
+    }
 
-_defineProperty(Touch, "defaultProps", {
-  Component: 'div',
-  children: '',
-  useCapture: false,
-  noSlideClick: false
-});
+    didSlide.current = false;
+  };
 
-export default withDOM(Touch);
+  return createScopedElement(Component, _extends({}, restProps, {
+    onDragStart: onDragStart,
+    onClickCapture: postGestureClick,
+    ref: containerRef
+  }));
+};
 //# sourceMappingURL=Touch.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Touch/Touch.tsx"],"names":["React","getSupportedEvents","coordX","coordY","touchEnabled","canUseDOM","withDOM","setRef","noop","events","Touch","e","props","onEnter","onLeave","gesture","startX","startY","startT","Date","isPressed","outputEvent","originalEvent","onStart","onStartX","onStartY","subscribe","document","isX","isY","shiftX","shiftY","shiftXAbs","Math","abs","shiftYAbs","touches","length","onEnd","willBeX","willBeY","willBeSlidedX","onMoveX","onMove","willBeSlidedY","onMoveY","isSlideX","isSlideY","isSlide","onEndY","onEndX","didSlide","type","unsubscribe","target","tagName","preventDefault","onClickCapture","noSlideClick","stopPropagation","container","getRootRef","addEventListener","capture","useCapture","passive","removeEventListener","element","listenerParams","Component","window","restProps","onDragStart","postGestureClick","getRef","children"],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,kBADF,EAEEC,MAFF,EAGEC,MAHF,EAIEC,YAJF;AASA,SAASC,SAAT,EAA8BC,OAA9B;AACA,SAASC,MAAT,EAAiBC,IAAjB;AA2CA,IAAMC,MAAM,GAAGR,kBAAkB,EAAjC;;IAEMS,K;;;;;;;;;;;;;;;;+DACO,K;;8DACiB,E;;;;8DAsClB,UAACC,CAAD,EAAmB;AAC3B,UAAI,MAAKC,KAAL,CAAWC,OAAf,EAAwB;AACtB,cAAKD,KAAL,CAAWC,OAAX,CAAmBF,CAAnB;AACD;AACF,K;;8DASS,UAACA,CAAD,EAAmB;AAC3B,UAAI,MAAKC,KAAL,CAAWE,OAAf,EAAwB;AACtB,cAAKF,KAAL,CAAWE,OAAX,CAAmBH,CAAnB;AACD;AACF,K;;8DAQ+B,UAACA,CAAD,EAAuB;AACrD,YAAKI,OAAL,GAAe;AACbC,QAAAA,MAAM,EAAEd,MAAM,CAACS,CAAD,CADD;AAEbM,QAAAA,MAAM,EAAEd,MAAM,CAACQ,CAAD,CAFD;AAGbO,QAAAA,MAAM,EAAE,IAAIC,IAAJ,EAHK;AAIbC,QAAAA,SAAS,EAAE;AAJE,OAAf,CADqD,CAQrD;;AACA,UAAMC,WAAW,mCACZ,MAAKN,OADO;AAEfO,QAAAA,aAAa,EAAEX;AAFA,QAAjB;;AAKA,UAAI,MAAKC,KAAL,CAAWW,OAAf,EAAwB;AACtB,cAAKX,KAAL,CAAWW,OAAX,CAAmBF,WAAnB;AACD;;AAED,UAAI,MAAKT,KAAL,CAAWY,QAAf,EAAyB;AACvB,cAAKZ,KAAL,CAAWY,QAAX,CAAoBH,WAApB;AACD;;AAED,UAAI,MAAKT,KAAL,CAAWa,QAAf,EAAyB;AACvB,cAAKb,KAAL,CAAWa,QAAX,CAAoBJ,WAApB;AACD;;AAED,OAACjB,YAAD,IAAiB,MAAKsB,SAAL,CAAe,MAAKC,QAApB,CAAjB;AACD,K;;6DAQ8B,UAAChB,CAAD,EAAuB;AACpD,0BAAgD,MAAKI,OAArD;AAAA,UAAQK,SAAR,iBAAQA,SAAR;AAAA,UAAmBQ,GAAnB,iBAAmBA,GAAnB;AAAA,UAAwBC,GAAxB,iBAAwBA,GAAxB;AAAA,UAA6Bb,MAA7B,iBAA6BA,MAA7B;AAAA,UAAqCC,MAArC,iBAAqCA,MAArC;;AAEA,UAAIG,SAAJ,EAAe;AACb;AACA,YAAMU,MAAM,GAAG5B,MAAM,CAACS,CAAD,CAAN,GAAYK,MAA3B;AACA,YAAMe,MAAM,GAAG5B,MAAM,CAACQ,CAAD,CAAN,GAAYM,MAA3B,CAHa,CAKb;;AACA,YAAMe,SAAS,GAAGC,IAAI,CAACC,GAAL,CAASJ,MAAT,CAAlB;AACA,YAAMK,SAAS,GAAGF,IAAI,CAACC,GAAL,CAASH,MAAT,CAAlB,CAPa,CASb;;AACA,YAAI,CAAC,CAACpB,CAAC,CAACyB,OAAJ,IAAezB,CAAC,CAACyB,OAAF,CAAUC,MAAV,GAAmB,CAAtC,EAAyC;AACvC,iBAAO,MAAKC,KAAL,CAAW3B,CAAX,CAAP;AACD,SAZY,CAcb;;;AACA,YAAI,CAACiB,GAAD,IAAQ,CAACC,GAAb,EAAkB;AAChB,cAAIU,OAAO,GAAGP,SAAS,IAAI,CAAb,IAAkBA,SAAS,GAAGG,SAA5C;AACA,cAAIK,OAAO,GAAGL,SAAS,IAAI,CAAb,IAAkBA,SAAS,GAAGH,SAA5C;AACA,cAAIS,aAAa,GAAGF,OAAO,IAAI,CAAC,CAAC,MAAK3B,KAAL,CAAW8B,OAAxB,IAAmC,CAAC,CAAC,MAAK9B,KAAL,CAAW+B,MAApE;AACA,cAAIC,aAAa,GAAGJ,OAAO,IAAI,CAAC,CAAC,MAAK5B,KAAL,CAAWiC,OAAxB,IAAmC,CAAC,CAAC,MAAKjC,KAAL,CAAW+B,MAApE;AAEA,gBAAK5B,OAAL,CAAac,GAAb,GAAmBW,OAAnB;AACA,gBAAKzB,OAAL,CAAaa,GAAb,GAAmBW,OAAnB;AACA,gBAAKxB,OAAL,CAAa+B,QAAb,GAAwBL,aAAxB;AACA,gBAAK1B,OAAL,CAAagC,QAAb,GAAwBH,aAAxB;AACA,gBAAK7B,OAAL,CAAaiC,OAAb,GAAuBP,aAAa,IAAIG,aAAxC;AACD;;AAED,YAAI,MAAK7B,OAAL,CAAaiC,OAAjB,EAA0B;AACxB,gBAAKjC,OAAL,CAAae,MAAb,GAAsBA,MAAtB;AACA,gBAAKf,OAAL,CAAagB,MAAb,GAAsBA,MAAtB;AACA,gBAAKhB,OAAL,CAAaiB,SAAb,GAAyBA,SAAzB;AACA,gBAAKjB,OAAL,CAAaoB,SAAb,GAAyBA,SAAzB,CAJwB,CAMxB;;AACA,cAAMd,YAAuB,mCACxB,MAAKN,OADmB;AAE3BO,YAAAA,aAAa,EAAEX;AAFY,YAA7B;;AAKA,cAAI,MAAKC,KAAL,CAAW+B,MAAf,EAAuB;AACrB,kBAAK/B,KAAL,CAAW+B,MAAX,CAAkBtB,YAAlB;AACD;;AAED,cAAI,MAAKN,OAAL,CAAa+B,QAAb,IAAyB,MAAKlC,KAAL,CAAW8B,OAAxC,EAAiD;AAC/C,kBAAK9B,KAAL,CAAW8B,OAAX,CAAmBrB,YAAnB;AACD;;AAED,cAAI,MAAKN,OAAL,CAAagC,QAAb,IAAyB,MAAKnC,KAAL,CAAWiC,OAAxC,EAAiD;AAC/C,kBAAKjC,KAAL,CAAWiC,OAAX,CAAmBxB,YAAnB;AACD;AACF;AACF;AACF,K;;4DAQ6B,UAACV,CAAD,EAAuB;AACnD,2BAAmD,MAAKI,OAAxD;AAAA,UAAQK,SAAR,kBAAQA,SAAR;AAAA,UAAmB4B,OAAnB,kBAAmBA,OAAnB;AAAA,UAA4BF,QAA5B,kBAA4BA,QAA5B;AAAA,UAAsCC,QAAtC,kBAAsCA,QAAtC;;AAEA,UAAI3B,SAAJ,EAAe;AACb;AACA,YAAMC,aAAuB,mCACxB,MAAKN,OADmB;AAE3BO,UAAAA,aAAa,EAAEX;AAFY,UAA7B;;AAKA,YAAI,MAAKC,KAAL,CAAW0B,KAAf,EAAsB;AACpB,gBAAK1B,KAAL,CAAW0B,KAAX,CAAiBjB,aAAjB;AACD;;AAED,YAAI0B,QAAQ,IAAI,MAAKnC,KAAL,CAAWqC,MAA3B,EAAmC;AACjC,gBAAKrC,KAAL,CAAWqC,MAAX,CAAkB5B,aAAlB;AACD;;AAED,YAAIyB,QAAQ,IAAI,MAAKlC,KAAL,CAAWsC,MAA3B,EAAmC;AACjC,gBAAKtC,KAAL,CAAWsC,MAAX,CAAkB7B,aAAlB;AACD;AACF;;AAED,YAAK8B,QAAL,GAAgBH,OAAhB;AACA,YAAKjC,OAAL,GAAe,EAAf,CAxBmD,CA0BnD;;AACA,UAAIJ,CAAC,CAACyC,IAAF,KAAW,UAAX,IAAyBzC,CAAC,CAACyC,IAAF,KAAW,aAAxC,EAAuD;AACrD,cAAKtC,OAAL,CAAaH,CAAb;AACD;;AAED,OAACP,YAAD,IAAiB,MAAKiD,WAAL,EAAjB;AACD,K;;kEAkBa7C,I;;kEASa,UAACG,CAAD,EAAqC;AAC9D,UAAM2C,MAAM,GAAG3C,CAAC,CAAC2C,MAAjB;;AACA,UAAIA,MAAM,CAACC,OAAP,KAAmB,GAAnB,IAA0BD,MAAM,CAACC,OAAP,KAAmB,KAAjD,EAAwD;AACtD5C,QAAAA,CAAC,CAAC6C,cAAF;AACD;AACF,K;;uEASgC,UAAC7C,CAAD,EAAO;AACtC,wBAAyC,MAAKC,KAA9C;AAAA,UAAQ6C,cAAR,eAAQA,cAAR;AAAA,UAAwBC,YAAxB,eAAwBA,YAAxB;;AACA,UAAI,CAAC,MAAKP,QAAV,EAAoB;AAClB,eAAOM,cAAc,IAAIA,cAAc,CAAC9C,CAAD,CAAvC;AACD;;AACD,UAAKA,CAAC,CAAC2C,MAAH,CAA0BC,OAA1B,KAAsC,GAA1C,EAA+C;AAC7C5C,QAAAA,CAAC,CAAC6C,cAAF;AACD;;AACD,UAAIE,YAAJ,EAAkB;AAChB/C,QAAAA,CAAC,CAACgD,eAAF;AACD,OAFD,MAEO;AACLF,QAAAA,cAAc,IAAIA,cAAc,CAAC9C,CAAD,CAAhC;AACD;;AACD,YAAKwC,QAAL,GAAgB,KAAhB;AACD,K;;6DAEwC,UAACS,SAAD,EAAe;AACtD,YAAKA,SAAL,GAAiBA,SAAjB;AACArD,MAAAA,MAAM,CAACqD,SAAD,EAAY,MAAKhD,KAAL,CAAWiD,UAAvB,CAAN;AACD,K;;;;;;;SApPD,eAAe;AACb,aAAO,KAAKjD,KAAL,CAAWe,QAAlB;AACD;;;WAED,6BAAoB;AAClB,UAAItB,SAAJ,EAAe;AACb,aAAKuD,SAAL,CAAeE,gBAAf,CAAgCrD,MAAM,CAAC,CAAD,CAAtC,EAA2C,KAAKc,OAAhD,EAAyD;AAAEwC,UAAAA,OAAO,EAAE,KAAKnD,KAAL,CAAWoD,UAAtB;AAAkCC,UAAAA,OAAO,EAAE;AAA3C,SAAzD;AACA7D,QAAAA,YAAY,IAAI,KAAKsB,SAAL,CAAe,KAAKkC,SAApB,CAAhB;AAEA,aAAKA,SAAL,CAAeE,gBAAf,CAAgC,YAAhC,EAA8C,KAAKjD,OAAnD,EAA4D;AAAEkD,UAAAA,OAAO,EAAE,KAAKnD,KAAL,CAAWoD,UAAtB;AAAkCC,UAAAA,OAAO,EAAE;AAA3C,SAA5D;AACA,aAAKL,SAAL,CAAeE,gBAAf,CAAgC,YAAhC,EAA8C,KAAKhD,OAAnD,EAA4D;AAAEiD,UAAAA,OAAO,EAAE,KAAKnD,KAAL,CAAWoD,UAAtB;AAAkCC,UAAAA,OAAO,EAAE;AAA3C,SAA5D;AACD;AACF;;;WAED,gCAAuB;AACrB,WAAKL,SAAL,CAAeM,mBAAf,CAAmCzD,MAAM,CAAC,CAAD,CAAzC,EAA8C,KAAKc,OAAnD;AACA,WAAK8B,WAAL;AAEA,WAAKO,SAAL,CAAeM,mBAAf,CAAmC,YAAnC,EAAiD,KAAKrD,OAAtD;AACA,WAAK+C,SAAL,CAAeM,mBAAf,CAAmC,YAAnC,EAAiD,KAAKpD,OAAtD;AACD;AAED;AACF;AACA;AACA;AACA;AACA;;;;WA+JE,mBAAUqD,OAAV,EAA2C;AAAA;;AACzC,WAAKd,WAAL;AACA,UAAMe,cAAc,GAAG;AAAEL,QAAAA,OAAO,EAAE,KAAKnD,KAAL,CAAWoD,UAAtB;AAAkCC,QAAAA,OAAO,EAAE;AAA3C,OAAvB;AACAE,MAAAA,OAAO,CAACL,gBAAR,CAAyBrD,MAAM,CAAC,CAAD,CAA/B,EAAoC,KAAKkC,MAAzC,EAAiDyB,cAAjD;AACAD,MAAAA,OAAO,CAACL,gBAAR,CAAyBrD,MAAM,CAAC,CAAD,CAA/B,EAAoC,KAAK6B,KAAzC,EAAgD8B,cAAhD;AACAD,MAAAA,OAAO,CAACL,gBAAR,CAAyBrD,MAAM,CAAC,CAAD,CAA/B,EAAoC,KAAK6B,KAAzC,EAAgD8B,cAAhD;;AACA,WAAKf,WAAL,GAAmB,YAAM;AACvB;AACA;AACA;AACAc,QAAAA,OAAO,CAACD,mBAAR,CAA4BzD,MAAM,CAAC,CAAD,CAAlC,EAAuC,MAAI,CAACkC,MAA5C,EAAoDyB,cAApD;AACAD,QAAAA,OAAO,CAACD,mBAAR,CAA4BzD,MAAM,CAAC,CAAD,CAAlC,EAAuC,MAAI,CAAC6B,KAA5C,EAAmD8B,cAAnD;AACAD,QAAAA,OAAO,CAACD,mBAAR,CAA4BzD,MAAM,CAAC,CAAD,CAAlC,EAAuC,MAAI,CAAC6B,KAA5C,EAAmD8B,cAAnD;AACA,QAAA,MAAI,CAACf,WAAL,GAAmB7C,IAAnB;AACD,OARD;AASD;;;WA6CD,kBAAS;AACP,yBAmBI,KAAKI,KAnBT;AAAA,UACEW,OADF,gBACEA,OADF;AAAA,UAEEC,QAFF,gBAEEA,QAFF;AAAA,UAGEC,QAHF,gBAGEA,QAHF;AAAA,UAIEkB,MAJF,gBAIEA,MAJF;AAAA,UAKED,OALF,gBAKEA,OALF;AAAA,UAMEG,OANF,gBAMEA,OANF;AAAA,UAOE/B,OAPF,gBAOEA,OAPF;AAAA,UAQED,OARF,gBAQEA,OARF;AAAA,UASEyB,KATF,gBASEA,KATF;AAAA,UAUEY,MAVF,gBAUEA,MAVF;AAAA,UAWED,MAXF,gBAWEA,MAXF;AAAA,UAYEe,UAZF,gBAYEA,UAZF;AAAA,UAaEK,SAbF,gBAaEA,SAbF;AAAA,UAcER,UAdF,gBAcEA,UAdF;AAAA,UAeEH,YAfF,gBAeEA,YAfF;AAAA,UAgBEY,MAhBF,gBAgBEA,MAhBF;AAAA,UAiBE3C,QAjBF,gBAiBEA,QAjBF;AAAA,UAkBK4C,SAlBL;;AAqBA,aACE,oBAAC,SAAD,eACMA,SADN;AAEE,QAAA,WAAW,EAAE,KAAKC,WAFpB;AAGE,QAAA,cAAc,EAAE,KAAKC,gBAHvB;AAIE,QAAA,GAAG,EAAE,KAAKC;AAJZ,UAMG,KAAK9D,KAAL,CAAW+D,QANd,CADF;AAUD;;;;EAlSiB3E,KAAK,CAACqE,S;;gBAApB3D,K,kBAK8B;AAChC2D,EAAAA,SAAS,EAAE,KADqB;AAEhCM,EAAAA,QAAQ,EAAE,EAFsB;AAGhCX,EAAAA,UAAU,EAAE,KAHoB;AAIhCN,EAAAA,YAAY,EAAE;AAJkB,C;;AAgSpC,eAAepD,OAAO,CAAaI,KAAb,CAAtB","sourcesContent":["import * as React from 'react';\nimport {\n  getSupportedEvents,\n  coordX,\n  coordY,\n  touchEnabled,\n  VKUITouchEvent,\n  VKUITouchEventHander,\n} from '../../lib/touch';\nimport { HasRootRef } from '../../types';\nimport { canUseDOM, DOMProps, withDOM } from '../../lib/dom';\nimport { setRef, noop } from '../../lib/utils';\n\nexport interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n  onStart?(outputEvent: TouchEvent): void;\n  onStartX?(outputEvent: TouchEvent): void;\n  onStartY?(outputEvent: TouchEvent): void;\n  onMove?(outputEvent: TouchEvent): void;\n  onMoveX?(outputEvent: TouchEvent): void;\n  onMoveY?(outputEvent: TouchEvent): void;\n  onEnd?(outputEvent: TouchEvent): void;\n  onEndX?(outputEvent: TouchEvent): void;\n  onEndY?(outputEvent: TouchEvent): void;\n  useCapture?: boolean;\n  noSlideClick?: boolean;\n  Component?: React.ElementType;\n}\n\nexport interface Gesture {\n  startX?: number;\n  startY?: number;\n  startT?: Date;\n  isPressed?: boolean;\n  isY?: boolean;\n  isX?: boolean;\n  isSlideX?: boolean;\n  isSlideY?: boolean;\n  isSlide?: boolean;\n  shiftX?: number;\n  shiftY?: number;\n  shiftXAbs?: number;\n  shiftYAbs?: number;\n}\n\nexport interface TouchEvent extends Gesture {\n  originalEvent: VKUITouchEvent;\n}\n\nexport type TouchEventHandler = (e: TouchEvent) => void;\nexport type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;\nexport type DragHandler = (e: React.DragEvent<HTMLElement>) => void;\n\nconst events = getSupportedEvents();\n\nclass Touch extends React.Component<TouchProps & DOMProps> {\n  didSlide = false;\n  gesture: Partial<Gesture> = {};\n  container: HTMLElement;\n\n  static defaultProps: TouchProps = {\n    Component: 'div',\n    children: '',\n    useCapture: false,\n    noSlideClick: false,\n  };\n\n  get document() {\n    return this.props.document;\n  }\n\n  componentDidMount() {\n    if (canUseDOM) {\n      this.container.addEventListener(events[0], this.onStart, { capture: this.props.useCapture, passive: false });\n      touchEnabled && this.subscribe(this.container);\n\n      this.container.addEventListener('mouseenter', this.onEnter, { capture: this.props.useCapture, passive: true });\n      this.container.addEventListener('mouseleave', this.onLeave, { capture: this.props.useCapture, passive: true });\n    }\n  }\n\n  componentWillUnmount() {\n    this.container.removeEventListener(events[0], this.onStart);\n    this.unsubscribe();\n\n    this.container.removeEventListener('mouseenter', this.onEnter);\n    this.container.removeEventListener('mouseleave', this.onLeave);\n  }\n\n  /**\n   * Обработчик событий mouseenter\n   *\n   * @param {Object} e Браузерное событие\n   * @return {void}\n   */\n  onEnter = (e: MouseEvent) => {\n    if (this.props.onEnter) {\n      this.props.onEnter(e);\n    }\n  };\n\n  /**\n   * Обработчик событий mouseleave\n   *\n   * @param {Object} e Браузерное событие\n   * @param {boolean} simulated флаг, с которым обработчик был вызван симулятивно\n   * @return {void}\n   */\n  onLeave = (e: MouseEvent) => {\n    if (this.props.onLeave) {\n      this.props.onLeave(e);\n    }\n  };\n\n  /**\n   * Обработчик событий touchstart\n   *\n   * @param {Object} e Браузерное событие\n   * @return {void}\n   */\n  onStart: VKUITouchEventHander = (e: VKUITouchEvent) => {\n    this.gesture = {\n      startX: coordX(e),\n      startY: coordY(e),\n      startT: new Date(),\n      isPressed: true,\n    };\n\n    // Вызываем нужные колбеки из props\n    const outputEvent = {\n      ...this.gesture,\n      originalEvent: e,\n    };\n\n    if (this.props.onStart) {\n      this.props.onStart(outputEvent);\n    }\n\n    if (this.props.onStartX) {\n      this.props.onStartX(outputEvent);\n    }\n\n    if (this.props.onStartY) {\n      this.props.onStartY(outputEvent);\n    }\n\n    !touchEnabled && this.subscribe(this.document);\n  };\n\n  /**\n   * Обработчик событий touchmove\n   *\n   * @param {Object} e Браузерное событие\n   * @return {void}\n   */\n  onMove: VKUITouchEventHander = (e: VKUITouchEvent) => {\n    const { isPressed, isX, isY, startX, startY } = this.gesture;\n\n    if (isPressed) {\n      // смещения\n      const shiftX = coordX(e) - startX;\n      const shiftY = coordY(e) - startY;\n\n      // абсолютные значения смещений\n      const shiftXAbs = Math.abs(shiftX);\n      const shiftYAbs = Math.abs(shiftY);\n\n      // Если определяем мультитач, то прерываем жест\n      if (!!e.touches && e.touches.length > 1) {\n        return this.onEnd(e);\n      }\n\n      // если мы ещё не определились\n      if (!isX && !isY) {\n        let willBeX = shiftXAbs >= 5 && shiftXAbs > shiftYAbs;\n        let willBeY = shiftYAbs >= 5 && shiftYAbs > shiftXAbs;\n        let willBeSlidedX = willBeX && !!this.props.onMoveX || !!this.props.onMove;\n        let willBeSlidedY = willBeY && !!this.props.onMoveY || !!this.props.onMove;\n\n        this.gesture.isY = willBeY;\n        this.gesture.isX = willBeX;\n        this.gesture.isSlideX = willBeSlidedX;\n        this.gesture.isSlideY = willBeSlidedY;\n        this.gesture.isSlide = willBeSlidedX || willBeSlidedY;\n      }\n\n      if (this.gesture.isSlide) {\n        this.gesture.shiftX = shiftX;\n        this.gesture.shiftY = shiftY;\n        this.gesture.shiftXAbs = shiftXAbs;\n        this.gesture.shiftYAbs = shiftYAbs;\n\n        // Вызываем нужные колбеки из props\n        const outputEvent: TouchEvent = {\n          ...this.gesture,\n          originalEvent: e,\n        };\n\n        if (this.props.onMove) {\n          this.props.onMove(outputEvent);\n        }\n\n        if (this.gesture.isSlideX && this.props.onMoveX) {\n          this.props.onMoveX(outputEvent);\n        }\n\n        if (this.gesture.isSlideY && this.props.onMoveY) {\n          this.props.onMoveY(outputEvent);\n        }\n      }\n    }\n  };\n\n  /**\n   * Обработчик событий touchend, touchcancel\n   *\n   * @param {Object} e Браузерное событие\n   * @return {void}\n   */\n  onEnd: VKUITouchEventHander = (e: VKUITouchEvent) => {\n    const { isPressed, isSlide, isSlideX, isSlideY } = this.gesture;\n\n    if (isPressed) {\n      // Вызываем нужные колбеки из props\n      const outputEvent: TouchEvent = {\n        ...this.gesture,\n        originalEvent: e,\n      };\n\n      if (this.props.onEnd) {\n        this.props.onEnd(outputEvent);\n      }\n\n      if (isSlideY && this.props.onEndY) {\n        this.props.onEndY(outputEvent);\n      }\n\n      if (isSlideX && this.props.onEndX) {\n        this.props.onEndX(outputEvent);\n      }\n    }\n\n    this.didSlide = isSlide;\n    this.gesture = {};\n\n    // Если это был тач-евент, симулируем отмену hover\n    if (e.type === 'touchend' || e.type === 'touchcancel') {\n      this.onLeave(e);\n    }\n\n    !touchEnabled && this.unsubscribe();\n  };\n\n  subscribe(element: HTMLElement | Document) {\n    this.unsubscribe();\n    const listenerParams = { capture: this.props.useCapture, passive: false };\n    element.addEventListener(events[1], this.onMove, listenerParams);\n    element.addEventListener(events[2], this.onEnd, listenerParams);\n    element.addEventListener(events[3], this.onEnd, listenerParams);\n    this.unsubscribe = () => {\n      // Здесь нужен последний аргумент с такими же параметрами, потому что\n      // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.\n      // https://github.com/VKCOM/VKUI/issues/444\n      element.removeEventListener(events[1], this.onMove, listenerParams);\n      element.removeEventListener(events[2], this.onEnd, listenerParams);\n      element.removeEventListener(events[3], this.onEnd, listenerParams);\n      this.unsubscribe = noop;\n    };\n  }\n  unsubscribe = noop;\n\n  /**\n   * Обработчик событий dragstart\n   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений\n   *\n   * @param {Object} e Браузерное событие\n   * @return {void}\n   */\n  onDragStart: DragHandler = (e: React.DragEvent<HTMLElement>) => {\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'A' || target.tagName === 'IMG') {\n      e.preventDefault();\n    }\n  };\n\n  /**\n   * Обработчик клика по компоненту\n   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп\n   *\n   * @param {Object} e Браузерное событие\n   * @return {void}\n   */\n  postGestureClick: ClickHandler = (e) => {\n    const { onClickCapture, noSlideClick } = this.props;\n    if (!this.didSlide) {\n      return onClickCapture && onClickCapture(e);\n    }\n    if ((e.target as HTMLElement).tagName === 'A') {\n      e.preventDefault();\n    }\n    if (noSlideClick) {\n      e.stopPropagation();\n    } else {\n      onClickCapture && onClickCapture(e);\n    }\n    this.didSlide = false;\n  };\n\n  getRef: React.RefCallback<HTMLElement> = (container) => {\n    this.container = container;\n    setRef(container, this.props.getRootRef);\n  };\n\n  render() {\n    const {\n      onStart,\n      onStartX,\n      onStartY,\n      onMove,\n      onMoveX,\n      onMoveY,\n      onLeave,\n      onEnter,\n      onEnd,\n      onEndX,\n      onEndY,\n      useCapture,\n      Component,\n      getRootRef,\n      noSlideClick,\n      window,\n      document,\n      ...restProps\n    } = this.props;\n\n    return (\n      <Component\n        {...restProps}\n        onDragStart={this.onDragStart}\n        onClickCapture={this.postGestureClick}\n        ref={this.getRef}\n      >\n        {this.props.children}\n      </Component>\n    );\n  }\n}\n\nexport default withDOM<TouchProps>(Touch);\n"],"file":"Touch.js"}
+{"version":3,"sources":["../../../../src/components/Touch/Touch.tsx"],"names":["React","getSupportedEvents","coordX","coordY","touchEnabled","useDOM","useExternRef","useEventListener","useIsomorphicLayoutEffect","Touch","onStart","onStartX","onStartY","_onMove","onMove","onMoveX","onMoveY","onLeave","onEnter","_onEnd","onEnd","onEndX","onEndY","onClickCapture","useCapture","Component","getRootRef","noSlideClick","restProps","document","events","useMemo","didSlide","useRef","gesture","handle","e","handers","forEach","cb","current","originalEvent","mouseEnterHandler","mouseLeaveHandler","startHandler","startX","startY","startT","Date","isPressed","subscribe","capture","passive","containerRef","el","add","isX","isY","shiftX","shiftY","shiftXAbs","Math","abs","shiftYAbs","touches","length","willBeX","willBeY","willBeSlidedX","willBeSlidedY","Object","assign","isSlideX","isSlideY","isSlide","type","listenerParams","listeners","l","onDragStart","target","tagName","preventDefault","postGestureClick","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getSupportedEvents, coordX, coordY, touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { HasRootRef } from '../../types';\nimport { useDOM } from '../../lib/dom';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\nexport interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n  onStart?(outputEvent: TouchEvent): void;\n  onStartX?(outputEvent: TouchEvent): void;\n  onStartY?(outputEvent: TouchEvent): void;\n  onMove?(outputEvent: TouchEvent): void;\n  onMoveX?(outputEvent: TouchEvent): void;\n  onMoveY?(outputEvent: TouchEvent): void;\n  onEnd?(outputEvent: TouchEvent): void;\n  onEndX?(outputEvent: TouchEvent): void;\n  onEndY?(outputEvent: TouchEvent): void;\n  useCapture?: boolean;\n  noSlideClick?: boolean;\n  Component?: React.ElementType;\n}\n\nexport interface Gesture {\n  startX?: number;\n  startY?: number;\n  startT?: Date;\n  isPressed?: boolean;\n  isY?: boolean;\n  isX?: boolean;\n  isSlideX?: boolean;\n  isSlideY?: boolean;\n  isSlide?: boolean;\n  shiftX?: number;\n  shiftY?: number;\n  shiftXAbs?: number;\n  shiftYAbs?: number;\n}\n\nexport interface TouchEvent extends Gesture {\n  originalEvent: VKUITouchEvent;\n}\n\nexport type TouchEventHandler = (e: TouchEvent) => void;\nexport type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;\nexport type DragHandler = (e: React.DragEvent<HTMLElement>) => void;\n\nexport const Touch: React.FC<TouchProps> = ({\n  onStart,\n  onStartX,\n  onStartY,\n  onMove: _onMove,\n  onMoveX,\n  onMoveY,\n  onLeave,\n  onEnter,\n  onEnd: _onEnd,\n  onEndX,\n  onEndY,\n  onClickCapture,\n  useCapture = false,\n  Component = 'div',\n  getRootRef,\n  noSlideClick = false,\n  ...restProps\n}) => {\n  const { document } = useDOM();\n  const events = React.useMemo(getSupportedEvents, []);\n  const didSlide = React.useRef(false);\n  const gesture = React.useRef<Partial<Gesture>>({});\n  const handle = (e: any, handers: any[]) => handers.forEach((cb) => {\n    cb && cb({ ...gesture.current, originalEvent: e });\n  });\n\n  const mouseEnterHandler = useEventListener('mouseenter', onEnter);\n  const mouseLeaveHandler = useEventListener('mouseleave', onLeave);\n  const startHandler = useEventListener(events[0], (e: VKUITouchEvent) => {\n    gesture.current = {\n      startX: coordX(e),\n      startY: coordY(e),\n      startT: new Date(),\n      isPressed: true,\n    };\n\n    handle(e, [onStart, onStartX, onStartY]);\n    !touchEnabled() && subscribe(document);\n  }, { capture: useCapture, passive: false });\n  const containerRef = useExternRef(getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = containerRef.current;\n    mouseEnterHandler.add(el);\n    mouseLeaveHandler.add(el);\n    startHandler.add(el);\n    touchEnabled() && subscribe(el);\n  }, [Component]);\n\n  function onMove(e: VKUITouchEvent) {\n    const { isPressed, isX, isY, startX, startY } = gesture.current;\n\n    if (isPressed) {\n      // смещения\n      const shiftX = coordX(e) - startX;\n      const shiftY = coordY(e) - startY;\n\n      // абсолютные значения смещений\n      const shiftXAbs = Math.abs(shiftX);\n      const shiftYAbs = Math.abs(shiftY);\n\n      // Если определяем мультитач, то прерываем жест\n      if (!!e.touches && e.touches.length > 1) {\n        return onEnd(e);\n      }\n\n      // если мы ещё не определились\n      if (!isX && !isY) {\n        const willBeX = shiftXAbs >= 5 && shiftXAbs > shiftYAbs;\n        const willBeY = shiftYAbs >= 5 && shiftYAbs > shiftXAbs;\n        const willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);\n        const willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);\n\n        Object.assign(gesture.current, {\n          isY: willBeY,\n          isX: willBeX,\n          isSlideX: willBeSlidedX,\n          isSlideY: willBeSlidedY,\n          isSlide: willBeSlidedX || willBeSlidedY,\n        });\n      }\n\n      if (gesture.current.isSlide) {\n        Object.assign(gesture.current, {\n          shiftX,\n          shiftY,\n          shiftXAbs,\n          shiftYAbs,\n        });\n\n        handle(e, [_onMove, gesture.current.isSlideX && onMoveX, gesture.current.isSlideY && onMoveY]);\n      }\n    }\n  }\n\n  function onEnd(e: VKUITouchEvent) {\n    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current;\n\n    if (isPressed) {\n      handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);\n    }\n\n    didSlide.current = isSlide;\n    gesture.current = {};\n\n    // Если это был тач-евент, симулируем отмену hover\n    if (e.type === 'touchend' || e.type === 'touchcancel') {\n      onLeave && onLeave(e);\n    }\n\n    !touchEnabled() && subscribe(null);\n  }\n\n  const listenerParams = { capture: useCapture, passive: false };\n  const listeners = [\n    useEventListener(events[1], onMove, listenerParams),\n    useEventListener(events[2], onEnd, listenerParams),\n    useEventListener(events[3], onEnd, listenerParams),\n  ];\n  function subscribe(el: HTMLElement | Document | null) {\n    listeners.forEach((l) => l.add(el));\n  }\n\n  /**\n   * Обработчик событий dragstart\n   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений\n   */\n  const onDragStart = (e: React.DragEvent<HTMLElement>) => {\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'A' || target.tagName === 'IMG') {\n      e.preventDefault();\n    }\n  };\n\n  /**\n   * Обработчик клика по компоненту\n   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп\n   */\n  const postGestureClick: typeof onClickCapture = (e) => {\n    if (!didSlide.current) {\n      return onClickCapture && onClickCapture(e);\n    }\n    if ((e.target as HTMLElement).tagName === 'A') {\n      e.preventDefault();\n    }\n    if (noSlideClick) {\n      e.stopPropagation();\n    } else {\n      onClickCapture && onClickCapture(e);\n    }\n    didSlide.current = false;\n  };\n\n  return (\n    <Component\n      {...restProps}\n      onDragStart={onDragStart}\n      onClickCapture={postGestureClick}\n      ref={containerRef}\n    />\n  );\n};\n"],"file":"Touch.js"}

package/dist/cssm/components/UsersStack/UsersStack.css

@@ -1 +1 @@
-.vkuiUsersStack{display:flex;align-items:center;color:#818c99;color:var(--text_secondary)}.vkuiUsersStack__photos{display:flex}.vkuiUsersStack__photo{background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:50%;background-color:rgba(0,28,61,.08);background-color:var(--placeholder_icon_background)}.vkuiUsersStack__photo--others{display:flex;align-items:center;justify-content:center;color:#fff;background:#99a2ad;background:var(--content_placeholder_icon)}.vkuiUsersStack--size-xs .vkuiUsersStack__photo{width:16px;height:16px}.vkuiUsersStack--size-s .vkuiUsersStack__photo{width:24px;height:24px}.vkuiUsersStack--size-m .vkuiUsersStack__photo{width:32px;height:32px}.vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:4px}.vkuiUsersStack:not(.vkuiUsersStack--simple) .vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-2px}.vkuiUsersStack--size-xs:not(.vkuiUsersStack--simple) .vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-1px;-webkit-clip-path:url(#users_stack_mask_16_left);clip-path:url(#users_stack_mask_16_left)}.vkuiUsersStack--size-s:not(.vkuiUsersStack--simple) .vkuiUsersStack__photo+.vkuiUsersStack__photo{-webkit-clip-path:url(#users_stack_mask_24_left);clip-path:url(#users_stack_mask_24_left)}.vkuiUsersStack--size-m:not(.vkuiUsersStack--simple) .vkuiUsersStack__photo+.vkuiUsersStack__photo{-webkit-clip-path:url(#users_stack_mask_32_left);clip-path:url(#users_stack_mask_32_left)}.vkuiUsersStack--size-m.vkuiUsersStack--others:not(.vkuiUsersStack--simple) .vkuiUsersStack__photo{-webkit-clip-path:url(#users_stack_mask_32_right);clip-path:url(#users_stack_mask_32_right)}.vkuiUsersStack--size-m.vkuiUsersStack--others:not(.vkuiUsersStack--simple) .vkuiUsersStack__photo:last-child{-webkit-clip-path:none;clip-path:none}.vkuiUsersStack__text{min-width:0;flex:1;margin:0 0 0 8px}.vkuiUsersStack--l-vertical{flex-direction:column;justify-content:center}.vkuiUsersStack--l-vertical .vkuiUsersStack__text{margin:8px 0 0;text-align:center}.vkuiModalCardBase .vkuiUsersStack{margin-top:20px}.vkuiRichCell__bottom .vkuiUsersStack{padding:5px 0 0}
+.vkuiUsersStack{display:flex;align-items:center;color:#818c99;color:var(--text_secondary)}.vkuiUsersStack__photos{display:flex}.vkuiUsersStack__photo{background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:50%;background-color:rgba(0,28,61,.08);background-color:var(--placeholder_icon_background)}.vkuiUsersStack__photo--others{display:flex;align-items:center;justify-content:center;color:#fff;background:#99a2ad;background:var(--content_placeholder_icon)}.vkuiUsersStack--size-xs .vkuiUsersStack__photo{width:16px;height:16px}.vkuiUsersStack--size-s .vkuiUsersStack__photo{width:24px;height:24px}.vkuiUsersStack--size-m .vkuiUsersStack__photo{width:32px;height:32px}.vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-2px}.vkuiUsersStack--size-xs .vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-1px;-webkit-clip-path:url(#users_stack_mask_16_left);clip-path:url(#users_stack_mask_16_left)}.vkuiUsersStack--size-s .vkuiUsersStack__photo+.vkuiUsersStack__photo{-webkit-clip-path:url(#users_stack_mask_24_left);clip-path:url(#users_stack_mask_24_left)}.vkuiUsersStack--size-m .vkuiUsersStack__photo+.vkuiUsersStack__photo{-webkit-clip-path:url(#users_stack_mask_32_left);clip-path:url(#users_stack_mask_32_left)}.vkuiUsersStack--size-m.vkuiUsersStack--others .vkuiUsersStack__photo{-webkit-clip-path:url(#users_stack_mask_32_right);clip-path:url(#users_stack_mask_32_right)}.vkuiUsersStack--size-m.vkuiUsersStack--others .vkuiUsersStack__photo:last-child{-webkit-clip-path:none;clip-path:none}.vkuiUsersStack__text{min-width:0;flex:1;margin:0 0 0 8px}.vkuiUsersStack--l-vertical{flex-direction:column;justify-content:center}.vkuiUsersStack--l-vertical .vkuiUsersStack__text{margin:8px 0 0;text-align:center}.vkuiModalCardBase .vkuiUsersStack{margin-top:20px}.vkuiRichCell__bottom .vkuiUsersStack{padding:5px 0 0}

package/dist/cssm/components/UsersStack/UsersStack.js

@@ -4,22 +4,17 @@ var _excluded = ["photos", "visibleCount", "size", "layout", "children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
 import { getClassName } from "../../helpers/getClassName";
-import { useBrowserInfo } from "../../hooks/useBrowserInfo";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
-import { System } from "../../lib/browser";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import Caption from "../Typography/Caption/Caption";
 import Subhead from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
+import { useDOM } from "../../lib/dom";
 import "./UsersStack.css";
 
 var UsersStack = function UsersStack(props) {
-  var _useBrowserInfo = useBrowserInfo(),
-      system = _useBrowserInfo.system,
-      systemVersion = _useBrowserInfo.systemVersion;
-
   var platform = usePlatform();
 
   var photos = props.photos,
@@ -29,22 +24,18 @@ var UsersStack = function UsersStack(props) {
       children = props.children,
       restProps = _objectWithoutProperties(props, _excluded);
 
+  var _useDOM = useDOM(),
+      document = _useDOM.document;
+
   useIsomorphicLayoutEffect(function () {
-    createMasks();
-  }, []);
+    createMasks(document);
+  }, [document]);
   var othersCount = Math.max(0, photos.length - visibleCount);
   var canShowOthers = othersCount > 0 && size === 'm';
   var photosShown = photos.slice(0, visibleCount);
-  var canUseClipPath = true;
-
-  if (system === System.IOS) {
-    canUseClipPath = systemVersion && systemVersion.major >= 12;
-  }
-
   return createScopedElement("div", _extends({}, restProps, {
     vkuiClass: classNames(getClassName('UsersStack', platform), "UsersStack--size-".concat(size), "UsersStack--l-".concat(layout), {
-      'UsersStack--others': canShowOthers,
-      'UsersStack--simple': !canUseClipPath
+      'UsersStack--others': canShowOthers
     })
   }), createScopedElement("div", {
     vkuiClass: "UsersStack__photos",