@megafon/ui-core 4.16.0 → 5.0.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 (10) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/es/components/Badges/components/CounterBadge/CounterBadge.d.ts +3 -3
  3. package/dist/es/components/Badges/components/CounterBadge/CounterBadge.js +4 -4
  4. package/dist/es/components/TextField/TextField.d.ts +2 -2
  5. package/dist/es/components/TextField/TextField.js +16 -8
  6. package/dist/lib/components/Badges/components/CounterBadge/CounterBadge.d.ts +3 -3
  7. package/dist/lib/components/Badges/components/CounterBadge/CounterBadge.js +4 -4
  8. package/dist/lib/components/TextField/TextField.d.ts +2 -2
  9. package/dist/lib/components/TextField/TextField.js +17 -8
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
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.0.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.16.1...@megafon/ui-core@5.0.0) (2023-06-22)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **textfield:** rename prop onCustomIconClick; change behavior of clear icon; ([4b827a6](https://github.com/MegafonWebLab/megafon-ui/commit/4b827a682c8139674fb8dc14c7bd92c25c8ec789))
12
+
13
+
14
+ ### BREAKING CHANGES
15
+
16
+ * **textfield:** Prop onCustomIconClick renamed to onIconClick. Clicking on the clear icon performs the following
17
+ actions: clearing and focusing the field, triggering the change event with an empty value.
18
+ These actions are performed in both controlled and uncontrolled state, regardless of the
19
+ presence of a onIconClick handler.
20
+
21
+ How to migrate:
22
+ - rename prop onCustomIconClick to onIconClick;
23
+ - remove clear field in handler onIconClick;
24
+ - remove field focus in handler onIconClick;
25
+
26
+
27
+
28
+
29
+
30
+ ## [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)
31
+
32
+
33
+ ### Bug Fixes
34
+
35
+ * **counterbadge:** fix required props ([6824153](https://github.com/MegafonWebLab/megafon-ui/commit/6824153b4f2543eb3961cd408c447c8bcb9cd83d))
36
+
37
+
38
+
39
+
40
+
6
41
  # [4.16.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.15.6...@megafon/ui-core@4.16.0) (2023-05-17)
7
42
 
8
43
 
package/dist/es/components/Badges/components/CounterBadge/CounterBadge.d.ts CHANGED
@@ -6,10 +6,10 @@ export declare const CounterBadgeColorTheme: {
6
6
  };
7
7
  declare type CounterBadgeColorThemeType = typeof CounterBadgeColorTheme[keyof typeof CounterBadgeColorTheme];
8
8
  export interface ICounterBadgeProps {
9
- /** Общее/максимальное количество */
10
- totalCount: number;
11
9
  /** Текущее значение */
12
- currentValue?: number;
10
+ currentValue: number;
11
+ /** Максимальное значение */
12
+ totalCount?: number;
13
13
  /** Наличие иконки */
14
14
  hasIcon?: boolean;
15
15
  /** Кастомная иконка */
package/dist/es/components/Badges/components/CounterBadge/CounterBadge.js CHANGED
@@ -34,21 +34,21 @@ var CounterBadge = function CounterBadge(_ref) {
34
34
  dataAttrs = _ref.dataAttrs;
35
35
  return /*#__PURE__*/React.createElement("div", _extends({
36
36
  className: cn({
37
- limited: !!currentValue,
37
+ limited: !!totalCount,
38
38
  adaptive: isAdaptive,
39
39
  theme: colorTheme,
40
40
  icon: hasIcon
41
41
  }, className)
42
42
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("span", {
43
43
  className: cn('value')
44
- }, !!currentValue && "".concat(currentValue, "/"), totalCount), hasIcon && /*#__PURE__*/React.createElement("div", {
44
+ }, currentValue, !!totalCount && "/".concat(totalCount)), hasIcon && /*#__PURE__*/React.createElement("div", {
45
45
  className: cn('icon')
46
46
  }, customIcon || /*#__PURE__*/React.createElement(DefaultIcon, null)));
47
47
  };
48
48
 
49
49
  CounterBadge.propTypes = {
50
- totalCount: PropTypes.number.isRequired,
51
- currentValue: PropTypes.number,
50
+ totalCount: PropTypes.number,
51
+ currentValue: PropTypes.number.isRequired,
52
52
  customIcon: PropTypes.element,
53
53
  colorTheme: PropTypes.oneOf(Object.values(CounterBadgeColorTheme)),
54
54
  hasIcon: PropTypes.bool,
package/dist/es/components/TextField/TextField.d.ts CHANGED
@@ -109,8 +109,8 @@ export declare type TextFieldProps = {
109
109
  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
110
110
  /** Обработчик поднятия клавиши */
111
111
  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
112
- /** Обработчик клика добавленной иконки */
113
- onCustomIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
112
+ /** Обработчик клика по иконке */
113
+ onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
114
114
  };
115
115
  declare const TextField: React.FC<TextFieldProps>;
116
116
  export default TextField;
package/dist/es/components/TextField/TextField.js CHANGED
@@ -4,6 +4,7 @@ import "core-js/modules/es.function.name.js";
4
4
  import "core-js/modules/es.parse-float.js";
5
5
  import "core-js/modules/es.regexp.exec.js";
6
6
  import "core-js/modules/es.string.replace.js";
7
+ import "core-js/modules/es.object.get-own-property-descriptor.js";
7
8
  import "core-js/modules/es.array.concat.js";
8
9
  import "core-js/modules/es.object.values.js";
9
10
 
@@ -117,7 +118,7 @@ var TextField = function TextField(_ref) {
117
118
  onBlur = _ref.onBlur,
118
119
  onChange = _ref.onChange,
119
120
  onBeforeMaskChange = _ref.onBeforeMaskChange,
120
- onCustomIconClick = _ref.onCustomIconClick,
121
+ onIconClick = _ref.onIconClick,
121
122
  onFocus = _ref.onFocus,
122
123
  onKeyUp = _ref.onKeyUp,
123
124
  _ref$theme = _ref.theme,
@@ -298,16 +299,23 @@ var TextField = function TextField(_ref) {
298
299
  };
299
300
 
300
301
  var handleIconClick = useCallback(function (e) {
301
- var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
302
+ var _a;
303
+
302
304
  var field = fieldNode.current;
303
305
  isPasswordType && togglePasswordHiding();
304
- onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
305
306
 
306
- if (!isControlled && isClearFuncAvailable) {
307
- setInputValue('');
307
+ if (!customIcon && hasClearIcon) {
308
+ var nativeInputValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
309
+ var inputEvent = new Event('change', {
310
+ bubbles: true
311
+ });
312
+ (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
313
+ field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
308
314
  field === null || field === void 0 ? void 0 : field.focus();
309
315
  }
310
- }, [isPasswordType, togglePasswordHiding, onCustomIconClick, customIcon, isControlled, hasClearIcon]);
316
+
317
+ onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
318
+ }, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
311
319
  var handleFocus = useCallback(function (e) {
312
320
  onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
313
321
  }, [onFocus]);
@@ -430,7 +438,7 @@ var TextField = function TextField(_ref) {
430
438
  className: cn('icon-box', {
431
439
  error: isErrorVerification && !customIcon,
432
440
  password: isPasswordType,
433
- 'custom-handler': !!onCustomIconClick
441
+ 'custom-handler': !!onIconClick
434
442
  }),
435
443
  onClick: handleIconClick
436
444
  }), icon);
@@ -520,7 +528,7 @@ TextField.propTypes = {
520
528
  onBlur: PropTypes.func,
521
529
  onFocus: PropTypes.func,
522
530
  onKeyUp: PropTypes.func,
523
- onCustomIconClick: PropTypes.func,
531
+ onIconClick: PropTypes.func,
524
532
  inputRef: PropTypes.func,
525
533
  classes: PropTypes.shape({
526
534
  label: PropTypes.string,
package/dist/lib/components/Badges/components/CounterBadge/CounterBadge.d.ts CHANGED
@@ -6,10 +6,10 @@ export declare const CounterBadgeColorTheme: {
6
6
  };
7
7
  declare type CounterBadgeColorThemeType = typeof CounterBadgeColorTheme[keyof typeof CounterBadgeColorTheme];
8
8
  export interface ICounterBadgeProps {
9
- /** Общее/максимальное количество */
10
- totalCount: number;
11
9
  /** Текущее значение */
12
- currentValue?: number;
10
+ currentValue: number;
11
+ /** Максимальное значение */
12
+ totalCount?: number;
13
13
  /** Наличие иконки */
14
14
  hasIcon?: boolean;
15
15
  /** Кастомная иконка */
package/dist/lib/components/Badges/components/CounterBadge/CounterBadge.js CHANGED
@@ -53,21 +53,21 @@ var CounterBadge = function CounterBadge(_ref) {
53
53
  dataAttrs = _ref.dataAttrs;
54
54
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
55
55
  className: cn({
56
- limited: !!currentValue,
56
+ limited: !!totalCount,
57
57
  adaptive: isAdaptive,
58
58
  theme: colorTheme,
59
59
  icon: hasIcon
60
60
  }, className)
61
61
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("span", {
62
62
  className: cn('value')
63
- }, !!currentValue && "".concat(currentValue, "/"), totalCount), hasIcon && /*#__PURE__*/React.createElement("div", {
63
+ }, currentValue, !!totalCount && "/".concat(totalCount)), hasIcon && /*#__PURE__*/React.createElement("div", {
64
64
  className: cn('icon')
65
65
  }, customIcon || /*#__PURE__*/React.createElement(DefaultIcon, null)));
66
66
  };
67
67
 
68
68
  CounterBadge.propTypes = {
69
- totalCount: PropTypes.number.isRequired,
70
- currentValue: PropTypes.number,
69
+ totalCount: PropTypes.number,
70
+ currentValue: PropTypes.number.isRequired,
71
71
  customIcon: PropTypes.element,
72
72
  colorTheme: PropTypes.oneOf(Object.values(CounterBadgeColorTheme)),
73
73
  hasIcon: PropTypes.bool,
package/dist/lib/components/TextField/TextField.d.ts CHANGED
@@ -109,8 +109,8 @@ export declare type TextFieldProps = {
109
109
  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
110
110
  /** Обработчик поднятия клавиши */
111
111
  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
112
- /** Обработчик клика добавленной иконки */
113
- onCustomIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
112
+ /** Обработчик клика по иконке */
113
+ onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
114
114
  };
115
115
  declare const TextField: React.FC<TextFieldProps>;
116
116
  export default TextField;
package/dist/lib/components/TextField/TextField.js CHANGED
@@ -19,6 +19,8 @@ require("core-js/modules/es.regexp.exec.js");
19
19
 
20
20
  require("core-js/modules/es.string.replace.js");
21
21
 
22
+ require("core-js/modules/es.object.get-own-property-descriptor.js");
23
+
22
24
  require("core-js/modules/es.array.concat.js");
23
25
 
24
26
  require("core-js/modules/es.object.values.js");
@@ -146,7 +148,7 @@ var TextField = function TextField(_ref) {
146
148
  onBlur = _ref.onBlur,
147
149
  onChange = _ref.onChange,
148
150
  onBeforeMaskChange = _ref.onBeforeMaskChange,
149
- onCustomIconClick = _ref.onCustomIconClick,
151
+ onIconClick = _ref.onIconClick,
150
152
  onFocus = _ref.onFocus,
151
153
  onKeyUp = _ref.onKeyUp,
152
154
  _ref$theme = _ref.theme,
@@ -327,16 +329,23 @@ var TextField = function TextField(_ref) {
327
329
  };
328
330
 
329
331
  var handleIconClick = (0, React.useCallback)(function (e) {
330
- var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
332
+ var _a;
333
+
331
334
  var field = fieldNode.current;
332
335
  isPasswordType && togglePasswordHiding();
333
- onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
334
336
 
335
- if (!isControlled && isClearFuncAvailable) {
336
- setInputValue('');
337
+ if (!customIcon && hasClearIcon) {
338
+ var nativeInputValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
339
+ var inputEvent = new Event('change', {
340
+ bubbles: true
341
+ });
342
+ (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
343
+ field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
337
344
  field === null || field === void 0 ? void 0 : field.focus();
338
345
  }
339
- }, [isPasswordType, togglePasswordHiding, onCustomIconClick, customIcon, isControlled, hasClearIcon]);
346
+
347
+ onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
348
+ }, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
340
349
  var handleFocus = (0, React.useCallback)(function (e) {
341
350
  onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
342
351
  }, [onFocus]);
@@ -455,7 +464,7 @@ var TextField = function TextField(_ref) {
455
464
  className: cn('icon-box', {
456
465
  error: isErrorVerification && !customIcon,
457
466
  password: isPasswordType,
458
- 'custom-handler': !!onCustomIconClick
467
+ 'custom-handler': !!onIconClick
459
468
  }),
460
469
  onClick: handleIconClick
461
470
  }), icon);
@@ -545,7 +554,7 @@ TextField.propTypes = {
545
554
  onBlur: PropTypes.func,
546
555
  onFocus: PropTypes.func,
547
556
  onKeyUp: PropTypes.func,
548
- onCustomIconClick: PropTypes.func,
557
+ onIconClick: PropTypes.func,
549
558
  inputRef: PropTypes.func,
550
559
  classes: PropTypes.shape({
551
560
  label: PropTypes.string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.16.0",
3
+ "version": "5.0.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -54,7 +54,7 @@
54
54
  "@babel/preset-env": "^7.8.6",
55
55
  "@babel/preset-react": "^7.8.3",
56
56
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.11.0",
57
+ "@megafon/ui-icons": "^2.12.0",
58
58
  "@svgr/core": "^2.4.1",
59
59
  "@testing-library/jest-dom": "5.16.2",
60
60
  "@testing-library/react": "12.1.2",
@@ -100,5 +100,5 @@
100
100
  "react-popper": "^2.2.3",
101
101
  "swiper": "^6.5.6"
102
102
  },
103
- "gitHead": "7e5ec2880019da52a81060df8e96320269ab5f2f"
103
+ "gitHead": "e915cddf01ba660df8f0b3ce7345cdfdcb871bd0"
104
104
  }