@megafon/ui-core 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.5.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.4.0...@megafon/ui-core@4.5.0) (2022-10-17)
+
+
+### Features
+
+* **search:** add new keys for prop classes ([552741b](https://github.com/MegafonWebLab/megafon-ui/commit/552741be627cce59b4ba221645b569ce57e72bd2))
+* **textfield:** add minTextareaHeight and hideResizeButton props for textarea ([088d219](https://github.com/MegafonWebLab/megafon-ui/commit/088d21971b69233522bb5cf7d642cffbc2571ca4))
+
+
+
+
+
 # [4.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.3.0...@megafon/ui-core@4.4.0) (2022-10-10)
 
 

package/dist/es/colors/colorsData.js

@@ -122,7 +122,7 @@ var colors = {
   staticOpacity: {
     title: 'Static Opacity',
     colorsList: {
-      description: 'Цвета c прозрачностью не зависящие от темы',
+      description: 'Цвета с прозрачностью не зависящие от темы',
       colors: [{
         name: 'STC White 5%',
         code: 'stcWhite5',

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

@@ -52,6 +52,8 @@ export interface ISearchProps {
     className?: string;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
+        label?: string;
+        input?: string;
         listItemTitle?: string;
         control?: string;
         icon?: string;

package/dist/es/components/Search/Search.js

@@ -199,7 +199,7 @@ var Search = function Search(_ref) {
     id: searchId,
     className: cn('search-field', {
       filled: !!searchQuery
-    }),
+    }, [classes === null || classes === void 0 ? void 0 : classes.input]),
     placeholder: placeholder,
     value: searchQuery,
     onChange: handleChange,
@@ -211,7 +211,7 @@ var Search = function Search(_ref) {
     type: "text",
     autoComplete: "off"
   })), label && /*#__PURE__*/React.createElement("div", {
-    className: cn('label')
+    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label])
   }, label, required && /*#__PURE__*/React.createElement("span", {
     className: cn('require-mark')
   }, "*"))), !hideIcon && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
@@ -272,6 +272,8 @@ Search.propTypes = {
   required: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
+    label: PropTypes.string,
+    input: PropTypes.string,
     listItemTitle: PropTypes.string,
     control: PropTypes.string,
     icon: PropTypes.string

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

@@ -8,6 +8,11 @@ export declare const TextareaTypes: {
     readonly FIXED: "fixed";
     readonly FLEXIBLE: "flexible";
 };
+export declare const MinTextareaHeight: {
+    readonly ONE_ROW: 24;
+    readonly THREE_ROWS: number;
+};
+declare type MinTextareaHeightType = typeof MinTextareaHeight[keyof typeof MinTextareaHeight];
 interface IMaskSelection {
     start: number;
     end: number;
@@ -79,6 +84,10 @@ export declare type TextFieldProps = {
     autoComplete?: string;
     /** Переводит компонент в контролируемое состояние */
     isControlled?: boolean;
+    /** Минимальная высота textarea, px */
+    minTextareaHeight?: MinTextareaHeightType;
+    /** Скрывает кнопку ресайза для textarea="flexible" */
+    hideResizeButton?: boolean;
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик изменения значения маскированного инпута до обработки маской */

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

@@ -59,6 +59,10 @@ var ResizeIcon = function ResizeIcon(props) {
   }));
 };
 
+var TEXTAREA_MAX_HEIGHT = 144;
+var DEFAULT_LABEL_TOP_POSITION = 16;
+var DEFAULT_ROW_COUNT = 3;
+var ROW_HEIGHT = 24;
 var DEFAULT_PLACEHOLDERS = {
   email: 'E-mail',
   tel: 'Номер телефона',
@@ -73,11 +77,10 @@ export var TextareaTypes = {
   FIXED: 'fixed',
   FLEXIBLE: 'flexible'
 };
-var TEXTAREA_MIN_HEIGHT = 48;
-var TEXTAREA_MAX_HEIGHT = 144;
-var DEFAULT_LABEL_TOP_POSITION = 16;
-var DEFAULT_ROW_COUNT = 3;
-var ROW_HEIGHT = 24;
+export var MinTextareaHeight = {
+  ONE_ROW: ROW_HEIGHT,
+  THREE_ROWS: ROW_HEIGHT * 3
+};
 var cn = cnCreate('mfui-text-field');
 
 var TextField = function TextField(_ref) {
@@ -101,6 +104,10 @@ var TextField = function TextField(_ref) {
       required = _ref.required,
       _ref$isControlled = _ref.isControlled,
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$minTextareaHeigh = _ref.minTextareaHeight,
+      minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.THREE_ROWS : _ref$minTextareaHeigh,
+      _ref$hideResizeButton = _ref.hideResizeButton,
+      hideResizeButton = _ref$hideResizeButton === void 0 ? false : _ref$hideResizeButton,
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
       onBeforeMaskChange = _ref.onBeforeMaskChange,
@@ -133,7 +140,7 @@ var TextField = function TextField(_ref) {
       inputValue = _useState4[0],
       setInputValue = _useState4[1];
 
-  var _useState5 = useState(ROW_HEIGHT * DEFAULT_ROW_COUNT),
+  var _useState5 = useState(minTextareaHeight),
       _useState6 = _slicedToArray(_useState5, 2),
       initialTextareaHeight = _useState6[0],
       setInitialTextareaHeight = _useState6[1];
@@ -206,7 +213,7 @@ var TextField = function TextField(_ref) {
       var handleResize = throttle(function (moveEvent) {
         var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
         var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
-        var updatedHeight = resizeHeight < TEXTAREA_MIN_HEIGHT ? TEXTAREA_MIN_HEIGHT : resizeHeight;
+        var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
         setInitialTextareaHeight(updatedHeight);
         setIsTextareaResized(true);
       }, throttleTime.resizeTextarea);
@@ -227,7 +234,7 @@ var TextField = function TextField(_ref) {
 
     resizerRef.current.addEventListener('mousedown', handleStartResize);
     resizerRef.current.addEventListener('touchstart', handleStartResize);
-  }, [textarea]);
+  }, [textarea, minTextareaHeight]);
   var togglePasswordHiding = useCallback(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;
@@ -240,8 +247,8 @@ var TextField = function TextField(_ref) {
     }
 
     var scrollHeight = fieldNode.current.scrollHeight;
-    var extraRowCount = Math.round((scrollHeight - 28 - TEXTAREA_MIN_HEIGHT) / ROW_HEIGHT);
-    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? TEXTAREA_MIN_HEIGHT + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
+    var extraRowCount = Math.round((scrollHeight - 28 - minTextareaHeight) / ROW_HEIGHT);
+    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? minTextareaHeight + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
     setInitialTextareaHeight(newHeight);
   };
 
@@ -442,7 +449,7 @@ var TextField = function TextField(_ref) {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
     })
-  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && /*#__PURE__*/React.createElement("div", {
+  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", {
     className: cn('resizer'),
     ref: resizerRef
   }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
@@ -485,6 +492,8 @@ TextField.propTypes = {
   maskChar: PropTypes.string,
   noticeText: PropTypes.string,
   className: PropTypes.string,
+  minTextareaHeight: PropTypes.oneOf([24, 72]),
+  hideResizeButton: PropTypes.bool,
   onChange: PropTypes.func,
   onBeforeMaskChange: PropTypes.func,
   onBlur: PropTypes.func,

package/dist/lib/colors/colorsData.js

@@ -128,7 +128,7 @@ var colors = {
   staticOpacity: {
     title: 'Static Opacity',
     colorsList: {
-      description: 'Цвета c прозрачностью не зависящие от темы',
+      description: 'Цвета с прозрачностью не зависящие от темы',
       colors: [{
         name: 'STC White 5%',
         code: 'stcWhite5',

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

@@ -52,6 +52,8 @@ export interface ISearchProps {
     className?: string;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
+        label?: string;
+        input?: string;
         listItemTitle?: string;
         control?: string;
         icon?: string;

package/dist/lib/components/Search/Search.js

@@ -241,7 +241,7 @@ var Search = function Search(_ref) {
     id: searchId,
     className: cn('search-field', {
       filled: !!searchQuery
-    }),
+    }, [classes === null || classes === void 0 ? void 0 : classes.input]),
     placeholder: placeholder,
     value: searchQuery,
     onChange: handleChange,
@@ -253,7 +253,7 @@ var Search = function Search(_ref) {
     type: "text",
     autoComplete: "off"
   })), label && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('label')
+    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label])
   }, label, required && /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('require-mark')
   }, "*"))), !hideIcon && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
@@ -314,6 +314,8 @@ Search.propTypes = {
   required: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
+    label: PropTypes.string,
+    input: PropTypes.string,
     listItemTitle: PropTypes.string,
     control: PropTypes.string,
     icon: PropTypes.string

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

@@ -8,6 +8,11 @@ export declare const TextareaTypes: {
     readonly FIXED: "fixed";
     readonly FLEXIBLE: "flexible";
 };
+export declare const MinTextareaHeight: {
+    readonly ONE_ROW: 24;
+    readonly THREE_ROWS: number;
+};
+declare type MinTextareaHeightType = typeof MinTextareaHeight[keyof typeof MinTextareaHeight];
 interface IMaskSelection {
     start: number;
     end: number;
@@ -79,6 +84,10 @@ export declare type TextFieldProps = {
     autoComplete?: string;
     /** Переводит компонент в контролируемое состояние */
     isControlled?: boolean;
+    /** Минимальная высота textarea, px */
+    minTextareaHeight?: MinTextareaHeightType;
+    /** Скрывает кнопку ресайза для textarea="flexible" */
+    hideResizeButton?: boolean;
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик изменения значения маскированного инпута до обработки маской */

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextareaTypes = exports.Verification = void 0;
+exports["default"] = exports.MinTextareaHeight = exports.TextareaTypes = exports.Verification = void 0;
 
 require("core-js/modules/es.array.concat");
 
@@ -85,6 +85,10 @@ var ResizeIcon = function ResizeIcon(props) {
   }));
 };
 
+var TEXTAREA_MAX_HEIGHT = 144;
+var DEFAULT_LABEL_TOP_POSITION = 16;
+var DEFAULT_ROW_COUNT = 3;
+var ROW_HEIGHT = 24;
 var DEFAULT_PLACEHOLDERS = {
   email: 'E-mail',
   tel: 'Номер телефона',
@@ -101,11 +105,11 @@ var TextareaTypes = {
   FLEXIBLE: 'flexible'
 };
 exports.TextareaTypes = TextareaTypes;
-var TEXTAREA_MIN_HEIGHT = 48;
-var TEXTAREA_MAX_HEIGHT = 144;
-var DEFAULT_LABEL_TOP_POSITION = 16;
-var DEFAULT_ROW_COUNT = 3;
-var ROW_HEIGHT = 24;
+var MinTextareaHeight = {
+  ONE_ROW: ROW_HEIGHT,
+  THREE_ROWS: ROW_HEIGHT * 3
+};
+exports.MinTextareaHeight = MinTextareaHeight;
 var cn = (0, _uiHelpers.cnCreate)('mfui-text-field');
 
 var TextField = function TextField(_ref) {
@@ -129,6 +133,10 @@ var TextField = function TextField(_ref) {
       required = _ref.required,
       _ref$isControlled = _ref.isControlled,
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$minTextareaHeigh = _ref.minTextareaHeight,
+      minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.THREE_ROWS : _ref$minTextareaHeigh,
+      _ref$hideResizeButton = _ref.hideResizeButton,
+      hideResizeButton = _ref$hideResizeButton === void 0 ? false : _ref$hideResizeButton,
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
       onBeforeMaskChange = _ref.onBeforeMaskChange,
@@ -161,7 +169,7 @@ var TextField = function TextField(_ref) {
       inputValue = _useState4[0],
       setInputValue = _useState4[1];
 
-  var _useState5 = (0, React.useState)(ROW_HEIGHT * DEFAULT_ROW_COUNT),
+  var _useState5 = (0, React.useState)(minTextareaHeight),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
       initialTextareaHeight = _useState6[0],
       setInitialTextareaHeight = _useState6[1];
@@ -234,7 +242,7 @@ var TextField = function TextField(_ref) {
       var handleResize = (0, _lodash["default"])(function (moveEvent) {
         var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
         var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
-        var updatedHeight = resizeHeight < TEXTAREA_MIN_HEIGHT ? TEXTAREA_MIN_HEIGHT : resizeHeight;
+        var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
         setInitialTextareaHeight(updatedHeight);
         setIsTextareaResized(true);
       }, _throttleTime["default"].resizeTextarea);
@@ -255,7 +263,7 @@ var TextField = function TextField(_ref) {
 
     resizerRef.current.addEventListener('mousedown', handleStartResize);
     resizerRef.current.addEventListener('touchstart', handleStartResize);
-  }, [textarea]);
+  }, [textarea, minTextareaHeight]);
   var togglePasswordHiding = (0, React.useCallback)(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;
@@ -268,8 +276,8 @@ var TextField = function TextField(_ref) {
     }
 
     var scrollHeight = fieldNode.current.scrollHeight;
-    var extraRowCount = Math.round((scrollHeight - 28 - TEXTAREA_MIN_HEIGHT) / ROW_HEIGHT);
-    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? TEXTAREA_MIN_HEIGHT + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
+    var extraRowCount = Math.round((scrollHeight - 28 - minTextareaHeight) / ROW_HEIGHT);
+    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? minTextareaHeight + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
     setInitialTextareaHeight(newHeight);
   };
 
@@ -466,7 +474,7 @@ var TextField = function TextField(_ref) {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
     })
-  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && /*#__PURE__*/React.createElement("div", {
+  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", {
     className: cn('resizer'),
     ref: resizerRef
   }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
@@ -509,6 +517,8 @@ TextField.propTypes = {
   maskChar: PropTypes.string,
   noticeText: PropTypes.string,
   className: PropTypes.string,
+  minTextareaHeight: PropTypes.oneOf([24, 72]),
+  hideResizeButton: PropTypes.bool,
   onChange: PropTypes.func,
   onBeforeMaskChange: PropTypes.func,
   onBlur: PropTypes.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "files": [
     "dist",
     "styles"
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "ab68c8392f13f494977b7a6e44104f9ae1b1f64b"
+  "gitHead": "1767b434f1650a100aa2aca6f5c795f8b549a184"
 }