@megafon/ui-core 4.14.1 → 4.14.2

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 +12 -0
  2. package/dist/es/components/Collapse/Collapse.css +3 -0
  3. package/dist/es/components/Collapse/Collapse.d.ts +6 -23
  4. package/dist/es/components/Collapse/Collapse.js +21 -16
  5. package/dist/es/components/Search/Search.css +173 -106
  6. package/dist/es/components/Search/Search.d.ts +4 -0
  7. package/dist/es/components/Search/Search.js +104 -45
  8. package/dist/lib/components/Collapse/Collapse.css +3 -0
  9. package/dist/lib/components/Collapse/Collapse.d.ts +6 -23
  10. package/dist/lib/components/Collapse/Collapse.js +19 -15
  11. package/dist/lib/components/Search/Search.css +173 -106
  12. package/dist/lib/components/Search/Search.d.ts +4 -0
  13. package/dist/lib/components/Search/Search.js +106 -45
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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
+ ## [4.14.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.14.1...@megafon/ui-core@4.14.2) (2023-03-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **collapse:** new prop openedClassName ([c7fa687](https://github.com/MegafonWebLab/megafon-ui/commit/c7fa6876221ab02fff892e9e11772343d78c7444))
12
+ * **search:** new props showLoader and type ([1bd81df](https://github.com/MegafonWebLab/megafon-ui/commit/1bd81dfd1beae622ee33a0e6dac3cb95b7454c41))
13
+
14
+
15
+
16
+
17
+
6
18
  ## [4.14.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.14.0...@megafon/ui-core@4.14.1) (2023-03-15)
7
19
 
8
20
  **Note:** Version bump only for package @megafon/ui-core
package/dist/es/components/Collapse/Collapse.css ADDED
@@ -0,0 +1,3 @@
1
+ .mfui-collapse {
2
+ overflow: hidden;
3
+ }
package/dist/es/components/Collapse/Collapse.d.ts CHANGED
@@ -1,36 +1,19 @@
1
1
  import * as React from 'react';
2
- import * as PropTypes from 'prop-types';
2
+ import './Collapse.less';
3
3
  declare type CollapseDefaultProps = {
4
4
  animation?: boolean;
5
5
  animationDuration?: number;
6
6
  };
7
7
  declare type CollapseProps = CollapseDefaultProps & {
8
- className: string;
9
- classNameContainer: string;
10
8
  isOpened: boolean;
9
+ children: React.ReactNode;
10
+ className?: string;
11
+ classNameContainer?: string;
12
+ openedClassName?: string;
11
13
  dataAttrs?: {
12
14
  root?: Record<string, string>;
13
15
  inner?: Record<string, string>;
14
16
  };
15
- children: React.ReactNode;
16
- };
17
- declare const Collapse: {
18
- (props: CollapseProps): React.FunctionComponentElement<CollapseProps>;
19
- propTypes: {
20
- className: PropTypes.Requireable<string>;
21
- classNameContainer: PropTypes.Requireable<string>;
22
- isOpened: PropTypes.Validator<boolean>;
23
- animationDuration: PropTypes.Requireable<number>;
24
- animation: PropTypes.Requireable<boolean>;
25
- dataAttrs: PropTypes.Requireable<PropTypes.InferProps<{
26
- root: PropTypes.Requireable<{
27
- [x: string]: string;
28
- }>;
29
- inner: PropTypes.Requireable<{
30
- [x: string]: string;
31
- }>;
32
- }>>;
33
- children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
34
- };
35
17
  };
18
+ declare const Collapse: React.FC<CollapseProps>;
36
19
  export default Collapse;
package/dist/es/components/Collapse/Collapse.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import * as React from 'react';
3
3
  import { useCallback, useEffect } from 'react';
4
- import { filterDataAttrs } from '@megafon/ui-helpers';
4
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
5
  import * as PropTypes from 'prop-types';
6
+ import "./Collapse.css";
6
7
  var sin = Math.sin,
7
8
  cos = Math.cos,
8
9
  min = Math.min,
@@ -16,16 +17,19 @@ var easeInSine = function easeInSine(progress) {
16
17
  return 1 - cos(progress * PI / 2);
17
18
  };
18
19
 
19
- var Collapse = function Collapse(props) {
20
- var className = props.className,
21
- classNameContainer = props.classNameContainer,
22
- _props$animation = props.animation,
23
- animation = _props$animation === void 0 ? true : _props$animation,
24
- _props$animationDurat = props.animationDuration,
25
- animationDuration = _props$animationDurat === void 0 ? 300 : _props$animationDurat,
26
- children = props.children,
27
- isOpened = props.isOpened,
28
- dataAttrs = props.dataAttrs;
20
+ var cn = cnCreate('mfui-collapse');
21
+
22
+ var Collapse = function Collapse(_ref) {
23
+ var className = _ref.className,
24
+ classNameContainer = _ref.classNameContainer,
25
+ _ref$animation = _ref.animation,
26
+ animation = _ref$animation === void 0 ? true : _ref$animation,
27
+ _ref$animationDuratio = _ref.animationDuration,
28
+ animationDuration = _ref$animationDuratio === void 0 ? 300 : _ref$animationDuratio,
29
+ children = _ref.children,
30
+ isOpened = _ref.isOpened,
31
+ dataAttrs = _ref.dataAttrs,
32
+ openedClassName = _ref.openedClassName;
29
33
  var duration = animation ? animationDuration : 0;
30
34
  var animationStart = React.useRef(null);
31
35
  var animationId = React.useRef(null);
@@ -41,6 +45,8 @@ var Collapse = function Collapse(props) {
41
45
  return;
42
46
  }
43
47
 
48
+ openedClassName && rootNode.current.classList.remove(openedClassName);
49
+
44
50
  if (!animationStart.current) {
45
51
  animationStart.current = timePassed;
46
52
  }
@@ -59,8 +65,9 @@ var Collapse = function Collapse(props) {
59
65
  animationStart.current = null;
60
66
  animationId.current = null;
61
67
  rootNode.current.style.height = isOpenAction ? 'auto' : '0px';
68
+ isOpenAction && !!openedClassName && rootNode.current.classList.add(openedClassName);
62
69
  }
63
- }, []);
70
+ }, [openedClassName]);
64
71
  useEffect(function () {
65
72
  if (!rootNode.current) {
66
73
  return;
@@ -93,10 +100,7 @@ var Collapse = function Collapse(props) {
93
100
  canUpdate.current = true;
94
101
  }, [isOpened, duration, animateSlide]);
95
102
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
96
- className: className,
97
- style: {
98
- overflow: 'hidden'
99
- },
103
+ className: cn([className]),
100
104
  ref: rootNode
101
105
  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
102
106
  className: classNameContainer
@@ -106,6 +110,7 @@ var Collapse = function Collapse(props) {
106
110
  Collapse.propTypes = {
107
111
  className: PropTypes.string,
108
112
  classNameContainer: PropTypes.string,
113
+ openedClassName: PropTypes.string,
109
114
  isOpened: PropTypes.bool.isRequired,
110
115
  animationDuration: PropTypes.number,
111
116
  animation: PropTypes.bool,
package/dist/es/components/Search/Search.css CHANGED
@@ -48,11 +48,7 @@
48
48
  -webkit-box-sizing: border-box;
49
49
  box-sizing: border-box;
50
50
  width: 100%;
51
- height: 60px;
52
- padding: 0 16px 0 16px;
53
- border: 1px solid var(--spbSky2);
54
- border-radius: 12px;
55
- background-color: var(--base);
51
+ border: 1px solid;
56
52
  outline: none;
57
53
  cursor: pointer;
58
54
  -webkit-transition: border-color 0.3s;
@@ -62,122 +58,64 @@
62
58
  -ms-user-select: none;
63
59
  user-select: none;
64
60
  }
65
- .mfui-search__control:not(.mfui-search__control_success):not(.mfui-search__control_error):hover {
66
- border-color: var(--content);
67
- }
68
- .mfui-search__control_success {
69
- border-color: var(--brandGreen);
70
- }
71
- .mfui-search__control_error {
72
- border-color: var(--fury);
73
- }
74
- .mfui-search__search-wrapper {
75
- position: relative;
76
- display: block;
77
- width: 100%;
78
- cursor: text;
79
- }
80
- .mfui-search__search-wrapper_labeled {
81
- padding-top: 22px;
82
- }
83
- .mfui-search__label {
84
- position: absolute;
85
- top: 17px;
86
- z-index: 1;
87
- display: block;
88
- overflow: auto;
89
- color: var(--spbSky3);
90
- -webkit-transition: top 0.5s, -webkit-transform 0.5s;
91
- transition: top 0.5s, -webkit-transform 0.5s;
92
- transition: transform 0.5s, top 0.5s;
93
- transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
94
- pointer-events: none;
95
- font-family: inherit;
96
- font-size: 15px;
97
- line-height: 24px;
98
- }
99
- .mfui-search__search-field::-webkit-input-placeholder {
61
+ .mfui-search__field_labeled::-webkit-input-placeholder {
100
62
  color: var(--spbSky3);
101
63
  opacity: 0;
102
64
  -webkit-transition: opacity 0.2s;
103
65
  transition: opacity 0.2s;
104
66
  }
105
- .mfui-search__search-field::-moz-placeholder {
67
+ .mfui-search__field_labeled::-moz-placeholder {
106
68
  color: var(--spbSky3);
107
69
  opacity: 0;
108
70
  -webkit-transition: opacity 0.2s;
109
71
  transition: opacity 0.2s;
110
72
  }
111
- .mfui-search__search-field:-moz-placeholder {
73
+ .mfui-search__field_labeled:-moz-placeholder {
112
74
  color: var(--spbSky3);
113
75
  opacity: 0;
114
76
  -webkit-transition: opacity 0.2s;
115
77
  transition: opacity 0.2s;
116
78
  }
117
- .mfui-search__search-field:-ms-input-placeholder {
79
+ .mfui-search__field_labeled:-ms-input-placeholder {
118
80
  color: var(--spbSky3);
119
81
  opacity: 0;
120
82
  -webkit-transition: opacity 0.2s;
121
83
  transition: opacity 0.2s;
122
84
  }
123
- .mfui-search__search-field::-ms-input-placeholder {
85
+ .mfui-search__field_labeled::-ms-input-placeholder {
124
86
  color: var(--spbSky3);
125
87
  opacity: 0;
126
88
  -webkit-transition: opacity 0.2s;
127
89
  transition: opacity 0.2s;
128
90
  }
129
- .mfui-search__search-field::placeholder {
91
+ .mfui-search__field_labeled::placeholder {
130
92
  color: var(--spbSky3);
131
93
  opacity: 0;
132
94
  -webkit-transition: opacity 0.2s;
133
95
  transition: opacity 0.2s;
134
96
  }
135
- .mfui-search__search-field:focus::-webkit-input-placeholder {
136
- opacity: 1;
137
- }
138
- .mfui-search__search-field:focus::-moz-placeholder {
139
- opacity: 1;
140
- }
141
- .mfui-search__search-field:focus:-moz-placeholder {
142
- opacity: 1;
143
- }
144
- .mfui-search__search-field:focus:-ms-input-placeholder {
145
- opacity: 1;
146
- }
147
- .mfui-search__search-field:focus::-ms-input-placeholder {
97
+ .mfui-search__field:focus::-webkit-input-placeholder {
148
98
  opacity: 1;
149
99
  }
150
- .mfui-search__search-field:focus::placeholder {
100
+ .mfui-search__field:focus::-moz-placeholder {
151
101
  opacity: 1;
152
102
  }
153
- .mfui-search__search-wrapper_no-label .mfui-search__search-field::-webkit-input-placeholder {
103
+ .mfui-search__field:focus:-moz-placeholder {
154
104
  opacity: 1;
155
105
  }
156
- .mfui-search__search-wrapper_no-label .mfui-search__search-field::-moz-placeholder {
106
+ .mfui-search__field:focus:-ms-input-placeholder {
157
107
  opacity: 1;
158
108
  }
159
- .mfui-search__search-wrapper_no-label .mfui-search__search-field:-moz-placeholder {
109
+ .mfui-search__field:focus::-ms-input-placeholder {
160
110
  opacity: 1;
161
111
  }
162
- .mfui-search__search-wrapper_no-label .mfui-search__search-field:-ms-input-placeholder {
112
+ .mfui-search__field:focus::placeholder {
163
113
  opacity: 1;
164
114
  }
165
- .mfui-search__search-wrapper_no-label .mfui-search__search-field::-ms-input-placeholder {
166
- opacity: 1;
167
- }
168
- .mfui-search__search-wrapper_no-label .mfui-search__search-field::placeholder {
169
- opacity: 1;
170
- }
171
- .mfui-search__search-field_filled + .mfui-search__label,
172
- .mfui-search__search-field:focus + .mfui-search__label {
173
- -webkit-transform: scale(0.8) translate(-12.5%, -75%);
174
- transform: scale(0.8) translate(-12.5%, -75%);
175
- -webkit-transition-duration: 0.2s, 0.01s;
176
- transition-duration: 0.2s, 0.01s;
177
- }
178
- .mfui-search__search-field {
115
+ .mfui-search__field {
179
116
  position: relative;
180
117
  z-index: 1;
118
+ display: block;
181
119
  -webkit-box-flex: 1;
182
120
  -ms-flex-positive: 1;
183
121
  flex-grow: 1;
@@ -197,16 +135,31 @@
197
135
  outline: none;
198
136
  -webkit-box-shadow: none;
199
137
  box-shadow: none;
138
+ cursor: text;
200
139
  opacity: 1;
201
140
  -webkit-appearance: none;
202
141
  -moz-appearance: none;
203
142
  appearance: none;
143
+ caret-color: var(--brandGreen);
204
144
  }
205
145
  @media screen and (max-width: 767px) {
206
- .mfui-search__search-field {
146
+ .mfui-search__field {
207
147
  width: 90%;
208
148
  }
209
149
  }
150
+ .mfui-search__label {
151
+ position: absolute;
152
+ z-index: 1;
153
+ display: block;
154
+ overflow: auto;
155
+ color: var(--spbSky3);
156
+ -webkit-transition-duration: 0.2s, 0.01s;
157
+ transition-duration: 0.2s, 0.01s;
158
+ pointer-events: none;
159
+ font-family: inherit;
160
+ font-size: 15px;
161
+ line-height: 24px;
162
+ }
210
163
  .mfui-search__list {
211
164
  position: absolute;
212
165
  top: calc(100% + 1px);
@@ -219,17 +172,8 @@
219
172
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
220
173
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
221
174
  }
222
- .mfui-search__icon {
223
- display: block;
224
- width: 32px;
225
- height: 32px;
226
- -webkit-user-select: none;
227
- -moz-user-select: none;
228
- -ms-user-select: none;
229
- user-select: none;
230
- fill: var(--content);
231
- }
232
- .mfui-search__icon-box {
175
+ .mfui-search__clear,
176
+ .mfui-search__submit-button {
233
177
  display: -webkit-box;
234
178
  display: -ms-flexbox;
235
179
  display: flex;
@@ -240,8 +184,11 @@
240
184
  -ms-flex-pack: center;
241
185
  justify-content: center;
242
186
  height: 100%;
187
+ padding: 0;
188
+ border: none;
243
189
  text-align: center;
244
- fill: var(--content);
190
+ background-color: transparent;
191
+ cursor: pointer;
245
192
  }
246
193
  .mfui-search__list-inner {
247
194
  -webkit-box-sizing: border-box;
@@ -291,6 +238,32 @@
291
238
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
292
239
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
293
240
  }
241
+ .mfui-search__highlighted-fragment {
242
+ font-weight: bold;
243
+ }
244
+ .mfui-search__notice {
245
+ margin-top: 4px;
246
+ font-size: 12px;
247
+ line-height: 16px;
248
+ }
249
+ .mfui-search__notice_error {
250
+ color: var(--fury);
251
+ }
252
+ .mfui-search__notice_success {
253
+ color: var(--brandGreen);
254
+ }
255
+ .mfui-search__icons {
256
+ display: -webkit-box;
257
+ display: -ms-flexbox;
258
+ display: flex;
259
+ -webkit-box-align: center;
260
+ -ms-flex-align: center;
261
+ align-items: center;
262
+ height: 100%;
263
+ }
264
+ .mfui-search_open {
265
+ z-index: 12;
266
+ }
294
267
  .mfui-search_open .mfui-search__list {
295
268
  display: block;
296
269
  -webkit-animation-name: listAppear;
@@ -300,29 +273,123 @@
300
273
  -webkit-animation-timing-function: ease-in-out;
301
274
  animation-timing-function: ease-in-out;
302
275
  }
303
- .mfui-search_open {
304
- z-index: 12;
276
+ .mfui-search_type_textfield .mfui-search__control {
277
+ height: 60px;
278
+ padding: 0 16px 0 16px;
279
+ border-color: var(--spbSky2);
280
+ border-radius: 12px;
281
+ background-color: var(--base);
305
282
  }
306
- .mfui-search_disabled .mfui-search__control {
283
+ .mfui-search_type_textfield .mfui-search__control:hover {
284
+ border-color: var(--content);
285
+ }
286
+ .mfui-search_type_textfield .mfui-search__label {
287
+ top: 17px;
288
+ }
289
+ .mfui-search_type_textfield .mfui-search__field_filled + .mfui-search__label,
290
+ .mfui-search_type_textfield .mfui-search__field:focus + .mfui-search__label {
291
+ -webkit-transform: scale(0.8) translate(-12.5%, -75%);
292
+ transform: scale(0.8) translate(-12.5%, -75%);
293
+ }
294
+ .mfui-search_type_textfield .mfui-search__field_labeled {
295
+ padding-top: 22px;
296
+ }
297
+ .mfui-search_type_textfield .mfui-search__submit-icon {
298
+ width: 32px;
299
+ height: 32px;
300
+ fill: var(--content);
301
+ }
302
+ .mfui-search_type_textfield.mfui-search_disabled .mfui-search__control {
307
303
  border-color: var(--spbSky1);
308
304
  background-color: var(--spbSky1);
309
- cursor: default;
310
- pointer-events: none;
311
305
  }
312
- .mfui-search_disabled .mfui-search__icon {
306
+ .mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon {
313
307
  opacity: 0.5;
308
+ -webkit-user-select: none;
309
+ -moz-user-select: none;
310
+ -ms-user-select: none;
311
+ user-select: none;
314
312
  }
315
- .mfui-search__highlighted-fragment {
316
- font-weight: bold;
313
+ .mfui-search_type_compact .mfui-search__control {
314
+ height: 40px;
315
+ padding: 0 12px;
316
+ border-color: var(--spbSky0);
317
+ border-radius: 24px;
318
+ background-color: var(--spbSky0);
319
+ -webkit-transition: background-color, border-color 0.3s;
320
+ transition: background-color, border-color 0.3s;
317
321
  }
318
- .mfui-search__notice {
319
- margin-top: 4px;
320
- font-size: 12px;
321
- line-height: 16px;
322
+ .mfui-search_type_compact .mfui-search__control:hover {
323
+ background-color: var(--spbSky1);
322
324
  }
323
- .mfui-search__notice_error {
324
- color: var(--fury);
325
+ .mfui-search_type_compact .mfui-search__field {
326
+ height: 100%;
327
+ padding: 8px 0 8px 12px;
325
328
  }
326
- .mfui-search__notice_success {
327
- color: var(--brandGreen);
329
+ .mfui-search_type_compact .mfui-search__label {
330
+ top: 50%;
331
+ left: 44px;
332
+ -webkit-transform: translateY(-50%);
333
+ transform: translateY(-50%);
334
+ }
335
+ .mfui-search_type_compact .mfui-search__field_filled + .mfui-search__label,
336
+ .mfui-search_type_compact .mfui-search__field:focus + .mfui-search__label {
337
+ opacity: 0;
338
+ }
339
+ .mfui-search_type_compact .mfui-search__submit-icon {
340
+ width: 20px;
341
+ height: 20px;
342
+ fill: var(--spbSky3);
343
+ }
344
+ .mfui-search_type_compact .mfui-search__clear {
345
+ display: -webkit-box;
346
+ display: -ms-flexbox;
347
+ display: flex;
348
+ -webkit-box-align: center;
349
+ -ms-flex-align: center;
350
+ align-items: center;
351
+ -webkit-box-pack: center;
352
+ -ms-flex-pack: center;
353
+ justify-content: center;
354
+ width: 24px;
355
+ height: 24px;
356
+ margin-left: 12px;
357
+ padding: 0;
358
+ border: none;
359
+ background-color: transparent;
360
+ cursor: pointer;
361
+ }
362
+ .mfui-search_type_compact .mfui-search__clear-icon {
363
+ width: 24px;
364
+ height: 24px;
365
+ fill: var(--spbSky3);
366
+ }
367
+ .mfui-search_type_compact .mfui-search__clear-icon:hover {
368
+ fill: var(--content);
369
+ }
370
+ .mfui-search_type_compact .mfui-search__clear-icon:active {
371
+ fill: var(--buttonDown);
372
+ }
373
+ .mfui-search_type_compact.mfui-search_open .mfui-search__control {
374
+ background-color: var(--spbSky1);
375
+ }
376
+ .mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon {
377
+ fill: var(--content);
378
+ }
379
+ .mfui-search_disabled .mfui-search__control {
380
+ cursor: default;
381
+ pointer-events: none;
382
+ }
383
+ .mfui-search_disabled .mfui-search__submit-icon {
384
+ opacity: 0.5;
385
+ -webkit-user-select: none;
386
+ -moz-user-select: none;
387
+ -ms-user-select: none;
388
+ user-select: none;
389
+ }
390
+ .mfui-search_error .mfui-search__control {
391
+ border-color: var(--fury);
392
+ }
393
+ .mfui-search_success .mfui-search__control {
394
+ border-color: var(--brandGreen);
328
395
  }
package/dist/es/components/Search/Search.d.ts CHANGED
@@ -31,6 +31,8 @@ export interface ISearchProps {
31
31
  };
32
32
  /** Значение */
33
33
  value?: string;
34
+ /** Вид отображения */
35
+ type?: 'textfield' | 'compact';
34
36
  /** Заголовок поля */
35
37
  label?: string;
36
38
  /** HTML идентификатор поля поиска */
@@ -61,6 +63,8 @@ export interface ISearchProps {
61
63
  control?: string;
62
64
  icon?: string;
63
65
  };
66
+ /** Отображение загрузки */
67
+ showLoader?: boolean;
64
68
  /** Обработчик изменения поля */
65
69
  onChange?: (value: string) => void;
66
70
  /** Обработчик нажатия на enter */