@plesk/ui-library 3.31.2 → 3.32.0

package/cjs/components/Tabs/SearchBar.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("../../utils");
 var _react = _interopRequireWildcard(require("react"));
@@ -20,12 +19,11 @@ var _Menu = _interopRequireWildcard(require("../Menu"));
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
 var _DistractionFreeModeContext = _interopRequireDefault(require("../DistractionFreeModeContext"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 /**
  * `SearchBar` component is used for providing type-as-you-go search.
  * @since 0.0.58
@@ -276,17 +274,18 @@ class SearchBar extends _react.Component {
     if (!results || results.length === 0) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
       className: (0, _classnames.default)(`${baseClassName}__results`, {
         [`${baseClassName}__results--hidden`]: !focused && !overMenu
       }),
       onMouseOver: this.handleMenuMouseOver,
-      onMouseOut: this.handleMenuMouseOut
-    }, results.map(item => /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
-      key: item.value,
-      active: item.value === highlightedValue,
-      onClick: this.handleSelect(item.value)
-    }, item.title)));
+      onMouseOut: this.handleMenuMouseOut,
+      children: results.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
+        active: item.value === highlightedValue,
+        onClick: this.handleSelect(item.value),
+        children: item.title
+      }, item.value))
+    });
   }
   renderResultsMenu() {
     const {
@@ -347,51 +346,57 @@ class SearchBar extends _react.Component {
     } = this.state;
     const isCollapsed = this.isResponsive();
     const distractionFreeModeEnabled = Boolean(distractionFreeMode && distractionFreeMode.enabled);
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--focused`]: focused
       }, className),
       style: isCollapsed || distractionFreeModeEnabled ? null : {
         maxWidth,
         minWidth
-      }
-    }, props), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-      className: `${baseClassName}__group`
-    }, isCollapsed && (collapsable || !distractionFreeModeEnabled) ? /*#__PURE__*/_react.default.createElement(_Badge.default, {
-      intent: "info",
-      hidden: !value
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      icon: "search",
-      onClick: this.handleExpand
-    })) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
-      innerRef: ref => this.search = ref,
-      className: `${baseClassName}__input`,
-      size: "fill",
-      onChange: this.handleKeyDown,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onKeyDown: this.handleKeyDown
-    }, inputProps, {
-      value: value,
-      prefix: (collapsable && !isCollapsed || distractionFreeModeEnabled) && /*#__PURE__*/_react.default.createElement(_Button.default, {
-        icon: {
-          name: 'chevron-right',
-          flipHorizontal: (0, _utils.isRtl)()
-        },
-        ghost: true,
-        onClick: this.handleCollapse
-      }),
-      suffix: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, value && /*#__PURE__*/_react.default.createElement(_Button.default, {
-        icon: "remove",
-        onClick: this.handleReset,
-        ghost: true
-      }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        icon: "search",
-        onClick: this.handleSearch,
-        state: loading ? 'loading' : null,
-        ghost: true
-      }))
-    })))), results && results.type === _Menu.default ? this.renderResultsMenu() : this.renderResults());
+      },
+      ...props,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
+        className: `${baseClassName}__group`,
+        children: isCollapsed && (collapsable || !distractionFreeModeEnabled) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+          intent: "info",
+          hidden: !value,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            icon: "search",
+            onClick: this.handleExpand
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+          innerRef: ref => this.search = ref,
+          className: `${baseClassName}__input`,
+          size: "fill",
+          onChange: this.handleKeyDown,
+          onFocus: this.handleFocus,
+          onBlur: this.handleBlur,
+          onKeyDown: this.handleKeyDown,
+          ...inputProps,
+          value: value,
+          prefix: (collapsable && !isCollapsed || distractionFreeModeEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            icon: {
+              name: 'chevron-right',
+              flipHorizontal: (0, _utils.isRtl)()
+            },
+            ghost: true,
+            onClick: this.handleCollapse
+          }),
+          suffix: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              icon: "remove",
+              onClick: this.handleReset,
+              ghost: true
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              icon: "search",
+              onClick: this.handleSearch,
+              state: loading ? 'loading' : null,
+              ghost: true
+            })]
+          })
+        })
+      }), results && results.type === _Menu.default ? this.renderResultsMenu() : this.renderResults()]
+    });
   }
 }
 const propTypes = {
@@ -511,10 +516,11 @@ const SearchBarWrapper = props => {
   const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
   let responsive = (0, _react.useContext)(_ResponsiveContext.default);
   responsive = props.responsive === undefined ? responsive || false : Boolean(props.responsive);
-  return /*#__PURE__*/_react.default.createElement(SearchBar, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchBar, {
+    ...props,
     responsive: responsive,
     distractionFreeMode: distractionFreeMode
-  }));
+  });
 };
 SearchBarWrapper.displayName = 'SearchBar';
 SearchBarWrapper.propTypes = propTypes;

package/cjs/components/Tabs/Tab.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 /* eslint-disable react/no-unused-prop-types */
 
@@ -17,12 +18,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * It can also display a [Label](#!/Label) next to the tab name for showing additional information about its content.
  * You can make `Tabs` closeable, for example, if you are using them for opening and displaying files.
  * @since 0.0.35
- */
-const Tab = _ref => {
+ */const Tab = _ref => {
   let {
     children
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", null, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: children
+  });
 };
 Tab.propTypes = {
   /**

package/cjs/components/Tabs/Tabs.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,12 +18,11 @@ var _Menu = _interopRequireWildcard(require("../Menu"));
 var _Tab = _interopRequireDefault(require("./Tab"));
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 const ADDON_LEFT_PADDING = 5;
 const MIN_ADDON_WIDTH_DEFAULT = 150;
 const COLLAPSED_SEARCH_WIDTH = 60;
@@ -232,31 +230,37 @@ class Tabs extends _react.Component {
         }
       });
       if (tabMode === 'menu-item') {
-        return /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, (0, _extends2.default)({
-          key: key,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
           icon: tabIcon,
-          label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, tabLabel, tabClose),
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+            children: [tabLabel, tabClose]
+          }),
           active: selected,
           onClick: handleClick,
           className: `${baseClassName}__menu-item`,
-          component: Tag
-        }, tabProps), title);
+          component: Tag,
+          ...tabProps,
+          children: title
+        }, key);
       }
-      return /*#__PURE__*/_react.default.createElement("li", {
-        key: key,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         className: (0, _classnames.default)(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, tabClose && `${baseClassName}__tab--closable`),
-        role: "presentation"
-      }, /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
-        className: `${baseClassName}__link`,
-        role: "tab",
-        "aria-selected": selected || null,
-        style: {
-          width: monospacedWidth
-        },
-        onClick: handleClick
-      }, tabProps), tabIcon, /*#__PURE__*/_react.default.createElement("span", {
-        className: `${baseClassName}__tab-title`
-      }, title), tabLabel, tabClose));
+        role: "presentation",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
+          className: `${baseClassName}__link`,
+          role: "tab",
+          "aria-selected": selected || null,
+          style: {
+            width: monospacedWidth
+          },
+          onClick: handleClick,
+          ...tabProps,
+          children: [tabIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: `${baseClassName}__tab-title`,
+            children: title
+          }), tabLabel, tabClose]
+        })
+      }, key);
     });
   }
   static getDerivedStateFromProps(props, state) {
@@ -295,10 +299,11 @@ class Tabs extends _react.Component {
       baseClassName
     } = this.props;
     if (typeof label === 'string') {
-      return /*#__PURE__*/_react.default.createElement(_Label.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
         className: `${baseClassName}__${tabMode}-label`,
-        intent: "danger"
-      }, label);
+        intent: "danger",
+        children: label
+      });
     }
     if ( /*#__PURE__*/(0, _react.isValidElement)(label)) {
       return /*#__PURE__*/(0, _react.cloneElement)(label, {
@@ -312,18 +317,19 @@ class Tabs extends _react.Component {
       baseClassName
     } = this.props;
     if (typeof onClose === 'function') {
-      return /*#__PURE__*/_react.default.createElement("button", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         className: `${baseClassName}__${tabMode}-close`,
         type: "button",
         onClick: e => {
           e.preventDefault();
           e.stopPropagation();
           onClose(e);
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        className: `${baseClassName}__${tabMode}-close-icon`,
-        name: "cross-mark"
-      }));
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          className: `${baseClassName}__${tabMode}-close-icon`,
+          name: "cross-mark"
+        })
+      });
     }
     return null;
   }
@@ -336,43 +342,48 @@ class Tabs extends _react.Component {
     if (!childrenCount) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement("ul", {
-      className: (0, _classnames.default)(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`)
-    }, _react.Children.map(children, tab => {
-      if (!tab || tab.type !== _Tab.default) {
-        return null;
-      }
-      const {
-        title,
-        label,
-        icon,
-        onActivate,
-        onClose,
-        ...tabProps
-      } = tab.props;
-      const iconBlock = _Icon.default.create(icon, {
-        size: _Icon.ICON_SIZE_16,
-        className: `${baseClassName}__tab-icon`
-      });
-      const closeBlock = this.renderTabClose('tab', onClose);
-      return /*#__PURE__*/_react.default.createElement("li", {
-        key: title,
-        className: (0, _classnames.default)(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`)
-      }, /*#__PURE__*/_react.default.createElement("a", {
-        className: `${baseClassName}__link`,
-        tabIndex: "-1",
-        style: tabProps.style
-      }, iconBlock, /*#__PURE__*/_react.default.createElement("span", {
-        className: `${baseClassName}__tab-title`
-      }, title), this.renderTabLabel('tab', label)), closeBlock);
-    }), /*#__PURE__*/_react.default.createElement("li", {
-      className: (0, _classnames.default)(`${baseClassName}__tab`, `${baseClassName}__tab--more`)
-    }, /*#__PURE__*/_react.default.createElement("a", {
-      className: `${baseClassName}__link`,
-      tabIndex: "-1"
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: "three-dots-horizontal"
-    }))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+      className: (0, _classnames.default)(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`),
+      children: [_react.Children.map(children, tab => {
+        if (!tab || tab.type !== _Tab.default) {
+          return null;
+        }
+        const {
+          title,
+          label,
+          icon,
+          onActivate,
+          onClose,
+          ...tabProps
+        } = tab.props;
+        const iconBlock = _Icon.default.create(icon, {
+          size: _Icon.ICON_SIZE_16,
+          className: `${baseClassName}__tab-icon`
+        });
+        const closeBlock = this.renderTabClose('tab', onClose);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: (0, _classnames.default)(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+            className: `${baseClassName}__link`,
+            tabIndex: "-1",
+            style: tabProps.style,
+            children: [iconBlock, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: `${baseClassName}__tab-title`,
+              children: title
+            }), this.renderTabLabel('tab', label)]
+          }), closeBlock]
+        }, title);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        className: (0, _classnames.default)(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          className: `${baseClassName}__link`,
+          tabIndex: "-1",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "three-dots-horizontal"
+          })
+        })
+      })]
+    });
   }
   createTabItems() {
     const {
@@ -410,26 +421,32 @@ class Tabs extends _react.Component {
       hiddenItems
     } = this.createTabItems();
     const moreSelected = active > visibleItems.length;
-    return /*#__PURE__*/_react.default.createElement("ul", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
       className: `${baseClassName}__tab-list`,
-      role: "tablist"
-    }, visibleItems, hiddenItems.length > 0 && /*#__PURE__*/_react.default.createElement("li", {
-      ref: ref => this.moreTabsRef = ref,
-      className: (0, _classnames.default)(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
-      role: "presentation",
-      "aria-selected": moreSelected || null
-    }, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      className: `${baseClassName}__dropdown`,
-      menu: /*#__PURE__*/_react.default.createElement(_Menu.default, null, hiddenItems),
-      menuPlacement: "bottom-end"
-    }, /*#__PURE__*/_react.default.createElement("a", {
-      className: `${baseClassName}__link`,
-      role: "tab",
-      tabIndex: "0",
-      "aria-selected": moreSelected || null
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: "three-dots-horizontal"
-    })))));
+      role: "tablist",
+      children: [visibleItems, hiddenItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        ref: ref => this.moreTabsRef = ref,
+        className: (0, _classnames.default)(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
+        role: "presentation",
+        "aria-selected": moreSelected || null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
+          className: `${baseClassName}__dropdown`,
+          menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+            children: hiddenItems
+          }),
+          menuPlacement: "bottom-end",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            className: `${baseClassName}__link`,
+            role: "tab",
+            tabIndex: "0",
+            "aria-selected": moreSelected || null,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              name: "three-dots-horizontal"
+            })
+          })
+        })
+      })]
+    });
   }
   renderSearchBar(searchProps) {
     const {
@@ -441,9 +458,10 @@ class Tabs extends _react.Component {
     } = this.state;
     const clone = /*#__PURE__*/(0, _react.cloneElement)(search, searchProps);
     if (compact) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: `${baseClassName}__search`
-      }, clone);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__search`,
+        children: clone
+      });
     }
     return clone;
   }
@@ -499,45 +517,55 @@ class Tabs extends _react.Component {
         addonBlock = this.renderSearchBar(searchProps);
       }
     }
-    return /*#__PURE__*/_react.default.createElement(_ResponsiveContext.default.Provider, {
-      value: compact
-    }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      className: (0, _classnames.default)(baseClassName, className)
-    }, props), /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
-      onResize: this.handleResize,
-      innerRef: ref => this.tabsnavRef = ref
-    }, _ref => {
-      let {
-        measureRef
-      } = _ref;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
-        ref: measureRef
-      }, this.renderTabList(), /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
-        onResize: this.handleResize
-      }, _ref2 => {
-        let {
-          measureRef: ref
-        } = _ref2;
-        return /*#__PURE__*/(0, _react.cloneElement)(this.renderFakeTabs(), {
-          ref
-        });
-      }), searchBlock, addonBlock && /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
-        onResize: this.handleAddonResize,
-        bounds: true
-      }, _ref3 => {
-        let {
-          measureRef: ref
-        } = _ref3;
-        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-          className: `${baseClassName}__addon`,
-          ref: ref
-        }, addonProps), addonBlock);
-      }));
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__tab-panel`,
-      role: "tabpanel"
-    }, _react.Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
+      value: compact,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(baseClassName, className),
+        ...props,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
+          onResize: this.handleResize,
+          innerRef: ref => this.tabsnavRef = ref,
+          children: _ref => {
+            let {
+              measureRef
+            } = _ref;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
+              ref: measureRef,
+              children: [this.renderTabList(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
+                onResize: this.handleResize,
+                children: _ref2 => {
+                  let {
+                    measureRef: ref
+                  } = _ref2;
+                  return /*#__PURE__*/(0, _react.cloneElement)(this.renderFakeTabs(), {
+                    ref
+                  });
+                }
+              }), searchBlock, addonBlock && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
+                onResize: this.handleAddonResize,
+                bounds: true,
+                children: _ref3 => {
+                  let {
+                    measureRef: ref
+                  } = _ref3;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: `${baseClassName}__addon`,
+                    ref: ref,
+                    ...addonProps,
+                    children: addonBlock
+                  });
+                }
+              })]
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${baseClassName}__tab-panel`,
+          role: "tabpanel",
+          children: _react.Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null)
+        })]
+      })
+    });
   }
 }
 Tabs.propTypes = {

package/cjs/components/Tabs/Tabs.stories.js

@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Basic = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 var _Tab = _interopRequireDefault(require("./Tab"));
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-const Basic = args => /*#__PURE__*/_react.default.createElement(_Tabs.default, args);
+const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+  ...args
+});
 exports.Basic = Basic;
 Basic.args = {
   children: Array.from({
     length: 5
-  }, (_v, k) => k + 1).map(v => /*#__PURE__*/_react.default.createElement(_Tab.default, {
-    key: v,
-    title: `Tab ${v}`
-  }, `Tab ${v} content.`))
+  }, (_v, k) => k + 1).map(v => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+    title: `Tab ${v}`,
+    children: `Tab ${v} content.`
+  }, v))
 };

package/cjs/components/Text/Text.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
@@ -37,7 +35,7 @@ const Text = _ref => {
     Tag = mark ? 'mark' : 'span';
   }
   const onDark = (0, _react.useContext)(_OnDarkContext.default);
-  return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--${intent}`]: intent,
       [`${baseClassName}--${fontSize}`]: fontSize,
@@ -47,8 +45,10 @@ const Text = _ref => {
       [`${baseClassName}--nowrap`]: nowrap,
       [`${baseClassName}--mark`]: mark,
       [`${baseClassName}--on-dark`]: onDark
-    }, className)
-  }, props), children);
+    }, className),
+    ...props,
+    children: children
+  });
 };
 var _default = Text;
 exports.default = _default;