@megafon/ui-core 3.12.0 → 4.0.0-beta.10

package/dist/lib/components/Button/Button.css

@@ -27,7 +27,7 @@
 }
 .mfui-button_size-all_extra-small .mfui-button__inner {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   min-width: 26px;
   height: 26px;
 }
@@ -65,7 +65,7 @@
   }
   .mfui-button_size-wide_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }
@@ -104,7 +104,7 @@
   }
   .mfui-button_size-desktop_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }
@@ -143,7 +143,7 @@
   }
   .mfui-button_size-tablet_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }
@@ -182,7 +182,7 @@
   }
   .mfui-button_size-mobile_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }

package/dist/lib/components/Calendar/components/Day/Day.css

@@ -21,7 +21,7 @@
           user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-day:last-child {
   padding-right: 0;

package/dist/lib/components/Calendar/components/Month/Month.css

@@ -56,7 +56,7 @@
 }
 .mfui-month__weekday {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   width: 20px;
   height: 16px;
   color: var(--content);

package/dist/lib/components/Caption/Caption.css

@@ -0,0 +1,48 @@
+.mfui-caption {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  margin: 0;
+}
+.mfui-caption_variant_normal {
+  font-weight: 400;
+}
+.mfui-caption_variant_medium {
+  font-weight: 600;
+}
+.mfui-caption_space_wide {
+  line-height: 18px;
+}
+.mfui-caption_space_tight {
+  line-height: 14px;
+}
+.mfui-caption_align_left {
+  text-align: left;
+}
+.mfui-caption_align_center {
+  text-align: center;
+}
+.mfui-caption_align_right {
+  text-align: right;
+}
+.mfui-caption_has-margin {
+  margin: 0 0 16px;
+}
+.mfui-caption_color_inherit {
+  color: inherit;
+}
+.mfui-caption_color_default {
+  color: var(--content);
+}
+.mfui-caption_color_gray {
+  color: var(--spbSky3);
+}
+.mfui-caption_color_white {
+  color: var(--stcWhite);
+}
+.mfui-caption_color_green {
+  color: var(--brandGreen);
+}
+.mfui-caption_color_purple {
+  color: var(--brandPurple);
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import './Caption.less';
+declare const COLORS: {
+    readonly INHERIT: "inherit";
+    readonly DEFAULT: "default";
+    readonly GRAY: "gray";
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+declare type ColorType = typeof COLORS[keyof typeof COLORS];
+export interface ICaptionProps {
+    /** Выравнивание по горизонтали */
+    align?: 'left' | 'center' | 'right';
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Начертание шрифта: обычный или полужирный */
+    variant?: 'normal' | 'medium';
+    /** Вертикальный отступ */
+    hasMargin?: boolean;
+    /** Цвет текста */
+    color?: ColorType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Caption: React.FC<ICaptionProps>;
+export default Caption;

package/dist/lib/components/{InputLabel/InputLabel.js → Caption/Caption.js}

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+require("core-js/modules/es.object.values");
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -21,23 +23,49 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var cn = (0, _uiHelpers.cnCreate)('mfui-input-label');
+var COLORS = {
+  INHERIT: 'inherit',
+  DEFAULT: 'default',
+  GRAY: 'gray',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-caption');
 
-var InputLabel = function InputLabel(_ref) {
-  var htmlFor = _ref.htmlFor,
+var Caption = function Caption(_ref) {
+  var align = _ref.align,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+      className = _ref.className,
+      _ref$hasMargin = _ref.hasMargin,
+      hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
       dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    htmlFor: htmlFor,
-    className: cn()
+  return /*#__PURE__*/React.createElement("p", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      align: align,
+      color: color,
+      space: space,
+      variant: variant,
+      'has-margin': hasMargin
+    }, className)
   }), children);
 };
 
-InputLabel.propTypes = {
-  htmlFor: PropTypes.string,
+Caption.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
+  }),
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  space: PropTypes.oneOf(['wide', 'tight']),
+  variant: PropTypes.oneOf(['normal', 'medium']),
+  hasMargin: PropTypes.bool,
+  color: PropTypes.oneOf(Object.values(COLORS))
 };
-var _default = InputLabel;
+var _default = Caption;
 exports["default"] = _default;

package/dist/lib/components/Header/Header.css

@@ -84,6 +84,9 @@
   line-height: 24px;
   font-weight: 500;
 }
+.mfui-header_space_tight.mfui-header_level_h5 {
+  line-height: 18px;
+}
 .mfui-header_margin.mfui-header_level_h5 {
   margin: 24px 0 16px 0;
 }

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

@@ -3,6 +3,8 @@ import './Header.less';
 interface IHeaderProps {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
+    /** Поведение текста при встраивании в широкий или узкий контейнер (только для h5) */
+    space?: 'wide' | 'tight';
     /** Цвет */
     color?: 'default' | 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
     /** Включить отступ */

package/dist/lib/components/Header/Header.js

@@ -27,6 +27,8 @@ var Header = function Header(_ref) {
   var addition = _ref.addition,
       _ref$as = _ref.as,
       level = _ref$as === void 0 ? 'h1' : _ref$as,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
       children = _ref.children,
       className = _ref.className,
       _ref$color = _ref.color,
@@ -37,12 +39,15 @@ var Header = function Header(_ref) {
       margin = _ref.margin,
       onClick = _ref.onClick;
   var ElementType = level;
+  var hasVariousSpaces = level === 'h5';
+  var spaceLevel = hasVariousSpaces && space;
   return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
       margin: margin,
       level: level,
-      'h-align': hAlign
+      'h-align': hAlign,
+      space: spaceLevel
     }, className),
     onClick: onClick
   }), children, addition && /*#__PURE__*/React.createElement("div", {
@@ -53,6 +58,7 @@ var Header = function Header(_ref) {
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
   color: PropTypes.oneOf(['default', 'black', 'white', 'green', 'purple', 'blue', 'inherit']),
+  space: PropTypes.oneOf(['wide', 'tight']),
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),

package/dist/lib/components/Notification/Notification.css

@@ -22,12 +22,16 @@ h5 {
   display: flex;
 }
 .mfui-notification__title {
-  margin-bottom: 8px;
+  display: block;
+  margin-bottom: 4px;
   color: var(--content);
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 18px;
 }
 @media screen and (min-width: 1280px) {
   .mfui-notification__title {
-    margin-bottom: 4px;
+    line-height: 24px;
   }
 }
 .mfui-notification__title_close-padding {
@@ -35,7 +39,7 @@ h5 {
 }
 .mfui-notification__text {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   position: relative;
   max-width: 100%;
   margin: 0;
@@ -168,7 +172,7 @@ h5 {
 @media screen and (max-width: 767px) {
   .mfui-notification__link {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
   }
 }
 .mfui-notification__link-arrow,
@@ -209,7 +213,7 @@ h5 {
 @media screen and (max-width: 767px) {
   .mfui-notification__collapse-button {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
   }
 }
 .mfui-notification__collapse_hidden {

package/dist/lib/components/Notification/Notification.js

@@ -25,8 +25,6 @@ var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
-var _Header = _interopRequireDefault(require("../Header/Header"));
-
 var _TextLink = _interopRequireDefault(require("../TextLink/TextLink"));
 
 var _Tile = _interopRequireDefault(require("../Tile/Tile"));
@@ -325,13 +323,9 @@ var Notification = function Notification(_ref) {
     className: cn('content', [contentClass])
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('text-container')
-  }, title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-    dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
-    },
-    as: "h5",
+  }, title && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
     className: cn('title')
-  }, title), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+  }), title), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     ref: wrapTextRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {

package/dist/lib/components/Paragraph/Paragraph.css

@@ -1,5 +1,7 @@
 .mfui-paragraph {
   font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
   margin: 0;
   font-weight: 400;
 }
@@ -12,13 +14,11 @@
 .mfui-paragraph_align_right {
   text-align: right;
 }
-.mfui-paragraph_size_regular {
-  font-size: 15px;
+.mfui-paragraph_space_wide {
   line-height: 24px;
 }
-.mfui-paragraph_size_small {
-  font-size: 12px;
-  line-height: 16px;
+.mfui-paragraph_space_tight {
+  line-height: 18px;
 }
 .mfui-paragraph_has-margin {
   margin: 0 0 16px;
@@ -29,6 +29,9 @@
 .mfui-paragraph_color_default {
   color: var(--content);
 }
+.mfui-paragraph_color_gray {
+  color: var(--spbSky3);
+}
 .mfui-paragraph_color_white {
   color: var(--stcWhite);
 }

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

@@ -3,6 +3,7 @@ import './Paragraph.less';
 declare const COLORS: {
     readonly INHERIT: "inherit";
     readonly DEFAULT: "default";
+    readonly GRAY: "gray";
     readonly WHITE: "white";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
@@ -11,9 +12,9 @@ declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
     /** Выравнивание по горизонтали */
     align?: 'left' | 'center' | 'right';
-    /** Размер шрифта */
-    size?: 'regular' | 'small';
-    /** Вертикальный отступ (включен по умолчанию) */
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Вертикальный отступ */
     hasMargin?: boolean;
     /** Цвет текста */
     color?: ColorType;

package/dist/lib/components/Paragraph/Paragraph.js

@@ -26,6 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var COLORS = {
   INHERIT: 'inherit',
   DEFAULT: 'default',
+  GRAY: 'gray',
   WHITE: 'white',
   GREEN: 'green',
   PURPLE: 'purple'
@@ -33,11 +34,11 @@ var COLORS = {
 var cn = (0, _uiHelpers.cnCreate)('mfui-paragraph');
 
 var Paragraph = function Paragraph(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'regular' : _ref$size,
-      align = _ref.align,
+  var align = _ref.align,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
@@ -45,9 +46,9 @@ var Paragraph = function Paragraph(_ref) {
       children = _ref.children;
   return /*#__PURE__*/React.createElement("p", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
-      size: size,
       align: align,
       color: color,
+      space: space,
       'has-margin': hasMargin
     }, className)
   }), children);
@@ -58,7 +59,7 @@ Paragraph.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   align: PropTypes.oneOf(['left', 'center', 'right']),
-  size: PropTypes.oneOf(['regular', 'small']),
+  space: PropTypes.oneOf(['wide', 'tight']),
   hasMargin: PropTypes.bool,
   color: PropTypes.oneOf(Object.values(COLORS))
 };

package/dist/lib/components/RadioButton/RadioButton.css

@@ -60,7 +60,7 @@
 }
 .mfui-radio-button__text_size_small {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-radio-button__text_size_medium {
   font-size: 15px;

package/dist/lib/components/Search/Search.css

@@ -1,11 +1,37 @@
+@-webkit-keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
 .mfui-search {
-  font-family: inherit;
-  font-size: 15px;
-  line-height: 24px;
   position: relative;
   z-index: auto;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   min-height: 40px;
   color: var(--content);
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
 }
 .mfui-search__require-mark {
   margin-left: 1px;
@@ -22,20 +48,106 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 100%;
-  height: 48px;
-  padding: 0 16px 0 20px;
+  height: 60px;
+  padding: 0 16px 0 16px;
   border: 1px solid var(--spbSky2);
+  border-radius: 12px;
   background-color: var(--base);
   outline: none;
   cursor: pointer;
+  -webkit-transition: border-color 0.3s;
+  transition: border-color 0.3s;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
+.mfui-search__control:not(.mfui-search__control_success):not(.mfui-search__control_error):hover {
+  border-color: var(--content);
+}
+.mfui-search__control_success {
+  border-color: var(--brandGreen);
+}
 .mfui-search__control_error {
   border-color: var(--fury);
 }
+.mfui-search__search-wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  cursor: text;
+}
+.mfui-search__search-wrapper_labeled {
+  padding-top: 22px;
+}
+.mfui-search__label {
+  position: absolute;
+  top: 17px;
+  z-index: 1;
+  display: block;
+  overflow: auto;
+  color: var(--spbSky3);
+  -webkit-transition: top 0.5s, -webkit-transform 0.5s;
+  transition: top 0.5s, -webkit-transform 0.5s;
+  transition: transform 0.5s, top 0.5s;
+  transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
+  pointer-events: none;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-search__search-field::-webkit-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field:-moz-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field:-ms-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field::-moz-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field::-ms-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field::placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-wrapper_labeled .mfui-search__search-field:focus::-webkit-input-placeholder {
+  opacity: 1;
+}
+.mfui-search__search-wrapper_labeled .mfui-search__search-field:focus:-moz-placeholder {
+  opacity: 1;
+}
+.mfui-search__search-wrapper_labeled .mfui-search__search-field:focus:-ms-input-placeholder {
+  opacity: 1;
+}
+.mfui-search__search-field_filled + .mfui-search__label,
+.mfui-search__search-field:focus + .mfui-search__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-search__search-field {
   position: relative;
   z-index: 1;
@@ -44,6 +156,7 @@
           flex-grow: 1;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  width: 100%;
   height: 100%;
   padding: 0;
   border: none;
@@ -73,9 +186,10 @@
   left: -1px;
   z-index: 0;
   display: none;
+  border-radius: 12px;
   background-color: var(--base);
-  -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 .mfui-search__icon {
   display: block;
@@ -105,12 +219,13 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   max-height: 368px;
-  padding: 12px 0;
+  padding: 16px;
   overflow-y: auto;
 }
 .mfui-search__list-item {
   font-family: inherit;
   padding: 8px 32px;
+  border-radius: 16px;
   background-color: var(--base);
   cursor: pointer;
 }
@@ -141,7 +256,12 @@
 }
 .mfui-search_open .mfui-search__list {
   display: block;
-  border-color: var(--content);
+  -webkit-animation-name: listAppear;
+          animation-name: listAppear;
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
 }
 .mfui-search_open {
   z-index: 12;

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

@@ -24,6 +24,8 @@ export interface ISearchProps {
     value?: string;
     /** Заголовок поля */
     label?: string;
+    /** HTML идентификатор поля поиска */
+    searchId?: string;
     /** Текст внутри поля по умолчанию */
     placeholder?: string;
     /** Запрещает отрисовку иконки */