@megafon/ui-core 4.0.0-beta.10 → 4.0.0-beta.13

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,37 @@
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.0.0-beta.13](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.12...@megafon/ui-core@4.0.0-beta.13) (2022-08-08)
7
+
8
+ **Note:** Version bump only for package @megafon/ui-core
9
+
10
+
11
+
12
+
13
+
14
+ # [4.0.0-beta.12](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.11...@megafon/ui-core@4.0.0-beta.12) (2022-08-02)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **select:** update value check for undefined ([06f8dbf](https://github.com/MegafonWebLab/megafon-ui/commit/06f8dbfb065eaef7f6151cb88cebffe68d668ef8))
20
+
21
+
22
+
23
+
24
+
25
+ # [4.0.0-beta.11](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.10...@megafon/ui-core@4.0.0-beta.11) (2022-07-27)
26
+
27
+
28
+ ### Features
29
+
30
+ * **search:** changed dropdown list item height ([25ceb63](https://github.com/MegafonWebLab/megafon-ui/commit/25ceb633cdc9922e2a93af919c742b1db82f2f57))
31
+ * **select:** fixed label position with empty string value and minor style changes ([f436d5c](https://github.com/MegafonWebLab/megafon-ui/commit/f436d5c65f0aa874d12cd8d1540698644d57a3db))
32
+
33
+
34
+
35
+
36
+
6
37
  # [4.0.0-beta.10](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.9...@megafon/ui-core@4.0.0-beta.10) (2022-07-15)
7
38
 
8
39
 
@@ -224,7 +224,7 @@
224
224
  }
225
225
  .mfui-search__list-item {
226
226
  font-family: inherit;
227
- padding: 8px 32px;
227
+ padding: 12px 32px;
228
228
  border-radius: 16px;
229
229
  background-color: var(--base);
230
230
  cursor: pointer;
@@ -46,15 +46,16 @@
46
46
  height: 60px;
47
47
  border: 1px solid var(--spbSky2);
48
48
  border-radius: 12px;
49
- overflow: hidden;
50
49
  background-color: var(--base);
51
50
  outline: none;
52
51
  cursor: pointer;
52
+ -webkit-transition: border-color 0.3s;
53
+ transition: border-color 0.3s;
53
54
  }
54
55
  .mfui-select__control:after {
55
56
  content: '';
56
57
  position: absolute;
57
- top: 53%;
58
+ top: 50%;
58
59
  right: 27px;
59
60
  display: block;
60
61
  border-top: 6px solid;
@@ -62,9 +63,11 @@
62
63
  border-bottom: none;
63
64
  border-left: 5px solid transparent;
64
65
  color: var(--brandGreen);
65
- -webkit-transform: translateY(-50%);
66
- transform: translateY(-50%);
67
66
  cursor: pointer;
67
+ -webkit-transition: -webkit-transform 0.6s;
68
+ transition: -webkit-transform 0.6s;
69
+ transition: transform 0.6s;
70
+ transition: transform 0.6s, -webkit-transform 0.6s;
68
71
  }
69
72
  .mfui-select__combobox {
70
73
  font-size: 15px;
@@ -91,7 +94,8 @@
91
94
  -moz-appearance: none;
92
95
  appearance: none;
93
96
  }
94
- .mfui-select_no-touch .mfui-select__control:hover {
97
+ .mfui-select_no-touch .mfui-select__control:hover,
98
+ .mfui-select_no-touch .mfui-select__control:focus-within {
95
99
  border-color: var(--content);
96
100
  }
97
101
  .mfui-select__title {
@@ -105,6 +109,7 @@
105
109
  align-items: center;
106
110
  width: 100%;
107
111
  height: 100%;
112
+ border-radius: 12px;
108
113
  outline: none;
109
114
  }
110
115
  .mfui-select__title-value {
@@ -115,7 +120,7 @@
115
120
  -ms-flex-align: center;
116
121
  align-items: center;
117
122
  }
118
- .mfui-select__title-inner_placeholder .mfui-select__title-value {
123
+ .mfui-select__title-inner_hide-value .mfui-select__title-value {
119
124
  color: var(--spbSky3);
120
125
  }
121
126
  .mfui-select__title-inner {
@@ -129,8 +134,11 @@
129
134
  -webkit-box-align: center;
130
135
  -ms-flex-align: center;
131
136
  align-items: center;
137
+ -webkit-box-sizing: border-box;
138
+ box-sizing: border-box;
132
139
  height: 100%;
133
140
  padding: 0 45px 0 16px;
141
+ border-radius: 12px;
134
142
  overflow: hidden;
135
143
  white-space: nowrap;
136
144
  }
@@ -155,7 +163,7 @@
155
163
  top: 100%;
156
164
  right: 0;
157
165
  left: 0;
158
- z-index: 10;
166
+ z-index: 11;
159
167
  display: none;
160
168
  border-radius: 12px;
161
169
  background-color: var(--base);
@@ -183,7 +191,7 @@
183
191
  }
184
192
  .mfui-select__list-item {
185
193
  font-family: inherit;
186
- padding: 8px 32px;
194
+ padding: 12px 32px;
187
195
  border-radius: 16px;
188
196
  background-color: var(--base);
189
197
  cursor: pointer;
@@ -291,19 +299,19 @@
291
299
  transition: opacity 0.2s;
292
300
  }
293
301
  .mfui-select_open .mfui-select__label,
294
- .mfui-select__title-inner:not(.mfui-select__title-inner_placeholder) .mfui-select__label {
302
+ .mfui-select__title-inner:not(.mfui-select__title-inner_hide-value) .mfui-select__label {
295
303
  -webkit-transform: scale(0.8) translate(-12%, -75%);
296
304
  transform: scale(0.8) translate(-12%, -75%);
297
305
  -webkit-transition-duration: 0.2s, 0.01s;
298
306
  transition-duration: 0.2s, 0.01s;
299
307
  }
300
- .mfui-select__combobox:not(.mfui-select__combobox_placeholder) + .mfui-select__label {
308
+ .mfui-select__combobox:not(.mfui-select__combobox_hide-value) + .mfui-select__label {
301
309
  -webkit-transform: scale(0.8) translate(-12.5%, -75%);
302
310
  transform: scale(0.8) translate(-12.5%, -75%);
303
311
  -webkit-transition-duration: 0.2s, 0.01s;
304
312
  transition-duration: 0.2s, 0.01s;
305
313
  }
306
- .mfui-select__control_labeled .mfui-select__title-inner_placeholder .mfui-select__title-value {
314
+ .mfui-select__control_labeled .mfui-select__title-inner_hide-value .mfui-select__title-value {
307
315
  color: var(--spbSky3);
308
316
  -webkit-transition: opacity 0.2s;
309
317
  transition: opacity 0.2s;
@@ -326,8 +334,8 @@
326
334
  z-index: 100;
327
335
  }
328
336
  .mfui-select_open .mfui-select__control:after {
329
- border-top: none;
330
- border-bottom: 6px solid;
337
+ -webkit-transform: rotate(-180deg);
338
+ transform: rotate(-180deg);
331
339
  }
332
340
  .mfui-select_open .mfui-select__list {
333
341
  display: block;
@@ -341,7 +349,7 @@
341
349
  .mfui-select_open .mfui-select__control {
342
350
  border-color: var(--content);
343
351
  }
344
- .mfui-select_open .mfui-select__title-inner_placeholder .mfui-select__title-value {
352
+ .mfui-select_open .mfui-select__title-inner_hide-value .mfui-select__title-value {
345
353
  opacity: 1;
346
354
  }
347
355
  .mfui-select_valid .mfui-select__control {
@@ -44,6 +44,7 @@ export var SelectTypes = {
44
44
  // - Opened dropdown could be closed only via value choose, click outside of select and on TAB press.
45
45
  // - Should add event listener for outside of dropdown click on list open and remove it on list close.
46
46
  // - onClose callback shouldn't fire multiple times on outside click if dropdown was opened multiple times.
47
+ // - If item with currentValue is not found in items, input value will not be displayed
47
48
 
48
49
  var cn = cnCreate('mfui-select');
49
50
 
@@ -350,7 +351,7 @@ var Select = function Select(_ref) {
350
351
  onClick: handleSelectClick
351
352
  }), /*#__PURE__*/React.createElement("div", {
352
353
  className: cn('title-inner', {
353
- placeholder: currentValue === undefined
354
+ 'hide-value': !item
354
355
  }, [classes === null || classes === void 0 ? void 0 : classes.titleInner])
355
356
  }, /*#__PURE__*/React.createElement("div", {
356
357
  className: cn('title-value')
@@ -360,7 +361,7 @@ var Select = function Select(_ref) {
360
361
  var renderCombobox = function renderCombobox() {
361
362
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
362
363
  className: cn('combobox', {
363
- placeholder: inputValue === undefined
364
+ 'hide-value': !inputValue
364
365
  }),
365
366
  onFocus: handleComboboxFocus,
366
367
  onChange: handleChangeCombobox,
@@ -61,6 +61,7 @@ export declare type TextFieldProps = {
61
61
  /** Дополнительные классы элементов */
62
62
  classes?: {
63
63
  input?: string;
64
+ fieldWrapper?: string;
64
65
  };
65
66
  /** Дополнительные data атрибуты к внутренним элементам */
66
67
  dataAttrs?: {
@@ -120,6 +120,7 @@ var TextField = function TextField(_ref) {
120
120
  _ref$classes = _ref.classes;
121
121
  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
122
122
  var input = _ref$classes.input,
123
+ fieldWrapper = _ref$classes.fieldWrapper,
123
124
  dataAttrs = _ref.dataAttrs;
124
125
 
125
126
  var _useState = useState(true),
@@ -440,7 +441,7 @@ var TextField = function TextField(_ref) {
440
441
  }), /*#__PURE__*/React.createElement("div", {
441
442
  className: cn('field-wrapper', {
442
443
  textarea: textarea && textareaType
443
- })
444
+ }, fieldWrapper)
444
445
  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && /*#__PURE__*/React.createElement("div", {
445
446
  className: cn('resizer'),
446
447
  ref: resizerRef
@@ -489,7 +490,8 @@ TextField.propTypes = {
489
490
  onCustomIconClick: PropTypes.func,
490
491
  inputRef: PropTypes.func,
491
492
  classes: PropTypes.shape({
492
- input: PropTypes.string
493
+ input: PropTypes.string,
494
+ fieldWrapper: PropTypes.string
493
495
  }),
494
496
  dataAttrs: PropTypes.shape({
495
497
  root: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -224,7 +224,7 @@
224
224
  }
225
225
  .mfui-search__list-item {
226
226
  font-family: inherit;
227
- padding: 8px 32px;
227
+ padding: 12px 32px;
228
228
  border-radius: 16px;
229
229
  background-color: var(--base);
230
230
  cursor: pointer;
@@ -46,15 +46,16 @@
46
46
  height: 60px;
47
47
  border: 1px solid var(--spbSky2);
48
48
  border-radius: 12px;
49
- overflow: hidden;
50
49
  background-color: var(--base);
51
50
  outline: none;
52
51
  cursor: pointer;
52
+ -webkit-transition: border-color 0.3s;
53
+ transition: border-color 0.3s;
53
54
  }
54
55
  .mfui-select__control:after {
55
56
  content: '';
56
57
  position: absolute;
57
- top: 53%;
58
+ top: 50%;
58
59
  right: 27px;
59
60
  display: block;
60
61
  border-top: 6px solid;
@@ -62,9 +63,11 @@
62
63
  border-bottom: none;
63
64
  border-left: 5px solid transparent;
64
65
  color: var(--brandGreen);
65
- -webkit-transform: translateY(-50%);
66
- transform: translateY(-50%);
67
66
  cursor: pointer;
67
+ -webkit-transition: -webkit-transform 0.6s;
68
+ transition: -webkit-transform 0.6s;
69
+ transition: transform 0.6s;
70
+ transition: transform 0.6s, -webkit-transform 0.6s;
68
71
  }
69
72
  .mfui-select__combobox {
70
73
  font-size: 15px;
@@ -91,7 +94,8 @@
91
94
  -moz-appearance: none;
92
95
  appearance: none;
93
96
  }
94
- .mfui-select_no-touch .mfui-select__control:hover {
97
+ .mfui-select_no-touch .mfui-select__control:hover,
98
+ .mfui-select_no-touch .mfui-select__control:focus-within {
95
99
  border-color: var(--content);
96
100
  }
97
101
  .mfui-select__title {
@@ -105,6 +109,7 @@
105
109
  align-items: center;
106
110
  width: 100%;
107
111
  height: 100%;
112
+ border-radius: 12px;
108
113
  outline: none;
109
114
  }
110
115
  .mfui-select__title-value {
@@ -115,7 +120,7 @@
115
120
  -ms-flex-align: center;
116
121
  align-items: center;
117
122
  }
118
- .mfui-select__title-inner_placeholder .mfui-select__title-value {
123
+ .mfui-select__title-inner_hide-value .mfui-select__title-value {
119
124
  color: var(--spbSky3);
120
125
  }
121
126
  .mfui-select__title-inner {
@@ -129,8 +134,11 @@
129
134
  -webkit-box-align: center;
130
135
  -ms-flex-align: center;
131
136
  align-items: center;
137
+ -webkit-box-sizing: border-box;
138
+ box-sizing: border-box;
132
139
  height: 100%;
133
140
  padding: 0 45px 0 16px;
141
+ border-radius: 12px;
134
142
  overflow: hidden;
135
143
  white-space: nowrap;
136
144
  }
@@ -155,7 +163,7 @@
155
163
  top: 100%;
156
164
  right: 0;
157
165
  left: 0;
158
- z-index: 10;
166
+ z-index: 11;
159
167
  display: none;
160
168
  border-radius: 12px;
161
169
  background-color: var(--base);
@@ -183,7 +191,7 @@
183
191
  }
184
192
  .mfui-select__list-item {
185
193
  font-family: inherit;
186
- padding: 8px 32px;
194
+ padding: 12px 32px;
187
195
  border-radius: 16px;
188
196
  background-color: var(--base);
189
197
  cursor: pointer;
@@ -291,19 +299,19 @@
291
299
  transition: opacity 0.2s;
292
300
  }
293
301
  .mfui-select_open .mfui-select__label,
294
- .mfui-select__title-inner:not(.mfui-select__title-inner_placeholder) .mfui-select__label {
302
+ .mfui-select__title-inner:not(.mfui-select__title-inner_hide-value) .mfui-select__label {
295
303
  -webkit-transform: scale(0.8) translate(-12%, -75%);
296
304
  transform: scale(0.8) translate(-12%, -75%);
297
305
  -webkit-transition-duration: 0.2s, 0.01s;
298
306
  transition-duration: 0.2s, 0.01s;
299
307
  }
300
- .mfui-select__combobox:not(.mfui-select__combobox_placeholder) + .mfui-select__label {
308
+ .mfui-select__combobox:not(.mfui-select__combobox_hide-value) + .mfui-select__label {
301
309
  -webkit-transform: scale(0.8) translate(-12.5%, -75%);
302
310
  transform: scale(0.8) translate(-12.5%, -75%);
303
311
  -webkit-transition-duration: 0.2s, 0.01s;
304
312
  transition-duration: 0.2s, 0.01s;
305
313
  }
306
- .mfui-select__control_labeled .mfui-select__title-inner_placeholder .mfui-select__title-value {
314
+ .mfui-select__control_labeled .mfui-select__title-inner_hide-value .mfui-select__title-value {
307
315
  color: var(--spbSky3);
308
316
  -webkit-transition: opacity 0.2s;
309
317
  transition: opacity 0.2s;
@@ -326,8 +334,8 @@
326
334
  z-index: 100;
327
335
  }
328
336
  .mfui-select_open .mfui-select__control:after {
329
- border-top: none;
330
- border-bottom: 6px solid;
337
+ -webkit-transform: rotate(-180deg);
338
+ transform: rotate(-180deg);
331
339
  }
332
340
  .mfui-select_open .mfui-select__list {
333
341
  display: block;
@@ -341,7 +349,7 @@
341
349
  .mfui-select_open .mfui-select__control {
342
350
  border-color: var(--content);
343
351
  }
344
- .mfui-select_open .mfui-select__title-inner_placeholder .mfui-select__title-value {
352
+ .mfui-select_open .mfui-select__title-inner_hide-value .mfui-select__title-value {
345
353
  opacity: 1;
346
354
  }
347
355
  .mfui-select_valid .mfui-select__control {
@@ -77,6 +77,7 @@ var SelectTypes = {
77
77
  // - Opened dropdown could be closed only via value choose, click outside of select and on TAB press.
78
78
  // - Should add event listener for outside of dropdown click on list open and remove it on list close.
79
79
  // - onClose callback shouldn't fire multiple times on outside click if dropdown was opened multiple times.
80
+ // - If item with currentValue is not found in items, input value will not be displayed
80
81
 
81
82
  exports.SelectTypes = SelectTypes;
82
83
  var cn = (0, _uiHelpers.cnCreate)('mfui-select');
@@ -384,7 +385,7 @@ var Select = function Select(_ref) {
384
385
  onClick: handleSelectClick
385
386
  }), /*#__PURE__*/React.createElement("div", {
386
387
  className: cn('title-inner', {
387
- placeholder: currentValue === undefined
388
+ 'hide-value': !item
388
389
  }, [classes === null || classes === void 0 ? void 0 : classes.titleInner])
389
390
  }, /*#__PURE__*/React.createElement("div", {
390
391
  className: cn('title-value')
@@ -394,7 +395,7 @@ var Select = function Select(_ref) {
394
395
  var renderCombobox = function renderCombobox() {
395
396
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
396
397
  className: cn('combobox', {
397
- placeholder: inputValue === undefined
398
+ 'hide-value': !inputValue
398
399
  }),
399
400
  onFocus: handleComboboxFocus,
400
401
  onChange: handleChangeCombobox,
@@ -61,6 +61,7 @@ export declare type TextFieldProps = {
61
61
  /** Дополнительные классы элементов */
62
62
  classes?: {
63
63
  input?: string;
64
+ fieldWrapper?: string;
64
65
  };
65
66
  /** Дополнительные data атрибуты к внутренним элементам */
66
67
  dataAttrs?: {
@@ -148,6 +148,7 @@ var TextField = function TextField(_ref) {
148
148
  _ref$classes = _ref.classes;
149
149
  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
150
150
  var input = _ref$classes.input,
151
+ fieldWrapper = _ref$classes.fieldWrapper,
151
152
  dataAttrs = _ref.dataAttrs;
152
153
 
153
154
  var _useState = (0, React.useState)(true),
@@ -464,7 +465,7 @@ var TextField = function TextField(_ref) {
464
465
  }), /*#__PURE__*/React.createElement("div", {
465
466
  className: cn('field-wrapper', {
466
467
  textarea: textarea && textareaType
467
- })
468
+ }, fieldWrapper)
468
469
  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && /*#__PURE__*/React.createElement("div", {
469
470
  className: cn('resizer'),
470
471
  ref: resizerRef
@@ -513,7 +514,8 @@ TextField.propTypes = {
513
514
  onCustomIconClick: PropTypes.func,
514
515
  inputRef: PropTypes.func,
515
516
  classes: PropTypes.shape({
516
- input: PropTypes.string
517
+ input: PropTypes.string,
518
+ fieldWrapper: PropTypes.string
517
519
  }),
518
520
  dataAttrs: PropTypes.shape({
519
521
  root: PropTypes.objectOf(PropTypes.string.isRequired),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.0.0-beta.10",
3
+ "version": "4.0.0-beta.13",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -97,5 +97,5 @@
97
97
  "react-popper": "^2.2.3",
98
98
  "swiper": "^6.5.6"
99
99
  },
100
- "gitHead": "75acee9cdcd3587e1456557bea652554d134c30d"
100
+ "gitHead": "ccaf6b0e36d3c84a41ace9d777eeac7ff0f500a4"
101
101
  }