@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.3

package/components/tabs/collapsible-tabs.js

@@ -1,14 +1,7 @@
-import { i as _slicedToArray, j as _toConsumableArray } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { memo, useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -17,32 +10,21 @@ import { m as modules_02138f4a } from '../_helpers/tab-link.js';
 import { MoreButton, FakeMoreButton } from './collapsible-more.js';
 import getTabTitles from './collapsible-tab.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import '../link/link.js';
 import '../global/data-tests.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.object.entries.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '@jetbrains/icons/chevron-10px';
 import '../popup/popup.consts.js';
 import '../popup-menu/popup-menu.js';
 import '../popup/popup.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
 import '../global/dom.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
@@ -51,7 +33,6 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.target.js';
 import '../list/list.js';
-import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
@@ -60,24 +41,19 @@ import 'react-virtualized/dist/es/CellMeasurer';
 import 'util-deprecate';
 import 'memoize-one';
 import '../global/memoize.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
 import '../global/create-stateful-context.js';
 import '../list/list__link.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
-import 'core-js/modules/es.array.index-of.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../avatar/fallback-avatar.js';
-import 'core-js/modules/es.array.from.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../control-help/control-help.js';
@@ -96,57 +72,44 @@ import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import './custom-item.js';
 
-var DEFAULT_DEBOUNCE_INTERVAL = 100;
-var MEASURE_TOLERANCE = 0.5;
-var CollapsibleTabs = function CollapsibleTabs(_ref) {
-  var children = _ref.children,
-    selected = _ref.selected,
-    onSelect = _ref.onSelect,
-    moreClassName = _ref.moreClassName,
-    moreActiveClassName = _ref.moreActiveClassName,
-    morePopupClassName = _ref.morePopupClassName,
-    morePopupBeforeEnd = _ref.morePopupBeforeEnd,
-    morePopupItemClassName = _ref.morePopupItemClassName,
-    initialVisibleItems = _ref.initialVisibleItems;
-  var _useState = useState({
-      tabs: [],
-      more: undefined
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    sizes = _useState2[0],
-    setSizes = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    lastVisibleIndex = _useState4[0],
-    setLastVisibleIndex = _useState4[1];
-  var elements = {
+const DEFAULT_DEBOUNCE_INTERVAL = 100;
+const MEASURE_TOLERANCE = 0.5;
+const CollapsibleTabs = _ref => {
+  let {
+    children,
+    selected,
+    onSelect,
+    moreClassName,
+    moreActiveClassName,
+    morePopupClassName,
+    morePopupBeforeEnd,
+    morePopupItemClassName,
+    initialVisibleItems
+  } = _ref;
+  const [sizes, setSizes] = useState({
+    tabs: [],
+    more: undefined
+  });
+  const [lastVisibleIndex, setLastVisibleIndex] = useState(null);
+  const elements = {
     sizes,
     lastVisibleIndex
   };
-  var _useState5 = useState({
-      visible: [],
-      hidden: []
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    preparedElements = _useState6[0],
-    setPreparedElements = _useState6[1];
-  var measureRef = useRef(null);
-  var selectedIndex = useMemo(function () {
+  const [preparedElements, setPreparedElements] = useState({
+    visible: [],
+    hidden: []
+  });
+  const measureRef = useRef(null);
+  const selectedIndex = useMemo(() => {
     var _children$filter$find;
-    return (_children$filter$find = children.filter(function (tab) {
-      return tab.props.alwaysHidden !== true;
-    }).findIndex(function (tab) {
-      return tab.props.id === selected;
-    })) !== null && _children$filter$find !== void 0 ? _children$filter$find : null;
+    return (_children$filter$find = children.filter(tab => tab.props.alwaysHidden !== true).findIndex(tab => tab.props.id === selected)) !== null && _children$filter$find !== void 0 ? _children$filter$find : null;
   }, [children, selected]);
-  var visibleElements = useMemo(function () {
-    var items;
+  const visibleElements = useMemo(() => {
+    let items;
     if (preparedElements.ready) {
       items = preparedElements.visible;
     } else {
-      items = initialVisibleItems ? children.filter(function (item) {
-        return item.props.alwaysHidden !== true;
-      }).slice(0, initialVisibleItems) : [];
+      items = initialVisibleItems ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems) : [];
     }
     return getTabTitles({
       items,
@@ -154,18 +117,16 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
       onSelect
     });
   }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
-  var adjustTabs = useCallback(function (entry) {
-    var containerWidth = entry.contentRect.width;
-    var _elements$sizes = elements.sizes,
-      tabsSizes = _elements$sizes.tabs,
-      _elements$sizes$more = _elements$sizes.more,
-      more = _elements$sizes$more === void 0 ? 0 : _elements$sizes$more;
-    var renderMore = children.some(function (tab) {
-      return tab.props.alwaysHidden;
-    });
-    var tabsToRender = [];
-    var filledWidth = renderMore ? more !== null && more !== void 0 ? more : 0 : 0;
-    for (var i = 0; i < tabsSizes.length; i++) {
+  const adjustTabs = useCallback(entry => {
+    const containerWidth = entry.contentRect.width;
+    const {
+      tabs: tabsSizes,
+      more = 0
+    } = elements.sizes;
+    let renderMore = children.some(tab => tab.props.alwaysHidden);
+    const tabsToRender = [];
+    let filledWidth = renderMore ? more !== null && more !== void 0 ? more : 0 : 0;
+    for (let i = 0; i < tabsSizes.length; i++) {
       if (filledWidth + tabsSizes[i] < containerWidth + MEASURE_TOLERANCE) {
         filledWidth += tabsSizes[i];
         tabsToRender.push(tabsSizes[i]);
@@ -174,25 +135,25 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
       }
     }
     if (tabsToRender.length < tabsSizes.length && !renderMore) {
-      for (var _i = tabsToRender.length - 1; _i >= 0; _i--) {
+      for (let i = tabsToRender.length - 1; i >= 0; i--) {
         if (filledWidth + more < containerWidth + MEASURE_TOLERANCE) {
           filledWidth += more;
           renderMore = true;
           break;
         } else {
-          filledWidth -= tabsToRender[_i];
+          filledWidth -= tabsToRender[i];
           tabsToRender.pop();
         }
       }
     }
     if (selectedIndex > tabsToRender.length - 1) {
-      var selectedWidth = tabsSizes[selectedIndex];
-      for (var _i2 = tabsToRender.length - 1; _i2 >= 0; _i2--) {
+      const selectedWidth = tabsSizes[selectedIndex];
+      for (let i = tabsToRender.length - 1; i >= 0; i--) {
         if (filledWidth + selectedWidth < containerWidth + MEASURE_TOLERANCE) {
           filledWidth += selectedWidth;
           break;
         } else {
-          filledWidth -= tabsToRender[_i2];
+          filledWidth -= tabsToRender[i];
           tabsToRender.pop();
         }
       }
@@ -202,10 +163,10 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
     }
   }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
   // Prepare list of visible and hidden elements
-  useEffect(function () {
-    var timeout = setTimeout(function () {
+  useEffect(() => {
+    const timeout = setTimeout(() => {
       var _elements$lastVisible2;
-      var res = children.reduce(function (accumulator, tab) {
+      const res = children.reduce((accumulator, tab) => {
         var _elements$lastVisible;
         if (tab.props.alwaysHidden !== true && accumulator.visible.length - 1 < ((_elements$lastVisible = elements.lastVisibleIndex) !== null && _elements$lastVisible !== void 0 ? _elements$lastVisible : 0)) {
           accumulator.visible.push(tab);
@@ -219,104 +180,86 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
         ready: elements.lastVisibleIndex !== null
       });
       if (selectedIndex > ((_elements$lastVisible2 = elements.lastVisibleIndex) !== null && _elements$lastVisible2 !== void 0 ? _elements$lastVisible2 : 0)) {
-        var selectedItem = children.find(function (tab) {
-          return !tab.props.alwaysHidden && tab.props.id === selected;
-        });
+        const selectedItem = children.find(tab => !tab.props.alwaysHidden && tab.props.id === selected);
         if (selectedItem != null) {
           res.visible.push(selectedItem);
         }
       }
-      var allVisibleTheSame = res.visible.length === preparedElements.visible.length && res.visible.every(function (item, index) {
-        return item === preparedElements.visible[index];
-      });
-      var allHiddenTheSame = res.hidden.length === preparedElements.hidden.length && res.hidden.every(function (item, index) {
-        return item === preparedElements.hidden[index];
-      });
+      const allVisibleTheSame = res.visible.length === preparedElements.visible.length && res.visible.every((item, index) => item === preparedElements.visible[index]);
+      const allHiddenTheSame = res.hidden.length === preparedElements.hidden.length && res.hidden.every((item, index) => item === preparedElements.hidden[index]);
       if (!allVisibleTheSame || !allHiddenTheSame || preparedElements.ready !== res.ready) {
-        fastdom.mutate(function () {
-          return setPreparedElements(res);
-        });
+        fastdom.mutate(() => setPreparedElements(res));
       }
     }, DEFAULT_DEBOUNCE_INTERVAL);
-    return function () {
+    return () => {
       clearTimeout(timeout);
     };
   }, [children, elements.lastVisibleIndex, preparedElements, selected, selectedIndex]);
   // Get list of all possibly visible elements to render in a measure container
-  var childrenToMeasure = useMemo(function () {
-    var items = children.filter(function (tab) {
-      return tab.props.alwaysHidden !== true;
-    });
+  const childrenToMeasure = useMemo(() => {
+    const items = children.filter(tab => tab.props.alwaysHidden !== true);
     return getTabTitles({
       items,
       tabIndex: -1
     });
   }, [children]);
   // Initial measure for tabs and more button sizes
-  useEffect(function () {
+  useEffect(() => {
     if (measureRef.current == null) {
       return undefined;
     }
-    var measureTask = fastdom.measure(function () {
+    const measureTask = fastdom.measure(() => {
       var _container$children, _moreButton$offsetWid;
-      var container = measureRef.current;
-      var descendants = _toConsumableArray((_container$children = container === null || container === void 0 ? void 0 : container.children) !== null && _container$children !== void 0 ? _container$children : []);
-      var moreButton = descendants.pop();
-      var moreButtonWidth = (_moreButton$offsetWid = moreButton === null || moreButton === void 0 ? void 0 : moreButton.offsetWidth) !== null && _moreButton$offsetWid !== void 0 ? _moreButton$offsetWid : 0;
-      var _ref2 = moreButton ? getComputedStyle(moreButton) : {},
-        _ref2$marginLeft = _ref2.marginLeft,
-        moreButtonMarginLeft = _ref2$marginLeft === void 0 ? '0' : _ref2$marginLeft,
-        _ref2$marginRight = _ref2.marginRight,
-        moreButtonMarginRight = _ref2$marginRight === void 0 ? '0' : _ref2$marginRight;
+      const container = measureRef.current;
+      const descendants = [...((_container$children = container === null || container === void 0 ? void 0 : container.children) !== null && _container$children !== void 0 ? _container$children : [])];
+      const moreButton = descendants.pop();
+      let moreButtonWidth = (_moreButton$offsetWid = moreButton === null || moreButton === void 0 ? void 0 : moreButton.offsetWidth) !== null && _moreButton$offsetWid !== void 0 ? _moreButton$offsetWid : 0;
+      const {
+        marginLeft: moreButtonMarginLeft = '0',
+        marginRight: moreButtonMarginRight = '0'
+      } = moreButton ? getComputedStyle(moreButton) : {};
       moreButtonWidth += +moreButtonMarginLeft.replace('px', '') + +moreButtonMarginRight.replace('px', '');
-      var tabsWidth = descendants.map(function (node) {
-        var _getComputedStyle = getComputedStyle(node),
-          marginLeft = _getComputedStyle.marginLeft,
-          marginRight = _getComputedStyle.marginRight;
-        var width = node.getBoundingClientRect().width;
+      const tabsWidth = descendants.map(node => {
+        const {
+          marginLeft,
+          marginRight
+        } = getComputedStyle(node);
+        const width = node.getBoundingClientRect().width;
         return width + +marginLeft.replace('px', '') + +marginRight.replace('px', '');
       });
-      var newSummaryWidth = tabsWidth.reduce(function (acc, curr) {
-        return acc + curr;
-      }, 0);
-      var oldSummaryWidth = elements.sizes.tabs.reduce(function (acc, curr) {
-        return acc + curr;
-      }, 0);
+      const newSummaryWidth = tabsWidth.reduce((acc, curr) => acc + curr, 0);
+      const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => acc + curr, 0);
       if (elements.sizes.more !== moreButtonWidth || newSummaryWidth !== oldSummaryWidth) {
-        fastdom.mutate(function () {
-          return setSizes({
-            more: moreButtonWidth,
-            tabs: tabsWidth
-          });
-        });
+        fastdom.mutate(() => setSizes({
+          more: moreButtonWidth,
+          tabs: tabsWidth
+        }));
       }
     });
-    return function () {
+    return () => {
       fastdom.clear(measureTask);
     };
   }, [children, elements.sizes.more, elements.sizes.tabs]);
   // Start observers to listen resizing and mutation
-  useEffect(function () {
+  useEffect(() => {
     if (measureRef.current === null) {
       return undefined;
     }
-    var measureTask = function measureTask() {};
-    var resizeObserver = new ResizeObserver(function (entries) {
-      entries.forEach(function (entry) {
+    let measureTask = () => {};
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
         fastdom.clear(measureTask);
-        measureTask = fastdom.mutate(function () {
-          return adjustTabs(entry);
-        });
+        measureTask = fastdom.mutate(() => adjustTabs(entry));
       });
     });
     resizeObserver.observe(measureRef.current);
-    return function () {
+    return () => {
       fastdom.clear(measureTask);
       resizeObserver.disconnect();
     };
   }, [adjustTabs]);
-  var isAdjusted = elements.lastVisibleIndex !== null && preparedElements.ready === true || initialVisibleItems;
-  var className = classNames(modules_02138f4a.titles, modules_02138f4a.autoCollapse, isAdjusted && modules_02138f4a.adjusted);
+  const isAdjusted = elements.lastVisibleIndex !== null && preparedElements.ready === true || initialVisibleItems;
+  const className = classNames(modules_02138f4a.titles, modules_02138f4a.autoCollapse, isAdjusted && modules_02138f4a.adjusted);
   return /*#__PURE__*/jsxs("div", {
     className: modules_02138f4a.autoCollapseContainer,
     children: [/*#__PURE__*/jsxs("div", {
@@ -335,9 +278,7 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
       ref: measureRef,
       className: classNames(className, modules_02138f4a.measure),
       children: [childrenToMeasure, /*#__PURE__*/jsx(FakeMoreButton, {
-        hasActiveChildren: preparedElements.hidden.some(function (item) {
-          return item.props.alwaysHidden && item.props.id === selected;
-        }),
+        hasActiveChildren: preparedElements.hidden.some(item => item.props.alwaysHidden && item.props.id === selected),
         moreClassName: moreClassName,
         moreActiveClassName: moreActiveClassName
       })]

package/components/tabs/custom-item.js

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 
-var CustomItem = function CustomItem(_ref) {
-  var children = _ref.children;
+const CustomItem = _ref => {
+  let {
+    children
+  } = _ref;
   return children;
 };
 CustomItem.propTypes = {

package/components/tabs/dumb-tabs.js

@@ -1,10 +1,5 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.promise.js';
+import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import * as React from 'react';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -14,41 +9,25 @@ import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_02138f4a, T as TabLink } from '../_helpers/tab-link.js';
 import CollapsibleTabs from './collapsible-tabs.js';
 import { CustomItem } from './custom-item.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
 import '../link/link.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
 import 'fastdom';
 import './collapsible-more.js';
 import '@jetbrains/icons/chevron-10px';
 import '../popup/popup.consts.js';
 import '../popup-menu/popup-menu.js';
 import '../popup/popup.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
 import '../global/dom.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
@@ -57,7 +36,6 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.target.js';
 import '../list/list.js';
-import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
@@ -69,18 +47,15 @@ import '../global/create-stateful-context.js';
 import '../list/list__link.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
-import 'core-js/modules/es.array.index-of.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../avatar/fallback-avatar.js';
-import 'core-js/modules/es.array.from.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../control-help/control-help.js';
@@ -99,36 +74,30 @@ import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import './collapsible-tab.js';
 
-var _excluded = ["className", "tabContainerClassName", "children", "selected", "autoCollapse", "data-test"];
-var Tabs = /*#__PURE__*/function (_PureComponent) {
-  function Tabs() {
-    var _this;
-    _classCallCheck(this, Tabs);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Tabs, [].concat(args));
-    _defineProperty(_this, "handleSelect", memoize(function (key) {
-      return function () {
-        return _this.props.onSelect(key);
-      };
-    }));
-    _defineProperty(_this, "getTabTitle", function (child, i) {
+const _excluded = ["className", "tabContainerClassName", "children", "selected", "autoCollapse", "data-test"];
+class Tabs extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleSelect", memoize(key => () => this.props.onSelect(key)));
+    _defineProperty(this, "getTabTitle", (child, i) => {
       if (child == null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
       }
-      var selected = _this.props.selected;
-      var _child$props = child.props,
-        title = _child$props.title,
-        titleProps = _child$props.titleProps,
-        id = _child$props.id,
-        disabled = _child$props.disabled,
-        href = _child$props.href,
-        className = _child$props.className,
-        activeClassName = _child$props.activeClassName;
-      var key = id || String(i);
-      var isSelected = key === selected;
-      var titleClasses = classNames(modules_02138f4a.title, className, isSelected && activeClassName, {
+      const {
+        selected
+      } = this.props;
+      const {
+        title,
+        titleProps,
+        id,
+        disabled,
+        href,
+        className,
+        activeClassName
+      } = child.props;
+      const key = id || String(i);
+      const isSelected = key === selected;
+      const titleClasses = classNames(modules_02138f4a.title, className, isSelected && activeClassName, {
         [modules_02138f4a.selected]: isSelected
       });
       return /*#__PURE__*/jsx(TabLink, _objectSpread2({
@@ -137,46 +106,45 @@ var Tabs = /*#__PURE__*/function (_PureComponent) {
         href: href,
         className: titleClasses,
         disabled: disabled,
-        onPlainLeftClick: _this.handleSelect(key)
+        onPlainLeftClick: this.handleSelect(key)
       }, titleProps), key);
     });
-    return _this;
   }
-  _inherits(Tabs, _PureComponent);
-  return _createClass(Tabs, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        tabContainerClassName = _this$props.tabContainerClassName,
-        children = _this$props.children,
-        selected = _this$props.selected,
-        autoCollapse = _this$props.autoCollapse,
-        dataTest = _this$props['data-test'],
-        restProps = _objectWithoutProperties(_this$props, _excluded);
-      var classes = classNames(modules_02138f4a.tabs, className);
-      var childrenArray = React.Children.toArray(children).filter(Boolean);
-      return /*#__PURE__*/jsxs("div", {
-        className: classes,
-        "data-test": joinDataTestAttributes('ring-dumb-tabs', dataTest),
-        children: [autoCollapse === true ? /*#__PURE__*/jsx(CollapsibleTabs, _objectSpread2(_objectSpread2({}, restProps), {}, {
-          onSelect: this.handleSelect,
-          selected: selected,
-          children: childrenArray
-        })) : /*#__PURE__*/jsx("div", {
-          className: modules_02138f4a.titles,
-          children: childrenArray.map(this.getTabTitle)
-        }), /*#__PURE__*/jsx("div", {
-          className: classNames(tabContainerClassName),
-          children: childrenArray.find(function (_ref, i) {
-            var props = _ref.props;
-            return (props.id || String(i)) === selected;
-          })
-        })]
-      });
-    }
-  }]);
-}(PureComponent);
+  render() {
+    const _this$props = this.props,
+      {
+        className,
+        tabContainerClassName,
+        children,
+        selected,
+        autoCollapse,
+        'data-test': dataTest
+      } = _this$props,
+      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const classes = classNames(modules_02138f4a.tabs, className);
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
+    return /*#__PURE__*/jsxs("div", {
+      className: classes,
+      "data-test": joinDataTestAttributes('ring-dumb-tabs', dataTest),
+      children: [autoCollapse === true ? /*#__PURE__*/jsx(CollapsibleTabs, _objectSpread2(_objectSpread2({}, restProps), {}, {
+        onSelect: this.handleSelect,
+        selected: selected,
+        children: childrenArray
+      })) : /*#__PURE__*/jsx("div", {
+        className: modules_02138f4a.titles,
+        children: childrenArray.map(this.getTabTitle)
+      }), /*#__PURE__*/jsx("div", {
+        className: classNames(tabContainerClassName),
+        children: childrenArray.find((_ref, i) => {
+          let {
+            props
+          } = _ref;
+          return (props.id || String(i)) === selected;
+        })
+      })]
+    });
+  }
+}
 _defineProperty(Tabs, "propTypes", {
   selected: PropTypes.string,
   className: PropTypes.string,