@megafon/ui-core 8.17.1 → 8.17.3

package/dist/es/components/Grid/GridColumn.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import './GridColumn.scss';
+export type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export interface IGridColumn {
+    /** Размер колон на разрещении 1280+ */
+    wide?: TGridSizeValues;
+    /** Размер колон на разрещении 1024 - 1279 */
+    desktop?: TGridSizeValues;
+    /** Размер колон на разрещении 768 - 1023 */
+    tablet?: TGridSizeValues;
+    /** Размер колон на разрещении 767- */
+    mobile?: TGridSizeValues;
+    /** Размер колон на всех разрешениях */
+    all?: TGridSizeValues;
+    /** Порядок на разрещении 1280+ */
+    orderWide?: string;
+    /** Порядок на разрещении 1024 - 1279 */
+    orderDesktop?: string;
+    /** Порядок на разрещении 768 - 1023 */
+    orderTablet?: string;
+    /** Порядок на разрещении 767- */
+    orderMobile?: string;
+    /** Порядок на всех разрешениях */
+    orderAll?: string;
+    /** Размер левого смещения на 1280+ */
+    leftOffsetWide?: TGridSizeValues;
+    /** Размер левого смещения на 1024 - 1279  */
+    leftOffsetDesktop?: TGridSizeValues;
+    /** Размер левого смещения на 768 - 1023 */
+    leftOffsetTablet?: TGridSizeValues;
+    /** Размер левого смещения на 767- */
+    leftOffsetMobile?: TGridSizeValues;
+    /** Размер левого смещения на всех разрешениях */
+    leftOffsetAll?: TGridSizeValues;
+    /** Размер правого смещения на 1280+ */
+    rightOffsetWide?: TGridSizeValues;
+    /** Размер правого смещения на 1024 - 1279 */
+    rightOffsetDesktop?: TGridSizeValues;
+    /** Размер правого смещения на 768 - 1023 */
+    rightOffsetTablet?: TGridSizeValues;
+    /** Размер правого смещения на 767- */
+    rightOffsetMobile?: TGridSizeValues;
+    /** Размер правого смещения на всех разрешениях */
+    rightOffsetAll?: TGridSizeValues;
+    /** Дополнительное выравние колонны */
+    align?: 'right' | 'left' | 'center';
+    /** Flex grow колонны */
+    grow?: boolean;
+    /** Сделать колонну флекс контейнером */
+    flex?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: React.ReactNode;
+}
+declare const GridColumn: React.FC<IGridColumn>;
+export default GridColumn;

package/dist/es/components/Grid/GridColumn.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./GridColumn.css";
+var cn = cnCreate('mfui-grid-column');
+var GridColumn = function GridColumn(_ref) {
+  var _ref$all = _ref.all,
+    all = _ref$all === void 0 ? '12' : _ref$all,
+    wide = _ref.wide,
+    desktop = _ref.desktop,
+    tablet = _ref.tablet,
+    mobile = _ref.mobile,
+    _ref$orderAll = _ref.orderAll,
+    orderAll = _ref$orderAll === void 0 ? '0' : _ref$orderAll,
+    _ref$orderWide = _ref.orderWide,
+    orderWide = _ref$orderWide === void 0 ? '0' : _ref$orderWide,
+    _ref$orderDesktop = _ref.orderDesktop,
+    orderDesktop = _ref$orderDesktop === void 0 ? '0' : _ref$orderDesktop,
+    _ref$orderTablet = _ref.orderTablet,
+    orderTablet = _ref$orderTablet === void 0 ? '0' : _ref$orderTablet,
+    _ref$orderMobile = _ref.orderMobile,
+    orderMobile = _ref$orderMobile === void 0 ? '0' : _ref$orderMobile,
+    leftOffsetAll = _ref.leftOffsetAll,
+    leftOffsetWide = _ref.leftOffsetWide,
+    leftOffsetDesktop = _ref.leftOffsetDesktop,
+    leftOffsetTablet = _ref.leftOffsetTablet,
+    leftOffsetMobile = _ref.leftOffsetMobile,
+    rightOffsetAll = _ref.rightOffsetAll,
+    rightOffsetWide = _ref.rightOffsetWide,
+    rightOffsetDesktop = _ref.rightOffsetDesktop,
+    rightOffsetTablet = _ref.rightOffsetTablet,
+    rightOffsetMobile = _ref.rightOffsetMobile,
+    className = _ref.className,
+    _ref$flex = _ref.flex,
+    flex = _ref$flex === void 0 ? false : _ref$flex,
+    _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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      flex: flex,
+      grow: grow,
+      align: align,
+      all: all,
+      wide: wide,
+      desktop: desktop,
+      tablet: tablet,
+      mobile: mobile,
+      'all-order': orderAll,
+      'wide-order': orderWide,
+      'desktop-order': orderDesktop,
+      'tablet-order': orderTablet,
+      'mobile-order': orderMobile,
+      'left-offset-all': leftOffsetAll,
+      'left-offset-wide': leftOffsetWide,
+      'left-offset-desktop': leftOffsetDesktop,
+      'left-offset-tablet': leftOffsetTablet,
+      'left-offset-mobile': leftOffsetMobile,
+      'right-offset-all': rightOffsetAll,
+      'right-offset-wide': rightOffsetWide,
+      'right-offset-desktop': rightOffsetDesktop,
+      'right-offset-tablet': rightOffsetTablet,
+      'right-offset-mobile': rightOffsetMobile
+    }, className)
+  }), children);
+};
+export default GridColumn;

package/dist/es/components/Header/Header.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-header{font-family:inherit;font-weight:400}.mfui-header__addition{display:inline-block;margin-left:12px}.mfui-header_level_h1{font-size:30px;font-weight:700;line-height:36px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-header_level_h1{font-size:36px;line-height:40px}}@media screen and (min-width:1024px){.mfui-header_level_h1{font-size:44px;letter-spacing:.5px;line-height:48px}}@media screen and (min-width:1280px){.mfui-header_level_h1{font-size:52px;line-height:56px}}.mfui-header_margin.mfui-header_level_h1{margin:0 0 32px}.mfui-header_level_h2{font-size:22px;font-weight:600;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-header_level_h2{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-header_level_h2{font-size:28px;letter-spacing:.5px;line-height:36px}}@media screen and (min-width:1280px){.mfui-header_level_h2{font-size:32px;line-height:40px}}.mfui-header_margin.mfui-header_level_h2{margin:56px 0 24px}.mfui-header_level_h3{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:1024px){.mfui-header_level_h3{letter-spacing:.5px}}@media screen and (min-width:1280px){.mfui-header_level_h3{font-size:20px;line-height:28px}}.mfui-header_margin.mfui-header_level_h3{margin:32px 0 24px}.mfui-header_level_h5{font-size:15px;font-weight:500;line-height:24px}.mfui-header_space_tight.mfui-header_level_h5{line-height:18px}.mfui-header_margin.mfui-header_level_h5{margin:24px 0 16px}.mfui-header_color_default{color:var(--content)}.mfui-header_color_black{color:var(--stcBlack)}.mfui-header_color_green{color:var(--brandGreen)}.mfui-header_color_purple{color:var(--brandPurple)}.mfui-header_color_white{color:var(--stcWhite)}.mfui-header_color_blue{color:var(--systemBlue)}.mfui-header_color_inherit{color:inherit}.mfui-header_h-align_left{text-align:left}.mfui-header_h-align_center{text-align:center}.mfui-header_h-align_right{text-align:right}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import './Header.scss';
+export interface IHeaderProps {
+    /** Тег (определяет базовый тег и стили) */
+    as?: 'h1' | 'h2' | 'h3' | 'h5';
+    /** Тег для семантической разметки (переопределение тега без изменения стилей) */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Поведение текста при встраивании в широкий или узкий контейнер (только для h5) */
+    space?: 'wide' | 'tight';
+    /** Цвет */
+    color?: 'default' | 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
+    /** Включить отступ */
+    margin?: boolean;
+    /** Дополнительный элемент */
+    addition?: JSX.Element;
+    /** Дополнительный класс корневого элемента */
+    className?: string | string[];
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Горизонтальное выравнивание */
+    align?: 'inherit' | 'left' | 'center' | 'right';
+    /** Дочерний элемент компонента */
+    children: React.ReactNode;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+declare const Header: React.FC<IHeaderProps>;
+export default Header;

package/dist/es/components/Header/Header.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Header.css";
+var cn = cnCreate('mfui-header');
+var Header = function Header(_ref) {
+  var addition = _ref.addition,
+    _ref$as = _ref.as,
+    level = _ref$as === void 0 ? 'h1' : _ref$as,
+    tag = _ref.tag,
+    _ref$space = _ref.space,
+    space = _ref$space === void 0 ? 'wide' : _ref$space,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    dataAttrs = _ref.dataAttrs,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'inherit' : _ref$align,
+    margin = _ref.margin,
+    onClick = _ref.onClick;
+  var ElementType = tag || level;
+  var hasVariousSpaces = level === 'h5';
+  var spaceLevel = hasVariousSpaces && space;
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      color: color,
+      margin: margin,
+      level: level,
+      'h-align': align,
+      space: spaceLevel
+    }, className),
+    onClick: onClick
+  }), children, addition && /*#__PURE__*/React.createElement("div", {
+    className: cn('addition')
+  }, addition));
+};
+export default Header;

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface ILinkProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Ссылка */
+    href?: string;
+    /** target - аргумент тега <a> */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** rel - аргумент тега <a> */
+    rel?: string;
+    /** Добавление атрибута download */
+    download?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Атрибут itemprop для микроразметки */
+    itemProp?: string;
+    children?: React.ReactNode;
+    /** Обработчик клика */
+    onClick?: (e: React.MouseEvent<EventTarget>) => void;
+}
+declare const Link: React.FC<ILinkProps>;
+export default Link;

package/dist/es/components/Link/Link.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { filterDataAttrs } from '@megafon/ui-helpers';
+var Link = function Link(_ref) {
+  var target = _ref.target,
+    href = _ref.href,
+    rel = _ref.rel,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    download = _ref.download,
+    itemProp = _ref.itemProp,
+    children = _ref.children,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("a", _extends({
+    className: className,
+    href: href,
+    target: target,
+    rel: rel,
+    download: download,
+    itemProp: itemProp,
+    onClick: onClick
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
+};
+export default Link;

package/dist/es/components/List/List.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-list{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;line-height:24px;-webkit-box-pack:start;-ms-flex-pack:start;font-style:normal;justify-content:flex-start;margin:12px 0 12px 40px}.mfui-list_h-align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-list_h-align_right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mfui-list_color_default{color:var(--content)}.mfui-list_color_black{color:var(--stcBlack)}.mfui-list_color_white{color:var(--stcWhite)}.mfui-list_color_gray{color:var(--spbSky2)}.mfui-list_color_green{color:var(--brandGreen)}.mfui-list_color_purple{color:var(--brandPurple)}.mfui-list_color_red{color:var(--fury)}.mfui-list_color_inherit{color:inherit}.mfui-list_weight_light{font-weight:300}.mfui-list_weight_regular{font-weight:400}.mfui-list_weight_bold{font-weight:600}.mfui-list__inner{margin:0;padding:0}.mfui-list__inner_type_ul{list-style:disc}.mfui-list__inner_type_ol{list-style:decimal}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import './List.scss';
+export interface IListProps {
+    /** Тип списка */
+    as?: 'ul' | 'ol';
+    /** Выравнивание по горизонтали */
+    align?: 'center' | 'right';
+    /** Жирность шрифта */
+    weight?: 'light' | 'regular' | 'bold';
+    /** Цвет */
+    color?: 'default' | 'black' | 'white' | 'gray' | 'green' | 'purple' | 'red' | 'inherit';
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const List: React.FC<IListProps>;
+export default List;

package/dist/es/components/List/List.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./List.css";
+var cn = cnCreate('mfui-list');
+var List = function List(_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'ul' : _ref$as,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
+    align = _ref.align,
+    className = _ref.className,
+    children = _ref.children;
+  var ElementType = as;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      'h-align': align,
+      color: color,
+      weight: weight
+    }, className)
+  }, /*#__PURE__*/React.createElement(ElementType, {
+    className: cn('inner', {
+      type: as
+    })
+  }, children));
+};
+export default List;

package/dist/es/components/List/ListItem.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-list-item{margin-bottom:12px}.mfui-list-item:last-child{margin-bottom:0}

package/dist/es/components/List/ListItem.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import './ListItem.scss';
+export interface IListItemProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const ListItem: React.FC<IListItemProps>;
+export default ListItem;

package/dist/es/components/List/ListItem.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./ListItem.css";
+var cn = cnCreate('mfui-list-item');
+var ListItem = function ListItem(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("li", {
+    className: cn([className])
+  }, children);
+};
+export default ListItem;

package/dist/es/components/ListData/ListData.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-list-data{background-color:transparent;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:8px 16px 8px 12px;position:relative;text-decoration:none;-webkit-transition:background-color,opacity;transition:background-color,opacity;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-list-data,.mfui-list-data__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-list-data__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}.mfui-list-data__icon-container svg{fill:var(--content)}.mfui-list-data__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-list-data__icon-container_colored svg{fill:var(--brandGreen)}.mfui-list-data__icon{height:32px;min-width:32px;width:32px}.mfui-list-data__icon_small{height:20px;min-width:20px;width: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{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-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{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-list-data__value-container{align-self:flex-start;display:grid;grid-template-columns:-webkit-min-content;grid-template-columns:min-content;padding-left:12px}.mfui-list-data__value{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:18px;max-width:110px}.mfui-list-data__value_color_green{color:var(--brandGreen)}.mfui-list-data__sub-value{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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 .3s;transition:fill .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:.5}.mfui-list-data_disabled .mfui-list-data__title-link{pointer-events:none}

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.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-list-data-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;overflow-y:hidden}.mfui-list-data-group__item_divider:not(:last-child){border-bottom:1px solid var(--spbSky1)}

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;