@megafon/ui-core 2.4.0 → 3.0.0-beta.10

package/dist/es/components/Paragraph/Paragraph.js

@@ -1,27 +1,15 @@
-import "core-js/modules/es.array.concat";
-import "core-js/modules/es.array.includes";
 import "core-js/modules/es.object.values";
-import "core-js/modules/es.string.includes";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Paragraph.css";
 var COLORS = {
-  GREEN: 'green',
-  PURPLE: 'purple',
-  BASE: 'base',
-  SPB_SKY_0: 'spbSky0',
-  SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2',
-  CONTENT: 'content',
-  FULL_BLACK: 'fullBlack',
   INHERIT: 'inherit',
-
-  /** @deprecated */
-  CLEAR_WHITE: 'clearWhite',
-
-  /** @deprecated */
-  FRESH_ASPHALT: 'freshAsphalt'
+  DEFAULT: 'default',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple'
 };
 var cn = cnCreate('mfui-paragraph');
 
@@ -30,43 +18,29 @@ var Paragraph = function Paragraph(_ref) {
       size = _ref$size === void 0 ? 'regular' : _ref$size,
       align = _ref.align,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'freshAsphalt' : _ref$color,
+      color = _ref$color === void 0 ? COLORS.DEFAULT : _ref$color,
       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("p", {
+  return /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
       align: align,
       color: color,
       'has-margin': hasMargin
     }, className)
-  }, children);
+  }), children);
 };
 
 Paragraph.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   align: PropTypes.oneOf(['left', 'center', 'right']),
   size: PropTypes.oneOf(['regular', 'small']),
   hasMargin: PropTypes.bool,
-  color: function color(props, propName, componentName) {
-    var deprecatedBlackValue = COLORS.FRESH_ASPHALT;
-    var deprecatedWhiteValue = COLORS.CLEAR_WHITE;
-    var propValue = props[propName];
-
-    if (propValue && !Object.values(COLORS).includes(propValue)) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n            expected one of [").concat(Object.values(COLORS), "]"));
-    }
-
-    if (propValue && props[propName] === deprecatedBlackValue) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
-    }
-
-    if (propValue && props[propName] === deprecatedWhiteValue) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(COLORS.BASE, "'"));
-    }
-
-    return null;
-  }
+  color: PropTypes.oneOf(Object.values(COLORS))
 };
 export default Paragraph;

package/dist/es/components/Preloader/Preloader.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-preloader {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -106,20 +99,20 @@ h5 {
           animation: scaling 1s linear infinite;
 }
 .mfui-preloader_color_default .mfui-preloader__item_first:before {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-preloader_color_default .mfui-preloader__item_second:before {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   -webkit-animation-delay: 0.166s;
           animation-delay: 0.166s;
 }
 .mfui-preloader_color_default .mfui-preloader__item_third:before {
-  background-color: #731982;
+  background-color: var(--brandPurple);
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
 }
 .mfui-preloader_color_black .mfui-preloader__item:before {
-  background-color: #000000;
+  background-color: var(--stcBlack);
   opacity: 0.35;
   -webkit-animation: opacityScaling 1s linear infinite;
           animation: opacityScaling 1s linear infinite;
@@ -133,7 +126,7 @@ h5 {
           animation-delay: 0.33s;
 }
 .mfui-preloader_color_white .mfui-preloader__item:before {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
   -webkit-animation: scaling 1s linear infinite;
           animation: scaling 1s linear infinite;
 }

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

@@ -26,6 +26,10 @@ export interface IPreloaderProps {
     sizeMobile?: PreloaderSizesType;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Preloader: React.FC<IPreloaderProps>;
 export default Preloader;

package/dist/es/components/Preloader/Preloader.js

@@ -1,8 +1,9 @@
 import "core-js/modules/es.object.values";
 import "core-js/modules/web.timers";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Preloader.css";
 export var PreloaderColors = {
@@ -25,7 +26,8 @@ var Preloader = function Preloader(_ref) {
       sizeDesktop = _ref.sizeDesktop,
       sizeTablet = _ref.sizeTablet,
       sizeMobile = _ref.sizeMobile,
-      className = _ref.className;
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -40,7 +42,7 @@ var Preloader = function Preloader(_ref) {
       clearTimeout(timerId);
     };
   }, []);
-  return isShowed ? /*#__PURE__*/React.createElement("div", {
+  return isShowed ? /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
       'size-all': sizeAll,
@@ -49,7 +51,7 @@ var Preloader = function Preloader(_ref) {
       'size-tablet': sizeTablet,
       'size-mobile': sizeMobile
     }, className)
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('item', {
       first: true
     })
@@ -71,6 +73,9 @@ Preloader.propTypes = {
   sizeDesktop: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeTablet: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeMobile: PropTypes.oneOf(Object.values(PreloaderSizes)),
-  className: PropTypes.string
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 export default Preloader;

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-radio-button__input {
   position: absolute;
   top: 0;
@@ -48,22 +41,22 @@ h5 {
           box-sizing: border-box;
   width: 20px;
   height: 20px;
-  border: 2px solid #D8D8D8;
+  border: 2px solid var(--spbSky2);
   border-radius: 50%;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
-  border: 6px solid #00B956;
+  border: 6px solid var(--brandGreen);
 }
 .mfui-radio-button__label:hover .mfui-radio-button__custom-input:before {
-  border-color: #10E272;
+  border-color: var(--buttonHoverGreen);
 }
 .mfui-radio-button__label:active .mfui-radio-button__custom-input:before {
-  border-color: #404D46;
+  border-color: var(--buttonDown);
 }
 .mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before {
-  border-color: #D8D8D8 !important;
-  background-color: #EDEDED !important;
+  border-color: var(--spbSky2) !important;
+  background-color: var(--spbSky1) !important;
 }
 .mfui-radio-button__text_size_small {
   font-size: 12px;

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './RadioButton.less';
-export interface IRadioButtonProps extends IFilterDataAttrs {
+export interface IRadioButtonProps {
     /** Значение */
     value: string;
     /** Имя для тега form */
@@ -22,35 +20,17 @@ export interface IRadioButtonProps extends IFilterDataAttrs {
         customInput?: string;
         labelText?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        text?: Record<string, string>;
+    };
     children?: React.ReactNode;
     /** Обработчик изменения значения 'value' */
     onChange?: (value: string) => void;
     /** Ссылка на input */
     inputRef?: React.Ref<HTMLInputElement>;
 }
-declare class RadioButton extends React.Component<IRadioButtonProps> {
-    static propTypes: {
-        value: PropTypes.Validator<string>;
-        name: PropTypes.Requireable<string>;
-        textSize: PropTypes.Requireable<string>;
-        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>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
-    };
-    static defaultProps: Partial<IRadioButtonProps>;
-    handleChange: () => void;
-    render(): JSX.Element;
-}
+declare const RadioButton: React.FC<IRadioButtonProps>;
 export default RadioButton;

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

@@ -1,95 +1,60 @@
 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";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-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, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./RadioButton.css";
 var cn = cnCreate('mfui-radio-button');
 
-var RadioButton = /*#__PURE__*/function (_React$Component) {
-  _inherits(RadioButton, _React$Component);
-
-  var _super = _createSuper(RadioButton);
-
-  function RadioButton() {
-    var _this;
-
-    _classCallCheck(this, RadioButton);
+var RadioButton = function RadioButton(_ref) {
+  var isChecked = _ref.isChecked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      name = _ref.name,
+      value = _ref.value,
+      _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
+      children = _ref.children,
+      inputRef = _ref.inputRef,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange;
+  var checkedProp = isChecked !== undefined ? {
+    checked: isChecked
+  } : {};
+  var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
 
-    _this = _super.apply(this, arguments);
+  var handleChange = function handleChange() {
+    return onChange && onChange(value);
+  };
 
-    _this.handleChange = function () {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          value = _this$props.value;
-      onChange === null || onChange === void 0 ? void 0 : onChange(value);
-    };
-
-    return _this;
-  }
-
-  _createClass(RadioButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          isChecked = _this$props2.isChecked,
-          disabled = _this$props2.disabled,
-          name = _this$props2.name,
-          value = _this$props2.value,
-          textSize = _this$props2.textSize,
-          children = _this$props2.children,
-          inputRef = _this$props2.inputRef,
-          className = _this$props2.className,
-          _this$props2$classes = _this$props2.classes,
-          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes,
-          dataAttrs = _this$props2.dataAttrs;
-      var checkedProp = isChecked !== undefined ? {
-        checked: isChecked
-      } : {};
-      var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
-      return /*#__PURE__*/React.createElement("div", _extends({
-        className: cn(rootClassNames)
-      }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("label", {
-        className: cn('label', {
-          disabled: disabled
-        }, classes.label)
-      }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, {
-        className: cn('input'),
-        type: "radio",
-        name: name,
-        value: value,
-        onChange: this.handleChange,
-        disabled: disabled,
-        ref: inputRef
-      })), /*#__PURE__*/React.createElement("div", {
-        className: cn('custom-input', classes.customInput)
-      }), children && /*#__PURE__*/React.createElement("div", {
-        className: cn('text', {
-          size: textSize
-        }, classes.labelText)
-      }, children)));
-    }
-  }]);
-
-  return RadioButton;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn(rootClassNames)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", {
+    className: cn('label', {
+      disabled: disabled
+    }, classes.label)
+  }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    className: cn('input'),
+    type: "radio",
+    name: name,
+    value: value,
+    onChange: handleChange,
+    disabled: disabled,
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('custom-input', classes.customInput)
+  }), children && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text', {
+      size: textSize
+    }, classes.labelText)
+  }), children)));
+};
 
 RadioButton.propTypes = {
   value: PropTypes.string.isRequired,
@@ -104,15 +69,15 @@ RadioButton.propTypes = {
     customInput: PropTypes.string,
     labelText: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.node,
   onChange: PropTypes.func,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
-  }), PropTypes.any])]),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
-};
-RadioButton.defaultProps = {
-  textSize: 'medium',
-  disabled: false
+  }), PropTypes.any])])
 };
 export default RadioButton;

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-search {
   font-family: inherit;
   font-size: 15px;
@@ -12,11 +5,11 @@ h5 {
   position: relative;
   z-index: auto;
   min-height: 40px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-search__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
@@ -31,8 +24,8 @@ h5 {
   width: 100%;
   height: 48px;
   padding: 0 16px 0 20px;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   outline: none;
   cursor: pointer;
   -webkit-user-select: none;
@@ -41,7 +34,7 @@ h5 {
           user-select: none;
 }
 .mfui-search__control_error {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-search__search-field {
   position: relative;
@@ -56,6 +49,7 @@ h5 {
   border: none;
   border-radius: 0;
   overflow: auto;
+  color: var(--content);
   font-family: inherit;
   line-height: 25px;
   background-color: transparent;
@@ -79,7 +73,7 @@ h5 {
   left: -1px;
   z-index: 0;
   display: none;
-  background-color: #FFFFFF;
+  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);
 }
@@ -91,7 +85,7 @@ h5 {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-search__icon-box {
   display: -webkit-box;
@@ -105,6 +99,7 @@ h5 {
           justify-content: center;
   height: 100%;
   text-align: center;
+  fill: var(--content);
 }
 .mfui-search__list-inner {
   -webkit-box-sizing: border-box;
@@ -116,11 +111,11 @@ h5 {
 .mfui-search__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   cursor: pointer;
 }
 .mfui-search__list-item_active {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-search__item-title {
   position: relative;
@@ -137,23 +132,23 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  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);
+  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-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);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
 .mfui-search_open .mfui-search__list {
   display: block;
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-search_open {
   z-index: 12;
 }
 .mfui-search_disabled .mfui-search__control {
-  border-color: #EDEDED;
-  background-color: #EDEDED;
+  border-color: var(--spbSky1);
+  background-color: var(--spbSky1);
   cursor: default;
   pointer-events: none;
 }
@@ -169,8 +164,8 @@ h5 {
   line-height: 16px;
 }
 .mfui-search__notice_error {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-search__notice_success {
-  color: #00B956;
+  color: var(--brandGreen);
 }

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

@@ -72,7 +72,7 @@ var Search = function Search(_ref) {
     setActiveIndex(-1);
 
     if (changeDelay === 0) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
+      onChange && onChange(inputValue);
     } else {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -93,7 +93,7 @@ var Search = function Search(_ref) {
     }
 
     var chosenValue = items[index].value;
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
+    onSubmit && onSubmit(chosenValue);
   }, [disabled, items, onSubmit]);
   var handleSelectSubmit = React.useCallback(function () {
     return function () {
@@ -105,7 +105,7 @@ var Search = function Search(_ref) {
   }, []);
   var handleBlur = React.useCallback(function (e) {
     setFocus(false);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    onBlur && onBlur(e);
   }, [onBlur]);
   var handleClick = React.useCallback(function () {
     if (activeIndex >= 0) {
@@ -125,7 +125,6 @@ var Search = function Search(_ref) {
       e.preventDefault();
     } else if (e.key === 'Enter' && activeIndex > -1) {
       handleItemSubmit(activeIndex);
-      e.preventDefault();
     } else if (e.key === 'Enter' && activeIndex === -1) {
       handleSearchSubmit();
     }