@megafon/ui-core 2.1.3 → 2.4.0

package/dist/es/components/Select/Select.js

@@ -89,12 +89,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
     _this.handleOpened = function () {
       var onOpened = _this.props.onOpened;
-      onOpened && onOpened();
+      onOpened === null || onOpened === void 0 ? void 0 : onOpened();
     };
 
     _this.handleClosed = function () {
       var onClosed = _this.props.onClosed;
-      onClosed && onClosed();
+      onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     };
 
     _this.handleClickOutside = function (e) {
@@ -153,7 +153,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         isChoosenItem: true
       });
 
-      onSelect && onSelect(e, item);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
 
       _this.handleClosed();
     };
@@ -193,7 +193,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var filterValue = e.target.value;
 
       if (isChoosenItem) {
-        onSelect && onSelect(null);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(null);
       }
 
       _this.setState({
@@ -311,7 +311,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.getNodeList = function (node) {
-      return _this.itemsNodeList.push(node);
+      _this.itemsNodeList.push(node);
     };
 
     _this.state = {

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

@@ -17,7 +17,7 @@ var Switcher = function Switcher(props) {
       return;
     }
 
-    onChange && onChange(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/components/Tabs/Tabs.js

@@ -96,36 +96,41 @@ var Tabs = function Tabs(_ref) {
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      underlineWidth = _React$useState10[0],
-      setUnderlineWidth = _React$useState10[1];
+      activeTabWidth = _React$useState10[0],
+      setActiveTabWidth = _React$useState10[1];
 
   var _React$useState11 = React.useState(0),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      underlineTranslate = _React$useState12[0],
-      setUnderlineTranslate = _React$useState12[1];
+      underlineWidth = _React$useState12[0],
+      setUnderlineWidth = _React$useState12[1];
 
-  var _React$useState13 = React.useState('none'),
+  var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      underlineTransition = _React$useState14[0],
-      setUnderlineTransition = _React$useState14[1];
+      underlineTranslate = _React$useState14[0],
+      setUnderlineTranslate = _React$useState14[1];
 
-  var _React$useState15 = React.useState('auto'),
+  var _React$useState15 = React.useState('none'),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      tabListHeight = _React$useState16[0],
-      setTabListHeight = _React$useState16[1];
+      underlineTransition = _React$useState16[0],
+      setUnderlineTransition = _React$useState16[1];
 
-  var _React$useState17 = React.useState(false),
+  var _React$useState17 = React.useState('auto'),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      isSticky = _React$useState18[0],
-      setSticky = _React$useState18[1];
+      tabListHeight = _React$useState18[0],
+      setTabListHeight = _React$useState18[1];
 
-  var _React$useState19 = React.useState({
+  var _React$useState19 = React.useState(false),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      isSticky = _React$useState20[0],
+      setSticky = _React$useState20[1];
+
+  var _React$useState21 = React.useState({
     left: 0,
     right: 0
   }),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      stickyOffset = _React$useState20[0],
-      setStickyOffset = _React$useState20[1];
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      stickyOffset = _React$useState22[0],
+      setStickyOffset = _React$useState22[1];
 
   var setTabRef = React.useCallback(function (tab) {
     tab && tabsRef.current.push(tab);
@@ -135,12 +140,6 @@ var Tabs = function Tabs(_ref) {
       return;
     }
 
-    var tabNodeChild = tabsRef.current[currentIndex].firstElementChild;
-
-    var _ref2 = tabNodeChild || {},
-        _ref2$clientWidth = _ref2.clientWidth,
-        clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
-
     var translate = _toConsumableArray(tabsRef.current).splice(0, currentIndex).reduce(function (accWidth, node) {
       var _node$getBoundingClie = node.getBoundingClientRect(),
           width = _node$getBoundingClie.width;
@@ -148,9 +147,9 @@ var Tabs = function Tabs(_ref) {
       return accWidth + width;
     }, 0);
 
-    setUnderlineWidth(clientWidth);
+    setUnderlineWidth(activeTabWidth);
     setUnderlineTranslate(translate);
-  }, [currentIndex]);
+  }, [currentIndex, activeTabWidth]);
   var calculateSticky = React.useCallback(function () {
     if (!sticky || !rootRef.current || !tabListRef.current) {
       return;
@@ -165,11 +164,11 @@ var Tabs = function Tabs(_ref) {
       left: left,
       right: documentWidth - right
     });
-  }, [stickyOffset, isSticky]);
+  }, [sticky]);
   var handleTabInnerClick = React.useCallback(function (index) {
     return function () {
       setUnderlineTransition('all');
-      onTabClick && onTabClick(index);
+      onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(index);
 
       if (outerIndex === undefined) {
         setInnerIndex(index);
@@ -218,7 +217,7 @@ var Tabs = function Tabs(_ref) {
         ref: setTabRef
       }, filterDataAttrs(dataAttrs)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
-  }, [renderTab, children]);
+  }, [renderTab, children, activeTabClass, currentIndex, setTabRef, tabClass]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
       var panel = child.props.children;
@@ -234,7 +233,7 @@ var Tabs = function Tabs(_ref) {
         })
       }, panel);
     });
-  }, [children, currentIndex]);
+  }, [children, currentIndex, renderOnlyCurrentPanel]);
   var handleReachBeginning = React.useCallback(function (swiper) {
     setBeginning(swiper.isBeginning);
   }, []);
@@ -246,15 +245,16 @@ var Tabs = function Tabs(_ref) {
     setEnd(swiper.isEnd);
   }, []);
   React.useEffect(function () {
+    var rootRefNode = rootRef.current;
     var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (_ref3) {
-        var isIntersecting = _ref3.isIntersecting,
-            _ref3$boundingClientR = _ref3.boundingClientRect,
-            top = _ref3$boundingClientR.top,
-            left = _ref3$boundingClientR.left,
-            right = _ref3$boundingClientR.right;
-
-        if (!sticky || !rootRef.current || !tabListRef.current) {
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+            _ref2$boundingClientR = _ref2.boundingClientRect,
+            top = _ref2$boundingClientR.top,
+            left = _ref2$boundingClientR.left,
+            right = _ref2$boundingClientR.right;
+
+        if (!sticky || !rootRefNode || !tabListRef.current) {
           return;
         }
 
@@ -287,22 +287,32 @@ var Tabs = function Tabs(_ref) {
     }, {
       threshold: [0, 1]
     });
-    rootRef.current && observer.observe(rootRef.current);
+    rootRefNode && observer.observe(rootRefNode);
     return function () {
-      rootRef.current && observer.unobserve(rootRef.current);
+      rootRefNode && observer.unobserve(rootRefNode);
     };
-  }, [calculateSticky]);
+  }, [calculateSticky, sticky]);
   React.useEffect(function () {
     var handleResize = throttle(function () {
-      calculateUnderline();
       calculateSticky();
     }, 300);
+    var activeTabNode = tabsRef.current[currentIndex];
+    var resizeObserver = new ResizeObserver(function (entries) {
+      if (!entries.length || !entries[0]) {
+        return;
+      }
+
+      var width = entries[0].contentRect.width;
+      setActiveTabWidth(width);
+      calculateUnderline();
+    });
     calculateUnderline();
+    resizeObserver.observe(activeTabNode);
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
     };
-  }, [calculateUnderline, calculateSticky]);
+  }, [calculateUnderline, calculateSticky, currentIndex]);
   React.useEffect(function () {
     if (!swiperInstance) {
       return;

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

@@ -62,8 +62,10 @@ export declare type TextFieldProps = {
     classes?: {
         input?: string;
     };
-    /** Аргумент элемента input */
+    /** Атрибут элемента input */
     inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';
+    /** Атрибут элемента input. Не работает с textarea=true */
+    autoComplete?: string;
     /** Переводит компонент в контролируемое состояние */
     isControlled?: boolean;
     /** Обработчик изменения значения */

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

@@ -96,6 +96,7 @@ 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;
@@ -149,7 +150,7 @@ var TextField = function TextField(_ref) {
   useEffect(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
-  }, [value, checkSymbolMaxLimit]);
+  }, [value, checkSymbolMaxLimit, isControlled]);
   useEffect(function () {
     setTouch(detectTouch());
   }, []);
@@ -157,7 +158,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 +181,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,18 +198,18 @@ 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);
@@ -232,7 +233,8 @@ var TextField = function TextField(_ref) {
 
   var inputParams = _extends(_extends({}, commonParams), {
     className: cn('field', input),
-    type: isVisiblePassword ? 'text' : type
+    type: isVisiblePassword ? 'text' : type,
+    autoComplete: autoComplete
   });
 
   var inputMaskParams = {
@@ -254,7 +256,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() {
@@ -370,6 +372,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,

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;

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

@@ -82,7 +82,7 @@ var Tooltip = function Tooltip(_ref) {
 
   useEffect(function () {
     return setIsOpen(isOpened);
-  }, [isOpened, setIsOpen]);
+  }, [isOpened]);
   var options = useMemo(function () {
     return {
       placement: placement,
@@ -110,7 +110,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }]
     };
-  }, [placement, arrowElement, currentBoundary, isOpen]);
+  }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
 
   var _usePopper = usePopper(currentTarget, popperElement, options),
       styles = _usePopper.styles,
@@ -118,7 +118,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),
@@ -128,7 +128,7 @@ var Tooltip = function Tooltip(_ref) {
 
   useEffect(function () {
     return setIsTouchDevice(detectTouch());
-  }, [detectTouch, setIsTouchDevice]);
+  }, []);
   var clickEvent = useMemo(function () {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
@@ -138,9 +138,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 (!checkEventIsClickOrEnterPress(e)) {
       return;
@@ -151,24 +151,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) {
@@ -178,10 +178,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 () {
@@ -195,7 +195,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) {
@@ -220,7 +220,7 @@ var Tooltip = function Tooltip(_ref) {
     }
 
     return undefined;
-  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick]);
+  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       paddings: paddings,

package/dist/lib/colors/Colors.css

@@ -70,13 +70,13 @@ h5 {
   }
 }
 .colors__list {
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
   padding-bottom: 12px;
 }
 @media screen and (max-width: 1023px) {
   .colors__list {
-    -webkit-box-pack: space-evenly;
-        -ms-flex-pack: space-evenly;
-            justify-content: space-evenly;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;

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/colors/Colors.js

@@ -256,7 +256,7 @@ var Colors = function Colors() {
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(secondary)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
-    all: "5",
+    all: "10",
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(system))), /*#__PURE__*/React.createElement(_Grid["default"], null, /*#__PURE__*/React.createElement(_GridColumn["default"], {
@@ -265,7 +265,7 @@ var Colors = function Colors() {
     tablet: "12"
   }, renderColorBlock(gradientColors)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
     all: "3",
-    leftOffsetWide: "1",
+    leftOffsetWide: "2",
     leftOffsetTablet: "1",
     leftOffsetDesktop: "1",
     mobile: "12",

package/dist/lib/colors/colorsData.js

@@ -73,6 +73,15 @@ var colors = {
       }, {
         name: 'Background',
         code: '#FFFFFF'
+      }, {
+        name: 'Button Hov. G.',
+        code: '#10E272'
+      }, {
+        name: 'Button Hov. P.',
+        code: '#A500BF'
+      }, {
+        name: 'Button Down',
+        code: '#404D46'
       }]
     }
   },

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

@@ -9,6 +9,7 @@ export interface IAccordionProps extends IFilterDataAttrs {
     /** Состояние открытости */
     isOpened?: boolean;
     /** Вертикальные отступы */
+    /** @deprecated */
     hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;

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

@@ -73,7 +73,7 @@ var Accordion = function Accordion(_ref) {
   }, [isOpened]);
 
   var handleClickTitle = function handleClickTitle() {
-    onClickAccordion && onClickAccordion(!isOpenedState, title);
+    onClickAccordion === null || onClickAccordion === void 0 ? void 0 : onClickAccordion(!isOpenedState, title);
     setIsOpenedState(!isOpenedState);
   };
 
@@ -107,7 +107,9 @@ Accordion.propTypes = {
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
-  hasVerticalPaddings: PropTypes.bool,
+  hasVerticalPaddings: function hasVerticalPaddings(props, propName) {
+    return props[propName] && new Error('Failed prop type: Prop "hasVerticalPaddings" is deprecated');
+  },
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

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

@@ -41,6 +41,11 @@ h5 {
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+@media screen and (max-width: 767px) {
+  .mfui-banner__arrow {
+    display: none;
+  }
+}
 .mfui-banner__arrow_prev {
   left: 12px;
 }
@@ -105,6 +110,29 @@ h5 {
 .mfui-banner__pagination_theme_dark {
   background-color: rgba(0, 0, 0, 0.25);
 }
+.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,8 @@ export interface IBannerProps {
         slide?: string;
         arrow?: string;
     };
+    /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
+    withPaginationBottomOffset?: boolean;
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */

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

@@ -59,6 +59,8 @@ var Banner = function Banner(_ref) {
   var className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
+      _ref$withPaginationBo = _ref.withPaginationBottomOffset,
+      withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
       _ref$autoPlay = _ref.autoPlay,
       autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
       _ref$autoPlayDelay = _ref.autoPlayDelay,
@@ -110,7 +112,8 @@ var Banner = function Banner(_ref) {
       return;
     }
 
-    autoplay.stop();
+    autoplay.stop(); // eslint-disable-next-line no-param-reassign
+
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
@@ -120,18 +123,18 @@ var Banner = function Banner(_ref) {
     }
 
     swiperInstance.slidePrev();
-    onPrevClick && onPrevClick(swiperInstance.realIndex);
+    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onPrevClick]);
+  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
     }
 
     swiperInstance.slideNext();
-    onNextClick && onNextClick(swiperInstance.realIndex);
+    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onNextClick]);
+  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
   var handleDotClick = React.useCallback(function (index) {
     if (!swiperInstance) {
       return;
@@ -143,9 +146,9 @@ var Banner = function Banner(_ref) {
       swiperInstance.slideTo(index);
     }
 
-    onDotClick && onDotClick(swiperInstance.realIndex);
+    onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, loop, onDotClick]);
+  }, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
   var handleSwiper = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
   }, []);
@@ -168,8 +171,8 @@ var Banner = function Banner(_ref) {
   var handleSlideChange = React.useCallback(function (_ref4) {
     var realIndex = _ref4.realIndex;
     setActiveIndex(realIndex);
-    onChange && onChange(realIndex);
-  }, []);
+    onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
+  }, [onChange]);
   var handleAutoplayStop = React.useCallback(function () {
     setAutoPlayning(false);
   }, []);
@@ -210,7 +213,8 @@ var Banner = function Banner(_ref) {
     theme: navArrowTheme
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('pagination', {
-      theme: navTheme
+      theme: navTheme,
+      'bottom-offset': withPaginationBottomOffset
     })
   }, React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(_BannerDot["default"], {
@@ -231,6 +235,7 @@ Banner.propTypes = {
   classes: PropTypes.shape({
     slide: PropTypes.string
   }),
+  withPaginationBottomOffset: PropTypes.bool,
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),