@megafon/ui-core 2.0.0-beta.97 → 2.1.0

package/dist/es/components/RadioButton/RadioButton.css

@@ -5,13 +5,13 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-radio-button__input {
-  opacity: 0;
+.mfui-radio-button__input {
   position: absolute;
-  left: 0;
   top: 0;
+  left: 0;
+  opacity: 0;
 }
-.mfui-beta-radio-button__label {
+.mfui-radio-button__label {
   position: relative;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -19,58 +19,57 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  cursor: pointer;
   outline: none;
+  cursor: pointer;
 }
-.mfui-beta-radio-button__label_disabled {
+.mfui-radio-button__label_disabled {
   cursor: default;
 }
-.mfui-beta-radio-button__custom-input {
+.mfui-radio-button__custom-input {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
   width: 32px;
   height: 32px;
   margin-right: 8px;
 }
-.mfui-beta-radio-button__custom-input:before {
+.mfui-radio-button__custom-input:before {
   content: '';
   display: block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 20px;
   height: 20px;
-  border-radius: 50%;
   border: 2px solid #D8D8D8;
+  border-radius: 50%;
   background-color: #FFFFFF;
 }
-.mfui-beta-radio-button__input:checked + .mfui-beta-radio-button__custom-input:before {
+.mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
   border: 6px solid #00B956;
 }
-.mfui-beta-radio-button__label:hover .mfui-beta-radio-button__custom-input:before {
+.mfui-radio-button__label:hover .mfui-radio-button__custom-input:before {
   border-color: #10E272;
 }
-.mfui-beta-radio-button__label:active .mfui-beta-radio-button__custom-input:before,
-.mfui-beta-radio-button__label:active .mfui-beta-radio-button__custom-input:before {
+.mfui-radio-button__label:active .mfui-radio-button__custom-input:before {
   border-color: #404D46;
 }
-.mfui-beta-radio-button__label_disabled .mfui-beta-radio-button__custom-input:before {
-  background-color: #EDEDED !important;
+.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before {
   border-color: #D8D8D8 !important;
+  background-color: #EDEDED !important;
 }
-.mfui-beta-radio-button__text_size_small {
+.mfui-radio-button__text_size_small {
   font-size: 12px;
   line-height: 16px;
 }
-.mfui-beta-radio-button__text_size_medium {
+.mfui-radio-button__text_size_medium {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;

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

@@ -9,11 +9,18 @@ export interface IRadioButtonProps {
     /** Размер текста лейбла */
     textSize?: 'small' | 'medium';
     /** Управление возможностью взаимодействия с компонентом */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /** Управление состоянием вкл/выкл компонента */
     isChecked?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string | string[];
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        label?: string;
+        customInput?: string;
+        labelText?: string;
+    };
     children?: React.ReactNode;
     /** Обработчик изменения значения 'value' */
     onChange?: (value: string) => void;
@@ -25,9 +32,15 @@ declare class RadioButton extends React.Component<IRadioButtonProps> {
         value: PropTypes.Validator<string>;
         name: PropTypes.Requireable<string>;
         textSize: PropTypes.Requireable<string>;
-        isDisabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
         isChecked: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
+        classes: PropTypes.Requireable<PropTypes.InferProps<{
+            root: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+            customInput: PropTypes.Requireable<string>;
+            labelText: PropTypes.Requireable<string>;
+        }>>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         inputRef: PropTypes.Requireable<any>;

package/dist/es/components/RadioButton/RadioButton.js

@@ -1,9 +1,12 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.array.is-array";
 import "core-js/modules/es.date.to-string";
 import "core-js/modules/es.function.name";
 import "core-js/modules/es.object.to-string";
 import "core-js/modules/es.reflect.construct";
 import "core-js/modules/es.regexp.to-string";
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -15,10 +18,10 @@ function _createSuper(Derived) { return function () { var Super = _getPrototypeO
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
 import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./RadioButton.css";
-import cnCreate from "../../utils/cnCreate";
-var cn = cnCreate('mfui-beta-radio-button');
+var cn = cnCreate('mfui-radio-button');
 
 var RadioButton = /*#__PURE__*/function (_React$Component) {
   _inherits(RadioButton, _React$Component);
@@ -47,35 +50,39 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props2 = this.props,
           isChecked = _this$props2.isChecked,
-          isDisabled = _this$props2.isDisabled,
+          disabled = _this$props2.disabled,
           name = _this$props2.name,
           value = _this$props2.value,
           textSize = _this$props2.textSize,
           children = _this$props2.children,
-          inputRef = _this$props2.inputRef;
+          inputRef = _this$props2.inputRef,
+          className = _this$props2.className,
+          _this$props2$classes = _this$props2.classes,
+          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes;
       var checkedProp = isChecked !== undefined ? {
         checked: isChecked
       } : {};
+      var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
       return /*#__PURE__*/React.createElement("div", {
-        className: cn()
+        className: cn(rootClassNames)
       }, /*#__PURE__*/React.createElement("label", {
         className: cn('label', {
-          disabled: isDisabled
-        })
+          disabled: disabled
+        }, classes.label)
       }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, {
         className: cn('input'),
         type: "radio",
         name: name,
         value: value,
         onChange: this.handleChange,
-        disabled: isDisabled,
+        disabled: disabled,
         ref: inputRef
       })), /*#__PURE__*/React.createElement("div", {
-        className: cn('custom-input')
+        className: cn('custom-input', classes.customInput)
       }), children && /*#__PURE__*/React.createElement("div", {
         className: cn('text', {
-          'size': textSize
-        })
+          size: textSize
+        }, classes.labelText)
       }, children)));
     }
   }]);
@@ -87,9 +94,15 @@ RadioButton.propTypes = {
   value: PropTypes.string.isRequired,
   name: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),
-  isDisabled: PropTypes.bool,
+  disabled: PropTypes.bool,
   isChecked: PropTypes.bool,
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    label: PropTypes.string,
+    customInput: PropTypes.string,
+    labelText: PropTypes.string
+  }),
   children: PropTypes.node,
   onChange: PropTypes.func,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
@@ -98,6 +111,6 @@ RadioButton.propTypes = {
 };
 RadioButton.defaultProps = {
   textSize: 'medium',
-  isDisabled: false
+  disabled: false
 };
 export default RadioButton;

package/dist/es/components/Search/Search.css

@@ -5,113 +5,132 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-search {
+.mfui-search {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   position: relative;
   z-index: auto;
-  color: #333333;
   min-height: 40px;
+  color: #333333;
 }
-.mfui-beta-search__control {
+.mfui-search__require-mark {
+  margin-left: 1px;
+  color: #F62434;
+  font-size: 20px;
+  line-height: 0;
+}
+.mfui-search__control {
+  position: relative;
+  z-index: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  position: relative;
-  z-index: 1;
+  width: 100%;
   height: 48px;
-  cursor: pointer;
+  padding: 0 16px 0 20px;
   border: 1px solid #D8D8D8;
   background-color: #FFFFFF;
   outline: none;
-  padding: 0 20px;
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.mfui-beta-search__search-field {
+.mfui-search__control_error {
+  border-color: #F62434;
+}
+.mfui-search__search-field {
+  position: relative;
+  z-index: 1;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  height: 100%;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  overflow: auto;
   font-family: inherit;
   line-height: 25px;
-  position: relative;
-  z-index: 1;
   background-color: transparent;
-  border: none;
-  height: 100%;
-  padding: 0;
   outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   opacity: 1;
-  border-radius: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  overflow: auto;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-search__search-field {
+  .mfui-search__search-field {
     width: 90%;
   }
 }
-.mfui-beta-search__list {
-  display: none;
+.mfui-search__list {
   position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
+  top: calc(100% + 1px);
+  right: -1px;
+  left: -1px;
   z-index: 0;
+  display: none;
   background-color: #FFFFFF;
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
-.mfui-beta-search__icon {
-  min-width: 24px;
-  width: 24px;
+.mfui-search__icon {
+  display: block;
+  width: 32px;
+  height: 32px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   fill: #333333;
 }
-.mfui-beta-search__icon-box {
+.mfui-search__icon-box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   height: 100%;
+  text-align: center;
 }
-.mfui-beta-search__list-inner {
-  overflow: auto;
-  padding: 12px 0;
+.mfui-search__list-inner {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  max-height: 368px;
+  padding: 12px 0;
+  overflow-y: auto;
 }
-.mfui-beta-search__list-item {
+.mfui-search__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  cursor: pointer;
   background-color: #FFFFFF;
+  cursor: pointer;
 }
-.mfui-beta-search__list-item_active {
+.mfui-search__list-item_active {
   background-color: #F6F6F6;
 }
-.mfui-beta-search__item-title {
-  overflow: hidden;
-  white-space: nowrap;
+.mfui-search__item-title {
+  position: relative;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
 }
-.mfui-beta-search__item-title:after {
+.mfui-search__item-title:after {
   content: '';
   position: absolute;
   top: 0;
@@ -121,17 +140,37 @@ h5 {
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
 }
-.mfui-beta-search__list-item_active .mfui-beta-search__item-title:after {
+.mfui-search__list-item_active .mfui-search__item-title:after {
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#F6F6F6));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), #F6F6F6);
 }
-.mfui-beta-search_open .mfui-beta-search__list {
+.mfui-search_open .mfui-search__list {
   display: block;
   border-color: #333333;
 }
-.mfui-beta-search_open {
+.mfui-search_open {
   z-index: 12;
 }
-.mfui-beta-search__highlighted-fragment {
+.mfui-search_disabled .mfui-search__control {
+  border-color: #EDEDED;
+  background-color: #EDEDED;
+  cursor: default;
+  pointer-events: none;
+}
+.mfui-search_disabled .mfui-search__icon {
+  opacity: 0.5;
+}
+.mfui-search__highlighted-fragment {
   font-weight: bold;
 }
+.mfui-search__notice {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 16px;
+}
+.mfui-search__notice_error {
+  color: #F62434;
+}
+.mfui-search__notice_success {
+  color: #00B956;
+}

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

@@ -1,22 +1,52 @@
-import * as React from 'react';
+import React from 'react';
 import './Search.less';
+export declare const Verification: {
+    readonly VALID: "valid";
+    readonly ERROR: "error";
+};
+declare type VerificationType = typeof Verification[keyof typeof Verification];
+declare type ElementOrString = JSX.Element[] | JSX.Element | Element[] | Element;
+export declare type SearchItem = {
+    /** Значение value элемента */
+    value: string;
+    /** Настраиваемое отображение элементов в выпадающем списке */
+    searchView?: ElementOrString;
+};
 export interface ISearchProps {
-    /** Дополнительный класс корневого элемента */
-    className?: string;
     /** Значение */
     value?: string;
+    /** Заголовок поля */
+    label?: string;
     /** Текст внутри поля по умолчанию */
     placeholder?: string;
     /** Запрещает отрисовку иконки */
     hideIcon?: boolean;
-    /** Список строк выпадающего списка */
-    items?: string[];
+    /** Элементы выпадающего списка */
+    items?: SearchItem[];
     /** Использование функции debounce для onChange */
     changeDelay?: number;
+    /** Результат проверки данных */
+    verification?: VerificationType;
+    /** Дополнительный текст под полем. Свойство verification влияет на цвет текста. */
+    noticeText?: string;
+    /** Управление возможностью взаимодействия с компонентом */
+    disabled?: boolean;
+    /** Делает поле обязательным */
+    required?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        listItemTitle?: string;
+        control?: string;
+        icon?: string;
+    };
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */
     onSubmit?: (value: string) => void;
+    /** Обработчик выхода из фокуса */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }
 declare const Search: React.FC<ISearchProps>;
 export default Search;