@megafon/ui-core 4.0.0-beta.13 → 4.0.0-beta.16

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.16](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.15...@megafon/ui-core@4.0.0-beta.16) (2022-08-17)
+
+
+### Bug Fixes
+
+* **textfield:** fixes permanently visible block after the field ([9cc5184](https://github.com/MegafonWebLab/megafon-ui/commit/9cc5184f7b60a7f7dcfe3f9f49cc3199787a77d7))
+
+
+
+
+
+# [4.0.0-beta.15](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.14...@megafon/ui-core@4.0.0-beta.15) (2022-08-15)
+
+
+### Bug Fixes
+
+* **textfield:** fix label styles ([080f8fa](https://github.com/MegafonWebLab/megafon-ui/commit/080f8faa3ef8ec954704466dc5b56d0313487787))
+
+
+### Features
+
+* **textfield:** add prop hidePlaceholder ([1c0176e](https://github.com/MegafonWebLab/megafon-ui/commit/1c0176ebdae47d11ac972ada200303500618caf1))
+
+
+
+
+
+# [4.0.0-beta.14](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.13...@megafon/ui-core@4.0.0-beta.14) (2022-08-08)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
 # [4.0.0-beta.13](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.12...@megafon/ui-core@4.0.0-beta.13) (2022-08-08)
 
 **Note:** Version bump only for package @megafon/ui-core

package/dist/es/components/Select/Select.css

@@ -46,6 +46,7 @@
   height: 60px;
   border: 1px solid var(--spbSky2);
   border-radius: 12px;
+  overflow: hidden;
   background-color: var(--base);
   outline: none;
   cursor: pointer;
@@ -109,7 +110,6 @@
           align-items: center;
   width: 100%;
   height: 100%;
-  border-radius: 12px;
   outline: none;
 }
 .mfui-select__title-value {
@@ -138,7 +138,6 @@
           box-sizing: border-box;
   height: 100%;
   padding: 0 45px 0 16px;
-  border-radius: 12px;
   overflow: hidden;
   white-space: nowrap;
 }

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

@@ -152,7 +152,8 @@
   top: 16px;
 }
 .mfui-text-field__field:focus ~ .mfui-text-field__label,
-.mfui-text-field__field:not(:placeholder-shown) ~ .mfui-text-field__label {
+.mfui-text-field__field:not(:placeholder-shown) ~ .mfui-text-field__label,
+.mfui-text-field__field:-webkit-autofill ~ .mfui-text-field__label {
   -webkit-transform: scale(0.8) translate(-11%, -75%);
           transform: scale(0.8) translate(-11%, -75%);
   -webkit-transition-duration: 0.2s, 0.01s;
@@ -230,7 +231,7 @@
 .mfui-text-field__require-mark {
   color: var(--fury);
 }
-.mfui-text-field__wrap {
+.mfui-text-field__field-bottom-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

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

@@ -39,6 +39,8 @@ export declare type TextFieldProps = {
     inputRef?: (node: HTMLInputElement | HTMLTextAreaElement) => void;
     /** Имя поля */
     name?: string;
+    /** Запрещает отображение плейсхолдера */
+    hidePlaceholder?: boolean;
     /** Отображаемый текст при отсутствии значения */
     placeholder?: string;
     /** Атрибут корневого DOM элемента компонента */
@@ -61,7 +63,6 @@ export declare type TextFieldProps = {
     /** Дополнительные классы элементов */
     classes?: {
         input?: string;
-        fieldWrapper?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

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

@@ -95,6 +95,8 @@ var TextField = function TextField(_ref) {
       _ref$textarea = _ref.textarea,
       textarea = _ref$textarea === void 0 ? false : _ref$textarea,
       name = _ref.name,
+      _ref$hidePlaceholder = _ref.hidePlaceholder,
+      hidePlaceholder = _ref$hidePlaceholder === void 0 ? false : _ref$hidePlaceholder,
       placeholder = _ref.placeholder,
       required = _ref.required,
       _ref$isControlled = _ref.isControlled,
@@ -120,7 +122,6 @@ var TextField = function TextField(_ref) {
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var input = _ref$classes.input,
-      fieldWrapper = _ref$classes.fieldWrapper,
       dataAttrs = _ref.dataAttrs;
 
   var _useState = useState(true),
@@ -306,7 +307,7 @@ var TextField = function TextField(_ref) {
     onFocus: handleFocus,
     onKeyUp: onKeyUp,
     maxLength: maxLength,
-    placeholder: actualPlaceholder,
+    placeholder: hidePlaceholder ? ' ' : actualPlaceholder,
     required: required,
     inputMode: inputMode
   });
@@ -429,6 +430,7 @@ var TextField = function TextField(_ref) {
   var isPlaceholderShowed = isPasswordType && isPasswordHidden && !!inputValue;
   var valueHasSymbols = inputValue !== null && inputValue !== undefined;
   var currentSymbolCount = valueHasSymbols && String(inputValue).length || 0;
+  var showAdditionalBlock = displayedNoticeText || symbolCounter;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       disabled: disabled,
@@ -441,13 +443,13 @@ var TextField = function TextField(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
-    }, fieldWrapper)
+    })
   }, renderField(), textareaType === TextareaTypes.FLEXIBLE && /*#__PURE__*/React.createElement("div", {
     className: cn('resizer'),
     ref: resizerRef
-  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrap')
-  }, /*#__PURE__*/React.createElement("div", _extends({
+  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), showAdditionalBlock && /*#__PURE__*/React.createElement("div", {
+    className: cn('field-bottom-wrapper')
+  }, displayedNoticeText && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('notice-text', {
       active: !!noticeText
     }),
@@ -471,6 +473,7 @@ TextField.propTypes = {
   inputMode: PropTypes.oneOf(['numeric', 'tel', 'decimal', 'email', 'url', 'search', 'none']),
   autoComplete: PropTypes.string,
   name: PropTypes.string,
+  hidePlaceholder: PropTypes.bool,
   placeholder: PropTypes.string,
   id: PropTypes.string,
   isControlled: PropTypes.bool,
@@ -490,8 +493,7 @@ TextField.propTypes = {
   onCustomIconClick: PropTypes.func,
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
-    input: PropTypes.string,
-    fieldWrapper: PropTypes.string
+    input: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),

package/dist/lib/components/Select/Select.css

@@ -46,6 +46,7 @@
   height: 60px;
   border: 1px solid var(--spbSky2);
   border-radius: 12px;
+  overflow: hidden;
   background-color: var(--base);
   outline: none;
   cursor: pointer;
@@ -109,7 +110,6 @@
           align-items: center;
   width: 100%;
   height: 100%;
-  border-radius: 12px;
   outline: none;
 }
 .mfui-select__title-value {
@@ -138,7 +138,6 @@
           box-sizing: border-box;
   height: 100%;
   padding: 0 45px 0 16px;
-  border-radius: 12px;
   overflow: hidden;
   white-space: nowrap;
 }

package/dist/lib/components/TextField/TextField.css

@@ -152,7 +152,8 @@
   top: 16px;
 }
 .mfui-text-field__field:focus ~ .mfui-text-field__label,
-.mfui-text-field__field:not(:placeholder-shown) ~ .mfui-text-field__label {
+.mfui-text-field__field:not(:placeholder-shown) ~ .mfui-text-field__label,
+.mfui-text-field__field:-webkit-autofill ~ .mfui-text-field__label {
   -webkit-transform: scale(0.8) translate(-11%, -75%);
           transform: scale(0.8) translate(-11%, -75%);
   -webkit-transition-duration: 0.2s, 0.01s;
@@ -230,7 +231,7 @@
 .mfui-text-field__require-mark {
   color: var(--fury);
 }
-.mfui-text-field__wrap {
+.mfui-text-field__field-bottom-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

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

@@ -39,6 +39,8 @@ export declare type TextFieldProps = {
     inputRef?: (node: HTMLInputElement | HTMLTextAreaElement) => void;
     /** Имя поля */
     name?: string;
+    /** Запрещает отображение плейсхолдера */
+    hidePlaceholder?: boolean;
     /** Отображаемый текст при отсутствии значения */
     placeholder?: string;
     /** Атрибут корневого DOM элемента компонента */
@@ -61,7 +63,6 @@ export declare type TextFieldProps = {
     /** Дополнительные классы элементов */
     classes?: {
         input?: string;
-        fieldWrapper?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

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

@@ -123,6 +123,8 @@ var TextField = function TextField(_ref) {
       _ref$textarea = _ref.textarea,
       textarea = _ref$textarea === void 0 ? false : _ref$textarea,
       name = _ref.name,
+      _ref$hidePlaceholder = _ref.hidePlaceholder,
+      hidePlaceholder = _ref$hidePlaceholder === void 0 ? false : _ref$hidePlaceholder,
       placeholder = _ref.placeholder,
       required = _ref.required,
       _ref$isControlled = _ref.isControlled,
@@ -148,7 +150,6 @@ var TextField = function TextField(_ref) {
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var input = _ref$classes.input,
-      fieldWrapper = _ref$classes.fieldWrapper,
       dataAttrs = _ref.dataAttrs;
 
   var _useState = (0, React.useState)(true),
@@ -333,7 +334,7 @@ var TextField = function TextField(_ref) {
     onFocus: handleFocus,
     onKeyUp: onKeyUp,
     maxLength: maxLength,
-    placeholder: actualPlaceholder,
+    placeholder: hidePlaceholder ? ' ' : actualPlaceholder,
     required: required,
     inputMode: inputMode
   });
@@ -453,6 +454,7 @@ var TextField = function TextField(_ref) {
   var isPlaceholderShowed = isPasswordType && isPasswordHidden && !!inputValue;
   var valueHasSymbols = inputValue !== null && inputValue !== undefined;
   var currentSymbolCount = valueHasSymbols && String(inputValue).length || 0;
+  var showAdditionalBlock = displayedNoticeText || symbolCounter;
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       disabled: disabled,
@@ -465,13 +467,13 @@ var TextField = function TextField(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
-    }, fieldWrapper)
+    })
   }, renderField(), textareaType === TextareaTypes.FLEXIBLE && /*#__PURE__*/React.createElement("div", {
     className: cn('resizer'),
     ref: resizerRef
-  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrap')
-  }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), showAdditionalBlock && /*#__PURE__*/React.createElement("div", {
+    className: cn('field-bottom-wrapper')
+  }, displayedNoticeText && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('notice-text', {
       active: !!noticeText
     }),
@@ -495,6 +497,7 @@ TextField.propTypes = {
   inputMode: PropTypes.oneOf(['numeric', 'tel', 'decimal', 'email', 'url', 'search', 'none']),
   autoComplete: PropTypes.string,
   name: PropTypes.string,
+  hidePlaceholder: PropTypes.bool,
   placeholder: PropTypes.string,
   id: PropTypes.string,
   isControlled: PropTypes.bool,
@@ -514,8 +517,7 @@ TextField.propTypes = {
   onCustomIconClick: PropTypes.func,
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
-    input: PropTypes.string,
-    fieldWrapper: PropTypes.string
+    input: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.16",
   "files": [
     "dist",
     "styles"
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "ccaf6b0e36d3c84a41ace9d777eeac7ff0f500a4"
+  "gitHead": "4e38e6bff3571a7411bd3e3d1be71a5a99848f59"
 }