@megafon/ui-core 3.0.1 → 3.2.0

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;
     /** Заголовок поля */

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

@@ -7,7 +7,7 @@ import "core-js/modules/es.string.split";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
 import InputLabel from "../InputLabel/InputLabel";
@@ -28,7 +28,8 @@ export var Verification = {
 var cn = cnCreate('mfui-search');
 
 var Search = function Search(_ref) {
-  var _ref$value = _ref.value,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value,
       label = _ref.label,
       placeholder = _ref.placeholder,
@@ -160,18 +161,18 @@ var Search = function Search(_ref) {
     }));
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       open: isFocused,
       disabled: disabled
     }, [className])
-  }, label && /*#__PURE__*/React.createElement(InputLabel, null, label, required && /*#__PURE__*/React.createElement("span", {
+  }), 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", {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
     className: cn('search-field'),
     placeholder: placeholder,
     value: searchQuery,
@@ -183,10 +184,10 @@ var Search = function Search(_ref) {
     disabled: disabled,
     type: "text",
     autoComplete: "off"
-  }), !hideIcon && /*#__PURE__*/React.createElement("div", {
+  })), !hideIcon && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
     className: cn('icon-box'),
     onClick: handleSearchSubmit
-  }, /*#__PURE__*/React.createElement(SearchIcon, {
+  }), /*#__PURE__*/React.createElement(SearchIcon, {
     className: cn('icon', [classes === null || classes === void 0 ? void 0 : classes.icon])
   })), !!items.length && /*#__PURE__*/React.createElement("div", {
     className: cn('list')
@@ -195,14 +196,14 @@ var Search = function Search(_ref) {
   }, items.map(function (_ref2, i) {
     var itemValue = _ref2.value,
         searchView = _ref2.searchView;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
       className: cn('list-item', {
         active: activeIndex === i
       }),
       onMouseDown: handleSelectSubmit(i),
       onMouseEnter: handleHoverItem(i),
       key: i
-    }, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
     }, searchView || highlightString(itemValue)));
   })))), noticeText && /*#__PURE__*/React.createElement("div", {
@@ -214,6 +215,12 @@ var Search = function Search(_ref) {
 };
 
 Search.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    searchField: PropTypes.objectOf(PropTypes.string.isRequired),
+    submit: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   value: PropTypes.string,
   label: PropTypes.string,
   placeholder: PropTypes.string,

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import './Switcher.less';
 export interface ISwitcherProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Управление состоянием вкл/выкл компонента */

package/dist/es/components/Switcher/Switcher.js

@@ -1,15 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./Switcher.css";
 var cn = cnCreate('mfui-switcher');
 
-var Switcher = function Switcher(props) {
-  var className = props.className,
-      _props$checked = props.checked,
-      checked = _props$checked === void 0 ? false : _props$checked,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      onChange = props.onChange;
+var Switcher = function Switcher(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange;
   var isTouch = detectTouch();
 
   var handleChange = function handleChange(e) {
@@ -20,16 +23,25 @@ var Switcher = function Switcher(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       checked: checked,
       disabled: disabled,
       'no-touch': !isTouch
     }, className),
     onClick: handleChange
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
   }));
 };
 
+Switcher.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+};
 export default Switcher;

package/dist/es/components/Tabs/Tabs.css

@@ -121,7 +121,7 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: var(--content);
+  background-color: var(--stcBlack);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;

package/dist/es/components/TextLink/TextLink.js

@@ -6,9 +6,12 @@ import Link from "../Link/Link";
 var cn = cnCreate('mfui-text-link');
 
 var TextLink = function TextLink(_ref) {
-  var underlineVisibility = _ref.underlineVisibility,
-      underlineStyle = _ref.underlineStyle,
-      color = _ref.color,
+  var _ref$underlineVisibil = _ref.underlineVisibility,
+      underlineVisibility = _ref$underlineVisibil === void 0 ? 'hover' : _ref$underlineVisibil,
+      _ref$underlineStyle = _ref.underlineStyle,
+      underlineStyle = _ref$underlineStyle === void 0 ? 'solid' : _ref$underlineStyle,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'blue' : _ref$color,
       className = _ref.className,
       target = _ref.target,
       href = _ref.href,
@@ -41,9 +44,4 @@ TextLink.propTypes = {
   }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
 };
-TextLink.defaultProps = {
-  underlineVisibility: 'hover',
-  underlineStyle: 'solid',
-  color: 'blue'
-};
 export default TextLink;

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

@@ -20,6 +20,8 @@ declare type ShadowType = typeof Shadow[keyof typeof Shadow];
 export interface ITileProps {
     /** Ссылка */
     href?: string;
+    /** Атрибут для открытия ссылки */
+    target?: '_self' | '_blank';
     /** Тема */
     theme?: ThemeType;
     /** Радиус границы */

package/dist/es/components/Tile/Tile.js

@@ -33,7 +33,9 @@ var Tile = function Tile(_ref) {
       _ref$isInteractive = _ref.isInteractive,
       isInteractive = _ref$isInteractive === void 0 ? false : _ref$isInteractive,
       onClick = _ref.onClick,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target;
 
   var handleClick = function handleClick(e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -51,7 +53,8 @@ var Tile = function Tile(_ref) {
     onClick: handleClick
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/React.createElement("a", {
     href: href,
-    className: cn('link')
+    className: cn('link'),
+    target: target
   }, children), !href && children);
 };
 
@@ -63,6 +66,9 @@ Tile.propTypes = {
   className: PropTypes.string,
   isInteractive: PropTypes.bool,
   onClick: PropTypes.func,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  target: PropTypes.oneOf(['_self', '_blank'])
 };
 export default Tile;

package/dist/lib/components/Banner/Banner.css

@@ -17,6 +17,15 @@
     height: 540px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-banner__slide {
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s;
+    transition: opacity 0.2s;
+  }
+}
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
   .mfui-banner__slide {
     height: 420px;
@@ -27,6 +36,13 @@
     height: 400px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-banner .swiper-slide-visible {
+    opacity: 1;
+    -webkit-transition: opacity 0.4s;
+    transition: opacity 0.4s;
+  }
+}
 .mfui-banner__arrow {
   position: absolute;
   top: 50%;

package/dist/lib/components/Banner/Banner.js

@@ -187,6 +187,7 @@ var Banner = function Banner(_ref) {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesVisibility: true,
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
@@ -199,14 +200,20 @@ var Banner = function Banner(_ref) {
       key: i,
       className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
     }), child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev), {
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
+    },
     className: cn('arrow', {
       prev: true
     }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext), {
+  }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
+    },
     className: cn('arrow', {
       next: true
     }, [classes.arrow]),
@@ -214,7 +221,7 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
       theme: navTheme,
       'bottom-offset': withPaginationBottomOffset