@megafon/ui-core 3.0.2 → 3.3.0

package/dist/es/components/Calendar/components/Month/Month.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { checkEventIsClickOrEnterPress, cnCreate } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./Month.css";
 import PropTypes from 'prop-types';
 
@@ -29,7 +29,8 @@ var ArrowRight = function ArrowRight(props) {
 var cn = cnCreate('mfui-month');
 
 var Month = function Month(_ref) {
-  var isPrevMonthDisabled = _ref.isPrevMonthDisabled,
+  var dataAttrs = _ref.dataAttrs,
+      isPrevMonthDisabled = _ref.isPrevMonthDisabled,
       isNextMonthDisabled = _ref.isNextMonthDisabled,
       year = _ref.year,
       monthLabel = _ref.monthLabel,
@@ -56,11 +57,11 @@ var Month = function Month(_ref) {
     return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
-  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("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('header')
-  }, /*#__PURE__*/React.createElement(ArrowLeft, {
+  }, /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft), {
     role: "button",
     tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
@@ -68,9 +69,9 @@ var Month = function Month(_ref) {
     }),
     onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
-  }), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
     className: cn('title')
-  }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, {
+  }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight), {
     role: "button",
     tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
@@ -78,7 +79,7 @@ var Month = function Month(_ref) {
     }),
     onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: cn('weekday-labels')
   }, weekdayLabels.map(function (dayLabel, index) {
     return /*#__PURE__*/React.createElement("div", {
@@ -91,6 +92,11 @@ var Month = function Month(_ref) {
 };
 
 Month.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowLeft: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowRight: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   isPrevMonthDisabled: PropTypes.bool.isRequired,
   isNextMonthDisabled: PropTypes.bool.isRequired,
   year: PropTypes.number.isRequired,

package/dist/es/components/Carousel/Carousel.js

@@ -180,14 +180,18 @@ var Carousel = function Carousel(_ref) {
     if (isBullet && swiperInstance) {
       increaseAutoplayDelay(swiperInstance);
     }
+  };
+
+  var handleNavDisplay = function handleNavDisplay(swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+    setLocked(swiper.isBeginning && swiper.isEnd);
   }; // https://github.com/nolimits4web/Swiper/issues/2346
 
 
   var handleSwiperResize = React.useCallback(function () {
     throttle(function (swiper) {
-      setBeginning(swiper.isBeginning);
-      setEnd(swiper.isEnd);
-      setLocked(swiper.isBeginning && swiper.isEnd);
+      handleNavDisplay(swiper);
 
       if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
         swiper.slides.css('width', '');
@@ -218,6 +222,21 @@ var Carousel = function Carousel(_ref) {
     e.nativeEvent.preventDefault();
   };
 
+  React.useEffect(function () {
+    if (!swiperInstance) {
+      return undefined;
+    }
+
+    var windowResizeHandler = function windowResizeHandler() {
+      return handleNavDisplay(swiperInstance);
+    };
+
+    var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
+    window.addEventListener('resize', windowResizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', windowResizeHandlerThrottled);
+    };
+  }, [swiperInstance]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
@@ -262,7 +281,10 @@ var Carousel = function Carousel(_ref) {
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
     }), child);
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
+  })), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
     className: cn('arrow', {
       prev: true,
       locked: isLocked
@@ -270,7 +292,10 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: ArrowTheme.PURPLE
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+  }), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
     className: cn('arrow', {
       next: true,
       locked: isLocked
@@ -279,7 +304,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: ArrowTheme.PURPLE
-  })));
+  }));
 };
 
 Carousel.propTypes = {

package/dist/es/components/Checkbox/Checkbox.css

@@ -37,6 +37,9 @@
   border: 2px solid;
   border-radius: 2px;
 }
+.mfui-checkbox__custom-input:focus {
+  outline: none;
+}
 .mfui-checkbox__icon {
   display: block;
   width: 32px;

package/dist/es/components/Collapse/Collapse.js

@@ -1,10 +1,20 @@
-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 { useCallback, useEffect } from 'react';
 import { filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-var BROWSER_DELAY = 100;
+var sin = Math.sin,
+    cos = Math.cos,
+    min = Math.min,
+    PI = Math.PI;
+
+var easeOutSine = function easeOutSine(progress) {
+  return sin(progress * PI / 2);
+};
+
+var easeInSine = function easeInSine(progress) {
+  return 1 - cos(progress * PI / 2);
+};
 
 var Collapse = function Collapse(props) {
   var className = props.className,
@@ -16,58 +26,75 @@ var Collapse = function Collapse(props) {
       children = props.children,
       isOpened = props.isOpened,
       dataAttrs = props.dataAttrs;
+  var duration = animation ? animationDuration : 0;
+  var animationStart = React.useRef(null);
+  var animationId = React.useRef(null);
   var canUpdate = React.useRef(false);
-  var timer = React.useRef(undefined);
   var rootNode = React.useRef(null);
+  useEffect(function () {
+    animationId.current && window.cancelAnimationFrame(animationId.current);
+  }, [isOpened]);
+  var animateSlide = useCallback(function (contentHeight, animationTime, timePassed) {
+    var isOpenAction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+    if (!rootNode.current) {
+      return;
+    }
 
-  var _React$useState = React.useState('0px'),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      height = _React$useState2[0],
-      setHeight = _React$useState2[1];
+    if (!animationStart.current) {
+      animationStart.current = timePassed;
+    }
 
-  var transition = animation ? "height ".concat(animationDuration / 1000, "s") : 'none';
-  var duration = animation ? animationDuration : 0;
+    var runtime = timePassed - animationStart.current;
+    var progress = animationTime ? min(runtime / animationTime, 1) : 1;
+    var isAnimationInProgress = progress < 1;
+    var nextHeight = isOpenAction ? easeOutSine(progress) * contentHeight : contentHeight - easeInSine(progress) * contentHeight;
+    rootNode.current.style.height = "".concat(nextHeight, "px");
 
-  var animateSlide = function animateSlide(finalHeight, delay) {
+    if (isAnimationInProgress) {
+      animationId.current = window.requestAnimationFrame(function (time) {
+        return animateSlide(contentHeight, animationTime, time, isOpenAction);
+      });
+    } else {
+      animationStart.current = null;
+      animationId.current = null;
+    }
+  }, []);
+  useEffect(function () {
     if (!rootNode.current) {
       return;
     }
 
-    setHeight("".concat(rootNode.current.scrollHeight, "px"));
-    timer.current = window.setTimeout(function () {
-      setHeight(finalHeight);
-    }, delay);
-  };
+    var _rootNode$current$scr = rootNode.current.scrollHeight,
+        scrollHeight = _rootNode$current$scr === void 0 ? 0 : _rootNode$current$scr;
 
-  React.useEffect(function () {
     switch (true) {
       case !canUpdate.current && isOpened:
-        setHeight('auto');
+        rootNode.current.style.height = 'auto';
         break;
 
       case !canUpdate.current && !isOpened:
-        setHeight('0px');
+        rootNode.current.style.height = '0px';
         break;
 
       case isOpened:
-        animateSlide('auto', duration);
+        animationId.current = window.requestAnimationFrame(function (timePassed) {
+          return animateSlide(scrollHeight, duration, timePassed, true);
+        });
         break;
 
       default:
-        animateSlide('0px', BROWSER_DELAY);
+        animationId.current = window.requestAnimationFrame(function (timePassed) {
+          return animateSlide(scrollHeight, duration, timePassed);
+        });
     }
 
     canUpdate.current = true;
-    return function () {
-      return clearTimeout(timer.current);
-    };
-  }, [isOpened, duration]);
+  }, [isOpened, duration, animateSlide]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: className,
     style: {
-      overflow: 'hidden',
-      height: height,
-      transition: transition
+      overflow: 'hidden'
     },
     ref: rootNode
   }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {

package/dist/es/components/ContentArea/ContentArea.css

@@ -5,30 +5,37 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-content-area_color_default {
-  background-color: var(--content);
-}
-.mfui-content-area_color_white {
-  background-color: var(--stcWhite);
+.mfui-content-area {
+  /* deprecated */
+  /* deprecated */
 }
-.mfui-content-area_color_transparent {
+.mfui-content-area_background-color_transparent {
   background-color: transparent;
 }
-.mfui-content-area_color_green {
+.mfui-content-area_background-color_black {
+  background-color: var(--stcBlack);
+}
+.mfui-content-area_background-color_white {
+  background-color: var(--stcWhite);
+}
+.mfui-content-area_background-color_green {
   background-color: var(--brandGreen);
 }
-.mfui-content-area_color_purple {
+.mfui-content-area_background-color_purple {
   background-color: var(--brandPurple);
 }
-.mfui-content-area_color_spbSky0 {
+.mfui-content-area_background-color_spbSky0 {
   background-color: var(--spbSky0);
 }
-.mfui-content-area_color_spbSky1 {
+.mfui-content-area_background-color_spbSky1 {
   background-color: var(--spbSky1);
 }
-.mfui-content-area_color_spbSky2 {
+.mfui-content-area_background-color_spbSky2 {
   background-color: var(--spbSky2);
 }
+.mfui-content-area_background-color_default {
+  background-color: var(--content);
+}
 .mfui-content-area__inner {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
@@ -77,27 +84,30 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
-.mfui-content-area__inner_color_default {
-  background-color: var(--content);
+.mfui-content-area__inner_background-color_transparent {
+  background-color: transparent;
 }
-.mfui-content-area__inner_color_white {
-  background-color: var(--stcWhite);
+.mfui-content-area__inner_background-color_black {
+  background-color: var(--stcBlack);
 }
-.mfui-content-area__inner_color_transparent {
-  background-color: transparent;
+.mfui-content-area__inner_background-color_white {
+  background-color: var(--stcWhite);
 }
-.mfui-content-area__inner_color_green {
+.mfui-content-area__inner_background-color_green {
   background-color: var(--brandGreen);
 }
-.mfui-content-area__inner_color_purple {
+.mfui-content-area__inner_background-color_purple {
   background-color: var(--brandPurple);
 }
-.mfui-content-area__inner_color_spbSky0 {
+.mfui-content-area__inner_background-color_spbSky0 {
   background-color: var(--spbSky0);
 }
-.mfui-content-area__inner_color_spbSky1 {
+.mfui-content-area__inner_background-color_spbSky1 {
   background-color: var(--spbSky1);
 }
-.mfui-content-area__inner_color_spbSky2 {
+.mfui-content-area__inner_background-color_spbSky2 {
   background-color: var(--spbSky2);
 }
+.mfui-content-area__inner_background-color_default {
+  background-color: var(--content);
+}

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    readonly DEFAULT: "default";
-    readonly WHITE: "white";
     readonly TRANSPARENT: "transparent";
+    readonly BLACK: "black";
+    readonly WHITE: "white";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
     readonly SPB_SKY_0: "spbSky0";
     readonly SPB_SKY_1: "spbSky1";
     readonly SPB_SKY_2: "spbSky2";
+    readonly DEFAULT: "default";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {

package/dist/es/components/ContentArea/ContentArea.js

@@ -4,14 +4,16 @@ import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
-  DEFAULT: 'default',
-  WHITE: 'white',
   TRANSPARENT: 'transparent',
+  BLACK: 'black',
+  WHITE: 'white',
   GREEN: 'green',
   PURPLE: 'purple',
   SPB_SKY_0: 'spbSky0',
   SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2'
+  SPB_SKY_2: 'spbSky2',
+  // @deprecated
+  DEFAULT: 'default'
 };
 var DisableIndents = {
   MOBILE: 'mobile',
@@ -22,20 +24,22 @@ var DisableIndents = {
 var cn = cnCreate('mfui-content-area');
 
 var ContentArea = function ContentArea(_ref) {
-  var outerBackgroundColor = _ref.outerBackgroundColor,
-      innerBackgroundColor = _ref.innerBackgroundColor,
+  var _ref$outerBackgroundC = _ref.outerBackgroundColor,
+      outerBackgroundColor = _ref$outerBackgroundC === void 0 ? 'transparent' : _ref$outerBackgroundC,
+      _ref$innerBackgroundC = _ref.innerBackgroundColor,
+      innerBackgroundColor = _ref$innerBackgroundC === void 0 ? 'transparent' : _ref$innerBackgroundC,
       disableIndents = _ref.disableIndents,
       children = _ref.children,
       className = _ref.className,
       classes = _ref.classes;
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
-      color: outerBackgroundColor
+      'background-color': outerBackgroundColor
     }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner', {
       'disable-indents': disableIndents,
-      color: innerBackgroundColor
+      'background-color': innerBackgroundColor
     }, classes === null || classes === void 0 ? void 0 : classes.inner)
   }, children));
 };
@@ -50,8 +54,4 @@ ContentArea.propTypes = {
   outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
   innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS))
 };
-ContentArea.defaultProps = {
-  outerBackgroundColor: 'transparent',
-  innerBackgroundColor: 'transparent'
-};
 export default ContentArea;

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import './Counter.less';
 export interface ICounterProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        minus?: Record<string, string>;
+        plus?: Record<string, string>;
+        input?: Record<string, string>;
+    };
     /** Переводит компонент в контролируемое состояние */
     isControlled?: boolean;
     /** Внешнее значение для контролируемого компонента */

package/dist/es/components/Counter/Counter.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.number.constructor";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 "./Counter.css";
 
@@ -25,7 +25,8 @@ var IconPlus = function IconPlus(props) {
 var cn = cnCreate('mfui-counter');
 
 var Counter = function Counter(_ref) {
-  var _ref$isControlled = _ref.isControlled,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$isControlled = _ref.isControlled,
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? 0 : _ref$value,
@@ -96,40 +97,46 @@ var Counter = function Counter(_ref) {
       handleValueChange(max);
     }
   }, [handleValueChange, min, max]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       disabled: disabled
     }, [className, classes.root])
-  }, /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.minus), {
     className: cn('btn', {
       left: true
     }, classes.buttonMinus),
     type: "button",
     disabled: disabled || (isControlled ? value : counter) <= min,
     onClick: handleMinusClick
-  }, /*#__PURE__*/React.createElement(IconMinus, {
+  }), /*#__PURE__*/React.createElement(IconMinus, {
     className: cn('icon')
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('input-box')
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', classes.input),
     value: isControlled ? value : counter,
     onChange: handleInputChange,
     onBlur: handleInputBlur,
     disabled: disabled
-  })), /*#__PURE__*/React.createElement("button", {
+  }))), /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.plus), {
     className: cn('btn', {
       right: true
     }, classes.buttonPlus),
     type: "button",
     disabled: disabled || counter >= max || value >= max,
     onClick: handlePlusClick
-  }, /*#__PURE__*/React.createElement(IconPlus, {
+  }), /*#__PURE__*/React.createElement(IconPlus, {
     className: cn('icon')
   })));
 };
 
 Counter.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    minus: PropTypes.objectOf(PropTypes.string.isRequired),
+    plus: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   isControlled: PropTypes.bool,
   value: PropTypes.number,
   initialValue: PropTypes.number,

package/dist/es/components/Logo/Logo.js

@@ -37,10 +37,14 @@ var cn = cnCreate('mfui-logo');
 
 var Logo = function Logo(_ref) {
   var className = _ref.className,
-      color = _ref.color,
-      view = _ref.view,
-      target = _ref.target,
-      href = _ref.href;
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'green' : _ref$color,
+      _ref$view = _ref.view,
+      view = _ref$view === void 0 ? 'horizontal' : _ref$view,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_blank' : _ref$target,
+      _ref$href = _ref.href,
+      href = _ref$href === void 0 ? '/' : _ref$href;
   var images = {
     'green-horizontal': greenHorizontalImg,
     'green-vertical': greenVerticalImg
@@ -66,10 +70,4 @@ Logo.propTypes = {
   href: PropTypes.string,
   className: PropTypes.string
 };
-Logo.defaultProps = {
-  color: 'green',
-  view: 'horizontal',
-  target: '_blank',
-  href: '/'
-};
 export default Logo;

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

@@ -11,6 +11,9 @@ export declare const View: {
 declare type ThemeType = typeof Theme[keyof typeof Theme];
 declare type ViewType = typeof View[keyof typeof View];
 export interface INavArrowProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     className?: string;
     theme?: ThemeType;
     view?: ViewType;

package/dist/es/components/NavArrow/NavArrow.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.object.values";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import "./NavArrow.css";
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 
 var ArrowLeft = function ArrowLeft(props) {
@@ -32,7 +32,8 @@ export var View = {
 var cn = cnCreate('mfui-nav-arrow');
 
 var NavArrow = function NavArrow(_ref) {
-  var className = _ref.className,
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
       _ref$view = _ref.view,
       view = _ref$view === void 0 ? View.PREV : _ref$view,
       _ref$theme = _ref.theme,
@@ -53,17 +54,20 @@ var NavArrow = function NavArrow(_ref) {
         });
     }
   }, [view]);
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     type: "button",
     className: cn({
       theme: theme
     }, className),
     onClick: onClick,
     disabled: disabled
-  }, renderIcon());
+  }), renderIcon());
 };
 
 NavArrow.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   theme: PropTypes.oneOf(Object.values(Theme)),
   view: PropTypes.oneOf(Object.values(View)),

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

@@ -18,7 +18,7 @@ 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 ? COLORS.DEFAULT : _ref$color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,

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

@@ -13,6 +13,13 @@ export declare type SearchItem = {
     searchView?: ElementOrString;
 };
 export interface ISearchProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        searchField?: Record<string, string>;
+        submit?: Record<string, string>;
+        item?: Record<string, string>;
+    };
     /** Значение */
     value?: string;
     /** Заголовок поля */