@megafon/ui-core 5.16.0 → 5.17.0

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

@@ -24,8 +24,6 @@ declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
-    /** Прокрутка с зацикливанием */
-    loop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         swiper?: string;
@@ -35,6 +33,7 @@ export interface IBannerProps {
         arrowNext?: string;
         pagination?: string;
         dot?: string;
+        noSwiping?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -52,18 +51,24 @@ export interface IBannerProps {
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */
     autoPlayDelay?: number;
+    /** Прокрутка с зацикливанием */
+    loop?: boolean;
     /** Пауза автоматической прокрутки при наведении курсора на компонент */
     pauseOnHover?: boolean;
     /** Фоновый цвет */
     backgroundColor?: BackgroundColorType;
     /** Радиус границы */
     radius?: RadiusType;
-    /** Цветовая тема навигации */
+    /** Цветовая тема навигации (не используется) */
     navTheme?: NavThemeType;
     /** Цветовая тема стрелок */
     arrowTheme?: ArrowThemeType;
     /** Автоматическая высота слайдов */
     autoHeight?: boolean;
+    /** Не увеличивать время прокрутки при взаимодействии с баннером */
+    noIncreaseAutoplayDelay?: boolean;
+    /** Показать часть следующего слайда */
+    showNextSlide?: boolean;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

package/dist/lib/components/Banner/Banner.js

@@ -31,6 +31,8 @@ var _NavArrow = _interopRequireWildcard(require("../NavArrow/NavArrow"));
 
 var _BannerDot = _interopRequireDefault(require("./BannerDot"));
 
+var _slidesSettings = _interopRequireDefault(require("./slidesSettings"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -74,6 +76,7 @@ var Banner = function Banner(_ref) {
   var className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
       _ref$withPaginationBo = _ref.withPaginationBottomOffset,
       withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
       _ref$autoPlay = _ref.autoPlay,
@@ -82,26 +85,25 @@ var Banner = function Banner(_ref) {
       autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
       _ref$loop = _ref.loop,
       loop = _ref$loop === void 0 ? false : _ref$loop,
-      _ref$navTheme = _ref.navTheme,
-      navTheme = _ref$navTheme === void 0 ? NavTheme.LIGHT : _ref$navTheme,
-      _ref$arrowTheme = _ref.arrowTheme,
-      arrowTheme = _ref$arrowTheme === void 0 ? _NavArrow.Theme.DARK : _ref$arrowTheme,
+      _ref$pauseOnHover = _ref.pauseOnHover,
+      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover,
       _ref$backgroundColor = _ref.backgroundColor,
       backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
       _ref$radius = _ref.radius,
       radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
+      _ref$arrowTheme = _ref.arrowTheme,
+      arrowTheme = _ref$arrowTheme === void 0 ? _NavArrow.Theme.DARK : _ref$arrowTheme,
       _ref$autoHeight = _ref.autoHeight,
       autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
+      noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
+      showNextSlide = _ref.showNextSlide,
       _ref$children = _ref.children,
       children = _ref$children === void 0 ? [] : _ref$children,
       getSwiper = _ref.getSwiper,
       onNextClick = _ref.onNextClick,
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
-      onChange = _ref.onChange,
-      dataAttrs = _ref.dataAttrs,
-      _ref$pauseOnHover = _ref.pauseOnHover,
-      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
+      onChange = _ref.onChange;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -151,7 +153,7 @@ var Banner = function Banner(_ref) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
-    if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !autoPlay) {
+    if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !autoPlay || noIncreaseAutoplayDelay) {
       return;
     }
 
@@ -161,7 +163,7 @@ var Banner = function Banner(_ref) {
     setDelay(autoPlayDelay * 3);
     setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlay, autoPlayDelay]);
+  }, [autoPlay, autoPlayDelay, noIncreaseAutoplayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -238,34 +240,17 @@ var Banner = function Banner(_ref) {
       setAutoPlaying(true);
     });
   }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn({
-      'nav-theme': navTheme,
-      'auto-height': autoHeight,
-      'background-color': backgroundColor,
-      'no-touch': !isTouch,
-      radius: radius
-    }, className),
-    ref: rootRef
-  }), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
-    className: cn('swiper', [classes.swiper]),
-    loop: loop,
-    autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
-    watchSlidesVisibility: true,
-    onSwiper: handleSwiper,
-    onReachBeginning: handleReachBeginning,
-    onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge,
-    onSlideChange: handleSlideChange,
-    onTouchEnd: increaseAutoplayDelay
-  }), React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
-      className: cn('slide', [classes.slide]),
-      key: i
-    }), /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
-      hasBottomOffset: !isSingleSlide
-    }));
-  })), !isSingleSlide && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_NavArrow["default"], {
+  React.useEffect(function () {
+    setAutoPlaying(autoPlay);
+
+    if (autoPlay) {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+      return;
+    }
+
+    swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+  }, [autoPlay, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
+  var renderNavArrows = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_NavArrow["default"], {
     className: cn('arrow', {
       prev: true,
       theme: arrowTheme
@@ -288,9 +273,9 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: arrowTheme
-  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
+  }));
+  var renderPagination = /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
-      theme: navTheme,
       'bottom-offset': withPaginationBottomOffset
     }, [classes.pagination])
   }), React.Children.map(children, function (_, i) {
@@ -304,15 +289,45 @@ var Banner = function Banner(_ref) {
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
-      theme: navTheme,
       onClick: handleDotClick
     });
-  }))));
+  }));
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'auto-height': autoHeight,
+      'background-color': backgroundColor,
+      'no-touch': !isTouch,
+      radius: radius,
+      'show-next-slide': showNextSlide
+    }, className),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('swiper-container')
+  }, /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
+    className: cn('swiper', [classes.swiper]),
+    loop: loop,
+    autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesVisibility: true,
+    noSwipingClass: classes.noSwiping,
+    breakpoints: showNextSlide ? _slidesSettings["default"] : undefined,
+    onSwiper: handleSwiper,
+    onReachBeginning: handleReachBeginning,
+    onReachEnd: handleReachEnd,
+    onFromEdge: handleFromEdge,
+    onSlideChange: handleSlideChange,
+    onTouchEnd: increaseAutoplayDelay
+  }), React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
+      className: cn('slide', [classes.slide]),
+      key: i
+    }), /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
+      className: cn('slide-content', [child === null || child === void 0 ? void 0 : child.props.className])
+    }));
+  })), !isSingleSlide && renderNavArrows), !isSingleSlide && renderPagination);
 };
 
 Banner.propTypes = {
   className: PropTypes.string,
-  loop: PropTypes.bool,
   classes: PropTypes.shape({
     swiper: PropTypes.string,
     slide: PropTypes.string,
@@ -320,7 +335,8 @@ Banner.propTypes = {
     arrowPrev: PropTypes.string,
     arrowNext: PropTypes.string,
     pagination: PropTypes.string,
-    dot: PropTypes.string
+    dot: PropTypes.string,
+    noSwiping: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -334,12 +350,15 @@ Banner.propTypes = {
   withPaginationBottomOffset: PropTypes.bool,
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
+  loop: PropTypes.bool,
   pauseOnHover: PropTypes.bool,
   backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
   radius: PropTypes.oneOf(Object.values(Radius)),
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
   arrowTheme: PropTypes.oneOf(Object.values(_NavArrow.Theme)),
   autoHeight: PropTypes.bool,
+  noIncreaseAutoplayDelay: PropTypes.bool,
+  showNextSlide: PropTypes.bool,
   getSwiper: PropTypes.func,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,

package/dist/lib/components/Banner/BannerDot.css

@@ -11,6 +11,7 @@
           justify-content: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  margin: -2px;
   padding: 2px;
   cursor: pointer;
 }
@@ -20,33 +21,25 @@
   width: 8px;
   height: 8px;
   border-radius: 4px;
-  background-color: var(--stcWhite50);
-}
-.mfui-banner-dot_theme_light.mfui-banner-dot_active:before {
-  background-color: var(--stcWhite);
-}
-.mfui-banner-dot_theme_light.mfui-banner-dot_active .mfui-banner-dot__timer-inner {
-  fill: var(--stcWhite);
-}
-.mfui-banner-dot_theme_dark.mfui-banner-dot_active:before {
-  background-color: var(--brandGreen);
-}
-.mfui-banner-dot_theme_dark.mfui-banner-dot_active .mfui-banner-dot__timer-inner {
-  fill: var(--brandGreen);
+  background-color: var(--spbSky2);
 }
 .mfui-banner-dot_active {
   cursor: default;
 }
 .mfui-banner-dot_active:before {
-  width: 24px;
+  width: 20px;
+  background-color: var(--brandGreen);
+}
+.mfui-banner-dot_active .mfui-banner-dot__timer-inner {
+  fill: var(--brandGreen);
 }
 .mfui-banner-dot_active.mfui-banner-dot_timer:before {
-  background-color: var(--stcWhite50);
+  background-color: var(--spbSky2);
 }
 .mfui-banner-dot__timer {
   position: absolute;
   display: block;
-  width: 24px;
+  width: 20px;
   height: 8px;
   border-radius: 4px;
 }

package/dist/lib/components/Banner/BannerDot.d.ts

@@ -1,18 +1,11 @@
 import * as React from 'react';
 import './BannerDot.less';
-export declare const BannerDotTheme: {
-    readonly LIGHT: "light";
-    readonly DARK: "dark";
-};
-declare type BannerDotThemeType = typeof BannerDotTheme[keyof typeof BannerDotTheme];
 export interface IBannerDotProps {
     className?: string;
     index: number;
     isActive: boolean;
     showTimer: boolean;
     timerDelay: number;
-    /** Цветовая тема */
-    theme?: BannerDotThemeType;
     dataAttrs?: {
         root?: Record<string, string>;
         svg?: Record<string, string>;

package/dist/lib/components/Banner/BannerDot.js

@@ -5,12 +5,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.BannerDotTheme = void 0;
+exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-require("core-js/modules/es.object.values.js");
-
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -23,11 +21,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var BannerDotTheme = {
-  LIGHT: 'light',
-  DARK: 'dark'
-};
-exports.BannerDotTheme = BannerDotTheme;
 var cn = (0, _uiHelpers.cnCreate)('mfui-banner-dot');
 
 var BannerDot = function BannerDot(_ref) {
@@ -37,8 +30,6 @@ var BannerDot = function BannerDot(_ref) {
       isActive = _ref.isActive,
       showTimer = _ref.showTimer,
       timerDelay = _ref.timerDelay,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? BannerDotTheme.LIGHT : _ref$theme,
       onClick = _ref.onClick;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
@@ -46,21 +37,20 @@ var BannerDot = function BannerDot(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      timer: showTimer,
-      theme: theme
+      timer: showTimer
     }, className),
     onClick: handleDotClick
-  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
     className: cn('timer'),
-    viewBox: "0 0 300 100"
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("rect", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    viewBox: "0 0 250 100"
+  }), /*#__PURE__*/React.createElement("rect", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: cn('timer-inner'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
     },
     x: "0",
     y: "0",
-    width: "300",
+    width: "250",
     height: "100",
     rx: "50",
     ry: "50"
@@ -78,7 +68,6 @@ BannerDot.propTypes = {
   isActive: PropTypes.bool.isRequired,
   showTimer: PropTypes.bool.isRequired,
   timerDelay: PropTypes.number.isRequired,
-  theme: PropTypes.oneOf(Object.values(BannerDotTheme)),
   onClick: PropTypes.func.isRequired
 };
 var _default = BannerDot;

package/dist/lib/components/Banner/slidesSettings.d.ts

@@ -0,0 +1,5 @@
+import type { SwiperOptions } from 'swiper';
+declare const SLIDES_SETTINGS: {
+    [width: number]: SwiperOptions;
+};
+export default SLIDES_SETTINGS;

package/dist/lib/components/Banner/slidesSettings.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _SLIDES_SETTINGS;
+
+var SLIDES_SETTINGS = (_SLIDES_SETTINGS = {}, (0, _defineProperty2["default"])(_SLIDES_SETTINGS, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), (0, _defineProperty2["default"])(_SLIDES_SETTINGS, _uiHelpers.breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 1,
+  spaceBetween: 0
+}), _SLIDES_SETTINGS);
+var _default = SLIDES_SETTINGS;
+exports["default"] = _default;

package/dist/lib/components/Button/Button.css

@@ -447,6 +447,9 @@
 .mfui-button_content-type_icon-text .mfui-button__icon {
   margin-right: 4px;
 }
+.mfui-button_content-type_icon-text:not(.mfui-button_type_text) .mfui-button__text {
+  margin-right: 4px;
+}
 .mfui-button_type_text.mfui-button_theme_green {
   width: -webkit-fit-content;
   width: -moz-fit-content;

package/dist/lib/components/ListData/ListData.css

@@ -0,0 +1,162 @@
+.mfui-list-data {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 8px 16px 8px 12px;
+  border: none;
+  color: var(--content);
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-transition: background-color, opacity;
+  transition: background-color, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-list-data__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}
+.mfui-list-data__icon-container svg {
+  fill: var(--content);
+}
+.mfui-list-data__icon-container_colored {
+  border-radius: 50%;
+  background-color: var(--brandGreen20);
+}
+.mfui-list-data__icon-container_colored svg {
+  fill: var(--brandGreen);
+}
+.mfui-list-data__icon {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+.mfui-list-data__icon_small {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+.mfui-list-data__header {
+  display: grid;
+  grid-template-columns: 100%;
+  margin-right: auto;
+  padding-left: 4px;
+}
+.mfui-list-data__header_gap {
+  padding-right: 8px;
+}
+.mfui-list-data__header_align {
+  -ms-flex-item-align: end;
+      align-self: flex-end;
+}
+.mfui-list-data__title {
+  font-size: 15px;
+  line-height: 24px;
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-weight: 500;
+  line-height: 18px;
+}
+.mfui-list-data__title-link {
+  color: var(--content);
+}
+.mfui-list-data__sub-title {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 4px;
+  overflow: hidden;
+  color: var(--spbSky3);
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mfui-list-data__value-container {
+  display: grid;
+  grid-template-columns: -webkit-min-content;
+  grid-template-columns: min-content;
+  align-self: flex-start;
+  padding-left: 12px;
+}
+.mfui-list-data__value {
+  font-size: 15px;
+  line-height: 24px;
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-width: 110px;
+  line-height: 18px;
+}
+.mfui-list-data__value_color_green {
+  color: var(--brandGreen);
+}
+.mfui-list-data__sub-value {
+  font-size: 12px;
+  line-height: 18px;
+  max-width: 110px;
+  margin-top: 4px;
+  overflow: hidden;
+  color: var(--spbSky3);
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mfui-list-data__action-icon {
+  fill: var(--spbSky3);
+}
+.mfui-list-data__action-icon_active {
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-transition: fill 0.3s;
+  transition: fill 0.3s;
+}
+.mfui-list-data__action-icon_active:hover {
+  fill: var(--content);
+}
+.mfui-list-data__children_event-none {
+  pointer-events: none;
+}
+.mfui-list-data_active:not(.mfui-list-data_disabled) {
+  border-radius: 12px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.mfui-list-data_active:not(.mfui-list-data_disabled):hover {
+  background-color: var(--spbSky0);
+}
+.mfui-list-data_disabled {
+  opacity: 0.5;
+}
+.mfui-list-data_disabled .mfui-list-data__title-link {
+  pointer-events: none;
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import './ListData.less';
+declare type Target = '_self' | '_blank' | '_parent' | '_top';
+export declare type TitlePropsType = {
+    /** Текст заголовка */
+    text: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: Target;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+declare const ValueColors: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+};
+export declare type ValueColorsType = typeof ValueColors[keyof typeof ValueColors];
+declare const Actions: {
+    readonly DELETE: "delete";
+    readonly CONTROL: "control";
+};
+export declare type ActionsType = typeof Actions[keyof typeof Actions];
+export interface IListDataProps {
+    /** Заголовок */
+    title: string | TitlePropsType;
+    /** Подзаголовок */
+    subTitle?: string;
+    /** Значение */
+    value?: string;
+    /** Цвет */
+    valueColor?: ValueColorsType;
+    /** Дополнительное значение */
+    subValue?: string;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Фоновая заливка у иконки */
+    isIconColored?: boolean;
+    /** Аватар */
+    avatar?: JSX.Element;
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Элемент дополнительного действия */
+    actionType?: ActionsType;
+    /** Обработчик дополнительного действия */
+    onAction?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        actionIcon?: Record<string, string>;
+    };
+    /** Дочерние элементы: Button, Selector */
+    children?: React.ReactNode;
+}
+declare const ListData: React.FC<IListDataProps>;
+export declare const ListDataPropType: {
+    title: PropTypes.Validator<string | PropTypes.InferProps<{
+        text: PropTypes.Validator<string>;
+        href: PropTypes.Validator<string>;
+        target: PropTypes.Requireable<string>;
+        rel: PropTypes.Requireable<string>;
+    }>>;
+    subTitle: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string>;
+    valueColor: PropTypes.Requireable<"default" | "green">;
+    subValue: PropTypes.Requireable<string>;
+    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    isIconColored: PropTypes.Requireable<boolean>;
+    avatar: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    disabled: PropTypes.Requireable<boolean>;
+    actionType: PropTypes.Requireable<"delete" | "control">;
+    onAction: PropTypes.Requireable<(...args: any[]) => any>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    className: PropTypes.Requireable<string>;
+    classes: PropTypes.Requireable<{
+        [x: string]: string | null | undefined;
+    }>;
+    dataAttrs: PropTypes.Requireable<{
+        [x: string]: object | null | undefined;
+    }>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+};
+export default ListData;