@plesk/ui-library 3.40.12 → 3.41.0

package/esm/components/Toaster/Toaster.js

@@ -1,202 +1,110 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _Toaster;
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { render } from 'react-dom';
-import { Component, createRef } from 'react';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { createRoot } from 'react-dom/client';
+import { forwardRef, useImperativeHandle, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_TOASTER } from '../../constants';
-import Toast from '../Toast';
 import Layer from '../Layer';
+import ToastView from './ToastView';
+import PanelView from './PanelView';
 import { jsx as _jsx } from "react/jsx-runtime";
 let toastId = 0;
-/**
- * `Toaster` is used for notifying about events happened in the system. For example, about results of performed operations.
- * @since 0.0.42
- */
-export default class Toaster extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      toasts: []
-    });
-  }
-  static getDerivedStateFromProps(_ref) {
-    let {
-      toasts,
-      maxToastsNumber
-    } = _ref;
-    if (toasts) {
-      return {
-        toasts: toasts.slice(0, maxToastsNumber)
-      };
+const Toaster = /*#__PURE__*/forwardRef(function Toaster(_ref, ref) {
+  let {
+    baseClassName = `${CLS_PREFIX}toaster`,
+    className,
+    toasts: externalToasts,
+    maxToastsNumber,
+    position = 'top-end',
+    view = 'toast',
+    onToastClose,
+    onToastGroupClose,
+    groupConfigs,
+    isPanelCollapsed,
+    onPanelCollapseStateChange,
+    ...props
+  } = _ref;
+  const getExternalToasts = () => (externalToasts ?? []).slice(0, maxToastsNumber);
+  const isControlled = Boolean(externalToasts);
+  const [internalToasts, setToasts] = useState(getExternalToasts);
+  const toasts = isControlled ? getExternalToasts() : internalToasts;
+  const remove = key => {
+    setToasts(toasts => toasts.filter(toast => toast.key !== key));
+  };
+  useImperativeHandle(ref, () => ({
+    add(props) {
+      const key = `toast-${toastId++}`;
+      setToasts(toasts => [{
+        key,
+        ...props
+      }, ...toasts].slice(0, maxToastsNumber));
+      return key;
+    },
+    update(key, props) {
+      setToasts(toasts => toasts.map(toast => toast.key === key ? {
+        ...props,
+        key
+      } : toast));
+      return key;
+    },
+    remove,
+    clear() {
+      setToasts([]);
     }
-    return null;
-  }
-  isControlled() {
-    return Boolean(this.props.toasts);
-  }
-
-  /**
-   * Add a new toast
-   *
-   * `intent` - Visual intent color to apply to component. (Type: `oneOf` 'info', 'success', 'warning', 'danger'. *Required*.)<br>
-   * `accent` - Contrast (light) version of the component. (Type: `boolean`. Default: 'undefined'.)<br>
-   * `icon` - Name of icon or [Icon](#!/Icon) component. (Type: `oneOfType` 'string', 'object', 'element'. Default: `undefined`.)<br>
-   * `message` - Message to display in the body of the toast. (Type: `any`. Default: `undefined`.)<br>
-   * `onClose` - onClose handler. (Type: `func`. Default: `undefined`.)<br>
-   * `closable` - Show close control (cross mark). (Type: `boolean`. Default: `true`.)<br>
-   * `autoClosable` - Whether call `onClose` after 6 seconds or not.
-   * Enabled by default when the position is "top-end" and a toast has "success" intent. (Type: `boolean`. Default: 'undefined'.)<br>
-   * ---
-   * @param {Object} props **Toast props**:
-   * @returns {string} New toast key
-   * @public
-   */
-  add(props) {
-    const key = `toast-${toastId++}`;
-    this.setState(_ref2 => {
-      let {
-        toasts
-      } = _ref2;
-      return {
-        toasts: [{
-          key,
-          ...props
-        }, ...toasts].slice(0, this.props.maxToastsNumber)
-      };
-    });
-    return key;
-  }
-
-  /**
-   * Update toast by key
-   *
-   * @param {string} key
-   * @param {Object} props New props
-   * @returns {string} Updated toast key
-   * @public
-   */
-  update(key, props) {
-    this.setState(_ref3 => {
-      let {
-        toasts
-      } = _ref3;
-      return {
-        toasts: toasts.map(toast => toast.key === key ? {
-          ...props,
-          key
-        } : toast)
-      };
-    });
-    return key;
-  }
-
-  /**
-   * Remove toast by key
-   *
-   * @param {string} key
-   * @public
-   */
-  remove(key) {
-    this.setState(_ref4 => {
-      let {
-        toasts
-      } = _ref4;
-      return {
-        toasts: toasts.filter(toast => toast.key !== key)
-      };
-    });
-  }
-
-  /**
-   * Clear all toasts
-   *
-   * @public
-   */
-  clear() {
-    this.setState({
-      toasts: []
-    });
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      toasts,
-      maxToastsNumber,
-      position,
-      onToastClose,
-      ...props
-    } = this.props;
-    let stack = this.state.toasts;
-    if (position === 'bottom-end') {
-      stack = [...stack];
-      stack.reverse();
+  }), [maxToastsNumber]);
+  const handleToastClose = toastProps => {
+    if (!isControlled) {
+      remove(toastProps.key);
     }
-    return /*#__PURE__*/_jsx(Layer, {
-      level: Z_INDEX_TOASTER,
-      children: /*#__PURE__*/_jsx("div", {
-        className: classNames(baseClassName, {
-          [`${baseClassName}--${position}`]: position
-        }, className),
-        ...props,
-        children: /*#__PURE__*/_jsx(TransitionGroup, {
-          component: "span",
-          children: stack.map(toastProps => {
-            const {
-              intent
-            } = toastProps;
-            let {
-              autoClosable
-            } = toastProps;
-            if (autoClosable === undefined && intent === 'success' && position === 'top-end') {
-              autoClosable = true;
-            }
-            const toastRef = /*#__PURE__*/createRef();
-            return /*#__PURE__*/_jsx(CSSTransition, {
-              classNames: `${Toast.defaultProps.baseClassName}-`,
-              timeout: {
-                enter: 300,
-                exit: 300
-              },
-              nodeRef: toastRef,
-              children: /*#__PURE__*/_jsx(Toast, {
-                ...toastProps,
-                autoClosable: autoClosable,
-                onClose: () => {
-                  if (!this.isControlled()) {
-                    this.remove(toastProps.key);
-                  }
-                  if (toastProps.onClose) {
-                    toastProps.onClose();
-                  }
-                  if (onToastClose) {
-                    onToastClose(toastProps.key);
-                  }
-                },
-                innerRef: toastRef
-              })
-            }, toastProps.key);
-          })
-        })
+    toastProps.onClose?.();
+    onToastClose?.(toastProps.key);
+  };
+  const handleToastGroupClose = keys => {
+    if (!isControlled) {
+      setToasts(toasts => toasts.filter(toast => !keys.includes(toast.key)));
+    }
+    onToastGroupClose?.(keys);
+  };
+  return /*#__PURE__*/_jsx(Layer, {
+    level: Z_INDEX_TOASTER,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames(baseClassName, className, `${baseClassName}--${view}-view`, {
+        [`${baseClassName}--${position}`]: view === 'toast'
+      }),
+      ...props,
+      children: view === 'toast' ? /*#__PURE__*/_jsx(ToastView, {
+        toasts: toasts,
+        position: position,
+        onToastClose: handleToastClose,
+        baseClassName: `${baseClassName}-toast-view`
+      }) : /*#__PURE__*/_jsx(PanelView, {
+        toasts: toasts,
+        onToastClose: handleToastClose,
+        onToastGroupClose: handleToastGroupClose,
+        baseClassName: `${baseClassName}-panel-view`,
+        groupConfigs: groupConfigs,
+        isCollapsed: isPanelCollapsed,
+        onCollapseStateChange: onPanelCollapseStateChange
       })
-    });
-  }
-}
-_Toaster = Toaster;
-// eslint-disable-next-line react/sort-comp
-_defineProperty(Toaster, "defaultProps", {
-  position: 'top-end',
-  baseClassName: `${CLS_PREFIX}toaster`
+    })
+  });
 });
-_defineProperty(Toaster, "create", function () {
+Toaster.create = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
   const containerElement = document.createElement('div');
   container.appendChild(containerElement);
-  return render(/*#__PURE__*/_jsx(_Toaster, {
+  const toasterApi = {};
+  const root = createRoot(containerElement);
+  root.render(/*#__PURE__*/_jsx(Toaster, {
+    ref: ref => Object.assign(toasterApi, ref),
     ...props
-  }), containerElement);
-});
+  }));
+  return toasterApi;
+};
+
+/**
+ * `Toaster` is used for notifying about events happened in the system. For example, about results of performed operations.
+ * @since 0.0.42
+ */
+export default Toaster;

package/esm/components/Toaster/getGroups.js

@@ -0,0 +1,33 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const getInitialGroupInfo = () => ({
+  count: 0,
+  keys: []
+});
+export const getGroups = _ref => {
+  let {
+    toasts,
+    groupConfigs = []
+  } = _ref;
+  const groupInfoMap = new Map();
+  toasts.forEach(toast => {
+    const groupKey = toast.groupKey ?? toast.intent;
+    if (!groupKey) return;
+    if (!groupInfoMap.has(groupKey)) {
+      groupInfoMap.set(groupKey, getInitialGroupInfo());
+    }
+    const group = groupInfoMap.get(groupKey);
+    if (group) {
+      group.count += 1;
+      group.keys.push(toast.key);
+    }
+  });
+  const groups = groupConfigs.map(config => {
+    const groupInfo = groupInfoMap.get(config.groupKey) ?? getInitialGroupInfo();
+    return {
+      ...config,
+      ...groupInfo
+    };
+  });
+  return groups;
+};

package/esm/components/index.js

@@ -91,4 +91,5 @@ export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';
 export { default as Link } from './Link';
 export { default as Skeleton, SkeletonTabs, SkeletonText } from './Skeleton';
+export { default as Spinner } from './Spinner';
 export { PortalContext } from './Layer';

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.40.12",
+  "version": "3.41.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -46,13 +46,13 @@
     "@babel/runtime": "^7.25.6",
     "@plesk/react-movable": "^2.7.1",
     "classnames": "^2.5.1",
-    "codemirror": "5.58.2",
-    "marked": "4.2.12",
+    "codemirror": "5.65.18",
+    "marked": "15.0.4",
     "memoize-one": "^6.0.0",
     "popper.js": "1.16.1",
     "prop-types": "^15.8.1",
     "react-measure": "2.5.2",
-    "react-sortable-hoc": "0.6.8",
+    "react-sortable-hoc": "2.0.0",
     "react-transition-group": "^4.4.5",
     "scroll-into-view-if-needed": "^3.1.0",
     "svg4everybody": "2.1.9",
@@ -69,27 +69,27 @@
     "@babel/types": "^7.25.6",
     "@csstools/postcss-logical-float-and-clear": "^3.0.0",
     "@plesk/eslint-config": "^3.0.0",
-    "@plesk/stylelint-config": "^2.0.0",
-    "@testing-library/dom": "^9.3.4",
+    "@plesk/stylelint-config": "^3.0.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/buble": "^0.20.5",
-    "@types/classnames": "2.3.1",
+    "@types/classnames": "2.3.4",
     "@types/codemirror": "^5.60.15",
     "@types/doctrine": "^0.0.9",
     "@types/jest": "^29.5.13",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/marked": "^4.3.2",
+    "@types/marked": "^6.0.0",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
-    "@types/react-measure": "2.0.9",
+    "@types/react-measure": "2.0.12",
     "@types/react-transition-group": "^4.4.11",
     "@types/svg4everybody": "2.1.5",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-transform-require-ignore": "^0.1.1",
@@ -97,8 +97,8 @@
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-markdown": "^5.1.0",
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-dev-server": "^10.1.1",
@@ -112,7 +112,7 @@
     "postcss-loader": "^8.1.1",
     "postcss-logical": "^8.0.0",
     "prettier": "^3.4.1",
-    "puppeteer-core": "22.8.2",
+    "puppeteer-core": "22.15.0",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
@@ -120,14 +120,14 @@
     "rimraf": "^6.0.1",
     "rtlcss": "^4.3.0",
     "style-loader": "^4.0.0",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.11.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
-    "stylelint-no-unsupported-browser-features": "^6.1.0",
-    "stylelint-prettier": "^4.1.0",
+    "stylelint-no-unsupported-browser-features": "^8.0.2",
+    "stylelint-prettier": "^5.0.2",
     "stylelint-use-logical-spec": "^5.0.1",
     "svg-mixer": "^2.3.14",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "5.2.2",
+    "typescript": "5.7.2",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },