@plesk/ui-library 3.35.6 → 3.35.7

package/cjs/components/Tabs/Tabs.js

@@ -6,18 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
 var _constants = require("../../constants");
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _Icon = _interopRequireWildcard(require("../Icon"));
 var _Label = _interopRequireDefault(require("../Label"));
-var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _Menu = _interopRequireWildcard(require("../Menu"));
-var _Tab = _interopRequireDefault(require("./Tab"));
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
 var _utils = require("../utils");
+var _Tab = _interopRequireDefault(require("./Tab"));
 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; }
@@ -26,7 +25,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const ADDON_LEFT_PADDING = 5;
 const MIN_ADDON_WIDTH_DEFAULT = 150;
 const COLLAPSED_SEARCH_WIDTH = 60;
-
 /**
  * `Tabs` component is a content area with a group of individual [Tab](#!/Tab) elements, each displaying different content
  * in the same screen area. `Tabs` are used when you have too much content to display in one place at the same time, so
@@ -42,9 +40,12 @@ class Tabs extends _react.Component {
       collapsedLength: 0,
       compact: false,
       searching: false,
-      monospacedWidth: null
+      monospacedWidth: 0
     });
-    (0, _defineProperty2.default)(this, "widths", null);
+    (0, _defineProperty2.default)(this, "widths", void 0);
+    (0, _defineProperty2.default)(this, "addon", void 0);
+    (0, _defineProperty2.default)(this, "tabsnavRef", void 0);
+    (0, _defineProperty2.default)(this, "moreTabsRef", null);
     (0, _defineProperty2.default)(this, "checkAdaptive", () => {
       let {
         compact,
@@ -60,12 +61,12 @@ class Tabs extends _react.Component {
         widths,
         addon
       } = this;
-      let monospacedWidth = null;
+      let monospacedWidth = 0;
       const getMonospacedWidth = () => monospacedWidth;
       if (!widths) {
         return;
       }
-      const addonMinWidth = ADDON_LEFT_PADDING + (addonMinWidthProp || (search ? search.props.minWidth : MIN_ADDON_WIDTH_DEFAULT));
+      const addonMinWidth = ADDON_LEFT_PADDING + (addonMinWidthProp || (search?.props.minWidth ?? MIN_ADDON_WIDTH_DEFAULT));
       const searchWidth = compact && search ? COLLAPSED_SEARCH_WIDTH + ADDON_LEFT_PADDING : 0;
       const {
         more,
@@ -76,7 +77,7 @@ class Tabs extends _react.Component {
       const tabsNumber = tabs.length;
       let lastTabIndex = tabsNumber - 1 - collapsedLength;
       if (monospaced) {
-        monospacedWidth = tabs.slice(0, lastTabIndex + 1).reduce((max, tab) => tab > max ? tab : max, 0);
+        monospacedWidth = Math.max(...tabs.slice(0, lastTabIndex + 1));
         tabs = tabs.map(getMonospacedWidth);
       }
       const getListWidth = () => {
@@ -148,9 +149,7 @@ class Tabs extends _react.Component {
         collapsedLength,
         monospacedWidth
       };
-      const keys = Object.keys(newState);
-      for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
+      for (const key of Object.keys(newState)) {
         if (JSON.stringify(newState[key]) === JSON.stringify(this.state[key])) {
           delete newState[key];
         }
@@ -185,7 +184,7 @@ class Tabs extends _react.Component {
           tabs,
           more: more.offsetWidth,
           container: this.tabsnavRef.offsetWidth,
-          margin: more.offsetWidth - more.querySelector(`.${baseClassName}__link`).offsetWidth
+          margin: more.offsetWidth - (more.querySelector(`.${baseClassName}__link`)?.offsetWidth ?? 0)
         };
       }
       this.checkAdaptive();
@@ -249,9 +248,9 @@ class Tabs extends _react.Component {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
           className: `${baseClassName}__link`,
           role: "tab",
-          "aria-selected": selected || null,
+          "aria-selected": selected || undefined,
           style: {
-            width: monospacedWidth
+            width: monospacedWidth || undefined
           },
           onClick: handleClick,
           ...tabProps,
@@ -278,21 +277,16 @@ class Tabs extends _react.Component {
     return nextState;
   }
   componentDidUpdate() {
-    if (!this.widths || this.props.children.length !== this.widths.tabs.length) {
-      setTimeout(() => this.handleResize(), 0);
+    if (!this.widths || _react.Children.count(this.props.children) !== this.widths.tabs.length) {
+      setTimeout(() => this.handleResize());
     }
   }
   onClick(active) {
     this.setState({
       active
     });
-    const tab = this.props.children[active - 1];
-    const {
-      onActivate
-    } = tab.props;
-    if (onActivate) {
-      onActivate();
-    }
+    const tab = Array.isArray(this.props.children) ? this.props.children[active - 1] : this.props.children;
+    tab?.props?.onActivate?.();
   }
   renderTabLabel(tabMode, label) {
     const {
@@ -339,7 +333,7 @@ class Tabs extends _react.Component {
       children
     } = this.props;
     const childrenCount = _react.Children.count(children);
-    if (!childrenCount) {
+    if (!childrenCount || !children) {
       return null;
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
@@ -365,19 +359,19 @@ class Tabs extends _react.Component {
           className: (0, _classnames.default)(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
             className: `${baseClassName}__link`,
-            tabIndex: "-1",
+            tabIndex: -1,
             style: tabProps.style,
             children: [iconBlock, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: `${baseClassName}__tab-title`,
               children: title
             }), this.renderTabLabel('tab', label)]
           }), closeBlock]
-        }, title);
+        }, `${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",
+          tabIndex: -1,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: "three-dots-horizontal"
           })
@@ -398,7 +392,10 @@ class Tabs extends _react.Component {
     _react.Children.forEach(children, (child, index) => {
       const hidden = index > lastTabIndex;
       const tabMode = hidden ? 'menu-item' : 'tab';
-      (hidden ? hiddenItems : visibleItems).push(this.renderTabItem(child, index, tabMode));
+      const renderedTab = this.renderTabItem(child, index, tabMode);
+      if (renderedTab) {
+        (hidden ? hiddenItems : visibleItems).push(renderedTab);
+      }
     });
     return {
       visibleItems,
@@ -428,7 +425,7 @@ class Tabs extends _react.Component {
         ref: ref => this.moreTabsRef = ref,
         className: (0, _classnames.default)(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
         role: "presentation",
-        "aria-selected": moreSelected || null,
+        "aria-selected": moreSelected || undefined,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
           className: `${baseClassName}__dropdown`,
           menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
@@ -438,8 +435,8 @@ class Tabs extends _react.Component {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
             className: `${baseClassName}__link`,
             role: "tab",
-            tabIndex: "0",
-            "aria-selected": moreSelected || null,
+            tabIndex: 0,
+            "aria-selected": moreSelected || undefined,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
               name: "three-dots-horizontal"
             })
@@ -453,6 +450,9 @@ class Tabs extends _react.Component {
       baseClassName,
       search
     } = this.props;
+    if (!search) {
+      return null;
+    }
     const {
       compact
     } = this.state;
@@ -486,7 +486,8 @@ class Tabs extends _react.Component {
     if (!childrenCount) {
       return null;
     }
-    let addonBlock = addon || placeholder;
+    const addonElement = addon || placeholder;
+    let addonBlock = addonElement;
     const addonProps = {};
     let searchBlock = null;
     if (search) {
@@ -497,19 +498,21 @@ class Tabs extends _react.Component {
       };
       if (compact) {
         if (searching) {
-          searchProps.maxWidth = null;
-          searchProps.minWidth = null;
+          searchProps.maxWidth = undefined;
+          searchProps.minWidth = undefined;
           searchProps.autoFocus = true;
           searchProps.responsive = false;
         } else {
           searchProps.onSearch = this.handleStartSearching;
         }
         searchBlock = this.renderSearchBar(searchProps);
-      } else if (addonBlock) {
+      } else if (addonElement) {
         searchProps.key = 1;
-        addonBlock = [this.renderSearchBar(searchProps), /*#__PURE__*/(0, _react.cloneElement)(addonBlock, {
-          key: 2
-        })];
+        addonBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [this.renderSearchBar(searchProps), /*#__PURE__*/(0, _react.cloneElement)(addonElement, {
+            key: 2
+          })]
+        });
       } else {
         addonProps.style = {
           maxWidth: search.props.maxWidth
@@ -538,9 +541,10 @@ class Tabs extends _react.Component {
                   let {
                     measureRef: ref
                   } = _ref2;
-                  return /*#__PURE__*/(0, _react.cloneElement)(this.renderFakeTabs(), {
+                  const fakeTabs = this.renderFakeTabs();
+                  return fakeTabs ? /*#__PURE__*/(0, _react.cloneElement)(fakeTabs, {
                     ref
-                  });
+                  }) : null;
                 }
               }), searchBlock, addonBlock && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
                 onResize: this.handleAddonResize,
@@ -568,62 +572,7 @@ class Tabs extends _react.Component {
     });
   }
 }
-Tabs.propTypes = {
-  /**
-   * Number of active tab
-   * @since 0.0.35
-   */
-  active: _propTypes.default.number,
-  /**
-   * Addon for search bar, dropdown etc.
-   * @since 0.0.58
-   */
-  addon: _propTypes.default.element,
-  /**
-   * Placeholder for search bar, dropdown etc.
-   *
-   * @deprecated Do not use! Use `addon` instead!
-   * @since 0.0.42
-   */
-  placeholder: _propTypes.default.element,
-  /**
-   * Minimum add-on width in pixels
-   * @since 0.0.58
-   */
-  addonMinWidth: _propTypes.default.number,
-  /**
-   * Monospaced version of tabs (all visible tabs as wide as widest of them)
-   * @since 0.0.58
-   */
-  monospaced: _propTypes.default.bool,
-  /**
-   * [SearchBar](#!/SearchBar) element
-   * @since 0.0.58
-   */
-  search: _propTypes.default.element,
-  /**
-   * [Tabs](#!/Tab)
-   * @since 0.0.47
-   */
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element]),
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.string
-};
-Tabs.defaultProps = {
-  active: null,
-  addon: null,
-  placeholder: null,
-  addonMinWidth: null,
-  monospaced: null,
-  search: null,
-  children: null,
-  className: null,
+(0, _defineProperty2.default)(Tabs, "defaultProps", {
   baseClassName: `${_constants.CLS_PREFIX}tabs`
-};
+});
 var _default = exports.default = Tabs;

package/cjs/components/Toolbar/ToolbarItem.js

@@ -22,6 +22,7 @@ class ToolbarItem extends _react.Component {
     (0, _defineProperty2.default)(this, "state", {
       compact: false
     });
+    (0, _defineProperty2.default)(this, "context", void 0);
   }
   componentDidMount() {
     const registry = this.context;

package/cjs/components/index.js

@@ -90,6 +90,8 @@ var _exportNames = {
   SwitchesPanel: true,
   SwitchesPanelItem: true,
   Tabs: true,
+  Tab: true,
+  SearchBar: true,
   Text: true,
   Toaster: true,
   Toolbar: true,
@@ -542,6 +544,12 @@ Object.defineProperty(exports, "SEGMENTED_CONTROL_BASE_CLASS_NAME", {
     return _SegmentedControl.SEGMENTED_CONTROL_BASE_CLASS_NAME;
   }
 });
+Object.defineProperty(exports, "SearchBar", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.SearchBar;
+  }
+});
 Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function () {
@@ -632,6 +640,12 @@ Object.defineProperty(exports, "SwitchesPanelItem", {
     return _SwitchesPanelItem.default;
   }
 });
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.Tab;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {
@@ -867,17 +881,6 @@ var _Switch = _interopRequireDefault(require("./Switch"));
 var _SwitchesPanel = _interopRequireDefault(require("./SwitchesPanel"));
 var _SwitchesPanelItem = _interopRequireDefault(require("./SwitchesPanelItem"));
 var _Tabs = _interopRequireWildcard(require("./Tabs"));
-Object.keys(_Tabs).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Tabs[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Tabs[key];
-    }
-  });
-});
 var _Text = _interopRequireDefault(require("./Text"));
 var _Toaster = _interopRequireDefault(require("./Toaster"));
 var _Toolbar = _interopRequireWildcard(require("./Toolbar"));

package/cjs/index.js

@@ -46,5 +46,5 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-const version = exports.version = "3.35.6";
+const version = exports.version = "3.35.7";
 (0, _svg4everybody.default)();