@megafon/ui-core 8.0.4 → 8.1.0

package/dist/es/components/Parameter/Parameter.css

@@ -0,0 +1 @@
+@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-parameter__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-parameter_border-top.mfui-parameter_border-color_default .mfui-parameter__wrapper{border-top:1px solid var(--spbSky1)}.mfui-parameter_border-bottom.mfui-parameter_border-color_default .mfui-parameter__wrapper{border-bottom:1px solid var(--spbSky1)}.mfui-parameter_border-top.mfui-parameter_border-color_darker .mfui-parameter__wrapper{border-top:1px solid var(--spbSky2)}.mfui-parameter_border-bottom.mfui-parameter_border-color_darker .mfui-parameter__wrapper{border-bottom:1px solid var(--spbSky2)}.mfui-parameter__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-parameter__main:not(:first-child){margin-top:24px}.mfui-parameter__main_with-out-title{margin-top:16px!important}.mfui-parameter__main_with-badge{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-parameter__title-item_size_default{font-size:15px;font-weight:500;line-height:24px}.mfui-parameter__title-item_size_big{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-parameter__title-item_size_big{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-parameter__title-item{font-size:15px;font-weight:500;line-height:24px}}.mfui-parameter__icon{display:inline-block;height:24px;margin-left:1px;margin-right:8px;overflow:hidden;vertical-align:bottom;width:24px}.mfui-parameter__badge{margin-bottom:8px}@media screen and (min-width:768px){.mfui-parameter__title .mfui-parameter__desc{width:100%}}.mfui-parameter__tooltip{cursor:pointer;display:inline-block;height:20px;margin-left:8px;vertical-align:text-bottom;width:20px;fill:var(--spbSky2)}.mfui-parameter__tooltip-inner{max-width:350px}.mfui-parameter__desc{margin-top:12px}@media screen and (min-width:768px){.mfui-parameter__desc{width:70%}}.mfui-parameter__desc_collapsible{margin-top:12px}.mfui-parameter__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-parameter__value-wrapper_frame_default{background:var(--base)}.mfui-parameter__value-wrapper_frame_gray{background:var(--spbSky0)}.mfui-parameter__value{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-parameter__value{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-parameter__value{font-size:15px;font-weight:500;line-height:24px}}.mfui-parameter__value-unit:before{content:" "}

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import PromoBadge from '../Badges/PromoBadge/PromoBadge';
+import { DescriptionType } from './components/ParameterDescription';
+import './Parameter.scss';
+type BadgeTypesType = React.ComponentProps<typeof PromoBadge>['type'];
+type BadgeColorType = React.ComponentProps<typeof PromoBadge>['color'];
+type TitleSizeType = 'default' | 'big';
+type ValueFrameColorType = 'none' | 'default' | 'gray';
+type ItemType = {
+    title?: React.ReactNode[];
+    titleSize?: TitleSizeType;
+    description?: DescriptionType[];
+    value?: string | React.ReactNode;
+    valueUnit?: string;
+    valueFrameColor?: ValueFrameColorType;
+};
+export interface IParameter {
+    /** Массив с данными для строки */
+    items: ItemType[];
+    /** Дополнительный класс для основного контейнера */
+    className?: string;
+    /** Текст для бейджа */
+    badge?: string;
+    /** DEPRECATED. Тип бэйджа (используйте badgeColor) */
+    badgeType?: BadgeTypesType;
+    /** Цвет бейджа */
+    badgeColor?: BadgeColorType;
+    /** Текст тултипа */
+    tooltip?: string;
+    /** Отключить верхнюю границу */
+    disableBorderTop?: boolean;
+    /** Наличие нижней границы */
+    borderBottom?: boolean;
+    /** Цвет верхней и нижней границ */
+    borderColor?: 'default' | 'darker';
+    /** Единое значение для всей строки */
+    mergedValue?: string;
+    /** Иконка для строки */
+    icon?: React.ReactNode;
+    /** Растягивание компонента на всю доступную ширину */
+    fullWidth?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        moreLink?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        itemValue?: Record<string, string>;
+    };
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        openedDescription?: string;
+        toggleDescription?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const Parameter: React.FC<IParameter>;
+export default Parameter;

package/dist/es/components/Parameter/Parameter.js

@@ -0,0 +1,139 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 { cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
+import PromoBadge from "../Badges/PromoBadge/PromoBadge";
+import Caption from "../Caption/Caption";
+import Grid from "../Grid/Grid";
+import GridColumn from "../Grid/GridColumn";
+import Tooltip from "../Tooltip/Tooltip";
+import ParameterDescription from "./components/ParameterDescription";
+import { getColumnConfig } from "./helpers";
+import "./Parameter.css";
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    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"
+  }));
+};
+var cn = cnCreate('mfui-parameter');
+var Parameter = function Parameter(_ref) {
+  var 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,
+    badgeColor = _ref.badgeColor,
+    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,
+    rootRef = _ref.rootRef;
+  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) {
+      var isFirstTitle = i === 0;
+      return /*#__PURE__*/React.createElement("div", _extends({
+        key: i,
+        className: cn('title-item', {
+          size: titleSize
+        }, [classes.title])
+      }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1)), icon && isFirstTitle && /*#__PURE__*/React.createElement("div", {
+        className: cn('icon')
+      }, icon), titleItem, tooltip && isFirstItem && isFirstTitle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cn('tooltip'),
+        ref: tooltipRef
+      }, /*#__PURE__*/React.createElement(InfoIcon, null)), /*#__PURE__*/React.createElement(Tooltip, {
+        className: cn('tooltip-inner'),
+        triggerElement: tooltipRef
+      }, tooltip)));
+    });
+  };
+  var renderDescription = function renderDescription(description) {
+    return description === null || description === void 0 ? void 0 : description.map(function (_ref2, j) {
+      var value = _ref2.value,
+        isCollapsible = _ref2.isCollapsible;
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('desc', {
+          collapsible: isCollapsible
+        }),
+        key: j
+      }, /*#__PURE__*/React.createElement(ParameterDescription, {
+        value: value,
+        isCollapsible: isCollapsible,
+        dataAttrs: {
+          moreLink: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink
+        },
+        classes: {
+          open: classes.openedDescription,
+          toggle: classes.toggleDescription
+        }
+      }));
+    });
+  };
+  var renderValue = function renderValue(valueFrameColor, value, valueUnit) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('value-wrapper', {
+        frame: valueFrameColor
+      })
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemValue)), /*#__PURE__*/React.createElement("div", {
+      className: cn('value')
+    }, typeof value === 'string' ? convert(value, {}) : value), valueUnit && /*#__PURE__*/React.createElement(Caption, {
+      className: cn('value-unit'),
+      hasMargin: false
+    }, convert(valueUnit, {})));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      'border-top': !disableBorderTop,
+      'border-bottom': borderBottom,
+      'border-color': borderColor
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, getColumnConfig(fullWidth), /*#__PURE__*/React.createElement("div", {
+    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;
+    var isFirstItem = i === 0;
+    var isRenderBadge = isFirstItem && !!badge;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('main', {
+        'with-badge': isRenderBadge,
+        'with-out-title': !title
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('title')
+    }, isRenderBadge && /*#__PURE__*/React.createElement(PromoBadge, {
+      className: cn('badge'),
+      type: badgeType,
+      color: badgeColor
+    }, badge), title ? renderTitle(title, titleSize, isFirstItem) : renderDescription(description)), mergedValue && isFirstItem && renderValue(valueFrameColor, mergedValue, valueUnit), !mergedValue && value && renderValue(valueFrameColor, value, valueUnit)), title && renderDescription(description));
+  })))));
+};
+export default Parameter;

package/dist/es/components/Parameter/components/ParameterDescription.css

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

package/dist/es/components/Parameter/components/ParameterDescription.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import './ParameterDescription.scss';
+export type DescriptionType = {
+    value: string | React.ReactNode[];
+    isCollapsible?: boolean;
+    classes?: {
+        toggle?: string;
+        open?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        moreLink?: Record<string, string>;
+    };
+};
+declare const ParameterDescription: React.FC<DescriptionType>;
+export default ParameterDescription;

package/dist/es/components/Parameter/components/ParameterDescription.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Collapse from "../../_Collapse/Collapse";
+import "./ParameterDescription.css";
+var cn = cnCreate('mfui-parameter-description');
+var ParameterDescription = function ParameterDescription(_ref) {
+  var value = _ref.value,
+    _ref$isCollapsible = _ref.isCollapsible,
+    isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpened = _React$useState2[0],
+    setIsOpened = _React$useState2[1];
+  var handleClickDesc = React.useCallback(function () {
+    return setIsOpened(!isOpened);
+  }, [isOpened]);
+  if (isCollapsible) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn([isOpened ? classes.open : undefined])
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Collapse, {
+      className: cn('content'),
+      classNameContainer: cn('content-inner'),
+      isOpened: isOpened
+    }, value), /*#__PURE__*/React.createElement("span", _extends({
+      className: cn('collapse', classes.toggle)
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
+      onClick: handleClickDesc
+    }), isOpened ? 'Скрыть' : 'Подробнее'));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, value);
+};
+export default ParameterDescription;

package/dist/es/components/Parameter/helpers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import GridColumn from '../Grid/GridColumn';
+type GridColumnPropsType = React.ComponentProps<typeof GridColumn>;
+type GridColumnConfigType = Partial<Pick<GridColumnPropsType, 'all' | 'wide' | 'desktop' | 'tablet' | 'mobile'>>;
+export declare const getColumnConfig: (isFullWidth: boolean) => GridColumnConfigType;
+export {};

package/dist/es/components/Parameter/helpers.js

@@ -0,0 +1,10 @@
+export var getColumnConfig = function getColumnConfig(isFullWidth) {
+  return isFullWidth ? {
+    all: '12'
+  } : {
+    wide: '8',
+    desktop: '10',
+    tablet: '12',
+    mobile: '12'
+  };
+};

package/dist/es/components/Search/Search.js

@@ -324,8 +324,14 @@ var Search = function Search(_ref) {
     labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
   React.useEffect(function () {
+    return setSearchQuery(value);
+  }, [value]);
+  React.useEffect(function () {
+    if (value !== searchQuery) {
+      return;
+    }
     textareaResize();
-  }, [textareaResize]);
+  }, [searchQuery, value, textareaResize]);
   React.useEffect(function () {
     if (!resizerRef.current || !isTextarea || !showResizer) {
       return;
@@ -362,9 +368,6 @@ var Search = function Search(_ref) {
     resizerRef.current.addEventListener('mousedown', handleStartResize);
     resizerRef.current.addEventListener('touchstart', handleStartResize);
   }, [isTextarea, minTextareaHeight, showResizer]);
-  React.useEffect(function () {
-    return setSearchQuery(value);
-  }, [value]);
   React.useEffect(function () {
     debouncedOnChange.current = debounce(function (inputValue) {
       return onChange && onChange(inputValue);

package/dist/es/index.d.ts

@@ -43,6 +43,8 @@ export { default as PaginationButton } from './components/Pagination/components/
 export { default as PaginationButtons } from './components/Pagination/components/PaginationButtons/PaginationButtons';
 export { default as PaginationNavigation } from './components/Pagination/components/PaginationNavigation/PaginationNavigation';
 export { default as Paragraph } from './components/Paragraph/Paragraph';
+export { default as Parameter } from './components/Parameter/Parameter';
+export { default as ParameterDescription } from './components/Parameter/components/ParameterDescription';
 export { default as Preloader } from './components/Preloader/Preloader';
 export { default as PriceBadge } from './components/Badges/PriceBadge/PriceBadge';
 export { default as PromoBadge } from './components/Badges/PromoBadge/PromoBadge';

package/dist/es/index.js

@@ -43,6 +43,8 @@ export { default as PaginationButton } from "./components/Pagination/components/
 export { default as PaginationButtons } from "./components/Pagination/components/PaginationButtons/PaginationButtons";
 export { default as PaginationNavigation } from "./components/Pagination/components/PaginationNavigation/PaginationNavigation";
 export { default as Paragraph } from "./components/Paragraph/Paragraph";
+export { default as Parameter } from "./components/Parameter/Parameter";
+export { default as ParameterDescription } from "./components/Parameter/components/ParameterDescription";
 export { default as Preloader } from "./components/Preloader/Preloader";
 export { default as PriceBadge } from "./components/Badges/PriceBadge/PriceBadge";
 export { default as PromoBadge } from "./components/Badges/PromoBadge/PromoBadge";

package/dist/lib/components/Parameter/Parameter.css

@@ -0,0 +1 @@
+@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-parameter__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-parameter_border-top.mfui-parameter_border-color_default .mfui-parameter__wrapper{border-top:1px solid var(--spbSky1)}.mfui-parameter_border-bottom.mfui-parameter_border-color_default .mfui-parameter__wrapper{border-bottom:1px solid var(--spbSky1)}.mfui-parameter_border-top.mfui-parameter_border-color_darker .mfui-parameter__wrapper{border-top:1px solid var(--spbSky2)}.mfui-parameter_border-bottom.mfui-parameter_border-color_darker .mfui-parameter__wrapper{border-bottom:1px solid var(--spbSky2)}.mfui-parameter__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-parameter__main:not(:first-child){margin-top:24px}.mfui-parameter__main_with-out-title{margin-top:16px!important}.mfui-parameter__main_with-badge{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-parameter__title-item_size_default{font-size:15px;font-weight:500;line-height:24px}.mfui-parameter__title-item_size_big{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-parameter__title-item_size_big{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-parameter__title-item{font-size:15px;font-weight:500;line-height:24px}}.mfui-parameter__icon{display:inline-block;height:24px;margin-left:1px;margin-right:8px;overflow:hidden;vertical-align:bottom;width:24px}.mfui-parameter__badge{margin-bottom:8px}@media screen and (min-width:768px){.mfui-parameter__title .mfui-parameter__desc{width:100%}}.mfui-parameter__tooltip{cursor:pointer;display:inline-block;height:20px;margin-left:8px;vertical-align:text-bottom;width:20px;fill:var(--spbSky2)}.mfui-parameter__tooltip-inner{max-width:350px}.mfui-parameter__desc{margin-top:12px}@media screen and (min-width:768px){.mfui-parameter__desc{width:70%}}.mfui-parameter__desc_collapsible{margin-top:12px}.mfui-parameter__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-parameter__value-wrapper_frame_default{background:var(--base)}.mfui-parameter__value-wrapper_frame_gray{background:var(--spbSky0)}.mfui-parameter__value{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-parameter__value{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-parameter__value{font-size:15px;font-weight:500;line-height:24px}}.mfui-parameter__value-unit:before{content:" "}

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import PromoBadge from '../Badges/PromoBadge/PromoBadge';
+import { DescriptionType } from './components/ParameterDescription';
+import './Parameter.scss';
+type BadgeTypesType = React.ComponentProps<typeof PromoBadge>['type'];
+type BadgeColorType = React.ComponentProps<typeof PromoBadge>['color'];
+type TitleSizeType = 'default' | 'big';
+type ValueFrameColorType = 'none' | 'default' | 'gray';
+type ItemType = {
+    title?: React.ReactNode[];
+    titleSize?: TitleSizeType;
+    description?: DescriptionType[];
+    value?: string | React.ReactNode;
+    valueUnit?: string;
+    valueFrameColor?: ValueFrameColorType;
+};
+export interface IParameter {
+    /** Массив с данными для строки */
+    items: ItemType[];
+    /** Дополнительный класс для основного контейнера */
+    className?: string;
+    /** Текст для бейджа */
+    badge?: string;
+    /** DEPRECATED. Тип бэйджа (используйте badgeColor) */
+    badgeType?: BadgeTypesType;
+    /** Цвет бейджа */
+    badgeColor?: BadgeColorType;
+    /** Текст тултипа */
+    tooltip?: string;
+    /** Отключить верхнюю границу */
+    disableBorderTop?: boolean;
+    /** Наличие нижней границы */
+    borderBottom?: boolean;
+    /** Цвет верхней и нижней границ */
+    borderColor?: 'default' | 'darker';
+    /** Единое значение для всей строки */
+    mergedValue?: string;
+    /** Иконка для строки */
+    icon?: React.ReactNode;
+    /** Растягивание компонента на всю доступную ширину */
+    fullWidth?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        moreLink?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        itemValue?: Record<string, string>;
+    };
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        openedDescription?: string;
+        toggleDescription?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const Parameter: React.FC<IParameter>;
+export default Parameter;

package/dist/lib/components/Parameter/Parameter.js

@@ -0,0 +1,148 @@
+"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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.map.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _PromoBadge = _interopRequireDefault(require("../Badges/PromoBadge/PromoBadge"));
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+var _Grid = _interopRequireDefault(require("../Grid/Grid"));
+var _GridColumn = _interopRequireDefault(require("../Grid/GridColumn"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
+var _ParameterDescription = _interopRequireDefault(require("./components/ParameterDescription"));
+var _helpers = require("./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 && {}.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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    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"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-parameter');
+var Parameter = function Parameter(_ref) {
+  var 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,
+    badgeColor = _ref.badgeColor,
+    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,
+    rootRef = _ref.rootRef;
+  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) {
+      var isFirstTitle = i === 0;
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+        key: i,
+        className: cn('title-item', {
+          size: titleSize
+        }, [classes.title])
+      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1)), icon && isFirstTitle && /*#__PURE__*/React.createElement("div", {
+        className: cn('icon')
+      }, icon), titleItem, tooltip && isFirstItem && isFirstTitle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cn('tooltip'),
+        ref: tooltipRef
+      }, /*#__PURE__*/React.createElement(InfoIcon, null)), /*#__PURE__*/React.createElement(_Tooltip["default"], {
+        className: cn('tooltip-inner'),
+        triggerElement: tooltipRef
+      }, tooltip)));
+    });
+  };
+  var renderDescription = function renderDescription(description) {
+    return description === null || description === void 0 ? void 0 : description.map(function (_ref2, j) {
+      var value = _ref2.value,
+        isCollapsible = _ref2.isCollapsible;
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('desc', {
+          collapsible: isCollapsible
+        }),
+        key: j
+      }, /*#__PURE__*/React.createElement(_ParameterDescription["default"], {
+        value: value,
+        isCollapsible: isCollapsible,
+        dataAttrs: {
+          moreLink: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink
+        },
+        classes: {
+          open: classes.openedDescription,
+          toggle: classes.toggleDescription
+        }
+      }));
+    });
+  };
+  var renderValue = function renderValue(valueFrameColor, value, valueUnit) {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      className: cn('value-wrapper', {
+        frame: valueFrameColor
+      })
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemValue)), /*#__PURE__*/React.createElement("div", {
+      className: cn('value')
+    }, typeof value === 'string' ? (0, _uiHelpers.convert)(value, {}) : value), valueUnit && /*#__PURE__*/React.createElement(_Caption["default"], {
+      className: cn('value-unit'),
+      hasMargin: false
+    }, (0, _uiHelpers.convert)(valueUnit, {})));
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      'border-top': !disableBorderTop,
+      'border-bottom': borderBottom,
+      'border-color': borderColor
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(_Grid["default"], null, /*#__PURE__*/React.createElement(_GridColumn["default"], (0, _helpers.getColumnConfig)(fullWidth), /*#__PURE__*/React.createElement("div", {
+    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;
+    var isFirstItem = i === 0;
+    var isRenderBadge = isFirstItem && !!badge;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('main', {
+        'with-badge': isRenderBadge,
+        'with-out-title': !title
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('title')
+    }, isRenderBadge && /*#__PURE__*/React.createElement(_PromoBadge["default"], {
+      className: cn('badge'),
+      type: badgeType,
+      color: badgeColor
+    }, badge), title ? renderTitle(title, titleSize, isFirstItem) : renderDescription(description)), mergedValue && isFirstItem && renderValue(valueFrameColor, mergedValue, valueUnit), !mergedValue && value && renderValue(valueFrameColor, value, valueUnit)), title && renderDescription(description));
+  })))));
+};
+var _default = exports["default"] = Parameter;

package/dist/lib/components/Parameter/components/ParameterDescription.css

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

package/dist/lib/components/Parameter/components/ParameterDescription.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import './ParameterDescription.scss';
+export type DescriptionType = {
+    value: string | React.ReactNode[];
+    isCollapsible?: boolean;
+    classes?: {
+        toggle?: string;
+        open?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        moreLink?: Record<string, string>;
+    };
+};
+declare const ParameterDescription: React.FC<DescriptionType>;
+export default ParameterDescription;

package/dist/lib/components/Parameter/components/ParameterDescription.js

@@ -0,0 +1,48 @@
+"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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Collapse = _interopRequireDefault(require("../../_Collapse/Collapse"));
+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 && {}.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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-parameter-description');
+var ParameterDescription = function ParameterDescription(_ref) {
+  var value = _ref.value,
+    _ref$isCollapsible = _ref.isCollapsible,
+    isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isOpened = _React$useState2[0],
+    setIsOpened = _React$useState2[1];
+  var handleClickDesc = React.useCallback(function () {
+    return setIsOpened(!isOpened);
+  }, [isOpened]);
+  if (isCollapsible) {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      className: cn([isOpened ? classes.open : undefined])
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_Collapse["default"], {
+      className: cn('content'),
+      classNameContainer: cn('content-inner'),
+      isOpened: isOpened
+    }, value), /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+      className: cn('collapse', classes.toggle)
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
+      onClick: handleClickDesc
+    }), isOpened ? 'Скрыть' : 'Подробнее'));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, value);
+};
+var _default = exports["default"] = ParameterDescription;

package/dist/lib/components/Parameter/helpers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import GridColumn from '../Grid/GridColumn';
+type GridColumnPropsType = React.ComponentProps<typeof GridColumn>;
+type GridColumnConfigType = Partial<Pick<GridColumnPropsType, 'all' | 'wide' | 'desktop' | 'tablet' | 'mobile'>>;
+export declare const getColumnConfig: (isFullWidth: boolean) => GridColumnConfigType;
+export {};

package/dist/lib/components/Parameter/helpers.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnConfig = void 0;
+var getColumnConfig = exports.getColumnConfig = function getColumnConfig(isFullWidth) {
+  return isFullWidth ? {
+    all: '12'
+  } : {
+    wide: '8',
+    desktop: '10',
+    tablet: '12',
+    mobile: '12'
+  };
+};

package/dist/lib/components/Search/Search.js

@@ -333,8 +333,14 @@ var Search = function Search(_ref) {
     labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
   React.useEffect(function () {
+    return setSearchQuery(value);
+  }, [value]);
+  React.useEffect(function () {
+    if (value !== searchQuery) {
+      return;
+    }
     textareaResize();
-  }, [textareaResize]);
+  }, [searchQuery, value, textareaResize]);
   React.useEffect(function () {
     if (!resizerRef.current || !isTextarea || !showResizer) {
       return;
@@ -371,9 +377,6 @@ var Search = function Search(_ref) {
     resizerRef.current.addEventListener('mousedown', handleStartResize);
     resizerRef.current.addEventListener('touchstart', handleStartResize);
   }, [isTextarea, minTextareaHeight, showResizer]);
-  React.useEffect(function () {
-    return setSearchQuery(value);
-  }, [value]);
   React.useEffect(function () {
     debouncedOnChange.current = (0, _lodash["default"])(function (inputValue) {
       return onChange && onChange(inputValue);

package/dist/lib/index.d.ts

@@ -43,6 +43,8 @@ export { default as PaginationButton } from './components/Pagination/components/
 export { default as PaginationButtons } from './components/Pagination/components/PaginationButtons/PaginationButtons';
 export { default as PaginationNavigation } from './components/Pagination/components/PaginationNavigation/PaginationNavigation';
 export { default as Paragraph } from './components/Paragraph/Paragraph';
+export { default as Parameter } from './components/Parameter/Parameter';
+export { default as ParameterDescription } from './components/Parameter/components/ParameterDescription';
 export { default as Preloader } from './components/Preloader/Preloader';
 export { default as PriceBadge } from './components/Badges/PriceBadge/PriceBadge';
 export { default as PromoBadge } from './components/Badges/PromoBadge/PromoBadge';

package/dist/lib/index.js

@@ -261,6 +261,18 @@ Object.defineProperty(exports, "Paragraph", {
     return _Paragraph["default"];
   }
 });
+Object.defineProperty(exports, "Parameter", {
+  enumerable: true,
+  get: function get() {
+    return _Parameter["default"];
+  }
+});
+Object.defineProperty(exports, "ParameterDescription", {
+  enumerable: true,
+  get: function get() {
+    return _ParameterDescription["default"];
+  }
+});
 Object.defineProperty(exports, "Preloader", {
   enumerable: true,
   get: function get() {
@@ -528,6 +540,8 @@ var _PaginationButton = _interopRequireDefault(require("./components/Pagination/
 var _PaginationButtons = _interopRequireDefault(require("./components/Pagination/components/PaginationButtons/PaginationButtons"));
 var _PaginationNavigation = _interopRequireDefault(require("./components/Pagination/components/PaginationNavigation/PaginationNavigation"));
 var _Paragraph = _interopRequireDefault(require("./components/Paragraph/Paragraph"));
+var _Parameter = _interopRequireDefault(require("./components/Parameter/Parameter"));
+var _ParameterDescription = _interopRequireDefault(require("./components/Parameter/components/ParameterDescription"));
 var _Preloader = _interopRequireDefault(require("./components/Preloader/Preloader"));
 var _PriceBadge = _interopRequireDefault(require("./components/Badges/PriceBadge/PriceBadge"));
 var _PromoBadge = _interopRequireDefault(require("./components/Badges/PromoBadge/PromoBadge"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "8.0.4",
+    "version": "8.1.0",
     "files": [
         "dist",
         "styles"
@@ -50,7 +50,7 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^3.8.0",
+        "@megafon/ui-icons": "^3.8.1",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -89,7 +89,7 @@
         "@datepicker-react/hooks": "^2.7.0",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
-        "@megafon/ui-helpers": "^4.0.0",
+        "@megafon/ui-helpers": "^4.0.1",
         "@mona-health/react-input-mask": "^3.0.3",
         "@popperjs/core": "^2.11.8",
         "core-js": "^3.6.4",
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "95b87bbb028911fd285fc00d4aa524f8ce0eb867"
+    "gitHead": "d9a710f4c5a27033a3b69898b7baa6e997b3b2f4"
 }