@megafon/ui-shared 2.0.0-beta.98 → 2.1.0

package/dist/lib/components/Instructions/Instructions.js

@@ -1,9 +1,5 @@
 "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); }
-
-require("core-js/modules/es.array.map");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,19 +9,17 @@ require("core-js/modules/es.array.map");
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _uiCore = require("@megafon/ui-core");
 
-var _react2 = require("swiper/react");
+var _uiHelpers = require("@megafon/ui-helpers");
 
-var _uiCore = require("@megafon/ui-core");
+var _htmr = _interopRequireDefault(require("htmr"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-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 _react2 = require("swiper/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -40,179 +34,229 @@ var pictureMaskTypes = {
   BLACK_IPHONE: 'black-iphone',
   WHITE_IPHONE: 'white-iphone',
   LAPTOP: 'laptop',
+  IPHONE_12: 'iphone-12',
   NONE: 'none'
 };
 exports.pictureMaskTypes = pictureMaskTypes;
-var cn = (0, _uiCore.cnCreate)('mfui-beta-instructions');
+var cn = (0, _uiHelpers.cnCreate)('mfui-instructions');
 var swiperSlideCn = cn('slide');
 
 var Instructions = function Instructions(_ref) {
-  var title = _ref.title,
+  var rootRef = _ref.rootRef,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var instructionItem = _ref$classes.instructionItem,
+      desktopInstructionItem = _ref$classes.desktopInstructionItem,
+      mobileInstructionItem = _ref$classes.mobileInstructionItem,
+      activeInstructionItem = _ref$classes.activeInstructionItem,
+      desktopItemTitle = _ref$classes.desktopItemTitle,
+      mobileItemTitle = _ref$classes.mobileItemTitle,
+      instructionItemImg = _ref$classes.instructionItemImg,
+      additionalText = _ref$classes.additionalText,
+      title = _ref.title,
       instructionItems = _ref.instructionItems,
       _ref$pictureAlign = _ref.pictureAlign,
       pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
       _ref$pictureMask = _ref.pictureMask,
-      pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask;
+      pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+      getSwiper = _ref.getSwiper,
+      text = _ref.additionalText;
 
-  var _React$useState = React.useState(),
+  var _React$useState = _react["default"].useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       swiperInstance = _React$useState2[0],
       setSwiperInstance = _React$useState2[1];
 
-  var _React$useState3 = React.useState(0),
+  var _React$useState3 = _react["default"].useState(0),
       _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
       slideIndex = _React$useState4[0],
       setSlideIndex = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-      isMobile = _React$useState6[0],
-      setIsMobile = _React$useState6[1];
-
-  var getSwiperInstance = React.useCallback(function (swiper) {
+  var getSwiperInstance = _react["default"].useCallback(function (swiper) {
     setSwiperInstance(swiper);
-  }, []);
-  var handleResize = React.useCallback(function () {
-    var isMobileScreen = window.innerWidth < _uiCore.breakpoints.desktopSmallStart;
-    setIsMobile(isMobileScreen);
-  }, []);
-  var handleArticleClick = React.useCallback(function (ind) {
+    getSwiper && getSwiper(swiper);
+  }, [getSwiper]);
+
+  var getActiveCustomClass = _react["default"].useCallback(function (articleIndex, activeIndex) {
+    if (articleIndex !== activeIndex) {
+      return undefined;
+    }
+
+    return activeInstructionItem;
+  }, [activeInstructionItem]);
+
+  var handleArticleClick = _react["default"].useCallback(function (ind) {
     return function () {
       setSlideIndex(ind);
       swiperInstance && swiperInstance.slideTo(ind);
     };
   }, [swiperInstance]);
-  var renderTitle = React.useCallback(function (resolution) {
-    return /*#__PURE__*/React.createElement(_uiCore.Header, {
-      className: cn('title', {
-        resolution: resolution
-      }),
-      as: "h2"
-    }, title);
-  }, []);
-  var renderPicture = React.useCallback(function () {
-    if (pictureMask === pictureMaskTypes.NONE) {
-      return renderSlider();
-    }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('img-wrapper')
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('device-screen')
-    }), renderSlider());
-  }, [pictureMask]);
-  var renderVideo = React.useCallback(function (mediaUrl) {
-    return /*#__PURE__*/React.createElement("video", {
+  var renderVideo = _react["default"].useCallback(function (mediaUrl) {
+    return /*#__PURE__*/_react["default"].createElement("video", {
       className: cn('swiper-img'),
       autoPlay: true,
       muted: true,
-      loop: true
-    }, /*#__PURE__*/React.createElement("source", {
+      loop: true,
+      playsInline: true
+    }, /*#__PURE__*/_react["default"].createElement("source", {
       src: mediaUrl,
       type: "video/mp4"
     }));
   }, []);
-  var renderSlider = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(_react2.Swiper, {
+
+  var renderSlider = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
       className: cn('swiper'),
       onSwiper: getSwiperInstance,
       noSwipingClass: swiperSlideCn
     }, instructionItems.map(function (_ref2, ind) {
       var mediaUrl = _ref2.mediaUrl,
           isVideo = _ref2.isVideo;
-      return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
+      return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, {
         className: swiperSlideCn,
         key: ind + mediaUrl
-      }, isVideo ? renderVideo(mediaUrl) : /*#__PURE__*/React.createElement("img", {
-        className: cn('swiper-img'),
+      }, isVideo ? renderVideo(mediaUrl) : /*#__PURE__*/_react["default"].createElement("img", {
+        className: cn('swiper-img', [instructionItemImg]),
         src: mediaUrl,
         alt: ""
       }));
     }));
-  }, [instructionItems]);
-  var renderDesktopArticles = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement("ul", {
-      className: cn('articles-list')
+  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo]);
+
+  var renderTitle = _react["default"].useCallback(function (resolution) {
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+      className: cn('title', {
+        resolution: resolution
+      }),
+      as: "h2"
+    }, title);
+  }, [title]);
+
+  var renderText = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Paragraph, {
+      className: cn('text', [additionalText]),
+      hasMargin: false
+    }, (0, _htmr["default"])(text));
+  }, [text, additionalText]);
+
+  var renderPicture = _react["default"].useCallback(function () {
+    if (pictureMask === pictureMaskTypes.NONE) {
+      return renderSlider();
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('img-wrapper')
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('device-screen')
+    }), renderSlider());
+  }, [pictureMask, renderSlider]);
+
+  var renderDesktopArticles = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement("ul", {
+      className: cn('articles-list', {
+        'text-after': !!text,
+        desktop: true
+      })
     }, instructionItems.map(function (_ref3, ind) {
       var itemTitle = _ref3.title;
-      return /*#__PURE__*/React.createElement("li", {
-        className: cn('articles-item', {
-          active: slideIndex === ind
-        }),
-        onClick: handleArticleClick(ind),
-        key: ind
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cn('articles-item-dot')
-      }, /*#__PURE__*/React.createElement("span", {
-        className: cn('articles-item-dot-number')
-      }, ind + 1)), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-        className: cn('articles-item-title'),
-        hasMargin: false
-      }, itemTitle));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        _react["default"].createElement("li", {
+          className: cn('articles-item', {
+            active: slideIndex === ind
+          }, [getActiveCustomClass(ind, slideIndex), instructionItem, desktopInstructionItem]),
+          "data-index": ind,
+          onClick: handleArticleClick(ind),
+          key: ind
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('articles-item-dot')
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: cn('articles-item-dot-number')
+        }, ind + 1)), /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('articles-item-title', [desktopItemTitle])
+        }, itemTitle))
+      );
     }));
-  }, [instructionItems, slideIndex, handleArticleClick]);
-  var renderMobileArticles = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, [desktopInstructionItem, desktopItemTitle, getActiveCustomClass, handleArticleClick, instructionItem, instructionItems, slideIndex, text]);
+
+  var renderMobileArticles = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('articles-list', {
+        mobile: true
+      })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-title-block')
     }, instructionItems.map(function (_ref4, ind) {
       var itemTitle = _ref4.title;
-      return slideIndex === ind && /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-        className: cn('articles-title'),
-        hasMargin: false,
+      return slideIndex === ind && /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('articles-title', [mobileItemTitle]),
+        "data-index": ind,
         key: ind
       }, itemTitle);
-    })), /*#__PURE__*/React.createElement("ul", {
-      className: cn('articles-dots')
+    })), /*#__PURE__*/_react["default"].createElement("ul", {
+      className: cn('articles-dots', {
+        'text-after': !!text
+      })
     }, instructionItems.map(function (_item, ind) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         key: ind,
         className: cn('articles-dot', {
           active: slideIndex === ind
-        }),
+        }, [getActiveCustomClass(ind, slideIndex), instructionItem, mobileInstructionItem]),
         onClick: handleArticleClick(ind)
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("span", {
         className: cn('articles-dot-number')
       }, ind + 1));
     })));
-  }, [instructionItems, slideIndex, handleArticleClick]);
-  React.useEffect(function () {
-    var handleSetThrottled = (0, _lodash["default"])(handleResize, 100);
-    handleResize();
-    window.addEventListener('resize', handleSetThrottled);
-    return function () {
-      window.removeEventListener('resize', handleSetThrottled);
-    };
-  }, [handleResize]);
-  return /*#__PURE__*/React.createElement("div", {
+  }, [getActiveCustomClass, handleArticleClick, instructionItem, instructionItems, mobileInstructionItem, mobileItemTitle, slideIndex, text]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: cn({
       mask: pictureMask
-    })
-  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    }),
+    ref: rootRef
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
     hAlign: "center"
-  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
     all: "12"
-  }, renderTitle('mobile'), /*#__PURE__*/React.createElement("div", {
+  }, renderTitle('mobile'), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('wrapper')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('picture', {
       align: pictureAlign
     })
-  }, renderPicture()), /*#__PURE__*/React.createElement("div", {
+  }, renderPicture()), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('articles', {
       align: pictureAlign
     })
-  }, renderTitle('desktop'), isMobile ? renderMobileArticles() : renderDesktopArticles())))));
+  }, renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText())))));
 };
 
 Instructions.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  classes: _propTypes["default"].shape({
+    instructionItem: _propTypes["default"].string,
+    desktopInstructionItem: _propTypes["default"].string,
+    mobileInstructionItem: _propTypes["default"].string,
+    activeInstructionItem: _propTypes["default"].string,
+    desktopItemTitle: _propTypes["default"].string,
+    mobileItemTitle: _propTypes["default"].string,
+    instructionItemImg: _propTypes["default"].string
+  }),
   title: _propTypes["default"].string.isRequired,
+  additionalText: _propTypes["default"].string,
   instructionItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    title: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
     mediaUrl: _propTypes["default"].string.isRequired,
     isVideo: _propTypes["default"].bool.isRequired
   }).isRequired).isRequired,
   pictureAlign: _propTypes["default"].oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
-  pictureMask: _propTypes["default"].oneOf([pictureMaskTypes.ANDROID, pictureMaskTypes.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.NONE])
+  pictureMask: _propTypes["default"].oneOf([pictureMaskTypes.ANDROID, pictureMaskTypes.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.IPHONE_12, pictureMaskTypes.NONE]),
+  getSwiper: _propTypes["default"].func
 };
 var _default = Instructions;
 exports["default"] = _default;

package/dist/lib/components/PageTitle/PageTitle.css

@@ -0,0 +1,80 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-page-title {
+  display: inline-block;
+  width: 100%;
+}
+.mfui-page-title__breadcrumbs {
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-page-title__breadcrumbs {
+    display: none;
+  }
+}
+.mfui-page-title__title {
+  margin-top: 110px;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-page-title__title {
+    margin-top: 100px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-page-title__title {
+    margin-top: 90px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-page-title__title {
+    margin-top: 45px;
+  }
+}
+.mfui-page-title__badge {
+  font-size: 12px;
+  line-height: 16px;
+  display: inline-block;
+  margin-top: 16px;
+  padding: 2px 14px;
+  color: #FFFFFF;
+  font-weight: 500;
+  background-color: #731982;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-page-title__badge_under-breadcrumbs {
+    margin-top: 32px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-page-title__badge_under-breadcrumbs {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-page-title__badge_under-breadcrumbs {
+    margin-top: 16px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-page-title__title_under-breadcrumbs {
+    margin-top: 60px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-page-title__title_under-breadcrumbs {
+    margin-top: 50px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-page-title__title_under-breadcrumbs {
+    margin-top: 45px;
+  }
+}
+.mfui-page-title__badge + .mfui-page-title__title {
+  margin-top: 8px;
+}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import './PageTitle.less';
+import { Props as BreadcrumbsType } from '../Breadcrumbs/Breadcrumbs';
+declare type Props = {
+    /** Текст заголовка */
+    title: string | React.ReactNode | React.ReactNode[];
+    /** Хлебные крошки */
+    breadcrumbs?: BreadcrumbsType['items'];
+    /** Текст бейджа */
+    badge?: string;
+    /** Растягивание компонента на всю доступную ширину */
+    isFullWidth?: boolean;
+    /** Класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        breadcrumbs?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.RefObject<HTMLDivElement>;
+};
+declare const PageTitle: React.FC<Props>;
+export default PageTitle;

package/dist/lib/components/PageTitle/PageTitle.js

@@ -0,0 +1,85 @@
+"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"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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, _uiHelpers.cnCreate)('mfui-page-title');
+
+var PageTitle = function PageTitle(_ref) {
+  var title = _ref.title,
+      breadcrumbs = _ref.breadcrumbs,
+      badge = _ref.badge,
+      _ref$isFullWidth = _ref.isFullWidth,
+      isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef;
+  var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
+  var renderPageTitle = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
+      className: cn('badge', {
+        'under-breadcrumbs': isBreadcrumbs
+      })
+    }, badge), /*#__PURE__*/React.createElement(_uiCore.Header, {
+      className: cn('title', {
+        'under-breadcrumbs': isBreadcrumbs && !badge
+      }),
+      as: "h1"
+    }, title));
+  }, [badge, title, isBreadcrumbs]);
+  var renderPageTitleWithGrid = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+      wide: "8",
+      desktop: "10",
+      tablet: "12",
+      mobile: "12"
+    }, renderPageTitle()));
+  }, [renderPageTitle]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className]),
+    ref: rootRef
+  }, (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+    items: breadcrumbs,
+    className: cn('breadcrumbs', [classes.breadcrumbs])
+  }), isFullWidth ? renderPageTitle() : renderPageTitleWithGrid());
+};
+
+PageTitle.propTypes = {
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+  breadcrumbs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    href: _propTypes["default"].string
+  }).isRequired),
+  badge: _propTypes["default"].string,
+  isFullWidth: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    breadcrumbs: _propTypes["default"].string
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])])
+};
+var _default = PageTitle;
+exports["default"] = _default;

package/dist/lib/components/Partners/Partners.css

@@ -5,58 +5,49 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-partners__tile:not(:last-child) {
+.mfui-partners__tile:not(:last-child) {
   margin-bottom: 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-partners__tile:not(:last-child) {
+  .mfui-partners__tile:not(:last-child) {
     margin-bottom: 16px;
   }
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-partners__slide .mfui-beta-partners__tile {
-    width: 153px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-partners__slide .mfui-beta-partners__tile {
-    width: 120px;
-  }
-}
-.mfui-beta-partners__tile-inner {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+.mfui-partners__tile-inner {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  min-height: 132px;
+  height: 132px;
   padding: 28px 48px;
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-partners__tile-inner {
-    min-height: 104px;
+  .mfui-partners__tile-inner {
+    height: 104px;
     padding: 22px 37px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-partners__tile-inner {
-    min-height: 77px;
+  .mfui-partners__tile-inner {
+    height: 77px;
     padding: 10px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-partners__tile-inner {
-    min-height: 60px;
+  .mfui-partners__tile-inner {
+    height: 60px;
     padding: 8px;
   }
 }
-.mfui-beta-partners__tile-img {
+.mfui-partners__img-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.mfui-partners__tile-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   max-width: 100%;
-  display: block;
+  max-height: 100%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
 }

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

@@ -3,8 +3,20 @@ import './Partners.less';
 export declare type ItemType = {
     src: string;
     href?: string;
+    alt: string;
 };
 export interface IPartnersProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        itemClass?: string;
+    };
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Список логотипов */
@@ -14,7 +26,7 @@ export interface IPartnersProps {
     /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */
     onPrevClick?: (index: number) => void;
     /** Обработчик смены слайда (должен быть обернут в useCallback) */
-    onChange?: (index: number) => void;
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
 }
 declare const Partners: React.FC<IPartnersProps>;
 export default Partners;