@megafon/ui-core 8.12.0 → 8.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/es/components/Accordion/Accordion.d.ts +3 -1
  2. package/dist/es/components/Accordion/Accordion.js +2 -0
  3. package/dist/es/components/Badges/PriceBadge/PriceBadge.d.ts +1 -0
  4. package/dist/es/components/Badges/PriceBadge/PriceBadge.js +28 -1
  5. package/dist/es/components/Modal/Modal.css +1 -1
  6. package/dist/es/components/Modal/_ModalContent/ModalContent.js +1 -4
  7. package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.js +3 -18
  8. package/dist/es/components/Pagination/Pagination.css +1 -1
  9. package/dist/es/components/UploadForm/UploadField/UploadField.d.ts +1 -1
  10. package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
  11. package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +1 -1
  12. package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +21 -3
  13. package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
  14. package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.d.ts +3 -1
  15. package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js +6 -2
  16. package/dist/lib/components/Accordion/Accordion.d.ts +3 -1
  17. package/dist/lib/components/Accordion/Accordion.js +2 -0
  18. package/dist/lib/components/Badges/PriceBadge/PriceBadge.d.ts +1 -0
  19. package/dist/lib/components/Badges/PriceBadge/PriceBadge.js +28 -1
  20. package/dist/lib/components/Modal/Modal.css +1 -1
  21. package/dist/lib/components/Modal/_ModalContent/ModalContent.js +1 -4
  22. package/dist/lib/components/Modal/_ModalMobileBottom/ModalMobileBottom.js +3 -18
  23. package/dist/lib/components/Pagination/Pagination.css +1 -1
  24. package/dist/lib/components/UploadForm/UploadField/UploadField.d.ts +1 -1
  25. package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
  26. package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +1 -1
  27. package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +21 -3
  28. package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
  29. package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.d.ts +3 -1
  30. package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js +6 -2
  31. package/package.json +3 -3
@@ -6,8 +6,10 @@ export interface IAccordionProps {
6
6
  rootRef?: React.Ref<HTMLDivElement>;
7
7
  /** Заголовок */
8
8
  title: string | React.ReactNode | React.ReactNode[];
9
- /** Заголовок */
9
+ /** Тег заголовка (определяет базовый тег и стили) */
10
10
  titleTag?: IHeaderProps['as'];
11
+ /** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
12
+ titleTagName?: IHeaderProps['tag'];
11
13
  /** Состояние открытости */
12
14
  isOpened?: boolean;
13
15
  /** Включить микроразметку */
@@ -20,6 +20,7 @@ var Accordion = function Accordion(_ref) {
20
20
  title = _ref.title,
21
21
  _ref$titleTag = _ref.titleTag,
22
22
  titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
23
+ titleTagName = _ref.titleTagName,
23
24
  _ref$isOpened = _ref.isOpened,
24
25
  isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
25
26
  _ref$hasMicrodata = _ref.hasMicrodata,
@@ -81,6 +82,7 @@ var Accordion = function Accordion(_ref) {
81
82
  itemProp: 'name'
82
83
  }), /*#__PURE__*/React.createElement(Header, {
83
84
  as: titleTag,
85
+ tag: titleTagName,
84
86
  dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
85
87
  className: titlePropsClasses
86
88
  }, title), /*#__PURE__*/React.createElement("div", {
@@ -16,6 +16,7 @@ export declare const PriceBadgeIcon: {
16
16
  readonly ATTENTION: "attention";
17
17
  readonly INFO: "info";
18
18
  readonly PROFILE: "profile";
19
+ readonly BAN: "ban";
19
20
  };
20
21
  export declare const PriseBadgeSize: {
21
22
  readonly SMALL: "small";
@@ -23,6 +23,17 @@ var AttentionIcon = function AttentionIcon(props) {
23
23
  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 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
24
24
  }));
25
25
  };
26
+ var BanIcon = function BanIcon(props) {
27
+ return /*#__PURE__*/React.createElement("svg", _extends({
28
+ viewBox: "0 0 20 20"
29
+ }, props), /*#__PURE__*/React.createElement("path", {
30
+ d: "M12.172 13.056a3.75 3.75 0 01-5.229-5.228l5.229 5.228zM10 6.25a3.75 3.75 0 013.056 5.922L7.827 6.943A3.733 3.733 0 0110 6.25z"
31
+ }), /*#__PURE__*/React.createElement("path", {
32
+ fillRule: "evenodd",
33
+ clipRule: "evenodd",
34
+ d: "M10 2a8 8 0 110 16 8 8 0 010-16zm0 3a5 5 0 100 10 5 5 0 000-10z"
35
+ }));
36
+ };
26
37
  var CheckIcon = function CheckIcon(props) {
27
38
  return /*#__PURE__*/React.createElement("svg", _extends({
28
39
  viewBox: "0 0 20 20"
@@ -64,6 +75,17 @@ var AttentionIconBig = function AttentionIconBig(props) {
64
75
  d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
65
76
  }));
66
77
  };
78
+ var BanIconBig = function BanIconBig(props) {
79
+ return /*#__PURE__*/React.createElement("svg", _extends({
80
+ viewBox: "0 0 32 32"
81
+ }, props), /*#__PURE__*/React.createElement("path", {
82
+ d: "M19.475 20.89a6 6 0 01-8.365-8.365l8.365 8.365zM16 10a6 6 0 014.89 9.475l-8.366-8.366A5.972 5.972 0 0116 10z"
83
+ }), /*#__PURE__*/React.createElement("path", {
84
+ fillRule: "evenodd",
85
+ clipRule: "evenodd",
86
+ d: "M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 4a8 8 0 100 16 8 8 0 000-16z"
87
+ }));
88
+ };
67
89
  var CheckIconBig = function CheckIconBig(props) {
68
90
  return /*#__PURE__*/React.createElement("svg", _extends({
69
91
  viewBox: "0 0 32 32"
@@ -113,7 +135,8 @@ export var PriceBadgeIcon = {
113
135
  CHECK: 'check',
114
136
  ATTENTION: 'attention',
115
137
  INFO: 'info',
116
- PROFILE: 'profile'
138
+ PROFILE: 'profile',
139
+ BAN: 'ban'
117
140
  };
118
141
  export var PriseBadgeSize = {
119
142
  SMALL: 'small',
@@ -134,6 +157,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
134
157
  return InfoIconBig;
135
158
  case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
136
159
  return ProfileIconBig;
160
+ case iconType === PriceBadgeIcon.BAN && isBigIcon:
161
+ return BanIconBig;
137
162
  case iconType === PriceBadgeIcon.PRICE:
138
163
  return PriceIcon;
139
164
  case iconType === PriceBadgeIcon.CHECK:
@@ -144,6 +169,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
144
169
  return InfoIcon;
145
170
  case iconType === PriceBadgeIcon.PROFILE:
146
171
  return ProfileIcon;
172
+ case iconType === PriceBadgeIcon.BAN:
173
+ return BanIcon;
147
174
  default:
148
175
  return TimerIcon;
149
176
  }
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0;-ms-touch-action:none;touch-action:none}.mfui-modal_bottom-view .mfui-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden;-ms-touch-action:pan-y;touch-action:pan-y}.mfui-modal_native-scroll .mfui-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-modal_native-scroll .mfui-modal__overlay{width:calc(100% + 15px)}}.mfui-modal_transition-end .mfui-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-modal_bottom-view .mfui-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-modal_native-scroll .mfui-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-modal_native-scroll .mfui-modal__overlay{width:calc(100% + 15px)}}.mfui-modal_transition-end .mfui-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
@@ -161,10 +161,7 @@ var ModalContent = function ModalContent(_ref) {
161
161
  className: cn('container-inner', {
162
162
  'native-scroll': isEnabledNativeScroll
163
163
  }, classes === null || classes === void 0 ? void 0 : classes.containerInner),
164
- ref: containerInnerRef,
165
- onClick: function onClick(e) {
166
- return e.stopPropagation();
167
- }
164
+ ref: containerInnerRef
168
165
  }), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
169
166
  className: cn('container-body', {
170
167
  'native-scroll': isEnabledNativeScroll
@@ -79,6 +79,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
79
79
  });
80
80
  }, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
81
81
  var handleWindowTouchEnd = React.useCallback(function (e) {
82
+ var _a;
82
83
  var containerWrapNode = containerWrapRef.current;
83
84
  var scrollableNode = scrollBarScrollableRef.current;
84
85
  var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
@@ -86,28 +87,12 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
86
87
  return;
87
88
  }
88
89
  window.cancelAnimationFrame(animationFrameId.current);
89
- if (!e.changedTouches.length) {
90
- setInitialTouchPosition(null);
91
- return;
92
- }
93
- var touchStartY = initialTouchPosition;
94
- var touchEndY = e.changedTouches[0].clientY;
95
- if (touchStartY === null) {
96
- setInitialTouchPosition(null);
97
- return;
98
- }
99
- var deltaY = touchStartY - touchEndY;
100
- var absDeltaY = Math.abs(deltaY);
101
- if (absDeltaY < 5 || touchStartY > touchEndY) {
102
- setInitialTouchPosition(null);
103
- return;
104
- }
105
90
  var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
106
- var isMoreHalfClosed = touchEndY > containerCenterPosition;
91
+ var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
107
92
  setInitialTouchPosition(null);
108
93
  onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
109
94
  onChangeTransitionStep(isMoreHalfClosed ? MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
110
- }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, initialTouchPosition, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
95
+ }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
111
96
  React.useEffect(function () {
112
97
  if (isSwipeDisabled) {
113
98
  return undefined;
@@ -1 +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}
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;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}
@@ -10,7 +10,7 @@ export interface IUploadDropField {
10
10
  /** Действие при выборе файла */
11
11
  onChange: (files: File[]) => void;
12
12
  /** Дополнительная информация */
13
- description?: string;
13
+ description?: string | string[];
14
14
  /** Список допустимых типов файлов для внутреннего input */
15
15
  accept?: string;
16
16
  /** Дополнительные data атрибуты к внутренним элементам */
@@ -1 +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)}
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;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)}
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import './UploadFieldDropArea.scss';
3
3
  export interface IUploadFieldDropArea {
4
4
  /** Дополнительная информация */
5
- description?: string;
5
+ description?: string | string[];
6
6
  /** Обязательность поля */
7
7
  required: boolean;
8
8
  /** Заблокированное состояние */
@@ -1,6 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import "core-js/modules/es.symbol.js";
3
3
  import "core-js/modules/es.symbol.description.js";
4
+ import "core-js/modules/es.array.is-array.js";
5
+ import "core-js/modules/es.array.map.js";
4
6
  import * as React from 'react';
5
7
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
6
8
  import useDragAndDrop from "../useDragAndDrop";
@@ -25,6 +27,24 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
25
27
  current: null
26
28
  };
27
29
  var isDragging = useDragAndDrop(currentDropAreaRef, onDrop);
30
+ var renderDescription = function renderDescription() {
31
+ if (!description) {
32
+ return null;
33
+ }
34
+ if (Array.isArray(description)) {
35
+ return /*#__PURE__*/React.createElement("ul", {
36
+ className: cn('description')
37
+ }, description.map(function (item, index) {
38
+ return /*#__PURE__*/React.createElement("li", {
39
+ key: index,
40
+ className: cn('description-item')
41
+ }, item);
42
+ }));
43
+ }
44
+ return /*#__PURE__*/React.createElement("div", {
45
+ className: cn('description')
46
+ }, description);
47
+ };
28
48
  return /*#__PURE__*/React.createElement("div", _extends({
29
49
  className: cn({
30
50
  disabled: disabled,
@@ -43,8 +63,6 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
43
63
  onClick: !disabled ? onSelectButtonClick : undefined
44
64
  }), "\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", {
45
65
  className: cn('mark')
46
- }, "*"))), !!description && /*#__PURE__*/React.createElement("div", {
47
- className: cn('description')
48
- }, description));
66
+ }, "*"))), renderDescription());
49
67
  };
50
68
  export default UploadFieldDropArea;
@@ -1 +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)}
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)}.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}
@@ -14,13 +14,15 @@ export interface IUploadFileItem {
14
14
  /** Сообщение об ошибке */
15
15
  errorText?: string;
16
16
  /** Проверка файла */
17
- isChecking?: string;
17
+ isChecking?: boolean;
18
18
  /** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
19
19
  downloadLink?: string;
20
20
  /** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
21
21
  download?: boolean | string;
22
22
  /** Указывает, где открыть скачиваемый документ */
23
23
  target?: React.HTMLAttributeAnchorTarget;
24
+ /** Заблокированное состояние */
25
+ disabled?: boolean;
24
26
  /** Обработчик скачивания файла */
25
27
  onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
26
28
  /** Обработчик удаления файла */
@@ -40,6 +40,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
40
40
  downloadLink = _ref.downloadLink,
41
41
  download = _ref.download,
42
42
  target = _ref.target,
43
+ _ref$disabled = _ref.disabled,
44
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
43
45
  onDownload = _ref.onDownload,
44
46
  onDelete = _ref.onDelete,
45
47
  dataAttrs = _ref.dataAttrs;
@@ -80,7 +82,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
80
82
  };
81
83
  return /*#__PURE__*/React.createElement("div", _extends({
82
84
  className: cn({
83
- error: isError
85
+ error: isError,
86
+ disabled: disabled
84
87
  }, [className])
85
88
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
86
89
  className: cn('file-icon-box')
@@ -113,7 +116,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
113
116
  type: "button",
114
117
  className: cn('cancel-icon-box')
115
118
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
116
- onClick: onDelete
119
+ onClick: onDelete,
120
+ disabled: disabled
117
121
  }), /*#__PURE__*/React.createElement(CancelIcon, {
118
122
  className: cn('icon')
119
123
  })));
@@ -6,8 +6,10 @@ export interface IAccordionProps {
6
6
  rootRef?: React.Ref<HTMLDivElement>;
7
7
  /** Заголовок */
8
8
  title: string | React.ReactNode | React.ReactNode[];
9
- /** Заголовок */
9
+ /** Тег заголовка (определяет базовый тег и стили) */
10
10
  titleTag?: IHeaderProps['as'];
11
+ /** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
12
+ titleTagName?: IHeaderProps['tag'];
11
13
  /** Состояние открытости */
12
14
  isOpened?: boolean;
13
15
  /** Включить микроразметку */
@@ -29,6 +29,7 @@ var Accordion = function Accordion(_ref) {
29
29
  title = _ref.title,
30
30
  _ref$titleTag = _ref.titleTag,
31
31
  titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
32
+ titleTagName = _ref.titleTagName,
32
33
  _ref$isOpened = _ref.isOpened,
33
34
  isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
34
35
  _ref$hasMicrodata = _ref.hasMicrodata,
@@ -90,6 +91,7 @@ var Accordion = function Accordion(_ref) {
90
91
  itemProp: 'name'
91
92
  }), /*#__PURE__*/React.createElement(_Header["default"], {
92
93
  as: titleTag,
94
+ tag: titleTagName,
93
95
  dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
94
96
  className: titlePropsClasses
95
97
  }, title), /*#__PURE__*/React.createElement("div", {
@@ -16,6 +16,7 @@ export declare const PriceBadgeIcon: {
16
16
  readonly ATTENTION: "attention";
17
17
  readonly INFO: "info";
18
18
  readonly PROFILE: "profile";
19
+ readonly BAN: "ban";
19
20
  };
20
21
  export declare const PriseBadgeSize: {
21
22
  readonly SMALL: "small";
@@ -32,6 +32,17 @@ var AttentionIcon = function AttentionIcon(props) {
32
32
  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 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
33
33
  }));
34
34
  };
35
+ var BanIcon = function BanIcon(props) {
36
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
37
+ viewBox: "0 0 20 20"
38
+ }, props), /*#__PURE__*/React.createElement("path", {
39
+ d: "M12.172 13.056a3.75 3.75 0 01-5.229-5.228l5.229 5.228zM10 6.25a3.75 3.75 0 013.056 5.922L7.827 6.943A3.733 3.733 0 0110 6.25z"
40
+ }), /*#__PURE__*/React.createElement("path", {
41
+ fillRule: "evenodd",
42
+ clipRule: "evenodd",
43
+ d: "M10 2a8 8 0 110 16 8 8 0 010-16zm0 3a5 5 0 100 10 5 5 0 000-10z"
44
+ }));
45
+ };
35
46
  var CheckIcon = function CheckIcon(props) {
36
47
  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
37
48
  viewBox: "0 0 20 20"
@@ -73,6 +84,17 @@ var AttentionIconBig = function AttentionIconBig(props) {
73
84
  d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
74
85
  }));
75
86
  };
87
+ var BanIconBig = function BanIconBig(props) {
88
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
89
+ viewBox: "0 0 32 32"
90
+ }, props), /*#__PURE__*/React.createElement("path", {
91
+ d: "M19.475 20.89a6 6 0 01-8.365-8.365l8.365 8.365zM16 10a6 6 0 014.89 9.475l-8.366-8.366A5.972 5.972 0 0116 10z"
92
+ }), /*#__PURE__*/React.createElement("path", {
93
+ fillRule: "evenodd",
94
+ clipRule: "evenodd",
95
+ d: "M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 4a8 8 0 100 16 8 8 0 000-16z"
96
+ }));
97
+ };
76
98
  var CheckIconBig = function CheckIconBig(props) {
77
99
  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
78
100
  viewBox: "0 0 32 32"
@@ -122,7 +144,8 @@ var PriceBadgeIcon = exports.PriceBadgeIcon = {
122
144
  CHECK: 'check',
123
145
  ATTENTION: 'attention',
124
146
  INFO: 'info',
125
- PROFILE: 'profile'
147
+ PROFILE: 'profile',
148
+ BAN: 'ban'
126
149
  };
127
150
  var PriseBadgeSize = exports.PriseBadgeSize = {
128
151
  SMALL: 'small',
@@ -143,6 +166,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
143
166
  return InfoIconBig;
144
167
  case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
145
168
  return ProfileIconBig;
169
+ case iconType === PriceBadgeIcon.BAN && isBigIcon:
170
+ return BanIconBig;
146
171
  case iconType === PriceBadgeIcon.PRICE:
147
172
  return PriceIcon;
148
173
  case iconType === PriceBadgeIcon.CHECK:
@@ -153,6 +178,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
153
178
  return InfoIcon;
154
179
  case iconType === PriceBadgeIcon.PROFILE:
155
180
  return ProfileIcon;
181
+ case iconType === PriceBadgeIcon.BAN:
182
+ return BanIcon;
156
183
  default:
157
184
  return TimerIcon;
158
185
  }
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0;-ms-touch-action:none;touch-action:none}.mfui-modal_bottom-view .mfui-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden;-ms-touch-action:pan-y;touch-action:pan-y}.mfui-modal_native-scroll .mfui-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-modal_native-scroll .mfui-modal__overlay{width:calc(100% + 15px)}}.mfui-modal_transition-end .mfui-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-modal_bottom-view .mfui-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-modal_native-scroll .mfui-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-modal_native-scroll .mfui-modal__overlay{width:calc(100% + 15px)}}.mfui-modal_transition-end .mfui-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
@@ -170,10 +170,7 @@ var ModalContent = function ModalContent(_ref) {
170
170
  className: cn('container-inner', {
171
171
  'native-scroll': isEnabledNativeScroll
172
172
  }, classes === null || classes === void 0 ? void 0 : classes.containerInner),
173
- ref: containerInnerRef,
174
- onClick: function onClick(e) {
175
- return e.stopPropagation();
176
- }
173
+ ref: containerInnerRef
177
174
  }), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
178
175
  className: cn('container-body', {
179
176
  'native-scroll': isEnabledNativeScroll
@@ -88,6 +88,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
88
88
  });
89
89
  }, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
90
90
  var handleWindowTouchEnd = React.useCallback(function (e) {
91
+ var _a;
91
92
  var containerWrapNode = containerWrapRef.current;
92
93
  var scrollableNode = scrollBarScrollableRef.current;
93
94
  var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
@@ -95,28 +96,12 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
95
96
  return;
96
97
  }
97
98
  window.cancelAnimationFrame(animationFrameId.current);
98
- if (!e.changedTouches.length) {
99
- setInitialTouchPosition(null);
100
- return;
101
- }
102
- var touchStartY = initialTouchPosition;
103
- var touchEndY = e.changedTouches[0].clientY;
104
- if (touchStartY === null) {
105
- setInitialTouchPosition(null);
106
- return;
107
- }
108
- var deltaY = touchStartY - touchEndY;
109
- var absDeltaY = Math.abs(deltaY);
110
- if (absDeltaY < 5 || touchStartY > touchEndY) {
111
- setInitialTouchPosition(null);
112
- return;
113
- }
114
99
  var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
115
- var isMoreHalfClosed = touchEndY > containerCenterPosition;
100
+ var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
116
101
  setInitialTouchPosition(null);
117
102
  onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
118
103
  onChangeTransitionStep(isMoreHalfClosed ? _Modal.MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : _Modal.MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
119
- }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, initialTouchPosition, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
104
+ }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
120
105
  React.useEffect(function () {
121
106
  if (isSwipeDisabled) {
122
107
  return undefined;
@@ -1 +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}
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;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}
@@ -10,7 +10,7 @@ export interface IUploadDropField {
10
10
  /** Действие при выборе файла */
11
11
  onChange: (files: File[]) => void;
12
12
  /** Дополнительная информация */
13
- description?: string;
13
+ description?: string | string[];
14
14
  /** Список допустимых типов файлов для внутреннего input */
15
15
  accept?: string;
16
16
  /** Дополнительные data атрибуты к внутренним элементам */
@@ -1 +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)}
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;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)}
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import './UploadFieldDropArea.scss';
3
3
  export interface IUploadFieldDropArea {
4
4
  /** Дополнительная информация */
5
- description?: string;
5
+ description?: string | string[];
6
6
  /** Обязательность поля */
7
7
  required: boolean;
8
8
  /** Заблокированное состояние */
@@ -8,6 +8,8 @@ exports["default"] = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  require("core-js/modules/es.symbol.js");
10
10
  require("core-js/modules/es.symbol.description.js");
11
+ require("core-js/modules/es.array.is-array.js");
12
+ require("core-js/modules/es.array.map.js");
11
13
  var React = _interopRequireWildcard(require("react"));
12
14
  var _uiHelpers = require("@megafon/ui-helpers");
13
15
  var _useDragAndDrop = _interopRequireDefault(require("../useDragAndDrop"));
@@ -34,6 +36,24 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
34
36
  current: null
35
37
  };
36
38
  var isDragging = (0, _useDragAndDrop["default"])(currentDropAreaRef, onDrop);
39
+ var renderDescription = function renderDescription() {
40
+ if (!description) {
41
+ return null;
42
+ }
43
+ if (Array.isArray(description)) {
44
+ return /*#__PURE__*/React.createElement("ul", {
45
+ className: cn('description')
46
+ }, description.map(function (item, index) {
47
+ return /*#__PURE__*/React.createElement("li", {
48
+ key: index,
49
+ className: cn('description-item')
50
+ }, item);
51
+ }));
52
+ }
53
+ return /*#__PURE__*/React.createElement("div", {
54
+ className: cn('description')
55
+ }, description);
56
+ };
37
57
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
38
58
  className: cn({
39
59
  disabled: disabled,
@@ -52,8 +72,6 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
52
72
  onClick: !disabled ? onSelectButtonClick : undefined
53
73
  }), "\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", {
54
74
  className: cn('mark')
55
- }, "*"))), !!description && /*#__PURE__*/React.createElement("div", {
56
- className: cn('description')
57
- }, description));
75
+ }, "*"))), renderDescription());
58
76
  };
59
77
  var _default = exports["default"] = UploadFieldDropArea;
@@ -1 +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)}
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)}.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}
@@ -14,13 +14,15 @@ export interface IUploadFileItem {
14
14
  /** Сообщение об ошибке */
15
15
  errorText?: string;
16
16
  /** Проверка файла */
17
- isChecking?: string;
17
+ isChecking?: boolean;
18
18
  /** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
19
19
  downloadLink?: string;
20
20
  /** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
21
21
  download?: boolean | string;
22
22
  /** Указывает, где открыть скачиваемый документ */
23
23
  target?: React.HTMLAttributeAnchorTarget;
24
+ /** Заблокированное состояние */
25
+ disabled?: boolean;
24
26
  /** Обработчик скачивания файла */
25
27
  onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
26
28
  /** Обработчик удаления файла */
@@ -49,6 +49,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
49
49
  downloadLink = _ref.downloadLink,
50
50
  download = _ref.download,
51
51
  target = _ref.target,
52
+ _ref$disabled = _ref.disabled,
53
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
52
54
  onDownload = _ref.onDownload,
53
55
  onDelete = _ref.onDelete,
54
56
  dataAttrs = _ref.dataAttrs;
@@ -89,7 +91,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
89
91
  };
90
92
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
91
93
  className: cn({
92
- error: isError
94
+ error: isError,
95
+ disabled: disabled
93
96
  }, [className])
94
97
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
95
98
  className: cn('file-icon-box')
@@ -122,7 +125,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
122
125
  type: "button",
123
126
  className: cn('cancel-icon-box')
124
127
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
125
- onClick: onDelete
128
+ onClick: onDelete,
129
+ disabled: disabled
126
130
  }), /*#__PURE__*/React.createElement(CancelIcon, {
127
131
  className: cn('icon')
128
132
  })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "8.12.0",
3
+ "version": "8.13.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -50,7 +50,7 @@
50
50
  "@babel/preset-env": "^7.8.6",
51
51
  "@babel/preset-react": "^7.8.3",
52
52
  "@babel/preset-typescript": "^7.8.3",
53
- "@megafon/ui-icons": "^3.12.0",
53
+ "@megafon/ui-icons": "^3.12.1",
54
54
  "@svgr/core": "^2.4.1",
55
55
  "@testing-library/jest-dom": "^6.5.0",
56
56
  "@testing-library/react": "^16.0.1",
@@ -104,5 +104,5 @@
104
104
  "simplebar-react": "^3.2.5",
105
105
  "swiper": "^11.1.1"
106
106
  },
107
- "gitHead": "554c37f61636b2dfef18178670158d3503a23b33"
107
+ "gitHead": "8956610140095dff83d364a00cea0341bcf8cc69"
108
108
  }