@megafon/ui-core 4.16.1 → 5.0.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* **textfield:** rename prop onCustomIconClick; change behavior of clear icon; ([4b827a6](https://github.com/MegafonWebLab/megafon-ui/commit/4b827a682c8139674fb8dc14c7bd92c25c8ec789))
+
+
+### BREAKING CHANGES
+
+* **textfield:** Prop onCustomIconClick renamed to onIconClick. Clicking on the clear icon performs the following
+actions: clearing and focusing the field, triggering the change event with an empty value.
+These actions are performed in both controlled and uncontrolled state, regardless of the
+presence of a onIconClick handler.
+
+How to migrate:
+- rename prop onCustomIconClick to onIconClick;
+- remove clear field in handler onIconClick;
+- remove field focus in handler onIconClick;
+
+
+
+
+
 ## [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/TextField/TextField.d.ts

@@ -109,8 +109,8 @@ export declare type TextFieldProps = {
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик поднятия клавиши */
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /** Обработчик клика добавленной иконки */
-    onCustomIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Обработчик клика по иконке */
+    onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 declare const TextField: React.FC<TextFieldProps>;
 export default TextField;

package/dist/es/components/TextField/TextField.js

@@ -4,6 +4,7 @@ import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.parse-float.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.values.js";
 
@@ -117,7 +118,7 @@ var TextField = function TextField(_ref) {
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
       onBeforeMaskChange = _ref.onBeforeMaskChange,
-      onCustomIconClick = _ref.onCustomIconClick,
+      onIconClick = _ref.onIconClick,
       onFocus = _ref.onFocus,
       onKeyUp = _ref.onKeyUp,
       _ref$theme = _ref.theme,
@@ -298,16 +299,23 @@ var TextField = function TextField(_ref) {
   };
 
   var handleIconClick = useCallback(function (e) {
-    var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
+    var _a;
+
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
-    onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
 
-    if (!isControlled && isClearFuncAvailable) {
-      setInputValue('');
+    if (!customIcon && hasClearIcon) {
+      var nativeInputValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      var inputEvent = new Event('change', {
+        bubbles: true
+      });
+      (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
+      field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
       field === null || field === void 0 ? void 0 : field.focus();
     }
-  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, customIcon, isControlled, hasClearIcon]);
+
+    onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
+  }, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
   var handleFocus = useCallback(function (e) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
@@ -430,7 +438,7 @@ var TextField = function TextField(_ref) {
       className: cn('icon-box', {
         error: isErrorVerification && !customIcon,
         password: isPasswordType,
-        'custom-handler': !!onCustomIconClick
+        'custom-handler': !!onIconClick
       }),
       onClick: handleIconClick
     }), icon);
@@ -520,7 +528,7 @@ TextField.propTypes = {
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyUp: PropTypes.func,
-  onCustomIconClick: PropTypes.func,
+  onIconClick: PropTypes.func,
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
     label: PropTypes.string,

package/dist/lib/components/TextField/TextField.d.ts

@@ -109,8 +109,8 @@ export declare type TextFieldProps = {
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик поднятия клавиши */
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /** Обработчик клика добавленной иконки */
-    onCustomIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Обработчик клика по иконке */
+    onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 declare const TextField: React.FC<TextFieldProps>;
 export default TextField;

package/dist/lib/components/TextField/TextField.js

@@ -19,6 +19,8 @@ require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
 
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.object.values.js");
@@ -146,7 +148,7 @@ var TextField = function TextField(_ref) {
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
       onBeforeMaskChange = _ref.onBeforeMaskChange,
-      onCustomIconClick = _ref.onCustomIconClick,
+      onIconClick = _ref.onIconClick,
       onFocus = _ref.onFocus,
       onKeyUp = _ref.onKeyUp,
       _ref$theme = _ref.theme,
@@ -327,16 +329,23 @@ var TextField = function TextField(_ref) {
   };
 
   var handleIconClick = (0, React.useCallback)(function (e) {
-    var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
+    var _a;
+
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
-    onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
 
-    if (!isControlled && isClearFuncAvailable) {
-      setInputValue('');
+    if (!customIcon && hasClearIcon) {
+      var nativeInputValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      var inputEvent = new Event('change', {
+        bubbles: true
+      });
+      (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
+      field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
       field === null || field === void 0 ? void 0 : field.focus();
     }
-  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, customIcon, isControlled, hasClearIcon]);
+
+    onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
+  }, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
   var handleFocus = (0, React.useCallback)(function (e) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
@@ -455,7 +464,7 @@ var TextField = function TextField(_ref) {
       className: cn('icon-box', {
         error: isErrorVerification && !customIcon,
         password: isPasswordType,
-        'custom-handler': !!onCustomIconClick
+        'custom-handler': !!onIconClick
       }),
       onClick: handleIconClick
     }), icon);
@@ -545,7 +554,7 @@ TextField.propTypes = {
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyUp: PropTypes.func,
-  onCustomIconClick: PropTypes.func,
+  onIconClick: PropTypes.func,
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
     label: PropTypes.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.16.1",
+  "version": "5.0.0",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.11.0",
+    "@megafon/ui-icons": "^2.12.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "511c2426a2f60050064028622ccbd0312198286a"
+  "gitHead": "e915cddf01ba660df8f0b3ce7345cdfdcb871bd0"
 }