@megafon/ui-core 6.0.0-beta.1 → 6.0.0-beta.2

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

@@ -24,8 +24,6 @@ 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,25 @@ 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;
+    children?: React.ReactNode;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
@@ -74,7 +80,6 @@ export interface IBannerProps {
     onDotClick?: (index: number) => void;
     /** Обработчик смены слайда (должен быть обернут в useCallback) */
     onChange?: (index: number) => void;
-    children?: React.ReactNode;
 }
 declare const Banner: React.FC<IBannerProps>;
 export default Banner;

package/dist/es/components/Banner/Banner.js

@@ -8,6 +8,7 @@ import { Autoplay } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import BannerDot from "./BannerDot";
+import SLIDES_SETTINGS from "./slidesSettings";
 import "./Banner.css";
 export var BackgroundColor = {
   TRANSPARENT: 'transparent',
@@ -38,6 +39,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,
@@ -46,26 +48,27 @@ 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 ? ArrowTheme.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 ? ArrowTheme.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 isSingleSlide = React.Children.count(children) === 1;
+  var canAutoPlay = autoPlay && !isSingleSlide;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isTouch = _React$useState2[0],
@@ -82,7 +85,7 @@ var Banner = function Banner(_ref) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     isEnd = _React$useState8[0],
     setEnd = _React$useState8[1];
-  var _React$useState9 = React.useState(autoPlay),
+  var _React$useState9 = React.useState(canAutoPlay),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
     isAutoPlaying = _React$useState10[0],
     setAutoPlaying = _React$useState10[1];
@@ -98,14 +101,13 @@ var Banner = function Banner(_ref) {
     _React$useState16 = _slicedToArray(_React$useState15, 2),
     isIncreasedDelay = _React$useState16[0],
     setIsIncreasedDelay = _React$useState16[1];
-  var isSingleSlide = React.Children.count(children) === 1;
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
   var dotTimerDelay = delay / 1000;
   var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
       autoplay = _ref2.autoplay;
-    if (_typeof(params.autoplay) !== 'object' || !autoPlay) {
+    if (_typeof(params.autoplay) !== 'object' || !canAutoPlay || noIncreaseAutoplayDelay) {
       return;
     }
     autoplay.stop();
@@ -114,7 +116,7 @@ var Banner = function Banner(_ref) {
     setDelay(autoPlayDelay * 3);
     setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlay, autoPlayDelay]);
+  }, [canAutoPlay, autoPlayDelay, noIncreaseAutoplayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -172,7 +174,7 @@ var Banner = function Banner(_ref) {
   }, []);
   React.useEffect(function () {
     var rootElement = rootRef.current;
-    if (!pauseOnHover || !autoPlay) {
+    if (!pauseOnHover || !canAutoPlay) {
       return;
     }
     rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
@@ -183,36 +185,16 @@ var Banner = function Banner(_ref) {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
       setAutoPlaying(true);
     });
-  }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, 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(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
-    className: cn('swiper', [classes.swiper]),
-    loop: loop,
-    autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
-    onSwiper: handleSwiper,
-    onReachBeginning: handleReachBeginning,
-    onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge,
-    onSlideChange: handleSlideChange,
-    onTouchEnd: increaseAutoplayDelay,
-    modules: [Autoplay],
-    watchSlidesProgress: true
-  }), React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, 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, {
+  }, [canAutoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
+  React.useEffect(function () {
+    setAutoPlaying(canAutoPlay);
+    if (canAutoPlay) {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+      return;
+    }
+    swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+  }, [canAutoPlay, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
+  var renderNavArrows = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
     className: cn('arrow', {
       prev: true,
       theme: arrowTheme
@@ -235,9 +217,9 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: arrowTheme
-  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
+  }));
+  var renderPagination = /*#__PURE__*/React.createElement("div", _extends({}, 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) {
@@ -251,9 +233,41 @@ var Banner = function Banner(_ref) {
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
-      theme: navTheme,
       onClick: handleDotClick
     });
-  }))));
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({}, 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(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
+    className: cn('swiper', [classes.swiper]),
+    loop: loop,
+    autoplay: canAutoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesProgress: true,
+    noSwipingClass: classes.noSwiping,
+    breakpoints: showNextSlide ? SLIDES_SETTINGS : undefined,
+    onSwiper: handleSwiper,
+    onReachBeginning: handleReachBeginning,
+    onReachEnd: handleReachEnd,
+    onFromEdge: handleFromEdge,
+    onSlideChange: handleSlideChange,
+    onTouchEnd: increaseAutoplayDelay,
+    modules: [Autoplay]
+  }), React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, 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);
 };
 export default Banner;

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

@@ -1,18 +1,11 @@
 import * as React from 'react';
 import './BannerDot.scss';
-export declare const BannerDotTheme: {
-    readonly LIGHT: "light";
-    readonly DARK: "dark";
-};
-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/es/components/Banner/BannerDot.js

@@ -2,10 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./BannerDot.css";
-export var BannerDotTheme = {
-  LIGHT: 'light',
-  DARK: 'dark'
-};
 var cn = cnCreate('mfui-banner-dot');
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,
@@ -14,8 +10,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);
@@ -23,21 +17,20 @@ var BannerDot = function BannerDot(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, 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", _extends({
+  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
     className: cn('timer'),
-    viewBox: "0 0 300 100"
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    viewBox: "0 0 250 100"
+  }), /*#__PURE__*/React.createElement("rect", _extends({}, 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"

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

@@ -0,0 +1,7 @@
+declare const SLIDES_SETTINGS: {
+    [x: number]: {
+        slidesPerView: number;
+        spaceBetween: number;
+    };
+};
+export default SLIDES_SETTINGS;

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

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { breakpoints } from '@megafon/ui-helpers';
+var SLIDES_SETTINGS = _defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 1,
+  spaceBetween: 0
+});
+export default SLIDES_SETTINGS;

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

@@ -22,6 +22,7 @@ export interface IContentViewProps {
         title?: string;
         button?: string;
         link?: string;
+        bgImage?: string;
     };
     /** Заголовок */
     title: string;

package/dist/es/components/ContentView/ContentView.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.link.js";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, convert, filterDataAttrs, titleConvertConfig } from '@megafon/ui-helpers';
 import Button from "../Button/Button";
 import "./ContentView.css";
 var cn = cnCreate('mfui-content-view');
@@ -29,14 +29,14 @@ var ContentView = function ContentView(_ref) {
   }, !!type && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.bgImage), {
     className: cn('bg-image', {
       type: type
-    })
+    }, [classes.bgImage])
   })), !!src && !type && /*#__PURE__*/React.createElement("img", {
     className: cn('image'),
     src: src,
     alt: alt
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('title', [classes.title])
-  }, title), !!children && /*#__PURE__*/React.createElement("div", {
+  }, convert(title, titleConvertConfig)), !!children && /*#__PURE__*/React.createElement("div", {
     className: cn('text')
   }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
     className: cn('buttons')

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import './ListData.scss';
+type Target = '_self' | '_blank' | '_parent' | '_top';
+export type TitlePropsType = {
+    /** Текст заголовка */
+    text: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: Target;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+declare const ValueColors: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+};
+export type ValueColorsType = (typeof ValueColors)[keyof typeof ValueColors];
+declare const Actions: {
+    readonly DELETE: "delete";
+    readonly CONTROL: "control";
+};
+export 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 default ListData;

package/dist/es/components/ListData/ListData.js

@@ -0,0 +1,160 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.parse-int.js";
+import * as React from 'react';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
+import "./ListData.css";
+var DeleteIcon = function DeleteIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4h-3.2c-.4-1.2-1.5-2-2.8-2s-2.4.8-2.8 2H4v4h1l1 10h8l1-10h1V4zM5 5h3v-.4C8.2 3.7 9.1 3 10 3s1.8.7 2 1.6V5h3v2H5V5zm8 12H7l-.9-9H14l-1 9z"
+  }));
+};
+var NothingIcon = function NothingIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("circle", {
+    cx: 21,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 11,
+    cy: 16,
+    r: 1.5
+  }));
+};
+var LINE_COUNT = 2;
+var ValueColors = {
+  DEFAULT: 'default',
+  GREEN: 'green'
+};
+var Actions = {
+  DELETE: 'delete',
+  CONTROL: 'control'
+};
+var cn = cnCreate('mfui-list-data');
+var ListData = function ListData(_ref) {
+  var title = _ref.title,
+    subTitle = _ref.subTitle,
+    value = _ref.value,
+    valueColor = _ref.valueColor,
+    subValue = _ref.subValue,
+    icon = _ref.icon,
+    _ref$isIconColored = _ref.isIconColored,
+    isIconColored = _ref$isIconColored === void 0 ? false : _ref$isIconColored,
+    avatar = _ref.avatar,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    actionType = _ref.actionType,
+    onClick = _ref.onClick,
+    onAction = _ref.onAction,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  var valueRef = React.useRef(null);
+  var _React$useState = React.useState('right'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    valueAlignment = _React$useState2[0],
+    setValueAlignment = _React$useState2[1];
+  var isActive = !!onClick && !(_typeof(title) === 'object' && (title === null || title === void 0 ? void 0 : title.href));
+  var showActionElement = !!actionType || !!children;
+  var handleClick = function handleClick(e) {
+    !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e));
+  };
+  var handleAction = React.useCallback(function (e) {
+    e.stopPropagation();
+    !disabled && (onAction === null || onAction === void 0 ? void 0 : onAction(e));
+  }, [disabled, onAction]);
+  React.useEffect(function () {
+    if (!valueRef.current) {
+      return;
+    }
+    var lineHeight = parseInt(getComputedStyle(valueRef.current).lineHeight, 10);
+    var actualHeight = valueRef.current.offsetHeight;
+    var currentLineCount = actualHeight / lineHeight;
+    setValueAlignment(currentLineCount >= LINE_COUNT ? 'left' : 'right');
+  }, [value]);
+  var renderedTitle = /*#__PURE__*/React.createElement("div", {
+    className: cn('title', [classes.title])
+  }, typeof title === 'string' ? title : /*#__PURE__*/React.createElement("a", {
+    className: cn('title-link'),
+    href: title.href,
+    target: title === null || title === void 0 ? void 0 : title.target,
+    rel: title === null || title === void 0 ? void 0 : title.rel
+  }, title.text));
+  var renderIcon = function renderIcon() {
+    if (!icon && !avatar) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', {
+        colored: isIconColored && !avatar
+      })
+    }, avatar || /*#__PURE__*/React.createElement("div", {
+      className: cn('icon')
+    }, icon));
+  };
+  var renderExtraContent = function renderExtraContent() {
+    if (children) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('children', {
+          'event-none': !!onClick
+        })
+      }, children);
+    }
+    if (value) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('value-container')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cn('value', {
+          color: valueColor
+        }),
+        ref: valueRef,
+        style: {
+          textAlign: valueAlignment
+        }
+      }, convert(value, textConvertConfig)), !!subValue && /*#__PURE__*/React.createElement("div", {
+        className: cn('sub-value')
+      }, subValue));
+    }
+    if (actionType) {
+      var isDelete = actionType === Actions.DELETE;
+      var ActionIcon = isDelete ? DeleteIcon : NothingIcon;
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: cn('icon', {
+          small: isDelete
+        })
+      }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.actionIcon), {
+        onClick: handleAction
+      }), /*#__PURE__*/React.createElement(ActionIcon, {
+        className: cn('action-icon', {
+          active: !disabled
+        })
+      }));
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      active: isActive,
+      disabled: disabled
+    }, [className, classes.root]),
+    onClick: handleClick
+  }), renderIcon(), /*#__PURE__*/React.createElement("div", {
+    className: cn('header', {
+      gap: showActionElement,
+      align: !!subTitle
+    })
+  }, renderedTitle, !!subTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title', [classes.subtitle])
+  }, subTitle)), renderExtraContent());
+};
+export default ListData;

package/dist/es/components/ListData/ListDataGroup.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import { ActivatorNodesType, GapSizesType } from './components/ListDataSortable';
+import { IListDataProps } from './ListData';
+import './ListDataGroup.scss';
+export type ListItemPropsType = IListDataProps & {
+    id: string | number;
+};
+type DragOverlayPropsType = {
+    className?: string;
+    zIndex?: number;
+};
+export interface IListDataGroupProps {
+    /** Массив элементов */
+    items: ListItemPropsType[];
+    /** Активатор события перетаскивания */
+    activatorNode?: ActivatorNodesType;
+    /** Отступ между элементами */
+    gap?: GapSizesType;
+    /** Показать разделитель */
+    showDivider?: boolean;
+    /** Обработчик начала процесса перетаскивания */
+    onDragStart?: (event?: DragStartEvent) => void;
+    /** Обработчик окончания процесса перетаскивания */
+    onDragEnd?: (items: ListItemPropsType[], event?: DragEndEvent) => void;
+    /** Отключить перетаскивание */
+    disabled?: boolean;
+    /** Параметры DragOverlay элемента */
+    dragOverlayProps?: DragOverlayPropsType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        cell?: string;
+        control?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        cell?: Record<string, string>;
+        control?: Record<string, string>;
+    };
+}
+declare const ListDataGroup: React.FC<IListDataGroupProps>;
+export default ListDataGroup;