@megafon/ui-core 4.0.0-beta.2 → 4.0.0-beta.20

package/CHANGELOG.md

@@ -3,51 +3,216 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [4.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.1...@megafon/ui-core@4.0.0-beta.2) (2022-06-01)
+# [4.0.0-beta.20](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.19...@megafon/ui-core@4.0.0-beta.20) (2022-08-24)
+
+
+### Bug Fixes
+
+* **textfield:** returned correct color to notice text ([d6ef976](https://github.com/MegafonWebLab/megafon-ui/commit/d6ef976f755e1fb55d7fd2e462095459d96b74c9))
+
+
+
+
+
+# [4.0.0-beta.19](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.18...@megafon/ui-core@4.0.0-beta.19) (2022-08-23)
+
+
+### Bug Fixes
+
+* **notification:** fix bottom gaps ([1427080](https://github.com/MegafonWebLab/megafon-ui/commit/14270809ec97d18dbdf19183111b9034114d9437))
+* **search:** add modifier for item paddings ([9df5792](https://github.com/MegafonWebLab/megafon-ui/commit/9df5792d6828f852bed9c1c4e64404667e8d2cd7))
+* **select:** add modifier for item paddings ([e5f9735](https://github.com/MegafonWebLab/megafon-ui/commit/e5f97353c9686fba070aad48d3816ec0ce12d5d9))
+
+
+
+
+
+# [4.0.0-beta.18](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.17...@megafon/ui-core@4.0.0-beta.18) (2022-08-22)
+
+
+### Bug Fixes
+
+* **tabs:** fix swiper overflow and box-sizing ([bbfb09d](https://github.com/MegafonWebLab/megafon-ui/commit/bbfb09d86223c3dc1f70aaa2a03d108256c3a37d))
+
+
+
+
+
+# [4.0.0-beta.17](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.16...@megafon/ui-core@4.0.0-beta.17) (2022-08-22)
+
+
+### Bug Fixes
+
+* **select:** fix items overflow ([6c795a3](https://github.com/MegafonWebLab/megafon-ui/commit/6c795a35ae27e8100edd6d6ec7456962b8f62a41))
+* **tabs:** fix container alignment ([2bd4f31](https://github.com/MegafonWebLab/megafon-ui/commit/2bd4f31fba455a817e9597103c25ca97fe33d2d8))
+
+
+
+
+
+# [4.0.0-beta.16](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.15...@megafon/ui-core@4.0.0-beta.16) (2022-08-17)
+
+
+### Bug Fixes
+
+* **textfield:** fixes permanently visible block after the field ([9cc5184](https://github.com/MegafonWebLab/megafon-ui/commit/9cc5184f7b60a7f7dcfe3f9f49cc3199787a77d7))
+
+
+
+
+
+# [4.0.0-beta.15](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.14...@megafon/ui-core@4.0.0-beta.15) (2022-08-15)
+
+
+### Bug Fixes
+
+* **textfield:** fix label styles ([080f8fa](https://github.com/MegafonWebLab/megafon-ui/commit/080f8faa3ef8ec954704466dc5b56d0313487787))
 
 
 ### Features
 
-* **textfield:** update by new design ([8d11972](https://github.com/MegafonWebLab/megafon-ui/commit/8d11972c73374df0d0a66d4607eb87bb4190e92e))
+* **textfield:** add prop hidePlaceholder ([1c0176e](https://github.com/MegafonWebLab/megafon-ui/commit/1c0176ebdae47d11ac972ada200303500618caf1))
 
 
-### BREAKING CHANGES
 
-* **textfield:** add placeholders text by default
- label element positon changed
- if label prop not setted, label element has text from placeholder (default or in props)
 
 
+# [4.0.0-beta.14](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.13...@megafon/ui-core@4.0.0-beta.14) (2022-08-08)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
+# [4.0.0-beta.13](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.12...@megafon/ui-core@4.0.0-beta.13) (2022-08-08)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
+# [4.0.0-beta.12](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.11...@megafon/ui-core@4.0.0-beta.12) (2022-08-02)
+
+
+### Bug Fixes
+
+* **select:** update value check for undefined ([06f8dbf](https://github.com/MegafonWebLab/megafon-ui/commit/06f8dbfb065eaef7f6151cb88cebffe68d668ef8))
+
+
+
+
+
+# [4.0.0-beta.11](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.10...@megafon/ui-core@4.0.0-beta.11) (2022-07-27)
+
+
+### Features
+
+* **search:** changed dropdown list item height ([25ceb63](https://github.com/MegafonWebLab/megafon-ui/commit/25ceb633cdc9922e2a93af919c742b1db82f2f57))
+* **select:** fixed label position with empty string value and minor style changes ([f436d5c](https://github.com/MegafonWebLab/megafon-ui/commit/f436d5c65f0aa874d12cd8d1540698644d57a3db))
+
+
+
+
+
+# [4.0.0-beta.10](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.9...@megafon/ui-core@4.0.0-beta.10) (2022-07-15)
+
+
+### Bug Fixes
+
+* **accordion:** update mobile styles ([910b1c8](https://github.com/MegafonWebLab/megafon-ui/commit/910b1c8f987f1043e362b089a3ff4cfe9638070d))
+
+
+
+
+
+# [4.0.0-beta.9](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.8...@megafon/ui-core@4.0.0-beta.9) (2022-07-15)
+
+
+### Bug Fixes
+
+* **select:** update styles ([b863c8c](https://github.com/MegafonWebLab/megafon-ui/commit/b863c8c94af251d6b3c9ee39124486d7d5db9a58))
+
+
+
+
+
+# [4.0.0-beta.8](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.7...@megafon/ui-core@4.0.0-beta.8) (2022-07-14)
+
+
+### Bug Fixes
+
+* **accordion:** change focus and dark theme styles ([d3e07ea](https://github.com/MegafonWebLab/megafon-ui/commit/d3e07ea6fee0c131e25db1bb558d8b205d201e0c))
+* **notification:** change title typography ([f91a60e](https://github.com/MegafonWebLab/megafon-ui/commit/f91a60ee1562626494358ef529321f072ba70890))
+* **tabs:** change dark theme and indents styles ([272dfcb](https://github.com/MegafonWebLab/megafon-ui/commit/272dfcbeef750f2f7ae097b46f7d98405cf53a88))
+
+
+### Features
+
+* **header:** add new prop space ([e5bef7c](https://github.com/MegafonWebLab/megafon-ui/commit/e5bef7c8e13c57e477a4c25f07a4a4a6dbb8b6bd))
+
+
+
+
+
+# [4.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.6...@megafon/ui-core@4.0.0-beta.7) (2022-07-13)
+
+
+### Bug Fixes
+
+* **select:** fix styles ([3e79c68](https://github.com/MegafonWebLab/megafon-ui/commit/3e79c68fecde72e515b7ef52d38d9188e51680f6))
 
 
 
-# [4.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.0...@megafon/ui-core@4.0.0-beta.1) (2022-05-27)
+
+
+# [4.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.5...@megafon/ui-core@4.0.0-beta.6) (2022-07-05)
 
 
 ### Features
 
-* **accordion:** update by new design ([331f8dc](https://github.com/MegafonWebLab/megafon-ui/commit/331f8dcb55d3577c086eb0e6beb00fd82f064943))
+* **inputlabel:** component removed ([1f236ac](https://github.com/MegafonWebLab/megafon-ui/commit/1f236ace90acfd7ea1917422677fa24c1c5abdf4))
+* **search:** component redesign ([d6f11eb](https://github.com/MegafonWebLab/megafon-ui/commit/d6f11eb7ee810b835879c7a31e5e01c426060ea1))
+* **select:** component redesign ([aeeda00](https://github.com/MegafonWebLab/megafon-ui/commit/aeeda00dfc1db70421a495a686954e19eecf815d))
 
 
 ### BREAKING CHANGES
 
-* **accordion:** change next-sibling accordion styles
+* **inputlabel:** inputLabel component removed due to non-use
 
 
 
 
 
-# [4.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3-beta.1...@megafon/ui-core@4.0.0-beta.0) (2022-05-24)
+# [4.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.12.0...@megafon/ui-core@4.0.0-beta.5) (2022-06-29)
+
+
+### Bug Fixes
+
+* **textfield:** fix textarea design bugs ([287d426](https://github.com/MegafonWebLab/megafon-ui/commit/287d42644b24ca0e1a3824d5907d8af78293d0e3))
+* **textfield:** update textarea scroll and resize ([9dbce52](https://github.com/MegafonWebLab/megafon-ui/commit/9dbce52d6bc3a71076ffdf2365715204231da774))
 
 
 ### Features
 
-* **caption:** add new Caption component; update .smallFont() less mixin ([603bed3](https://github.com/MegafonWebLab/megafon-ui/commit/603bed3ce782676b22381e3d4df5dae141fb015c))
-* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ef15841](https://github.com/MegafonWebLab/megafon-ui/commit/ef15841474473739d3ac88da7a8737e183ff288a))
+* **accordion:** update by new design ([92dab3a](https://github.com/MegafonWebLab/megafon-ui/commit/92dab3a367544d8507526e7a57a0a9a4015e3acf))
+* **caption:** add new Caption component; update .smallFont() less mixin ([b02a3f7](https://github.com/MegafonWebLab/megafon-ui/commit/b02a3f73ed8d5390d8427ab0a6bc62210710ba40))
+* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ffb6bc7](https://github.com/MegafonWebLab/megafon-ui/commit/ffb6bc709a4ef91536e359d5f9edc5501caf0c2c))
+* **tabs:** update by new design ([20ae2cc](https://github.com/MegafonWebLab/megafon-ui/commit/20ae2cc695e1245b9cd06fe37a9e4e3bb0c7eaae))
+* **textfield:** update by new design ([24ec769](https://github.com/MegafonWebLab/megafon-ui/commit/24ec769aeddac9a198941727aaca02ad0fb816f1))
 
 
 ### BREAKING CHANGES
 
+* **textfield:** add defaultTransitionTiming in less global variables
+* **tabs:** new prop autoWidth added
+size prop small vallue removed
+new sizes
+* **textfield:** add placeholders text by default
+ label element positon changed
+ if label prop not setted, label element has text from placeholder (default or in props)
+* **accordion:** change next-sibling accordion styles
 * **caption:** .smallFont() less mixin line-height rule now set to 18px instead of 16px
 either accept new rules or manually add line-height: 16px in your components
 * **paragraph:** prop 'size' is no longer exists.
@@ -57,17 +222,122 @@ use component Caption instead of Paragraph size="small"
 
 
 
-## [3.5.3-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3-beta.0...@megafon/ui-core@3.5.3-beta.1) (2022-05-06)
+# [3.12.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.11.0...@megafon/ui-core@3.12.0) (2022-06-28)
 
-**Note:** Version bump only for package @megafon/ui-core
 
+### Features
 
+* **tab:** add data-attribute for inner element ([43e58e1](https://github.com/MegafonWebLab/megafon-ui/commit/43e58e12b8da661020f4b48f55245492c21ad376))
 
 
 
-## [3.5.3-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3-beta.0) (2022-04-13)
 
-**Note:** Version bump only for package @megafon/ui-core
+
+# [3.11.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.10.1...@megafon/ui-core@3.11.0) (2022-06-21)
+
+
+### Bug Fixes
+
+* **button:** fix font styles for extra small size ([f475b05](https://github.com/MegafonWebLab/megafon-ui/commit/f475b05ab9d62aa56645fb90ccdef88996e72a70))
+
+
+### Features
+
+* **button:** add prop ellipsis ([1978277](https://github.com/MegafonWebLab/megafon-ui/commit/1978277a918cb680e32259042c1a7e3c58056b1b))
+* **notification:** add ability to display button and collapse ([a5fe2f0](https://github.com/MegafonWebLab/megafon-ui/commit/a5fe2f0730b71469c2fb06a148b0e4574adb2d7b))
+
+
+
+
+
+## [3.10.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.10.0...@megafon/ui-core@3.10.1) (2022-06-07)
+
+
+### Bug Fixes
+
+* **banner:** fix bug with hover on autoplay ([93271d8](https://github.com/MegafonWebLab/megafon-ui/commit/93271d8c8f9dd900c031d41f89207f61c41db063))
+
+
+
+
+
+# [3.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.9.0...@megafon/ui-core@3.10.0) (2022-05-30)
+
+
+### Features
+
+* **banner:** add new prop 'pauseOnHover' ([ac654c3](https://github.com/MegafonWebLab/megafon-ui/commit/ac654c3c23821a5d29ffd5cd91ff7337b3d087c1))
+
+
+
+
+
+# [3.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.8.0...@megafon/ui-core@3.9.0) (2022-05-27)
+
+
+### Bug Fixes
+
+* **select:** fix selected item color when value is zero ([9847095](https://github.com/MegafonWebLab/megafon-ui/commit/98470955ef813504d4bfa4cd4d3aba77b5458446))
+
+
+### Features
+
+* **switcher:** add data-attribute for inner element ([793a022](https://github.com/MegafonWebLab/megafon-ui/commit/793a0224ab957b938e67dd1b4d16c2389a9fb6f8))
+* **tooltip:** add portal selector props ([6188832](https://github.com/MegafonWebLab/megafon-ui/commit/6188832e9ba212e7a8182333aba06d77c3e979d6))
+
+
+
+
+
+# [3.8.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.7.0...@megafon/ui-core@3.8.0) (2022-05-17)
+
+
+### Features
+
+* **notification:** add props classes to notification component ([608a424](https://github.com/MegafonWebLab/megafon-ui/commit/608a4246eb99af354fb7cf8ab98c2ed513d87b66))
+
+
+
+
+
+# [3.7.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.6.0...@megafon/ui-core@3.7.0) (2022-05-05)
+
+
+### Bug Fixes
+
+* **logo:** fix horizontal logo svg ([76655eb](https://github.com/MegafonWebLab/megafon-ui/commit/76655ebb82650cc2617750af0b2b2726d3ebcbf3))
+
+
+### Features
+
+* **button:** added extra small size ([a26da46](https://github.com/MegafonWebLab/megafon-ui/commit/a26da4601de7e7c81c40eabf9a87ccdbf18cb790))
+
+
+
+
+
+# [3.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3...@megafon/ui-core@3.6.0) (2022-04-25)
+
+
+### Bug Fixes
+
+* **calendar:** fix go to start day after user choice ([8bbce10](https://github.com/MegafonWebLab/megafon-ui/commit/8bbce102d204f7ea7706158f3e6540c86ed3aada))
+
+
+### Features
+
+* **tooltip:** added prop isPortal for tooltip ([e6f6d17](https://github.com/MegafonWebLab/megafon-ui/commit/e6f6d1749cd99f065c50bac4eb6a9b3592653f8d))
+
+
+
+
+
+## [3.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3) (2022-04-18)
+
+
+### Bug Fixes
+
+* **switcher:** fix safari bugs ([65274bc](https://github.com/MegafonWebLab/megafon-ui/commit/65274bc3c5e7385109afff94a8ff3f712c9af097))
 
 
 

package/dist/es/components/Accordion/Accordion.css

@@ -12,7 +12,7 @@
 }
 .mfui-accordion__title-wrap {
   position: relative;
-  padding: 20px 20px 20px 16px;
+  padding: 20px 44px 20px 16px;
   border-radius: 12px;
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
@@ -20,11 +20,16 @@
 }
 @media screen and (min-width: 768px) {
   .mfui-accordion__title-wrap {
-    padding: 20px 24px;
+    padding: 20px 56px 20px 24px;
   }
 }
 .mfui-accordion__title-wrap:hover {
-  background: var(--spbSky1);
+  background-color: var(--spbSky1);
+}
+@media screen and (max-width: 1023px) {
+  .mfui-accordion__title-wrap:focus {
+    background-color: inherit;
+  }
 }
 .mfui-accordion__icon-box {
   position: absolute;
@@ -42,7 +47,7 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: var(--base);
+  background-color: var(--stcWhite);
   -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   -webkit-transform: translateY(-50%);

package/dist/es/components/Accordion/Accordion.js

@@ -11,9 +11,9 @@ var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M11 14h10l-5 6z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11 14h10l-5 6z"
+    clipRule: "evenodd"
   }));
 };
 

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

@@ -32,6 +32,8 @@ export interface IBannerProps {
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */
     autoPlayDelay?: number;
+    /** Пауза автоматической прокрутки при наведении курсора на компонент */
+    pauseOnHover?: boolean;
     /** Цветовая тема навигации */
     navTheme?: NavThemeType;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

package/dist/es/components/Banner/Banner.js

@@ -49,7 +49,9 @@ var Banner = function Banner(_ref) {
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
       onChange = _ref.onChange,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      _ref$pauseOnHover = _ref.pauseOnHover,
+      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -69,29 +71,42 @@ var Banner = function Banner(_ref) {
   var _React$useState7 = React.useState(autoPlay),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       isAutoPlaying = _React$useState8[0],
-      setAutoPlayning = _React$useState8[1];
+      setAutoPlaying = _React$useState8[1];
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       activeIndex = _React$useState10[0],
       setActiveIndex = _React$useState10[1];
 
+  var _React$useState11 = React.useState(autoPlayDelay),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      delay = _React$useState12[0],
+      setDelay = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      isIncreasedDelay = _React$useState14[0],
+      setIsIncreasedDelay = _React$useState14[1];
+
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
-  var dotTimerDelay = autoPlayDelay / 1000;
+  var dotTimerDelay = delay / 1000;
   var navArrowTheme = navTheme === NavTheme.DARK ? ArrowTheme.DARK : ArrowTheme.PURPLE;
+  var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
-    if (_typeof(params.autoplay) !== 'object' || !autoplay.running) {
+    if (_typeof(params.autoplay) !== 'object' || !autoPlay) {
       return;
     }
 
     autoplay.stop(); // eslint-disable-next-line no-param-reassign
 
     params.autoplay.delay = autoPlayDelay * 3;
+    setDelay(autoPlayDelay * 3);
+    setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlayDelay]);
+  }, [autoPlay, autoPlayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -99,8 +114,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onPrevClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -108,8 +123,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onNextClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleDotClick = React.useCallback(function (index) {
     if (!swiperInstance) {
       return;
@@ -122,11 +137,8 @@ var Banner = function Banner(_ref) {
     }
 
     onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
-  var handleSwiper = React.useCallback(function (swiper) {
-    setSwiperInstance(swiper);
-  }, []);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleReachBeginning = React.useCallback(function () {
     setBeginning(true);
   }, []);
@@ -148,24 +160,37 @@ var Banner = function Banner(_ref) {
     setActiveIndex(realIndex);
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
   }, [onChange]);
-  var handleAutoplayStop = React.useCallback(function () {
-    setAutoPlayning(false);
-  }, []);
+  React.useEffect(function () {
+    var rootElement = rootRef.current;
+
+    if (!pauseOnHover || !autoPlay) {
+      return;
+    }
+
+    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+      setAutoPlaying(false);
+    });
+    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseleave', function () {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+      setAutoPlaying(true);
+    });
+  }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme
-    }, className)
+    }, className),
+    ref: rootRef
   }), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
     watchSlidesVisibility: true,
-    onSwiper: handleSwiper,
+    onSwiper: setSwiperInstance,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
     onSlideChange: handleSlideChange,
-    onAutoplayStop: handleAutoplayStop,
     onTouchEnd: increaseAutoplayDelay
   }), React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
@@ -232,6 +257,7 @@ Banner.propTypes = {
   }),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
+  pauseOnHover: PropTypes.bool,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,