@megafon/ui-core 4.8.2 → 4.9.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.2...@megafon/ui-core@4.9.0) (2022-11-29)
+
+
+### Bug Fixes
+
+* **textarea:** fix auto resize ([de31a72](https://github.com/MegafonWebLab/megafon-ui/commit/de31a723f68e24f12623ca872f8281ca60b599c4))
+* **tooltip:** fix close button margin and arrow position ([db99274](https://github.com/MegafonWebLab/megafon-ui/commit/db99274ab17fe58621aaaf1ba7d85bba6afc5e05))
+
+
+### Features
+
+* **textarea:** add disableEnterLineBreak prop ([3fba0a0](https://github.com/MegafonWebLab/megafon-ui/commit/3fba0a08a4bca66575388c9156103335d68b287b))
+
+
+
+
+
 ## [4.8.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.1...@megafon/ui-core@4.8.2) (2022-11-21)
 
 

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

@@ -32,6 +32,11 @@ export interface IConrentAreaProps {
         root?: string;
         inner?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
 }
 declare const ContentArea: React.FC<IConrentAreaProps>;
 export default ContentArea;

package/dist/es/components/ContentArea/ContentArea.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
@@ -29,17 +30,18 @@ var ContentArea = function ContentArea(_ref) {
       disableIndents = _ref.disableIndents,
       children = _ref.children,
       className = _ref.className,
-      classes = _ref.classes;
-  return /*#__PURE__*/React.createElement("div", {
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'background-color': outerBackgroundColor
     }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: cn('inner', {
       'disable-indents': disableIndents,
       'background-color': innerBackgroundColor
     }, classes === null || classes === void 0 ? void 0 : classes.inner)
-  }, children));
+  }), children));
 };
 
 ContentArea.propTypes = {
@@ -49,6 +51,10 @@ ContentArea.propTypes = {
     root: PropTypes.string,
     inner: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
   innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS))
 };

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

@@ -14,6 +14,11 @@ export interface IGridProps {
     multiRow?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        container?: Record<string, string>;
+    };
     children: Array<React.ReactElement<IGridColumn>> | React.ReactElement<IGridColumn>;
 }
 declare const Grid: React.FC<IGridProps>;

package/dist/es/components/Grid/Grid.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Grid.css";
 var cn = cnCreate('mfui-grid');
@@ -13,10 +14,11 @@ var Grid = function Grid(_ref) {
       multiRow = _ref$multiRow === void 0 ? true : _ref$multiRow,
       hAlign = _ref.hAlign,
       vAlign = _ref.vAlign,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.container), {
     className: cn('container', {
       'multi-row': multiRow,
       'h-align': hAlign,
@@ -24,7 +26,7 @@ var Grid = function Grid(_ref) {
       'gutters-left': guttersLeft,
       'gutters-bottom': guttersBottom
     })
-  }, React.Children.map(children, function (child) {
+  }), React.Children.map(children, function (child) {
     return React.cloneElement(child, {
       className: cn('column', {
         'gutter-left': guttersLeft,
@@ -41,6 +43,10 @@ Grid.propTypes = {
   guttersBottom: PropTypes.oneOf(['large', 'medium']),
   multiRow: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    container: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired
 };
 export default Grid;

package/dist/es/components/Grid/GridColumn.d.ts

@@ -50,6 +50,10 @@ export interface IGridColumn {
     flex?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     children: React.ReactNode;
 }
 declare const GridColumn: React.FC<IGridColumn>;

package/dist/es/components/Grid/GridColumn.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./GridColumn.css";
 var GridSizeValues = PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);
@@ -38,8 +39,9 @@ var GridColumn = function GridColumn(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       align = _ref.align,
+      dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       flex: flex,
       grow: grow,
@@ -65,7 +67,7 @@ var GridColumn = function GridColumn(_ref) {
       'right-offset-tablet': rightOffsetTablet,
       'right-offset-mobile': rightOffsetMobile
     }, className)
-  }, children);
+  }), children);
 };
 
 GridColumn.propTypes = {
@@ -88,6 +90,9 @@ GridColumn.propTypes = {
   grow: PropTypes.bool,
   flex: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.node.isRequired
 };
 export default GridColumn;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './Header.less';
-interface IHeaderProps {
+export interface IHeaderProps {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
     /** Поведение текста при встраивании в широкий или узкий контейнер (только для h5) */

package/dist/es/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/es/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/es/components/TextField/TextField.js

@@ -1,14 +1,19 @@
 import "core-js/modules/es.array.concat";
+import "core-js/modules/es.date.to-string";
 import "core-js/modules/es.function.name";
+import "core-js/modules/es.object.to-string";
 import "core-js/modules/es.object.values";
 import "core-js/modules/es.parse-float";
 import "core-js/modules/es.regexp.exec";
+import "core-js/modules/es.regexp.to-string";
 import "core-js/modules/es.string.replace";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable react/no-multi-comp */
 import * as React from 'react';
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
 import InputMask from 'react-input-mask';
@@ -69,6 +74,13 @@ var DEFAULT_PLACEHOLDERS = {
   password: 'Пароль',
   text: 'Текст'
 };
+var converConfig = {
+  br: {
+    component: function component() {
+      return React.createElement('br');
+    }
+  }
+};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -79,7 +91,7 @@ export var TextareaTypes = {
 };
 export var MinTextareaHeight = {
   ONE_ROW: ROW_HEIGHT,
-  THREE_ROWS: ROW_HEIGHT * 3
+  THREE_ROWS: ROW_HEIGHT * DEFAULT_ROW_COUNT
 };
 var cn = cnCreate('mfui-text-field');
 
@@ -106,6 +118,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,
@@ -142,8 +156,8 @@ var TextField = function TextField(_ref) {
 
   var _useState5 = useState(minTextareaHeight),
       _useState6 = _slicedToArray(_useState5, 2),
-      initialTextareaHeight = _useState6[0],
-      setInitialTextareaHeight = _useState6[1];
+      textareaHeight = _useState6[0],
+      setTextareaHeight = _useState6[1];
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -166,6 +180,7 @@ var TextField = function TextField(_ref) {
       setIsTextareaResized = _useState14[1];
 
   var fieldNode = useRef();
+  var hiddenElement = useRef(null);
   var labelRef = useRef(null);
   var resizerRef = useRef(null);
   var isPasswordType = useMemo(function () {
@@ -189,6 +204,15 @@ var TextField = function TextField(_ref) {
 
     setIsMaxLimitExceeded(symbolCounter < String(textareaValue).length);
   }, [symbolCounter]);
+  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]);
   useEffect(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
@@ -214,7 +238,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.resizeTextarea);
 
@@ -241,22 +265,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);
@@ -281,6 +290,10 @@ var TextField = function TextField(_ref) {
     labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
 
+  var handleTextareaKeyDown = function handleTextareaKeyDown(e) {
+    checkEventIsClickOrEnterPress(e) && !e.shiftKey && e.preventDefault();
+  };
+
   var handleIconClick = useCallback(function (e) {
     var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
     var field = fieldNode.current;
@@ -393,13 +406,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", _extends({}, 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
+      }
+    }, convert(hiddenValue, converConfig), "."), renderLabel());
   };
 
   var renderIconBlock = function renderIconBlock() {
@@ -496,6 +519,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/es/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;