@megafon/ui-core 6.0.0-beta.4 → 6.0.1

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

@@ -1,20 +1,34 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 _uiHelpers = require("@megafon/ui-helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+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 || _typeof(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; }
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-list-item');
+
 var ListItem = function ListItem(_ref) {
   var className = _ref.className,
-    children = _ref.children;
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("li", {
     className: cn([className])
   }, children);
 };
-var _default = exports["default"] = ListItem;
+
+ListItem.propTypes = {
+  className: PropTypes.string
+};
+var _default = ListItem;
+exports["default"] = _default;

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

@@ -1 +1,162 @@
-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}
+.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

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import './ListData.scss';
-type Target = '_self' | '_blank' | '_parent' | '_top';
-export type TitlePropsType = {
+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;
     /** Ссылка */
@@ -15,12 +16,12 @@ declare const ValueColors: {
     readonly DEFAULT: "default";
     readonly GREEN: "green";
 };
-export type ValueColorsType = (typeof ValueColors)[keyof typeof ValueColors];
+export declare 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 declare type ActionsType = typeof Actions[keyof typeof Actions];
 export interface IListDataProps {
     /** Заголовок */
     title: string | TitlePropsType;
@@ -63,4 +64,31 @@ export interface IListDataProps {
     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;

package/dist/lib/components/ListData/ListData.js

@@ -1,43 +1,60 @@
 "use strict";
 
-function _typeof3(o) { "@babel/helpers - typeof"; return _typeof3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof3(o); }
+function _typeof3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof3 = function _typeof3(obj) { return typeof obj; }; } else { _typeof3 = function _typeof3(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof3(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ListDataPropType = void 0;
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 require("core-js/modules/es.parse-int.js");
-var React = _interopRequireWildcard(require("react"));
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+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; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var DeleteIcon = function DeleteIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/_react["default"].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", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("circle", {
+  }, props), /*#__PURE__*/_react["default"].createElement("circle", {
     cx: 21,
     cy: 16,
     r: 1.5
-  }), /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
     cx: 16,
     cy: 16,
     r: 1.5
-  }), /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
     cx: 11,
     cy: 16,
     r: 1.5
   }));
 };
+
 var LINE_COUNT = 2;
 var ValueColors = {
   DEFAULT: 'default',
@@ -48,81 +65,94 @@ var Actions = {
   CONTROL: 'control'
 };
 var cn = (0, _uiHelpers.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 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    valueAlignment = _React$useState2[0],
-    setValueAlignment = _React$useState2[1];
+      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["default"].useRef(null);
+
+  var _React$useState = _react["default"].useState('right'),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      valueAlignment = _React$useState2[0],
+      setValueAlignment = _React$useState2[1];
+
   var isActive = !!onClick && !((0, _typeof2["default"])(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) {
+
+  var handleAction = _react["default"].useCallback(function (e) {
     e.stopPropagation();
     !disabled && (onAction === null || onAction === void 0 ? void 0 : onAction(e));
   }, [disabled, onAction]);
-  React.useEffect(function () {
+
+  _react["default"].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", {
+
+  var renderedTitle = /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('title', [classes.title])
-  }, typeof title === 'string' ? title : /*#__PURE__*/React.createElement("a", {
+  }, typeof title === 'string' ? title : /*#__PURE__*/_react["default"].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", {
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('icon-container', {
         colored: isIconColored && !avatar
       })
-    }, avatar || /*#__PURE__*/React.createElement("div", {
+    }, avatar || /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('icon')
     }, icon));
   };
+
   var renderExtraContent = function renderExtraContent() {
     if (children) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('children', {
           'event-none': !!onClick
         })
       }, children);
     }
+
     if (value) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('value-container')
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('value', {
           color: valueColor
         }),
@@ -130,40 +160,70 @@ var ListData = function ListData(_ref) {
         style: {
           textAlign: valueAlignment
         }
-      }, (0, _uiHelpers.convert)(value, _uiHelpers.textConvertConfig)), !!subValue && /*#__PURE__*/React.createElement("div", {
+      }, (0, _uiHelpers.convert)(value, _uiHelpers.textConvertConfig)), !!subValue && /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('sub-value')
       }, subValue));
     }
+
     if (actionType) {
       var isDelete = actionType === Actions.DELETE;
       var ActionIcon = isDelete ? DeleteIcon : NothingIcon;
-      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
         className: cn('icon', {
           small: isDelete
         })
       }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.actionIcon), {
         onClick: handleAction
-      }), /*#__PURE__*/React.createElement(ActionIcon, {
+      }), /*#__PURE__*/_react["default"].createElement(ActionIcon, {
         className: cn('action-icon', {
           active: !disabled
         })
       }));
     }
+
     return null;
   };
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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", {
+  }), renderIcon(), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('header', {
       gap: showActionElement,
       align: !!subTitle
     })
-  }, renderedTitle, !!subTitle && /*#__PURE__*/React.createElement("div", {
+  }, renderedTitle, !!subTitle && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('sub-title', [classes.subtitle])
   }, subTitle)), renderExtraContent());
 };
-var _default = exports["default"] = ListData;
+
+var ListDataPropType = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  })]).isRequired,
+  subTitle: PropTypes.string,
+  value: PropTypes.string,
+  valueColor: PropTypes.oneOf(Object.values(ValueColors)),
+  subValue: PropTypes.string,
+  icon: PropTypes.element,
+  isIconColored: PropTypes.bool,
+  avatar: PropTypes.element,
+  disabled: PropTypes.bool,
+  actionType: PropTypes.oneOf(Object.values(Actions)),
+  onAction: PropTypes.func,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node
+};
+exports.ListDataPropType = ListDataPropType;
+ListData.propTypes = ListDataPropType;
+var _default = ListData;
+exports["default"] = _default;

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

@@ -1 +1,15 @@
-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)}
+.mfui-list-data-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow-y: hidden;
+}
+.mfui-list-data-group__item_divider:not(:last-child) {
+  border-bottom: 1px solid var(--spbSky1);
+}

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

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import 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 & {
+import './ListDataGroup.less';
+export declare type ListItemPropsType = IListDataProps & {
     id: string | number;
 };
-type DragOverlayPropsType = {
+declare type DragOverlayPropsType = {
     className?: string;
     zIndex?: number;
 };