@megafon/ui-core 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.5.1...@megafon/ui-core@4.6.0) (2022-10-31)
+
+
+### Bug Fixes
+
+* **accordion:** fix dataAttrs props ([bb6e71c](https://github.com/MegafonWebLab/megafon-ui/commit/bb6e71cf36687fdcfb41a9ee40a27e0fdb21940b))
+
+
+### Features
+
+* **notification:** allow using html: br, &nbsp, font color, a href in title plus b in text ([1661b7b](https://github.com/MegafonWebLab/megafon-ui/commit/1661b7b602532594ed4d1398d9f70870b1e4d852))
+* **timerbadge:** add iconContainer to dataAttrs prop ([fa9b094](https://github.com/MegafonWebLab/megafon-ui/commit/fa9b094b209705c448de63fe0cfbfe52764e6709))
+
+
+
+
+
+## [4.5.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.5.0...@megafon/ui-core@4.5.1) (2022-10-24)
+
+
+### Bug Fixes
+
+* **carousel:** change navigation view after change slides count ([7b300eb](https://github.com/MegafonWebLab/megafon-ui/commit/7b300eb9c6f805c3b425104a17f437b3b8a520c5))
+* **search:** fix input field font-size for all browsers ([739f3b0](https://github.com/MegafonWebLab/megafon-ui/commit/739f3b02a2dbf8abc6ad430e43272a5bae4d9cf9))
+* **tabs:** change tabs list structure for correct underline width ([ab87ab2](https://github.com/MegafonWebLab/megafon-ui/commit/ab87ab2e23b3db7620ea0fd83c58bdc8f51ab0ae))
+
+
+
+
+
 # [4.5.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.4.0...@megafon/ui-core@4.5.0) (2022-10-17)
 
 
@@ -158,6 +188,10 @@ new sizes
 either accept new rules or manually add line-height: 16px in your components
 * **paragraph:** prop 'size' is no longer exists.
 use component Caption instead of Paragraph size="small"
+* **header:** rename prop 'hAlign' to 'align'
+* **list:** rename prop 'hAlign' to 'align'
+* **contentarea:** remove value 'DEFAULT' from 'innerBackgroundColor' and 'outerBackgroundColor' props
+* **tabs:** rename prop 'hAlign' to 'align'
 
 
 

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

@@ -19,8 +19,13 @@ export interface IAccordionProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
-        header?: Record<string, string>;
-        collapse?: Record<string, string>;
+        header?: {
+            root: Record<string, string>;
+        };
+        collapse?: {
+            root?: Record<string, string>;
+            inner?: Record<string, string>;
+        };
         titleWrap?: Record<string, string>;
         arrowUp?: Record<string, string>;
         arrowDown?: Record<string, string>;

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

@@ -64,17 +64,19 @@ var Accordion = function Accordion(_ref) {
     onKeyDown: handleClickTitle,
     tabIndex: 0,
     role: "button"
-  }), /*#__PURE__*/React.createElement(Header, _extends({
-    as: "h5"
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(Header, {
+    as: "h5",
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
+  }, title), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box')
   }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
     className: cn('icon')
-  }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
+  }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, {
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse,
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }), children));
+  }, children));
 };
 
 Accordion.propTypes = {
@@ -92,8 +94,13 @@ Accordion.propTypes = {
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    header: PropTypes.objectOf(PropTypes.string.isRequired),
-    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    collapse: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired),
+      inner: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
     titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)

package/dist/es/components/Badges/components/TimerBadge/TimerBadge.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import './TimerBadge.less';
+export declare const TIMEOUT = 1000;
 export interface ITimerBadgeProps {
     /** Дата окончания таймера */
     expirationDate: Date;
@@ -18,6 +19,7 @@ export interface ITimerBadgeProps {
         root?: Record<string, string>;
         text?: Record<string, string>;
         timer?: Record<string, string>;
+        iconContainer?: Record<string, string>;
     };
 }
 declare const TimerBadge: React.FC<ITimerBadgeProps>;

package/dist/es/components/Badges/components/TimerBadge/TimerBadge.js

@@ -21,7 +21,7 @@ var TimerIcon = function TimerIcon(props) {
 
 var SECONDS_IN_HOUR = 3600;
 var MS_IN_SECOND = 1000;
-var TIMEOUT = 1000;
+export var TIMEOUT = 1000;
 var TimerBadgeTheme = {
   RED: 'red',
   GREY: 'grey'
@@ -75,11 +75,11 @@ var TimerBadge = function TimerBadge(_ref) {
     className: cn({
       theme: theme
     }, className)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
     className: cn('icon-container', {
       shadow: isLastHour && showCountdown
     })
-  }, /*#__PURE__*/React.createElement(TimerIcon, {
+  }), /*#__PURE__*/React.createElement(TimerIcon, {
     className: cn('icon')
   })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text')
@@ -104,7 +104,8 @@ TimerBadge.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     text: PropTypes.objectOf(PropTypes.string.isRequired),
-    timer: PropTypes.objectOf(PropTypes.string.isRequired)
+    timer: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default TimerBadge;

package/dist/es/components/Caption/Caption.css

@@ -8,7 +8,7 @@
   font-weight: 400;
 }
 .mfui-caption_variant_medium {
-  font-weight: 600;
+  font-weight: 500;
 }
 .mfui-caption_space_wide {
   line-height: 18px;

package/dist/es/components/Carousel/Carousel.js

@@ -1,4 +1,5 @@
 import "core-js/modules/es.array.index-of";
+import "core-js/modules/es.array.is-array";
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.object.values";
 import _extends from "@babel/runtime/helpers/extends";
@@ -18,6 +19,7 @@ import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
 import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
 import "./Carousel.css";
+import usePrevious from "./usePrevious";
 SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
   LIGHT: 'light',
@@ -116,6 +118,9 @@ var Carousel = function Carousel(_ref) {
       isLocked = _React$useState8[0],
       setLocked = _React$useState8[1];
 
+  var childrenLen = Array.isArray(children) ? children.length : 0;
+  var prevChildrenLen = usePrevious(childrenLen) || 0;
+  var isChildrenLenDiff = childrenLen !== prevChildrenLen;
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
@@ -241,6 +246,11 @@ var Carousel = function Carousel(_ref) {
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
   }, [swiperInstance]);
+  React.useEffect(function () {
+    if (swiperInstance && isChildrenLenDiff) {
+      handleNavDisplay(swiperInstance);
+    }
+  }, [isChildrenLenDiff, swiperInstance]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({

package/dist/es/components/Carousel/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/dist/es/components/Carousel/usePrevious.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+export default usePrevious;

package/dist/es/components/Notification/Notification.js

@@ -4,7 +4,7 @@ import "core-js/modules/web.timers";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useRef, useState } from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Button from "../Button/Button";
 import TextLink from "../TextLink/TextLink";
@@ -299,7 +299,7 @@ var Notification = function Notification(_ref) {
     className: cn('text-container')
   }, title && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
     className: cn('title')
-  }), title), /*#__PURE__*/React.createElement("div", _extends({
+  }), convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("div", _extends({
     ref: wrapTextRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
@@ -308,7 +308,7 @@ var Notification = function Notification(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: shortTextRef,
     className: cn('short-text', textClasses["short"])
-  }, shortText || children), shortText && /*#__PURE__*/React.createElement("div", {
+  }, shortText && convert(shortText, textConvertConfig) || children), shortText && /*#__PURE__*/React.createElement("div", {
     ref: fullTextRef,
     className: cn('full-text', textClasses.full)
   }, children))), hasBottom && /*#__PURE__*/React.createElement("div", {

package/dist/es/components/Search/Search.css

@@ -172,6 +172,7 @@
   border-radius: 0;
   overflow: auto;
   color: var(--content);
+  font-size: 100%;
   font-family: inherit;
   line-height: 25px;
   background-color: transparent;

package/dist/es/components/Switcher/Switcher.css

@@ -2,6 +2,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-tap-highlight-color: transparent;
 }
 .mfui-switcher__content {
   font-size: 15px;

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

@@ -59,7 +59,7 @@ var Tabs = function Tabs(_ref) {
       dataAttrs = _ref.dataAttrs,
       onTabClick = _ref.onTabClick,
       outerObserveContainer = _ref.outerObserveContainer;
-  var tabsRef = React.useRef([]);
+  var tabsRef = React.useRef({});
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
   var intersectionObserverRef = React.useRef();
@@ -124,15 +124,21 @@ var Tabs = function Tabs(_ref) {
       stickyOffset = _React$useState22[0],
       setStickyOffset = _React$useState22[1];
 
-  var setTabRef = React.useCallback(function (tab) {
-    tab && tabsRef.current.push(tab);
+  var setTabRef = React.useCallback(function (i) {
+    return function (tab) {
+      if (tab) {
+        tabsRef.current[i] = tab;
+      }
+    };
   }, []);
   var calculateUnderline = React.useCallback(function () {
-    if (!tabsRef.current.length) {
+    var tabs = Object.values(tabsRef.current);
+
+    if (!tabs.length) {
       return;
     }
 
-    var translate = _toConsumableArray(tabsRef.current).splice(0, currentIndex).reduce(function (accWidth, node) {
+    var translate = _toConsumableArray(tabs).splice(0, currentIndex).reduce(function (accWidth, node) {
       var _node$getBoundingClie = node.getBoundingClientRect(),
           width = _node$getBoundingClie.width;
 
@@ -288,7 +294,7 @@ var Tabs = function Tabs(_ref) {
         className: cn('slide')
       }, /*#__PURE__*/React.createElement("div", _extends({
         className: cn('tab', [classes === null || classes === void 0 ? void 0 : classes.tab, activeTabClassName]),
-        ref: setTabRef
+        ref: setTabRef(i)
       }, filterDataAttrs(data === null || data === void 0 ? void 0 : data.root, i + 1)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
   }, [renderTab, children, classes === null || classes === void 0 ? void 0 : classes.activeTab, currentIndex, setTabRef, classes === null || classes === void 0 ? void 0 : classes.tab]);

package/dist/es/index.d.ts

@@ -44,3 +44,4 @@ export { default as Timer } from './components/Badges/components/TimerBadge/Time
 export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
 export { default as usePagination } from './components/Pagination/usePagination';
+export { default as usePrevious } from './components/Carousel/usePrevious';

package/dist/es/index.js

@@ -43,4 +43,5 @@ export { default as Tile } from "./components/Tile/Tile";
 export { default as Timer } from "./components/Badges/components/TimerBadge/Timer/Timer";
 export { default as TimerBadge } from "./components/Badges/components/TimerBadge/TimerBadge";
 export { default as Tooltip } from "./components/Tooltip/Tooltip";
-export { default as usePagination } from "./components/Pagination/usePagination";
+export { default as usePagination } from "./components/Pagination/usePagination";
+export { default as usePrevious } from "./components/Carousel/usePrevious";

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

@@ -19,8 +19,13 @@ export interface IAccordionProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
-        header?: Record<string, string>;
-        collapse?: Record<string, string>;
+        header?: {
+            root: Record<string, string>;
+        };
+        collapse?: {
+            root?: Record<string, string>;
+            inner?: Record<string, string>;
+        };
         titleWrap?: Record<string, string>;
         arrowUp?: Record<string, string>;
         arrowDown?: Record<string, string>;

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

@@ -84,17 +84,19 @@ var Accordion = function Accordion(_ref) {
     onKeyDown: handleClickTitle,
     tabIndex: 0,
     role: "button"
-  }), /*#__PURE__*/React.createElement(_Header["default"], (0, _extends2["default"])({
-    as: "h5"
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(_Header["default"], {
+    as: "h5",
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
+  }, title), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box')
   }, /*#__PURE__*/React.createElement(ArrowDown, (0, _extends2["default"])({
     className: cn('icon')
-  }, (0, _uiHelpers.filterDataAttrs)(arrowDataAttrs))))), /*#__PURE__*/React.createElement(_Collapse["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
+  }, (0, _uiHelpers.filterDataAttrs)(arrowDataAttrs))))), /*#__PURE__*/React.createElement(_Collapse["default"], {
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse,
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }), children));
+  }, children));
 };
 
 Accordion.propTypes = {
@@ -112,8 +114,13 @@ Accordion.propTypes = {
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    header: PropTypes.objectOf(PropTypes.string.isRequired),
-    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    collapse: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired),
+      inner: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
     titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import './TimerBadge.less';
+export declare const TIMEOUT = 1000;
 export interface ITimerBadgeProps {
     /** Дата окончания таймера */
     expirationDate: Date;
@@ -18,6 +19,7 @@ export interface ITimerBadgeProps {
         root?: Record<string, string>;
         text?: Record<string, string>;
         timer?: Record<string, string>;
+        iconContainer?: Record<string, string>;
     };
 }
 declare const TimerBadge: React.FC<ITimerBadgeProps>;

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.TIMEOUT = void 0;
 
 require("core-js/modules/es.date.now");
 
@@ -44,6 +44,7 @@ var TimerIcon = function TimerIcon(props) {
 var SECONDS_IN_HOUR = 3600;
 var MS_IN_SECOND = 1000;
 var TIMEOUT = 1000;
+exports.TIMEOUT = TIMEOUT;
 var TimerBadgeTheme = {
   RED: 'red',
   GREY: 'grey'
@@ -97,11 +98,11 @@ var TimerBadge = function TimerBadge(_ref) {
     className: cn({
       theme: theme
     }, className)
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
     className: cn('icon-container', {
       shadow: isLastHour && showCountdown
     })
-  }, /*#__PURE__*/_react["default"].createElement(TimerIcon, {
+  }), /*#__PURE__*/_react["default"].createElement(TimerIcon, {
     className: cn('icon')
   })), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text')
@@ -126,7 +127,8 @@ TimerBadge.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     text: PropTypes.objectOf(PropTypes.string.isRequired),
-    timer: PropTypes.objectOf(PropTypes.string.isRequired)
+    timer: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 var _default = TimerBadge;

package/dist/lib/components/Caption/Caption.css

@@ -8,7 +8,7 @@
   font-weight: 400;
 }
 .mfui-caption_variant_medium {
-  font-weight: 600;
+  font-weight: 500;
 }
 .mfui-caption_space_wide {
   line-height: 18px;

package/dist/lib/components/Carousel/Carousel.js

@@ -9,6 +9,8 @@ exports["default"] = exports.EffectTheme = exports.NavTheme = void 0;
 
 require("core-js/modules/es.array.index-of");
 
+require("core-js/modules/es.array.is-array");
+
 require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.object.values");
@@ -39,6 +41,8 @@ var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime
 
 var _checkBreakpointsPropTypes = _interopRequireDefault(require("./checkBreakpointsPropTypes"));
 
+var _usePrevious = _interopRequireDefault(require("./usePrevious"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -148,6 +152,9 @@ var Carousel = function Carousel(_ref) {
       isLocked = _React$useState8[0],
       setLocked = _React$useState8[1];
 
+  var childrenLen = Array.isArray(children) ? children.length : 0;
+  var prevChildrenLen = (0, _usePrevious["default"])(childrenLen) || 0;
+  var isChildrenLenDiff = childrenLen !== prevChildrenLen;
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
@@ -271,6 +278,11 @@ var Carousel = function Carousel(_ref) {
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
   }, [swiperInstance]);
+  React.useEffect(function () {
+    if (swiperInstance && isChildrenLenDiff) {
+      handleNavDisplay(swiperInstance);
+    }
+  }, [isChildrenLenDiff, swiperInstance]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({

package/dist/lib/components/Carousel/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/dist/lib/components/Carousel/usePrevious.js

@@ -0,0 +1,25 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+var _default = usePrevious;
+exports["default"] = _default;

package/dist/lib/components/Notification/Notification.js

@@ -325,7 +325,7 @@ var Notification = function Notification(_ref) {
     className: cn('text-container')
   }, title && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
     className: cn('title')
-  }), title), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+  }), (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     ref: wrapTextRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
@@ -334,7 +334,7 @@ var Notification = function Notification(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     ref: shortTextRef,
     className: cn('short-text', textClasses["short"])
-  }, shortText || children), shortText && /*#__PURE__*/_react["default"].createElement("div", {
+  }, shortText && (0, _uiHelpers.convert)(shortText, _uiHelpers.textConvertConfig) || children), shortText && /*#__PURE__*/_react["default"].createElement("div", {
     ref: fullTextRef,
     className: cn('full-text', textClasses.full)
   }, children))), hasBottom && /*#__PURE__*/_react["default"].createElement("div", {

package/dist/lib/components/Search/Search.css

@@ -172,6 +172,7 @@
   border-radius: 0;
   overflow: auto;
   color: var(--content);
+  font-size: 100%;
   font-family: inherit;
   line-height: 25px;
   background-color: transparent;

package/dist/lib/components/Switcher/Switcher.css

@@ -2,6 +2,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-tap-highlight-color: transparent;
 }
 .mfui-switcher__content {
   font-size: 15px;

package/dist/lib/components/Tabs/Tabs.js

@@ -89,7 +89,7 @@ var Tabs = function Tabs(_ref) {
       dataAttrs = _ref.dataAttrs,
       onTabClick = _ref.onTabClick,
       outerObserveContainer = _ref.outerObserveContainer;
-  var tabsRef = React.useRef([]);
+  var tabsRef = React.useRef({});
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
   var intersectionObserverRef = React.useRef();
@@ -154,15 +154,21 @@ var Tabs = function Tabs(_ref) {
       stickyOffset = _React$useState22[0],
       setStickyOffset = _React$useState22[1];
 
-  var setTabRef = React.useCallback(function (tab) {
-    tab && tabsRef.current.push(tab);
+  var setTabRef = React.useCallback(function (i) {
+    return function (tab) {
+      if (tab) {
+        tabsRef.current[i] = tab;
+      }
+    };
   }, []);
   var calculateUnderline = React.useCallback(function () {
-    if (!tabsRef.current.length) {
+    var tabs = Object.values(tabsRef.current);
+
+    if (!tabs.length) {
       return;
     }
 
-    var translate = (0, _toConsumableArray2["default"])(tabsRef.current).splice(0, currentIndex).reduce(function (accWidth, node) {
+    var translate = (0, _toConsumableArray2["default"])(tabs).splice(0, currentIndex).reduce(function (accWidth, node) {
       var _node$getBoundingClie = node.getBoundingClientRect(),
           width = _node$getBoundingClie.width;
 
@@ -317,7 +323,7 @@ var Tabs = function Tabs(_ref) {
         className: cn('slide')
       }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
         className: cn('tab', [classes === null || classes === void 0 ? void 0 : classes.tab, activeTabClassName]),
-        ref: setTabRef
+        ref: setTabRef(i)
       }, (0, _uiHelpers.filterDataAttrs)(data === null || data === void 0 ? void 0 : data.root, i + 1)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
   }, [renderTab, children, classes === null || classes === void 0 ? void 0 : classes.activeTab, currentIndex, setTabRef, classes === null || classes === void 0 ? void 0 : classes.tab]);

package/dist/lib/index.d.ts

@@ -44,3 +44,4 @@ export { default as Timer } from './components/Badges/components/TimerBadge/Time
 export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
 export { default as usePagination } from './components/Pagination/usePagination';
+export { default as usePrevious } from './components/Carousel/usePrevious';

package/dist/lib/index.js

@@ -279,6 +279,12 @@ Object.defineProperty(exports, "usePagination", {
     return _usePagination["default"];
   }
 });
+Object.defineProperty(exports, "usePrevious", {
+  enumerable: true,
+  get: function get() {
+    return _usePrevious["default"];
+  }
+});
 
 var _Accordion = _interopRequireDefault(require("./components/Accordion/Accordion"));
 
@@ -372,4 +378,6 @@ var _Tooltip = _interopRequireDefault(require("./components/Tooltip/Tooltip"));
 
 var _usePagination = _interopRequireDefault(require("./components/Pagination/usePagination"));
 
+var _usePrevious = _interopRequireDefault(require("./components/Carousel/usePrevious"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "files": [
     "dist",
     "styles"
@@ -54,9 +54,12 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.1.0",
+    "@megafon/ui-icons": "^2.3.0",
     "@svgr/core": "^2.4.1",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "13.5.0",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^25.1.3",
@@ -86,7 +89,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.2.0",
+    "@megafon/ui-helpers": "^2.3.0",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -97,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "1767b434f1650a100aa2aca6f5c795f8b549a184"
+  "gitHead": "fd77e756d2591ad3489e94c585d40bfa05e40710"
 }