@plesk/ui-library 3.35.4 → 3.35.6

package/esm/components/List/List.js

@@ -866,7 +866,7 @@ class List extends Component {
             allRowsSelected,
             translators: locale
           })
-        }), ` `, /*#__PURE__*/_jsxs("span", {
+        }), /*#__PURE__*/_jsxs("span", {
           className: `${baseClassName}__header-buttons`,
           children: [this.renderSelectAllButton(), this.renderDeselectAllButton()]
         })]

package/esm/components/Pagination/Pagination.js

@@ -2,13 +2,13 @@
 
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import ContentLoader from '../ContentLoader';
 import InputNumber from '../InputNumber';
-import Translate from '../Translate';
 import Link from '../Link';
-import Text from '../Text';
 import Popover from '../Popover';
 import SegmentedControl from '../SegmentedControl';
-import ContentLoader from '../ContentLoader';
+import Text from '../Text';
+import Translate from '../Translate';
 import { safeInvoke } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/esm/components/Progress/Progress.js

@@ -5,7 +5,7 @@ import { Component, Children, isValidElement } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke } from '../utils';
-import { STATUS_NOT_STARTED, STATUS_RUNNING, STATUS_DONE, STATUS_ERROR } from '../ProgressStep';
+import { STATUS_NOT_STARTED, STATUS_RUNNING, STATUS_DONE, STATUS_ERROR, STATUS_WARNING } from '../ProgressStep';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Progress` is used for showing progress of performing long operations.
@@ -24,12 +24,14 @@ class Progress extends Component {
     } = _ref;
     let isNotStarted = true;
     let isFinished = true;
+    let isFinishedWithWarnings = true;
     let isFailed = false;
     if (children) {
       Children.forEach(children, child => {
         if ( /*#__PURE__*/isValidElement(child) && child.props.status) {
           isNotStarted = isNotStarted && child.props.status === STATUS_NOT_STARTED;
           isFinished = isFinished && child.props.status === STATUS_DONE;
+          isFinishedWithWarnings = isFinishedWithWarnings && [STATUS_DONE, STATUS_WARNING].includes(child.props.status);
           isFailed = isFailed || child.props.status === STATUS_ERROR;
         }
       });
@@ -39,6 +41,11 @@ class Progress extends Component {
         status: STATUS_DONE
       };
     }
+    if (isFinishedWithWarnings) {
+      return {
+        status: STATUS_WARNING
+      };
+    }
     if (isNotStarted) {
       return {
         status: STATUS_NOT_STARTED

package/esm/components/ProgressDialog/ProgressDialog.js

@@ -7,7 +7,7 @@ import Dialog from '../Dialog';
 import { CLS_PREFIX } from '../../constants';
 import Translate from '../Translate';
 import { safeInvoke } from '../utils';
-import { STATUS_DONE, STATUS_ERROR } from '../ProgressStep';
+import { STATUS_DONE, STATUS_ERROR, STATUS_WARNING } from '../ProgressStep';
 import Progress from '../Progress';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,12 +21,14 @@ class ProgressDialog extends Component {
     _defineProperty(this, "state", {
       isOpen: false,
       isFinished: false,
+      isFinishedWithWarnings: false,
       isFailed: false
     });
     _defineProperty(this, "closeTimeout", null);
     _defineProperty(this, "handleStatusChange", status => {
       this.setState({
         isFinished: status === STATUS_DONE,
+        isFinishedWithWarnings: status === STATUS_WARNING,
         isFailed: status === STATUS_ERROR
       });
     });
@@ -41,6 +43,7 @@ class ProgressDialog extends Component {
       const {
         isOpen,
         isFinished,
+        isFinishedWithWarnings,
         isFailed
       } = this.state;
       this.clearCloseTimeout();
@@ -49,6 +52,8 @@ class ProgressDialog extends Component {
       }
       if (isFinished) {
         safeInvoke(onFinish);
+      } else if (isFinishedWithWarnings) {
+        // TODO: Call onFinish on major update or create onFinishWithWarnings
       } else if (isFailed) {
         safeInvoke(onFail);
       } else if (cancelable) {
@@ -74,8 +79,10 @@ class ProgressDialog extends Component {
     const {
       autoCloseTimeout
     } = this.props;
-    if (prevState.isFinished === false && isFinished === true) {
+    if (prevState.isFinished !== isFinished) {
       this.clearCloseTimeout();
+    }
+    if (prevState.isFinished === false && isFinished === true) {
       if (autoCloseTimeout) {
         this.closeTimeout = setTimeout(this.handleClose, autoCloseTimeout);
       }
@@ -107,9 +114,10 @@ class ProgressDialog extends Component {
     const {
       isOpen,
       isFinished,
+      isFinishedWithWarnings,
       isFailed
     } = this.state;
-    const canClose = isFinished || isFailed;
+    const canClose = isFinished || isFinishedWithWarnings || isFailed;
     const canCancel = cancelable && !canClose;
     const cancelTitle = canClose ? /*#__PURE__*/_jsx(Translate, {
       content: "ProgressDialog.closeButton",

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -1,19 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component, createRef } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Component, createRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
-import ButtonGroup from '../ButtonGroup';
 import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
 import Dropdown from '../Dropdown';
 import Menu, { MenuItem } from '../Menu';
-import Squeezer from '../Squeezer';
 import ResponsiveContext from '../ResponsiveContext';
+import Squeezer from '../Squeezer';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const alphaSort = (a, b) => a > b ? 1 : -1;
+export const SEGMENTED_CONTROL_BASE_CLASS_NAME = `${CLS_PREFIX}segmented-control`;
 
 /**
  *  `Segmented Control` is a group of several [Buttons](#!/Button)
@@ -36,7 +36,7 @@ class SegmentedControl extends Component {
       } = this.props;
       if (monospaced) {
         let monoWidth = 0;
-        this.rootRef.current.querySelectorAll(`.${baseClassName}__button`).forEach(el => {
+        this.rootRef.current?.querySelectorAll(`.${baseClassName}__button`).forEach(el => {
           monoWidth = Math.max(monoWidth, el.getBoundingClientRect().width);
         });
         if (monoWidth !== this.state.monoWidth) {
@@ -56,24 +56,24 @@ class SegmentedControl extends Component {
       } = this.state;
       let newSelected;
       if (multiple) {
-        newSelected = selected ? selected.slice() : [];
+        newSelected = selected && Array.isArray(selected) ? selected.slice() : [];
         if (!selected || !(selected instanceof Array) || selected.indexOf(value) === -1) {
           newSelected.push(value);
         } else {
           newSelected.splice(selected.indexOf(value), 1);
         }
         newSelected.sort(alphaSort);
-      } else {
-        newSelected = value;
-      }
-      if (selected instanceof Array) {
-        selected.sort(alphaSort);
-      }
-      if (JSON.stringify(newSelected) !== JSON.stringify(selected)) {
         this.setState({
           selected: newSelected
         });
-        onChange(newSelected);
+        if (JSON.stringify(newSelected) !== JSON.stringify(selected)) {
+          onChange?.(newSelected);
+        }
+      } else {
+        newSelected = value;
+        if (JSON.stringify(newSelected) !== JSON.stringify(selected)) {
+          onChange?.(newSelected);
+        }
       }
     });
     _defineProperty(this, "compact", () => {
@@ -147,7 +147,7 @@ class SegmentedControl extends Component {
       selected
     } = this.state;
     const {
-      title
+      title = ''
     } = buttons.find(button => button.value === selected) || {};
     const menu = /*#__PURE__*/_jsx(Menu, {
       children: buttons.map(_ref2 => {
@@ -164,7 +164,7 @@ class SegmentedControl extends Component {
           ...buttonProps,
           ...menuItemProps,
           children: title
-        }, value);
+        }, `${value}`);
       })
     });
     return /*#__PURE__*/_jsx(Dropdown, {
@@ -218,7 +218,7 @@ class SegmentedControl extends Component {
           ...handler,
           ...buttonProps,
           children: title
-        }, value);
+        }, `${value}`);
       })
     });
   }
@@ -244,6 +244,7 @@ class SegmentedControl extends Component {
         compact: this.compact,
         uncompact: this.uncompact,
         innerRef: el => {
+          // @ts-ignore
           this.rootRef.current = el;
         },
         children: _ref4 => {
@@ -268,67 +269,7 @@ class SegmentedControl extends Component {
     });
   }
 }
-SegmentedControl.propTypes = {
-  /**
-   * Label
-   * @since 0.0.68
-   */
-  label: PropTypes.node,
-  /**
-   * Where to place label
-   * @since 0.0.68
-   */
-  labelPlacement: PropTypes.oneOf(['top', 'left']),
-  /**
-   * Array of buttons to display (every array item must contain an unique "value" property)
-   * @since 0.0.68
-   */
-  buttons: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.any.isRequired,
-    title: PropTypes.node
-  })).isRequired,
-  /**
-   * Monospaced version of buttons (all button would have the same width).
-   * Attention: using it with buttons dynamic update may cause to wrong behavior!
-   * @since 0.0.68
-   */
-  monospaced: PropTypes.bool,
-  /**
-   * Multiple selected options version (any number of buttons can be selected)
-   * @since 0.0.68
-   */
-  multiple: PropTypes.bool,
-  /**
-   * Selected value or an array of values (for multiple version).
-   * Used in controlled version or as default value in uncontrolled version (with onChange property)
-   * @since 0.0.68
-   */
-  selected: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]).isRequired,
-  /**
-   * On change selection callback for uncontrolled mode.
-   * @since 0.0.68
-   */
-  onChange: PropTypes.func,
-  /**
-   * Should component displays as inline element?
-   * @since 0.0.68
-   */
-  inline: PropTypes.bool,
-  /**
-   * Use buttons with transparent background (ghost buttons)
-   * @since 2.3.0
-   */
-  ghost: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-SegmentedControl.defaultProps = {
+_defineProperty(SegmentedControl, "defaultProps", {
   label: null,
   labelPlacement: 'top',
   monospaced: false,
@@ -337,7 +278,7 @@ SegmentedControl.defaultProps = {
   inline: false,
   ghost: false,
   className: null,
-  baseClassName: `${CLS_PREFIX}segmented-control`
-};
-SegmentedControl.contextType = ResponsiveContext;
+  baseClassName: SEGMENTED_CONTROL_BASE_CLASS_NAME
+});
+_defineProperty(SegmentedControl, "contextType", ResponsiveContext);
 export default SegmentedControl;

package/esm/components/SegmentedControl/index.js

@@ -1,3 +1,4 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-export { default } from './SegmentedControl';
+export { default } from './SegmentedControl';
+export { SEGMENTED_CONTROL_BASE_CLASS_NAME } from './SegmentedControl';

package/esm/components/index.js

@@ -59,7 +59,7 @@ export { default as LocaleProvider } from './LocaleProvider';
 export * from './LocaleProvider';
 export { default as Markdown } from './Markdown';
 export { default as Media, MediaSection } from './Media';
-export { default as Menu, MenuDivider, MenuHeader, MenuItem, MenuSelectableItem } from './Menu';
+export { default as Menu, MenuDivider, MenuHeader, MenuItem, MenuSelectableItem, MenuBaseItem } from './Menu';
 export { default as Overlay } from './Overlay';
 export { default as PageHeader } from './PageHeader';
 export { default as Pagination } from './Pagination';
@@ -76,6 +76,7 @@ export { default as Rating } from './Rating';
 export { default as Section } from './Section';
 export * from './Section';
 export { default as SegmentedControl } from './SegmentedControl';
+export { SEGMENTED_CONTROL_BASE_CLASS_NAME } from './SegmentedControl';
 export { default as Spot } from './Spot';
 export { default as SplitButton } from './SplitButton';
 export { default as Status } from './Status';

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.4";
+const version = "3.35.6";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.35.4",
+  "version": "3.35.6",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -27,7 +27,6 @@
     "lint:style": "stylelint \"{src,styleguidist}/**/*.less\"",
     "styleguide": "styleguidist server --config ./configs/styleguide.config.js",
     "styleguide:build": "styleguidist build --config ./configs/styleguide.config.js",
-    "create-component": "node scripts/create-component.js",
     "prepublishOnly": "yarn install && yarn test && yarn build && yarn styleguide:build",
     "storybook": "webpack serve --config ./configs/storybook.config.js --allowed-hosts all",
     "postinstall": "node ./scripts/postinstall.js"
@@ -77,7 +76,7 @@
     "@types/classnames": "2.3.1",
     "@types/doctrine": "^0.0.5",
     "@types/enzyme": "^3.10.14",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^28.1.8",
     "@types/jest-image-snapshot": "^6.2.1",
     "@types/marked": "^4.3.1",
     "@types/node": "^16.18.54",
@@ -103,9 +102,9 @@
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.3",
-    "inquirer": "^3.3.0",
-    "jest": "^27.5.1",
-    "jest-dev-server": "^9.0.0",
+    "jest": "^28.1.3",
+    "jest-dev-server": "^9.0.1",
+    "jest-environment-jsdom": "^28.1.3",
     "jest-image-snapshot": "^6.2.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",