@megafon/ui-core 3.5.3 → 3.8.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.8.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.7.0...@megafon/ui-core@3.8.0) (2022-05-17)
+
+
+### Features
+
+* **notification:** add props classes to notification component ([608a424](https://github.com/MegafonWebLab/megafon-ui/commit/608a4246eb99af354fb7cf8ab98c2ed513d87b66))
+
+
+
+
+
+# [3.7.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.6.0...@megafon/ui-core@3.7.0) (2022-05-05)
+
+
+### Bug Fixes
+
+* **logo:** fix horizontal logo svg ([76655eb](https://github.com/MegafonWebLab/megafon-ui/commit/76655ebb82650cc2617750af0b2b2726d3ebcbf3))
+
+
+### Features
+
+* **button:** added extra small size ([a26da46](https://github.com/MegafonWebLab/megafon-ui/commit/a26da4601de7e7c81c40eabf9a87ccdbf18cb790))
+
+
+
+
+
+# [3.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3...@megafon/ui-core@3.6.0) (2022-04-25)
+
+
+### Bug Fixes
+
+* **calendar:** fix go to start day after user choice ([8bbce10](https://github.com/MegafonWebLab/megafon-ui/commit/8bbce102d204f7ea7706158f3e6540c86ed3aada))
+
+
+### Features
+
+* **tooltip:** added prop isPortal for tooltip ([e6f6d17](https://github.com/MegafonWebLab/megafon-ui/commit/e6f6d1749cd99f065c50bac4eb6a9b3592653f8d))
+
+
+
+
+
 ## [3.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3) (2022-04-18)
 
 

package/dist/es/components/Button/Button.css

@@ -21,6 +21,10 @@
           appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+.mfui-button_size-all_extra-small .mfui-button__inner {
+  min-width: 26px;
+  height: 26px;
+}
 .mfui-button_size-all_small .mfui-button__inner {
   min-width: 32px;
   height: 32px;
@@ -33,6 +37,10 @@
   min-width: 60px;
   height: 60px;
 }
+.mfui-button_size-all_extra-small .mfui-button__icon {
+  width: 18px;
+  height: 18px;
+}
 .mfui-button_size-all_small .mfui-button__icon {
   width: 24px;
   height: 24px;
@@ -46,6 +54,10 @@
   height: 40px;
 }
 @media screen and (min-width: 1280px) {
+  .mfui-button_size-wide_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-wide_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -58,6 +70,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-wide_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-wide_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -72,6 +88,10 @@
   }
 }
 @media screen and (min-width: 1024px) {
+  .mfui-button_size-desktop_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-desktop_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -84,6 +104,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-desktop_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-desktop_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -98,6 +122,10 @@
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-button_size-tablet_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-tablet_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -110,6 +138,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-tablet_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-tablet_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -124,6 +156,10 @@
   }
 }
 @media screen and (max-width: 767px) {
+  .mfui-button_size-mobile_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-mobile_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -136,6 +172,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-mobile_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-mobile_small .mfui-button__icon {
     width: 24px;
     height: 24px;

package/dist/es/components/Button/Button.d.ts

@@ -13,6 +13,7 @@ export declare const ButtonThemes: {
 };
 declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {
+    readonly EXTRA_SMALL: "extra-small";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";

package/dist/es/components/Button/Button.js

@@ -29,6 +29,7 @@ export var ButtonThemes = {
   BLACK: 'black'
 };
 export var ButtonSizes = {
+  EXTRA_SMALL: 'extra-small',
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
@@ -42,7 +43,7 @@ var Content;
 })(Content || (Content = {}));
 
 var getLoaderSize = function getLoaderSize(size) {
-  return size === ButtonSizes.SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
+  return size === ButtonSizes.SMALL || size === ButtonSizes.EXTRA_SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
 };
 
 var cn = cnCreate('mfui-button');

package/dist/es/components/Calendar/Calendar.js

@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import differenceInDays from 'date-fns/differenceInDays';
@@ -53,6 +53,17 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
+/* List of cases to check on component change:
+
+- Should correctly choose value and trigger callbacks with correct arguments on dates choose.
+- Should set 1 day period if start and end date is equal
+- Should correctly increase period if choose earlier start date
+- Should correctly change start date of selected period if chosen date in period closer to current start date
+- Should correctly change end date of selected period if chosen date in period closer to current end date
+- Should correctly highlights period if start date chosen and hover on possible end date
+
+*/
+
 
 var cn = cnCreate('mfui-calendar');
 
@@ -91,6 +102,7 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
+  var isUserChoice = useRef(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -111,10 +123,13 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
+  useEffect(function () {
+    isUserChoice.current = false;
+  }, [startDate]);
   useEffect(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -179,6 +194,7 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
+    isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 

package/dist/es/components/Calendar/components/Month/Month.js

@@ -10,9 +10,9 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 6v8l-5-4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 6v8l-5-4z"
+    clipRule: "evenodd"
   }));
 };
 
@@ -20,9 +20,9 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 14V6l5 4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 14V6l5 4z"
+    clipRule: "evenodd"
   }));
 };
 

package/dist/es/components/Logo/Logo.js

@@ -8,14 +8,30 @@ import "./Logo.css";
 
 var greenHorizontalImg = function greenHorizontalImg(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 304 55"
-  }, props), /*#__PURE__*/React.createElement("g", {
+    viewBox: "0 0 623 112",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M608.292 31.117V51.95h-27.978V31.117h-13.769v55.067h13.769V63.951h27.978v22.233h13.842V31.117h-13.842z",
     fill: "#00B956"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M30.3.7v27.8c0 1.3-1 2.2-2.2 2.2h-3.3c-.2 0-.3.2-.3.3v23.3c.8 0 1.6.2 2.5.2 14.9 0 27-12.1 27-27C54 13.8 43.7 2.3 30.3.7zm-.6 41.6c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3.2 1.8-1.4 3.3-3.3 3.3zm7.9 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.3 3.3-3.3 3.3zm8 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.4 3.3-3.3 3.3z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M27 .6C12.1.6 0 12.7 0 27.6c0 13.1 9.1 23.8 21.3 26.3V29.6c0-1.1 1-2 2-2.2h3.3c.2 0 .3-.2.3-.3L27 .6zm-5.2 22.2c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.5 3.3-3.3 3.3zm275.5-7.5v10.2h-13.6V15.3h-6.9v27h6.9V31.4h13.6v10.9h6.7v-27zm-112.4 3.1c-1.1-2.4-3.3-3.7-5.5-3.7s-4.5 1.3-5.5 3.7l-10.9 24h7.2l2.4-5.7h14l2.4 5.7h7.2l-11.3-24zm-10.4 12.9l4.1-9.9c.2-.3.3-.3.5-.3s.5 0 .5.3l4.1 9.9h-9.2zm-70-20.8c-3.2 0-5.2 1.7-6.7 5.1l-8.7 20.3-8.8-20.4c-1.4-3.3-3.5-5.1-6.7-5.1-3 0-6 2-6 6.7v25.1h6.7V18l8.9 20.1c1.1 2.9 3.2 4.6 5.9 4.6 2.9 0 4.8-1.7 5.9-4.6l8.9-20.1v24.5h6.7V17.4c-.1-4.7-3.1-6.9-6.1-6.9zm17.9 26.1c-.3 0-.7-.3-.7-.7v-4.8h16.8v-5.5h-16.8v-4.1c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4V38c0 2 1.7 4 4 4h20v-5.7h-16.7v.3zm28 5.7V21.7c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4v22.9l6.6.1zm122-13.4c0-9.4-4.1-13.8-14.3-13.8h-2.4c-10.2 0-14.3 4.5-14.3 13.8 0 9.2 4.1 13.8 14.3 13.8h2.2c10.4-.2 14.5-4.6 14.5-13.8zM257.9 37h-2.2c-5.5 0-7.8-2.5-7.8-8.1 0-5.4 1.9-8.1 7.8-8.1h2.2c5.7 0 7.8 2.7 7.8 8.1 0 5.5-2.1 8.1-7.8 8.1zm-35.2-25.9h-13.4c-10 0-14 5.1-14 13.8 0 1.4.2 2.7.3 3.8 1.1 6.2 4.8 10 14.1 10h3v3.5h6.7v-3.5h2.9c9.4 0 13.1-3.8 14.1-10 .2-1.1.3-2.4.3-3.8-.1-8.7-4.2-13.8-14-13.8zm-10.2 22h-3c-4.6 0-6.2-1.7-7.2-4.5-.3-1-.3-2.4-.3-3.8 0-5.7 2.7-8.1 6.5-8.1h4.1v16.4h-.1zm17.2-4.2c-1 2.7-2.7 4.5-7.2 4.5h-3V16.9h4.1c3.8 0 6.5 2.4 6.5 8.1-.1 1.5-.1 2.7-.4 3.9z"
-  })));
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M367.31 29.865c4.417 0 9.056 2.43 11.338 7.436l22.53 48.883h-14.652l-4.933-11.632h-28.567l-4.933 11.632h-14.652l22.53-48.883c2.282-5.007 6.921-7.436 11.339-7.436zm-1.105 13.693l-8.467 19.951h19.143l-8.467-19.95c-.221-.663-.736-.81-1.104-.81-.369 0-.81.22-1.105.81z",
+    fill: "#00B956"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M214.533 21.178c-6.48 0-10.603 3.46-13.622 10.38l-17.965 41.374-17.965-41.374c-3.018-6.92-7.142-10.38-13.621-10.38-6.037 0-12.296 4.343-12.296 13.693v51.313h13.769v-49.84l18.112 41.08c2.43 5.742 6.332 9.349 12.001 9.349 5.67 0 9.572-3.607 12.002-9.35l18.112-41.08v49.841h13.768v-51.24c0-9.423-6.258-13.766-12.295-13.766zm36.445 53.227a1.163 1.163 0 01-1.178-1.178v-9.644h34.384V52.319H249.8v-8.393c0-.662.515-1.178 1.178-1.178h34.016V31.117h-40.79c-4.785 0-8.172 3.975-8.172 8.171v38.577c0 4.196 3.46 8.172 8.172 8.172h40.79V74.405h-34.016zm57.429 11.779V44c0-.663.516-1.178 1.179-1.178h34.015V31.19h-40.789c-4.786 0-8.173 3.976-8.173 8.172v46.822h13.768z",
+    fill: "#00B956"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M528.259 30.307c20.837 0 29.157 8.981 29.157 28.27 0 18.994-8.468 28.122-29.304 28.122h-4.565c-20.837 0-29.304-9.128-29.304-28.122 0-19.289 8.246-28.27 29.157-28.27h4.859zm-4.638 44.981h4.417c11.412 0 15.977-5.153 15.977-16.711v-.074c0-11.19-4.27-16.712-15.977-16.712h-4.417c-12.075 0-15.978 5.522-15.978 16.712v.074c0 11.558 4.492 16.711 15.978 16.711zm-95.127-52.785h27.316c20.321 0 28.493 10.307 28.567 28.27 0 2.797-.221 5.374-.589 7.804-2.135 12.736-9.645 20.54-28.715 20.54h-5.963v7.067h-13.769v-7.067h-6.037c-19.07 0-26.58-7.804-28.715-20.54-.442-2.43-.589-5.006-.589-7.804 0-17.963 8.099-28.27 28.494-28.27zm6.774 44.982h-6.332c-9.351 0-12.664-3.46-14.726-8.908-.81-2.135-.81-4.786-.81-7.804 0-11.706 5.449-16.712 13.4-16.712h8.468v33.424zm34.825-8.908c-2.061 5.448-5.448 8.908-14.725 8.908h-6.332V34.06h8.467c7.952 0 13.4 4.933 13.4 16.712 0 3.018 0 5.669-.81 7.804zM62.86 58.135V1.227c27.242 3.313 48.373 26.577 48.447 54.7 0 30.478-24.74 55.214-55.22 55.214a58.32 58.32 0 01-5.081-.221V63.215a.58.58 0 01.589-.59h6.774c2.43 0 4.49-1.987 4.49-4.49zM61.682 86.11a6.913 6.913 0 01-6.921-6.92 6.913 6.913 0 016.92-6.92 6.913 6.913 0 016.922 6.92 6.913 6.913 0 01-6.921 6.92zm9.277-6.92a6.913 6.913 0 006.92 6.92 6.913 6.913 0 006.922-6.92 6.913 6.913 0 00-6.921-6.92 6.913 6.913 0 00-6.921 6.92zm16.198 0a6.913 6.913 0 006.92 6.92A6.913 6.913 0 00101 79.19a6.913 6.913 0 00-6.921-6.92 6.913 6.913 0 00-6.921 6.92z",
+    fill: "#00B956"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M.792 56C.792 25.521 25.531.785 56.012.785h.148v54.626a.58.58 0 01-.59.589h-6.92c-2.356.074-4.27 2.061-4.344 4.417v49.546C19.42 104.589.792 82.503.792 56zm37.697-16.638a6.913 6.913 0 006.921 6.92 6.913 6.913 0 006.921-6.92 6.913 6.913 0 00-6.92-6.92 6.913 6.913 0 00-6.922 6.92z",
+    fill: "#00B956"
+  }));
 };
 
 var greenVerticalImg = function greenVerticalImg(props) {

package/dist/es/components/Notification/Notification.d.ts

@@ -17,6 +17,12 @@ declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        content?: string;
+    };
     /** Тип отображения */
     type?: NotificationType;
     /** Уровень тени */

package/dist/es/components/Notification/Notification.js

@@ -77,6 +77,11 @@ var cn = cnCreate('mfui-notification');
 
 var Notification = function Notification(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClass = _ref$classes.root,
+      containerClass = _ref$classes.container,
+      contentClass = _ref$classes.content,
       children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'info' : _ref$type,
@@ -143,13 +148,13 @@ var Notification = function Notification(_ref) {
     className: cn({
       type: type,
       colored: isColored
-    }, className)
+    }, [className, rootClass])
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('container')
+    className: cn('container', [containerClass])
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
-    className: cn('content')
+    className: cn('content', [contentClass])
   }, title && /*#__PURE__*/React.createElement(Header, {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
@@ -174,6 +179,11 @@ var Notification = function Notification(_ref) {
 Notification.propTypes = {
   type: PropTypes.oneOf(Object.values(NotificationTypes)),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    container: PropTypes.string,
+    content: PropTypes.string
+  }),
   shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
   isColored: PropTypes.bool,
   hasCloseButton: PropTypes.bool,

package/dist/es/components/Tooltip/Tooltip.d.ts

@@ -37,6 +37,8 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
+    /** Отрендерить компонент в корневой элементе страницы body */
+    isPortal?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/es/components/Tooltip/Tooltip.js

@@ -6,6 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
@@ -45,6 +46,8 @@ var Tooltip = function Tooltip(_ref) {
       targetElement = _ref.targetElement,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$isPortal = _ref.isPortal,
+      isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -58,6 +61,7 @@ var Tooltip = function Tooltip(_ref) {
   var currentTrigger = triggerElement.current;
   var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
   var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
+  var portalElem = React.useRef(null);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -215,7 +219,16 @@ var Tooltip = function Tooltip(_ref) {
 
     return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  useEffect(function () {
+    return function () {
+      if (portalElem.current) {
+        document.body.removeChild(portalElem.current);
+      }
+
+      portalElem.current = null;
+    };
+  }, []);
+  var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -238,6 +251,18 @@ var Tooltip = function Tooltip(_ref) {
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
   }));
+  /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
+
+  if (isPortal && !portalElem.current && typeof window !== 'undefined') {
+    portalElem.current = document.createElement('div');
+    document.body.appendChild(portalElem.current);
+  }
+
+  if (isPortal && portalElem.current) {
+    return portalElem.current ? ReactDOM.createPortal(template, portalElem.current) : null;
+  }
+
+  return template;
 };
 
 Tooltip.propTypes = {
@@ -268,6 +293,7 @@ Tooltip.propTypes = {
     current: PropTypes.elementType
   }), PropTypes.any])]),
   isOpened: PropTypes.bool,
+  isPortal: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

package/dist/lib/components/Button/Button.css

@@ -21,6 +21,10 @@
           appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+.mfui-button_size-all_extra-small .mfui-button__inner {
+  min-width: 26px;
+  height: 26px;
+}
 .mfui-button_size-all_small .mfui-button__inner {
   min-width: 32px;
   height: 32px;
@@ -33,6 +37,10 @@
   min-width: 60px;
   height: 60px;
 }
+.mfui-button_size-all_extra-small .mfui-button__icon {
+  width: 18px;
+  height: 18px;
+}
 .mfui-button_size-all_small .mfui-button__icon {
   width: 24px;
   height: 24px;
@@ -46,6 +54,10 @@
   height: 40px;
 }
 @media screen and (min-width: 1280px) {
+  .mfui-button_size-wide_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-wide_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -58,6 +70,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-wide_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-wide_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -72,6 +88,10 @@
   }
 }
 @media screen and (min-width: 1024px) {
+  .mfui-button_size-desktop_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-desktop_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -84,6 +104,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-desktop_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-desktop_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -98,6 +122,10 @@
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-button_size-tablet_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-tablet_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -110,6 +138,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-tablet_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-tablet_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -124,6 +156,10 @@
   }
 }
 @media screen and (max-width: 767px) {
+  .mfui-button_size-mobile_extra-small .mfui-button__inner {
+    min-width: 26px;
+    height: 26px;
+  }
   .mfui-button_size-mobile_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -136,6 +172,10 @@
     min-width: 60px;
     height: 60px;
   }
+  .mfui-button_size-mobile_extra-small .mfui-button__icon {
+    width: 18px;
+    height: 18px;
+  }
   .mfui-button_size-mobile_small .mfui-button__icon {
     width: 24px;
     height: 24px;

package/dist/lib/components/Button/Button.d.ts

@@ -13,6 +13,7 @@ export declare const ButtonThemes: {
 };
 declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {
+    readonly EXTRA_SMALL: "extra-small";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";

package/dist/lib/components/Button/Button.js

@@ -54,6 +54,7 @@ var ButtonThemes = {
 };
 exports.ButtonThemes = ButtonThemes;
 var ButtonSizes = {
+  EXTRA_SMALL: 'extra-small',
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
@@ -68,7 +69,7 @@ var Content;
 })(Content || (Content = {}));
 
 var getLoaderSize = function getLoaderSize(size) {
-  return size === ButtonSizes.SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
+  return size === ButtonSizes.SMALL || size === ButtonSizes.EXTRA_SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
 };
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-button');

package/dist/lib/components/Calendar/Calendar.js

@@ -86,6 +86,17 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
+/* List of cases to check on component change:
+
+- Should correctly choose value and trigger callbacks with correct arguments on dates choose.
+- Should set 1 day period if start and end date is equal
+- Should correctly increase period if choose earlier start date
+- Should correctly change start date of selected period if chosen date in period closer to current start date
+- Should correctly change end date of selected period if chosen date in period closer to current end date
+- Should correctly highlights period if start date chosen and hover on possible end date
+
+*/
+
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-calendar');
 
@@ -124,6 +135,7 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
+  var isUserChoice = (0, _react.useRef)(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -144,10 +156,13 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
+  (0, _react.useEffect)(function () {
+    isUserChoice.current = false;
+  }, [startDate]);
   (0, _react.useEffect)(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -212,6 +227,7 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
+    isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 

package/dist/lib/components/Calendar/components/Month/Month.js

@@ -23,9 +23,9 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M12 6v8l-5-4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 6v8l-5-4z"
+    clipRule: "evenodd"
   }));
 };
 
@@ -33,9 +33,9 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M8 14V6l5 4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 14V6l5 4z"
+    clipRule: "evenodd"
   }));
 };
 

package/dist/lib/components/Logo/Logo.js

@@ -27,14 +27,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var greenHorizontalImg = function greenHorizontalImg(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
-    viewBox: "0 0 304 55"
-  }, props), /*#__PURE__*/React.createElement("g", {
+    viewBox: "0 0 623 112",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M608.292 31.117V51.95h-27.978V31.117h-13.769v55.067h13.769V63.951h27.978v22.233h13.842V31.117h-13.842z",
     fill: "#00B956"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M30.3.7v27.8c0 1.3-1 2.2-2.2 2.2h-3.3c-.2 0-.3.2-.3.3v23.3c.8 0 1.6.2 2.5.2 14.9 0 27-12.1 27-27C54 13.8 43.7 2.3 30.3.7zm-.6 41.6c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3.2 1.8-1.4 3.3-3.3 3.3zm7.9 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.3 3.3-3.3 3.3zm8 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.4 3.3-3.3 3.3z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M27 .6C12.1.6 0 12.7 0 27.6c0 13.1 9.1 23.8 21.3 26.3V29.6c0-1.1 1-2 2-2.2h3.3c.2 0 .3-.2.3-.3L27 .6zm-5.2 22.2c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.5 3.3-3.3 3.3zm275.5-7.5v10.2h-13.6V15.3h-6.9v27h6.9V31.4h13.6v10.9h6.7v-27zm-112.4 3.1c-1.1-2.4-3.3-3.7-5.5-3.7s-4.5 1.3-5.5 3.7l-10.9 24h7.2l2.4-5.7h14l2.4 5.7h7.2l-11.3-24zm-10.4 12.9l4.1-9.9c.2-.3.3-.3.5-.3s.5 0 .5.3l4.1 9.9h-9.2zm-70-20.8c-3.2 0-5.2 1.7-6.7 5.1l-8.7 20.3-8.8-20.4c-1.4-3.3-3.5-5.1-6.7-5.1-3 0-6 2-6 6.7v25.1h6.7V18l8.9 20.1c1.1 2.9 3.2 4.6 5.9 4.6 2.9 0 4.8-1.7 5.9-4.6l8.9-20.1v24.5h6.7V17.4c-.1-4.7-3.1-6.9-6.1-6.9zm17.9 26.1c-.3 0-.7-.3-.7-.7v-4.8h16.8v-5.5h-16.8v-4.1c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4V38c0 2 1.7 4 4 4h20v-5.7h-16.7v.3zm28 5.7V21.7c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4v22.9l6.6.1zm122-13.4c0-9.4-4.1-13.8-14.3-13.8h-2.4c-10.2 0-14.3 4.5-14.3 13.8 0 9.2 4.1 13.8 14.3 13.8h2.2c10.4-.2 14.5-4.6 14.5-13.8zM257.9 37h-2.2c-5.5 0-7.8-2.5-7.8-8.1 0-5.4 1.9-8.1 7.8-8.1h2.2c5.7 0 7.8 2.7 7.8 8.1 0 5.5-2.1 8.1-7.8 8.1zm-35.2-25.9h-13.4c-10 0-14 5.1-14 13.8 0 1.4.2 2.7.3 3.8 1.1 6.2 4.8 10 14.1 10h3v3.5h6.7v-3.5h2.9c9.4 0 13.1-3.8 14.1-10 .2-1.1.3-2.4.3-3.8-.1-8.7-4.2-13.8-14-13.8zm-10.2 22h-3c-4.6 0-6.2-1.7-7.2-4.5-.3-1-.3-2.4-.3-3.8 0-5.7 2.7-8.1 6.5-8.1h4.1v16.4h-.1zm17.2-4.2c-1 2.7-2.7 4.5-7.2 4.5h-3V16.9h4.1c3.8 0 6.5 2.4 6.5 8.1-.1 1.5-.1 2.7-.4 3.9z"
-  })));
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M367.31 29.865c4.417 0 9.056 2.43 11.338 7.436l22.53 48.883h-14.652l-4.933-11.632h-28.567l-4.933 11.632h-14.652l22.53-48.883c2.282-5.007 6.921-7.436 11.339-7.436zm-1.105 13.693l-8.467 19.951h19.143l-8.467-19.95c-.221-.663-.736-.81-1.104-.81-.369 0-.81.22-1.105.81z",
+    fill: "#00B956"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M214.533 21.178c-6.48 0-10.603 3.46-13.622 10.38l-17.965 41.374-17.965-41.374c-3.018-6.92-7.142-10.38-13.621-10.38-6.037 0-12.296 4.343-12.296 13.693v51.313h13.769v-49.84l18.112 41.08c2.43 5.742 6.332 9.349 12.001 9.349 5.67 0 9.572-3.607 12.002-9.35l18.112-41.08v49.841h13.768v-51.24c0-9.423-6.258-13.766-12.295-13.766zm36.445 53.227a1.163 1.163 0 01-1.178-1.178v-9.644h34.384V52.319H249.8v-8.393c0-.662.515-1.178 1.178-1.178h34.016V31.117h-40.79c-4.785 0-8.172 3.975-8.172 8.171v38.577c0 4.196 3.46 8.172 8.172 8.172h40.79V74.405h-34.016zm57.429 11.779V44c0-.663.516-1.178 1.179-1.178h34.015V31.19h-40.789c-4.786 0-8.173 3.976-8.173 8.172v46.822h13.768z",
+    fill: "#00B956"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M528.259 30.307c20.837 0 29.157 8.981 29.157 28.27 0 18.994-8.468 28.122-29.304 28.122h-4.565c-20.837 0-29.304-9.128-29.304-28.122 0-19.289 8.246-28.27 29.157-28.27h4.859zm-4.638 44.981h4.417c11.412 0 15.977-5.153 15.977-16.711v-.074c0-11.19-4.27-16.712-15.977-16.712h-4.417c-12.075 0-15.978 5.522-15.978 16.712v.074c0 11.558 4.492 16.711 15.978 16.711zm-95.127-52.785h27.316c20.321 0 28.493 10.307 28.567 28.27 0 2.797-.221 5.374-.589 7.804-2.135 12.736-9.645 20.54-28.715 20.54h-5.963v7.067h-13.769v-7.067h-6.037c-19.07 0-26.58-7.804-28.715-20.54-.442-2.43-.589-5.006-.589-7.804 0-17.963 8.099-28.27 28.494-28.27zm6.774 44.982h-6.332c-9.351 0-12.664-3.46-14.726-8.908-.81-2.135-.81-4.786-.81-7.804 0-11.706 5.449-16.712 13.4-16.712h8.468v33.424zm34.825-8.908c-2.061 5.448-5.448 8.908-14.725 8.908h-6.332V34.06h8.467c7.952 0 13.4 4.933 13.4 16.712 0 3.018 0 5.669-.81 7.804zM62.86 58.135V1.227c27.242 3.313 48.373 26.577 48.447 54.7 0 30.478-24.74 55.214-55.22 55.214a58.32 58.32 0 01-5.081-.221V63.215a.58.58 0 01.589-.59h6.774c2.43 0 4.49-1.987 4.49-4.49zM61.682 86.11a6.913 6.913 0 01-6.921-6.92 6.913 6.913 0 016.92-6.92 6.913 6.913 0 016.922 6.92 6.913 6.913 0 01-6.921 6.92zm9.277-6.92a6.913 6.913 0 006.92 6.92 6.913 6.913 0 006.922-6.92 6.913 6.913 0 00-6.921-6.92 6.913 6.913 0 00-6.921 6.92zm16.198 0a6.913 6.913 0 006.92 6.92A6.913 6.913 0 00101 79.19a6.913 6.913 0 00-6.921-6.92 6.913 6.913 0 00-6.921 6.92z",
+    fill: "#00B956"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M.792 56C.792 25.521 25.531.785 56.012.785h.148v54.626a.58.58 0 01-.59.589h-6.92c-2.356.074-4.27 2.061-4.344 4.417v49.546C19.42 104.589.792 82.503.792 56zm37.697-16.638a6.913 6.913 0 006.921 6.92 6.913 6.913 0 006.921-6.92 6.913 6.913 0 00-6.92-6.92 6.913 6.913 0 00-6.922 6.92z",
+    fill: "#00B956"
+  }));
 };
 
 var greenVerticalImg = function greenVerticalImg(props) {

package/dist/lib/components/Notification/Notification.d.ts

@@ -17,6 +17,12 @@ declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        content?: string;
+    };
     /** Тип отображения */
     type?: NotificationType;
     /** Уровень тени */

package/dist/lib/components/Notification/Notification.js

@@ -101,6 +101,11 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-notification');
 
 var Notification = function Notification(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClass = _ref$classes.root,
+      containerClass = _ref$classes.container,
+      contentClass = _ref$classes.content,
       children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'info' : _ref$type,
@@ -167,13 +172,13 @@ var Notification = function Notification(_ref) {
     className: cn({
       type: type,
       colored: isColored
-    }, className)
+    }, [className, rootClass])
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('container')
+    className: cn('container', [containerClass])
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('content')
+    className: cn('content', [contentClass])
   }, title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
@@ -198,6 +203,11 @@ var Notification = function Notification(_ref) {
 Notification.propTypes = {
   type: PropTypes.oneOf(Object.values(NotificationTypes)),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    container: PropTypes.string,
+    content: PropTypes.string
+  }),
   shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
   isColored: PropTypes.bool,
   hasCloseButton: PropTypes.bool,

package/dist/lib/components/Tooltip/Tooltip.d.ts

@@ -37,6 +37,8 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
+    /** Отрендерить компонент в корневой элементе страницы body */
+    isPortal?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/lib/components/Tooltip/Tooltip.js

@@ -23,6 +23,8 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _reactPopper = require("react-popper");
 
 var _Tile = _interopRequireDefault(require("../Tile/Tile"));
@@ -72,6 +74,8 @@ var Tooltip = function Tooltip(_ref) {
       targetElement = _ref.targetElement,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$isPortal = _ref.isPortal,
+      isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -86,6 +90,8 @@ var Tooltip = function Tooltip(_ref) {
   var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
   var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
 
+  var portalElem = _react["default"].useRef(null);
+
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       popperElement = _useState2[0],
@@ -242,7 +248,17 @@ var Tooltip = function Tooltip(_ref) {
 
     return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (portalElem.current) {
+        document.body.removeChild(portalElem.current);
+      }
+
+      portalElem.current = null;
+    };
+  }, []);
+
+  var template = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -265,6 +281,19 @@ var Tooltip = function Tooltip(_ref) {
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
   }));
+  /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
+
+
+  if (isPortal && !portalElem.current && typeof window !== 'undefined') {
+    portalElem.current = document.createElement('div');
+    document.body.appendChild(portalElem.current);
+  }
+
+  if (isPortal && portalElem.current) {
+    return portalElem.current ? _reactDom["default"].createPortal(template, portalElem.current) : null;
+  }
+
+  return template;
 };
 
 Tooltip.propTypes = {
@@ -295,6 +324,7 @@ Tooltip.propTypes = {
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),
   isOpened: _propTypes["default"].bool,
+  isPortal: _propTypes["default"].bool,
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.5.3",
+  "version": "3.8.0",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.2.1",
+    "@megafon/ui-icons": "^1.2.2",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "7bfc4700247bbc8c96e1878511b4c5919abb6325"
+  "gitHead": "929d0fbafbdc4d2aa98f283f7c71dff21347542f"
 }