@megafon/ui-core 4.8.2 → 4.9.1

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;

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

@@ -142,6 +142,8 @@ var Tooltip = function Tooltip(_ref) {
   var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
   var portalElem = React.useRef(null);
   var isBigSize = size === Size.BIG;
+  var hasMainContent = !!title || !!text;
+  var hasTopContent = hasMainContent || !!buttonText;
   var clickEvent = useMemo(function () {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
@@ -160,10 +162,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
           }
         }
       }, {
@@ -183,11 +185,6 @@ var Tooltip = function Tooltip(_ref) {
         options: {
           boundary: currentBoundary
         }
-      }, {
-        name: 'offset',
-        options: {
-          offset: [0, 12]
-        }
       }]
     };
   }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
@@ -309,21 +306,27 @@ var Tooltip = function Tooltip(_ref) {
     }, text);
   }, [text]);
   var renderedFullContent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(Header, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, hasTopContent && /*#__PURE__*/React.createElement("div", {
+      className: cn('top', {
+        margin: !!children
+      })
+    }, hasMainContent && /*#__PURE__*/React.createElement("div", {
+      className: cn('main-content')
+    }, !!title && /*#__PURE__*/React.createElement(Header, {
       className: cn('title'),
       as: "h5",
       space: "tight"
-    }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement("button", _extends({
+    }, title), !!text && renderedText), !!buttonText && /*#__PURE__*/React.createElement("button", _extends({
       type: "button",
       className: cn('button')
     }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
       onClick: onClick
     }), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
       className: cn('button-arrow')
-    })), !!children && /*#__PURE__*/React.createElement("div", {
+    }))), !!children && /*#__PURE__*/React.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.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       theme: theme,
@@ -335,8 +338,6 @@ var Tooltip = function Tooltip(_ref) {
     ref: setPopperElement,
     style: styles.popper
   }, attributes.popper), /*#__PURE__*/React.createElement("div", {
-    className: cn('arrow-container')
-  }, /*#__PURE__*/React.createElement("div", {
     className: cn('arrow-wrap'),
     ref: setArrowElement,
     style: styles.arrow
@@ -344,23 +345,25 @@ var Tooltip = function Tooltip(_ref) {
     className: cn('arrow', [arrowClassName])
   }, /*#__PURE__*/React.createElement(Arrow, {
     className: cn('arrow-inner')
-  })))), /*#__PURE__*/React.createElement(Tile, {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cn('content-wrap')
+  }, /*#__PURE__*/React.createElement(Tile, {
     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.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
+  }, hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
     className: cn('close-button'),
     type: "button",
     onClick: handleCloseButtonClick
   }), /*#__PURE__*/React.createElement(CancelIcon, {
     className: cn('close-icon')
-  }))), /*#__PURE__*/React.createElement(Tile, {
+  })), isBigSize && renderedFullContent, !isBigSize && !!text && renderedText), /*#__PURE__*/React.createElement(Tile, {
     radius: "rounded",
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
-  }));
+  })));
   /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
 
   if (isPortal && !portalElem.current && typeof window !== 'undefined') {

package/dist/lib/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/lib/components/ContentArea/ContentArea.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 require("core-js/modules/es.object.values");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -19,6 +21,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var BACKGROUND_COLORS = {
   TRANSPARENT: 'transparent',
   BLACK: 'black',
@@ -45,17 +49,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", (0, _extends2["default"])({}, (0, _uiHelpers.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", (0, _extends2["default"])({}, (0, _uiHelpers.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 = {
@@ -65,6 +70,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/lib/components/Counter/Counter.js

@@ -48,7 +48,7 @@ var Counter = function Counter(_ref) {
       _ref$isControlled = _ref.isControlled,
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
       _ref$value = _ref.value,
-      value = _ref$value === void 0 ? 0 : _ref$value,
+      outerValue = _ref$value === void 0 ? 0 : _ref$value,
       initialValue = _ref.initialValue,
       _ref$max = _ref.max,
       max = _ref$max === void 0 ? 999999 : _ref$max,
@@ -64,15 +64,16 @@ var Counter = function Counter(_ref) {
 
   var _React$useState = React.useState(currentInitialValue),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      counter = _React$useState2[0],
-      setCounter = _React$useState2[1];
+      innerValue = _React$useState2[0],
+      setInnerValue = _React$useState2[1];
 
+  var currentValue = isControlled ? outerValue : innerValue;
   React.useEffect(function () {
-    setCounter(currentInitialValue);
+    setInnerValue(currentInitialValue);
   }, [currentInitialValue]);
   var handleValueChange = React.useCallback(function (inputValue) {
     if (!isControlled) {
-      setCounter(inputValue);
+      setInnerValue(inputValue);
     }
 
     if (inputValue < min) {
@@ -88,11 +89,11 @@ var Counter = function Counter(_ref) {
     }
   }, [min, max, onChange, isControlled]);
   var handleMinusClick = React.useCallback(function () {
-    handleValueChange(isControlled ? value - 1 : counter - 1);
-  }, [handleValueChange, counter, isControlled, value]);
+    handleValueChange(currentValue - 1);
+  }, [handleValueChange, currentValue]);
   var handlePlusClick = React.useCallback(function () {
-    handleValueChange(isControlled ? value + 1 : counter + 1);
-  }, [handleValueChange, counter, isControlled, value]);
+    handleValueChange(currentValue + 1);
+  }, [handleValueChange, currentValue]);
   var handleInputChange = React.useCallback(function (e) {
     var pattern = /^[0-9\b]+$/;
     var inputValue = e.target.value;
@@ -125,7 +126,7 @@ var Counter = function Counter(_ref) {
       left: true
     }, classes.buttonMinus),
     type: "button",
-    disabled: disabled || (isControlled ? value : counter) <= min,
+    disabled: disabled || currentValue <= min,
     onClick: handleMinusClick
   }), /*#__PURE__*/React.createElement(IconMinus, {
     className: cn('icon')
@@ -133,7 +134,7 @@ var Counter = function Counter(_ref) {
     className: cn('input-box')
   }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', classes.input),
-    value: isControlled ? value : counter,
+    value: currentValue,
     onChange: handleInputChange,
     onBlur: handleInputBlur,
     disabled: disabled
@@ -142,7 +143,7 @@ var Counter = function Counter(_ref) {
       right: true
     }, classes.buttonPlus),
     type: "button",
-    disabled: disabled || counter >= max || value >= max,
+    disabled: disabled || currentValue >= max,
     onClick: handlePlusClick
   }), /*#__PURE__*/React.createElement(IconPlus, {
     className: cn('icon')

package/dist/lib/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/lib/components/Grid/Grid.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 require("core-js/modules/es.array.map");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -19,6 +21,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-grid');
 
 var Grid = function Grid(_ref) {
@@ -29,10 +33,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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.container), {
     className: cn('container', {
       'multi-row': multiRow,
       'h-align': hAlign,
@@ -40,7 +45,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,
@@ -57,6 +62,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
 };
 var _default = Grid;

package/dist/lib/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/lib/components/Grid/GridColumn.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -17,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var GridSizeValues = PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);
 var cn = (0, _uiHelpers.cnCreate)('mfui-grid-column');
 
@@ -53,8 +57,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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       flex: flex,
       grow: grow,
@@ -80,7 +85,7 @@ var GridColumn = function GridColumn(_ref) {
       'right-offset-tablet': rightOffsetTablet,
       'right-offset-mobile': rightOffsetMobile
     }, className)
-  }, children);
+  }), children);
 };
 
 GridColumn.propTypes = {
@@ -103,6 +108,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
 };
 var _default = GridColumn;

package/dist/lib/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/lib/components/Logo/Logo.d.ts

@@ -4,13 +4,17 @@ export interface ILogoProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Цвет */
-    color?: string;
+    color?: 'green';
     /** Отображение */
     view?: 'horizontal' | 'vertical';
     /** Ссылка */
     href?: string;
     /** target - аргумент тега <a> */
     target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Logo: React.FC<ILogoProps>;
 export default Logo;