@megafon/ui-shared 2.0.0-beta.96 → 2.0.0

package/dist/lib/components/Table/Table.css

@@ -5,149 +5,149 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-table {
-  font-family: inherit;
-  font-size: 15px;
-  line-height: 24px;
+.mfui-table {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-track {
+  background-color: #EDEDED;
 }
-.mfui-beta-table__scroll {
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #D8D8D8;
+}
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-corner {
+  background-color: #FFFFFF;
+}
+.mfui-table:not(.mfui-table_touch) .mfui-table__scroll {
+  scrollbar-color: #D8D8D8 #EDEDED;
+  scrollbar-width: thin;
+}
+.mfui-table__scroll {
+  position: relative;
   display: grid;
   grid-template-columns: auto auto auto;
   max-width: 100%;
-  overflow: auto;
-  position: relative;
   border: 1px solid #D8D8D8;
+  overflow: auto;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-table__scroll {
+  .mfui-table__scroll {
     max-height: 500px;
   }
 }
-.mfui-beta-table__top-shadow {
+.mfui-table__top-shadow {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  width: 100%;
+  z-index: 2;
   display: block;
-  grid-column-end: 4;
   grid-column-start: 1;
-  z-index: 2;
-  margin-bottom: -6px;
+  grid-column-end: 4;
+  width: 100%;
   height: 6px;
+  margin-bottom: -6px;
   background: linear-gradient(359.94deg, rgba(0, 0, 0, 0.0001) 0.06%, rgba(0, 0, 0, 0.03) 38.08%, rgba(0, 0, 0, 0.08) 74.98%);
 }
-.mfui-beta-table__left-shadow {
+.mfui-table__left-shadow {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 2;
-  width: 6px;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
+  z-index: 2;
+  width: 6px;
   margin-right: -6px;
   background: -webkit-gradient(linear, right top, left top, color-stop(16.3%, rgba(0, 0, 0, 0.0001)), color-stop(51.81%, rgba(0, 0, 0, 0.03)), color-stop(86.27%, rgba(0, 0, 0, 0.08)));
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.0001) 16.3%, rgba(0, 0, 0, 0.03) 51.81%, rgba(0, 0, 0, 0.08) 86.27%);
 }
-.mfui-beta-table__bottom-gradient {
-  display: block;
-  height: 48px;
-  width: 100%;
-  margin-top: -48px;
+.mfui-table__bottom-gradient {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 1;
   bottom: 0;
+  z-index: 1;
+  display: block;
+  grid-column-start: 1;
+  grid-column-end: 4;
+  width: 100%;
+  height: 48px;
+  margin-top: -48px;
   background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to top, #FFFFFF 25%, rgba(255, 255, 255, 0));
-  grid-column-end: 4;
-  grid-column-start: 1;
 }
-.mfui-beta-table__right-gradient {
-  display: block;
-  height: 100%;
-  width: 48px;
+.mfui-table__right-gradient {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 1;
   right: 0;
+  z-index: 1;
+  display: block;
+  width: 48px;
+  height: 100%;
   margin-left: -48px;
   background: -webkit-gradient(linear, right top, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to left, #FFFFFF 25%, rgba(255, 255, 255, 0));
 }
-.mfui-beta-table__table {
-  border-spacing: 0;
+.mfui-table__table {
   border-width: 0;
   border-collapse: separate;
+  border-spacing: 0;
   background-color: #FFFFFF;
 }
-.mfui-beta-table__cell {
-  padding: 24px;
+.mfui-table__cell {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  padding: 24px;
   background-color: #FFFFFF;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-table__cell {
-    padding-left: 16px;
+  .mfui-table__cell {
     padding-right: 16px;
+    padding-left: 16px;
   }
 }
-.mfui-beta-table__cell:first-child {
+.mfui-table__cell:first-child {
+  position: relative;
   left: 0;
-  min-width: 144px;
   width: 144px;
-  position: relative;
+  min-width: 144px;
   border-right: 1px solid #D8D8D8;
 }
-.mfui-beta-table__cell:not(:first-child) {
+.mfui-table__cell:not(:first-child) {
   max-width: 288px;
 }
-.mfui-beta-table__row_head .mfui-beta-table__cell {
+.mfui-table__row_head .mfui-table__cell {
   font-size: 12px;
   line-height: 16px;
   height: 72px;
-  background-color: #F6F6F6;
-  color: rgba(51, 51, 51, 0.5);
   padding-bottom: 12px;
+  color: rgba(51, 51, 51, 0.5);
   vertical-align: bottom;
+  background-color: #F6F6F6;
 }
-.mfui-beta-table__row:not(:last-child) .mfui-beta-table__cell {
+.mfui-table__row:not(:last-child) .mfui-table__cell {
   border-bottom: 1px solid #D8D8D8;
 }
-.mfui-beta-table_min-cell-size_small .mfui-beta-table__cell:not(:first-child) {
+.mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
   min-width: 72px;
 }
-.mfui-beta-table_min-cell-size_large .mfui-beta-table__cell:not(:first-child) {
+.mfui-table_min-cell-size_large .mfui-table__cell:not(:first-child) {
   min-width: 144px;
 }
-.mfui-beta-table_fix-column .mfui-beta-table__cell:first-child {
+.mfui-table_fix-column .mfui-table__cell:first-child {
   position: -webkit-sticky;
   position: sticky;
 }
-.mfui-beta-table_fix-column .mfui-beta-table__left-shadow {
+.mfui-table_fix-column .mfui-table__left-shadow {
   left: 144px;
 }
-.mfui-beta-table_fix-column .mfui-beta-table__bottom-gradient {
+.mfui-table_fix-column .mfui-table__bottom-gradient {
   z-index: 3;
 }
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-track {
-  background-color: #EDEDED;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: #D8D8D8;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-corner {
-  background-color: #FFFFFF;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) .mfui-beta-table__scroll {
-  scrollbar-color: #D8D8D8 #EDEDED;
-  scrollbar-width: thin;
-}

package/dist/lib/components/Table/Table.js

@@ -2,8 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.array.map");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,13 +13,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
 var _htmr = _interopRequireDefault(require("htmr"));
 
-var _uiCore = require("@megafon/ui-core");
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -29,7 +27,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-table');
+var cn = (0, _uiHelpers.cnCreate)('mfui-table');
 
 var Table = function Table(_ref) {
   var className = _ref.className,
@@ -94,7 +92,7 @@ var Table = function Table(_ref) {
     };
   }, [handleTableScroll]);
   React.useEffect(function () {
-    setTouchDevice((0, _uiCore.detectTouch)());
+    setTouchDevice((0, _uiHelpers.detectTouch)());
   }, []);
 
   var renderRows = function renderRows() {

package/dist/lib/components/Table/TableRow.js

@@ -21,6 +21,7 @@ var TableRow = function TableRow(_ref) {
 };
 
 TableRow.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
   head: PropTypes.bool,
   children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
 };

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

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { Tabs } from '@megafon/ui-core';
-declare type TabsPropsType = React.ComponentProps<typeof Tabs>;
+declare type TabsPropsType = React.ComponentProps<typeof Tabs> & {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+};
 declare const TabsBox: React.FC<TabsPropsType>;
 export default TabsBox;

package/dist/lib/components/TabsBox/TabsBox.js

@@ -7,18 +7,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.array.index-of");
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-tabs-box');
+var __rest = void 0 && (void 0).__rest || function (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;
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-tabs-box');
+
+var TabsBox = function TabsBox(_a) {
+  var rootRef = _a.rootRef,
+      props = __rest(_a, ["rootRef"]);
 
-var TabsBox = function TabsBox(props) {
   return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
     className: cn()
   }, /*#__PURE__*/React.createElement(_uiCore.Tabs, props));
 };

package/dist/lib/components/TextBox/TextBox.css

@@ -5,6 +5,12 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-text-box_text-center {
+.mfui-text-box__content :first-child {
+  margin-top: 0 !important;
+}
+.mfui-text-box__content :last-child {
+  margin-bottom: 0 !important;
+}
+.mfui-text-box_text-center {
   text-align: center;
 }

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

@@ -3,6 +3,14 @@ import './TextBox.less';
 export interface ITextBoxProps {
     /** Центрирование текста по горизонтали */
     textCenter?: boolean;
+    /** Центрирование компонента по горизонтали при ограниченной ширине */
+    centeringWithLimitedWidth?: boolean;
+    /** Растягивание компонента на всю доступную ширину */
+    isFullWidth?: boolean;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
 }
 declare const TextBox: React.FC<ITextBoxProps>;
 export default TextBox;

package/dist/lib/components/TextBox/TextBox.js

@@ -9,29 +9,62 @@ exports["default"] = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-text-box');
+var cn = (0, _uiHelpers.cnCreate)('mfui-text-box');
 
 var TextBox = function TextBox(_ref) {
   var _ref$textCenter = _ref.textCenter,
       textCenter = _ref$textCenter === void 0 ? false : _ref$textCenter,
+      _ref$centeringWithLim = _ref.centeringWithLimitedWidth,
+      centeringWithLimitedWidth = _ref$centeringWithLim === void 0 ? false : _ref$centeringWithLim,
+      _ref$isFullWidth = _ref.isFullWidth,
+      isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      rootRef = _ref.rootRef,
+      className = _ref.className,
       children = _ref.children;
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('content')
+    }, children);
+  };
+
+  var renderTextBoxWithGrid = function renderTextBoxWithGrid() {
+    return /*#__PURE__*/React.createElement(_uiCore.Grid, {
+      hAlign: centeringWithLimitedWidth ? 'center' : 'left'
+    }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+      wide: "8",
+      desktop: "10",
+      tablet: "12",
+      mobile: "12"
+    }, renderContent()));
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'text-center': textCenter
-    })
-  }, children);
+    }, [className]),
+    ref: rootRef
+  }, isFullWidth ? renderContent() : renderTextBoxWithGrid());
 };
 
 TextBox.propTypes = {
-  textCenter: PropTypes.bool
+  textCenter: PropTypes.bool,
+  centeringWithLimitedWidth: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  className: PropTypes.string
 };
 var _default = TextBox;
 exports["default"] = _default;

package/dist/lib/components/TextBox/TextBoxPicture.css

@@ -0,0 +1,24 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-box-picture_margin_default {
+  margin: 16px 0;
+}
+.mfui-text-box-picture_margin_big-top {
+  margin: 24px 0 16px;
+}
+.mfui-text-box-picture_margin_big-bottom {
+  margin: 16px 0 24px;
+}
+.mfui-text-box-picture_margin_big-vertical {
+  margin: 24px 0;
+}
+.mfui-text-box-picture__img {
+  display: block;
+  max-width: 100%;
+  border: 1px solid #EDEDED;
+}

package/dist/lib/components/TextBox/TextBoxPicture.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import './TextBoxPicture.less';
+export declare const pictureMarginTypes: {
+    readonly DEFAULT: "default";
+    readonly BIG_TOP: "big-top";
+    readonly BIG_BOTTOM: "big-bottom";
+    readonly BIG_VERTICAL: "big-vertical";
+};
+declare type PictureMarginTypesType = typeof pictureMarginTypes[keyof typeof pictureMarginTypes];
+export interface ITextBoxPictureProps {
+    /** URL картинки */
+    url: string;
+    /** Значение вертикальных отступов */
+    margin?: PictureMarginTypesType;
+}
+declare const TextBoxPicture: React.FC<ITextBoxPictureProps>;
+export default TextBoxPicture;

package/dist/lib/components/TextBox/TextBoxPicture.js

@@ -0,0 +1,49 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.pictureMarginTypes = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var pictureMarginTypes = {
+  DEFAULT: 'default',
+  BIG_TOP: 'big-top',
+  BIG_BOTTOM: 'big-bottom',
+  BIG_VERTICAL: 'big-vertical'
+};
+exports.pictureMarginTypes = pictureMarginTypes;
+var cn = (0, _uiHelpers.cnCreate)('mfui-text-box-picture');
+
+var TextBoxPicture = function TextBoxPicture(_ref) {
+  var url = _ref.url,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? pictureMarginTypes.DEFAULT : _ref$margin;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      margin: margin
+    })
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('img'),
+    src: url,
+    alt: ""
+  }));
+};
+
+TextBoxPicture.propTypes = {
+  url: PropTypes.string.isRequired,
+  margin: PropTypes.oneOf([pictureMarginTypes.DEFAULT, pictureMarginTypes.BIG_TOP, pictureMarginTypes.BIG_BOTTOM, pictureMarginTypes.BIG_VERTICAL])
+};
+var _default = TextBoxPicture;
+exports["default"] = _default;

package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css

@@ -5,16 +5,27 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-title-description-box {
+.mfui-title-description-box {
   font-family: inherit;
   color: #333333;
 }
-.mfui-beta-title-description-box__item:not(:last-child) {
+.mfui-title-description-box__item_header {
+  white-space: pre-wrap;
+}
+.mfui-title-description-box__item:not(:last-child) {
   margin-bottom: 16px;
 }
-.mfui-beta-title-description-box_text-color_white {
+.mfui-title-description-box_text-color_white {
   color: #FFFFFF;
 }
-.mfui-beta-title-description-box_h-align_center {
+.mfui-title-description-box_h-align_center {
   text-align: center;
 }
+.mfui-title-description-box__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-title-description-box__description :last-child {
+  margin-bottom: 0 !important;
+}

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

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import './TitleDescriptionBox.less';
 export interface ITitleDescriptionBoxProps {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Заголовок */
-    title?: string;
+    title?: string | React.ReactNode[] | React.ReactNode;
     /** Описание */
-    description?: string;
+    description?: string | React.ReactNode[] | React.ReactNode;
     /** Цвет текста */
     textColor?: 'white';
     /** Горизонтальное выравнивание */

package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -2,10 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.symbol.description");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,49 +11,73 @@ require("core-js/modules/es.symbol");
 
 require("core-js/modules/es.symbol.description");
 
-var React = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-title-description-box');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-title-description-box');
 
 var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
-  var title = _ref.title,
+  var dataAttrs = _ref.dataAttrs,
+      title = _ref.title,
       description = _ref.description,
       textColor = _ref.textColor,
       hAlign = _ref.hAlign,
+      rootRef = _ref.rootRef,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
+  var renderDescription = React.useCallback(function () {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+        className: cn('item'),
+        hasMargin: false,
+        color: "inherit"
+      }, description);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, description);
+  }, [description]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
     className: cn({
       'h-align': hAlign,
       'text-color': textColor
-    }, className)
-  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    }, className),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
     hAlign: hAlign
   }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
     wide: "8",
     desktop: "10"
   }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
-    className: cn('item'),
+    className: cn('item', {
+      header: true
+    }),
     as: "h2",
     color: "inherit"
-  }, title), description && /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-    className: cn('item'),
-    hasMargin: false,
-    color: "inherit"
-  }, description))));
+  }, title), description && renderDescription())));
 };
 
 TitleDescriptionBox.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   className: PropTypes.string,
-  title: PropTypes.string,
-  description: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
   hAlign: PropTypes.oneOf(['center']),
   textColor: PropTypes.oneOf(['white'])
 };