@megafon/ui-core 5.0.1 → 5.1.1

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 (14) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/es/components/Accordion/Accordion.css +1 -1
  3. package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css +27 -2
  4. package/dist/es/components/Badges/components/PromoBadge/PromoBadge.d.ts +13 -1
  5. package/dist/es/components/Badges/components/PromoBadge/PromoBadge.js +17 -3
  6. package/dist/es/components/Button/Button.css +40 -40
  7. package/dist/es/components/Search/Search.js +5 -1
  8. package/dist/lib/components/Accordion/Accordion.css +1 -1
  9. package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css +27 -2
  10. package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.d.ts +13 -1
  11. package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.js +19 -4
  12. package/dist/lib/components/Button/Button.css +40 -40
  13. package/dist/lib/components/Search/Search.js +5 -1
  14. package/package.json +5 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,35 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.1.1](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-core@5.1.0...@megafon/ui-core@5.1.1) (2023-07-18)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **accordion:** reduced mobile paddings ([35c207a](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/35c207a1e704023a2553f4a0c4ed4a928d3d5fd9))
12
+ * **badge:** new color purple gradient ([fbaec53](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/fbaec53961cef1e2683ea54676f6ded0f6514841))
13
+ * **button:** fix redefining styles ([d0002f9](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/d0002f90d6dbd7b120b5f88b2dac129b11593ccb))
14
+
15
+
16
+
17
+
18
+
19
+ # [5.1.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@5.0.1...@megafon/ui-core@5.1.0) (2023-07-10)
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **search:** clear debounce timeout on field clear ([811c08a](https://github.com/MegafonWebLab/megafon-ui/commit/811c08a9a12fe3a0de6e1c6eb497cc8a9443a9e0))
25
+
26
+
27
+ ### Features
28
+
29
+ * **promobadge:** add color prop ([bf77ac7](https://github.com/MegafonWebLab/megafon-ui/commit/bf77ac7be405dec7fd4dae3c91273813a761e408))
30
+
31
+
32
+
33
+
34
+
6
35
  ## [5.0.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@5.0.0...@megafon/ui-core@5.0.1) (2023-07-10)
7
36
 
8
37
 
@@ -34,8 +63,17 @@ How to migrate:
34
63
  - remove clear field in handler onIconClick;
35
64
  - remove field focus in handler onIconClick;
36
65
 
66
+ * **tile:** remove shadow prop deprecated values: low, high
37
67
 
68
+ How to migrate:
69
+ - don't use value "low" (use what better suitable for specific places)
70
+ - use "pressed" instead of "high"
71
+
72
+ * **notification:** remove shadowLevel prop deprecated values: low, high
38
73
 
74
+ How to migrate:
75
+ - don't use value "low" (use what better suitable for specific places)
76
+ - use "pressed" instead of "high"
39
77
 
40
78
 
41
79
  ## [4.16.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.16.0...@megafon/ui-core@4.16.1) (2023-05-23)
package/dist/es/components/Accordion/Accordion.css CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
  .mfui-accordion__title-wrap {
14
14
  position: relative;
15
- padding: 24px 44px 24px 16px;
15
+ padding: 16px 44px 16px 16px;
16
16
  border-radius: 12px;
17
17
  outline: none;
18
18
  cursor: pointer;
package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css CHANGED
@@ -5,12 +5,37 @@
5
5
  -webkit-box-align: center;
6
6
  -ms-flex-align: center;
7
7
  align-items: center;
8
- padding: 4px 12px;
9
8
  width: -webkit-fit-content;
10
9
  width: -moz-fit-content;
11
10
  width: fit-content;
11
+ padding: 4px 12px;
12
12
  border-radius: 8px;
13
13
  color: var(--stcWhite);
14
+ /* DEPRECATED classes &_type BEGIN */
15
+ /* DEPRECATED classes &_type END */
16
+ }
17
+ .mfui-promo-badge_color_137c {
18
+ background-color: var(--137C);
19
+ }
20
+ .mfui-promo-badge_color_brand-purple-20 {
21
+ color: var(--brandPurple);
22
+ background-color: var(--brandPurple20);
23
+ }
24
+ .mfui-promo-badge_color_brand-purple {
25
+ background-color: var(--brandPurple);
26
+ }
27
+ .mfui-promo-badge_color_reflex-blue {
28
+ background-color: var(--reflexBlue);
29
+ }
30
+ .mfui-promo-badge_color_system-blue {
31
+ background-color: var(--systemBlue);
32
+ }
33
+ .mfui-promo-badge_color_warm-red {
34
+ background-color: var(--warmRedC);
35
+ }
36
+ .mfui-promo-badge_color_gradient-purple {
37
+ color: var(--stcWhite);
38
+ background: linear-gradient(126.8deg, #A336BE 21%, #363078 78%);
14
39
  }
15
40
  .mfui-promo-badge_type_hit {
16
41
  background-color: var(--warmRedC);
@@ -28,8 +53,8 @@
28
53
  background-color: var(--reflexBlue);
29
54
  }
30
55
  .mfui-promo-badge_type_interests {
31
- background-color: var(--brandPurple20);
32
56
  color: var(--brandPurple);
57
+ background-color: var(--brandPurple20);
33
58
  }
34
59
  .mfui-promo-badge__text {
35
60
  font-family: inherit;
package/dist/es/components/Badges/components/PromoBadge/PromoBadge.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import './PromoBadge.less';
3
+ export declare const PromoBadgeColors: {
4
+ readonly '137C': "137c";
5
+ readonly BRAND_PURPLE_20: "brand-purple-20";
6
+ readonly BRAND_PURPLE: "brand-purple";
7
+ readonly REFLEX_BLUE: "reflex-blue";
8
+ readonly SYSTEM_BLUE: "system-blue";
9
+ readonly WARM_RED: "warm-red";
10
+ readonly GRADIENT_PURPLE: "gradient-purple";
11
+ };
12
+ declare type PromoBadgeColorsType = typeof PromoBadgeColors[keyof typeof PromoBadgeColors];
3
13
  export declare const PromoBadgeTypes: {
4
14
  readonly HIT: "hit";
5
15
  readonly NEW: "new";
@@ -10,7 +20,9 @@ export declare const PromoBadgeTypes: {
10
20
  };
11
21
  declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
12
22
  export interface IPromoBadgeProps {
13
- /** Тип промо-бэйджа */
23
+ /** Цвет промо-бэйджа */
24
+ color?: PromoBadgeColorsType;
25
+ /** DEPRECATED Тип промо-бэйджа (Используйте проп `color`) */
14
26
  type?: PromoBadgeTypesType;
15
27
  /** Дополнительный класс корневого элемента */
16
28
  className?: string;
package/dist/es/components/Badges/components/PromoBadge/PromoBadge.js CHANGED
@@ -4,6 +4,16 @@ import * as React from 'react';
4
4
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
5
  import * as PropTypes from 'prop-types';
6
6
  import "./PromoBadge.css";
7
+ export var PromoBadgeColors = {
8
+ '137C': '137c',
9
+ BRAND_PURPLE_20: 'brand-purple-20',
10
+ BRAND_PURPLE: 'brand-purple',
11
+ REFLEX_BLUE: 'reflex-blue',
12
+ SYSTEM_BLUE: 'system-blue',
13
+ WARM_RED: 'warm-red',
14
+ GRADIENT_PURPLE: 'gradient-purple'
15
+ }; // DEPRECATED
16
+
7
17
  export var PromoBadgeTypes = {
8
18
  HIT: 'hit',
9
19
  NEW: 'new',
@@ -15,14 +25,16 @@ export var PromoBadgeTypes = {
15
25
  var cn = cnCreate('mfui-promo-badge');
16
26
 
17
27
  var PromoBadge = function PromoBadge(_ref) {
18
- var _ref$type = _ref.type,
19
- type = _ref$type === void 0 ? 'hit' : _ref$type,
28
+ var color = _ref.color,
29
+ _ref$type = _ref.type,
30
+ type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
20
31
  className = _ref.className,
21
32
  children = _ref.children,
22
33
  dataAttrs = _ref.dataAttrs;
23
34
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
24
35
  className: cn({
25
- type: type
36
+ color: color,
37
+ type: color ? undefined : type
26
38
  }, className)
27
39
  }), /*#__PURE__*/React.createElement("span", {
28
40
  className: cn('text')
@@ -30,6 +42,8 @@ var PromoBadge = function PromoBadge(_ref) {
30
42
  };
31
43
 
32
44
  PromoBadge.propTypes = {
45
+ color: PropTypes.oneOf(Object.values(PromoBadgeColors)),
46
+ // DEPRECATED
33
47
  type: PropTypes.oneOf(Object.values(PromoBadgeTypes)),
34
48
  className: PropTypes.string,
35
49
  dataAttrs: PropTypes.shape({
package/dist/es/components/Button/Button.css CHANGED
@@ -90,120 +90,120 @@
90
90
  .mfui-button_type_text {
91
91
  padding: 0;
92
92
  }
93
- @media screen and (min-width: 1280px) {
94
- .mfui-button_size-wide_extra-small {
93
+ @media screen and (min-width: 1024px) {
94
+ .mfui-button_size-desktop_extra-small {
95
95
  min-width: 24px;
96
96
  height: 24px;
97
97
  padding: 0 16px;
98
98
  font-size: 12px;
99
99
  line-height: 14px;
100
100
  }
101
- .mfui-button_size-wide_extra-small .mfui-button__icon,
102
- .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
101
+ .mfui-button_size-desktop_extra-small .mfui-button__icon,
102
+ .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
103
103
  width: 20px;
104
104
  height: 20px;
105
105
  }
106
- .mfui-button_size-wide_small {
106
+ .mfui-button_size-desktop_small {
107
107
  min-width: 40px;
108
108
  height: 40px;
109
109
  padding: 0 24px;
110
110
  }
111
- .mfui-button_size-wide_small .mfui-button__icon,
112
- .mfui-button_size-wide_small .mfui-button__icon-arrow {
111
+ .mfui-button_size-desktop_small .mfui-button__icon,
112
+ .mfui-button_size-desktop_small .mfui-button__icon-arrow {
113
113
  width: 20px;
114
114
  height: 20px;
115
115
  }
116
- .mfui-button_size-wide_medium {
116
+ .mfui-button_size-desktop_medium {
117
117
  min-width: 52px;
118
118
  height: 52px;
119
119
  }
120
- .mfui-button_size-wide_medium .mfui-button__icon,
121
- .mfui-button_size-wide_medium .mfui-button__icon-arrow {
120
+ .mfui-button_size-desktop_medium .mfui-button__icon,
121
+ .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
122
122
  width: 32px;
123
123
  height: 32px;
124
124
  }
125
- .mfui-button_size-wide_large {
125
+ .mfui-button_size-desktop_large {
126
126
  min-width: 60px;
127
127
  height: 60px;
128
128
  }
129
- .mfui-button_size-wide_large .mfui-button__icon,
130
- .mfui-button_size-wide_large .mfui-button__icon-arrow {
129
+ .mfui-button_size-desktop_large .mfui-button__icon,
130
+ .mfui-button_size-desktop_large .mfui-button__icon-arrow {
131
131
  width: 32px;
132
132
  height: 32px;
133
133
  }
134
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
134
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
135
135
  padding: 0 8px;
136
136
  }
137
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
137
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
138
138
  padding-left: 12px;
139
139
  }
140
- .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
141
- .mfui-button_size-wide_large.mfui-buttonhas-arrow {
140
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
141
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
142
142
  padding: 0 24px;
143
143
  }
144
- .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
145
- .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
146
- .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
144
+ .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
145
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
146
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
147
147
  padding-left: 16px;
148
148
  }
149
149
  .mfui-button_type_text {
150
150
  padding: 0;
151
151
  }
152
152
  }
153
- @media screen and (min-width: 1024px) {
154
- .mfui-button_size-desktop_extra-small {
153
+ @media screen and (min-width: 1280px) {
154
+ .mfui-button_size-wide_extra-small {
155
155
  min-width: 24px;
156
156
  height: 24px;
157
157
  padding: 0 16px;
158
158
  font-size: 12px;
159
159
  line-height: 14px;
160
160
  }
161
- .mfui-button_size-desktop_extra-small .mfui-button__icon,
162
- .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
161
+ .mfui-button_size-wide_extra-small .mfui-button__icon,
162
+ .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
163
163
  width: 20px;
164
164
  height: 20px;
165
165
  }
166
- .mfui-button_size-desktop_small {
166
+ .mfui-button_size-wide_small {
167
167
  min-width: 40px;
168
168
  height: 40px;
169
169
  padding: 0 24px;
170
170
  }
171
- .mfui-button_size-desktop_small .mfui-button__icon,
172
- .mfui-button_size-desktop_small .mfui-button__icon-arrow {
171
+ .mfui-button_size-wide_small .mfui-button__icon,
172
+ .mfui-button_size-wide_small .mfui-button__icon-arrow {
173
173
  width: 20px;
174
174
  height: 20px;
175
175
  }
176
- .mfui-button_size-desktop_medium {
176
+ .mfui-button_size-wide_medium {
177
177
  min-width: 52px;
178
178
  height: 52px;
179
179
  }
180
- .mfui-button_size-desktop_medium .mfui-button__icon,
181
- .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
180
+ .mfui-button_size-wide_medium .mfui-button__icon,
181
+ .mfui-button_size-wide_medium .mfui-button__icon-arrow {
182
182
  width: 32px;
183
183
  height: 32px;
184
184
  }
185
- .mfui-button_size-desktop_large {
185
+ .mfui-button_size-wide_large {
186
186
  min-width: 60px;
187
187
  height: 60px;
188
188
  }
189
- .mfui-button_size-desktop_large .mfui-button__icon,
190
- .mfui-button_size-desktop_large .mfui-button__icon-arrow {
189
+ .mfui-button_size-wide_large .mfui-button__icon,
190
+ .mfui-button_size-wide_large .mfui-button__icon-arrow {
191
191
  width: 32px;
192
192
  height: 32px;
193
193
  }
194
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
194
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
195
195
  padding: 0 8px;
196
196
  }
197
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
197
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
198
198
  padding-left: 12px;
199
199
  }
200
- .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
201
- .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
200
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
201
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow {
202
202
  padding: 0 24px;
203
203
  }
204
- .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
205
- .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
206
- .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
204
+ .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
205
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
206
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
207
207
  padding-left: 16px;
208
208
  }
209
209
  .mfui-button_type_text {
package/dist/es/components/Search/Search.js CHANGED
@@ -171,8 +171,12 @@ var Search = function Search(_ref) {
171
171
  }, [activeIndex, items, handleItemSubmit, handleSearchSubmit]);
172
172
 
173
173
  var handleClearClick = function handleClearClick() {
174
- var _a;
174
+ var _a; // TODO: После обновления TS до 4 версии, установить @types/lodash.debounce и убрать disable
175
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
176
+ // @ts-ignore
175
177
 
178
+
179
+ !!debouncedOnChange.current && debouncedOnChange.current.cancel();
176
180
  onChange === null || onChange === void 0 ? void 0 : onChange('');
177
181
  setSearchQuery('');
178
182
  (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.focus();
package/dist/lib/components/Accordion/Accordion.css CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
  .mfui-accordion__title-wrap {
14
14
  position: relative;
15
- padding: 24px 44px 24px 16px;
15
+ padding: 16px 44px 16px 16px;
16
16
  border-radius: 12px;
17
17
  outline: none;
18
18
  cursor: pointer;
package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css CHANGED
@@ -5,12 +5,37 @@
5
5
  -webkit-box-align: center;
6
6
  -ms-flex-align: center;
7
7
  align-items: center;
8
- padding: 4px 12px;
9
8
  width: -webkit-fit-content;
10
9
  width: -moz-fit-content;
11
10
  width: fit-content;
11
+ padding: 4px 12px;
12
12
  border-radius: 8px;
13
13
  color: var(--stcWhite);
14
+ /* DEPRECATED classes &_type BEGIN */
15
+ /* DEPRECATED classes &_type END */
16
+ }
17
+ .mfui-promo-badge_color_137c {
18
+ background-color: var(--137C);
19
+ }
20
+ .mfui-promo-badge_color_brand-purple-20 {
21
+ color: var(--brandPurple);
22
+ background-color: var(--brandPurple20);
23
+ }
24
+ .mfui-promo-badge_color_brand-purple {
25
+ background-color: var(--brandPurple);
26
+ }
27
+ .mfui-promo-badge_color_reflex-blue {
28
+ background-color: var(--reflexBlue);
29
+ }
30
+ .mfui-promo-badge_color_system-blue {
31
+ background-color: var(--systemBlue);
32
+ }
33
+ .mfui-promo-badge_color_warm-red {
34
+ background-color: var(--warmRedC);
35
+ }
36
+ .mfui-promo-badge_color_gradient-purple {
37
+ color: var(--stcWhite);
38
+ background: linear-gradient(126.8deg, #A336BE 21%, #363078 78%);
14
39
  }
15
40
  .mfui-promo-badge_type_hit {
16
41
  background-color: var(--warmRedC);
@@ -28,8 +53,8 @@
28
53
  background-color: var(--reflexBlue);
29
54
  }
30
55
  .mfui-promo-badge_type_interests {
31
- background-color: var(--brandPurple20);
32
56
  color: var(--brandPurple);
57
+ background-color: var(--brandPurple20);
33
58
  }
34
59
  .mfui-promo-badge__text {
35
60
  font-family: inherit;
package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import './PromoBadge.less';
3
+ export declare const PromoBadgeColors: {
4
+ readonly '137C': "137c";
5
+ readonly BRAND_PURPLE_20: "brand-purple-20";
6
+ readonly BRAND_PURPLE: "brand-purple";
7
+ readonly REFLEX_BLUE: "reflex-blue";
8
+ readonly SYSTEM_BLUE: "system-blue";
9
+ readonly WARM_RED: "warm-red";
10
+ readonly GRADIENT_PURPLE: "gradient-purple";
11
+ };
12
+ declare type PromoBadgeColorsType = typeof PromoBadgeColors[keyof typeof PromoBadgeColors];
3
13
  export declare const PromoBadgeTypes: {
4
14
  readonly HIT: "hit";
5
15
  readonly NEW: "new";
@@ -10,7 +20,9 @@ export declare const PromoBadgeTypes: {
10
20
  };
11
21
  declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
12
22
  export interface IPromoBadgeProps {
13
- /** Тип промо-бэйджа */
23
+ /** Цвет промо-бэйджа */
24
+ color?: PromoBadgeColorsType;
25
+ /** DEPRECATED Тип промо-бэйджа (Используйте проп `color`) */
14
26
  type?: PromoBadgeTypesType;
15
27
  /** Дополнительный класс корневого элемента */
16
28
  className?: string;
package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.js CHANGED
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.PromoBadgeTypes = void 0;
8
+ exports["default"] = exports.PromoBadgeTypes = exports.PromoBadgeColors = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
@@ -23,6 +23,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
25
25
 
26
+ var PromoBadgeColors = {
27
+ '137C': '137c',
28
+ BRAND_PURPLE_20: 'brand-purple-20',
29
+ BRAND_PURPLE: 'brand-purple',
30
+ REFLEX_BLUE: 'reflex-blue',
31
+ SYSTEM_BLUE: 'system-blue',
32
+ WARM_RED: 'warm-red',
33
+ GRADIENT_PURPLE: 'gradient-purple'
34
+ }; // DEPRECATED
35
+
36
+ exports.PromoBadgeColors = PromoBadgeColors;
26
37
  var PromoBadgeTypes = {
27
38
  HIT: 'hit',
28
39
  NEW: 'new',
@@ -35,14 +46,16 @@ exports.PromoBadgeTypes = PromoBadgeTypes;
35
46
  var cn = (0, _uiHelpers.cnCreate)('mfui-promo-badge');
36
47
 
37
48
  var PromoBadge = function PromoBadge(_ref) {
38
- var _ref$type = _ref.type,
39
- type = _ref$type === void 0 ? 'hit' : _ref$type,
49
+ var color = _ref.color,
50
+ _ref$type = _ref.type,
51
+ type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
40
52
  className = _ref.className,
41
53
  children = _ref.children,
42
54
  dataAttrs = _ref.dataAttrs;
43
55
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
44
56
  className: cn({
45
- type: type
57
+ color: color,
58
+ type: color ? undefined : type
46
59
  }, className)
47
60
  }), /*#__PURE__*/React.createElement("span", {
48
61
  className: cn('text')
@@ -50,6 +63,8 @@ var PromoBadge = function PromoBadge(_ref) {
50
63
  };
51
64
 
52
65
  PromoBadge.propTypes = {
66
+ color: PropTypes.oneOf(Object.values(PromoBadgeColors)),
67
+ // DEPRECATED
53
68
  type: PropTypes.oneOf(Object.values(PromoBadgeTypes)),
54
69
  className: PropTypes.string,
55
70
  dataAttrs: PropTypes.shape({
package/dist/lib/components/Button/Button.css CHANGED
@@ -90,120 +90,120 @@
90
90
  .mfui-button_type_text {
91
91
  padding: 0;
92
92
  }
93
- @media screen and (min-width: 1280px) {
94
- .mfui-button_size-wide_extra-small {
93
+ @media screen and (min-width: 1024px) {
94
+ .mfui-button_size-desktop_extra-small {
95
95
  min-width: 24px;
96
96
  height: 24px;
97
97
  padding: 0 16px;
98
98
  font-size: 12px;
99
99
  line-height: 14px;
100
100
  }
101
- .mfui-button_size-wide_extra-small .mfui-button__icon,
102
- .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
101
+ .mfui-button_size-desktop_extra-small .mfui-button__icon,
102
+ .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
103
103
  width: 20px;
104
104
  height: 20px;
105
105
  }
106
- .mfui-button_size-wide_small {
106
+ .mfui-button_size-desktop_small {
107
107
  min-width: 40px;
108
108
  height: 40px;
109
109
  padding: 0 24px;
110
110
  }
111
- .mfui-button_size-wide_small .mfui-button__icon,
112
- .mfui-button_size-wide_small .mfui-button__icon-arrow {
111
+ .mfui-button_size-desktop_small .mfui-button__icon,
112
+ .mfui-button_size-desktop_small .mfui-button__icon-arrow {
113
113
  width: 20px;
114
114
  height: 20px;
115
115
  }
116
- .mfui-button_size-wide_medium {
116
+ .mfui-button_size-desktop_medium {
117
117
  min-width: 52px;
118
118
  height: 52px;
119
119
  }
120
- .mfui-button_size-wide_medium .mfui-button__icon,
121
- .mfui-button_size-wide_medium .mfui-button__icon-arrow {
120
+ .mfui-button_size-desktop_medium .mfui-button__icon,
121
+ .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
122
122
  width: 32px;
123
123
  height: 32px;
124
124
  }
125
- .mfui-button_size-wide_large {
125
+ .mfui-button_size-desktop_large {
126
126
  min-width: 60px;
127
127
  height: 60px;
128
128
  }
129
- .mfui-button_size-wide_large .mfui-button__icon,
130
- .mfui-button_size-wide_large .mfui-button__icon-arrow {
129
+ .mfui-button_size-desktop_large .mfui-button__icon,
130
+ .mfui-button_size-desktop_large .mfui-button__icon-arrow {
131
131
  width: 32px;
132
132
  height: 32px;
133
133
  }
134
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
134
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
135
135
  padding: 0 8px;
136
136
  }
137
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
137
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
138
138
  padding-left: 12px;
139
139
  }
140
- .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
141
- .mfui-button_size-wide_large.mfui-buttonhas-arrow {
140
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
141
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
142
142
  padding: 0 24px;
143
143
  }
144
- .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
145
- .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
146
- .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
144
+ .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
145
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
146
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
147
147
  padding-left: 16px;
148
148
  }
149
149
  .mfui-button_type_text {
150
150
  padding: 0;
151
151
  }
152
152
  }
153
- @media screen and (min-width: 1024px) {
154
- .mfui-button_size-desktop_extra-small {
153
+ @media screen and (min-width: 1280px) {
154
+ .mfui-button_size-wide_extra-small {
155
155
  min-width: 24px;
156
156
  height: 24px;
157
157
  padding: 0 16px;
158
158
  font-size: 12px;
159
159
  line-height: 14px;
160
160
  }
161
- .mfui-button_size-desktop_extra-small .mfui-button__icon,
162
- .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
161
+ .mfui-button_size-wide_extra-small .mfui-button__icon,
162
+ .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
163
163
  width: 20px;
164
164
  height: 20px;
165
165
  }
166
- .mfui-button_size-desktop_small {
166
+ .mfui-button_size-wide_small {
167
167
  min-width: 40px;
168
168
  height: 40px;
169
169
  padding: 0 24px;
170
170
  }
171
- .mfui-button_size-desktop_small .mfui-button__icon,
172
- .mfui-button_size-desktop_small .mfui-button__icon-arrow {
171
+ .mfui-button_size-wide_small .mfui-button__icon,
172
+ .mfui-button_size-wide_small .mfui-button__icon-arrow {
173
173
  width: 20px;
174
174
  height: 20px;
175
175
  }
176
- .mfui-button_size-desktop_medium {
176
+ .mfui-button_size-wide_medium {
177
177
  min-width: 52px;
178
178
  height: 52px;
179
179
  }
180
- .mfui-button_size-desktop_medium .mfui-button__icon,
181
- .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
180
+ .mfui-button_size-wide_medium .mfui-button__icon,
181
+ .mfui-button_size-wide_medium .mfui-button__icon-arrow {
182
182
  width: 32px;
183
183
  height: 32px;
184
184
  }
185
- .mfui-button_size-desktop_large {
185
+ .mfui-button_size-wide_large {
186
186
  min-width: 60px;
187
187
  height: 60px;
188
188
  }
189
- .mfui-button_size-desktop_large .mfui-button__icon,
190
- .mfui-button_size-desktop_large .mfui-button__icon-arrow {
189
+ .mfui-button_size-wide_large .mfui-button__icon,
190
+ .mfui-button_size-wide_large .mfui-button__icon-arrow {
191
191
  width: 32px;
192
192
  height: 32px;
193
193
  }
194
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
194
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
195
195
  padding: 0 8px;
196
196
  }
197
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
197
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
198
198
  padding-left: 12px;
199
199
  }
200
- .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
201
- .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
200
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
201
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow {
202
202
  padding: 0 24px;
203
203
  }
204
- .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
205
- .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
206
- .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
204
+ .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
205
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
206
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
207
207
  padding-left: 16px;
208
208
  }
209
209
  .mfui-button_type_text {
package/dist/lib/components/Search/Search.js CHANGED
@@ -212,8 +212,12 @@ var Search = function Search(_ref) {
212
212
  }, [activeIndex, items, handleItemSubmit, handleSearchSubmit]);
213
213
 
214
214
  var handleClearClick = function handleClearClick() {
215
- var _a;
215
+ var _a; // TODO: После обновления TS до 4 версии, установить @types/lodash.debounce и убрать disable
216
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
217
+ // @ts-ignore
216
218
 
219
+
220
+ !!debouncedOnChange.current && debouncedOnChange.current.cancel();
217
221
  onChange === null || onChange === void 0 ? void 0 : onChange('');
218
222
  setSearchQuery('');
219
223
  (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.focus();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "5.0.1",
3
+ "version": "5.1.1",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -8,10 +8,6 @@
8
8
  "main": "dist/lib/index.js",
9
9
  "module": "dist/es/index.js",
10
10
  "typings": "dist/lib/index.d.ts",
11
- "repository": {
12
- "type": "git",
13
- "url": "git+https://github.com/MegafonWebLab/megafon-ui.git"
14
- },
15
11
  "sideEffects": [
16
12
  "*.css",
17
13
  "*.less"
@@ -22,7 +18,7 @@
22
18
  "build": "gulp build",
23
19
  "cleanDist": "rm -rf dist styles",
24
20
  "coverage": "yarn coverage:unit",
25
- "coverage:unit": "jest --ci --collectCoverage --coverageDirectory=coverage",
21
+ "coverage:unit": "jest --coverage",
26
22
  "typecheck": "tsc --noEmit -p .",
27
23
  "prettier:check": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx}\"",
28
24
  "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
@@ -54,7 +50,7 @@
54
50
  "@babel/preset-env": "^7.8.6",
55
51
  "@babel/preset-react": "^7.8.3",
56
52
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.12.0",
53
+ "@megafon/ui-icons": "^2.13.0",
58
54
  "@svgr/core": "^2.4.1",
59
55
  "@testing-library/jest-dom": "5.16.2",
60
56
  "@testing-library/react": "12.1.2",
@@ -89,7 +85,7 @@
89
85
  "dependencies": {
90
86
  "@babel/runtime": "^7.8.4",
91
87
  "@datepicker-react/hooks": "^2.7.0",
92
- "@megafon/ui-helpers": "^2.5.0",
88
+ "@megafon/ui-helpers": "^2.5.1",
93
89
  "@popperjs/core": "^2.5.3",
94
90
  "core-js": "^3.6.4",
95
91
  "date-fns": "^2.16.1",
@@ -100,5 +96,5 @@
100
96
  "react-popper": "^2.2.3",
101
97
  "swiper": "^6.5.6"
102
98
  },
103
- "gitHead": "363663b39f257510b1ae1ee3c776d15d7f075a1f"
99
+ "gitHead": "9d1e595eebdde3e8652d07511c1bf3057d61a8f3"
104
100
  }