@megafon/ui-core 2.0.0-beta.96 → 2.0.0

package/dist/es/components/Search/Search.js

@@ -2,102 +2,117 @@ import "core-js/modules/es.array.map";
 import "core-js/modules/es.regexp.constructor";
 import "core-js/modules/es.regexp.exec";
 import "core-js/modules/es.regexp.to-string";
+import "core-js/modules/es.string.replace";
 import "core-js/modules/es.string.split";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { useCallback, useState, useRef, useEffect } from 'react';
+import React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
-import cnCreate from "../../utils/cnCreate";
+import * as PropTypes from 'prop-types';
+import InputLabel from "../InputLabel/InputLabel";
 import "./Search.css";
 
 var SearchIcon = function SearchIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
+    viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M17 9a7 7 0 10-3.32 6l2.49 3 .77-.64-2.47-3A7 7 0 0017 9zM4 9a6 6 0 116 6 6 6 0 01-6-6z"
+    d: "M16 24a9.94 9.94 0 005.7-1.8l4.83 5.8L28 26.72l-4.78-5.82A10 10 0 1016 24zm0-18a8 8 0 11-8 8 8 8 0 018-8z"
   }));
 };
 
-var cn = cnCreate('mfui-beta-search');
+export var Verification = {
+  VALID: 'valid',
+  ERROR: 'error'
+};
+var cn = cnCreate('mfui-search');
 
 var Search = function Search(_ref) {
   var _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value,
+      label = _ref.label,
       placeholder = _ref.placeholder,
       hideIcon = _ref.hideIcon,
       _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$changeDelay = _ref.changeDelay,
       changeDelay = _ref$changeDelay === void 0 ? 250 : _ref$changeDelay,
+      verification = _ref.verification,
+      disabled = _ref.disabled,
+      required = _ref.required,
+      noticeText = _ref.noticeText,
       className = _ref.className,
+      classes = _ref.classes,
       onChange = _ref.onChange,
-      onSubmit = _ref.onSubmit;
+      onSubmit = _ref.onSubmit,
+      onBlur = _ref.onBlur;
 
-  var _useState = useState(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchQuery = _useState2[0],
-      setSearchQuery = _useState2[1];
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      searchQuery = _React$useState2[0],
+      setSearchQuery = _React$useState2[1];
 
-  var _useState3 = useState(-1),
-      _useState4 = _slicedToArray(_useState3, 2),
-      activeIndex = _useState4[0],
-      setActiveIndex = _useState4[1];
+  var _React$useState3 = React.useState(-1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeIndex = _React$useState4[0],
+      setActiveIndex = _React$useState4[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isFocused = _useState6[0],
-      setFocus = _useState6[1];
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isFocused = _React$useState6[0],
+      setFocus = _React$useState6[1];
 
-  var debouncedOnChange = useRef(debounce(function (inputValue) {
+  var debouncedOnChange = React.useRef(debounce(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
-  React.useEffect(function () {
-    debouncedOnChange.current = debounce(function (inputValue) {
-      return onChange && onChange(inputValue);
-    }, changeDelay);
-  }, [onChange]);
-  useEffect(function () {
-    return setSearchQuery(value);
-  }, [value, setSearchQuery]);
-
-  var handleChange = function handleChange(e) {
+  var handleChange = React.useCallback(function (e) {
     var _e$target$value = e.target.value,
         inputValue = _e$target$value === void 0 ? '' : _e$target$value;
     setSearchQuery(inputValue);
     setActiveIndex(-1);
-    changeDelay === 0 ? onChange && onChange(inputValue) : debouncedOnChange.current(inputValue);
-  };
 
-  var handleHoverItem = useCallback(function (index) {
-    return function (_e) {
+    if (changeDelay === 0) {
+      onChange && onChange(inputValue);
+    } else {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      debouncedOnChange.current(inputValue);
+    }
+  }, [changeDelay, onChange]);
+  var handleHoverItem = React.useCallback(function (index) {
+    return function () {
       setActiveIndex(index);
     };
-  }, [setActiveIndex]);
-  var handleSearchSubmit = useCallback(function () {
+  }, []);
+  var handleSearchSubmit = React.useCallback(function () {
     onSubmit && searchQuery && onSubmit(searchQuery);
   }, [searchQuery, onSubmit]);
-  var handleItemSubmit = useCallback(function (index) {
-    var chosenValue = items[index];
+  var handleItemSubmit = React.useCallback(function (index) {
+    if (disabled) {
+      return;
+    }
+
+    var chosenValue = items[index].value;
     onSubmit && onSubmit(chosenValue);
-  }, [onSubmit, items]);
-  var handleSelectSubmit = useCallback(function () {
-    return function (_e) {
+  }, [disabled, items, onSubmit]);
+  var handleSelectSubmit = React.useCallback(function () {
+    return function () {
       handleItemSubmit(activeIndex);
     };
   }, [handleItemSubmit, activeIndex]);
-  var handleFieldFocusToggle = useCallback(function () {
-    setFocus(function (focus) {
-      return !focus;
-    });
-  }, [setFocus]);
-  var handleClick = useCallback(function () {
+  var handleFocus = React.useCallback(function () {
+    setFocus(true);
+  }, []);
+  var handleBlur = React.useCallback(function (e) {
+    setFocus(false);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  var handleClick = React.useCallback(function () {
     if (activeIndex >= 0) {
       setActiveIndex(-1);
     }
-  }, [activeIndex, setActiveIndex]);
-  var handleKeyDown = useCallback(function (e) {
+  }, [activeIndex]);
+  var handleKeyDown = React.useCallback(function (e) {
     if (e.key === 'ArrowDown' && activeIndex < items.length - 1) {
       setActiveIndex(function (index) {
         return index + 1;
@@ -115,10 +130,26 @@ var Search = function Search(_ref) {
     }
 
     return false;
-  }, [activeIndex, setActiveIndex, handleSearchSubmit, handleItemSubmit]);
+  }, [activeIndex, items, handleItemSubmit, handleSearchSubmit]);
+  React.useEffect(function () {
+    return setSearchQuery(value);
+  }, [value]);
+  React.useEffect(function () {
+    debouncedOnChange.current = debounce(function (inputValue) {
+      return onChange && onChange(inputValue);
+    }, changeDelay);
+  }, [changeDelay, onChange]);
+  React.useEffect(function () {
+    if (isFocused && disabled) {
+      setFocus(false);
+    }
+  }, [disabled, isFocused]);
 
   var highlightString = function highlightString(title) {
-    var stringFragments = title.split(RegExp("(".concat(searchQuery, ")"), 'ig'));
+    var query = searchQuery.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
+      return "\\".concat(w);
+    });
+    var stringFragments = title.split(RegExp("(".concat(query, ")"), 'ig'));
     return /*#__PURE__*/React.createElement(React.Fragment, null, stringFragments.map(function (fragment, i) {
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: i
@@ -130,31 +161,39 @@ var Search = function Search(_ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
-      open: isFocused
+      open: isFocused,
+      disabled: disabled
     }, [className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('control')
+  }, label && /*#__PURE__*/React.createElement(InputLabel, null, label, required && /*#__PURE__*/React.createElement("span", {
+    className: cn('require-mark')
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: cn('control', {
+      error: verification === Verification.ERROR
+    }, [classes === null || classes === void 0 ? void 0 : classes.control])
   }, /*#__PURE__*/React.createElement("input", {
     className: cn('search-field'),
     placeholder: placeholder,
     value: searchQuery,
     onChange: handleChange,
-    onFocus: handleFieldFocusToggle,
-    onBlur: handleFieldFocusToggle,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     onClick: handleClick,
+    disabled: disabled,
     type: "text",
     autoComplete: "off"
   }), !hideIcon && /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box'),
     onClick: handleSearchSubmit
   }, /*#__PURE__*/React.createElement(SearchIcon, {
-    className: cn('icon')
-  }))), items && !!items.length && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon', [classes === null || classes === void 0 ? void 0 : classes.icon])
+  })), !!items.length && /*#__PURE__*/React.createElement("div", {
     className: cn('list')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('list-inner')
-  }, items.map(function (title, i) {
+  }, items.map(function (_ref2, i) {
+    var itemValue = _ref2.value,
+        searchView = _ref2.searchView;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('list-item', {
         active: activeIndex === i
@@ -163,18 +202,38 @@ var Search = function Search(_ref) {
       onMouseEnter: handleHoverItem(i),
       key: i
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn('item-title')
-    }, highlightString(title)));
-  }))));
+      className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
+    }, searchView || highlightString(itemValue)));
+  })))), noticeText && /*#__PURE__*/React.createElement("div", {
+    className: cn('notice', {
+      error: verification === Verification.ERROR,
+      success: verification === Verification.VALID
+    })
+  }, noticeText));
 };
 
 Search.propTypes = {
   value: PropTypes.string,
+  label: PropTypes.string,
   placeholder: PropTypes.string,
   hideIcon: PropTypes.bool,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    searchView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+  }).isRequired),
   changeDelay: PropTypes.number,
-  items: PropTypes.arrayOf(PropTypes.string.isRequired),
+  verification: PropTypes.oneOf(['valid', 'error']),
+  noticeText: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    listItemTitle: PropTypes.string,
+    control: PropTypes.string,
+    icon: PropTypes.string
+  }),
   onChange: PropTypes.func,
-  onSubmit: PropTypes.func
+  onSubmit: PropTypes.func,
+  onBlur: PropTypes.func
 };
 export default Search;

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

@@ -5,84 +5,106 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-select {
+.mfui-select {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
-  color: #333333;
-  min-height: 40px;
   position: relative;
   z-index: 1;
+  min-height: 40px;
+  color: #333333;
 }
-.mfui-beta-select__inner {
+.mfui-select__inner {
   position: relative;
 }
-.mfui-beta-select__control {
-  width: 100%;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-select__control {
   position: relative;
   z-index: 11;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
   height: 48px;
-  cursor: pointer;
   border: 1px solid #D8D8D8;
   background-color: #FFFFFF;
   outline: none;
+  cursor: pointer;
 }
-.mfui-beta-select__combobox {
+.mfui-select__control:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 27px;
+  display: block;
+  border-top: 6px solid;
+  border-right: 5px solid transparent;
+  border-bottom: none;
+  border-left: 5px solid transparent;
+  color: #333333;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  cursor: pointer;
+}
+.mfui-select__combobox {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  cursor: text;
   position: relative;
   z-index: 1;
-  background-color: transparent;
-  border: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   width: 100%;
   height: 100%;
   padding: 0 45px 0 20px;
+  border: none;
+  border-radius: 0;
+  overflow: auto;
+  background-color: transparent;
   outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  cursor: text;
   opacity: 1;
-  border-radius: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  overflow: auto;
 }
-.mfui-beta-select_no-touch .mfui-beta-select__control:hover {
+.mfui-select_no-touch .mfui-select__control:hover {
   border-color: #333333;
 }
-.mfui-beta-select__title {
+.mfui-select__title {
+  position: relative;
+  z-index: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  position: relative;
-  z-index: 1;
   width: 100%;
   height: 100%;
   outline: none;
 }
-.mfui-beta-select__title_placeholder {
+.mfui-select__title_placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select__title-inner {
+.mfui-select__title-inner {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  position: relative;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100%;
+  margin: 0 45px 0 20px;
   overflow: hidden;
   white-space: nowrap;
-  margin: 0 45px 0 20px;
 }
-.mfui-beta-select__title-inner:after {
+.mfui-select__title-inner:after {
   content: '';
   position: absolute;
   top: 0;
@@ -92,92 +114,66 @@ 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-select__arrow-wrap {
-  cursor: pointer;
-  height: 100%;
-  width: 25px;
-  position: absolute;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  top: 0;
-  right: 20px;
-  z-index: 11;
-  outline: none;
-}
-.mfui-beta-select__arrow {
-  color: #333333;
-  border-bottom: none;
-  border-top: 6px solid;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-.mfui-beta-select__require-mark {
+.mfui-select__require-mark {
+  margin-left: 1px;
+  color: #F62434;
   font-size: 20px;
   line-height: 0;
-  color: #F62434;
-  margin-left: 1px;
 }
-.mfui-beta-select input::-webkit-input-placeholder {
+.mfui-select input::-webkit-input-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select input::-moz-placeholder {
+.mfui-select input::-moz-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select input:-moz-placeholder {
+.mfui-select input:-moz-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select input:-ms-input-placeholder {
+.mfui-select input:-ms-input-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select__list {
-  display: none;
+.mfui-select__list {
   position: absolute;
-  z-index: 10;
   top: 100%;
   right: 0;
   left: 0;
+  z-index: 10;
+  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-select__list-inner {
-  padding: 12px 0;
+.mfui-select__list-inner {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   max-height: 368px;
+  padding: 12px 0;
   overflow-y: auto;
 }
-.mfui-beta-select__list-item {
+.mfui-select__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  cursor: pointer;
   background-color: #FFFFFF;
+  cursor: pointer;
 }
-.mfui-beta-select__list-item_active {
+.mfui-select__list-item_active {
   background-color: #F6F6F6;
 }
-.mfui-beta-select__item-title {
+.mfui-select__item-title {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   overflow: hidden;
   white-space: nowrap;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  position: relative;
 }
-.mfui-beta-select__item-title:after {
+.mfui-select__item-title:after {
   content: '';
   position: absolute;
   top: 0;
@@ -187,57 +183,57 @@ 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-select__list-item_active .mfui-beta-select__item-title:after {
+.mfui-select__list-item_active .mfui-select__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-select__not-found {
+.mfui-select__not-found {
   padding: 8px 32px;
   opacity: 0.5;
 }
-.mfui-beta-select__text {
+.mfui-select__text {
+  margin-top: 4px;
   font-size: 12px;
   line-height: 16px;
-  margin-top: 4px;
 }
-.mfui-beta-select__highlighted-fragment {
+.mfui-select__highlighted-fragment {
   font-weight: bold;
 }
-.mfui-beta-select_open {
+.mfui-select_open {
   z-index: 100;
 }
-.mfui-beta-select_open .mfui-beta-select__arrow {
+.mfui-select_open .mfui-select__control:after {
   border-top: none;
   border-bottom: 6px solid;
 }
-.mfui-beta-select_open .mfui-beta-select__list {
+.mfui-select_open .mfui-select__list {
   display: block;
   border-color: #333333;
 }
-.mfui-beta-select_open .mfui-beta-select__control {
+.mfui-select_open .mfui-select__control {
   border-color: #333333;
 }
-.mfui-beta-select_valid .mfui-beta-select__control {
+.mfui-select_valid .mfui-select__control {
   border-color: #00B956 !important;
 }
-.mfui-beta-select_valid .mfui-beta-select__text {
+.mfui-select_valid .mfui-select__text {
   color: #00B956;
 }
-.mfui-beta-select_error .mfui-beta-select__control {
+.mfui-select_error .mfui-select__control {
   border-color: #F62434 !important;
 }
-.mfui-beta-select_error .mfui-beta-select__text {
+.mfui-select_error .mfui-select__text {
   color: #F62434;
 }
-.mfui-beta-select_disabled .mfui-beta-select__control {
-  background-color: #EDEDED;
+.mfui-select_disabled .mfui-select__control {
   border-color: #EDEDED;
-  pointer-events: none;
+  background-color: #EDEDED;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  pointer-events: none;
 }
-.mfui-beta-select_disabled .mfui-beta-select__title-inner:after {
+.mfui-select_disabled .mfui-select__title-inner:after {
   display: none;
 }