@megafon/ui-core 6.6.0 → 6.7.0

package/dist/es/components/List/List.css

@@ -61,6 +61,6 @@
 .mfui-v6-list__inner_type_ul {
   list-style: disc;
 }
-.mfui-v6-list_inner_type_ol {
+.mfui-v6-list__inner_type_ol {
   list-style: decimal;
 }

package/dist/es/components/Row/Row.css

@@ -30,6 +30,9 @@
     padding: 24px 32px;
   }
 }
+.mfui-v6-row:hover {
+  text-decoration: none;
+}
 .mfui-v6-row__wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -37,6 +40,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  width: 100%;
 }
 .mfui-v6-row__icon-container {
   display: -webkit-box;
@@ -236,3 +240,12 @@
   line-height: 24px;
   font-weight: 500;
 }
+.mfui-v6-row_auto-height {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: auto;
+}

package/dist/es/components/Row/Row.d.ts

@@ -23,6 +23,8 @@ export interface IRowProps {
     target?: '_self' | '_blank';
     /** rel - аргумент тега <a> */
     rel?: string;
+    /** Автоматическая высота */
+    autoHeight?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Дочерние элементы: Badges, Switcher, Selector */

package/dist/es/components/Row/Row.js

@@ -34,6 +34,8 @@ var Row = function Row(_ref) {
       _ref$target = _ref.target,
       target = _ref$target === void 0 ? '_self' : _ref$target,
       rel = _ref.rel,
+      _ref$autoHeight = _ref.autoHeight,
+      autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
       onClick = _ref.onClick,
       children = _ref.children,
       className = _ref.className,
@@ -53,7 +55,8 @@ var Row = function Row(_ref) {
       size: size,
       view: backgroundView,
       pointer: isActive,
-      'has-arrow': showArrow && !showLoader
+      'has-arrow': showArrow && !showLoader,
+      'auto-height': autoHeight
     }, [className, classes.root]),
     href: href,
     target: href ? target : undefined,
@@ -71,7 +74,8 @@ var Row = function Row(_ref) {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(Header, {
     className: cn('title', [classes.title]),
-    as: isSmallSize ? 'h5' : 'h3'
+    as: isSmallSize ? 'h5' : 'h3',
+    space: isSmallSize ? 'tight' : 'wide'
   }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('sub-title', [classes.subtitle])
   }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -98,6 +102,7 @@ Row.propTypes = {
   href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank']),
   rel: PropTypes.string,
+  autoHeight: PropTypes.bool,
   onClick: PropTypes.func,
   children: PropTypes.node,
   className: PropTypes.string,

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

@@ -5,6 +5,7 @@ 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/web.timers.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.values.js";
 
@@ -63,6 +64,10 @@ var ResizeIcon = function ResizeIcon(props) {
   }));
 };
 
+var isElement = function isElement(target) {
+  return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
+};
+
 var TEXTAREA_MAX_HEIGHT = 144;
 var DEFAULT_LABEL_TOP_POSITION = 16;
 var DEFAULT_ROW_COUNT = 3;
@@ -172,6 +177,11 @@ var TextField = function TextField(_ref) {
       isTextareaResized = _useState14[0],
       setIsTextareaResized = _useState14[1];
 
+  var _useState15 = useState(null),
+      _useState16 = _slicedToArray(_useState15, 2),
+      clickedElement = _useState16[0],
+      setClickedElement = _useState16[1];
+
   var fieldNode = useRef();
   var labelRef = useRef(null);
   var resizerRef = useRef(null);
@@ -275,6 +285,15 @@ var TextField = function TextField(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
+  var handleMouseDown = function handleMouseDown(e) {
+    if (isElement(e.target)) {
+      setClickedElement(e.target);
+      return;
+    }
+
+    setClickedElement(null);
+  };
+
   var handleNoticeTransitionEnd = useCallback(function () {
     !noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
@@ -311,7 +330,9 @@ var TextField = function TextField(_ref) {
       });
       (_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();
+      setTimeout(function () {
+        return field === null || field === void 0 ? void 0 : field.focus();
+      });
     }
 
     onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
@@ -320,8 +341,16 @@ var TextField = function TextField(_ref) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
   var handleBlur = useCallback(function (e) {
+    var _a;
+
+    setClickedElement(null);
+
+    if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
+      return;
+    }
+
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }, [onBlur]);
+  }, [onBlur, clickedElement]);
   var handleBeforeMaskChange = useCallback(function (newState, oldState, inputedValue) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
@@ -475,7 +504,8 @@ var TextField = function TextField(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
-    })
+    }),
+    onMouseDown: handleMouseDown
   }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('resizer'),
     ref: resizerRef

package/dist/lib/components/List/List.css

@@ -61,6 +61,6 @@
 .mfui-v6-list__inner_type_ul {
   list-style: disc;
 }
-.mfui-v6-list_inner_type_ol {
+.mfui-v6-list__inner_type_ol {
   list-style: decimal;
 }

package/dist/lib/components/Row/Row.css

@@ -30,6 +30,9 @@
     padding: 24px 32px;
   }
 }
+.mfui-v6-row:hover {
+  text-decoration: none;
+}
 .mfui-v6-row__wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -37,6 +40,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  width: 100%;
 }
 .mfui-v6-row__icon-container {
   display: -webkit-box;
@@ -236,3 +240,12 @@
   line-height: 24px;
   font-weight: 500;
 }
+.mfui-v6-row_auto-height {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: auto;
+}

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

@@ -23,6 +23,8 @@ export interface IRowProps {
     target?: '_self' | '_blank';
     /** rel - аргумент тега <a> */
     rel?: string;
+    /** Автоматическая высота */
+    autoHeight?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Дочерние элементы: Badges, Switcher, Selector */

package/dist/lib/components/Row/Row.js

@@ -53,6 +53,8 @@ var Row = function Row(_ref) {
       _ref$target = _ref.target,
       target = _ref$target === void 0 ? '_self' : _ref$target,
       rel = _ref.rel,
+      _ref$autoHeight = _ref.autoHeight,
+      autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
       onClick = _ref.onClick,
       children = _ref.children,
       className = _ref.className,
@@ -72,7 +74,8 @@ var Row = function Row(_ref) {
       size: size,
       view: backgroundView,
       pointer: isActive,
-      'has-arrow': showArrow && !showLoader
+      'has-arrow': showArrow && !showLoader,
+      'auto-height': autoHeight
     }, [className, classes.root]),
     href: href,
     target: href ? target : undefined,
@@ -90,7 +93,8 @@ var Row = function Row(_ref) {
     className: cn('header')
   }, /*#__PURE__*/_react["default"].createElement(_Header["default"], {
     className: cn('title', [classes.title]),
-    as: isSmallSize ? 'h5' : 'h3'
+    as: isSmallSize ? 'h5' : 'h3',
+    space: isSmallSize ? 'tight' : 'wide'
   }, title), !!subTitle && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('sub-title', [classes.subtitle])
   }, subTitle)), !showLoader ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -117,6 +121,7 @@ Row.propTypes = {
   href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank']),
   rel: PropTypes.string,
+  autoHeight: PropTypes.bool,
   onClick: PropTypes.func,
   children: PropTypes.node,
   className: PropTypes.string,

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

@@ -21,6 +21,8 @@ require("core-js/modules/es.string.replace.js");
 
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 
+require("core-js/modules/web.timers.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.object.values.js");
@@ -90,6 +92,10 @@ var ResizeIcon = function ResizeIcon(props) {
   }));
 };
 
+var isElement = function isElement(target) {
+  return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
+};
+
 var TEXTAREA_MAX_HEIGHT = 144;
 var DEFAULT_LABEL_TOP_POSITION = 16;
 var DEFAULT_ROW_COUNT = 3;
@@ -202,6 +208,11 @@ var TextField = function TextField(_ref) {
       isTextareaResized = _useState14[0],
       setIsTextareaResized = _useState14[1];
 
+  var _useState15 = (0, React.useState)(null),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      clickedElement = _useState16[0],
+      setClickedElement = _useState16[1];
+
   var fieldNode = (0, React.useRef)();
   var labelRef = (0, React.useRef)(null);
   var resizerRef = (0, React.useRef)(null);
@@ -305,6 +316,15 @@ var TextField = function TextField(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
+  var handleMouseDown = function handleMouseDown(e) {
+    if (isElement(e.target)) {
+      setClickedElement(e.target);
+      return;
+    }
+
+    setClickedElement(null);
+  };
+
   var handleNoticeTransitionEnd = (0, React.useCallback)(function () {
     !noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
@@ -341,7 +361,9 @@ var TextField = function TextField(_ref) {
       });
       (_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();
+      setTimeout(function () {
+        return field === null || field === void 0 ? void 0 : field.focus();
+      });
     }
 
     onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
@@ -350,8 +372,16 @@ var TextField = function TextField(_ref) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
   var handleBlur = (0, React.useCallback)(function (e) {
+    var _a;
+
+    setClickedElement(null);
+
+    if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
+      return;
+    }
+
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }, [onBlur]);
+  }, [onBlur, clickedElement]);
   var handleBeforeMaskChange = (0, React.useCallback)(function (newState, oldState, inputedValue) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
@@ -501,7 +531,8 @@ var TextField = function TextField(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
-    })
+    }),
+    onMouseDown: handleMouseDown
   }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('resizer'),
     ref: resizerRef

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "6.6.0",
+    "version": "6.7.0",
     "files": [
         "dist",
         "styles"
@@ -99,5 +99,5 @@
         "react-popper": "^2.2.3",
         "swiper": "^6.5.6"
     },
-    "gitHead": "4210e85614d7e10a1d7c6b9af974dc82c4beadb7"
+    "gitHead": "bf7d2cc9e75cf3527fae3ea8a58e8e3f4958e18a"
 }