@megafon/ui-core 4.9.1 → 4.10.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.9.1...@megafon/ui-core@4.10.0) (2022-12-12)
+
+
+### Bug Fixes
+
+* **checkbox:** update styles ([91c2c01](https://github.com/MegafonWebLab/megafon-ui/commit/91c2c01871ca3bae54f4c7204f5953341a7e80cc))
+* **colors:** add overlay color ([168671b](https://github.com/MegafonWebLab/megafon-ui/commit/168671bea17784e9e3f448138e8dab27bfc46a50))
+* **tabs:** change navigation view after change slides count ([67109aa](https://github.com/MegafonWebLab/megafon-ui/commit/67109aafe2c87a8ed7e95f506e892487ad597a8e))
+
+
+### Features
+
+* **accordion:** add optional microdata attributes ([a67df13](https://github.com/MegafonWebLab/megafon-ui/commit/a67df131fe8a47ac4b8574784135765e4e3659bc))
+* **link:** add itemprop attribute ([1243b6a](https://github.com/MegafonWebLab/megafon-ui/commit/1243b6a2b65dc157dff82d9943ee08f8f148c688))
+* **textlink:** add itemprop attribute ([77a5294](https://github.com/MegafonWebLab/megafon-ui/commit/77a529437cb73cb927381d62f88f48b2b4cc5f0c))
+* **tile:** added rel property ([8b2c8bf](https://github.com/MegafonWebLab/megafon-ui/commit/8b2c8bf8a3ddcba83b085f028460fdc1d14559d3))
+
+
+
+
+
 ## [4.9.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.9.0...@megafon/ui-core@4.9.1) (2022-12-06)
 
 **Note:** Version bump only for package @megafon/ui-core

package/dist/es/colors/colorsData.js

@@ -82,6 +82,9 @@ var colors = {
       }, {
         name: 'Button Down',
         code: 'buttonDown'
+      }, {
+        name: 'Overlay',
+        code: 'overlay'
       }]
     }
   },

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

@@ -7,6 +7,8 @@ export interface IAccordionProps {
     title: string | React.ReactNode | React.ReactNode[];
     /** Состояние открытости */
     isOpened?: boolean;
+    /** Включить микроразметку */
+    hasMicrodata?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */

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

@@ -24,6 +24,8 @@ var Accordion = function Accordion(_ref) {
       title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -53,17 +55,38 @@ var Accordion = function Accordion(_ref) {
 
   var openedClassName = isOpenedState ? openedClass : undefined;
   var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
+
+  var renderContent = function renderContent() {
+    if (hasMicrodata) {
+      return /*#__PURE__*/React.createElement("div", {
+        itemScope: true,
+        itemProp: "acceptedAnswer",
+        itemType: "https://schema.org/Answer"
+      }, /*#__PURE__*/React.createElement("div", {
+        itemProp: "text"
+      }, children));
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       opened: isOpenedState
     }, [className, rootPropsClasses, openedClassName])
+  }, hasMicrodata && {
+    itemScope: true,
+    itemProp: 'mainEntity',
+    itemType: 'https://schema.org/Question'
   }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
     className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle,
     onKeyDown: handleClickTitle,
     tabIndex: 0,
     role: "button"
+  }, hasMicrodata && {
+    itemProp: 'name'
   }), /*#__PURE__*/React.createElement(Header, {
     as: "h5",
     dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
@@ -76,7 +99,7 @@ var Accordion = function Accordion(_ref) {
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }, children));
+  }, renderContent()));
 };
 
 Accordion.propTypes = {
@@ -85,6 +108,7 @@ Accordion.propTypes = {
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

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

@@ -17,9 +17,9 @@ import SwiperCore, { Autoplay, Pagination, EffectFade } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
+import usePrevious from "../../hooks/usePrevious";
 import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
 import "./Carousel.css";
-import usePrevious from "./usePrevious";
 SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
   LIGHT: 'light',

package/dist/es/components/Checkbox/Checkbox.css

@@ -35,7 +35,11 @@
   width: 20px;
   height: 20px;
   border: 2px solid;
-  border-radius: 2px;
+  border-radius: 4px;
+  -webkit-transition: border-color, background-color;
+  transition: border-color, background-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
 }
 .mfui-checkbox__custom-input:focus {
   outline: none;
@@ -69,7 +73,7 @@
   line-height: 24px;
 }
 .mfui-checkbox_font-size_regular .mfui-checkbox__inner {
-  padding: 4px 15px 4px 35px;
+  padding: 4px 15px 4px 33px;
 }
 .mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
   top: 6px;
@@ -79,7 +83,7 @@
   line-height: 16px;
 }
 .mfui-checkbox_font-size_small .mfui-checkbox__inner {
-  padding: 1px 15px 4px 35px;
+  padding: 1px 15px 4px 33px;
 }
 .mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
   top: 0;
@@ -90,45 +94,57 @@
 .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   border-color: var(--buttonHoverGreen);
 }
-.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: var(--buttonDown) !important;
-  background-color: var(--buttonDown);
-}
 .mfui-checkbox_color_dark .mfui-checkbox__icon {
   fill: var(--stcWhite);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
   border-color: var(--brandGreen);
-  color: var(--stcWhite);
   background-color: var(--brandGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   background-color: var(--buttonHoverGreen);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: var(--buttonDown) !important;
+.mfui-checkbox_color_light {
+  color: var(--stcWhite);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
-.mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: var(--spbSky2);
+.mfui-checkbox_color_light .mfui-checkbox__custom-input {
+  border-color: var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
+  border-color: var(--buttonHoverGrey);
+  background-color: var(--buttonHoverGrey);
+}
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
+  border-color: var(--brandGreen);
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
+.mfui-checkbox_disabled .mfui-checkbox__label {
+  color: var(--spbSky3);
   cursor: default;
   pointer-events: none;
 }
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: var(--spbSky2) !important;
+.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  border-color: var(--spbSky2);
   background-color: var(--spbSky1);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
-  border-color: var(--fury);
+.mfui-checkbox_disabled .mfui-checkbox__icon {
+  fill: var(--stcWhite);
 }
-.mfui-checkbox_color_light {
-  color: var(--stcWhite);
+.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label {
+  color: var(--stcWhite50);
 }
-.mfui-checkbox_color_light .mfui-checkbox__custom-input {
-  border-color: var(--stcWhite);
-  color: var(--brandGreen);
-  background-color: var(--stcWhite);
+.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-checkbox_error .mfui-checkbox__custom-input {
+  border-color: var(--fury);
+}
+.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
 }

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

@@ -14,6 +14,8 @@ export interface ILinkProps {
     dataAttrs?: {
         root?: Record<string, string>;
     };
+    /** Атрибут itemprop для микроразметки */
+    itemProp?: string;
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
     /** Обработчик клика */
     onClick?: (e: React.MouseEvent<EventTarget>) => void;

package/dist/es/components/Link/Link.js

@@ -10,6 +10,7 @@ var Link = function Link(_ref) {
       onClick = _ref.onClick,
       className = _ref.className,
       download = _ref.download,
+      itemProp = _ref.itemProp,
       children = _ref.children,
       dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("a", _extends({
@@ -18,6 +19,7 @@ var Link = function Link(_ref) {
     target: target,
     rel: rel,
     download: download,
+    itemProp: itemProp,
     onClick: onClick
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
 };
@@ -32,6 +34,7 @@ Link.propTypes = {
   }),
   rel: PropTypes.string,
   download: PropTypes.bool,
+  itemProp: PropTypes.string,
   onClick: PropTypes.func
 };
 export default Link;

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

@@ -1,4 +1,5 @@
 import "core-js/modules/es.array.for-each";
+import "core-js/modules/es.array.is-array";
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.array.reduce";
 import "core-js/modules/es.array.splice";
@@ -12,6 +13,7 @@ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import usePrevious from "../../hooks/usePrevious";
 import "./Tabs.css";
 
 var ArrowLeft = function ArrowLeft(props) {
@@ -64,6 +66,9 @@ var Tabs = function Tabs(_ref) {
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
   var intersectionObserverRef = React.useRef();
+  var childrenLength = Array.isArray(children) ? children.length : 0;
+  var prevChildrenLength = usePrevious(childrenLength) || 0;
+  var isChildrenLengthDiff = childrenLength !== prevChildrenLength;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -359,9 +364,13 @@ var Tabs = function Tabs(_ref) {
       return;
     }
 
-    setBeginning(swiperInstance.isBeginning);
-    setEnd(swiperInstance.isEnd);
-  }, [swiperInstance]);
+    if (isChildrenLengthDiff) {
+      handleFromEdge(swiperInstance);
+      return;
+    }
+
+    handleFromEdge(swiperInstance);
+  }, [swiperInstance, isChildrenLengthDiff, handleFromEdge]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,

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

@@ -8,6 +8,8 @@ export interface ITextLinkProps extends ILinkProps {
     underlineVisibility?: 'hover' | 'always';
     /** Стиль подчеркивания */
     underlineStyle?: 'solid' | 'dashed' | 'border' | 'none';
+    /** Атрибут itemprop для микроразметки */
+    itemProp?: string;
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
 }
 declare const TextLink: React.FC<ITextLinkProps>;

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

@@ -19,12 +19,14 @@ var TextLink = function TextLink(_ref) {
       onClick = _ref.onClick,
       children = _ref.children,
       download = _ref.download,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      itemProp = _ref.itemProp;
   return /*#__PURE__*/React.createElement(Link, {
     dataAttrs: dataAttrs,
     target: target,
     href: href,
     rel: rel,
+    itemProp: itemProp,
     onClick: onClick,
     className: cn('', {
       'underline-visibility': underlineVisibility,
@@ -42,6 +44,7 @@ TextLink.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
+  itemProp: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
 };
 export default TextLink;

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

@@ -26,6 +26,8 @@ export interface ITileProps {
     href?: string;
     /** Атрибут для открытия ссылки */
     target?: '_self' | '_blank';
+    /** rel - аргумент тега <a> */
+    rel?: string;
     /** Тема */
     theme?: ThemeType;
     /** Радиус границы */

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

@@ -41,7 +41,8 @@ var Tile = function Tile(_ref) {
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs,
       _ref$target = _ref.target,
-      target = _ref$target === void 0 ? '_self' : _ref$target;
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      rel = _ref.rel;
 
   var handleClick = function handleClick(e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -61,7 +62,8 @@ var Tile = function Tile(_ref) {
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/React.createElement("a", {
     href: href,
     className: cn('link'),
-    target: target
+    target: target,
+    rel: rel
   }, children), !href && children);
 };
 
@@ -76,6 +78,7 @@ Tile.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
-  target: PropTypes.oneOf(['_self', '_blank'])
+  target: PropTypes.oneOf(['_self', '_blank']),
+  rel: PropTypes.string
 };
 export default Tile;

package/dist/es/index.d.ts

@@ -44,4 +44,3 @@ 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,5 +43,4 @@ 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 usePrevious } from "./components/Carousel/usePrevious";
+export { default as usePagination } from "./components/Pagination/usePagination";

package/dist/lib/colors/colorsData.js

@@ -88,6 +88,9 @@ var colors = {
       }, {
         name: 'Button Down',
         code: 'buttonDown'
+      }, {
+        name: 'Overlay',
+        code: 'overlay'
       }]
     }
   },

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

@@ -7,6 +7,8 @@ export interface IAccordionProps {
     title: string | React.ReactNode | React.ReactNode[];
     /** Состояние открытости */
     isOpened?: boolean;
+    /** Включить микроразметку */
+    hasMicrodata?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */

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

@@ -44,6 +44,8 @@ var Accordion = function Accordion(_ref) {
       title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -73,17 +75,38 @@ var Accordion = function Accordion(_ref) {
 
   var openedClassName = isOpenedState ? openedClass : undefined;
   var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
+
+  var renderContent = function renderContent() {
+    if (hasMicrodata) {
+      return /*#__PURE__*/React.createElement("div", {
+        itemScope: true,
+        itemProp: "acceptedAnswer",
+        itemType: "https://schema.org/Answer"
+      }, /*#__PURE__*/React.createElement("div", {
+        itemProp: "text"
+      }, children));
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       opened: isOpenedState
     }, [className, rootPropsClasses, openedClassName])
+  }, hasMicrodata && {
+    itemScope: true,
+    itemProp: 'mainEntity',
+    itemType: 'https://schema.org/Question'
   }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
     className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle,
     onKeyDown: handleClickTitle,
     tabIndex: 0,
     role: "button"
+  }, hasMicrodata && {
+    itemProp: 'name'
   }), /*#__PURE__*/React.createElement(_Header["default"], {
     as: "h5",
     dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
@@ -96,7 +119,7 @@ var Accordion = function Accordion(_ref) {
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }, children));
+  }, renderContent()));
 };
 
 Accordion.propTypes = {
@@ -105,6 +128,7 @@ Accordion.propTypes = {
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

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

@@ -39,9 +39,9 @@ var _NavArrow = _interopRequireWildcard(require("../NavArrow/NavArrow"));
 
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 
-var _checkBreakpointsPropTypes = _interopRequireDefault(require("./checkBreakpointsPropTypes"));
+var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
 
-var _usePrevious = _interopRequireDefault(require("./usePrevious"));
+var _checkBreakpointsPropTypes = _interopRequireDefault(require("./checkBreakpointsPropTypes"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 

package/dist/lib/components/Checkbox/Checkbox.css

@@ -35,7 +35,11 @@
   width: 20px;
   height: 20px;
   border: 2px solid;
-  border-radius: 2px;
+  border-radius: 4px;
+  -webkit-transition: border-color, background-color;
+  transition: border-color, background-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
 }
 .mfui-checkbox__custom-input:focus {
   outline: none;
@@ -69,7 +73,7 @@
   line-height: 24px;
 }
 .mfui-checkbox_font-size_regular .mfui-checkbox__inner {
-  padding: 4px 15px 4px 35px;
+  padding: 4px 15px 4px 33px;
 }
 .mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
   top: 6px;
@@ -79,7 +83,7 @@
   line-height: 16px;
 }
 .mfui-checkbox_font-size_small .mfui-checkbox__inner {
-  padding: 1px 15px 4px 35px;
+  padding: 1px 15px 4px 33px;
 }
 .mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
   top: 0;
@@ -90,45 +94,57 @@
 .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   border-color: var(--buttonHoverGreen);
 }
-.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: var(--buttonDown) !important;
-  background-color: var(--buttonDown);
-}
 .mfui-checkbox_color_dark .mfui-checkbox__icon {
   fill: var(--stcWhite);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
   border-color: var(--brandGreen);
-  color: var(--stcWhite);
   background-color: var(--brandGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   background-color: var(--buttonHoverGreen);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: var(--buttonDown) !important;
+.mfui-checkbox_color_light {
+  color: var(--stcWhite);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
-.mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: var(--spbSky2);
+.mfui-checkbox_color_light .mfui-checkbox__custom-input {
+  border-color: var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
+  border-color: var(--buttonHoverGrey);
+  background-color: var(--buttonHoverGrey);
+}
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
+  border-color: var(--brandGreen);
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
+.mfui-checkbox_disabled .mfui-checkbox__label {
+  color: var(--spbSky3);
   cursor: default;
   pointer-events: none;
 }
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: var(--spbSky2) !important;
+.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  border-color: var(--spbSky2);
   background-color: var(--spbSky1);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
-  border-color: var(--fury);
+.mfui-checkbox_disabled .mfui-checkbox__icon {
+  fill: var(--stcWhite);
 }
-.mfui-checkbox_color_light {
-  color: var(--stcWhite);
+.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label {
+  color: var(--stcWhite50);
 }
-.mfui-checkbox_color_light .mfui-checkbox__custom-input {
-  border-color: var(--stcWhite);
-  color: var(--brandGreen);
-  background-color: var(--stcWhite);
+.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-checkbox_error .mfui-checkbox__custom-input {
+  border-color: var(--fury);
+}
+.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
 }

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

@@ -14,6 +14,8 @@ export interface ILinkProps {
     dataAttrs?: {
         root?: Record<string, string>;
     };
+    /** Атрибут itemprop для микроразметки */
+    itemProp?: string;
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
     /** Обработчик клика */
     onClick?: (e: React.MouseEvent<EventTarget>) => void;

package/dist/lib/components/Link/Link.js

@@ -22,6 +22,7 @@ var Link = function Link(_ref) {
       onClick = _ref.onClick,
       className = _ref.className,
       download = _ref.download,
+      itemProp = _ref.itemProp,
       children = _ref.children,
       dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({
@@ -30,6 +31,7 @@ var Link = function Link(_ref) {
     target: target,
     rel: rel,
     download: download,
+    itemProp: itemProp,
     onClick: onClick
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
 };
@@ -44,6 +46,7 @@ Link.propTypes = {
   }),
   rel: _propTypes["default"].string,
   download: _propTypes["default"].bool,
+  itemProp: _propTypes["default"].string,
   onClick: _propTypes["default"].func
 };
 var _default = Link;

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

@@ -9,6 +9,8 @@ exports["default"] = exports.TabColorTheme = exports.TabSize = exports.TabAlign
 
 require("core-js/modules/es.array.for-each");
 
+require("core-js/modules/es.array.is-array");
+
 require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.array.reduce");
@@ -35,6 +37,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react2 = require("swiper/react");
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/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 || _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; }
@@ -94,6 +98,9 @@ var Tabs = function Tabs(_ref) {
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
   var intersectionObserverRef = React.useRef();
+  var childrenLength = Array.isArray(children) ? children.length : 0;
+  var prevChildrenLength = (0, _usePrevious["default"])(childrenLength) || 0;
+  var isChildrenLengthDiff = childrenLength !== prevChildrenLength;
 
   var _React$useState = React.useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -388,9 +395,13 @@ var Tabs = function Tabs(_ref) {
       return;
     }
 
-    setBeginning(swiperInstance.isBeginning);
-    setEnd(swiperInstance.isEnd);
-  }, [swiperInstance]);
+    if (isChildrenLengthDiff) {
+      handleFromEdge(swiperInstance);
+      return;
+    }
+
+    handleFromEdge(swiperInstance);
+  }, [swiperInstance, isChildrenLengthDiff, handleFromEdge]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,

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

@@ -8,6 +8,8 @@ export interface ITextLinkProps extends ILinkProps {
     underlineVisibility?: 'hover' | 'always';
     /** Стиль подчеркивания */
     underlineStyle?: 'solid' | 'dashed' | 'border' | 'none';
+    /** Атрибут itemprop для микроразметки */
+    itemProp?: string;
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
 }
 declare const TextLink: React.FC<ITextLinkProps>;

package/dist/lib/components/TextLink/TextLink.js

@@ -37,12 +37,14 @@ var TextLink = function TextLink(_ref) {
       onClick = _ref.onClick,
       children = _ref.children,
       download = _ref.download,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      itemProp = _ref.itemProp;
   return /*#__PURE__*/React.createElement(_Link["default"], {
     dataAttrs: dataAttrs,
     target: target,
     href: href,
     rel: rel,
+    itemProp: itemProp,
     onClick: onClick,
     className: cn('', {
       'underline-visibility': underlineVisibility,
@@ -60,6 +62,7 @@ TextLink.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
+  itemProp: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
 };
 var _default = TextLink;

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

@@ -26,6 +26,8 @@ export interface ITileProps {
     href?: string;
     /** Атрибут для открытия ссылки */
     target?: '_self' | '_blank';
+    /** rel - аргумент тега <a> */
+    rel?: string;
     /** Тема */
     theme?: ThemeType;
     /** Радиус границы */

package/dist/lib/components/Tile/Tile.js

@@ -57,7 +57,8 @@ var Tile = function Tile(_ref) {
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs,
       _ref$target = _ref.target,
-      target = _ref$target === void 0 ? '_self' : _ref$target;
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      rel = _ref.rel;
 
   var handleClick = function handleClick(e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -77,7 +78,8 @@ var Tile = function Tile(_ref) {
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/_react["default"].createElement("a", {
     href: href,
     className: cn('link'),
-    target: target
+    target: target,
+    rel: rel
   }, children), !href && children);
 };
 
@@ -92,7 +94,8 @@ Tile.propTypes = {
   dataAttrs: _propTypes["default"].shape({
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   }),
-  target: _propTypes["default"].oneOf(['_self', '_blank'])
+  target: _propTypes["default"].oneOf(['_self', '_blank']),
+  rel: _propTypes["default"].string
 };
 var _default = Tile;
 exports["default"] = _default;

package/dist/lib/index.d.ts

@@ -44,4 +44,3 @@ 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,12 +279,6 @@ 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"));
 
@@ -378,6 +372,4 @@ 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.9.1",
+  "version": "4.10.0",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.4.0",
+    "@megafon/ui-icons": "^2.4.1",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -89,7 +89,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.3.0",
+    "@megafon/ui-helpers": "^2.3.1",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "079e229d423944ab3643730e461d4d5b4342cff0"
+  "gitHead": "ac8874d2fae1f64db72d87a5c0352360a70b9a4d"
 }

package/styles/colors.css

@@ -23,6 +23,7 @@
     --buttonHoverPurple: #A500BF;
     --buttonHoverGrey: #D6D6D6;
     --buttonDown: #404D46;
+    --overlay: #000000CC;
 
     /* Gradients */
     --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);

package/styles/colorsDark.css

@@ -24,6 +24,7 @@
         --buttonHoverPurple: #A500BF;
         --buttonHoverGrey: #D6D6D6;
         --buttonDown: #404D46;
+        --overlay: #000000CC;
 
         /* Gradients */
         --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);