@prom-ui/core 0.0.17 → 0.0.18

package/Body/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Body",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Box/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Box",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Button",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/ButtonPageUp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ButtonPageUp",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Checkbox",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Flex/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Flex",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Grid",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Icon",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Image",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/ImageEmoji/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ImageEmoji",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Input",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/KeyPress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/KeyPress",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Line/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Line",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Link",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/List/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/List",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/OutsideClick/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/OutsideClick",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Picture/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Picture",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/PortableOverlay/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { tSideOverlayProps } from '@prom-ui/core/SideOverlay';
+export declare type tPortableOverlayProps = {
+    bodyGrey?: boolean;
+    className?: string;
+    headerClassname?: string;
+    title?: any;
+    visible?: boolean;
+    fullScreen?: boolean;
+    onScroll?: () => void;
+};
+export declare const PortableOverlay: React.FC<tSideOverlayProps & tPortableOverlayProps>;

package/PortableOverlay/index.js

@@ -0,0 +1,114 @@
+'use strict';
+
+require('./style.css');
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var classSet = require('classnames');
+var Button = require('@prom-ui/core/Button');
+var Icon = require('@prom-ui/core/Icon');
+var SideOverlay = require('@prom-ui/core/SideOverlay');
+var Text = require('@prom-ui/core/Text');
+var Left = require('@prom-ui/icons/Left');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classSet__default = /*#__PURE__*/_interopDefaultLegacy(classSet);
+
+var css = {"header":"PortableOverlay__header___seSVI","content":"PortableOverlay__content___2dqdx","contentGrey":"PortableOverlay__contentGrey___hNlfq","item":"PortableOverlay__item___hWWcF","itemTitle":"PortableOverlay__itemTitle___Pewzr","popupFullScreen":"PortableOverlay__popupFullScreen___hiqqZ"};
+
+var PortableOverlay = function (_a) {
+  var _b;
+
+  var _c = _a.bodyGrey,
+      bodyGrey = _c === void 0 ? false : _c,
+      children = _a.children,
+      className = _a.className,
+      headerClassname = _a.headerClassname,
+      onClose = _a.onClose,
+      onScroll = _a.onScroll,
+      title = _a.title,
+      _d = _a.visible,
+      visible = _d === void 0 ? false : _d,
+      _e = _a.fullScreen,
+      fullScreen = _e === void 0 ? false : _e,
+      _f = _a.useTouchScrollable,
+      useTouchScrollable = _f === void 0 ? true : _f,
+      _g = _a.useScrollLock,
+      useScrollLock = _g === void 0 ? true : _g,
+      _h = _a.useOutsideClose,
+      useOutsideClose = _h === void 0 ? true : _h,
+      dataQaId = _a.dataQaId,
+      contentRef = _a.contentRef;
+  return React__default["default"].createElement(SideOverlay.SideOverlay, {
+    open: visible,
+    placement: 'right',
+    onClose: onClose,
+    padding: 'none',
+    useCloseButton: false,
+    useTouchScrollable: useTouchScrollable,
+    useScrollLock: useScrollLock,
+    useOutsideClose: useOutsideClose,
+    className: className,
+    size: fullScreen ? '100%' : 400,
+    classNames: {
+      Popup: fullScreen ? css.popupFullScreen : null
+    },
+    dataQaId: visible ? dataQaId : 'closed_popup',
+    contentRef: contentRef
+  }, React__default["default"].createElement("div", {
+    className: classSet__default["default"](css.header, headerClassname)
+  }, React__default["default"].createElement("div", {
+    className: css.item
+  }, onClose && React__default["default"].createElement(Button.Button, {
+    "button-padding": 'xxs',
+    "button-theme": 'white-inherit',
+    onClick: onClose,
+    "data-qaid": 'back'
+  }, React__default["default"].createElement(Icon.Icon, {
+    "icon-as": Left.Left,
+    style: {
+      width: 24,
+      height: 24
+    }
+  }))), React__default["default"].createElement("div", {
+    className: css.itemTitle,
+    "data-qaid": 'popup_title'
+  }, React__default["default"].createElement(Text.Text, {
+    "text-color": 'white',
+    "text-size": 'h5',
+    "text-weight": 'bold',
+    "text-align": 'center',
+    "data-qaid": 'title'
+  }, typeof title === 'function' ? title() : title)), React__default["default"].createElement("div", {
+    className: css.item
+  }, null)), React__default["default"].createElement("div", {
+    className: classSet__default["default"](css.content, (_b = {}, _b[css.contentGrey] = bodyGrey, _b)),
+    onScroll: onScroll
+  }, children));
+};
+PortableOverlay.propTypes = {
+  visible: PropTypes__default["default"].bool,
+  title: PropTypes__default["default"].any,
+  children: PropTypes__default["default"].any,
+  onClose: PropTypes__default["default"].func,
+  onScroll: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string,
+  dataQaId: PropTypes__default["default"].string,
+
+  /** @ignore */
+  fullScreen: PropTypes__default["default"].bool,
+  useTouchScrollable: PropTypes__default["default"].bool,
+  useScrollLock: PropTypes__default["default"].bool,
+  useOutsideClose: PropTypes__default["default"].bool,
+  headerClassname: PropTypes__default["default"].string,
+
+  /** Устанавливает серый цвет фона, по умолчанию белый */
+  bodyGrey: PropTypes__default["default"].bool
+};
+
+exports.PortableOverlay = PortableOverlay;

package/PortableOverlay/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@prom-ui/core/PortableOverlay",
+  "version": "0.0.18",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "@prom-ui/icons": "^0.0.5",
+    "classnames": "^2.3.1"
+  }
+}

package/PortableOverlay/style.css

@@ -0,0 +1,44 @@
+.PortableOverlay__header___seSVI {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    height: 50px;
+    background: var(--violet-500);
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 var(--pds-spacing-s);
+}
+
+.PortableOverlay__content___2dqdx {
+    height: calc(100% - 50px);
+}
+
+.PortableOverlay__content___2dqdx::after {
+    clear: both;
+}
+
+.PortableOverlay__content___2dqdx::after,
+.PortableOverlay__content___2dqdx::before {
+    content: "";
+    display: table;
+}
+
+.PortableOverlay__contentGrey___hNlfq {
+    background: var(--black-100);
+}
+
+.PortableOverlay__item___hWWcF {
+    width: 40px;
+}
+
+.PortableOverlay__itemTitle___Pewzr {
+    flex: 1;
+    min-width: 1px;
+    overflow: hidden;
+}
+
+.PortableOverlay__popupFullScreen___hiqqZ {
+    max-width: 100%;
+}

package/Portal/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-declare type PropsPortal = {
+declare type tPortalProps = {
     id?: string;
     isActive?: boolean;
     children?: any;
 };
-export declare const Portal: React.FC<PropsPortal>;
+export declare const Portal: React.FC<tPortalProps>;
 export {};

package/Portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Portal",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Rating",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Scroll",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/ScrollControls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ScrollControls",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/SideOverlay/blocks.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const Root: any;
+export declare const Backdrop: any;
+export declare const Popup: any;
+export declare const Content: any;
+export declare const Close: any;
+declare type tAnimateProps = {
+    enabled?: boolean;
+    open?: boolean;
+    onEnter?: () => void;
+    children?: React.ReactNode;
+};
+export declare const Animate: React.FC<tAnimateProps>;
+export {};

package/SideOverlay/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+declare type tClassNames = {
+    Root?: string;
+    Backdrop?: string;
+    Popup?: string;
+    Content?: string;
+    Close?: string;
+};
+export declare type tSideOverlayProps = {
+    animationEnabled?: boolean;
+    open?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    classNames?: tClassNames;
+    onOpen?: () => void;
+    onClose?: () => void;
+    padding?: string | number;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    size?: string | number;
+    useCloseButton?: boolean;
+    useEscapeClose?: boolean;
+    useOutsideClose?: boolean;
+    usePortal?: boolean;
+    useScrollLock?: boolean;
+    useTouchScrollable?: boolean;
+    zIndex?: string | number;
+    dataQaId?: string;
+    contentRef?: React.RefObject<HTMLElement>;
+};
+export declare const SideOverlay: React.FC<tSideOverlayProps>;
+export {};

package/SideOverlay/index.js

@@ -0,0 +1,254 @@
+'use strict';
+
+require('./style.css');
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ttag = require('ttag');
+var PropTypes = require('prop-types');
+var ScrollLock = require('react-scrolllock');
+var Portal = require('@prom-ui/core/Portal');
+var KeyPress = require('@prom-ui/core/KeyPress');
+var evokit = require('evokit');
+var reactTransitionGroup = require('react-transition-group');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var ScrollLock__default = /*#__PURE__*/_interopDefaultLegacy(ScrollLock);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+var css = {"root":"SideOverlay__root___zoSc7","backdrop":"SideOverlay__backdrop___v5Neh","popup":"SideOverlay__popup___LsB4w","content":"SideOverlay__content___D9ezA","close":"SideOverlay__close___aiN5k","popup_placement_top":"SideOverlay__popup_placement_top___BSFf7","popup_placement_bottom":"SideOverlay__popup_placement_bottom___k1gGY","popup_placement_right":"SideOverlay__popup_placement_right___w9HUr","popup_placement_left":"SideOverlay__popup_placement_left___DWBxa","enter":"SideOverlay__enter___ukL-B","exit":"SideOverlay__exit___QE5yq","enterActive":"SideOverlay__enterActive___VPRAq","exitActive":"SideOverlay__exitActive___FhiSX"};
+
+var BLOCKS_PRESET = {
+  css: css,
+  b: ''
+};
+var Root = evokit.createBlock('div', 'root', [], BLOCKS_PRESET);
+var Backdrop = evokit.createBlock('div', 'backdrop', [], BLOCKS_PRESET);
+var Popup = evokit.createBlock('div', 'popup', ['placement'], BLOCKS_PRESET);
+var Content = evokit.createBlock('div', 'content', [], BLOCKS_PRESET);
+var Close = evokit.createBlock('button', 'close', [], BLOCKS_PRESET);
+var Animate = function (_a) {
+  var _b = _a.open,
+      open = _b === void 0 ? false : _b,
+      children = _a.children,
+      _c = _a.enabled,
+      enabled = _c === void 0 ? true : _c,
+      onEnter = _a.onEnter;
+  return React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+    in: open,
+    timeout: enabled ? 225 : 0,
+    classNames: css,
+    unmountOnExit: true,
+    onEnter: onEnter
+  }, children);
+};
+
+var getPopupStyle = function (placement, size) {
+  if (['top', 'bottom'].includes(placement)) {
+    return {
+      height: size
+    };
+  }
+
+  return {
+    width: size
+  };
+};
+
+var SideOverlay = function (_a) {
+  var children = _a.children,
+      _b = _a.classNames,
+      classNames = _b === void 0 ? {} : _b,
+      onClose = _a.onClose,
+      onOpen = _a.onOpen,
+      _c = _a.open,
+      open = _c === void 0 ? false : _c,
+      _d = _a.padding,
+      padding = _d === void 0 ? '45px 30px 30px 30px' : _d,
+      _e = _a.placement,
+      placement = _e === void 0 ? 'left' : _e,
+      _f = _a.size,
+      size = _f === void 0 ? 400 : _f,
+      _g = _a.useCloseButton,
+      useCloseButton = _g === void 0 ? true : _g,
+      _h = _a.useEscapeClose,
+      useEscapeClose = _h === void 0 ? true : _h,
+      _j = _a.useOutsideClose,
+      useOutsideClose = _j === void 0 ? true : _j,
+      _k = _a.usePortal,
+      usePortal = _k === void 0 ? true : _k,
+      _l = _a.useScrollLock,
+      useScrollLock = _l === void 0 ? true : _l,
+      _m = _a.useTouchScrollable,
+      useTouchScrollable = _m === void 0 ? true : _m,
+      _o = _a.zIndex,
+      zIndex = _o === void 0 ? 5000 : _o,
+      dataQaId = _a.dataQaId,
+      contentRef = _a.contentRef,
+      _p = _a.animationEnabled,
+      animationEnabled = _p === void 0 ? true : _p,
+      props = __rest(_a, ["children", "classNames", "onClose", "onOpen", "open", "padding", "placement", "size", "useCloseButton", "useEscapeClose", "useOutsideClose", "usePortal", "useScrollLock", "useTouchScrollable", "zIndex", "dataQaId", "contentRef", "animationEnabled"]);
+
+  return React__default["default"].createElement(Animate, {
+    open: open,
+    onEnter: function () {
+      onOpen && onOpen();
+    },
+    enabled: animationEnabled
+  }, React__default["default"].createElement(Portal.Portal, {
+    isActive: usePortal
+  }, React__default["default"].createElement(Root, __assign({
+    role: 'presentation',
+    style: {
+      zIndex: zIndex
+    },
+    className: classNames.Root
+  }, props), React__default["default"].createElement(ScrollLock__default["default"], {
+    isActive: useScrollLock
+  }), React__default["default"].createElement(KeyPress.KeyPress, {
+    isActive: useEscapeClose,
+    code: 'Escape',
+    onKeyDown: onClose
+  }), React__default["default"].createElement(Backdrop, {
+    className: classNames.Backdrop,
+    "aria-hidden": true,
+    onClick: function () {
+      if (useOutsideClose && onClose) {
+        onClose();
+      }
+    }
+  }), React__default["default"].createElement(Popup, {
+    "popup-placement": placement,
+    className: classNames.Popup,
+    style: getPopupStyle(placement, size),
+    "data-qaid": dataQaId
+  }, useCloseButton && onClose && React__default["default"].createElement(Close, {
+    className: classNames.Close,
+    type: 'button',
+    onClick: onClose,
+    "aria-label": ttag.t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"], ["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))),
+    "data-qaid": 'close'
+  }), useTouchScrollable ? React__default["default"].createElement(ScrollLock.TouchScrollable, null, React__default["default"].createElement(Content, {
+    ref: contentRef,
+    className: classNames.Content,
+    style: {
+      padding: padding
+    }
+  }, children)) : React__default["default"].createElement(Content, {
+    ref: contentRef,
+    className: classNames.Content,
+    style: {
+      padding: padding
+    }
+  }, children)))));
+};
+SideOverlay.propTypes = {
+  /** React children */
+  // children: PropTypes.node,
+
+  /** Кастомные классы */
+  // classNames: PropTypes.shape({
+  //     Root: PropTypes.string,
+  //     Backdrop: PropTypes.string,
+  //     Popup: PropTypes.string,
+  //     Content: PropTypes.string,
+  //     Close: PropTypes.string,
+  // }),
+
+  /** Handle для закрытия попапа */
+  onClose: PropTypes__default["default"].func,
+
+  /** Срабатывает когда попап открыт */
+  onOpen: PropTypes__default["default"].func,
+
+  /** Состояние, открыто или нет */
+  open: PropTypes__default["default"].bool,
+
+  /** Внутренние отступы */
+  padding: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /** Расположение */
+  placement: PropTypes__default["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+  /** Ширина или высота взависимости от placement */
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /** Отображение кнопки закрытия (крестик) */
+  useCloseButton: PropTypes__default["default"].bool,
+
+  /** Разрешает закрыть попап по клавише `Escape` */
+  useEscapeClose: PropTypes__default["default"].bool,
+
+  /** Разрешает закрытие при клике на свободное пространство (затемнение документа) */
+  useOutsideClose: PropTypes__default["default"].bool,
+
+  /** Рендер в конец `<body>` */
+  usePortal: PropTypes__default["default"].bool,
+
+  /** Запрещает прокрутку `<body>` */
+  useScrollLock: PropTypes__default["default"].bool,
+
+  /** Запрещает прокрутку `<body>` для ios */
+  useTouchScrollable: PropTypes__default["default"].bool,
+
+  /** Размещением по z-оси */
+  zIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /** HTML Атрибут `data-qaid` для автотестов */
+  dataQaId: PropTypes__default["default"].string,
+
+  /** `ref` для блока с контентом */
+  // contentRef: PropTypes.shape({ current: PropTypes.any }),
+
+  /** Включает/отключает анимацию открытия/скрытия шторки */
+  animationEnabled: PropTypes__default["default"].bool
+};
+var templateObject_1;
+
+exports.SideOverlay = SideOverlay;

package/SideOverlay/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@prom-ui/core/SideOverlay",
+  "version": "0.0.18",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "evokit": "^3.2.3",
+    "react-scrolllock": "^5.0.1",
+    "react-transition-group": "^4.4.2",
+    "ttag": "^1.7.24"
+  }
+}

package/SideOverlay/style.css

@@ -0,0 +1,208 @@
+.SideOverlay__root___zoSc7 {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.SideOverlay__backdrop___v5Neh {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    z-index: -1;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    opacity: .5;
+    background-color: var(--black-400);
+    -webkit-tap-highlight-color: transparent;
+    will-change: opacity;
+}
+
+.SideOverlay__popup___LsB4w {
+    z-index: 1200;
+    position: fixed;
+    background: var(--white);
+    box-sizing: border-box;
+}
+
+.SideOverlay__content___D9ezA {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.SideOverlay__close___aiN5k {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 30px;
+    line-height: 24px;
+    color: inherit;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background: transparent;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    outline: none;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    font-weight: normal;
+    width: 24px;
+    height: 24px;
+    margin: 10px
+}
+
+.SideOverlay__close___aiN5k::after {
+        content: "\00D7";
+    }
+
+.SideOverlay__popup_placement_top___BSFf7,
+.SideOverlay__popup_placement_bottom___k1gGY,
+.SideOverlay__popup_placement_right___w9HUr,
+.SideOverlay__popup_placement_left___DWBxa {
+    transform: none;
+    will-change: transform;
+}
+
+.SideOverlay__popup_placement_top___BSFf7,
+.SideOverlay__popup_placement_bottom___k1gGY {
+    right: 0;
+    left: 0;
+    max-height: 90%;
+}
+
+.SideOverlay__popup_placement_right___w9HUr,
+.SideOverlay__popup_placement_left___DWBxa {
+    top: 0;
+    bottom: 0;
+    max-width: 90%;
+}
+
+.SideOverlay__popup_placement_top___BSFf7 {
+    top: 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+.SideOverlay__popup_placement_bottom___k1gGY {
+    bottom: 0;
+    box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+.SideOverlay__popup_placement_right___w9HUr {
+    right: 0;
+    box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+.SideOverlay__popup_placement_left___DWBxa {
+    left: 0;
+    box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* animation */
+
+.SideOverlay__enter___ukL-B,
+.SideOverlay__exit___QE5yq {
+    pointer-events: auto;
+}
+
+.SideOverlay__enterActive___VPRAq,
+.SideOverlay__exitActive___FhiSX {
+    pointer-events: none
+}
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__backdrop___v5Neh, .SideOverlay__exitActive___FhiSX .SideOverlay__backdrop___v5Neh {
+        transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_right___w9HUr,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_right___w9HUr,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_bottom___k1gGY,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_bottom___k1gGY,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_left___DWBxa,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_left___DWBxa {
+        transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__backdrop___v5Neh {
+        opacity: 0;
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_top___BSFf7 {
+        transform: translateY(-100%);
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(100%);
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(100%);
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_left___DWBxa {
+        transform: translateX(-100%);
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__backdrop___v5Neh {
+        opacity: .5;
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(0);
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_left___DWBxa,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(0);
+    }
+
+.SideOverlay__exit___QE5yq .SideOverlay__backdrop___v5Neh {
+        opacity: .5;
+    }
+
+.SideOverlay__exit___QE5yq .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__exit___QE5yq .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(0);
+    }
+
+.SideOverlay__exit___QE5yq .SideOverlay__popup_placement_left___DWBxa,
+    .SideOverlay__exit___QE5yq .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(0);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__backdrop___v5Neh {
+        opacity: 0;
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_top___BSFf7 {
+        transform: translateY(-100%);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(100%);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(100%);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_left___DWBxa {
+        transform: translateX(-100%);
+    }

package/SideOverlay/utils.d.ts

@@ -0,0 +1,8 @@
+declare type tPlacement = 'top' | 'right' | 'bottom' | 'left';
+declare type tSize = string | number;
+declare type tGetPopupStyle = {
+    height?: tSize;
+    width?: tSize;
+};
+export declare const getPopupStyle: (placement: tPlacement, size: tSize) => tGetPopupStyle;
+export {};

package/Skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Skeleton",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Spinner",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Text",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/TextEmoji/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/TextEmoji",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Tumbler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Tumbler",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prom-ui/core",
   "author": "e.marchenko",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "core ui blocks",
   "scripts": {
     "prebuild": "node ./preBuild.js",
@@ -42,6 +42,7 @@
     "evokit-list": "^3.3.0",
     "evokit-picture": "^3.2.0",
     "evokit-text": "^3.2.0",
+    "react-scrolllock": "^5.0.1",
     "react-transition-group": "^4.4.2",
     "ts-debounce": "^4.0.0",
     "ttag": "^1.7.24"
@@ -51,5 +52,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "e44542d35e4275d2ad29abfe9c870a8a7e95da29"
+  "gitHead": "08fdb9774272869a485dc2c1c8dc7964d8e6c407"
 }