@prom-ui/core 0.0.90 → 0.0.100

package/Avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Avatar",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Body/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Body",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Box/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Box",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Button",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/ButtonPageUp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ButtonPageUp",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Checkbox",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Flex/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Flex",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Grid",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Icon",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Image",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/ImageEmoji/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ImageEmoji",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Input",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/KeyPress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/KeyPress",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Line/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Line",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Link",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/List/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/List",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Media",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/OutsideClick/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/OutsideClick",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Overlay/SwipeClose.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare type SwipeCloseProps = {
+    isActive?: boolean;
+    children: React.ReactNode;
+    rootRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    onClose: (e: any) => void;
+    placement: 'adaptive' | 'top' | 'right' | 'bottom' | 'left';
+};
+export declare const SwipeClose: React.FC<SwipeCloseProps>;
+export {};

package/Overlay/TouchScrollable.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare type TouchScrollableProps = {
+    isActive?: boolean;
+    scrollRef: React.RefObject<HTMLDivElement>;
+    children: React.ReactNode;
+};
+export declare const TouchScrollable: React.FC<TouchScrollableProps>;
+export {};

package/Overlay/cjs/index.development.js

@@ -15,6 +15,8 @@ var Button = require('@prom-ui/core/Button');
 var Icon = require('@prom-ui/core/Icon');
 var Close = require('@prom-ui/icons/Close');
 var ArrowBack = require('@prom-ui/icons/ArrowBack');
+var utils = require('react-scrolllock/dist/utils');
+var Swipe = require('react-easy-swipe');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,6 +41,7 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ScrollLock__default = /*#__PURE__*/_interopDefaultLegacy(ScrollLock);
+var Swipe__default = /*#__PURE__*/_interopDefaultLegacy(Swipe);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -179,6 +182,172 @@ var getPopupStyle = function (placement, size, maxSize) {
   };
 };
 
+// FORK FROM https://github.com/jossmac/react-scrolllock/blob/master/src/TouchScrollable.js
+var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+/* @ts-ignore */
+
+var canUseEventListeners = canUseDOM && !!(window.addEventListener || window.attachEvent);
+var TouchScrollable = function (_a) {
+  var _b = _a.isActive,
+      isActive = _b === void 0 ? false : _b,
+      scrollRef = _a.scrollRef,
+      children = _a.children;
+  React__namespace.useEffect(function () {
+    if (!isActive || !canUseEventListeners || !(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) return;
+    scrollRef.current.addEventListener('touchstart', utils.preventInertiaScroll, utils.listenerOptions);
+    scrollRef.current.addEventListener('touchmove', utils.allowTouchMove, utils.listenerOptions);
+    return function () {
+      if (!isActive || !canUseEventListeners || !(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) return;
+      scrollRef.current.removeEventListener('touchstart', utils.preventInertiaScroll, utils.listenerOptions);
+      scrollRef.current.removeEventListener('touchmove', utils.allowTouchMove, utils.listenerOptions);
+    };
+  });
+  return React__namespace.createElement(React__namespace.Fragment, null, children);
+};
+
+var VENDOR_PREFIX = ['-webkit', '-moz', '-ms', '-o'];
+var PROPERTYES_VENDOR_PREFIX = ['transform', 'transition'];
+
+var setStyle = function (element, style) {
+  if (!element) return;
+
+  for (var property in style) {
+    var isVendorPrefix = PROPERTYES_VENDOR_PREFIX.indexOf(property) !== -1;
+
+    if (!!!style[property]) {
+      element.style.removeProperty(property);
+
+      if (isVendorPrefix) {
+        for (var _i = 0, VENDOR_PREFIX_1 = VENDOR_PREFIX; _i < VENDOR_PREFIX_1.length; _i++) {
+          var vendor = VENDOR_PREFIX_1[_i];
+          element.style.removeProperty("".concat(vendor, "-").concat(property));
+        }
+      }
+    } else {
+      element.style.setProperty(property, style[property]);
+
+      if (isVendorPrefix) {
+        for (var _a = 0, VENDOR_PREFIX_2 = VENDOR_PREFIX; _a < VENDOR_PREFIX_2.length; _a++) {
+          var vendor = VENDOR_PREFIX_2[_a];
+          element.style.setProperty("".concat(vendor, "-").concat(property), style[property]);
+        }
+      }
+    }
+  }
+};
+
+var SWIPE_TIME_RATE = 250;
+var SWIPE_MIN_POS = 70;
+var SWIPE_TRANSITION_DURATION = 225;
+var SwipeClose = function (_a) {
+  var _b = _a.isActive,
+      isActive = _b === void 0 ? true : _b,
+      children = _a.children,
+      onClose = _a.onClose,
+      placement = _a.placement,
+      rootRef = _a.rootRef,
+      contentRef = _a.contentRef;
+  var isAllowSwipe = React__namespace.useRef(null);
+  var isAllowClose = React__namespace.useRef(false);
+  var startTime = React__namespace.useRef(0);
+
+  if (!isActive) {
+    return React__namespace.createElement(React__namespace.Fragment, null, children);
+  }
+
+  var onSwipeMove = function (_a) {
+    var _b, _c, _d;
+
+    var x = _a.x,
+        y = _a.y;
+    var contentsScrollHeight = ((_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0;
+    var contentOffsetHeight = ((_c = contentRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
+    var contentScrollTop = ((_d = contentRef.current) === null || _d === void 0 ? void 0 : _d.scrollTop) || 0;
+    var contentScrollBottom = contentsScrollHeight - (contentScrollTop + contentOffsetHeight);
+    var transform = null;
+    var isAllowSwipeCords = false;
+    var isAllowCloseCords = false;
+    var xAbs = Math.abs(x);
+    var yAbs = Math.abs(y);
+
+    if (placement === 'top') {
+      transform = "translateY(".concat(y >= 0 ? 0 : y, "px)");
+      isAllowSwipeCords = contentScrollBottom <= 1 && y <= 0 && yAbs > xAbs;
+      isAllowCloseCords = yAbs > SWIPE_MIN_POS;
+    } else if (placement === 'bottom') {
+      transform = "translateY(".concat(y <= 0 ? 0 : y, "px)");
+      isAllowSwipeCords = contentScrollTop <= 1 && y >= 0 && yAbs > xAbs;
+      isAllowCloseCords = yAbs > SWIPE_MIN_POS;
+    } else if (placement === 'left') {
+      transform = "translateX(".concat(x >= 0 ? 0 : x, "px)");
+      isAllowSwipeCords = x <= 0 && xAbs > yAbs;
+      isAllowCloseCords = xAbs > SWIPE_MIN_POS;
+    } else if (placement === 'right') {
+      transform = "translateX(".concat(x <= 0 ? 0 : x, "px)");
+      isAllowSwipeCords = x >= 0 && xAbs > yAbs;
+      isAllowCloseCords = xAbs > SWIPE_MIN_POS;
+    }
+
+    if (isAllowSwipe.current === null) {
+      if (isAllowSwipeCords) {
+        isAllowSwipe.current = true;
+      } else {
+        isAllowSwipe.current = false;
+      }
+    }
+
+    if (isAllowSwipe.current) {
+      if (!startTime.current) {
+        startTime.current = new Date().getTime();
+      }
+
+      if (!isAllowClose.current && isAllowCloseCords) {
+        isAllowClose.current = true;
+      }
+
+      setStyle(rootRef.current, {
+        transform: transform
+      });
+      setStyle(contentRef.current, {
+        'pointer-events': "none",
+        'overflow': 'hidden'
+      });
+    }
+  };
+
+  var onSwipeEnd = function () {
+    if (isAllowSwipe.current) {
+      setStyle(rootRef.current, {
+        transition: "transform ".concat(SWIPE_TRANSITION_DURATION, "ms cubic-bezier(0, 0, 0.2, 1) 0ms"),
+        transform: null
+      });
+      setStyle(contentRef.current, {
+        'pointer-events': null,
+        'overflow': null
+      });
+      setTimeout(function () {
+        setStyle(rootRef.current, {
+          transition: null
+        });
+      }, SWIPE_TRANSITION_DURATION);
+      var timeRate = new Date().getTime() - startTime.current;
+
+      if (isAllowClose.current && timeRate < SWIPE_TIME_RATE && onClose) {
+        onClose({});
+      }
+    }
+
+    startTime.current = 0;
+    isAllowSwipe.current = null;
+    isAllowClose.current = false;
+  };
+
+  return React__namespace.createElement(Swipe__default["default"], {
+    onSwipeMove: onSwipeMove,
+    onSwipeEnd: onSwipeEnd
+  }, children);
+};
+
 var DEFAULT_SIZE = 400;
 var Overlay = function (_a) {
   var children = _a.children,
@@ -194,39 +363,42 @@ var Overlay = function (_a) {
       isShowPrevButton = _c === void 0 ? false : _c,
       _d = _a.isCloseOnEscape,
       isCloseOnEscape = _d === void 0 ? true : _d,
-      _e = _a.isAnimated,
-      isAnimated = _e === void 0 ? true : _e,
+      _e = _a.isCloseOnSwipe,
+      isCloseOnSwipe = _e === void 0 ? true : _e,
       _f = _a.isCloseOutsideClick,
       isCloseOutsideClick = _f === void 0 ? true : _f,
-      _g = _a.isRenderPortal,
-      isRenderPortal = _g === void 0 ? true : _g,
-      _h = _a.isScrollLock,
-      isScrollLock = _h === void 0 ? true : _h,
-      _j = _a.isScrollLockTouch,
-      isScrollLockTouch = _j === void 0 ? true : _j,
+      _g = _a.isAnimated,
+      isAnimated = _g === void 0 ? true : _g,
+      _h = _a.isRenderPortal,
+      isRenderPortal = _h === void 0 ? true : _h,
+      _j = _a.isScrollLock,
+      isScrollLock = _j === void 0 ? true : _j,
+      _k = _a.isScrollLockTouch,
+      isScrollLockTouch = _k === void 0 ? true : _k,
       header = _a.header,
       footer = _a.footer,
-      _k = _a.padding,
-      padding = _k === void 0 ? '20px 20px 20px 20px' : _k,
+      _l = _a.padding,
+      padding = _l === void 0 ? '20px 20px 20px 20px' : _l,
       title = _a.title,
-      _l = _a.placement,
-      placement = _l === void 0 ? 'adaptive' : _l,
-      _m = _a.size,
-      size = _m === void 0 ? 'adaptive' : _m,
-      _o = _a.maxSize,
-      maxSize = _o === void 0 ? '90%' : _o,
-      _p = _a.zIndex,
-      zIndex = _p === void 0 ? 5000 : _p,
+      _m = _a.placement,
+      placement = _m === void 0 ? 'adaptive' : _m,
+      _o = _a.size,
+      size = _o === void 0 ? 'adaptive' : _o,
+      _p = _a.maxSize,
+      maxSize = _p === void 0 ? '90%' : _p,
+      _q = _a.zIndex,
+      zIndex = _q === void 0 ? 5000 : _q,
       contentRef = _a.contentRef,
       dataQaId = _a.dataQaId,
-      props = __rest(_a, ["children", "onClose", "onOpen", "onPrev", "onOpened", "onClosed", "isOpen", "isShowCloseButton", "isShowPrevButton", "isCloseOnEscape", "isAnimated", "isCloseOutsideClick", "isRenderPortal", "isScrollLock", "isScrollLockTouch", "header", "footer", "padding", "title", "placement", "size", "maxSize", "zIndex", "contentRef", "dataQaId"]);
+      props = __rest(_a, ["children", "onClose", "onOpen", "onPrev", "onOpened", "onClosed", "isOpen", "isShowCloseButton", "isShowPrevButton", "isCloseOnEscape", "isCloseOnSwipe", "isCloseOutsideClick", "isAnimated", "isRenderPortal", "isScrollLock", "isScrollLockTouch", "header", "footer", "padding", "title", "placement", "size", "maxSize", "zIndex", "contentRef", "dataQaId"]);
 
-  var currentPlacement = placement;
-  var currentSize = size;
+  var popupRef = React__namespace.useRef(null);
+  var currentContentRef = contentRef || React__namespace.useRef(null);
   var isMinWidthMedium = Media.useMedia({
     minWidth: 'medium'
   });
-  var ScrollableWrapper = isScrollLockTouch ? ScrollLock.TouchScrollable : React__namespace.Fragment;
+  var currentPlacement = placement;
+  var currentSize = size;
 
   if (size === 'adaptive') {
     if (placement === 'top' || placement === 'bottom') {
@@ -250,6 +422,12 @@ var Overlay = function (_a) {
     enabled: isAnimated
   }, React__namespace.createElement(Portal.Portal, {
     isActive: isRenderPortal
+  }, React__namespace.createElement(SwipeClose, {
+    isActive: isScrollLock && isCloseOnSwipe,
+    rootRef: popupRef,
+    contentRef: currentContentRef,
+    placement: currentPlacement,
+    onClose: onClose
   }, React__namespace.createElement(Root, __assign({
     role: 'presentation',
     style: {
@@ -269,6 +447,7 @@ var Overlay = function (_a) {
       }
     }
   }), React__namespace.createElement(Popup, {
+    ref: popupRef,
     "popup-placement": currentPlacement,
     "aria-modal": true,
     role: 'dialog',
@@ -280,12 +459,15 @@ var Overlay = function (_a) {
     onClose: onClose,
     onPrev: onPrev,
     title: title
-  }, header), React__namespace.createElement(OverlayFooter, null, footer), React__namespace.createElement(ScrollableWrapper, null, React__namespace.createElement(OverlayContent, {
-    ref: contentRef,
+  }, header), React__namespace.createElement(OverlayFooter, null, footer), React__namespace.createElement(TouchScrollable, {
+    isActive: isScrollLockTouch,
+    scrollRef: currentContentRef
+  }, React__namespace.createElement(OverlayContent, {
+    ref: currentContentRef,
     style: {
       padding: padding
     }
-  }, children))))));
+  }, children)))))));
 };
 
 exports.Overlay = Overlay;

package/Overlay/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-scrolllock"),o=require("@prom-ui/core/KeyPress"),r=require("@prom-ui/core/Portal"),n=require("@prom-ui/core/Media"),a=require("ttag"),i=require("evokit"),c=require("react-transition-group"),l=require("@prom-ui/core/Text"),d=require("@prom-ui/core/Button"),u=require("@prom-ui/core/Icon"),s=require("@prom-ui/icons/Close"),p=require("@prom-ui/icons/ArrowBack");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function v(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var f=m(e),h=v(e),_=m(t),b=function(){return b=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},b.apply(this,arguments)};function E(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var O,y,x={root:"v0oYp",backdrop:"RvRWz",popup:"elIqJ",popup_placement_top:"Llv4b",popup_placement_bottom:"DJyNc",popup_placement_right:"_4DX3c",popup_placement_left:"OwkR7",content:"_5qQ0k",header:"LIk9z",header__grid:"SShy4",header__item:"_9fUzS",header__title:"Vuilz _9fUzS",header__action:"c-A8d _9fUzS",header__actionButton:"yYG24",header__actionIcon:"La2ok",footer:"_3Ca-G",enter:"OjeZp",exit:"HiHMU",enterActive:"Ne-Vn",exitActive:"_6f7f1"},k={css:x,b:""},g=i.createBlock("div","root",[],k),S=i.createBlock("div","backdrop",[],k),C=i.createBlock("div","popup",["placement"],k),P=i.createBlock("div","content",[],k),w=function(e){var t=e.open,o=void 0!==t&&t,r=e.children,n=e.enabled,a=void 0===n||n,i=e.onEnter,l=e.onEntered,d=e.onExited;return f.default.createElement(c.CSSTransition,{in:o,timeout:a?225:0,classNames:x,unmountOnExit:!0,onEnter:i,onEntered:l,onExited:d},r)},q=function(e){var t=e.isShowPrevButton,o=e.isShowCloseButton,r=e.children,n=e.title,i=e.onClose,c=e.onPrev;return f.default.createElement("div",{className:x.header},void 0!==r?r:f.default.createElement("div",{className:x.header__grid},f.default.createElement("div",{className:x.header__action},t&&f.default.createElement(d.Button,{className:x.header__actionButton,"button-theme":"black-inherit",type:"button",onClick:c,"aria-label":a.t(O||(O=E(["Назад"],["Назад"]))),"data-qaid":"prev"},f.default.createElement(u.Icon,{"icon-as":p.ArrowBack,className:x.header__actionIcon}))),f.default.createElement("div",{className:x.header__title},"string"==typeof n?f.default.createElement(l.Text,{"text-align":"center","text-size":"h4","text-wrap":"ellipsis","text-weight":"bold","data-qaid":"title"},n):n),f.default.createElement("div",{className:x.header__action},o&&i&&f.default.createElement(d.Button,{className:x.header__actionButton,"button-theme":"black-inherit",type:"button",onClick:i,"aria-label":a.t(y||(y=E(["Закрыть"],["Закрыть"]))),"data-qaid":"close"},f.default.createElement(u.Icon,{"icon-as":s.Close,className:x.header__actionIcon})))))},B=function(e){var t=e.children;return f.default.createElement("div",{className:x.footer},t)},j=function(e,t,o){return["top","bottom"].includes(e)?{height:t,maxHeight:o}:{width:t,maxWidth:o}};exports.Overlay=function(e){var a=e.children,i=e.onClose,c=e.onOpen,l=e.onPrev,d=e.onOpened,u=e.onClosed,s=e.isOpen,p=e.isShowCloseButton,m=void 0===p||p,v=e.isShowPrevButton,f=void 0!==v&&v,E=e.isCloseOnEscape,O=void 0===E||E,y=e.isAnimated,x=void 0===y||y,k=e.isCloseOutsideClick,z=void 0===k||k,I=e.isRenderPortal,N=void 0===I||I,A=e.isScrollLock,L=void 0===A||A,R=e.isScrollLockTouch,T=void 0===R||R,M=e.header,D=e.footer,U=e.padding,H=void 0===U?"20px 20px 20px 20px":U,K=e.title,Q=e.placement,W=void 0===Q?"adaptive":Q,G=e.size,J=void 0===G?"adaptive":G,V=e.maxSize,Y=void 0===V?"90%":V,F=e.zIndex,X=void 0===F?5e3:F,Z=e.contentRef,$=e.dataQaId,ee=function(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(e,r[n])&&(o[r[n]]=e[r[n]])}return o}(e,["children","onClose","onOpen","onPrev","onOpened","onClosed","isOpen","isShowCloseButton","isShowPrevButton","isCloseOnEscape","isAnimated","isCloseOutsideClick","isRenderPortal","isScrollLock","isScrollLockTouch","header","footer","padding","title","placement","size","maxSize","zIndex","contentRef","dataQaId"]),te=W,oe=J,re=n.useMedia({minWidth:"medium"}),ne=T?t.TouchScrollable:h.Fragment;return"adaptive"===J&&(oe="top"===W||"bottom"===W?"auto":"adaptive"===W?re?400:"auto":400),"adaptive"===W&&(te=re?"right":"bottom"),h.createElement(w,{open:s,onEnter:c,onEntered:d,onExited:u,enabled:x},h.createElement(r.Portal,{isActive:N},h.createElement(g,b({role:"presentation",style:{zIndex:X}},ee),h.createElement(_.default,{isActive:L}),h.createElement(o.KeyPress,{isActive:O,code:"Escape",onKeyDown:i}),h.createElement(S,{"aria-hidden":!0,onClick:function(e){z&&i&&i(e)}}),h.createElement(C,{"popup-placement":te,"aria-modal":!0,role:"dialog",style:j(te,oe,Y),"data-qaid":$},h.createElement(q,{isShowCloseButton:m,isShowPrevButton:f,onClose:i,onPrev:l,title:K},M),h.createElement(B,null,D),h.createElement(ne,null,h.createElement(P,{ref:Z,style:{padding:H}},a))))))},require("./style.production.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-scrolllock"),r=require("@prom-ui/core/KeyPress"),n=require("@prom-ui/core/Portal"),o=require("@prom-ui/core/Media"),i=require("ttag"),a=require("evokit"),c=require("react-transition-group"),l=require("@prom-ui/core/Text"),u=require("@prom-ui/core/Button"),s=require("@prom-ui/core/Icon"),d=require("@prom-ui/icons/Close"),p=require("@prom-ui/icons/ArrowBack"),v=require("react-scrolllock/dist/utils"),f=require("react-easy-swipe");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function h(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var E=m(e),_=h(e),b=m(t),w=m(f),y=function(){return y=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},y.apply(this,arguments)};function O(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var x,g,S={root:"v0oYp",backdrop:"RvRWz",popup:"elIqJ",popup_placement_top:"Llv4b",popup_placement_bottom:"DJyNc",popup_placement_right:"_4DX3c",popup_placement_left:"OwkR7",content:"_5qQ0k",header:"LIk9z",header__grid:"SShy4",header__item:"_9fUzS",header__title:"Vuilz _9fUzS",header__action:"c-A8d _9fUzS",header__actionButton:"yYG24",header__actionIcon:"La2ok",footer:"_3Ca-G",enter:"OjeZp",exit:"HiHMU",enterActive:"Ne-Vn",exitActive:"_6f7f1"},k={css:S,b:""},C=a.createBlock("div","root",[],k),P=a.createBlock("div","backdrop",[],k),q=a.createBlock("div","popup",["placement"],k),B=a.createBlock("div","content",[],k),R=function(e){var t=e.open,r=void 0!==t&&t,n=e.children,o=e.enabled,i=void 0===o||o,a=e.onEnter,l=e.onEntered,u=e.onExited;return E.default.createElement(c.CSSTransition,{in:r,timeout:i?225:0,classNames:S,unmountOnExit:!0,onEnter:a,onEntered:l,onExited:u},n)},z=function(e){var t=e.isShowPrevButton,r=e.isShowCloseButton,n=e.children,o=e.title,a=e.onClose,c=e.onPrev;return E.default.createElement("div",{className:S.header},void 0!==n?n:E.default.createElement("div",{className:S.header__grid},E.default.createElement("div",{className:S.header__action},t&&E.default.createElement(u.Button,{className:S.header__actionButton,"button-theme":"black-inherit",type:"button",onClick:c,"aria-label":i.t(x||(x=O(["Назад"],["Назад"]))),"data-qaid":"prev"},E.default.createElement(s.Icon,{"icon-as":p.ArrowBack,className:S.header__actionIcon}))),E.default.createElement("div",{className:S.header__title},"string"==typeof o?E.default.createElement(l.Text,{"text-align":"center","text-size":"h4","text-wrap":"ellipsis","text-weight":"bold","data-qaid":"title"},o):o),E.default.createElement("div",{className:S.header__action},r&&a&&E.default.createElement(u.Button,{className:S.header__actionButton,"button-theme":"black-inherit",type:"button",onClick:a,"aria-label":i.t(g||(g=O(["Закрыть"],["Закрыть"]))),"data-qaid":"close"},E.default.createElement(s.Icon,{"icon-as":d.Close,className:S.header__actionIcon})))))},j=function(e){var t=e.children;return E.default.createElement("div",{className:S.footer},t)},I=function(e,t,r){return["top","bottom"].includes(e)?{height:t,maxHeight:r}:{width:t,maxWidth:r}},A=!("undefined"==typeof window||!window.document||!window.document.createElement)&&!(!window.addEventListener&&!window.attachEvent),N=function(e){var t=e.isActive,r=void 0!==t&&t,n=e.scrollRef,o=e.children;return _.useEffect((function(){if(r&&A&&(null==n?void 0:n.current))return n.current.addEventListener("touchstart",v.preventInertiaScroll,v.listenerOptions),n.current.addEventListener("touchmove",v.allowTouchMove,v.listenerOptions),function(){r&&A&&(null==n?void 0:n.current)&&(n.current.removeEventListener("touchstart",v.preventInertiaScroll,v.listenerOptions),n.current.removeEventListener("touchmove",v.allowTouchMove,v.listenerOptions))}})),_.createElement(_.Fragment,null,o)},L=["-webkit","-moz","-ms","-o"],T=["transform","transition"],M=function(e,t){if(e)for(var r in t){var n=-1!==T.indexOf(r);if(t[r]){if(e.style.setProperty(r,t[r]),n)for(var o=0,i=L;o<i.length;o++){l=i[o];e.style.setProperty("".concat(l,"-").concat(r),t[r])}}else if(e.style.removeProperty(r),n)for(var a=0,c=L;a<c.length;a++){var l=c[a];e.style.removeProperty("".concat(l,"-").concat(r))}}},D=function(e){var t=e.isActive,r=void 0===t||t,n=e.children,o=e.onClose,i=e.placement,a=e.rootRef,c=e.contentRef,l=_.useRef(null),u=_.useRef(!1),s=_.useRef(0);if(!r)return _.createElement(_.Fragment,null,n);return _.createElement(w.default,{onSwipeMove:function(e){var t,r,n,o=e.x,d=e.y,p=(null===(t=c.current)||void 0===t?void 0:t.scrollHeight)||0,v=(null===(r=c.current)||void 0===r?void 0:r.offsetHeight)||0,f=(null===(n=c.current)||void 0===n?void 0:n.scrollTop)||0,m=p-(f+v),h=null,E=!1,_=!1,b=Math.abs(o),w=Math.abs(d);"top"===i?(h="translateY(".concat(d>=0?0:d,"px)"),E=m<=1&&d<=0&&w>b,_=w>70):"bottom"===i?(h="translateY(".concat(d<=0?0:d,"px)"),E=f<=1&&d>=0&&w>b,_=w>70):"left"===i?(h="translateX(".concat(o>=0?0:o,"px)"),E=o<=0&&b>w,_=b>70):"right"===i&&(h="translateX(".concat(o<=0?0:o,"px)"),E=o>=0&&b>w,_=b>70),null===l.current&&(l.current=!!E),l.current&&(s.current||(s.current=(new Date).getTime()),!u.current&&_&&(u.current=!0),M(a.current,{transform:h}),M(c.current,{"pointer-events":"none",overflow:"hidden"}))},onSwipeEnd:function(){if(l.current){M(a.current,{transition:"transform ".concat(225,"ms cubic-bezier(0, 0, 0.2, 1) 0ms"),transform:null}),M(c.current,{"pointer-events":null,overflow:null}),setTimeout((function(){M(a.current,{transition:null})}),225);var e=(new Date).getTime()-s.current;u.current&&e<250&&o&&o({})}s.current=0,l.current=null,u.current=!1}},n)};exports.Overlay=function(e){var t=e.children,i=e.onClose,a=e.onOpen,c=e.onPrev,l=e.onOpened,u=e.onClosed,s=e.isOpen,d=e.isShowCloseButton,p=void 0===d||d,v=e.isShowPrevButton,f=void 0!==v&&v,m=e.isCloseOnEscape,h=void 0===m||m,E=e.isCloseOnSwipe,w=void 0===E||E,O=e.isCloseOutsideClick,x=void 0===O||O,g=e.isAnimated,S=void 0===g||g,k=e.isRenderPortal,A=void 0===k||k,L=e.isScrollLock,T=void 0===L||L,M=e.isScrollLockTouch,H=void 0===M||M,U=e.header,Y=e.footer,K=e.padding,Q=void 0===K?"20px 20px 20px 20px":K,W=e.title,X=e.placement,F=void 0===X?"adaptive":X,G=e.size,J=void 0===G?"adaptive":G,V=e.maxSize,Z=void 0===V?"90%":V,$=e.zIndex,ee=void 0===$?5e3:$,te=e.contentRef,re=e.dataQaId,ne=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(e,["children","onClose","onOpen","onPrev","onOpened","onClosed","isOpen","isShowCloseButton","isShowPrevButton","isCloseOnEscape","isCloseOnSwipe","isCloseOutsideClick","isAnimated","isRenderPortal","isScrollLock","isScrollLockTouch","header","footer","padding","title","placement","size","maxSize","zIndex","contentRef","dataQaId"]),oe=_.useRef(null),ie=te||_.useRef(null),ae=o.useMedia({minWidth:"medium"}),ce=F,le=J;return"adaptive"===J&&(le="top"===F||"bottom"===F?"auto":"adaptive"===F?ae?400:"auto":400),"adaptive"===F&&(ce=ae?"right":"bottom"),_.createElement(R,{open:s,onEnter:a,onEntered:l,onExited:u,enabled:S},_.createElement(n.Portal,{isActive:A},_.createElement(D,{isActive:T&&w,rootRef:oe,contentRef:ie,placement:ce,onClose:i},_.createElement(C,y({role:"presentation",style:{zIndex:ee}},ne),_.createElement(b.default,{isActive:T}),_.createElement(r.KeyPress,{isActive:h,code:"Escape",onKeyDown:i}),_.createElement(P,{"aria-hidden":!0,onClick:function(e){x&&i&&i(e)}}),_.createElement(q,{ref:oe,"popup-placement":ce,"aria-modal":!0,role:"dialog",style:I(ce,le,Z),"data-qaid":re},_.createElement(z,{isShowCloseButton:p,isShowPrevButton:f,onClose:i,onPrev:c,title:W},U),_.createElement(j,null,Y),_.createElement(N,{isActive:H,scrollRef:ie},_.createElement(B,{ref:ie,style:{padding:Q}},t)))))))},require("./style.production.css");

package/Overlay/index.d.ts

@@ -32,10 +32,12 @@ export declare type OverlayProps = React.ComponentProps<"div"> & {
     isShowPrevButton?: boolean;
     /** Разрешает закрыть попап по клавише `Escape` */
     isCloseOnEscape?: boolean;
-    /** Рендер в конец `<body>` */
-    isRenderPortal?: boolean;
+    /** Разрешает закрыть попап по свайпу, работает если `isScrollLock={true}` */
+    isCloseOnSwipe?: boolean;
     /** Разрешает закрытие при клике на свободное пространство (затемнение документа) */
     isCloseOutsideClick?: boolean;
+    /** Рендер в конец `<body>` */
+    isRenderPortal?: boolean;
     /** Включает/отключает анимацию открытия/скрытия шторки */
     isAnimated?: boolean;
     /** Запрещает прокрутку `<body>` */
@@ -64,7 +66,7 @@ export declare type OverlayProps = React.ComponentProps<"div"> & {
     zIndex?: string | number;
     /** HTML Атрибут `data-qaid` для автотестов */
     /** `ref` для блока с контентом */
-    contentRef?: React.RefObject<HTMLElement>;
+    contentRef?: React.RefObject<HTMLDivElement>;
     dataQaId?: string;
 };
 export declare const Overlay: React.FC<OverlayProps>;

package/Overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Overlay",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -8,6 +8,7 @@
   ],
   "dependencies": {
     "evokit": "^3.2.3",
+    "react-easy-swipe": "^0.0.22",
     "react-scrolllock": "^5.0.1",
     "react-transition-group": "^4.4.2",
     "ttag": "^1.7.24"

package/Picture/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Picture",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/PortableOverlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/PortableOverlay",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Portal",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/QRCode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/QRCode",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Rating",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/SafeQuery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/SafeQuery",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Scroll",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/ScrollControls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ScrollControls",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/SideOverlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/SideOverlay",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/SimpleSlider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/SimpleSlider",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Skeleton",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Spinner",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Text",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/TextEmoji/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/TextEmoji",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Tooltip",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Tumbler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Tumbler",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prom-ui/core",
   "author": "e.marchenko",
-  "version": "0.0.90",
+  "version": "0.0.100",
   "description": "core ui blocks",
   "scripts": {
     "test": "jest",
@@ -63,5 +63,5 @@
       "optional": true
     }
   },
-  "gitHead": "81c9b332895c578aa45747c42ef7febb0bac6380"
+  "gitHead": "5959757fe7a53bacc54b5908765b53e4e67dcd65"
 }