@megafon/ui-core 3.0.0-beta.6 → 3.0.0

package/dist/es/components/Notification/Notification.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.object.values";
 import "core-js/modules/es.string.link";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Header from "../Header/Header";
 import TextLink from "../TextLink/TextLink";
@@ -89,11 +89,15 @@ var Notification = function Notification(_ref) {
       href = _ref.href,
       target = _ref.target,
       icon = _ref.icon,
+      dataAttrs = _ref.dataAttrs,
       onClose = _ref.onClose,
       onLinkClick = _ref.onLinkClick;
 
   var renderLink = function renderLink() {
     return /*#__PURE__*/React.createElement(TextLink, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+      },
       className: cn('link'),
       onClick: onLinkClick,
       rel: rel,
@@ -129,6 +133,9 @@ var Notification = function Notification(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Tile, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
+    },
     radius: "rounded",
     shadowLevel: shadowLevel,
     className: cn({
@@ -142,19 +149,22 @@ var Notification = function Notification(_ref) {
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, title && /*#__PURE__*/React.createElement(Header, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
     as: "h5",
     className: cn('title', {
       'close-padding': hasCloseButton
     })
-  }, title), /*#__PURE__*/React.createElement("p", {
+  }, title), /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
       'close-padding': hasCloseButton && !title
     })
-  }, children), link && renderLink())), hasCloseButton && /*#__PURE__*/React.createElement("button", {
+  }), children), link && renderLink())), hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
     className: cn('close'),
     type: "button",
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(CancelIcon, {
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
     className: cn('close-icon')
   })));
 };
@@ -171,6 +181,13 @@ Notification.propTypes = {
   href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   icon: PropTypes.element,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    title: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired),
+    close: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClose: PropTypes.func,
   onLinkClick: PropTypes.func
 };

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

@@ -1,6 +1,13 @@
 import React from 'react';
 import './Pagination.less';
-interface IPagination {
+interface IPaginationProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+        button?: Record<string, string>;
+    };
     /** Общее количество страниц */
     totalPages: number;
     /** Номер текущей страницы */
@@ -10,5 +17,5 @@ interface IPagination {
     /** Обработчик изменения активной страницы */
     onChange: (value: number) => void;
 }
-declare const Pagination: React.FC<IPagination>;
+declare const Pagination: React.FC<IPaginationProps>;
 export default Pagination;

package/dist/es/components/Pagination/Pagination.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./Pagination.css";
 import PaginationButtons from "./components/PaginationButtons/PaginationButtons";
@@ -10,6 +11,7 @@ var cn = cnCreate('mfui-pagination');
 var Pagination = function Pagination(_ref) {
   var totalPages = _ref.totalPages,
       activePage = _ref.activePage,
+      dataAttrs = _ref.dataAttrs,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'default' : _ref$theme,
       onChange = _ref.onChange;
@@ -23,21 +25,30 @@ var Pagination = function Pagination(_ref) {
   var handlePageButtonClick = React.useCallback(function (value) {
     onChange(value);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn()
-  }, /*#__PURE__*/React.createElement(PaginationNavigation, {
+  }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
     direction: "left",
     disabled: activePage === Button.FIRST,
     onClick: handleBackClick,
     className: cn('button'),
     theme: theme
   }), /*#__PURE__*/React.createElement(PaginationButtons, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
     items: paginationItems,
     activeButton: activePage,
     hiddenButton: Button.HIDDEN,
     theme: theme,
     onClick: handlePageButtonClick
   }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
     disabled: activePage === totalPages,
     onClick: handleNextClick,
     className: cn('button'),
@@ -49,6 +60,12 @@ Pagination.propTypes = {
   totalPages: PropTypes.number.isRequired,
   activePage: PropTypes.number.isRequired,
   theme: PropTypes.oneOf(['default', 'light']),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    prev: PropTypes.objectOf(PropTypes.string.isRequired),
+    next: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onChange: PropTypes.func.isRequired
 };
 export default Pagination;

package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 import './PaginationButton.less';
 declare type ValueType = string | number;
-export interface IPaginationButton {
+export interface IPaginationButtonProps {
     disabled?: boolean;
     isActive?: boolean;
     theme?: 'default' | 'light';
+    value?: ValueType;
     className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     onClick?: (value?: ValueType) => void;
-    value?: ValueType;
 }
-declare const PaginationButton: React.FC<IPaginationButton>;
+declare const PaginationButton: React.FC<IPaginationButtonProps>;
 export default PaginationButton;

package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./PaginationButton.css";
 var cn = cnCreate('mfui-pagination-button');
@@ -14,13 +15,14 @@ var PaginationButton = function PaginationButton(_ref) {
       className = _ref.className,
       children = _ref.children,
       onClick = _ref.onClick,
-      value = _ref.value;
+      value = _ref.value,
+      dataAttrs = _ref.dataAttrs;
 
   var handleClick = function handleClick() {
-    onClick && onClick(value);
+    onClick === null || onClick === void 0 ? void 0 : onClick(value);
   };
 
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
       theme: theme
@@ -28,7 +30,7 @@ var PaginationButton = function PaginationButton(_ref) {
     disabled: disabled,
     onClick: handleClick,
     type: "button"
-  }, children);
+  }), children);
 };
 
 PaginationButton.propTypes = {
@@ -36,7 +38,10 @@ PaginationButton.propTypes = {
   isActive: PropTypes.bool,
   theme: PropTypes.oneOf(['default', 'light']),
   className: PropTypes.string,
-  onClick: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  onClick: PropTypes.func
 };
 export default PaginationButton;

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import './PaginationButtons.less';
-interface IPaginationButtons {
+interface IPaginationButtonsProps {
     items: Array<string | number>;
     theme?: 'default' | 'light';
     activeButton: number;
     hiddenButton: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     onClick: (value?: number | string) => void;
 }
-declare const PaginationButtons: React.FC<IPaginationButtons>;
+declare const PaginationButtons: React.FC<IPaginationButtonsProps>;
 export default PaginationButtons;

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import PaginationButton from "../PaginationButton/PaginationButton";
 import "./PaginationButtons.css";
@@ -21,11 +21,13 @@ var PaginationButtons = function PaginationButtons(_ref) {
       theme = _ref.theme,
       onClick = _ref.onClick,
       activeButton = _ref.activeButton,
-      hiddenButton = _ref.hiddenButton;
+      hiddenButton = _ref.hiddenButton,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, items.map(function (pageNumber, index) {
     var isHiddenButton = hiddenButton === pageNumber;
+    var dataIndex = typeof pageNumber === 'number' ? pageNumber : undefined;
 
     if (isHiddenButton) {
       return /*#__PURE__*/React.createElement(PaginationButton, {
@@ -38,6 +40,9 @@ var PaginationButtons = function PaginationButtons(_ref) {
 
     var isActive = pageNumber === activeButton;
     return /*#__PURE__*/React.createElement(PaginationButton, {
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, dataIndex)
+      },
       isActive: isActive,
       key: index,
       className: cn('button'),
@@ -53,6 +58,9 @@ PaginationButtons.propTypes = {
   theme: PropTypes.oneOf(['default', 'light']),
   activeButton: PropTypes.number.isRequired,
   hiddenButton: PropTypes.string.isRequired,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClick: PropTypes.func.isRequired
 };
 export default PaginationButtons;

package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import './PaginationNavigation.less';
-interface IPaginationNavigation {
+interface IPaginationNavigationProps {
     direction?: 'left' | 'right';
     theme?: 'default' | 'light';
     disabled?: boolean;
     isActive?: boolean;
     className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     onClick?: (value?: number | string) => void;
 }
-declare const PaginationNavigation: React.FC<IPaginationNavigation>;
+declare const PaginationNavigation: React.FC<IPaginationNavigationProps>;
 export default PaginationNavigation;

package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.js

@@ -22,8 +22,10 @@ var PaginationNavigation = function PaginationNavigation(_ref) {
       disabled = _ref.disabled,
       isActive = _ref.isActive,
       onClick = _ref.onClick,
-      className = _ref.className;
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement(PaginationButton, {
+    dataAttrs: dataAttrs,
     className: cn({
       direction: direction
     }, className),
@@ -42,6 +44,9 @@ PaginationNavigation.propTypes = {
   disabled: PropTypes.bool,
   isActive: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClick: PropTypes.func
 };
 export default PaginationNavigation;

package/dist/es/components/Pagination/helpers.d.ts

@@ -1,2 +1,2 @@
-declare const getRange: (from: any, to: any, step?: number) => number[];
+declare const getRange: (from: number, to: number, step?: number) => number[];
 export default getRange;

package/dist/es/components/Paragraph/Paragraph.css

@@ -38,12 +38,3 @@
 .mfui-paragraph_color_purple {
   color: var(--brandPurple);
 }
-.mfui-paragraph_color_spbSky0 {
-  color: var(--spbSky0);
-}
-.mfui-paragraph_color_spbSky1 {
-  color: var(--spbSky1);
-}
-.mfui-paragraph_color_spbSky2 {
-  color: var(--spbSky2);
-}

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

@@ -6,9 +6,6 @@ declare const COLORS: {
     readonly WHITE: "white";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
-    readonly SPB_SKY_0: "spbSky0";
-    readonly SPB_SKY_1: "spbSky1";
-    readonly SPB_SKY_2: "spbSky2";
 };
 declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
@@ -22,6 +19,10 @@ export interface IParagraphProps {
     color?: ColorType;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Paragraph: React.FC<IParagraphProps>;
 export default Paragraph;

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

@@ -1,6 +1,7 @@
 import "core-js/modules/es.object.values";
+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 = {
@@ -8,10 +9,7 @@ var COLORS = {
   DEFAULT: 'default',
   WHITE: 'white',
   GREEN: 'green',
-  PURPLE: 'purple',
-  SPB_SKY_0: 'spbSky0',
-  SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2'
+  PURPLE: 'purple'
 };
 var cn = cnCreate('mfui-paragraph');
 
@@ -24,18 +22,22 @@ var Paragraph = function Paragraph(_ref) {
       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,

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.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './RadioButton.less';
-export interface IRadioButtonProps extends IFilterDataAttrs {
+export interface IRadioButtonProps {
     /** Значение */
     value: string;
     /** Имя для тега form */
@@ -21,6 +20,12 @@ 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;

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

@@ -30,16 +30,16 @@ var RadioButton = function RadioButton(_ref) {
   var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
 
   var handleChange = function handleChange() {
-    return onChange && onChange(value);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(value);
   };
 
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn(rootClassNames)
-  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("label", {
+  }, 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, {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input'),
     type: "radio",
     name: name,
@@ -49,11 +49,11 @@ var RadioButton = function RadioButton(_ref) {
     ref: inputRef
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('custom-input', classes.customInput)
-  }), children && /*#__PURE__*/React.createElement("div", {
+  }), children && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
       size: textSize
     }, classes.labelText)
-  }, children)));
+  }), children)));
 };
 
 RadioButton.propTypes = {
@@ -69,11 +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)
+  }), PropTypes.any])])
 };
 export default RadioButton;

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

@@ -72,7 +72,7 @@ var Search = function Search(_ref) {
     setActiveIndex(-1);
 
     if (changeDelay === 0) {
-      onChange && onChange(inputValue);
+      onChange === null || onChange === void 0 ? void 0 : 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 && onSubmit(chosenValue);
+    onSubmit === null || onSubmit === void 0 ? void 0 : 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 && onBlur(e);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   }, [onBlur]);
   var handleClick = React.useCallback(function () {
     if (activeIndex >= 0) {
@@ -125,6 +125,7 @@ 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();
     }

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

@@ -150,7 +150,7 @@
   background-color: var(--base);
   cursor: pointer;
 }
-.mfui-select__list-item_active {
+.mfui-select__list-item_hovered {
   background-color: var(--spbSky0);
 }
 .mfui-select__item-title {
@@ -177,7 +177,10 @@
   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__list-item_active .mfui-select__item-title:after {
+.mfui-select__item-title_active {
+  font-weight: bold;
+}
+.mfui-select__list-item_hovered .mfui-select__item-title:after {
   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));
 }