@megafon/ui-core 6.2.1 → 7.0.0

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import './Tabs.less';
 import { ITabProps } from './Tab';
+import './Tabs.scss';
 export declare const TabAlign: {
     readonly LEFT: "left";
     readonly CENTER: "center";
@@ -14,9 +14,10 @@ export declare const TabColorTheme: {
     readonly GREEN: "green";
     readonly GRAY: "gray";
 };
-declare type TabSizeType = typeof TabSize[keyof typeof TabSize];
-declare type TabColorThemeType = typeof TabColorTheme[keyof typeof TabColorTheme];
-declare type TabAlignType = typeof TabAlign[keyof typeof TabAlign];
+type TabSizeType = (typeof TabSize)[keyof typeof TabSize];
+type TabColorThemeType = (typeof TabColorTheme)[keyof typeof TabColorTheme];
+type TabAlignType = (typeof TabAlign)[keyof typeof TabAlign];
+export type TabsChildrenType = Array<React.ReactElement<ITabProps>>;
 export interface ITabsProps {
     /** Дополнительный класс для корневого элемента */
     className?: string;
@@ -60,7 +61,7 @@ export interface ITabsProps {
     outerObserveContainer?: HTMLDivElement | null;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
-    children: Array<React.ReactElement<ITabProps>>;
+    children: TabsChildrenType;
 }
 declare const Tabs: React.FC<ITabsProps>;
 export default Tabs;

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

@@ -1,51 +1,31 @@
 "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); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TabColorTheme = exports.TabSize = exports.TabAlign = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
+exports["default"] = exports.TabSize = exports.TabColorTheme = exports.TabAlign = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.is-array.js");
-
-require("core-js/modules/es.object.values.js");
-
+require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.reduce.js");
-
 require("core-js/modules/es.array.splice.js");
-
-require("core-js/modules/es.array.for-each.js");
-
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.object.values.js");
+require("core-js/modules/es.regexp.sticky.js");
 require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.array.map.js");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _uiHelpers = require("@megafon/ui-helpers");
-
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react2 = require("swiper/react");
-
-var _NotificationBadge = _interopRequireDefault(require("../Badges/components/NotificationBadge/NotificationBadge"));
-
 var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _NotificationBadge = _interopRequireDefault(require("../Badges/NotificationBadge/NotificationBadge"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/* eslint-disable @typescript-eslint/no-var-requires */
 
 var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
@@ -54,48 +34,54 @@ var ArrowLeft = function ArrowLeft(props) {
     d: "M12 13l-3-3 3-3-1-1-4 4 4 4z"
   }));
 };
-
-var TabAlign = {
+var Swiper = null;
+var SwiperSlide = null;
+try {
+  // eslint-disable-next-line global-require
+  var SwiperAll = require('swiper/react');
+  Swiper = SwiperAll.Swiper;
+  SwiperSlide = SwiperAll.SwiperSlide;
+} catch (e) {
+  // eslint-disable-next-line no-console
+  console.warn("\n        WARNING: megafon/ui-core is using the latest version of swiper.       \n        For more information about server-side rendering\n        please check the Tabs component documentation at:\n        https://ui.megafon.ru/components/tabs\n    ");
+}
+var TabAlign = exports.TabAlign = {
   LEFT: 'left',
   CENTER: 'center'
 };
-exports.TabAlign = TabAlign;
-var TabSize = {
+var TabSize = exports.TabSize = {
   MEDIUM: 'medium',
   LARGE: 'large'
 };
-exports.TabSize = TabSize;
-var TabColorTheme = {
+var TabColorTheme = exports.TabColorTheme = {
   WHITE: 'white',
   GREEN: 'green',
   GRAY: 'gray'
 };
-exports.TabColorTheme = TabColorTheme;
 var cn = (0, _uiHelpers.cnCreate)('mfui-tabs');
-
 var Tabs = function Tabs(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$tabColorTheme = _ref.tabColorTheme,
-      tabColorTheme = _ref$tabColorTheme === void 0 ? 'white' : _ref$tabColorTheme,
-      _ref$sticky = _ref.sticky,
-      sticky = _ref$sticky === void 0 ? false : _ref$sticky,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'left' : _ref$align,
-      _ref$defaultIndex = _ref.defaultIndex,
-      defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
-      outerIndex = _ref.currentIndex,
-      _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
-      renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
-      _ref$autoWidth = _ref.autoWidth,
-      autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
-      children = _ref.children,
-      dataAttrs = _ref.dataAttrs,
-      onTabClick = _ref.onTabClick,
-      outerObserveContainer = _ref.outerObserveContainer;
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$tabColorTheme = _ref.tabColorTheme,
+    tabColorTheme = _ref$tabColorTheme === void 0 ? 'white' : _ref$tabColorTheme,
+    _ref$sticky = _ref.sticky,
+    sticky = _ref$sticky === void 0 ? false : _ref$sticky,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    outerIndex = _ref.currentIndex,
+    _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
+    renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
+    _ref$autoWidth = _ref.autoWidth,
+    autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
+    children = _ref.children,
+    dataAttrs = _ref.dataAttrs,
+    onTabClick = _ref.onTabClick,
+    outerObserveContainer = _ref.outerObserveContainer;
   var tabsRef = React.useRef({});
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
@@ -103,67 +89,54 @@ var Tabs = function Tabs(_ref) {
   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),
-      swiperInstance = _React$useState2[0],
-      setSwiperInstance = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    swiperInstance = _React$useState2[0],
+    setSwiperInstance = _React$useState2[1];
   var _React$useState3 = React.useState(true),
-      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-      isBeginning = _React$useState4[0],
-      setBeginning = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    isBeginning = _React$useState4[0],
+    setBeginning = _React$useState4[1];
   var _React$useState5 = React.useState(true),
-      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-      isEnd = _React$useState6[0],
-      setEnd = _React$useState6[1];
-
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    isEnd = _React$useState6[0],
+    setEnd = _React$useState6[1];
   var _React$useState7 = React.useState(defaultIndex),
-      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
-      innerIndex = _React$useState8[0],
-      setInnerIndex = _React$useState8[1];
-
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    innerIndex = _React$useState8[0],
+    setInnerIndex = _React$useState8[1];
   var currentIndex = outerIndex === undefined ? innerIndex : outerIndex;
-
   var _React$useState9 = React.useState(0),
-      _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
-      activeTabWidth = _React$useState10[0],
-      setActiveTabWidth = _React$useState10[1];
-
+    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+    activeTabWidth = _React$useState10[0],
+    setActiveTabWidth = _React$useState10[1];
   var _React$useState11 = React.useState(0),
-      _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
-      underlineWidth = _React$useState12[0],
-      setUnderlineWidth = _React$useState12[1];
-
+    _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
+    underlineWidth = _React$useState12[0],
+    setUnderlineWidth = _React$useState12[1];
   var _React$useState13 = React.useState(0),
-      _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
-      underlineTranslate = _React$useState14[0],
-      setUnderlineTranslate = _React$useState14[1];
-
+    _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
+    underlineTranslate = _React$useState14[0],
+    setUnderlineTranslate = _React$useState14[1];
   var _React$useState15 = React.useState('none'),
-      _React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
-      underlineTransition = _React$useState16[0],
-      setUnderlineTransition = _React$useState16[1];
-
+    _React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
+    underlineTransition = _React$useState16[0],
+    setUnderlineTransition = _React$useState16[1];
   var _React$useState17 = React.useState('auto'),
-      _React$useState18 = (0, _slicedToArray2["default"])(_React$useState17, 2),
-      tabListHeight = _React$useState18[0],
-      setTabListHeight = _React$useState18[1];
-
+    _React$useState18 = (0, _slicedToArray2["default"])(_React$useState17, 2),
+    tabListHeight = _React$useState18[0],
+    setTabListHeight = _React$useState18[1];
   var _React$useState19 = React.useState(false),
-      _React$useState20 = (0, _slicedToArray2["default"])(_React$useState19, 2),
-      isSticky = _React$useState20[0],
-      setSticky = _React$useState20[1];
-
+    _React$useState20 = (0, _slicedToArray2["default"])(_React$useState19, 2),
+    isSticky = _React$useState20[0],
+    setSticky = _React$useState20[1];
   var _React$useState21 = React.useState({
-    left: 0,
-    right: 0
-  }),
-      _React$useState22 = (0, _slicedToArray2["default"])(_React$useState21, 2),
-      stickyOffset = _React$useState22[0],
-      setStickyOffset = _React$useState22[1];
-
+      left: 0,
+      right: 0
+    }),
+    _React$useState22 = (0, _slicedToArray2["default"])(_React$useState21, 2),
+    stickyOffset = _React$useState22[0],
+    setStickyOffset = _React$useState22[1];
   var setTabRef = React.useCallback(function (i) {
     return function (tab) {
       if (tab) {
@@ -173,15 +146,12 @@ var Tabs = function Tabs(_ref) {
   }, []);
   var calculateUnderline = React.useCallback(function () {
     var tabs = Object.values(tabsRef.current);
-
     if (!tabs.length) {
       return;
     }
-
-    var translate = (0, _toConsumableArray2["default"])(tabs).splice(0, currentIndex).reduce(function (accWidth, node) {
+    var translate = [].concat(tabs).splice(0, currentIndex).reduce(function (accWidth, node) {
       var _node$getBoundingClie = node.getBoundingClientRect(),
-          width = _node$getBoundingClie.width;
-
+        width = _node$getBoundingClie.width;
       return accWidth + width;
     }, 0);
     setUnderlineWidth(activeTabWidth);
@@ -191,11 +161,9 @@ var Tabs = function Tabs(_ref) {
     if (!sticky || !rootRef.current || !tabListRef.current) {
       return;
     }
-
     var _rootRef$current$getB = rootRef.current.getBoundingClientRect(),
-        left = _rootRef$current$getB.left,
-        right = _rootRef$current$getB.right;
-
+      left = _rootRef$current$getB.left,
+      right = _rootRef$current$getB.right;
     var documentWidth = document.documentElement.clientWidth;
     setStickyOffset({
       left: left,
@@ -219,7 +187,6 @@ var Tabs = function Tabs(_ref) {
   }, []);
   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]);
@@ -227,32 +194,26 @@ var Tabs = function Tabs(_ref) {
     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;
-
+          _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;
-
+          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 {
@@ -265,11 +226,9 @@ var Tabs = function Tabs(_ref) {
     return function () {
       setUnderlineTransition('all');
       onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(index);
-
       if (outerIndex === undefined) {
         setInnerIndex(index);
       }
-
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
     };
   }, [onTabClick, outerIndex, swiperInstance]);
@@ -294,25 +253,23 @@ var Tabs = function Tabs(_ref) {
   }, []);
   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 (_ref3, index) {
     var title = _ref3.title,
-        icon = _ref3.icon,
-        bubbleTitle = _ref3.bubbleTitle,
-        hasBubble = _ref3.hasBubble,
-        bubbleColor = _ref3.bubbleColor,
-        href = _ref3.href,
-        rel = _ref3.rel,
-        attr = _ref3.attr;
+      icon = _ref3.icon,
+      bubbleTitle = _ref3.bubbleTitle,
+      hasBubble = _ref3.hasBubble,
+      bubbleColor = _ref3.bubbleColor,
+      href = _ref3.href,
+      rel = _ref3.rel,
+      attr = _ref3.attr;
     var ElementType = href ? 'a' : 'div';
     var bubbleSizeWithTitle = size === 'medium' ? 'medium' : 'big';
     return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({
@@ -338,15 +295,15 @@ var Tabs = function Tabs(_ref) {
   var renderTabs = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
       var _child$props = child.props,
-          title = _child$props.title,
-          icon = _child$props.icon,
-          bubbleTitle = _child$props.bubbleTitle,
-          hasBubble = _child$props.hasBubble,
-          bubbleColor = _child$props.bubbleColor,
-          href = _child$props.href,
-          rel = _child$props.rel,
-          renderTabWrapper = _child$props.renderTabWrapper,
-          data = _child$props.dataAttrs;
+        title = _child$props.title,
+        icon = _child$props.icon,
+        bubbleTitle = _child$props.bubbleTitle,
+        hasBubble = _child$props.hasBubble,
+        bubbleColor = _child$props.bubbleColor,
+        href = _child$props.href,
+        rel = _child$props.rel,
+        renderTabWrapper = _child$props.renderTabWrapper,
+        data = _child$props.dataAttrs;
       var tab = renderTab({
         title: title,
         icon: icon,
@@ -358,7 +315,10 @@ var Tabs = function Tabs(_ref) {
         attr: data === null || data === void 0 ? void 0 : data.inner
       }, i);
       var activeTabClassName = currentIndex === i ? classes === null || classes === void 0 ? void 0 : classes.activeTab : undefined;
-      return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
+      if (!SwiperSlide) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(SwiperSlide, {
         className: cn('slide')
       }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
         className: cn('tab', [classes === null || classes === void 0 ? void 0 : classes.tab, activeTabClassName]),
@@ -370,11 +330,9 @@ var Tabs = function Tabs(_ref) {
     return React.Children.map(children, function (child, i) {
       var panel = child.props.children;
       var isCurrentPanel = currentIndex === i;
-
       if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
         className: cn('panel', {
           current: isCurrentPanel
@@ -386,7 +344,6 @@ var Tabs = function Tabs(_ref) {
     if (!sticky) {
       return undefined;
     }
-
     addIntersectionObserver();
     addObserveEvent();
     return function () {
@@ -396,7 +353,6 @@ var Tabs = function Tabs(_ref) {
   React.useEffect(function () {
     var handleResize = (0, _lodash["default"])(function () {
       calculateSticky();
-
       if (sticky && isContainerNotFitViewport()) {
         removeObserveEvent();
         addIntersectionObserver();
@@ -408,7 +364,6 @@ var Tabs = function Tabs(_ref) {
       if (!entries.length || !entries[0]) {
         return;
       }
-
       var width = entries[0].contentRect.width;
       setActiveTabWidth(width);
       calculateUnderline();
@@ -425,21 +380,20 @@ var Tabs = function Tabs(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     if (isChildrenLengthDiff) {
       var activeTabNode = tabsRef.current[currentIndex];
-
       var _activeTabNode$getBou = activeTabNode.getBoundingClientRect(),
-          width = _activeTabNode$getBou.width;
-
+        width = _activeTabNode$getBou.width;
       handleFromEdge(swiperInstance);
       setActiveTabWidth(width);
       calculateUnderline();
       return;
     }
-
     handleFromEdge(swiperInstance);
   }, [swiperInstance, isChildrenLengthDiff, handleFromEdge, currentIndex, calculateUnderline]);
+  if (!Swiper) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
@@ -466,7 +420,7 @@ var Tabs = function Tabs(_ref) {
       paddingLeft: stickyOffset.left,
       paddingRight: stickyOffset.right
     }
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     simulateTouch: false,
     className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
     watchOverflow: true,
@@ -499,37 +453,4 @@ var Tabs = function Tabs(_ref) {
     onClick: handleNextArrowClick
   }))))), renderPanels());
 };
-
-Tabs.propTypes = {
-  className: _propTypes["default"].string,
-  classes: _propTypes["default"].shape({
-    root: _propTypes["default"].string,
-    wrapper: _propTypes["default"].string,
-    swiperWrapper: _propTypes["default"].string,
-    innerIndents: _propTypes["default"].string,
-    tab: _propTypes["default"].string,
-    activeTab: _propTypes["default"].string,
-    panel: _propTypes["default"].string
-  }),
-  dataAttrs: _propTypes["default"].shape({
-    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    slider: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    panel: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    prev: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    next: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    wrapper: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    swiperWrapper: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
-  }),
-  size: _propTypes["default"].oneOf(Object.values(TabSize)),
-  align: _propTypes["default"].oneOf(Object.values(TabAlign)),
-  autoWidth: _propTypes["default"].bool,
-  tabColorTheme: _propTypes["default"].oneOf(Object.values(TabColorTheme)),
-  sticky: _propTypes["default"].bool,
-  currentIndex: _propTypes["default"].number,
-  defaultIndex: _propTypes["default"].number,
-  renderOnlyCurrentPanel: _propTypes["default"].bool,
-  outerObserveContainer: _propTypes["default"].oneOfType([_propTypes["default"].elementType, _propTypes["default"].any]),
-  onTabClick: _propTypes["default"].func
-};
-var _default = Tabs;
-exports["default"] = _default;
+var _default = exports["default"] = Tabs;