@megafon/ui-core 4.8.1 → 4.9.0

package/dist/lib/components/List/List.js

@@ -30,14 +30,17 @@ var List = function List(_ref) {
       className = _ref.className,
       children = _ref.children;
   var ElementType = as;
-  return /*#__PURE__*/React.createElement(ElementType, {
+  return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'h-align': align,
       color: color,
-      weight: weight,
-      type: as
+      weight: weight
     }, className)
-  }, children);
+  }, /*#__PURE__*/React.createElement(ElementType, {
+    className: cn('inner', {
+      type: as
+    })
+  }, children));
 };
 
 List.propTypes = {

package/dist/lib/components/Tabs/Tabs.css

@@ -157,6 +157,9 @@
   color: var(--spbSky3);
   fill: var(--spbSky3);
 }
+.mfui-tabs__tab-inner:hover {
+  text-decoration: none;
+}
 .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
   color: var(--content);
   fill: var(--content);

package/dist/lib/components/TextField/TextField.css

@@ -41,6 +41,15 @@
   overflow-y: auto;
   resize: none;
 }
+.mfui-text-field__hidden-textarea {
+  position: absolute;
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content;
+  padding: 0 56px 0 16px;
+  word-break: break-all;
+  visibility: hidden;
+}
 .mfui-text-field__field_resized {
   -webkit-transition: height 0.1s;
   transition: height 0.1s;

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

@@ -88,6 +88,8 @@ export declare type TextFieldProps = {
     minTextareaHeight?: MinTextareaHeightType;
     /** Скрывает кнопку ресайза для textarea="flexible" */
     hideResizeButton?: boolean;
+    /** Отключает перевод строки по Enter */
+    disableEnterLineBreak?: boolean;
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик изменения значения маскированного инпута до обработки маской */

package/dist/lib/components/TextField/TextField.js

@@ -9,14 +9,20 @@ exports["default"] = exports.MinTextareaHeight = exports.TextareaTypes = exports
 
 require("core-js/modules/es.array.concat");
 
+require("core-js/modules/es.date.to-string");
+
 require("core-js/modules/es.function.name");
 
+require("core-js/modules/es.object.to-string");
+
 require("core-js/modules/es.object.values");
 
 require("core-js/modules/es.parse-float");
 
 require("core-js/modules/es.regexp.exec");
 
+require("core-js/modules/es.regexp.to-string");
+
 require("core-js/modules/es.string.replace");
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -41,6 +47,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint-disable react/no-multi-comp */
 var Hide = function Hide(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -95,6 +102,13 @@ var DEFAULT_PLACEHOLDERS = {
   password: 'Пароль',
   text: 'Текст'
 };
+var converConfig = {
+  br: {
+    component: function component() {
+      return React.createElement('br');
+    }
+  }
+};
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -107,7 +121,7 @@ var TextareaTypes = {
 exports.TextareaTypes = TextareaTypes;
 var MinTextareaHeight = {
   ONE_ROW: ROW_HEIGHT,
-  THREE_ROWS: ROW_HEIGHT * 3
+  THREE_ROWS: ROW_HEIGHT * DEFAULT_ROW_COUNT
 };
 exports.MinTextareaHeight = MinTextareaHeight;
 var cn = (0, _uiHelpers.cnCreate)('mfui-text-field');
@@ -135,6 +149,8 @@ var TextField = function TextField(_ref) {
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
       _ref$minTextareaHeigh = _ref.minTextareaHeight,
       minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.THREE_ROWS : _ref$minTextareaHeigh,
+      _ref$disableEnterLine = _ref.disableEnterLineBreak,
+      disableEnterLineBreak = _ref$disableEnterLine === void 0 ? false : _ref$disableEnterLine,
       _ref$hideResizeButton = _ref.hideResizeButton,
       hideResizeButton = _ref$hideResizeButton === void 0 ? false : _ref$hideResizeButton,
       onBlur = _ref.onBlur,
@@ -171,8 +187,8 @@ var TextField = function TextField(_ref) {
 
   var _useState5 = (0, React.useState)(minTextareaHeight),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      initialTextareaHeight = _useState6[0],
-      setInitialTextareaHeight = _useState6[1];
+      textareaHeight = _useState6[0],
+      setTextareaHeight = _useState6[1];
 
   var _useState7 = (0, React.useState)(false),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
@@ -195,6 +211,7 @@ var TextField = function TextField(_ref) {
       setIsTextareaResized = _useState14[1];
 
   var fieldNode = (0, React.useRef)();
+  var hiddenElement = (0, React.useRef)(null);
   var labelRef = (0, React.useRef)(null);
   var resizerRef = (0, React.useRef)(null);
   var isPasswordType = (0, React.useMemo)(function () {
@@ -218,6 +235,15 @@ var TextField = function TextField(_ref) {
 
     setIsMaxLimitExceeded(symbolCounter < String(textareaValue).length);
   }, [symbolCounter]);
+  (0, React.useEffect)(function () {
+    if (!hiddenElement.current) {
+      return;
+    }
+
+    var hiddenElementHeight = hiddenElement.current.scrollHeight;
+    var isHiddenHeightCorrect = hiddenElementHeight >= minTextareaHeight && hiddenElementHeight <= TEXTAREA_MAX_HEIGHT;
+    !isTextareaResized && setTextareaHeight(isHiddenHeightCorrect ? hiddenElementHeight : minTextareaHeight);
+  }, [hiddenElement, isTextareaResized, minTextareaHeight, inputValue]);
   (0, React.useEffect)(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
@@ -243,7 +269,7 @@ var TextField = function TextField(_ref) {
         var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
         var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
         var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
-        setInitialTextareaHeight(updatedHeight);
+        setTextareaHeight(updatedHeight);
         setIsTextareaResized(true);
       }, _throttleTime["default"].resizeTextarea);
 
@@ -270,22 +296,7 @@ var TextField = function TextField(_ref) {
     });
   }, []);
 
-  var setTextareaHeight = function setTextareaHeight() {
-    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) || isTextareaResized) {
-      return;
-    }
-
-    var scrollHeight = fieldNode.current.scrollHeight;
-    var extraRowCount = Math.round((scrollHeight - 28 - minTextareaHeight) / ROW_HEIGHT);
-    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? minTextareaHeight + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
-    setInitialTextareaHeight(newHeight);
-  };
-
   var handleInputChange = function handleInputChange(e) {
-    if (textarea === TextareaTypes.FLEXIBLE) {
-      setTextareaHeight();
-    }
-
     !isControlled && setInputValue(e.target.value);
     checkSymbolMaxLimit(e.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -310,6 +321,10 @@ var TextField = function TextField(_ref) {
     labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
 
+  var handleTextareaKeyDown = function handleTextareaKeyDown(e) {
+    (0, _uiHelpers.checkEventIsClickOrEnterPress)(e) && !e.shiftKey && e.preventDefault();
+  };
+
   var handleIconClick = (0, React.useCallback)(function (e) {
     var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
     var field = fieldNode.current;
@@ -418,13 +433,23 @@ var TextField = function TextField(_ref) {
   };
 
   var renderTextarea = function renderTextarea() {
+    var _a;
+
+    var hiddenValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().replace(/[\r\n]/g, '<br/>');
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", (0, _extends2["default"])({}, textareaParams, {
-      onScroll: handleTextareaScroll,
       style: {
-        height: "".concat(initialTextareaHeight, "px")
+        height: "".concat(textareaHeight, "px")
       },
-      ref: getFieldNode
-    })), renderLabel());
+      ref: getFieldNode,
+      onKeyDown: disableEnterLineBreak ? handleTextareaKeyDown : undefined,
+      onScroll: handleTextareaScroll
+    })), !!hiddenValue && /*#__PURE__*/React.createElement("div", {
+      className: cn('hidden-textarea'),
+      ref: hiddenElement,
+      style: {
+        width: (_a = fieldNode.current) === null || _a === void 0 ? void 0 : _a.scrollWidth
+      }
+    }, (0, _uiHelpers.convert)(hiddenValue, converConfig), "."), renderLabel());
   };
 
   var renderIconBlock = function renderIconBlock() {
@@ -521,6 +546,7 @@ TextField.propTypes = {
   className: PropTypes.string,
   minTextareaHeight: PropTypes.oneOf([24, 72]),
   hideResizeButton: PropTypes.bool,
+  disableEnterLineBreak: PropTypes.bool,
   onChange: PropTypes.func,
   onBeforeMaskChange: PropTypes.func,
   onBlur: PropTypes.func,

package/dist/lib/components/Tooltip/Tooltip.css

@@ -6,8 +6,6 @@
           transition-duration: 0.3s;
   -webkit-transition-property: opacity, visibility;
   transition-property: opacity, visibility;
-  font-size: 12px;
-  line-height: 18px;
   pointer-events: none;
 }
 .mfui-tooltip_open {
@@ -24,6 +22,18 @@
 .mfui-tooltip__content {
   position: relative;
   z-index: 1;
+  overflow: hidden;
+}
+.mfui-tooltip__content-shadow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+.mfui-tooltip__top,
+.mfui-tooltip__main-content {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -33,24 +43,33 @@
           flex-direction: column;
   gap: 8px;
 }
-.mfui-tooltip__content-shadow {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
+@media screen and (min-width: 768px) {
+  .mfui-tooltip__top {
+    gap: 12px;
+  }
+}
+.mfui-tooltip__top_margin {
+  margin-bottom: 16px;
 }
 .mfui-tooltip__arrow-container {
   position: absolute;
 }
 .mfui-tooltip__arrow-wrap {
-  width: 42px;
-  height: 12px;
+  width: 33px;
+  height: 13px;
 }
 .mfui-tooltip__arrow {
-  width: 42px;
-  height: 12px;
+  width: 33px;
+  height: 13px;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.mfui-tooltip__arrow svg {
   position: absolute;
 }
 .mfui-tooltip__arrow-inner {
@@ -59,8 +78,24 @@
   fill: var(--base);
 }
 .mfui-tooltip__text {
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 15px;
+  line-height: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-tooltip__text {
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+.mfui-tooltip__bottom {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 16px;
 }
 .mfui-tooltip__button,
 .mfui-tooltip__close-button {
@@ -80,12 +115,18 @@
   font-family: inherit;
   color: var(--brandGreen);
   font-weight: 500;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: 15px;
+  line-height: 18px;
   background-color: transparent;
   -webkit-transition: 300ms;
   transition: 300ms;
 }
+@media screen and (max-width: 767px) {
+  .mfui-tooltip__button {
+    font-size: 12px;
+    line-height: 14px;
+  }
+}
 .mfui-tooltip__button:hover {
   color: var(--buttonHoverGreen);
 }
@@ -99,15 +140,15 @@
   fill: var(--buttonDown);
 }
 .mfui-tooltip__close-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
+  position: relative;
+  top: -6px;
+  right: -6px;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  float: right;
   width: 24px;
   height: 24px;
-  margin-left: 24px;
   border-radius: 12px;
   background-color: var(--spbSky0);
   -webkit-transition: 300ms;
@@ -140,9 +181,9 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
   gap: 18px;
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -152,8 +193,7 @@
   font-weight: 500;
 }
 .mfui-tooltip_small .mfui-tooltip__close-button {
-  position: static;
-  margin-left: 0;
+  top: auto;
 }
 .mfui-tooltip_theme_red .mfui-tooltip__content,
 .mfui-tooltip_theme_blue .mfui-tooltip__content,
@@ -218,17 +258,19 @@
 .mfui-tooltip_theme_blue .mfui-tooltip__arrow-inner {
   fill: var(--reflexBlue80);
 }
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-container {
-  left: -12px;
-  width: 12px;
-  height: 100%;
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__content-shadow {
+  -webkit-transform: translateX(24px);
+          transform: translateX(24px);
 }
 .mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-wrap,
 .mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-wrap,
 .mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-wrap {
-  left: -15px;
+  left: 3px;
 }
 .mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow,
 .mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow,
@@ -239,17 +281,19 @@
   -webkit-transform: rotate(-90deg);
           transform: rotate(-90deg);
 }
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-container {
-  right: -12px;
-  width: 12px;
-  height: 100%;
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__content-shadow {
+  -webkit-transform: translateX(-24px);
+          transform: translateX(-24px);
 }
 .mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-wrap,
 .mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-wrap,
 .mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-wrap {
-  right: -15px;
+  right: 3px;
 }
 .mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow,
 .mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow,
@@ -260,17 +304,19 @@
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
 }
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-container {
-  bottom: -12px;
-  width: 100%;
-  height: 12px;
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__content-shadow {
+  -webkit-transform: translateY(-24px);
+          transform: translateY(-24px);
 }
 .mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-wrap,
 .mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-wrap,
 .mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-wrap {
-  top: 0;
+  bottom: 13px;
 }
 .mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow,
 .mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow,
@@ -281,12 +327,19 @@
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='bottom-start'] .mfui-tooltip__arrow-container,
-.mfui-tooltip[data-popper-placement='bottom-end'] .mfui-tooltip__arrow-container {
-  top: -12px;
-  width: 100%;
-  height: 12px;
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='bottom-start'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='bottom-end'] .mfui-tooltip__content,
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='bottom-start'] .mfui-tooltip__content-shadow,
+.mfui-tooltip[data-popper-placement='bottom-end'] .mfui-tooltip__content-shadow {
+  -webkit-transform: translateY(24px);
+          transform: translateY(24px);
+}
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='bottom-start'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='bottom-end'] .mfui-tooltip__arrow-wrap {
+  top: 13px;
 }
 .mfui-tooltip[data-popper-escaped='true'].mfui-tooltip_has-escape {
   visibility: hidden;

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

@@ -174,6 +174,8 @@ var Tooltip = function Tooltip(_ref) {
   var portalElem = _react["default"].useRef(null);
 
   var isBigSize = size === Size.BIG;
+  var hasMainContent = !!title || !!text;
+  var hasTopContent = hasMainContent || !!buttonText;
   var clickEvent = (0, _react.useMemo)(function () {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
@@ -192,10 +194,10 @@ var Tooltip = function Tooltip(_ref) {
         options: {
           element: arrowElement,
           padding: {
-            top: 17,
-            right: 1,
-            bottom: 17,
-            left: 1
+            top: 18,
+            right: 8,
+            bottom: 18,
+            left: 8
           }
         }
       }, {
@@ -215,11 +217,6 @@ var Tooltip = function Tooltip(_ref) {
         options: {
           boundary: currentBoundary
         }
-      }, {
-        name: 'offset',
-        options: {
-          offset: [0, 12]
-        }
       }]
     };
   }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
@@ -341,21 +338,27 @@ var Tooltip = function Tooltip(_ref) {
     }, text);
   }, [text]);
   var renderedFullContent = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !!title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hasTopContent && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('top', {
+        margin: !!children
+      })
+    }, hasMainContent && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('main-content')
+    }, !!title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
       className: cn('title'),
       as: "h5",
       space: "tight"
-    }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
+    }, title), !!text && renderedText), !!buttonText && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
       type: "button",
       className: cn('button')
     }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
       onClick: onClick
     }), buttonText, /*#__PURE__*/_react["default"].createElement(RightArrow, {
       className: cn('button-arrow')
-    })), !!children && /*#__PURE__*/_react["default"].createElement("div", {
+    }))), !!children && /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('addititonal-content')
     }, children));
-  }, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
+  }, [title, text, buttonText, children, dataAttrs, hasTopContent, hasMainContent, renderedText, onClick]);
 
   var template = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
@@ -368,8 +371,6 @@ var Tooltip = function Tooltip(_ref) {
     ref: setPopperElement,
     style: styles.popper
   }, attributes.popper), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('arrow-container')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('arrow-wrap'),
     ref: setArrowElement,
     style: styles.arrow
@@ -377,23 +378,25 @@ var Tooltip = function Tooltip(_ref) {
     className: cn('arrow', [arrowClassName])
   }, /*#__PURE__*/_react["default"].createElement(Arrow, {
     className: cn('arrow-inner')
-  })))), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('content-wrap')
+  }, /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
     radius: "rounded",
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content
     },
     className: cn('content', [contentClassName])
-  }, isBigSize && renderedFullContent, !isBigSize && !!text && renderedText, hasCloseButton && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
+  }, hasCloseButton && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
     className: cn('close-button'),
     type: "button",
     onClick: handleCloseButtonClick
   }), /*#__PURE__*/_react["default"].createElement(CancelIcon, {
     className: cn('close-icon')
-  }))), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
+  })), isBigSize && renderedFullContent, !isBigSize && !!text && renderedText), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
     radius: "rounded",
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
-  }));
+  })));
   /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.8.1",
+  "version": "4.9.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": "^2.3.0",
+    "@megafon/ui-icons": "^2.4.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "3abf1c61512c52a9d322edb9fb6bede9da952c44"
+  "gitHead": "ab9cb505dca6ae5f4e3db5d4a21add24d10a1be1"
 }