@plesk/ui-library 3.40.12 → 3.41.0

package/cjs/components/Toaster/Toaster.js

@@ -5,204 +5,113 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _reactDom = require("react-dom");
+var _client = require("react-dom/client");
 var _react = require("react");
-var _reactTransitionGroup = require("react-transition-group");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
-var _Toast = _interopRequireDefault(require("../Toast"));
 var _Layer = _interopRequireDefault(require("../Layer"));
+var _ToastView = _interopRequireDefault(require("./ToastView"));
+var _PanelView = _interopRequireDefault(require("./PanelView"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _Toaster; // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
 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
- */
-class Toaster extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "state", {
-      toasts: []
-    });
-  }
-  static getDerivedStateFromProps(_ref) {
-    let {
-      toasts,
-      maxToastsNumber
-    } = _ref;
-    if (toasts) {
-      return {
-        toasts: toasts.slice(0, maxToastsNumber)
-      };
+const Toaster = /*#__PURE__*/(0, _react.forwardRef)(function Toaster(_ref, ref) {
+  let {
+    baseClassName = `${_constants.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] = (0, _react.useState)(getExternalToasts);
+  const toasts = isControlled ? getExternalToasts() : internalToasts;
+  const remove = key => {
+    setToasts(toasts => toasts.filter(toast => toast.key !== key));
+  };
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_Layer.default, {
-      level: _constants.Z_INDEX_TOASTER,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)(baseClassName, {
-          [`${baseClassName}--${position}`]: position
-        }, className),
-        ...props,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.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__*/(0, _react.createRef)();
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-              classNames: `${_Toast.default.defaultProps.baseClassName}-`,
-              timeout: {
-                enter: 300,
-                exit: 300
-              },
-              nodeRef: toastRef,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
-                ...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__*/(0, _jsxRuntime.jsx)(_Layer.default, {
+    level: _constants.Z_INDEX_TOASTER,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(baseClassName, className, `${baseClassName}--${view}-view`, {
+        [`${baseClassName}--${position}`]: view === 'toast'
+      }),
+      ...props,
+      children: view === 'toast' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastView.default, {
+        toasts: toasts,
+        position: position,
+        onToastClose: handleToastClose,
+        baseClassName: `${baseClassName}-toast-view`
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PanelView.default, {
+        toasts: toasts,
+        onToastClose: handleToastClose,
+        onToastGroupClose: handleToastGroupClose,
+        baseClassName: `${baseClassName}-panel-view`,
+        groupConfigs: groupConfigs,
+        isCollapsed: isPanelCollapsed,
+        onCollapseStateChange: onPanelCollapseStateChange
       })
-    });
-  }
-}
-exports.default = Toaster;
-_Toaster = Toaster;
-// eslint-disable-next-line react/sort-comp
-(0, _defineProperty2.default)(Toaster, "defaultProps", {
-  position: 'top-end',
-  baseClassName: `${_constants.CLS_PREFIX}toaster`
+    })
+  });
 });
-(0, _defineProperty2.default)(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 (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toaster, {
+  const toasterApi = {};
+  const root = (0, _client.createRoot)(containerElement);
+  root.render(/*#__PURE__*/(0, _jsxRuntime.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
+ */
+var _default = exports.default = Toaster;

package/cjs/components/Toaster/getGroups.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGroups = void 0;
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const getInitialGroupInfo = () => ({
+  count: 0,
+  keys: []
+});
+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;
+};
+exports.getGroups = getGroups;

package/cjs/components/index.js

@@ -115,6 +115,7 @@ var _exportNames = {
   Skeleton: true,
   SkeletonTabs: true,
   SkeletonText: true,
+  Spinner: true,
   PortalContext: true
 };
 Object.defineProperty(exports, "Action", {
@@ -651,6 +652,12 @@ Object.defineProperty(exports, "SkeletonText", {
     return _Skeleton.SkeletonText;
   }
 });
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.default;
+  }
+});
 Object.defineProperty(exports, "SplitButton", {
   enumerable: true,
   get: function () {
@@ -933,6 +940,7 @@ var _Tour = _interopRequireDefault(require("./Tour"));
 var _Translate = _interopRequireDefault(require("./Translate"));
 var _Link = _interopRequireDefault(require("./Link"));
 var _Skeleton = _interopRequireWildcard(require("./Skeleton"));
+var _Spinner = _interopRequireDefault(require("./Spinner"));
 var _Layer = require("./Layer");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

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.40.12";
+const version = exports.version = "3.41.0";
 (0, _svg4everybody.default)();