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

package/dist/es/components/TextField/TextField.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import InputMask from 'react-input-mask';
 import InputLabel from "../InputLabel/InputLabel";
@@ -96,9 +96,11 @@ var TextField = function TextField(_ref) {
       noticeText = _ref.noticeText,
       inputRef = _ref.inputRef,
       inputMode = _ref.inputMode,
+      autoComplete = _ref.autoComplete,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var input = _ref$classes.input;
+  var input = _ref$classes.input,
+      dataAttrs = _ref.dataAttrs;
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -149,7 +151,7 @@ var TextField = function TextField(_ref) {
   useEffect(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
-  }, [value, checkSymbolMaxLimit]);
+  }, [value, checkSymbolMaxLimit, isControlled]);
   useEffect(function () {
     setTouch(detectTouch());
   }, []);
@@ -157,7 +159,7 @@ var TextField = function TextField(_ref) {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;
     });
-  }, [isPasswordHidden]);
+  }, []);
 
   var setTextareaHeight = function setTextareaHeight() {
     if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current)) {
@@ -180,7 +182,7 @@ var TextField = function TextField(_ref) {
 
     !isControlled && setInputValue(e.target.value);
     checkSymbolMaxLimit(e.target.value);
-    onChange && onChange(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
   var handleTextareaClick = function handleTextareaClick() {
@@ -197,25 +199,26 @@ var TextField = function TextField(_ref) {
     var isClearFuncAvailable = !customIcon && !onCustomIconClick && verification === ERROR;
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
-    onCustomIconClick && onCustomIconClick(e);
+    onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
 
     if (!isControlled && isClearFuncAvailable) {
       setInputValue('');
-      field && field.focus();
+      field === null || field === void 0 ? void 0 : field.focus();
     }
-  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, setInputValue]);
+  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, customIcon, isControlled]);
   var handleFocus = useCallback(function (e) {
-    onFocus && onFocus(e);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
   var handleBlur = useCallback(function (e) {
-    onBlur && onBlur(e);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   }, [onBlur]);
   var handleBeforeMaskChange = useCallback(function (newState, oldState, inputedValue) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
   var textareaType = textarea === TextareaTypes.FLEXIBLE ? TextareaTypes.FLEXIBLE : TextareaTypes.FIXED;
   var hasScrolling = initialTextareaHeight >= TEXTAREA_MAX_HEIGHT || isTextareaResized;
-  var commonParams = {
+
+  var commonParams = _extends(_extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input)), {
     disabled: disabled,
     id: id,
     name: name,
@@ -228,11 +231,12 @@ var TextField = function TextField(_ref) {
     placeholder: placeholder,
     required: required,
     inputMode: inputMode
-  };
+  });
 
   var inputParams = _extends(_extends({}, commonParams), {
     className: cn('field', input),
-    type: isVisiblePassword ? 'text' : type
+    type: isVisiblePassword ? 'text' : type,
+    autoComplete: autoComplete
   });
 
   var inputMaskParams = {
@@ -254,7 +258,7 @@ var TextField = function TextField(_ref) {
     }
 
     fieldNode.current = node;
-    inputRef && inputRef(node);
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
   };
 
   var getIcon = function getIcon() {
@@ -299,14 +303,14 @@ var TextField = function TextField(_ref) {
 
   var renderIconBlock = function renderIconBlock() {
     var icon = getIcon();
-    return icon && /*#__PURE__*/React.createElement("div", {
+    return icon && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconBox), {
       className: cn('icon-box', {
         error: verification === Verification.ERROR && !customIcon,
         password: isPasswordType,
         'custom-handler': !!onCustomIconClick
       }),
       onClick: handleIconClick
-    }, icon);
+    }), icon);
   };
 
   var renderInput = function renderInput() {
@@ -328,7 +332,7 @@ var TextField = function TextField(_ref) {
   var isPlaceholderShowed = isPasswordType && isPasswordHidden && !!inputValue;
   var valueHasSymbols = inputValue !== null && inputValue !== undefined;
   var currentSymbolCount = valueHasSymbols && String(inputValue).length || 0;
-  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,
       theme: theme,
@@ -337,7 +341,10 @@ var TextField = function TextField(_ref) {
       icon: !hideIcon && (!!verification || !!customIcon || type === 'password') && !textarea,
       password: isPlaceholderShowed
     }, className)
-  }, label && /*#__PURE__*/React.createElement(InputLabel, {
+  }), label && /*#__PURE__*/React.createElement(InputLabel, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label
+    },
     htmlFor: id
   }, label, required && /*#__PURE__*/React.createElement("span", {
     className: cn('require-mark')
@@ -347,12 +354,12 @@ var TextField = function TextField(_ref) {
     })
   }, renderField()), /*#__PURE__*/React.createElement("div", {
     className: cn('wrap')
-  }, noticeText && /*#__PURE__*/React.createElement("div", {
+  }, noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
     className: cn('text', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     })
-  }, noticeText), symbolCounter && /*#__PURE__*/React.createElement(Paragraph, {
+  }), noticeText), symbolCounter && /*#__PURE__*/React.createElement(Paragraph, {
     size: "small",
     hasMargin: false,
     className: cn('counter', {
@@ -370,6 +377,8 @@ TextField.propTypes = {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   type: PropTypes.oneOf(['text', 'password', 'tel', 'email']),
+  inputMode: PropTypes.oneOf(['numeric', 'tel', 'decimal', 'email', 'url', 'search', 'none']),
+  autoComplete: PropTypes.string,
   name: PropTypes.string,
   placeholder: PropTypes.string,
   id: PropTypes.string,
@@ -391,6 +400,13 @@ TextField.propTypes = {
   inputRef: PropTypes.func,
   classes: PropTypes.shape({
     input: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    label: PropTypes.objectOf(PropTypes.string.isRequired),
+    notice: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconBox: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default TextField;

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

@@ -15,8 +15,10 @@ var TextLink = function TextLink(_ref) {
       rel = _ref.rel,
       onClick = _ref.onClick,
       children = _ref.children,
-      download = _ref.download;
+      download = _ref.download,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement(Link, {
+    dataAttrs: dataAttrs,
     target: target,
     href: href,
     rel: rel,
@@ -34,6 +36,9 @@ TextLink.propTypes = {
   color: PropTypes.oneOf(['default', 'white', 'black', 'gray', 'green', 'blue', 'inherit']),
   underlineVisibility: PropTypes.oneOf(['hover', 'always']),
   underlineStyle: PropTypes.oneOf(['solid', 'dashed', 'border', 'none']),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
 };
 TextLink.defaultProps = {

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Tile.less';
 export declare const Theme: {
     readonly LIGHT: "light";
@@ -18,7 +17,7 @@ export declare const Shadow: {
     readonly HOVER: "hover";
 };
 declare type ShadowType = typeof Shadow[keyof typeof Shadow];
-export interface ITileProps extends IFilterDataAttrs {
+export interface ITileProps {
     /** Ссылка */
     href?: string;
     /** Тема */
@@ -31,6 +30,10 @@ export interface ITileProps extends IFilterDataAttrs {
     isInteractive?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     /** Обработчик клика */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }

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

@@ -36,7 +36,7 @@ var Tile = function Tile(_ref) {
       dataAttrs = _ref.dataAttrs;
 
   var handleClick = function handleClick(e) {
-    onClick && onClick(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
 
   var isPointer = !!href || isInteractive;
@@ -49,7 +49,7 @@ var Tile = function Tile(_ref) {
       interactive: isInteractive
     }, className),
     onClick: handleClick
-  }, filterDataAttrs(dataAttrs)), href && /*#__PURE__*/React.createElement("a", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/React.createElement("a", {
     href: href,
     className: cn('link')
   }, children), !href && children);

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

@@ -46,6 +46,11 @@ export interface ITooltipProps {
         content?: string;
         contentShadow?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        content?: Record<string, string>;
+    };
     /** Обработчик на открытие */
     onOpen?: (e: AccessibilityEventTypeNative) => void;
     /** Обработчик на закрытие */

package/dist/es/components/Tooltip/Tooltip.js

@@ -4,7 +4,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { usePopper } from 'react-popper';
 import Tile from "../Tile/Tile";
@@ -52,6 +52,7 @@ var Tooltip = function Tooltip(_ref) {
       arrowClassName = _ref$classes.arrow,
       contentClassName = _ref$classes.content,
       contentShadowClassName = _ref$classes.contentShadow,
+      dataAttrs = _ref.dataAttrs,
       onOpen = _ref.onOpen,
       onClose = _ref.onClose;
   var currentTrigger = triggerElement.current;
@@ -75,7 +76,7 @@ var Tooltip = function Tooltip(_ref) {
 
   useEffect(function () {
     return setIsOpen(isOpened);
-  }, [isOpened, setIsOpen]);
+  }, [isOpened]);
   var options = useMemo(function () {
     return {
       placement: placement,
@@ -103,7 +104,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }]
     };
-  }, [placement, arrowElement, currentBoundary, isOpen]);
+  }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
 
   var _usePopper = usePopper(currentTarget, popperElement, options),
       styles = _usePopper.styles,
@@ -111,7 +112,7 @@ var Tooltip = function Tooltip(_ref) {
       update = _usePopper.update;
 
   useEffect(function () {
-    update && update();
+    update === null || update === void 0 ? void 0 : update();
   }, [children, update]);
 
   var _useState7 = useState(false),
@@ -121,7 +122,7 @@ var Tooltip = function Tooltip(_ref) {
 
   useEffect(function () {
     return setIsTouchDevice(detectTouch());
-  }, [detectTouch, setIsTouchDevice]);
+  }, []);
   var clickEvent = useMemo(function () {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
@@ -131,9 +132,9 @@ var Tooltip = function Tooltip(_ref) {
   var handleMouseEnter = useCallback(function (e) {
     if (!isOpen) {
       setIsOpen(true);
-      onOpen && onOpen(e);
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen(e);
     }
-  }, [isOpen, onOpen, setIsOpen]);
+  }, [isOpen, onOpen]);
   var handleClick = useCallback(function (e) {
     if (!checkNativeEventIsClickOrEnterPress(e)) {
       return;
@@ -144,24 +145,24 @@ var Tooltip = function Tooltip(_ref) {
     });
 
     if (!isOpen) {
-      onOpen && onOpen(e);
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen(e);
     } else {
-      onClose && onClose(e);
+      onClose === null || onClose === void 0 ? void 0 : onClose(e);
     }
-  }, [isOpen, onOpen, onClose, setIsOpen]);
+  }, [isOpen, onOpen, onClose]);
   var handleOutsideEvent = useCallback(function (e) {
     var isTargetInPopper = e.target instanceof Element && popperElement && popperElement.contains(e.target);
     var isTargetInTrigger = e.target instanceof Element && currentTrigger && currentTrigger.contains(e.target);
 
     if (!isTargetInPopper && !isTargetInTrigger) {
       setIsOpen(false);
-      onClose && onClose(e);
+      onClose === null || onClose === void 0 ? void 0 : onClose(e);
     }
-  }, [onClose, currentTrigger, popperElement, setIsOpen]);
+  }, [onClose, currentTrigger, popperElement]);
   var handleBlurEvent = useCallback(function (e) {
     setIsOpen(false);
-    onClose && onClose(e);
-  }, [onClose, setIsOpen]);
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+  }, [onClose]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.HOVER) {
       if (currentTrigger) {
@@ -171,10 +172,10 @@ var Tooltip = function Tooltip(_ref) {
 
       if (isOpen) {
         document.addEventListener('mouseover', handleOutsideEvent);
-        currentTrigger && currentTrigger.addEventListener('blur', handleBlurEvent);
+        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.addEventListener('blur', handleBlurEvent);
       } else {
         document.removeEventListener('mouseover', handleOutsideEvent);
-        currentTrigger && currentTrigger.removeEventListener('blur', handleBlurEvent);
+        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.removeEventListener('blur', handleBlurEvent);
       }
 
       return function () {
@@ -188,7 +189,7 @@ var Tooltip = function Tooltip(_ref) {
     }
 
     return undefined;
-  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleMouseEnter]);
+  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleMouseEnter, handleBlurEvent]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.CLICK) {
       if (currentTrigger) {
@@ -213,8 +214,8 @@ var Tooltip = function Tooltip(_ref) {
     }
 
     return undefined;
-  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -229,6 +230,9 @@ var Tooltip = function Tooltip(_ref) {
     className: cn('arrow-shadow'),
     style: styles.arrow
   }), /*#__PURE__*/React.createElement(Tile, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content
+    },
     className: cn('content', [contentClassName])
   }, children), /*#__PURE__*/React.createElement(Tile, {
     shadowLevel: "high",
@@ -271,6 +275,10 @@ Tooltip.propTypes = {
     content: PropTypes.string,
     contentShadow: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    content: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onOpen: PropTypes.func,
   onClose: PropTypes.func
 };

package/dist/es/index.d.ts

@@ -31,6 +31,7 @@ export { default as Preloader } from './components/Preloader/Preloader';
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';
+export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Switcher } from './components/Switcher/Switcher';
 export { default as Tab } from './components/Tabs/Tab';
 export { default as Tabs } from './components/Tabs/Tabs';

package/dist/es/index.js

@@ -31,6 +31,7 @@ export { default as Preloader } from "./components/Preloader/Preloader";
 export { default as RadioButton } from "./components/RadioButton/RadioButton";
 export { default as Search } from "./components/Search/Search";
 export { default as Select } from "./components/Select/Select";
+export { default as selectReducer } from "./components/Select/reducer/selectReducer";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { default as Tab } from "./components/Tabs/Tab";
 export { default as Tabs } from "./components/Tabs/Tabs";

package/dist/lib/colors/Colors.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import './Colors.less';
-declare const Colors: () => JSX.Element;
+declare const Colors: React.FC;
 export default Colors;

package/dist/lib/components/Accordion/Accordion.css

@@ -40,25 +40,11 @@
 .mfui-accordion__content-inner {
   padding: 24px 16px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
+@media screen and (min-width: 768px) {
   .mfui-accordion__content-inner {
     padding: 24px;
   }
 }
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-accordion__content-inner {
-    padding: 24px 48px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-accordion__content-inner {
-    padding: 24px 40px;
-  }
-}
-.mfui-accordion__content-inner_v-padding {
-  padding-top: 24px;
-  padding-bottom: 24px;
-}
 .mfui-accordion__icon {
   fill: var(--content);
 }

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

@@ -1,24 +1,30 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Accordion.less';
-export interface IAccordionProps extends IFilterDataAttrs {
+export interface IAccordionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
     /** Состояние открытости */
     isOpened?: boolean;
-    /** Вертикальные отступы */
-    hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
-        openedClass?: string;
         root?: string;
+        openedClass?: string;
         collapse?: string;
         titleWrap?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        header?: Record<string, string>;
+        collapse?: Record<string, string>;
+        titleWrap?: Record<string, string>;
+        arrowUp?: Record<string, string>;
+        arrowDown?: Record<string, string>;
+    };
     /** Обработчик клика */
     onClickAccordion?: (isOpened: boolean) => void;
 }

package/dist/lib/components/Accordion/Accordion.js

@@ -50,8 +50,6 @@ var Accordion = function Accordion(_ref) {
       title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
-      _ref$hasVerticalPaddi = _ref.hasVerticalPaddings,
-      hasVerticalPaddings = _ref$hasVerticalPaddi === void 0 ? false : _ref$hasVerticalPaddi,
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -74,36 +72,34 @@ var Accordion = function Accordion(_ref) {
 
   var handleClickTitle = function handleClickTitle(e) {
     if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
-      onClickAccordion && onClickAccordion(!isOpenedState);
+      onClickAccordion === null || onClickAccordion === void 0 ? void 0 : onClickAccordion(!isOpenedState);
       setIsOpenedState(!isOpenedState);
     }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       open: isOpenedState
     }, [className, rootPropsClasses, openedClassName])
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
     className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle,
     onKeyDown: handleClickTitle
-  }, /*#__PURE__*/React.createElement(_Header["default"], {
+  }), /*#__PURE__*/React.createElement(_Header["default"], (0, _extends2["default"])({
     as: "h5"
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
     tabIndex: 0,
     role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })
-  }, isOpenedState ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null))), /*#__PURE__*/React.createElement(_Collapse["default"], {
+  }, isOpenedState ? /*#__PURE__*/React.createElement(ArrowUp, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp)) : /*#__PURE__*/React.createElement(ArrowDown, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown)))), /*#__PURE__*/React.createElement(_Collapse["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
     className: cn('content', collapsePropsClasses),
-    classNameContainer: cn('content-inner', {
-      'v-padding': hasVerticalPaddings
-    }),
+    classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }, children));
+  }), children));
 };
 
 Accordion.propTypes = {
@@ -112,7 +108,6 @@ Accordion.propTypes = {
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
-  hasVerticalPaddings: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,
@@ -120,7 +115,14 @@ Accordion.propTypes = {
     collapse: PropTypes.string,
     titleWrap: PropTypes.string
   }),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.objectOf(PropTypes.string.isRequired),
+    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClickAccordion: PropTypes.func
 };
 var _default = Accordion;

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

@@ -34,6 +34,11 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+@media screen and (max-width: 767px) {
+  .mfui-banner__arrow {
+    display: none;
+  }
+}
 .mfui-banner__arrow_prev {
   left: 12px;
 }
@@ -98,6 +103,29 @@
 .mfui-banner__pagination_theme_dark {
   background-color: var(--stcBlack20);
 }
+.mfui-banner__pagination_bottom-offset {
+  bottom: 60px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 89px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 90px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 65px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 72px;
+  }
+}
 .mfui-banner__dot {
   width: 12px;
   height: 12px;

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

@@ -16,6 +16,18 @@ export interface IBannerProps {
         slide?: string;
         arrow?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        swiper?: Record<string, string>;
+        slide?: Record<string, string>;
+        arrowPrev?: Record<string, string>;
+        arrowNext?: Record<string, string>;
+        pagination?: Record<string, string>;
+        dot?: Record<string, string>;
+    };
+    /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
+    withPaginationBottomOffset?: boolean;
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */