@plesk/ui-library 3.36.0 → 3.37.0

package/esm/components/List/ListAction.js

@@ -8,7 +8,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * It accepts the props of [Button](#!/Button) and [MenuItem](#!/MenuItem) components.
  * @since 3.3.0
  */
-
 const ListAction = _ref => {
   let {
     primary,

package/esm/components/Panel/Panel.js

@@ -1,10 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component, createRef } from 'react';
+import { useRef, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-import { CSSTransition } from 'react-transition-group';
 import { isLikeText } from '../Translate';
 import Heading from '../Heading';
 import Button from '../Button';
@@ -15,103 +14,67 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * `Panel` component is used for visually grouping some content.
  * @since 0.0.35
  */
-class Panel extends Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "handleToggle", e => {
-      if (isClickable(e)) {
-        return;
-      }
-      this.setState(_ref => {
-        let {
-          collapsed
-        } = _ref;
-        return {
-          collapsed: !collapsed
-        };
-      }, () => {
-        if (this.props.onToggle) {
-          this.props.onToggle(this.state.collapsed);
-        }
-      });
-    });
-    const _collapsed2 = this.props.collapsible && this.props.collapsed || false;
-    // eslint-disable-next-line react/state-in-constructor
-    this.state = {
-      collapsed: _collapsed2,
-      prevPropsCollapsed: _collapsed2
-    };
-  }
-  static getDerivedStateFromProps(props, state) {
-    if (props.collapsed !== state.prevPropsCollapsed) {
-      return {
-        collapsed: props.collapsed,
-        prevPropsCollapsed: props.collapsed
-      };
+const Panel = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}panel`,
+    className,
+    title,
+    collapsible = false,
+    collapsed: externalCollapsed,
+    onToggle,
+    children,
+    extra,
+    ...props
+  } = _ref;
+  const rootRef = useRef(null);
+  const isControlled = externalCollapsed !== undefined;
+  const [internalCollapsed, setInternalCollapsed] = useState(false);
+  const collapsed = isControlled ? externalCollapsed : internalCollapsed;
+  const handleToggle = e => {
+    if (!collapsible || isClickable(e)) return;
+    if (!isControlled) {
+      setInternalCollapsed(!collapsed);
     }
-    return null;
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      title,
-      collapsible,
-      collapsed: _collapsed,
-      onToggle,
-      children,
-      extra,
-      ...props
-    } = this.props;
-    const {
-      collapsed
-    } = this.state;
-    const handleToggle = collapsible ? this.handleToggle : undefined;
-    const rootRef = /*#__PURE__*/createRef();
-    return /*#__PURE__*/_jsx(CSSTransition, {
-      classNames: `${baseClassName}-`,
-      in: !collapsed,
-      timeout: 300,
-      nodeRef: rootRef,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: classNames(baseClassName, {
-          [`${baseClassName}--collapsible`]: collapsible,
-          [`${baseClassName}--collapsed`]: collapsed,
-          [`${baseClassName}--expanded`]: !collapsed
-        }, className),
-        ...props,
-        ref: rootRef,
-        children: [title && /*#__PURE__*/_jsxs("div", {
-          className: `${baseClassName}__header`,
-          onClick: handleToggle,
-          children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
-            component: "div",
-            level: 4,
-            className: `${baseClassName}__title`,
-            children: title
-          }) : title, (extra || collapsible) && /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}__extra`,
-            children: [extra, collapsible && /*#__PURE__*/_jsx(Button, {
-              ghost: true,
-              className: `${baseClassName}__control-button`,
-              icon: {
-                name: 'chevron-up',
-                flipVertical: collapsed
-              },
-              onClick: handleToggle
-            })]
+    onToggle?.(!collapsed);
+  };
+  return /*#__PURE__*/_jsx(CSSTransition, {
+    classNames: `${baseClassName}-`,
+    in: !collapsed,
+    timeout: 300,
+    nodeRef: rootRef,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames(baseClassName, {
+        [`${baseClassName}--collapsible`]: collapsible,
+        [`${baseClassName}--collapsed`]: collapsed,
+        [`${baseClassName}--expanded`]: !collapsed
+      }, className),
+      ...props,
+      ref: rootRef,
+      children: [title && /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__header`,
+        onClick: handleToggle,
+        children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
+          component: "div",
+          level: 4,
+          className: `${baseClassName}__title`,
+          children: title
+        }) : title, (extra || collapsible) && /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__extra`,
+          children: [extra, collapsible && /*#__PURE__*/_jsx(Button, {
+            ghost: true,
+            className: `${baseClassName}__control-button`,
+            icon: {
+              name: 'chevron-up',
+              flipVertical: collapsed
+            },
+            onClick: handleToggle
           })]
-        }), /*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}__content`,
-          children: children
         })]
-      })
-    });
-  }
-}
-_defineProperty(Panel, "defaultProps", {
-  collapsible: false,
-  collapsed: false,
-  baseClassName: `${CLS_PREFIX}panel`
-});
+      }), /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__content`,
+        children: children
+      })]
+    })
+  });
+};
 export default Panel;

package/esm/components/Select/SelectControl.js

@@ -182,6 +182,10 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
         onKeyDown: handleKeyDown,
         onFocus: handleFocus,
         onBlur: handleBlur,
+        onClick: e => {
+          // ignore click which was received by clicking on a label with "for" attribute
+          if (e.detail === 0) e.stopPropagation();
+        },
         readOnly: !searchable,
         disabled: disabled,
         ref: inputRef,

package/esm/components/Select/SelectOption.js

@@ -4,7 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `SelectOption` is a part of [SelectOptionGroup](#!/SelectOptionGroup) component.
  * @since 2.3.0
- */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SelectOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition

package/esm/components/Toaster/Toaster.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _class;
+var _Toaster;
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { render } from 'react-dom';
@@ -185,7 +185,7 @@ export default class Toaster extends Component {
     });
   }
 }
-_class = Toaster;
+_Toaster = Toaster;
 // eslint-disable-next-line react/sort-comp
 _defineProperty(Toaster, "defaultProps", {
   position: 'top-end',
@@ -196,7 +196,7 @@ _defineProperty(Toaster, "create", function () {
   let container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
   const containerElement = document.createElement('div');
   container.appendChild(containerElement);
-  return render( /*#__PURE__*/_jsx(_class, {
+  return render( /*#__PURE__*/_jsx(_Toaster, {
     ...props
   }), containerElement);
 });

package/esm/components/Toolbar/ToolbarMenu.js

@@ -37,7 +37,6 @@ const toMenuItem = (child, isLast, onItemClick) => {
         });
         /* eslint-enable react/prop-types */
       }
-
     case ToolbarGroup:
       {
         const {

package/esm/components/index.js

@@ -16,8 +16,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
 export { default as CodeEditor } from './CodeEditor';
 export { default as Columns, Column } from './Columns';
-export { default as ComboBox } from './ComboBox';
-export * from './ComboBox';
+export { default as ComboBox, ComboBoxOption } from './ComboBox';
 export { default as ConsoleOutput } from './ConsoleOutput';
 export { default as ContentLoader } from './ContentLoader';
 export { default as Cuttable } from './Cuttable';
@@ -53,8 +52,7 @@ export { default as ItemLink } from './ItemLink';
 export { default as ItemList } from './ItemList';
 export { default as Label } from './Label';
 export { default as Layout } from './Layout';
-export { default as List } from './List';
-export * from './List';
+export { default as List, ListActions, ListAction, ListOperation, ListEmptyView, ListActionsDivider } from './List';
 export { default as LocaleProvider } from './LocaleProvider';
 export * from './LocaleProvider';
 export { default as Markdown } from './Markdown';

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.36.0",
+  "version": "3.37.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -43,9 +43,9 @@
     "/index.js"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.23.2",
+    "@babel/runtime": "^7.23.9",
     "@plesk/react-movable": "^2.7.1",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "codemirror": "5.58.2",
     "marked": "4.2.12",
     "memoize-one": "^5.2.1",
@@ -59,77 +59,77 @@
     "use-focus-visible": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.23.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@babel/types": "^7.23.0",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/types": "^7.23.9",
     "@csstools/postcss-logical-float-and-clear": "^1.0.1",
     "@plesk/eslint-config": "^3.0.0",
     "@plesk/stylelint-config": "^2.0.0",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/buble": "^0.20.4",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/buble": "^0.20.5",
     "@types/classnames": "2.3.1",
-    "@types/codemirror": "^5.60.12",
+    "@types/codemirror": "^5.60.15",
     "@types/doctrine": "^0.0.5",
-    "@types/jest": "^29.5.7",
-    "@types/jest-image-snapshot": "^6.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/marked": "^4.3.2",
-    "@types/node": "^16.18.60",
-    "@types/react": "^18.2.35",
-    "@types/react-dom": "^18.2.14",
+    "@types/node": "^16.18.80",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/react-measure": "2.0.9",
-    "@types/react-transition-group": "^4.4.8",
+    "@types/react-transition-group": "^4.4.10",
     "@types/svg4everybody": "2.1.2",
-    "@types/webpack-env": "^1.18.3",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "autoprefixer": "^10.4.16",
+    "@types/webpack-env": "^1.18.4",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "autoprefixer": "^10.4.17",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.8.1",
+    "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-markdown": "^3.0.1",
-    "html-webpack-plugin": "^5.5.3",
+    "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
-    "jest-dev-server": "^9.0.1",
+    "jest-dev-server": "^9.0.2",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-image-snapshot": "^6.2.0",
+    "jest-image-snapshot": "^6.4.0",
     "less": "^4.2.0",
-    "less-loader": "^11.1.3",
-    "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.31",
+    "less-loader": "^11.1.4",
+    "mini-css-extract-plugin": "^2.8.0",
+    "postcss": "^8.4.35",
     "postcss-less": "^6.0.0",
-    "postcss-loader": "^7.3.3",
+    "postcss-loader": "^7.3.4",
     "postcss-logical": "^6.2.0",
     "prettier": "^2.8.8",
-    "puppeteer-core": "20.4.0",
+    "puppeteer-core": "21.7.0",
     "react": "^18.2.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-styleguidist": "^13.1.1",
+    "react-styleguidist": "^13.1.2",
     "rimraf": "^5.0.5",
     "rtlcss": "^4.1.1",
-    "style-loader": "^3.3.3",
+    "style-loader": "^3.3.4",
     "stylelint": "^15.11.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
+    "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-no-unsupported-browser-features": "^6.1.0",
     "stylelint-prettier": "^3.0.0",
-    "stylelint-use-logical-spec": "^5.0.0",
+    "stylelint-use-logical-spec": "^5.0.1",
     "svg-mixer": "^2.3.14",
-    "terser-webpack-plugin": "^5.3.9",
+    "terser-webpack-plugin": "^5.3.10",
     "typescript": "5.2.2",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {