@megafon/ui-core 4.0.0-beta.9 → 4.0.2

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

@@ -50,21 +50,26 @@
   background-color: var(--base);
   outline: none;
   cursor: pointer;
+  -webkit-transition: border-color 0.3s;
+  transition: border-color 0.3s;
 }
 .mfui-select__control:after {
   content: '';
   position: absolute;
-  top: 53%;
+  top: 50%;
   right: 27px;
+  z-index: 1;
   display: block;
   border-top: 6px solid;
   border-right: 5px solid transparent;
   border-bottom: none;
   border-left: 5px solid transparent;
   color: var(--brandGreen);
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
   cursor: pointer;
+  -webkit-transition: -webkit-transform 0.6s;
+  transition: -webkit-transform 0.6s;
+  transition: transform 0.6s;
+  transition: transform 0.6s, -webkit-transform 0.6s;
 }
 .mfui-select__combobox {
   font-size: 15px;
@@ -91,7 +96,8 @@
      -moz-appearance: none;
           appearance: none;
 }
-.mfui-select_no-touch .mfui-select__control:hover {
+.mfui-select_no-touch .mfui-select__control:hover,
+.mfui-select_no-touch .mfui-select__control:focus-within {
   border-color: var(--content);
 }
 .mfui-select__title {
@@ -114,8 +120,9 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  overflow: hidden;
 }
-.mfui-select__title-inner_placeholder .mfui-select__title-value {
+.mfui-select__title-inner_hide-value .mfui-select__title-value {
   color: var(--spbSky3);
 }
 .mfui-select__title-inner {
@@ -129,6 +136,8 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   height: 100%;
   padding: 0 45px 0 16px;
   overflow: hidden;
@@ -138,7 +147,7 @@
   content: '';
   position: absolute;
   top: 0;
-  right: 0;
+  right: 40px;
   bottom: 0;
   width: 40px;
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
@@ -155,7 +164,7 @@
   top: 100%;
   right: 0;
   left: 0;
-  z-index: 10;
+  z-index: 11;
   display: none;
   border-radius: 12px;
   background-color: var(--base);
@@ -183,7 +192,8 @@
 }
 .mfui-select__list-item {
   font-family: inherit;
-  padding: 8px 32px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   border-radius: 16px;
   background-color: var(--base);
   cursor: pointer;
@@ -191,6 +201,14 @@
 .mfui-select__list-item_hovered {
   background-color: var(--spbSky0);
 }
+.mfui-select__list-item_paddings_large {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+.mfui-select__list-item_paddings_small {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .mfui-select__item-title {
   position: relative;
   display: -webkit-box;
@@ -202,18 +220,6 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.mfui-select__item-title:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-select__item-title_active {
   font-weight: 600;
@@ -291,19 +297,19 @@
   transition: opacity 0.2s;
 }
 .mfui-select_open .mfui-select__label,
-.mfui-select__title-inner:not(.mfui-select__title-inner_placeholder) .mfui-select__label {
+.mfui-select__title-inner:not(.mfui-select__title-inner_hide-value) .mfui-select__label {
   -webkit-transform: scale(0.8) translate(-12%, -75%);
           transform: scale(0.8) translate(-12%, -75%);
   -webkit-transition-duration: 0.2s, 0.01s;
           transition-duration: 0.2s, 0.01s;
 }
-.mfui-select__combobox:not(.mfui-select__combobox_placeholder) + .mfui-select__label {
+.mfui-select__combobox:not(.mfui-select__combobox_hide-value) + .mfui-select__label {
   -webkit-transform: scale(0.8) translate(-12.5%, -75%);
           transform: scale(0.8) translate(-12.5%, -75%);
   -webkit-transition-duration: 0.2s, 0.01s;
           transition-duration: 0.2s, 0.01s;
 }
-.mfui-select__control_labeled .mfui-select__title-inner_placeholder .mfui-select__title-value {
+.mfui-select__control_labeled .mfui-select__title-inner_hide-value .mfui-select__title-value {
   color: var(--spbSky3);
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
@@ -322,12 +328,21 @@
 .mfui-select__control_labeled .mfui-select__combobox:focus:-ms-input-placeholder {
   opacity: 1;
 }
+.mfui-select__control_labeled .mfui-select__combobox:focus::-moz-placeholder {
+  opacity: 1;
+}
+.mfui-select__control_labeled .mfui-select__combobox:focus::-ms-input-placeholder {
+  opacity: 1;
+}
+.mfui-select__control_labeled .mfui-select__combobox:focus::placeholder {
+  opacity: 1;
+}
 .mfui-select_open {
   z-index: 100;
 }
 .mfui-select_open .mfui-select__control:after {
-  border-top: none;
-  border-bottom: 6px solid;
+  -webkit-transform: rotate(-180deg);
+          transform: rotate(-180deg);
 }
 .mfui-select_open .mfui-select__list {
   display: block;
@@ -341,7 +356,7 @@
 .mfui-select_open .mfui-select__control {
   border-color: var(--content);
 }
-.mfui-select_open .mfui-select__title-inner_placeholder .mfui-select__title-value {
+.mfui-select_open .mfui-select__title-inner_hide-value .mfui-select__title-value {
   opacity: 1;
 }
 .mfui-select_valid .mfui-select__control {

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import './Select.less';
+export declare const SelectItemsPaddings: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -26,6 +30,8 @@ export interface ISelectItem<T extends SelectItemValueType> {
     view?: ElementOrString | ((data: ViewCallbackArguments) => ElementOrString);
     /** Настраиваемое отображение выбранного элемента в поле селекта  */
     selectedView?: JSX.Element | Element | React.ReactElement;
+    /** Размер горизонтальных отступов элемента */
+    paddings?: typeof SelectItemsPaddings[keyof typeof SelectItemsPaddings];
 }
 export interface ISelectProps<T extends SelectItemValueType> {
     /** Тип компонента */
@@ -134,6 +140,7 @@ declare const Select: {
             selectedView: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
             title: PropTypes.Validator<string>;
             value: PropTypes.Validator<string | number>;
+            paddings: PropTypes.Requireable<"small" | "large">;
         }>> | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onOpened: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/components/Select/Select.js

@@ -26,6 +26,10 @@ var UPDATE_ITEMS_LIST = SelectActions.UPDATE_ITEMS_LIST,
     TOGGLE_DROPDOWN = SelectActions.TOGGLE_DROPDOWN,
     UPDATE_SELECT_VALUE = SelectActions.UPDATE_SELECT_VALUE,
     SET_HOVERED_ITEM_INDEX = SelectActions.SET_HOVERED_ITEM_INDEX;
+export var SelectItemsPaddings = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -44,6 +48,7 @@ export 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
 
 var cn = cnCreate('mfui-select');
 
@@ -350,7 +355,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')
@@ -360,7 +365,7 @@ var Select = function Select(_ref) {
   var renderCombobox = function renderCombobox() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
       className: cn('combobox', {
-        placeholder: inputValue === undefined
+        'hide-value': !inputValue
       }),
       onFocus: handleComboboxFocus,
       onChange: handleChangeCombobox,
@@ -380,11 +385,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", _extends({}, 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,
@@ -459,7 +467,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/es/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/es/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/es/components/Tabs/Tabs.js

@@ -22,7 +22,7 @@ var ArrowLeft = function ArrowLeft(props) {
   }));
 };
 
-export var TabHAlign = {
+export var TabAlign = {
   LEFT: 'left',
   CENTER: 'center'
 };
@@ -50,8 +50,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,
@@ -78,7 +78,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 = _slicedToArray(_React$useState5, 2),
       isEnd = _React$useState6[0],
       setEnd = _React$useState6[1];
@@ -363,13 +363,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
@@ -386,6 +387,7 @@ var Tabs = function Tabs(_ref) {
       beginning: isBeginning,
       end: isEnd
     }, [innerIndentsClass]),
+    watchOverflow: true,
     slidesPerView: "auto",
     initialSlide: currentIndex,
     onSwiper: handleSwiper,
@@ -431,7 +433,7 @@ Tabs.propTypes = {
     next: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   size: PropTypes.oneOf(Object.values(TabSize)),
-  hAlign: PropTypes.oneOf(Object.values(TabHAlign)),
+  align: PropTypes.oneOf(Object.values(TabAlign)),
   autoWidth: PropTypes.bool,
   tabColorTheme: PropTypes.oneOf(Object.values(TabColorTheme)),
   sticky: PropTypes.bool,

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

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,
@@ -144,8 +146,8 @@ var TextField = function TextField(_ref) {
 
   var _useState9 = useState(noticeText),
       _useState10 = _slicedToArray(_useState9, 2),
-      displayedNoticeText = _useState10[0],
-      setDisplayedNoticeText = _useState10[1];
+      currentNoticeText = _useState10[0],
+      setCurrentNoticeText = _useState10[1];
 
   var _useState11 = useState(false),
       _useState12 = _slicedToArray(_useState11, 2),
@@ -167,8 +169,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];
@@ -186,7 +188,7 @@ var TextField = function TextField(_ref) {
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit, isControlled]);
   useEffect(function () {
-    noticeText && setDisplayedNoticeText(noticeText);
+    noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
   useEffect(function () {
     if (!resizerRef.current || textarea !== TextareaTypes.FLEXIBLE) {
@@ -255,7 +257,7 @@ var TextField = function TextField(_ref) {
   };
 
   var handleNoticeTransitionEnd = useCallback(function () {
-    !noticeText && setDisplayedNoticeText(noticeText);
+    !noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
 
   var handleTextareaScroll = function handleTextareaScroll() {
@@ -305,7 +307,7 @@ var TextField = function TextField(_ref) {
     onFocus: handleFocus,
     onKeyUp: onKeyUp,
     maxLength: maxLength,
-    placeholder: actualPlaceholder,
+    placeholder: hidePlaceholder ? ' ' : actualPlaceholder,
     required: required,
     inputMode: inputMode
   });
@@ -445,13 +447,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", _extends({
     className: cn('notice-text', {
       active: !!noticeText
     }),
     onTransitionEnd: handleNoticeTransitionEnd
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice)), displayedNoticeText), symbolCounter && /*#__PURE__*/React.createElement("span", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice)), currentNoticeText), symbolCounter && /*#__PURE__*/React.createElement("span", {
     className: cn('counter', {
       error: isMaxLimitExceeded
     })
@@ -470,6 +474,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/dist/lib/components/Accordion/Accordion.css

@@ -12,7 +12,7 @@
 }
 .mfui-accordion__title-wrap {
   position: relative;
-  padding: 20px 20px 44px 16px;
+  padding: 24px 44px 24px 16px;
   border-radius: 12px;
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
@@ -20,14 +20,16 @@
 }
 @media screen and (min-width: 768px) {
   .mfui-accordion__title-wrap {
-    padding: 20px 56px 20px 24px;
+    padding: 24px 56px 24px 24px;
   }
 }
 .mfui-accordion__title-wrap:hover {
   background-color: var(--spbSky1);
 }
-.mfui-accordion__title-wrap:focus {
-  background-color: inherit;
+@media screen and (max-width: 1023px) {
+  .mfui-accordion__title-wrap:focus {
+    background-color: inherit;
+  }
 }
 .mfui-accordion__icon-box {
   position: absolute;

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css

@@ -27,6 +27,10 @@
 .mfui-promo-badge_type_user-choice {
   background-color: var(--reflexBlue);
 }
+.mfui-promo-badge_type_interests {
+  background-color: var(--brandPurple20);
+  color: var(--brandPurple);
+}
 .mfui-promo-badge__text {
   font-family: inherit;
   font-size: 12px;

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.d.ts

@@ -6,6 +6,7 @@ export declare const PromoBadgeTypes: {
     readonly VIP: "vip";
     readonly POPULAR: "popular";
     readonly USER_CHOICE: "user-choice";
+    readonly INTERESTS: "interests";
 };
 declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
 export interface IPromoBadgeProps {

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.js

@@ -28,7 +28,8 @@ var PromoBadgeTypes = {
   NEW: 'new',
   VIP: 'vip',
   POPULAR: 'popular',
-  USER_CHOICE: 'user-choice'
+  USER_CHOICE: 'user-choice',
+  INTERESTS: 'interests'
 };
 exports.PromoBadgeTypes = PromoBadgeTypes;
 var cn = (0, _uiHelpers.cnCreate)('mfui-promo-badge');

package/dist/lib/components/Banner/Banner.css

@@ -36,6 +36,9 @@
     height: 400px;
   }
 }
+.mfui-banner_auto-height .mfui-banner__slide {
+  height: auto;
+}
 @media screen and (min-width: 1024px) {
   .mfui-banner .swiper-slide-visible {
     opacity: 1;

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

@@ -36,6 +36,8 @@ export interface IBannerProps {
     pauseOnHover?: boolean;
     /** Цветовая тема навигации */
     navTheme?: NavThemeType;
+    /** Автоматическая высота слайдов */
+    autoHeight?: boolean;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
     onNextClick?: (index: number) => void;
     /** Обработчик клика по стрелке "назад" (должен быть обернут в useCallback) */