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

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

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 require("core-js/modules/es.object.values");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -19,15 +21,14 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var COLORS = {
   INHERIT: 'inherit',
   DEFAULT: 'default',
   WHITE: 'white',
   GREEN: 'green',
-  PURPLE: 'purple',
-  SPB_SKY_0: 'spbSky0',
-  SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2'
+  PURPLE: 'purple'
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-paragraph');
 
@@ -40,18 +41,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", (0, _extends2["default"])({}, (0, _uiHelpers.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/lib/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/lib/components/Preloader/Preloader.js

@@ -11,6 +11,8 @@ require("core-js/modules/es.object.values");
 
 require("core-js/modules/web.timers");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -47,7 +49,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 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -62,7 +65,7 @@ var Preloader = function Preloader(_ref) {
       clearTimeout(timerId);
     };
   }, []);
-  return isShowed ? /*#__PURE__*/React.createElement("div", {
+  return isShowed ? /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
       'size-all': sizeAll,
@@ -71,7 +74,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
     })
@@ -93,7 +96,10 @@ 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)
+  })
 };
 var _default = Preloader;
 exports["default"] = _default;

package/dist/lib/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/lib/components/RadioButton/RadioButton.js

@@ -52,16 +52,16 @@ var RadioButton = function RadioButton(_ref) {
   var rootClassNames = Array.isArray(className) ? [].concat((0, _toConsumableArray2["default"])(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", (0, _extends2["default"])({
     className: cn(rootClassNames)
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("label", {
+  }, (0, _uiHelpers.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", (0, _extends2["default"])({}, checkedProp, {
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, checkedProp, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input'),
     type: "radio",
     name: name,
@@ -71,11 +71,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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
       size: textSize
     }, classes.labelText)
-  }, children)));
+  }), children)));
 };
 
 RadioButton.propTypes = {
@@ -91,12 +91,16 @@ 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])])
 };
 var _default = RadioButton;
 exports["default"] = _default;

package/dist/lib/components/Search/Search.js

@@ -100,7 +100,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
@@ -124,7 +124,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["default"].useCallback(function () {
@@ -139,7 +139,7 @@ var Search = function Search(_ref) {
 
   var handleBlur = _react["default"].useCallback(function (e) {
     setFocus(false);
-    onBlur && onBlur(e);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   }, [onBlur]);
 
   var handleClick = _react["default"].useCallback(function () {
@@ -161,6 +161,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/lib/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));
 }

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import './Select.less';
 export declare const Verification: {
@@ -16,6 +15,7 @@ export declare type SelectItemValueType = number | string | undefined;
 declare type ElementOrString = JSX.Element[] | JSX.Element | Element[] | Element | string;
 declare type ViewCallbackArguments = {
     filterValue: string;
+    isItemActive: boolean;
 };
 export interface ISelectItem<T extends SelectItemValueType> {
     /** Заголовок элемента в выпадающем списке  */
@@ -27,7 +27,7 @@ export interface ISelectItem<T extends SelectItemValueType> {
     /** Настраиваемое отображение выбранного элемента в поле селекта  */
     selectedView?: JSX.Element | Element | React.ReactElement;
 }
-export interface ISelectProps<T extends SelectItemValueType> extends IFilterDataAttrs {
+export interface ISelectProps<T extends SelectItemValueType> {
     /** Тип компонента */
     type?: SelectTypesType;
     /** Заголовок поля */
@@ -62,6 +62,17 @@ export interface ISelectProps<T extends SelectItemValueType> extends IFilterData
         listItem?: string;
         listItemTitle?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        title?: Record<string, string>;
+        input?: Record<string, string>;
+        noticeText?: Record<string, string>;
+        listItem?: Record<string, string>;
+        listItemTitle?: Record<string, string>;
+        notFound?: Record<string, string>;
+    };
     /** Обработчик выбора элемента селекта */
     onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
     /** Обработчик при открытом селекте */
@@ -69,16 +80,9 @@ export interface ISelectProps<T extends SelectItemValueType> extends IFilterData
     /** Обработчик при закрытом селекте */
     onClosed?: () => void;
 }
-interface ISelectState<T extends SelectItemValueType> {
-    isOpened: boolean;
-    activeIndex: number;
-    filteredItems: Array<ISelectItem<T>>;
-    comparableInputValue: string;
-    inputValue: string;
-    isChoosenItem: boolean;
-}
-declare class Select<T extends SelectItemValueType> extends React.Component<ISelectProps<T>, ISelectState<T>> {
-    static propTypes: {
+declare const Select: {
+    <T extends string | number | undefined>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, onClosed, onOpened, onSelect, }: ISelectProps<T>): JSX.Element;
+    propTypes: {
         type: PropTypes.Requireable<"classic" | "combobox">;
         label: PropTypes.Requireable<string>;
         id: PropTypes.Requireable<string>;
@@ -99,6 +103,32 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
             listItem: PropTypes.Requireable<string>;
             listItemTitle: PropTypes.Requireable<string>;
         }>>;
+        dataAttrs: PropTypes.Requireable<PropTypes.InferProps<{
+            root: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            label: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            title: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            input: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            noticeText: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            listItem: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            listItemTitle: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            notFound: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+        }>>;
         items: PropTypes.Validator<(Required<PropTypes.InferProps<{
             view: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
             selectedView: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
@@ -106,45 +136,8 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
             value: PropTypes.Validator<string | number>;
         }>> | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
         onOpened: PropTypes.Requireable<(...args: any[]) => any>;
         onClosed: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    static defaultProps: {
-        disabled: boolean;
-        required: boolean;
-        type: string;
-        notFoundText: string;
-    };
-    itemWrapperNode: HTMLDivElement;
-    itemsNodeList: HTMLDivElement[];
-    selectNode: HTMLDivElement;
-    isTouch: boolean;
-    debouncedComboboxChange: any;
-    constructor(props: ISelectProps<T>);
-    componentDidMount(): void;
-    componentDidUpdate({ items: prevItems }: ISelectProps<T>): void;
-    componentWillUnmount(): void;
-    isEqualItems: (items: ISelectItem<T>[], prevItems: ISelectItem<T>[]) => boolean;
-    handleOpened: () => void;
-    handleClosed: () => void;
-    handleClickOutside: (e: MouseEvent) => void;
-    handleOpenDropdown: () => void;
-    handleSelectItem: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    handleHoverItem: (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
-    handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => boolean;
-    highlightString: (title: string, view?: string | Element | JSX.Element | JSX.Element[] | Element[] | ((data: ViewCallbackArguments) => ElementOrString) | undefined) => ElementOrString;
-    getItemWrapper: (node: any) => void;
-    getSelectNode: (node: any) => void;
-    getNodeList: (node: any) => number;
-    scrollList(activeIndex: number): void;
-    renderTitle(): JSX.Element;
-    renderCombobox(): JSX.Element;
-    renderChildren(): JSX.Element;
-    render(): JSX.Element;
-}
+};
 export default Select;