@jetbrains/ring-ui-built 6.0.35 → 6.0.37

package/components/tabs/collapsible-more.js

@@ -1,7 +1,7 @@
-import { c as _objectWithoutProperties, e as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { c as _objectWithoutProperties, d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.object.to-string.js';
-import React from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';
 import PropTypes from 'prop-types';
@@ -13,6 +13,7 @@ import Icon from '../icon/icon.js';
 import { m as modules_02138f4a } from '../_helpers/tab-link.js';
 import getTabTitles from './collapsible-tab.js';
 import { CustomItem } from './custom-item.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.concat.js';
 import '../popup/popup.js';
 import 'core-js/modules/es.object.entries.js';
@@ -74,6 +75,7 @@ import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
+import '../control-help/control-help.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
@@ -98,12 +100,14 @@ var AnchorLink = function AnchorLink(_ref) {
     moreActiveClassName = _ref.moreActiveClassName,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var classnames = classNames(modules_02138f4a.title, hasActiveChildren && modules_02138f4a.selected, hasActiveChildren && moreActiveClassName, moreClassName);
-  return /*#__PURE__*/React.createElement(Link, _extends({
+  return /*#__PURE__*/jsxs(Link, _objectSpread2(_objectSpread2({
     title: 'More',
     className: classnames
-  }, restProps), 'More', /*#__PURE__*/React.createElement(Icon, {
-    glyph: chevronDown,
-    className: modules_02138f4a.chevron
+  }, restProps), {}, {
+    children: ['More', /*#__PURE__*/jsx(Icon, {
+      glyph: chevronDown,
+      className: modules_02138f4a.chevron
+    })]
   }));
 };
 AnchorLink.propTypes = {
@@ -112,7 +116,7 @@ AnchorLink.propTypes = {
   moreActiveClassName: PropTypes.string
 };
 var morePopupDirections = [Directions.BOTTOM_CENTER, Directions.BOTTOM_LEFT, Directions.BOTTOM_RIGHT];
-var MoreButton = /*#__PURE__*/React.memo(function (_ref2) {
+var MoreButton = /*#__PURE__*/memo(function (_ref2) {
   var items = _ref2.items,
     selected = _ref2.selected,
     onSelect = _ref2.onSelect,
@@ -121,19 +125,19 @@ var MoreButton = /*#__PURE__*/React.memo(function (_ref2) {
     morePopupClassName = _ref2.morePopupClassName,
     morePopupItemClassName = _ref2.morePopupItemClassName,
     morePopupBeforeEnd = _ref2.morePopupBeforeEnd;
-  var onSelectHandler = React.useCallback(function (listItem) {
+  var onSelectHandler = useCallback(function (listItem) {
     if (listItem.disabled === true || listItem.custom === true) {
       return;
     }
     var cb = onSelect(String(listItem.key));
     cb();
   }, [onSelect]);
-  var hasActiveChild = React.useMemo(function () {
+  var hasActiveChild = useMemo(function () {
     return items.some(function (item) {
       return item.props.alwaysHidden && item.props.id === selected;
     });
   }, [items, selected]);
-  var data = React.useMemo(function () {
+  var data = useMemo(function () {
     var popupItems = getTabTitles({
       items,
       selected,
@@ -160,15 +164,15 @@ var MoreButton = /*#__PURE__*/React.memo(function (_ref2) {
     }
     return popupItems;
   }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
-  var popupAnchor = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(AnchorLink, {
+  var popupAnchor = useMemo(function () {
+    return /*#__PURE__*/jsx(AnchorLink, {
       moreClassName: moreClassName,
       moreActiveClassName: moreActiveClassName,
       hasActiveChildren: hasActiveChild
     });
   }, [hasActiveChild, moreActiveClassName, moreClassName]);
-  var popup = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(PopupMenu, {
+  var popup = useMemo(function () {
+    return /*#__PURE__*/jsx(PopupMenu, {
       directions: morePopupDirections,
       className: morePopupClassName,
       onSelect: onSelectHandler,
@@ -178,12 +182,14 @@ var MoreButton = /*#__PURE__*/React.memo(function (_ref2) {
   if (items.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(modules_02138f4a.title, moreClassName, hasActiveChild && moreActiveClassName)
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    hoverMode: true,
-    anchor: popupAnchor
-  }, popup));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(modules_02138f4a.title, moreClassName, hasActiveChild && moreActiveClassName),
+    children: /*#__PURE__*/jsx(Dropdown, {
+      hoverMode: true,
+      anchor: popupAnchor,
+      children: popup
+    })
+  });
 });
 MoreButton.propTypes = {
   children: PropTypes.node,
@@ -198,19 +204,20 @@ MoreButton.propTypes = {
   morePopupBeforeEnd: PropTypes.element
 };
 MoreButton.displayName = 'MoreButton';
-var FakeMoreButton = /*#__PURE__*/React.memo(function (_ref3) {
+var FakeMoreButton = /*#__PURE__*/memo(function (_ref3) {
   var moreClassName = _ref3.moreClassName,
     moreActiveClassName = _ref3.moreActiveClassName,
     hasActiveChildren = _ref3.hasActiveChildren;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(modules_02138f4a.moreButton, modules_02138f4a.title)
-  }, /*#__PURE__*/React.createElement(AnchorLink, {
-    moreClassName: moreClassName,
-    moreActiveClassName: moreActiveClassName,
-    hasActiveChildren: hasActiveChildren,
-    tabIndex: -1,
-    disabled: true
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(modules_02138f4a.moreButton, modules_02138f4a.title),
+    children: /*#__PURE__*/jsx(AnchorLink, {
+      moreClassName: moreClassName,
+      moreActiveClassName: moreActiveClassName,
+      hasActiveChildren: hasActiveChildren,
+      tabIndex: -1,
+      disabled: true
+    })
+  });
 });
 FakeMoreButton.propTypes = {
   moreClassName: PropTypes.string,

package/components/tabs/collapsible-tab.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
+import * as React from 'react';
 import { TabProps } from './tab';
 export interface TabTitleProps {
     selected: boolean;

package/components/tabs/collapsible-tab.js

@@ -1,10 +1,11 @@
-import { e as _extends, c as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { d as _objectSpread2, c as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.map.js';
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { m as modules_02138f4a, T as TabLink } from '../_helpers/tab-link.js';
 import { CustomItem } from './custom-item.js';
+import { jsx } from 'react/jsx-runtime';
 import '../link/link.js';
 import '../global/data-tests.js';
 import 'core-js/modules/es.array.concat.js';
@@ -43,7 +44,7 @@ var TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
     [collapsedClassName !== null && collapsedClassName !== void 0 ? collapsedClassName : '']: collapsed,
     [collapsedActiveClassName !== null && collapsedActiveClassName !== void 0 ? collapsedActiveClassName : '']: collapsed && selected
   });
-  return /*#__PURE__*/React.createElement(TabLink, _extends({
+  return /*#__PURE__*/jsx(TabLink, _objectSpread2({
     title: title,
     isSelected: selected,
     active: true,
@@ -75,13 +76,12 @@ var getTabTitles = function getTabTitles(_ref2) {
   return items.map(function (tab, index) {
     var key = tab.props.id || String(index);
     var isSelected = selected === key;
-    return /*#__PURE__*/React.createElement(TabTitle, _extends({
-      key: key,
+    return /*#__PURE__*/jsx(TabTitle, _objectSpread2({
       handleSelect: onSelect(key),
       selected: isSelected,
       child: tab,
       collapsed: collapsed
-    }, props));
+    }, props), key);
   });
 };
 

package/components/tabs/collapsible-tabs.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { TabProps } from './tab';
 export interface CollapsibleTabsProps {
@@ -13,7 +13,7 @@ export interface CollapsibleTabsProps {
     morePopupBeforeEnd?: ReactNode;
 }
 export declare const CollapsibleTabs: {
-    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): import("react").JSX.Element;
     propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         selected: PropTypes.Requireable<string>;
@@ -26,8 +26,8 @@ export declare const CollapsibleTabs: {
         morePopupBeforeEnd: PropTypes.Requireable<PropTypes.ReactElementLike>;
     };
 };
-declare const _default: React.MemoExoticComponent<{
-    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
+declare const _default: import("react").MemoExoticComponent<{
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): import("react").JSX.Element;
     propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         selected: PropTypes.Requireable<string>;

package/components/tabs/collapsible-tabs.js

@@ -1,4 +1,4 @@
-import { j as _slicedToArray, k as _toConsumableArray } from '../_helpers/_rollupPluginBabelHelpers.js';
+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';
@@ -9,13 +9,14 @@ 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 React from 'react';
+import { memo, useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import fastdom from 'fastdom';
 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 '../link/link.js';
 import '../global/data-tests.js';
 import 'core-js/modules/es.array.concat.js';
@@ -79,6 +80,7 @@ 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';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
@@ -105,30 +107,30 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
     morePopupBeforeEnd = _ref.morePopupBeforeEnd,
     morePopupItemClassName = _ref.morePopupItemClassName,
     initialVisibleItems = _ref.initialVisibleItems;
-  var _React$useState = React.useState({
+  var _useState = useState({
       tabs: [],
       more: undefined
     }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    sizes = _React$useState2[0],
-    setSizes = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    lastVisibleIndex = _React$useState4[0],
-    setLastVisibleIndex = _React$useState4[1];
+    _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 = {
     sizes,
     lastVisibleIndex
   };
-  var _React$useState5 = React.useState({
+  var _useState5 = useState({
       visible: [],
       hidden: []
     }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    preparedElements = _React$useState6[0],
-    setPreparedElements = _React$useState6[1];
-  var measureRef = React.useRef(null);
-  var selectedIndex = React.useMemo(function () {
+    _useState6 = _slicedToArray(_useState5, 2),
+    preparedElements = _useState6[0],
+    setPreparedElements = _useState6[1];
+  var measureRef = useRef(null);
+  var selectedIndex = useMemo(function () {
     var _children$filter$find;
     return (_children$filter$find = children.filter(function (tab) {
       return tab.props.alwaysHidden !== true;
@@ -136,7 +138,7 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
       return tab.props.id === selected;
     })) !== null && _children$filter$find !== void 0 ? _children$filter$find : null;
   }, [children, selected]);
-  var visibleElements = React.useMemo(function () {
+  var visibleElements = useMemo(function () {
     var items;
     if (preparedElements.ready) {
       items = preparedElements.visible;
@@ -151,7 +153,7 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
       onSelect
     });
   }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
-  var adjustTabs = React.useCallback(function (entry) {
+  var adjustTabs = useCallback(function (entry) {
     var containerWidth = entry.contentRect.width;
     var _elements$sizes = elements.sizes,
       tabsSizes = _elements$sizes.tabs,
@@ -199,7 +201,7 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
     }
   }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
   // Prepare list of visible and hidden elements
-  React.useEffect(function () {
+  useEffect(function () {
     var timeout = setTimeout(function () {
       var _elements$lastVisible2;
       var res = children.reduce(function (accumulator, tab) {
@@ -240,7 +242,7 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
     };
   }, [children, elements.lastVisibleIndex, preparedElements, selected, selectedIndex]);
   // Get list of all possibly visible elements to render in a measure container
-  var childrenToMeasure = React.useMemo(function () {
+  var childrenToMeasure = useMemo(function () {
     var items = children.filter(function (tab) {
       return tab.props.alwaysHidden !== true;
     });
@@ -250,7 +252,7 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
     });
   }, [children]);
   // Initial measure for tabs and more button sizes
-  React.useEffect(function () {
+  useEffect(function () {
     if (measureRef.current == null) {
       return undefined;
     }
@@ -293,7 +295,7 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
     };
   }, [children, elements.sizes.more, elements.sizes.tabs]);
   // Start observers to listen resizing and mutation
-  React.useEffect(function () {
+  useEffect(function () {
     if (measureRef.current === null) {
       return undefined;
     }
@@ -314,29 +316,32 @@ var CollapsibleTabs = function CollapsibleTabs(_ref) {
   }, [adjustTabs]);
   var isAdjusted = elements.lastVisibleIndex !== null && preparedElements.ready === true || initialVisibleItems;
   var className = classNames(modules_02138f4a.titles, modules_02138f4a.autoCollapse, isAdjusted && modules_02138f4a.adjusted);
-  return /*#__PURE__*/React.createElement("div", {
-    className: modules_02138f4a.autoCollapseContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(className, modules_02138f4a.rendered)
-  }, visibleElements, /*#__PURE__*/React.createElement(MoreButton, {
-    moreClassName: moreClassName,
-    moreActiveClassName: moreActiveClassName,
-    morePopupClassName: morePopupClassName,
-    morePopupBeforeEnd: morePopupBeforeEnd,
-    morePopupItemClassName: morePopupItemClassName,
-    items: preparedElements.hidden,
-    selected: selected,
-    onSelect: onSelect
-  })), /*#__PURE__*/React.createElement("div", {
-    ref: measureRef,
-    className: classNames(className, modules_02138f4a.measure)
-  }, childrenToMeasure, /*#__PURE__*/React.createElement(FakeMoreButton, {
-    hasActiveChildren: preparedElements.hidden.some(function (item) {
-      return item.props.alwaysHidden && item.props.id === selected;
-    }),
-    moreClassName: moreClassName,
-    moreActiveClassName: moreActiveClassName
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: modules_02138f4a.autoCollapseContainer,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames(className, modules_02138f4a.rendered),
+      children: [visibleElements, /*#__PURE__*/jsx(MoreButton, {
+        moreClassName: moreClassName,
+        moreActiveClassName: moreActiveClassName,
+        morePopupClassName: morePopupClassName,
+        morePopupBeforeEnd: morePopupBeforeEnd,
+        morePopupItemClassName: morePopupItemClassName,
+        items: preparedElements.hidden,
+        selected: selected,
+        onSelect: onSelect
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      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;
+        }),
+        moreClassName: moreClassName,
+        moreActiveClassName: moreActiveClassName
+      })]
+    })]
+  });
 };
 CollapsibleTabs.propTypes = {
   children: PropTypes.node.isRequired,
@@ -349,6 +354,6 @@ CollapsibleTabs.propTypes = {
   initialVisibleItems: PropTypes.number,
   morePopupBeforeEnd: PropTypes.element
 };
-var CollapsibleTabs$1 = /*#__PURE__*/React.memo(CollapsibleTabs);
+var CollapsibleTabs$1 = /*#__PURE__*/memo(CollapsibleTabs);
 
 export { CollapsibleTabs, CollapsibleTabs$1 as default };

package/components/tabs/custom-item.d.ts

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { ReactElement } from 'react';
 import { TabProps } from './tab';
 export declare const CustomItem: {
-    ({ children }: TabProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    ({ children }: TabProps): ReactElement;
     propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
     };

package/components/tabs/dumb-tabs.d.ts

@@ -1,4 +1,5 @@
-import React, { PureComponent, ReactElement } from 'react';
+import { PureComponent, ReactElement } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { CollapsibleTabsProps } from './collapsible-tabs';
 import { CustomItem } from './custom-item';

package/components/tabs/dumb-tabs.js

@@ -1,11 +1,12 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+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 React, { PureComponent } from 'react';
+import * as React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import memoize from '../global/memoize.js';
@@ -13,6 +14,7 @@ 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';
@@ -81,6 +83,7 @@ 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';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
@@ -127,15 +130,14 @@ var Tabs = /*#__PURE__*/function (_PureComponent) {
       var titleClasses = classNames(modules_02138f4a.title, className, isSelected && activeClassName, {
         [modules_02138f4a.selected]: isSelected
       });
-      return /*#__PURE__*/React.createElement(TabLink, _extends({
+      return /*#__PURE__*/jsx(TabLink, _objectSpread2({
         title: title,
         isSelected: isSelected,
-        key: key,
         href: href,
         className: titleClasses,
         disabled: disabled,
         onPlainLeftClick: _this.handleSelect(key)
-      }, titleProps));
+      }, titleProps), key);
     });
     return _this;
   }
@@ -153,20 +155,24 @@ var Tabs = /*#__PURE__*/function (_PureComponent) {
         restProps = _objectWithoutProperties(_this$props, _excluded);
       var classes = classNames(modules_02138f4a.tabs, className);
       var childrenArray = React.Children.toArray(children).filter(Boolean);
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/jsxs("div", {
         className: classes,
-        "data-test": joinDataTestAttributes('ring-dumb-tabs', dataTest)
-      }, autoCollapse === true ? /*#__PURE__*/React.createElement(CollapsibleTabs, _extends({}, restProps, {
-        onSelect: this.handleSelect,
-        selected: selected
-      }), childrenArray) : /*#__PURE__*/React.createElement("div", {
-        className: modules_02138f4a.titles
-      }, childrenArray.map(this.getTabTitle)), /*#__PURE__*/React.createElement("div", {
-        className: classNames(tabContainerClassName)
-      }, childrenArray.find(function (_ref, i) {
-        var props = _ref.props;
-        return (props.id || String(i)) === selected;
-      })));
+        "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);

package/components/tabs/smart-tabs.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { TabsAttrs, Children } from './dumb-tabs';
 export interface SmartTabsProps extends TabsAttrs {
@@ -16,5 +16,5 @@ export default class SmartTabs extends PureComponent<SmartTabsProps> {
         selected: string;
     };
     handleSelect: (selected: string) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/tabs/smart-tabs.js

@@ -1,8 +1,9 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
+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 { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import joinDataTestAttributes from '../global/data-tests.js';
 import Tabs from './dumb-tabs.js';
+import { jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
@@ -81,6 +82,7 @@ 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';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
@@ -122,11 +124,13 @@ var SmartTabs = /*#__PURE__*/function (_PureComponent) {
         _this$props.initSelected;
         var dataTest = _this$props['data-test'],
         restProps = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(Tabs, _extends({
+      return /*#__PURE__*/jsx(Tabs, _objectSpread2(_objectSpread2({
         "data-test": joinDataTestAttributes('ring-smart-tabs', dataTest),
         selected: this.state.selected,
         onSelect: this.handleSelect
-      }, restProps), children);
+      }, restProps), {}, {
+        children: children
+      }));
     }
   }]);
 }(PureComponent);

package/components/tabs/tab-link.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { LinkProps } from '../link/link';
 export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
@@ -6,7 +6,7 @@ export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
     collapsed?: boolean;
     title: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
 }
-declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): React.JSX.Element;
+declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): import("react").JSX.Element;
 declare namespace TabLink {
     var propTypes: {
         isSelected: PropTypes.Requireable<boolean>;
@@ -14,5 +14,5 @@ declare namespace TabLink {
         title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
     };
 }
-declare const _default: React.MemoExoticComponent<typeof TabLink>;
+declare const _default: import("react").MemoExoticComponent<typeof TabLink>;
 export default _default;

package/components/tabs/tab-link.js

@@ -3,6 +3,7 @@ import 'react';
 import 'prop-types';
 import '../link/link.js';
 export { T as default } from '../_helpers/tab-link.js';
+import 'react/jsx-runtime';
 import 'classnames';
 import '../global/data-tests.js';
 import 'core-js/modules/es.array.concat.js';

package/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { TabLinkProps } from './tab-link';
 export interface TabProps {
@@ -23,5 +23,5 @@ export default class Tab extends PureComponent<TabProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/tabs/tab.js

@@ -1,8 +1,9 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
+import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
+import { jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
@@ -21,10 +22,11 @@ var Tab = /*#__PURE__*/function (_PureComponent) {
         className = _this$props.className,
         children = _this$props.children,
         dataTest = _this$props['data-test'];
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/jsx("div", {
         "data-test": joinDataTestAttributes('ring-tab', dataTest),
-        className: classNames(className)
-      }, children);
+        className: classNames(className),
+        children: children
+      });
     }
   }]);
 }(PureComponent);