@megafon/ui-core 4.0.0-beta.8 → 4.0.1

package/dist/lib/components/Select/Select.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SelectTypes = exports.Verification = void 0;
+exports["default"] = exports.SelectTypes = exports.Verification = exports.SelectItemsPaddings = void 0;
 
 require("core-js/modules/es.array.concat");
 
@@ -58,6 +58,11 @@ var UPDATE_ITEMS_LIST = _selectReducer.SelectActions.UPDATE_ITEMS_LIST,
     TOGGLE_DROPDOWN = _selectReducer.SelectActions.TOGGLE_DROPDOWN,
     UPDATE_SELECT_VALUE = _selectReducer.SelectActions.UPDATE_SELECT_VALUE,
     SET_HOVERED_ITEM_INDEX = _selectReducer.SelectActions.SET_HOVERED_ITEM_INDEX;
+var SelectItemsPaddings = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
+exports.SelectItemsPaddings = SelectItemsPaddings;
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -77,6 +82,7 @@ var SelectTypes = {
 // - Opened dropdown could be closed only via value choose, click outside of select and on TAB press.
 // - Should add event listener for outside of dropdown click on list open and remove it on list close.
 // - onClose callback shouldn't fire multiple times on outside click if dropdown was opened multiple times.
+// - If item with currentValue is not found in items, input value will not be displayed
 
 exports.SelectTypes = SelectTypes;
 var cn = (0, _uiHelpers.cnCreate)('mfui-select');
@@ -384,7 +390,7 @@ var Select = function Select(_ref) {
       onClick: handleSelectClick
     }), /*#__PURE__*/React.createElement("div", {
       className: cn('title-inner', {
-        placeholder: currentValue === undefined
+        'hide-value': !item
       }, [classes === null || classes === void 0 ? void 0 : classes.titleInner])
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('title-value')
@@ -394,7 +400,7 @@ var Select = function Select(_ref) {
   var renderCombobox = function renderCombobox() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
       className: cn('combobox', {
-        placeholder: inputValue === undefined
+        'hide-value': !inputValue
       }),
       onFocus: handleComboboxFocus,
       onChange: handleChangeCombobox,
@@ -414,11 +420,14 @@ var Select = function Select(_ref) {
     }, currentItems.map(function (_ref3, i) {
       var title = _ref3.title,
           value = _ref3.value,
-          view = _ref3.view;
+          view = _ref3.view,
+          _ref3$paddings = _ref3.paddings,
+          paddings = _ref3$paddings === void 0 ? SelectItemsPaddings.LARGE : _ref3$paddings;
       var isItemActive = currentValue === value;
       return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem, i + 1), {
         className: cn('list-item', {
-          hovered: hoveredItemIndex === i
+          hovered: hoveredItemIndex === i,
+          paddings: paddings
         }, [classes.listItem]),
         key: "".concat(i, "_").concat(value),
         onClick: handleSelectItem,
@@ -493,7 +502,8 @@ Select.propTypes = {
     view: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     selectedView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     title: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    paddings: PropTypes.oneOf(Object.values(SelectItemsPaddings))
   })).isRequired,
   onSelect: PropTypes.func,
   onOpened: PropTypes.func,

package/dist/lib/components/Tabs/Tabs.css

@@ -6,10 +6,19 @@
   display: flex;
   width: 100%;
 }
+.mfui-tabs__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
 .mfui-tabs__swiper-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 .mfui-tabs__swiper {
   font-family: inherit;
@@ -83,7 +92,7 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: var(--stcBlack);
+  background-color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
@@ -131,6 +140,8 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   height: 36px;
   padding: 2px 12px;
   color: var(--spbSky3);

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './Tabs.less';
 import { ITabProps } from './Tab';
-export declare const TabHAlign: {
+export declare const TabAlign: {
     readonly LEFT: "left";
     readonly CENTER: "center";
 };
@@ -15,7 +15,7 @@ export declare const TabColorTheme: {
 };
 declare type TabSizeType = typeof TabSize[keyof typeof TabSize];
 declare type TabColorThemeType = typeof TabColorTheme[keyof typeof TabColorTheme];
-declare type TabHAlignType = typeof TabHAlign[keyof typeof TabHAlign];
+declare type TabAlignType = typeof TabAlign[keyof typeof TabAlign];
 export interface ITabsProps {
     /** Дополнительный класс для корневого элемента */
     className?: string;
@@ -41,7 +41,7 @@ export interface ITabsProps {
     /** Ширина табов по размеру содержимого */
     autoWidth?: boolean;
     /** Горизонтальное выравнивание (только для autoWidth = true) */
-    hAlign?: TabHAlignType;
+    align?: TabAlignType;
     /** Фиксация табов у верхней границы окна */
     sticky?: boolean;
     /** Индекс активного таба (включает режим управления табами снаружи) */

package/dist/lib/components/Tabs/Tabs.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TabColorTheme = exports.TabSize = exports.TabHAlign = void 0;
+exports["default"] = exports.TabColorTheme = exports.TabSize = exports.TabAlign = void 0;
 
 require("core-js/modules/es.array.for-each");
 
@@ -49,11 +49,11 @@ var ArrowLeft = function ArrowLeft(props) {
   }));
 };
 
-var TabHAlign = {
+var TabAlign = {
   LEFT: 'left',
   CENTER: 'center'
 };
-exports.TabHAlign = TabHAlign;
+exports.TabAlign = TabAlign;
 var TabSize = {
   MEDIUM: 'medium',
   LARGE: 'large'
@@ -80,8 +80,8 @@ var Tabs = function Tabs(_ref) {
       tabColorTheme = _ref$tabColorTheme === void 0 ? 'white' : _ref$tabColorTheme,
       _ref$sticky = _ref.sticky,
       sticky = _ref$sticky === void 0 ? false : _ref$sticky,
-      _ref$hAlign = _ref.hAlign,
-      hAlign = _ref$hAlign === void 0 ? 'left' : _ref$hAlign,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
       _ref$defaultIndex = _ref.defaultIndex,
       defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
       outerIndex = _ref.currentIndex,
@@ -108,7 +108,7 @@ var Tabs = function Tabs(_ref) {
       isBeginning = _React$useState4[0],
       setBeginning = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
+  var _React$useState5 = React.useState(true),
       _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
       isEnd = _React$useState6[0],
       setEnd = _React$useState6[1];
@@ -392,13 +392,14 @@ var Tabs = function Tabs(_ref) {
     className: cn({
       size: size,
       'tab-color': tabColorTheme,
-      'h-align': hAlign,
+      'h-align': align,
       indents: !innerIndentsClass,
       sticky: isSticky,
       'auto-width': autoWidth
     }, [className, rootClass]),
     ref: rootRef
   }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper'),
     ref: tabListRef,
     style: {
       height: tabListHeight
@@ -415,6 +416,7 @@ var Tabs = function Tabs(_ref) {
       beginning: isBeginning,
       end: isEnd
     }, [innerIndentsClass]),
+    watchOverflow: true,
     slidesPerView: "auto",
     initialSlide: currentIndex,
     onSwiper: handleSwiper,
@@ -460,7 +462,7 @@ Tabs.propTypes = {
     next: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   }),
   size: _propTypes["default"].oneOf(Object.values(TabSize)),
-  hAlign: _propTypes["default"].oneOf(Object.values(TabHAlign)),
+  align: _propTypes["default"].oneOf(Object.values(TabAlign)),
   autoWidth: _propTypes["default"].bool,
   tabColorTheme: _propTypes["default"].oneOf(Object.values(TabColorTheme)),
   sticky: _propTypes["default"].bool,

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

@@ -113,6 +113,21 @@
 .mfui-text-field__field:focus::-webkit-input-placeholder {
   opacity: 1;
 }
+.mfui-text-field__field:focus:-moz-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus:-ms-input-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus::-moz-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus::-ms-input-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus::placeholder {
+  opacity: 1;
+}
 .mfui-text-field__field::-webkit-scrollbar {
   width: 16px;
 }
@@ -125,12 +140,6 @@
 .mfui-text-field__field::-webkit-scrollbar-thumb:hover {
   background-color: #999999;
 }
-.mfui-text-field__field:focus:-moz-placeholder {
-  opacity: 1;
-}
-.mfui-text-field__field:focus:-ms-input-placeholder {
-  opacity: 1;
-}
 .mfui-text-field__label {
   position: absolute;
   top: 18px;
@@ -152,7 +161,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;
@@ -170,6 +180,19 @@
   display: flex;
   overflow: hidden;
 }
+.mfui-text-field__field-bottom-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: 0;
+  overflow: hidden;
+  color: var(--spbSky3);
+  font-size: 12px;
+  line-height: 18px;
+}
+.mfui-text-field__field-bottom-wrapper_filled {
+  margin-top: 8px;
+}
 .mfui-text-field__notice-text {
   height: 0;
   opacity: 0;
@@ -179,7 +202,7 @@
           transition-duration: 0.3s;
 }
 .mfui-text-field__notice-text_active {
-  height: 18px;
+  height: 100%;
   opacity: 1;
 }
 .mfui-text-field__icon-box {
@@ -230,16 +253,6 @@
 .mfui-text-field__require-mark {
   color: var(--fury);
 }
-.mfui-text-field__wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-top: 8px;
-  overflow: hidden;
-  color: var(--spbSky3);
-  font-size: 12px;
-  line-height: 18px;
-}
 .mfui-text-field__counter {
   margin-left: auto;
 }
@@ -268,13 +281,13 @@
   cursor: default !important;
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__counter_error,
-.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__wrap {
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-bottom-wrapper {
   color: var(--fury);
 }
 .mfui-text-field_theme_white .mfui-text-field__icon {
   fill: var(--stcWhite);
 }
-.mfui-text-field_theme_white .mfui-text-field__wrap,
+.mfui-text-field_theme_white .mfui-text-field__field-bottom-wrapper,
 .mfui-text-field_theme_white .mfui-text-field__counter {
   color: var(--stcWhite);
 }

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 элемента компонента */

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,
@@ -172,8 +174,8 @@ var TextField = function TextField(_ref) {
 
   var _useState9 = (0, React.useState)(noticeText),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      displayedNoticeText = _useState10[0],
-      setDisplayedNoticeText = _useState10[1];
+      currentNoticeText = _useState10[0],
+      setCurrentNoticeText = _useState10[1];
 
   var _useState11 = (0, React.useState)(false),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
@@ -195,8 +197,8 @@ var TextField = function TextField(_ref) {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
   var hasValue = isControlled ? !!value : !!inputValue;
-  var isValidVerification = verification === Verification.VALID;
-  var isErrorVerification = verification === Verification.ERROR;
+  var isValidVerification = verification === Verification.VALID && !disabled;
+  var isErrorVerification = verification === Verification.ERROR && !disabled;
   var hasValueForClear = hasValue && !isPasswordType && !customIcon && !isValidVerification;
   var hasClearIcon = !disabled && (hasValueForClear || isErrorVerification);
   var actualPlaceholder = placeholder || DEFAULT_PLACEHOLDERS[type];
@@ -214,7 +216,7 @@ var TextField = function TextField(_ref) {
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit, isControlled]);
   (0, React.useEffect)(function () {
-    noticeText && setDisplayedNoticeText(noticeText);
+    noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
   (0, React.useEffect)(function () {
     if (!resizerRef.current || textarea !== TextareaTypes.FLEXIBLE) {
@@ -283,7 +285,7 @@ var TextField = function TextField(_ref) {
   };
 
   var handleNoticeTransitionEnd = (0, React.useCallback)(function () {
-    !noticeText && setDisplayedNoticeText(noticeText);
+    !noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
 
   var handleTextareaScroll = function handleTextareaScroll() {
@@ -332,7 +334,7 @@ var TextField = function TextField(_ref) {
     onFocus: handleFocus,
     onKeyUp: onKeyUp,
     maxLength: maxLength,
-    placeholder: actualPlaceholder,
+    placeholder: hidePlaceholder ? ' ' : actualPlaceholder,
     required: required,
     inputMode: inputMode
   });
@@ -469,13 +471,15 @@ var TextField = function TextField(_ref) {
     className: cn('resizer'),
     ref: resizerRef
   }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrap')
+    className: cn('field-bottom-wrapper', {
+      filled: !!currentNoticeText || !!symbolCounter
+    })
   }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('notice-text', {
       active: !!noticeText
     }),
     onTransitionEnd: handleNoticeTransitionEnd
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice)), displayedNoticeText), symbolCounter && /*#__PURE__*/React.createElement("span", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice)), currentNoticeText), symbolCounter && /*#__PURE__*/React.createElement("span", {
     className: cn('counter', {
       error: isMaxLimitExceeded
     })
@@ -494,6 +498,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.0.0-beta.8",
+  "version": "4.0.1",
   "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.0.0-beta.2",
+    "@megafon/ui-icons": "^2.0.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "ba1ae8e1c21ca8905a131d2b02fbfdf6356a5d8a"
+  "gitHead": "0633ca221fdcbf7374dbb325997c58d72afe80d4"
 }