@megafon/ui-core 4.8.1 → 4.9.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.2...@megafon/ui-core@4.9.0) (2022-11-29)
+
+
+### Bug Fixes
+
+* **textarea:** fix auto resize ([de31a72](https://github.com/MegafonWebLab/megafon-ui/commit/de31a723f68e24f12623ca872f8281ca60b599c4))
+* **tooltip:** fix close button margin and arrow position ([db99274](https://github.com/MegafonWebLab/megafon-ui/commit/db99274ab17fe58621aaaf1ba7d85bba6afc5e05))
+
+
+### Features
+
+* **textarea:** add disableEnterLineBreak prop ([3fba0a0](https://github.com/MegafonWebLab/megafon-ui/commit/3fba0a08a4bca66575388c9156103335d68b287b))
+
+
+
+
+
+## [4.8.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.1...@megafon/ui-core@4.8.2) (2022-11-21)
+
+
+### Bug Fixes
+
+* **tabs:** remove tab underline on hover ([1c6cfbd](https://github.com/MegafonWebLab/megafon-ui/commit/1c6cfbde1c66c71c99c42ae4a586f048688f3afb))
+
+
+
+
+
 ## [4.8.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.0...@megafon/ui-core@4.8.1) (2022-11-15)
 
 

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

@@ -13,6 +13,7 @@ export interface ICheckboxProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        inner?: Record<string, string>;
         input?: Record<string, string>;
         customInput?: Record<string, string>;
         extraContent?: Record<string, string>;

package/dist/es/components/Checkbox/Checkbox.js

@@ -60,9 +60,9 @@ var Checkbox = function Checkbox(_ref) {
       disabled: disabled,
       error: error
     }, className)
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", _extends({
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
-  }, /*#__PURE__*/React.createElement("label", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), /*#__PURE__*/React.createElement("label", {
     className: cn('label', {
       'no-touch': !isTouch
     })
@@ -99,6 +99,7 @@ Checkbox.propTypes = {
   error: PropTypes.bool,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired),
     input: PropTypes.objectOf(PropTypes.string.isRequired),
     customInput: PropTypes.objectOf(PropTypes.string.isRequired),
     extraContent: PropTypes.objectOf(PropTypes.string.isRequired)

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

@@ -32,6 +32,11 @@ export interface IConrentAreaProps {
         root?: string;
         inner?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
 }
 declare const ContentArea: React.FC<IConrentAreaProps>;
 export default ContentArea;

package/dist/es/components/ContentArea/ContentArea.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
@@ -29,17 +30,18 @@ var ContentArea = function ContentArea(_ref) {
       disableIndents = _ref.disableIndents,
       children = _ref.children,
       className = _ref.className,
-      classes = _ref.classes;
-  return /*#__PURE__*/React.createElement("div", {
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'background-color': outerBackgroundColor
     }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: cn('inner', {
       'disable-indents': disableIndents,
       'background-color': innerBackgroundColor
     }, classes === null || classes === void 0 ? void 0 : classes.inner)
-  }, children));
+  }), children));
 };
 
 ContentArea.propTypes = {
@@ -49,6 +51,10 @@ ContentArea.propTypes = {
     root: PropTypes.string,
     inner: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
   innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS))
 };

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

@@ -14,6 +14,11 @@ export interface IGridProps {
     multiRow?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        container?: Record<string, string>;
+    };
     children: Array<React.ReactElement<IGridColumn>> | React.ReactElement<IGridColumn>;
 }
 declare const Grid: React.FC<IGridProps>;

package/dist/es/components/Grid/Grid.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Grid.css";
 var cn = cnCreate('mfui-grid');
@@ -13,10 +14,11 @@ var Grid = function Grid(_ref) {
       multiRow = _ref$multiRow === void 0 ? true : _ref$multiRow,
       hAlign = _ref.hAlign,
       vAlign = _ref.vAlign,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.container), {
     className: cn('container', {
       'multi-row': multiRow,
       'h-align': hAlign,
@@ -24,7 +26,7 @@ var Grid = function Grid(_ref) {
       'gutters-left': guttersLeft,
       'gutters-bottom': guttersBottom
     })
-  }, React.Children.map(children, function (child) {
+  }), React.Children.map(children, function (child) {
     return React.cloneElement(child, {
       className: cn('column', {
         'gutter-left': guttersLeft,
@@ -41,6 +43,10 @@ Grid.propTypes = {
   guttersBottom: PropTypes.oneOf(['large', 'medium']),
   multiRow: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    container: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired
 };
 export default Grid;

package/dist/es/components/Grid/GridColumn.d.ts

@@ -50,6 +50,10 @@ export interface IGridColumn {
     flex?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     children: React.ReactNode;
 }
 declare const GridColumn: React.FC<IGridColumn>;

package/dist/es/components/Grid/GridColumn.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./GridColumn.css";
 var GridSizeValues = PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);
@@ -38,8 +39,9 @@ var GridColumn = function GridColumn(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       align = _ref.align,
+      dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       flex: flex,
       grow: grow,
@@ -65,7 +67,7 @@ var GridColumn = function GridColumn(_ref) {
       'right-offset-tablet': rightOffsetTablet,
       'right-offset-mobile': rightOffsetMobile
     }, className)
-  }, children);
+  }), children);
 };
 
 GridColumn.propTypes = {
@@ -88,6 +90,9 @@ GridColumn.propTypes = {
   grow: PropTypes.bool,
   flex: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.node.isRequired
 };
 export default GridColumn;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './Header.less';
-interface IHeaderProps {
+export interface IHeaderProps {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
     /** Поведение текста при встраивании в широкий или узкий контейнер (только для h5) */

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

@@ -2,21 +2,24 @@
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
   margin: 12px 0 12px 40px;
-  padding: 0;
   font-style: normal;
 }
-.mfui-list_type_ul {
-  list-style: disc;
-}
-.mfui-list_type_ol {
-  list-style: decimal;
-}
 .mfui-list_h-align_center {
-  text-align: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 .mfui-list_h-align_right {
-  text-align: right;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
 }
 .mfui-list_color_default {
   color: var(--content);
@@ -51,3 +54,13 @@
 .mfui-list_weight_bold {
   font-weight: 600;
 }
+.mfui-list__inner {
+  margin: 0;
+  padding: 0;
+}
+.mfui-list__inner_type_ul {
+  list-style: disc;
+}
+.mfui-list_inner_type_ol {
+  list-style: decimal;
+}

package/dist/es/components/List/List.js

@@ -15,14 +15,17 @@ var List = function List(_ref) {
       className = _ref.className,
       children = _ref.children;
   var ElementType = as;
-  return /*#__PURE__*/React.createElement(ElementType, {
+  return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'h-align': align,
       color: color,
-      weight: weight,
-      type: as
+      weight: weight
     }, className)
-  }, children);
+  }, /*#__PURE__*/React.createElement(ElementType, {
+    className: cn('inner', {
+      type: as
+    })
+  }, children));
 };
 
 List.propTypes = {

package/dist/es/components/Tabs/Tabs.css

@@ -157,6 +157,9 @@
   color: var(--spbSky3);
   fill: var(--spbSky3);
 }
+.mfui-tabs__tab-inner:hover {
+  text-decoration: none;
+}
 .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
   color: var(--content);
   fill: var(--content);

package/dist/es/components/TextField/TextField.css

@@ -41,6 +41,15 @@
   overflow-y: auto;
   resize: none;
 }
+.mfui-text-field__hidden-textarea {
+  position: absolute;
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content;
+  padding: 0 56px 0 16px;
+  word-break: break-all;
+  visibility: hidden;
+}
 .mfui-text-field__field_resized {
   -webkit-transition: height 0.1s;
   transition: height 0.1s;

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

@@ -88,6 +88,8 @@ export declare type TextFieldProps = {
     minTextareaHeight?: MinTextareaHeightType;
     /** Скрывает кнопку ресайза для textarea="flexible" */
     hideResizeButton?: boolean;
+    /** Отключает перевод строки по Enter */
+    disableEnterLineBreak?: boolean;
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик изменения значения маскированного инпута до обработки маской */

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

@@ -1,14 +1,19 @@
 import "core-js/modules/es.array.concat";
+import "core-js/modules/es.date.to-string";
 import "core-js/modules/es.function.name";
+import "core-js/modules/es.object.to-string";
 import "core-js/modules/es.object.values";
 import "core-js/modules/es.parse-float";
 import "core-js/modules/es.regexp.exec";
+import "core-js/modules/es.regexp.to-string";
 import "core-js/modules/es.string.replace";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable react/no-multi-comp */
 import * as React from 'react';
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
 import InputMask from 'react-input-mask';
@@ -69,6 +74,13 @@ var DEFAULT_PLACEHOLDERS = {
   password: 'Пароль',
   text: 'Текст'
 };
+var converConfig = {
+  br: {
+    component: function component() {
+      return React.createElement('br');
+    }
+  }
+};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -79,7 +91,7 @@ export var TextareaTypes = {
 };
 export var MinTextareaHeight = {
   ONE_ROW: ROW_HEIGHT,
-  THREE_ROWS: ROW_HEIGHT * 3
+  THREE_ROWS: ROW_HEIGHT * DEFAULT_ROW_COUNT
 };
 var cn = cnCreate('mfui-text-field');
 
@@ -106,6 +118,8 @@ var TextField = function TextField(_ref) {
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
       _ref$minTextareaHeigh = _ref.minTextareaHeight,
       minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.THREE_ROWS : _ref$minTextareaHeigh,
+      _ref$disableEnterLine = _ref.disableEnterLineBreak,
+      disableEnterLineBreak = _ref$disableEnterLine === void 0 ? false : _ref$disableEnterLine,
       _ref$hideResizeButton = _ref.hideResizeButton,
       hideResizeButton = _ref$hideResizeButton === void 0 ? false : _ref$hideResizeButton,
       onBlur = _ref.onBlur,
@@ -142,8 +156,8 @@ var TextField = function TextField(_ref) {
 
   var _useState5 = useState(minTextareaHeight),
       _useState6 = _slicedToArray(_useState5, 2),
-      initialTextareaHeight = _useState6[0],
-      setInitialTextareaHeight = _useState6[1];
+      textareaHeight = _useState6[0],
+      setTextareaHeight = _useState6[1];
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -166,6 +180,7 @@ var TextField = function TextField(_ref) {
       setIsTextareaResized = _useState14[1];
 
   var fieldNode = useRef();
+  var hiddenElement = useRef(null);
   var labelRef = useRef(null);
   var resizerRef = useRef(null);
   var isPasswordType = useMemo(function () {
@@ -189,6 +204,15 @@ var TextField = function TextField(_ref) {
 
     setIsMaxLimitExceeded(symbolCounter < String(textareaValue).length);
   }, [symbolCounter]);
+  useEffect(function () {
+    if (!hiddenElement.current) {
+      return;
+    }
+
+    var hiddenElementHeight = hiddenElement.current.scrollHeight;
+    var isHiddenHeightCorrect = hiddenElementHeight >= minTextareaHeight && hiddenElementHeight <= TEXTAREA_MAX_HEIGHT;
+    !isTextareaResized && setTextareaHeight(isHiddenHeightCorrect ? hiddenElementHeight : minTextareaHeight);
+  }, [hiddenElement, isTextareaResized, minTextareaHeight, inputValue]);
   useEffect(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
@@ -214,7 +238,7 @@ var TextField = function TextField(_ref) {
         var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
         var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
         var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
-        setInitialTextareaHeight(updatedHeight);
+        setTextareaHeight(updatedHeight);
         setIsTextareaResized(true);
       }, throttleTime.resizeTextarea);
 
@@ -241,22 +265,7 @@ var TextField = function TextField(_ref) {
     });
   }, []);
 
-  var setTextareaHeight = function setTextareaHeight() {
-    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) || isTextareaResized) {
-      return;
-    }
-
-    var scrollHeight = fieldNode.current.scrollHeight;
-    var extraRowCount = Math.round((scrollHeight - 28 - minTextareaHeight) / ROW_HEIGHT);
-    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? minTextareaHeight + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
-    setInitialTextareaHeight(newHeight);
-  };
-
   var handleInputChange = function handleInputChange(e) {
-    if (textarea === TextareaTypes.FLEXIBLE) {
-      setTextareaHeight();
-    }
-
     !isControlled && setInputValue(e.target.value);
     checkSymbolMaxLimit(e.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -281,6 +290,10 @@ var TextField = function TextField(_ref) {
     labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
 
+  var handleTextareaKeyDown = function handleTextareaKeyDown(e) {
+    checkEventIsClickOrEnterPress(e) && !e.shiftKey && e.preventDefault();
+  };
+
   var handleIconClick = useCallback(function (e) {
     var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
     var field = fieldNode.current;
@@ -393,13 +406,23 @@ var TextField = function TextField(_ref) {
   };
 
   var renderTextarea = function renderTextarea() {
+    var _a;
+
+    var hiddenValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().replace(/[\r\n]/g, '<br/>');
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", _extends({}, textareaParams, {
-      onScroll: handleTextareaScroll,
       style: {
-        height: "".concat(initialTextareaHeight, "px")
+        height: "".concat(textareaHeight, "px")
       },
-      ref: getFieldNode
-    })), renderLabel());
+      ref: getFieldNode,
+      onKeyDown: disableEnterLineBreak ? handleTextareaKeyDown : undefined,
+      onScroll: handleTextareaScroll
+    })), !!hiddenValue && /*#__PURE__*/React.createElement("div", {
+      className: cn('hidden-textarea'),
+      ref: hiddenElement,
+      style: {
+        width: (_a = fieldNode.current) === null || _a === void 0 ? void 0 : _a.scrollWidth
+      }
+    }, convert(hiddenValue, converConfig), "."), renderLabel());
   };
 
   var renderIconBlock = function renderIconBlock() {
@@ -496,6 +519,7 @@ TextField.propTypes = {
   className: PropTypes.string,
   minTextareaHeight: PropTypes.oneOf([24, 72]),
   hideResizeButton: PropTypes.bool,
+  disableEnterLineBreak: PropTypes.bool,
   onChange: PropTypes.func,
   onBeforeMaskChange: PropTypes.func,
   onBlur: PropTypes.func,