@megafon/ui-core 2.1.4 → 2.5.0

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

@@ -41,6 +41,8 @@ export interface ITabsProps {
     defaultIndex?: number;
     /** Рендер содержимого только для текущего таба */
     renderOnlyCurrentPanel?: boolean;
+    /** Внешний контейнер для режима фиксация табов */
+    outerObserveContainer?: HTMLDivElement | null;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

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

@@ -67,10 +67,12 @@ var Tabs = function Tabs(_ref) {
       _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
       renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
-      onTabClick = _ref.onTabClick;
+      onTabClick = _ref.onTabClick,
+      outerObserveContainer = _ref.outerObserveContainer;
   var tabsRef = React.useRef([]);
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
+  var intersectionObserverRef = React.useRef();
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -164,11 +166,70 @@ var Tabs = function Tabs(_ref) {
       left: left,
       right: documentWidth - right
     });
-  }, [stickyOffset, isSticky]);
+  }, [sticky]);
+  var stickyON = React.useCallback(function (leftOffset, rightOffset) {
+    var documentWidth = document.documentElement.clientWidth;
+    setStickyOffset({
+      left: leftOffset,
+      right: documentWidth - rightOffset
+    });
+    setSticky(true);
+  }, []);
+  var stickyOFF = React.useCallback(function () {
+    setStickyOffset({
+      left: 0,
+      right: 0
+    });
+    setSticky(false);
+  }, []);
+  var isContainerNotFitViewport = React.useCallback(function () {
+    var _a;
+
+    var containerHeight = (_a = outerObserveContainer || rootRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    return containerHeight && containerHeight > window.innerHeight;
+  }, [outerObserveContainer]);
+  var addIntersectionObserver = React.useCallback(function () {
+    var observerOptions = {
+      threshold: [0, 1]
+    };
+
+    if (isContainerNotFitViewport()) {
+      observerOptions.rootMargin = '0px 0px -100%';
+    }
+
+    intersectionObserverRef.current = new IntersectionObserver(function (entries) {
+      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 (!tabListRef.current) {
+          return;
+        }
+
+        var _tabListRef$current$g = tabListRef.current.getBoundingClientRect(),
+            height = _tabListRef$current$g.height,
+            tabListNodeLeft = _tabListRef$current$g.left,
+            tabListNodeRight = _tabListRef$current$g.right;
+
+        var leftOffset = outerObserveContainer ? tabListNodeLeft : left;
+        var rightOffset = outerObserveContainer ? tabListNodeRight : right;
+        setTabListHeight(height);
+
+        if (isIntersecting) {
+          top < 0 ? stickyON(leftOffset, rightOffset) : stickyOFF();
+        } else {
+          stickyOFF();
+        }
+      });
+    }, observerOptions);
+  }, [isContainerNotFitViewport, outerObserveContainer, stickyOFF, stickyON]);
   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);
@@ -186,6 +247,28 @@ var Tabs = function Tabs(_ref) {
   var handleNextArrowClick = React.useCallback(function () {
     swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
   }, [swiperInstance]);
+  var handleReachBeginning = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+  }, []);
+  var handleReachEnd = React.useCallback(function (swiper) {
+    setEnd(swiper.isEnd);
+  }, []);
+  var handleFromEdge = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+  }, []);
+  var addObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
+  var removeObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
   var renderTab = React.useCallback(function (index, title, icon, href) {
     var ElementType = href ? 'a' : 'div';
     return /*#__PURE__*/React.createElement(ElementType, {
@@ -217,7 +300,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;
@@ -233,67 +316,27 @@ var Tabs = function Tabs(_ref) {
         })
       }, panel);
     });
-  }, [children, currentIndex]);
-  var handleReachBeginning = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-  }, []);
-  var handleReachEnd = React.useCallback(function (swiper) {
-    setEnd(swiper.isEnd);
-  }, []);
-  var handleFromEdge = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-    setEnd(swiper.isEnd);
-  }, []);
+  }, [children, currentIndex, renderOnlyCurrentPanel]);
   React.useEffect(function () {
-    var observer = new IntersectionObserver(function (entries) {
-      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 || !rootRef.current || !tabListRef.current) {
-          return;
-        }
-
-        var listHeight = tabListRef.current.clientHeight;
-        setTabListHeight(listHeight);
-
-        var stickyON = function stickyON(leftOffset, rightOffset) {
-          var documentWidth = document.documentElement.clientWidth;
-          setStickyOffset({
-            left: leftOffset,
-            right: documentWidth - rightOffset
-          });
-          setSticky(true);
-        };
-
-        var stickyOFF = function stickyOFF() {
-          setStickyOffset({
-            left: 0,
-            right: 0
-          });
-          setSticky(false);
-        };
+    if (!sticky) {
+      return undefined;
+    }
 
-        if (isIntersecting) {
-          top < 0 ? stickyON(left, right) : stickyOFF();
-        } else {
-          top < 0 && stickyOFF();
-        }
-      });
-    }, {
-      threshold: [0, 1]
-    });
-    rootRef.current && observer.observe(rootRef.current);
+    addIntersectionObserver();
+    addObserveEvent();
     return function () {
-      rootRef.current && observer.unobserve(rootRef.current);
+      removeObserveEvent();
     };
-  }, [calculateSticky]);
+  }, [addIntersectionObserver, sticky, addObserveEvent, removeObserveEvent]);
   React.useEffect(function () {
     var handleResize = throttle(function () {
       calculateSticky();
+
+      if (sticky && isContainerNotFitViewport()) {
+        removeObserveEvent();
+        addIntersectionObserver();
+        addObserveEvent();
+      }
     }, 300);
     var activeTabNode = tabsRef.current[currentIndex];
     var resizeObserver = new ResizeObserver(function (entries) {
@@ -310,8 +353,9 @@ var Tabs = function Tabs(_ref) {
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
+      resizeObserver.unobserve(activeTabNode);
     };
-  }, [calculateUnderline, calculateSticky]);
+  }, [sticky, currentIndex, addObserveEvent, calculateSticky, removeObserveEvent, calculateUnderline, addIntersectionObserver, isContainerNotFitViewport]);
   React.useEffect(function () {
     if (!swiperInstance) {
       return;
@@ -390,6 +434,7 @@ Tabs.propTypes = {
   currentIndex: PropTypes.number,
   defaultIndex: PropTypes.number,
   renderOnlyCurrentPanel: PropTypes.bool,
+  outerObserveContainer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.any]),
   onTabClick: PropTypes.func
 };
 export default Tabs;

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.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.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)),

package/dist/lib/components/Button/Button.js

@@ -123,7 +123,7 @@ var Button = function Button(_ref) {
       return;
     }
 
-    onClick && onClick(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   }, [disabled, onClick]);
 
   var currentTheme = _react["default"].useMemo(function () {
@@ -185,7 +185,7 @@ var Button = function Button(_ref) {
       sizeTablet: sizeTablet && getLoaderSize(sizeTablet),
       sizeMobile: sizeMobile && getLoaderSize(sizeMobile)
     });
-  }, [sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile]);
+  }, [sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile, loaderColor]);
 
   var setRelAttribute = function setRelAttribute() {
     if (ElementType !== 'a') {

package/dist/lib/components/Calendar/Calendar.js

@@ -146,7 +146,7 @@ var Calendar = function Calendar(_ref) {
   (0, _react.useEffect)(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    propsStartDate && goToDate(propsStartDate);
+    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -211,7 +211,7 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
-    onChange && onChange(nextStartDate, nextEndDate);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 
   var handleDateHover = function handleDateHover(date) {
@@ -255,7 +255,7 @@ var Calendar = function Calendar(_ref) {
   var renderMonths = function renderMonths() {
     return activeMonths.map(function (_ref2) {
       var month = _ref2.month,
-          year = _ref2.year;
+          year = _ref2.year; // eslint-disable-next-line react-hooks/rules-of-hooks
 
       var _useMonth = (0, _hooks.useMonth)({
         year: year,