@plesk/ui-library 3.35.6 → 3.35.8

package/esm/components/Tabs/Tabs.js

@@ -1,24 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, isValidElement, Component, Fragment, Children } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Children, cloneElement, Component, Fragment, isValidElement } from 'react';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
+import Dropdown from '../Dropdown';
 import Icon, { ICON_SIZE_16 } from '../Icon';
 import Label from '../Label';
-import Dropdown from '../Dropdown';
 import Menu, { MenuItem } from '../Menu';
-import Tab from './Tab';
 import ResponsiveContext from '../ResponsiveContext';
 import { wrapFunction } from '../utils';
+import Tab from './Tab';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 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
@@ -34,9 +33,12 @@ class Tabs extends Component {
       collapsedLength: 0,
       compact: false,
       searching: false,
-      monospacedWidth: null
+      monospacedWidth: 0
     });
-    _defineProperty(this, "widths", null);
+    _defineProperty(this, "widths", void 0);
+    _defineProperty(this, "addon", void 0);
+    _defineProperty(this, "tabsnavRef", void 0);
+    _defineProperty(this, "moreTabsRef", null);
     _defineProperty(this, "checkAdaptive", () => {
       let {
         compact,
@@ -52,12 +54,12 @@ class Tabs extends 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,
@@ -68,7 +70,7 @@ class Tabs extends 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 = () => {
@@ -140,9 +142,7 @@ class Tabs extends 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];
         }
@@ -177,7 +177,7 @@ class Tabs extends 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();
@@ -241,9 +241,9 @@ class Tabs extends Component {
         children: /*#__PURE__*/_jsxs(Tag, {
           className: `${baseClassName}__link`,
           role: "tab",
-          "aria-selected": selected || null,
+          "aria-selected": selected || undefined,
           style: {
-            width: monospacedWidth
+            width: monospacedWidth || undefined
           },
           onClick: handleClick,
           ...tabProps,
@@ -270,21 +270,16 @@ class Tabs extends Component {
     return nextState;
   }
   componentDidUpdate() {
-    if (!this.widths || this.props.children.length !== this.widths.tabs.length) {
-      setTimeout(() => this.handleResize(), 0);
+    if (!this.widths || 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 {
@@ -331,7 +326,7 @@ class Tabs extends Component {
       children
     } = this.props;
     const childrenCount = Children.count(children);
-    if (!childrenCount) {
+    if (!childrenCount || !children) {
       return null;
     }
     return /*#__PURE__*/_jsxs("ul", {
@@ -357,19 +352,19 @@ class Tabs extends Component {
           className: classNames(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`),
           children: [/*#__PURE__*/_jsxs("a", {
             className: `${baseClassName}__link`,
-            tabIndex: "-1",
+            tabIndex: -1,
             style: tabProps.style,
             children: [iconBlock, /*#__PURE__*/_jsx("span", {
               className: `${baseClassName}__tab-title`,
               children: title
             }), this.renderTabLabel('tab', label)]
           }), closeBlock]
-        }, title);
+        }, `${title}`);
       }), /*#__PURE__*/_jsx("li", {
         className: classNames(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
         children: /*#__PURE__*/_jsx("a", {
           className: `${baseClassName}__link`,
-          tabIndex: "-1",
+          tabIndex: -1,
           children: /*#__PURE__*/_jsx(Icon, {
             name: "three-dots-horizontal"
           })
@@ -390,7 +385,10 @@ class Tabs extends Component {
     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,
@@ -420,7 +418,7 @@ class Tabs extends Component {
         ref: ref => this.moreTabsRef = ref,
         className: classNames(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
         role: "presentation",
-        "aria-selected": moreSelected || null,
+        "aria-selected": moreSelected || undefined,
         children: /*#__PURE__*/_jsx(Dropdown, {
           className: `${baseClassName}__dropdown`,
           menu: /*#__PURE__*/_jsx(Menu, {
@@ -430,8 +428,8 @@ class Tabs extends Component {
           children: /*#__PURE__*/_jsx("a", {
             className: `${baseClassName}__link`,
             role: "tab",
-            tabIndex: "0",
-            "aria-selected": moreSelected || null,
+            tabIndex: 0,
+            "aria-selected": moreSelected || undefined,
             children: /*#__PURE__*/_jsx(Icon, {
               name: "three-dots-horizontal"
             })
@@ -445,6 +443,9 @@ class Tabs extends Component {
       baseClassName,
       search
     } = this.props;
+    if (!search) {
+      return null;
+    }
     const {
       compact
     } = this.state;
@@ -478,7 +479,8 @@ class Tabs extends Component {
     if (!childrenCount) {
       return null;
     }
-    let addonBlock = addon || placeholder;
+    const addonElement = addon || placeholder;
+    let addonBlock = addonElement;
     const addonProps = {};
     let searchBlock = null;
     if (search) {
@@ -489,19 +491,21 @@ class Tabs extends 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__*/cloneElement(addonBlock, {
-          key: 2
-        })];
+        addonBlock = /*#__PURE__*/_jsxs(_Fragment, {
+          children: [this.renderSearchBar(searchProps), /*#__PURE__*/cloneElement(addonElement, {
+            key: 2
+          })]
+        });
       } else {
         addonProps.style = {
           maxWidth: search.props.maxWidth
@@ -530,9 +534,10 @@ class Tabs extends Component {
                   let {
                     measureRef: ref
                   } = _ref2;
-                  return /*#__PURE__*/cloneElement(this.renderFakeTabs(), {
+                  const fakeTabs = this.renderFakeTabs();
+                  return fakeTabs ? /*#__PURE__*/cloneElement(fakeTabs, {
                     ref
-                  });
+                  }) : null;
                 }
               }), searchBlock, addonBlock && /*#__PURE__*/_jsx(Measure, {
                 onResize: this.handleAddonResize,
@@ -560,62 +565,7 @@ class Tabs extends Component {
     });
   }
 }
-Tabs.propTypes = {
-  /**
-   * Number of active tab
-   * @since 0.0.35
-   */
-  active: PropTypes.number,
-  /**
-   * Addon for search bar, dropdown etc.
-   * @since 0.0.58
-   */
-  addon: PropTypes.element,
-  /**
-   * Placeholder for search bar, dropdown etc.
-   *
-   * @deprecated Do not use! Use `addon` instead!
-   * @since 0.0.42
-   */
-  placeholder: PropTypes.element,
-  /**
-   * Minimum add-on width in pixels
-   * @since 0.0.58
-   */
-  addonMinWidth: PropTypes.number,
-  /**
-   * Monospaced version of tabs (all visible tabs as wide as widest of them)
-   * @since 0.0.58
-   */
-  monospaced: PropTypes.bool,
-  /**
-   * [SearchBar](#!/SearchBar) element
-   * @since 0.0.58
-   */
-  search: PropTypes.element,
-  /**
-   * [Tabs](#!/Tab)
-   * @since 0.0.47
-   */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Tabs.defaultProps = {
-  active: null,
-  addon: null,
-  placeholder: null,
-  addonMinWidth: null,
-  monospaced: null,
-  search: null,
-  children: null,
-  className: null,
+_defineProperty(Tabs, "defaultProps", {
   baseClassName: `${CLS_PREFIX}tabs`
-};
+});
 export default Tabs;

package/esm/components/Toolbar/ToolbarItem.js

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

package/esm/components/index.js

@@ -85,8 +85,7 @@ export { default as Subnav, SubnavItem } from './Subnav';
 export { default as Switch } from './Switch';
 export { default as SwitchesPanel } from './SwitchesPanel';
 export { default as SwitchesPanelItem } from './SwitchesPanelItem';
-export { default as Tabs } from './Tabs';
-export * from './Tabs';
+export { default as Tabs, Tab, SearchBar } from './Tabs';
 export { default as Text } from './Text';
 export { default as Toaster } from './Toaster';
 export { default as Toolbar, ToolbarGroup, ToolbarExpander } from './Toolbar';

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.35.6";
+const version = "3.35.8";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.35.6",
+  "version": "3.35.8",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -21,10 +21,12 @@
     "build:cjs": "cross-env NODE_ENV=cjs node ./scripts/build.js",
     "build:types": "rimraf ./types && tsc --project ./configs/types-generator.config.json",
     "create-svg-sprite": "node ./scripts/create-svg-sprite.js",
-    "lint": "yarn lint:es && yarn lint:types && yarn lint:style",
+    "lint": "yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check",
     "lint:es": "eslint --ext js,md,tsx src configs scripts styleguidist",
     "lint:types": "tsc",
     "lint:style": "stylelint \"{src,styleguidist}/**/*.less\"",
+    "format:check": "prettier --check src",
+    "format": "prettier --write src",
     "styleguide": "styleguidist server --config ./configs/styleguide.config.js",
     "styleguide:build": "styleguidist build --config ./configs/styleguide.config.js",
     "prepublishOnly": "yarn install && yarn test && yarn build && yarn styleguide:build",
@@ -69,57 +71,52 @@
     "@plesk/eslint-config": "^3.0.0",
     "@plesk/stylelint-config": "^2.0.0",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/buble": "^0.20.2",
     "@types/classnames": "2.3.1",
     "@types/doctrine": "^0.0.5",
-    "@types/enzyme": "^3.10.14",
-    "@types/jest": "^28.1.8",
+    "@types/jest": "^29.5.5",
     "@types/jest-image-snapshot": "^6.2.1",
-    "@types/marked": "^4.3.1",
-    "@types/node": "^16.18.54",
-    "@types/react": "^17.0.65",
-    "@types/react-dom": "^17.0.20",
-    "@types/react-measure": "2.0.8",
-    "@types/react-transition-group": "^4.4.6",
+    "@types/marked": "^4.3.2",
+    "@types/node": "^16.18.58",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.11",
+    "@types/react-measure": "2.0.9",
+    "@types/react-transition-group": "^4.4.7",
     "@types/svg4everybody": "2.1.2",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "autoprefixer": "^10.4.16",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "clean-webpack-plugin": "^4.0.0",
-    "cross-env": "^5.2.1",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.3",
-    "jest": "^28.1.3",
+    "jest": "^29.7.0",
     "jest-dev-server": "^9.0.1",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-image-snapshot": "^6.2.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "postcss-less": "^6.0.0",
     "postcss-loader": "^7.3.3",
     "postcss-logical": "^6.2.0",
     "prettier": "^2.8.8",
     "puppeteer-core": "20.4.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^17.0.2",
-    "react-styleguidist": "^12.0.1",
-    "rimraf": "^5.0.1",
+    "react-dom": "^18.2.0",
+    "react-styleguidist": "^13.1.1",
+    "rimraf": "^5.0.5",
     "rtlcss": "^4.1.1",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.3",
@@ -129,17 +126,15 @@
     "stylelint-use-logical-spec": "^5.0.0",
     "svg-mixer": "^2.3.14",
     "terser-webpack-plugin": "^5.3.9",
-    "typescript": "4.7.4",
+    "typescript": "5.2.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "resolutions": {
-    "@babel/types": "^7.15.6",
-    "@types/react": "^17.0.39",
     "trim": ">=0.0.3",
     "postcss": "^8.4.23"
   },