@megafon/ui-core 8.12.1 → 8.13.0

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

@@ -6,8 +6,10 @@ export interface IAccordionProps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
-    /** Заголовок */
+    /** Тег заголовка (определяет базовый тег и стили) */
     titleTag?: IHeaderProps['as'];
+    /** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
+    titleTagName?: IHeaderProps['tag'];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Включить микроразметку */

package/dist/es/components/Accordion/Accordion.js

@@ -20,6 +20,7 @@ var Accordion = function Accordion(_ref) {
     title = _ref.title,
     _ref$titleTag = _ref.titleTag,
     titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
+    titleTagName = _ref.titleTagName,
     _ref$isOpened = _ref.isOpened,
     isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
     _ref$hasMicrodata = _ref.hasMicrodata,
@@ -81,6 +82,7 @@ var Accordion = function Accordion(_ref) {
     itemProp: 'name'
   }), /*#__PURE__*/React.createElement(Header, {
     as: titleTag,
+    tag: titleTagName,
     dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
     className: titlePropsClasses
   }, title), /*#__PURE__*/React.createElement("div", {

package/dist/es/components/Pagination/Pagination.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}

package/dist/es/components/UploadForm/UploadField/UploadField.d.ts

@@ -10,7 +10,7 @@ export interface IUploadDropField {
     /** Действие при выборе файла */
     onChange: (files: File[]) => void;
     /** Дополнительная информация */
-    description?: string;
+    description?: string | string[];
     /** Список допустимых типов файлов для внутреннего input */
     accept?: string;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;list-style:none;margin:0;padding:0;text-align:center}.mfui-upload-field-drop-area__description-item{margin:0;padding:0}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}

package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import './UploadFieldDropArea.scss';
 export interface IUploadFieldDropArea {
     /** Дополнительная информация */
-    description?: string;
+    description?: string | string[];
     /** Обязательность поля */
     required: boolean;
     /** Заблокированное состояние */

package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js

@@ -1,6 +1,8 @@
 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.is-array.js";
+import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import useDragAndDrop from "../useDragAndDrop";
@@ -25,6 +27,24 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
     current: null
   };
   var isDragging = useDragAndDrop(currentDropAreaRef, onDrop);
+  var renderDescription = function renderDescription() {
+    if (!description) {
+      return null;
+    }
+    if (Array.isArray(description)) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: cn('description')
+      }, description.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("li", {
+          key: index,
+          className: cn('description-item')
+        }, item);
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, description);
+  };
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       disabled: disabled,
@@ -43,8 +63,6 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
     onClick: !disabled ? onSelectButtonClick : undefined
   }), "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"), /*#__PURE__*/React.createElement("span", null, "\u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u0435 \u0438\u0445 \u0441\u044E\u0434\u0430", required && /*#__PURE__*/React.createElement("span", {
     className: cn('mark')
-  }, "*"))), !!description && /*#__PURE__*/React.createElement("div", {
-    className: cn('description')
-  }, description));
+  }, "*"))), renderDescription());
 };
 export default UploadFieldDropArea;

package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}.mfui-upload-file-item_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);pointer-events:none}.mfui-upload-file-item_disabled .mfui-upload-file-item__progress-bar-fill{background-color:var(--spbSky2)}.mfui-upload-file-item_disabled .mfui-upload-file-item__error-message,.mfui-upload-file-item_disabled .mfui-upload-file-item__service-message{color:var(--spbSky3)}.mfui-upload-file-item_disabled .mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__download-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__file-icon-box{opacity:.4}

package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.d.ts

@@ -14,13 +14,15 @@ export interface IUploadFileItem {
     /** Сообщение об ошибке */
     errorText?: string;
     /** Проверка файла */
-    isChecking?: string;
+    isChecking?: boolean;
     /** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
     downloadLink?: string;
     /** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
     download?: boolean | string;
     /** Указывает, где открыть скачиваемый документ */
     target?: React.HTMLAttributeAnchorTarget;
+    /** Заблокированное состояние */
+    disabled?: boolean;
     /** Обработчик скачивания файла */
     onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Обработчик удаления файла */

package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js

@@ -40,6 +40,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
     downloadLink = _ref.downloadLink,
     download = _ref.download,
     target = _ref.target,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onDownload = _ref.onDownload,
     onDelete = _ref.onDelete,
     dataAttrs = _ref.dataAttrs;
@@ -80,7 +82,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      error: isError
+      error: isError,
+      disabled: disabled
     }, [className])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('file-icon-box')
@@ -113,7 +116,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
     type: "button",
     className: cn('cancel-icon-box')
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
-    onClick: onDelete
+    onClick: onDelete,
+    disabled: disabled
   }), /*#__PURE__*/React.createElement(CancelIcon, {
     className: cn('icon')
   })));

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

@@ -6,8 +6,10 @@ export interface IAccordionProps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
-    /** Заголовок */
+    /** Тег заголовка (определяет базовый тег и стили) */
     titleTag?: IHeaderProps['as'];
+    /** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
+    titleTagName?: IHeaderProps['tag'];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Включить микроразметку */

package/dist/lib/components/Accordion/Accordion.js

@@ -29,6 +29,7 @@ var Accordion = function Accordion(_ref) {
     title = _ref.title,
     _ref$titleTag = _ref.titleTag,
     titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
+    titleTagName = _ref.titleTagName,
     _ref$isOpened = _ref.isOpened,
     isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
     _ref$hasMicrodata = _ref.hasMicrodata,
@@ -90,6 +91,7 @@ var Accordion = function Accordion(_ref) {
     itemProp: 'name'
   }), /*#__PURE__*/React.createElement(_Header["default"], {
     as: titleTag,
+    tag: titleTagName,
     dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
     className: titlePropsClasses
   }, title), /*#__PURE__*/React.createElement("div", {

package/dist/lib/components/Pagination/Pagination.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}

package/dist/lib/components/UploadForm/UploadField/UploadField.d.ts

@@ -10,7 +10,7 @@ export interface IUploadDropField {
     /** Действие при выборе файла */
     onChange: (files: File[]) => void;
     /** Дополнительная информация */
-    description?: string;
+    description?: string | string[];
     /** Список допустимых типов файлов для внутреннего input */
     accept?: string;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;list-style:none;margin:0;padding:0;text-align:center}.mfui-upload-field-drop-area__description-item{margin:0;padding:0}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}

package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import './UploadFieldDropArea.scss';
 export interface IUploadFieldDropArea {
     /** Дополнительная информация */
-    description?: string;
+    description?: string | string[];
     /** Обязательность поля */
     required: boolean;
     /** Заблокированное состояние */

package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js

@@ -8,6 +8,8 @@ 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.is-array.js");
+require("core-js/modules/es.array.map.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _useDragAndDrop = _interopRequireDefault(require("../useDragAndDrop"));
@@ -34,6 +36,24 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
     current: null
   };
   var isDragging = (0, _useDragAndDrop["default"])(currentDropAreaRef, onDrop);
+  var renderDescription = function renderDescription() {
+    if (!description) {
+      return null;
+    }
+    if (Array.isArray(description)) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: cn('description')
+      }, description.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("li", {
+          key: index,
+          className: cn('description-item')
+        }, item);
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, description);
+  };
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
       disabled: disabled,
@@ -52,8 +72,6 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
     onClick: !disabled ? onSelectButtonClick : undefined
   }), "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"), /*#__PURE__*/React.createElement("span", null, "\u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u0435 \u0438\u0445 \u0441\u044E\u0434\u0430", required && /*#__PURE__*/React.createElement("span", {
     className: cn('mark')
-  }, "*"))), !!description && /*#__PURE__*/React.createElement("div", {
-    className: cn('description')
-  }, description));
+  }, "*"))), renderDescription());
 };
 var _default = exports["default"] = UploadFieldDropArea;

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}.mfui-upload-file-item_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);pointer-events:none}.mfui-upload-file-item_disabled .mfui-upload-file-item__progress-bar-fill{background-color:var(--spbSky2)}.mfui-upload-file-item_disabled .mfui-upload-file-item__error-message,.mfui-upload-file-item_disabled .mfui-upload-file-item__service-message{color:var(--spbSky3)}.mfui-upload-file-item_disabled .mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__download-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__file-icon-box{opacity:.4}

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.d.ts

@@ -14,13 +14,15 @@ export interface IUploadFileItem {
     /** Сообщение об ошибке */
     errorText?: string;
     /** Проверка файла */
-    isChecking?: string;
+    isChecking?: boolean;
     /** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
     downloadLink?: string;
     /** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
     download?: boolean | string;
     /** Указывает, где открыть скачиваемый документ */
     target?: React.HTMLAttributeAnchorTarget;
+    /** Заблокированное состояние */
+    disabled?: boolean;
     /** Обработчик скачивания файла */
     onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Обработчик удаления файла */

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js

@@ -49,6 +49,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
     downloadLink = _ref.downloadLink,
     download = _ref.download,
     target = _ref.target,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onDownload = _ref.onDownload,
     onDelete = _ref.onDelete,
     dataAttrs = _ref.dataAttrs;
@@ -89,7 +91,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
-      error: isError
+      error: isError,
+      disabled: disabled
     }, [className])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('file-icon-box')
@@ -122,7 +125,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
     type: "button",
     className: cn('cancel-icon-box')
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
-    onClick: onDelete
+    onClick: onDelete,
+    disabled: disabled
   }), /*#__PURE__*/React.createElement(CancelIcon, {
     className: cn('icon')
   })));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "8.12.1",
+    "version": "8.13.0",
     "files": [
         "dist",
         "styles"
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "8a69aba34853a115f6b8aba23641784eb6ffe1cf"
+    "gitHead": "8956610140095dff83d364a00cea0341bcf8cc69"
 }