@megafon/ui-shared 6.0.0-beta.5 → 6.1.0

package/dist/es/components/Partners/Partners.js

@@ -1,45 +1,52 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _slidesSettings;
+
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.slice.js";
 import * as React from 'react';
 import { Grid, GridColumn, Tile, Carousel } from '@megafon/ui-core';
 import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./Partners.css";
 var MAX_GRID_ITEMS_LENGTH = 8;
-var slidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+var slidesSettings = (_slidesSettings = {}, _defineProperty(_slidesSettings, breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 2,
   spaceBetween: 16
-}), breakpoints.MOBILE_MIDDLE_START, {
+}), _defineProperty(_slidesSettings, breakpoints.MOBILE_MIDDLE_START, {
   slidesPerView: 3,
   spaceBetween: 20
-}), breakpoints.DESKTOP_SMALL_START, {
+}), _defineProperty(_slidesSettings, breakpoints.DESKTOP_SMALL_START, {
   slidesPerView: 4,
   spaceBetween: 20
-});
+}), _slidesSettings);
 var testIdPrefix = 'Partners';
 var cn = cnCreate('mfui-partners');
+
 var Partners = function Partners(_ref) {
   var rootRef = _ref.rootRef,
-    _ref$classes = _ref.classes,
-    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
-    root = _ref$classes2.root,
-    itemClass = _ref$classes2.itemClass,
-    dataAttrs = _ref.dataAttrs,
-    className = _ref.className,
-    items = _ref.items,
-    onChange = _ref.onChange,
-    onNextClick = _ref.onNextClick,
-    onPrevClick = _ref.onPrevClick;
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var root = _ref$classes.root,
+      itemClass = _ref$classes.itemClass,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      items = _ref.items,
+      onChange = _ref.onChange,
+      onNextClick = _ref.onNextClick,
+      onPrevClick = _ref.onPrevClick;
   var renderItem = React.useCallback(function (item) {
     var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
     if (!item) {
       return null;
     }
+
     var src = item.src,
-      href = item.href,
-      alt = item.alt,
-      rel = item.rel;
+        href = item.href,
+        alt = item.alt,
+        rel = item.rel;
     return /*#__PURE__*/React.createElement(Tile, {
       href: href,
       rel: rel,
@@ -101,4 +108,28 @@ var Partners = function Partners(_ref) {
     className: cn([root, className])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
 };
+
+Partners.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    itemClass: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    href: PropTypes.string,
+    rel: PropTypes.string,
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired
+  }).isRequired).isRequired,
+  onChange: PropTypes.func,
+  onNextClick: PropTypes.func,
+  onPrevClick: PropTypes.func
+};
 export default Partners;

package/dist/es/components/PictureWithDescription/PictureWithDescription.css

@@ -1 +1,80 @@
-h1,h2,h3,h4,h5{margin:0}@media screen and (min-width:1024px){.mfui-picture-with-description{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.mfui-picture-with-description__title{margin-bottom:24px}.mfui-picture-with-description__picture{-ms-flex-item-align:start;align-self:flex-start;overflow:hidden;text-align:center}@media screen and (max-width:1023px){.mfui-picture-with-description__picture{margin:0 auto 32px}}@media screen and (min-width:1024px){.mfui-picture-with-description__picture{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:50%}.mfui-picture-with-description__picture_align_left{-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-right:20px;order:0}}.mfui-picture-with-description__img{height:100%;max-width:550px;width:100%}.mfui-picture-with-description__content>:first-child{margin-top:0!important}.mfui-picture-with-description__content>:last-child{margin-bottom:0!important}@media screen and (min-width:1024px){.mfui-picture-with-description__articles{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:50%}.mfui-picture-with-description__articles_text-top-align{-ms-flex-item-align:start;align-self:flex-start}.mfui-picture-with-description__articles_align_right{margin-right:20px}}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+.mfui-picture-with-description__title {
+  margin-bottom: 24px;
+}
+.mfui-picture-with-description__picture {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  overflow: hidden;
+  text-align: center;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-picture-with-description__picture {
+    margin: 0 auto 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__picture {
+    -webkit-box-ordinal-group: 3;
+        -ms-flex-order: 2;
+            order: 2;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__picture_align_left {
+    -webkit-box-ordinal-group: 1;
+        -ms-flex-order: 0;
+            order: 0;
+    margin-right: 20px;
+  }
+}
+.mfui-picture-with-description__img {
+  width: 100%;
+  max-width: 550px;
+  height: 100%;
+}
+.mfui-picture-with-description__content > :first-child {
+  margin-top: 0 !important;
+}
+.mfui-picture-with-description__content > :last-child {
+  margin-bottom: 0 !important;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles {
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles_text-top-align {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles_align_right {
+    margin-right: 20px;
+  }
+}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import './PictureWithDescription.scss';
+import './PictureWithDescription.less';
 export declare const pictureAlignTypes: {
     readonly LEFT: "left";
     readonly RIGHT: "right";
 };
-type PictureAlignTypesType = (typeof pictureAlignTypes)[keyof typeof pictureAlignTypes];
+declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
 export interface IPictureWithDescriptionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -25,8 +25,6 @@ export interface IPictureWithDescriptionProps {
     pictureAlt?: string;
     /** Выравнивание текста по верхнему краю */
     isTextTopAlign?: boolean;
-    /** Дочерний элемент компонента */
-    children?: React.ReactNode;
 }
 declare const PictureWithDescription: React.FC<IPictureWithDescriptionProps>;
 export default PictureWithDescription;

package/dist/es/components/PictureWithDescription/PictureWithDescription.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Header } from '@megafon/ui-core';
 import { cnCreate } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
 import "./PictureWithDescription.css";
 export var pictureAlignTypes = {
   LEFT: 'left',
@@ -8,18 +9,19 @@ export var pictureAlignTypes = {
 };
 var testIdPrefix = 'PictureWithDescription';
 var cn = cnCreate('mfui-picture-with-description');
+
 var PictureWithDescription = function PictureWithDescription(_ref) {
   var rootRef = _ref.rootRef,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    title = _ref.title,
-    pictureUrl = _ref.pictureUrl,
-    _ref$pictureAlign = _ref.pictureAlign,
-    pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
-    pictureAlt = _ref.pictureAlt,
-    isTextTopAlign = _ref.isTextTopAlign,
-    children = _ref.children;
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      title = _ref.title,
+      pictureUrl = _ref.pictureUrl,
+      _ref$pictureAlign = _ref.pictureAlign,
+      pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+      pictureAlt = _ref.pictureAlt,
+      isTextTopAlign = _ref.isTextTopAlign,
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className, classes.root]),
     ref: rootRef
@@ -45,4 +47,20 @@ var PictureWithDescription = function PictureWithDescription(_ref) {
     className: cn('content')
   }, children)));
 };
+
+PictureWithDescription.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    title: PropTypes.string
+  }),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  pictureUrl: PropTypes.string.isRequired,
+  pictureAlign: PropTypes.oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  pictureAlt: PropTypes.string,
+  isTextTopAlign: PropTypes.bool
+};
 export default PictureWithDescription;

package/dist/es/components/Property/Property.css

@@ -1 +1,156 @@
-@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-property__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:24px 0}.mfui-property_border-top.mfui-property_border-color_default .mfui-property__wrapper{border-top:1px solid var(--spbSky1)}.mfui-property_border-bottom.mfui-property_border-color_default .mfui-property__wrapper{border-bottom:1px solid var(--spbSky1)}.mfui-property_border-top.mfui-property_border-color_darker .mfui-property__wrapper{border-top:1px solid var(--spbSky2)}.mfui-property_border-bottom.mfui-property_border-color_darker .mfui-property__wrapper{border-bottom:1px solid var(--spbSky2)}.mfui-property__main{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-property__main:not(:first-child){margin-top:24px}.mfui-property__main_with-out-title{margin-top:16px!important}.mfui-property__main_with-badge{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-property__title-item_size_default{font-size:15px;font-weight:500;line-height:24px}.mfui-property__title-item_size_big{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-property__title-item_size_big{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-property__title-item{font-size:15px;font-weight:500;line-height:24px}}.mfui-property__icon{display:inline-block;height:24px;margin-left:1px;margin-right:8px;overflow:hidden;vertical-align:bottom;width:24px}.mfui-property__badge{margin-bottom:8px}@media screen and (min-width:768px){.mfui-property__title .mfui-property__desc{width:100%}}.mfui-property__tooltip{cursor:pointer;display:inline-block;height:20px;margin-left:8px;vertical-align:text-bottom;width:20px;fill:var(--spbSky2)}.mfui-property__tooltip-inner{max-width:350px}.mfui-property__desc{margin-top:12px}@media screen and (min-width:768px){.mfui-property__desc{width:70%}}.mfui-property__desc_collapsible{margin-top:12px}.mfui-property__value-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;border-radius:8px;padding:4px 8px;text-align:right;white-space:pre-line}.mfui-property__value-wrapper_frame_default{background:var(--base)}.mfui-property__value-wrapper_frame_gray{background:var(--spbSky0)}.mfui-property__value{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-property__value{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-property__value{font-size:15px;font-weight:500;line-height:24px}}.mfui-property__value-unit:before{content:" "}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-property__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 24px 0;
+}
+.mfui-property_border-top.mfui-property_border-color_default .mfui-property__wrapper {
+  border-top: 1px solid var(--spbSky1);
+}
+.mfui-property_border-bottom.mfui-property_border-color_default .mfui-property__wrapper {
+  border-bottom: 1px solid var(--spbSky1);
+}
+.mfui-property_border-top.mfui-property_border-color_darker .mfui-property__wrapper {
+  border-top: 1px solid var(--spbSky2);
+}
+.mfui-property_border-bottom.mfui-property_border-color_darker .mfui-property__wrapper {
+  border-bottom: 1px solid var(--spbSky2);
+}
+.mfui-property__main {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 20px;
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.mfui-property__main:not(:first-child) {
+  margin-top: 24px;
+}
+.mfui-property__main_with-out-title {
+  margin-top: 16px !important;
+}
+.mfui-property__main_with-badge {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-property__title-item_size_default {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+}
+.mfui-property__title-item_size_big {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-property__title-item_size_big {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-property__title-item {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
+}
+.mfui-property__icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  margin-left: 1px;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+.mfui-property__badge {
+  margin-bottom: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-property__title .mfui-property__desc {
+    width: 100%;
+  }
+}
+.mfui-property__tooltip {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  vertical-align: text-bottom;
+  cursor: pointer;
+  fill: var(--spbSky2);
+}
+.mfui-property__tooltip-inner {
+  max-width: 350px;
+}
+.mfui-property__desc {
+  margin-top: 12px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-property__desc {
+    width: 70%;
+  }
+}
+.mfui-property__desc_collapsible {
+  margin-top: 12px;
+}
+.mfui-property__value-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  padding: 4px 8px;
+  border-radius: 8px;
+  white-space: pre-line;
+  text-align: right;
+}
+.mfui-property__value-wrapper_frame_default {
+  background: var(--base);
+}
+.mfui-property__value-wrapper_frame_gray {
+  background: var(--spbSky0);
+}
+.mfui-property__value {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-property__value {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-property__value {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
+}
+.mfui-property__value-unit:before {
+  content: '\00a0';
+}

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

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React, { Ref, ComponentProps } from 'react';
 import { PromoBadge } from '@megafon/ui-core';
-import './Property.scss';
+import './Property.less';
 import { Item } from './types';
 export interface IProperty {
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Массив с данными для строки */
     items: Item[];
     /** Дополнительный класс для основного контейнера */
@@ -12,7 +12,7 @@ export interface IProperty {
     /** Текст для бейджа */
     badge?: string;
     /** Тип бейджа */
-    badgeType?: React.ComponentProps<typeof PromoBadge>['type'];
+    badgeType?: ComponentProps<typeof PromoBadge>['type'];
     /** Текст тултипа */
     tooltip?: string;
     /** Отключить верхнюю границу */

package/dist/es/components/Property/Property.js

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.array.map.js";
-import * as React from 'react';
+import React, { Fragment, useRef } from 'react';
 import { Grid, GridColumn, PromoBadge, Caption, Tooltip } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
 import "./Property.css";
 import { getColumnConfig } from "../../helpers/getColumnConfig";
 import PropertyDescription from "./PropertyDescription";
+
 var InfoIcon = function InfoIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -15,34 +17,37 @@ var InfoIcon = function InfoIcon(props) {
     d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 5c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm1 8V9H9v6h2z"
   }));
 };
+
 export var testIdPrefix = 'Property';
 var cn = cnCreate('mfui-property');
+
 var Property = function Property(_ref) {
   var rootRef = _ref.rootRef,
-    items = _ref.items,
-    className = _ref.className,
-    _ref$badge = _ref.badge,
-    badge = _ref$badge === void 0 ? '' : _ref$badge,
-    _ref$badgeType = _ref.badgeType,
-    badgeType = _ref$badgeType === void 0 ? 'popular' : _ref$badgeType,
-    tooltip = _ref.tooltip,
-    icon = _ref.icon,
-    _ref$disableBorderTop = _ref.disableBorderTop,
-    disableBorderTop = _ref$disableBorderTop === void 0 ? false : _ref$disableBorderTop,
-    _ref$borderBottom = _ref.borderBottom,
-    borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
-    _ref$mergedValue = _ref.mergedValue,
-    mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
-  var tooltipRef = React.useRef(null);
-  var renderTitle = function renderTitle(titles, titleSize, isFirstItem) {
-    return titles === null || titles === void 0 ? void 0 : titles.map(function (titleItem, i) {
+      items = _ref.items,
+      className = _ref.className,
+      _ref$badge = _ref.badge,
+      badge = _ref$badge === void 0 ? '' : _ref$badge,
+      _ref$badgeType = _ref.badgeType,
+      badgeType = _ref$badgeType === void 0 ? 'popular' : _ref$badgeType,
+      tooltip = _ref.tooltip,
+      icon = _ref.icon,
+      _ref$disableBorderTop = _ref.disableBorderTop,
+      disableBorderTop = _ref$disableBorderTop === void 0 ? false : _ref$disableBorderTop,
+      _ref$borderBottom = _ref.borderBottom,
+      borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
+      _ref$mergedValue = _ref.mergedValue,
+      mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+  var tooltipRef = useRef(null);
+
+  var renderTitle = function renderTitle(title, titleSize, isFirstItem) {
+    return title && title.map(function (titleItem, i) {
       var isFirstTitle = i === 0;
       return /*#__PURE__*/React.createElement("div", {
         key: i,
@@ -61,10 +66,11 @@ var Property = function Property(_ref) {
       }, tooltip)));
     });
   };
+
   var renderDescription = function renderDescription(description) {
-    return description === null || description === void 0 ? void 0 : description.map(function (_ref2, j) {
+    return description && description.map(function (_ref2, j) {
       var value = _ref2.value,
-        isCollapsible = _ref2.isCollapsible;
+          isCollapsible = _ref2.isCollapsible;
       return /*#__PURE__*/React.createElement("div", {
         className: cn('desc', {
           collapsible: isCollapsible
@@ -83,6 +89,7 @@ var Property = function Property(_ref) {
       }));
     });
   };
+
   var renderValue = function renderValue(valueFrameColor, value, valueUnit) {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('value-wrapper', {
@@ -96,6 +103,7 @@ var Property = function Property(_ref) {
       hasMargin: false
     }, convert(valueUnit, {})));
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       'border-top': !disableBorderTop,
@@ -113,17 +121,17 @@ var Property = function Property(_ref) {
     className: cn('wrapper')
   }, items.map(function (_ref3, i) {
     var title = _ref3.title,
-      value = _ref3.value,
-      description = _ref3.description,
-      _ref3$valueUnit = _ref3.valueUnit,
-      valueUnit = _ref3$valueUnit === void 0 ? '' : _ref3$valueUnit,
-      _ref3$titleSize = _ref3.titleSize,
-      titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
-      _ref3$valueFrameColor = _ref3.valueFrameColor,
-      valueFrameColor = _ref3$valueFrameColor === void 0 ? 'none' : _ref3$valueFrameColor;
+        value = _ref3.value,
+        description = _ref3.description,
+        _ref3$valueUnit = _ref3.valueUnit,
+        valueUnit = _ref3$valueUnit === void 0 ? '' : _ref3$valueUnit,
+        _ref3$titleSize = _ref3.titleSize,
+        titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
+        _ref3$valueFrameColor = _ref3.valueFrameColor,
+        valueFrameColor = _ref3$valueFrameColor === void 0 ? 'none' : _ref3$valueFrameColor;
     var isFirstItem = i === 0;
     var isRenderBadge = isFirstItem && !!badge;
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: i
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('main', {
@@ -138,4 +146,40 @@ var Property = function Property(_ref) {
     }, badge), title ? renderTitle(title, titleSize, isFirstItem) : renderDescription(description)), mergedValue && isFirstItem && renderValue(valueFrameColor, mergedValue, valueUnit), !mergedValue && value && renderValue(valueFrameColor, value, valueUnit)), title && renderDescription(description));
   })))));
 };
+
+Property.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
+    description: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+      isCollapsible: PropTypes.bool
+    })),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    titleSize: PropTypes.oneOf(['default', 'big']),
+    valueUnit: PropTypes.string,
+    valueFrameColor: PropTypes.oneOf(['none', 'default', 'gray'])
+  }).isRequired).isRequired,
+  className: PropTypes.string,
+  badge: PropTypes.string,
+  badgeType: PropTypes.oneOf(['hit', 'new', 'vip', 'popular', 'user-choice', 'interests']),
+  tooltip: PropTypes.string,
+  disableBorderTop: PropTypes.bool,
+  borderBottom: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['default', 'darker']),
+  mergedValue: PropTypes.string,
+  icon: PropTypes.node,
+  fullWidth: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    moreLink: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  classes: PropTypes.shape({
+    title: PropTypes.string,
+    openedDescription: PropTypes.string,
+    toggleDescription: PropTypes.string
+  })
+};
 export default Property;

package/dist/es/components/Property/PropertyDescription.css

@@ -1 +1,17 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-property-description__collapse{color:var(--systemBlue);cursor:pointer;font-size:12px;-webkit-text-decoration:underline dashed var(--systemBlue);text-decoration:underline dashed var(--systemBlue)}.mfui-property-description__content-inner{margin-bottom:8px}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-property-description__collapse {
+  color: var(--systemBlue);
+  font-size: 12px;
+  -webkit-text-decoration: underline dashed var(--systemBlue);
+          text-decoration: underline dashed var(--systemBlue);
+  cursor: pointer;
+}
+.mfui-property-description__content-inner {
+  margin-bottom: 8px;
+}

package/dist/es/components/Property/PropertyDescription.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import './PropertyDescription.scss';
-import { DescriptionType } from './types';
+import './PropertyDescription.less';
+import { Desc } from './types';
 export declare const testIdPrefix = "PropertyDescription";
-declare const PropertyDescription: React.FC<DescriptionType>;
+declare const PropertyDescription: React.FC<Desc>;
 export default PropertyDescription;