@plesk/ui-library 3.40.12 → 3.41.0

package/cjs/components/ItemList/ItemList.js

@@ -125,8 +125,9 @@ class ItemList extends _react.Component {
       reorderable
     } = this.props;
     if (reorderable) {
+      Promise.resolve().then(() => _interopRequireWildcard(require(/* webpackChunkName: "react-sortable-hoc" */'react-sortable-hoc'))).then(
       // @ts-ignore
-      Promise.resolve().then(() => _interopRequireWildcard(require(/* webpackChunkName: "react-sortable-hoc" */'react-sortable-hoc'))).then(_ref2 => {
+      _ref2 => {
         let {
           sortableContainer,
           sortableElement

package/cjs/components/List/ListEmptyView.js

@@ -24,7 +24,7 @@ const createImage = (baseClassName, image, reason) => {
     node = /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: image,
       height: "192",
-      alt: ""
+      alt: "banner"
     });
   }
   return node ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/cjs/components/Spinner/Spinner.js

@@ -17,10 +17,13 @@ const Spinner = _ref => {
   let {
     baseClassName = `${_constants.CLS_PREFIX}spinner`,
     className,
+    colorAnimation = true,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-    className: (0, _classnames.default)(baseClassName, className),
+    className: (0, _classnames.default)(baseClassName, className, {
+      [`${baseClassName}--color-animation`]: colorAnimation
+    }),
     ...props,
     viewBox: "0 0 48 48",
     xmlns: "http://www.w3.org/2000/svg",

package/cjs/components/Toast/Toast.js

@@ -5,101 +5,71 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _intentIconMap = require("../intentIconMap");
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
+var _useAutoClose = require("./useAutoClose");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-const AUTOCLOSE_TIMEOUT = 6000;
-class Toast extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "timer", void 0);
+const Toast = _ref => {
+  let {
+    baseClassName = `${_constants.CLS_PREFIX}toast`,
+    className,
+    message,
+    intent,
+    accent,
+    icon = intent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: _intentIconMap.intentIconMap[intent]
+    }),
+    onClose,
+    closable = true,
+    autoClosable,
+    autoCloseTimeout,
+    innerRef,
+    groupKey,
+    ...props
+  } = _ref;
+  (0, _useAutoClose.useAutoClose)({
+    autoClosable,
+    autoCloseTimeout,
+    onClose
+  });
+  const result = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    tabIndex: 0,
+    className: (0, _classnames.default)(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className),
+    ...props,
+    ref: innerRef,
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}__icon`,
+      children: _Icon.default.create(icon, {
+        intent
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}__content`,
+      children: message
+    }), closable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}__action`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ghost: true,
+        icon: {
+          name: 'cross-mark',
+          size: '12'
+        },
+        className: `${baseClassName}__close`,
+        onClick: onClose
+      })
+    })]
+  });
+  if (accent) {
+    return result;
   }
-  componentDidMount() {
-    const {
-      autoClosable,
-      onClose
-    } = this.props;
-    let {
-      autoCloseTimeout
-    } = this.props;
-    switch (autoClosable) {
-      case true:
-        autoCloseTimeout = AUTOCLOSE_TIMEOUT;
-        break;
-      case false:
-        autoCloseTimeout = undefined;
-        break;
-    }
-    if (autoCloseTimeout && onClose) {
-      this.timer = window.setTimeout(onClose, autoCloseTimeout);
-    }
-  }
-  componentWillUnmount() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      message,
-      intent,
-      accent,
-      icon = intent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        name: _intentIconMap.intentIconMap[intent]
-      }),
-      onClose,
-      closable = true,
-      autoClosable,
-      autoCloseTimeout,
-      innerRef,
-      ...props
-    } = this.props;
-    const result = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      tabIndex: 0,
-      className: (0, _classnames.default)(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className),
-      ...props,
-      ref: innerRef,
-      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__icon`,
-        children: _Icon.default.create(icon, {
-          intent
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__content`,
-        children: message
-      }), closable ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__action`,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          ghost: true,
-          icon: {
-            name: 'cross-mark',
-            size: '12'
-          },
-          className: `${baseClassName}__close`,
-          onClick: onClose
-        })
-      }) : null]
-    });
-    if (accent) {
-      return result;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnDarkContext.default.Provider, {
-      value: true,
-      children: result
-    });
-  }
-}
-exports.default = Toast;
-(0, _defineProperty2.default)(Toast, "defaultProps", {
-  baseClassName: `${_constants.CLS_PREFIX}toast`
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnDarkContext.default.Provider, {
+    value: true,
+    children: result
+  });
+};
+var _default = exports.default = Toast;

package/cjs/components/Toast/useAutoClose.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAutoClose = void 0;
+var _react = require("react");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const AUTOCLOSE_TIMEOUT = 6000;
+const getAutoCloseTimeout = (autoClosable, autoCloseTimeout) => {
+  if (typeof autoClosable !== 'boolean') {
+    return autoCloseTimeout;
+  }
+  return autoClosable ? AUTOCLOSE_TIMEOUT : undefined;
+};
+const useAutoClose = _ref => {
+  let {
+    autoClosable,
+    autoCloseTimeout: externalAutoCloseTimeout,
+    onClose
+  } = _ref;
+  const onCloseRef = (0, _react.useRef)(onClose);
+  onCloseRef.current = onClose;
+  (0, _react.useEffect)(() => {
+    const autoCloseTimeout = getAutoCloseTimeout(autoClosable, externalAutoCloseTimeout);
+    let timeoutId;
+    if (autoCloseTimeout && onCloseRef.current) {
+      timeoutId = window.setTimeout(onCloseRef.current, autoCloseTimeout);
+    }
+    return () => window.clearTimeout(timeoutId);
+  }, [autoClosable, externalAutoCloseTimeout]);
+};
+exports.useAutoClose = useAutoClose;

package/cjs/components/Toaster/GroupLabel.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Label = _interopRequireDefault(require("../Label"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const GroupLabel = _ref => {
+  let {
+    group,
+    onClose
+  } = _ref;
+  const {
+    renderHeaderLabel,
+    renderHeaderLabelTitle,
+    closable = false,
+    renderHeaderLabelTooltip = closable ? () => 'Close group' : undefined,
+    intent
+  } = group;
+  if (!renderHeaderLabel && !renderHeaderLabelTitle) {
+    return null;
+  }
+  const handleClick = closable ? onClose : undefined;
+  const labelProps = {
+    intent,
+    onClick: handleClick,
+    icon: closable ? 'cross-mark' : undefined,
+    children: renderHeaderLabelTitle ? renderHeaderLabelTitle(group) : null,
+    caps: false,
+    size: 'md'
+  };
+  if (renderHeaderLabel) {
+    return renderHeaderLabel(group, labelProps);
+  }
+  const wrapInTooltip = content => {
+    if (!renderHeaderLabelTooltip) return content;
+    const title = renderHeaderLabelTooltip(group);
+    if (!title) return content;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: title,
+      children: content
+    });
+  };
+  const label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
+    ...labelProps
+  });
+  return wrapInTooltip(label);
+};
+var _default = exports.default = GroupLabel;

package/cjs/components/Toaster/PanelView.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactTransitionGroup = require("react-transition-group");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Toast = _interopRequireDefault(require("../Toast"));
+var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
+var _GroupLabel = _interopRequireDefault(require("./GroupLabel"));
+var _getGroups = require("./getGroups");
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const PanelView = _ref => {
+  let {
+    toasts,
+    onToastClose,
+    onToastGroupClose,
+    baseClassName,
+    groupConfigs,
+    isCollapsed: externalIsCollapsed,
+    onCollapseStateChange
+  } = _ref;
+  const groups = (0, _getGroups.getGroups)({
+    toasts,
+    groupConfigs
+  });
+  const notEmptyGroups = groups.filter(_ref2 => {
+    let {
+      count
+    } = _ref2;
+    return count > 0;
+  });
+  const panelRef = (0, _react.useRef)(null);
+  const headerRef = (0, _react.useRef)(null);
+  const isCollapsed = externalIsCollapsed ?? false;
+  const [isHeaderVisible, setIsHeaderVisible] = (0, _react.useState)(toasts.length > 1 || isCollapsed);
+  const isEmpty = toasts.length === 0;
+  const isSingleToast = toasts.length === 1;
+  const isSingleNonClosableToast = toasts.length === 1 && !(toasts[0].closable ?? true);
+  const handleToastCollapse = () => {
+    onCollapseStateChange?.(true);
+    setIsHeaderVisible(true);
+  };
+  if (toasts.length > 1 && !isHeaderVisible) {
+    setIsHeaderVisible(true);
+  }
+  if (isSingleToast && !isCollapsed && isHeaderVisible) {
+    setIsHeaderVisible(false);
+  }
+  if (isEmpty && isHeaderVisible) {
+    setIsHeaderVisible(false);
+  }
+  if (isEmpty && isCollapsed) {
+    onCollapseStateChange?.(false);
+  }
+  const panelHeader = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    nodeRef: headerRef,
+    in: isHeaderVisible,
+    timeout: {
+      enter: isSingleNonClosableToast ? 600 : 300,
+      exit: 300
+    },
+    classNames: `${baseClassName}__header`,
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: headerRef,
+      className: `${baseClassName}__header`,
+      style: {
+        '--_pul-toaster--panel-header-enter-delay': isSingleNonClosableToast ? '300ms' : 0,
+        '--_pul-toaster--panel-header-exit-delay': isEmpty ? '300ms' : undefined
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__header-labels`,
+        children: notEmptyGroups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupLabel.default, {
+          group: group,
+          onClose: () => onToastGroupClose?.(group.keys)
+        }, group.groupKey))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ghost: true,
+        icon: isCollapsed ? 'chevron-up' : 'chevron-down',
+        onClick: () => onCollapseStateChange?.(!isCollapsed),
+        className: `${baseClassName}__header-collapse`,
+        "aria-label": "Collapse"
+      })]
+    })
+  });
+  const panelContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(`${baseClassName}__content-wrapper`, {
+      [`${baseClassName}__content-wrapper--collapsed`]: isCollapsed
+    }),
+    style: {
+      '--_pul-toaster--panel-content-enter-delay': isSingleToast || isEmpty ? '300ms' : undefined
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+      component: "div",
+      className: `${baseClassName}__content`,
+      children: toasts.map(_ref3 => {
+        let {
+          key,
+          ...toastProps
+        } = _ref3;
+        const toastRef = /*#__PURE__*/(0, _react.createRef)();
+        const toastClassName = `${baseClassName}__toast`;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+          classNames: `${toastClassName}__wrapper`,
+          timeout: {
+            enter: 30000,
+            exit: 300
+          },
+          nodeRef: toastRef,
+          enter: toasts.length > 1,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${toastClassName}__wrapper`,
+            ref: toastRef,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${toastClassName}__sub-wrapper`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+                ...toastProps,
+                onClose: () => {
+                  onToastClose({
+                    key,
+                    ...toastProps
+                  });
+                },
+                className: (0, _classnames.default)(toastProps.className, toastClassName, isSingleNonClosableToast && `${toastClassName}--with-collapse`),
+                message: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [toastProps.message, isSingleNonClosableToast && !isHeaderVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                    size: "md",
+                    ghost: true,
+                    icon: {
+                      name: 'chevron-down'
+                    },
+                    className: `${baseClassName}__toast-collapse`,
+                    onClick: handleToastCollapse,
+                    "aria-label": "Collapse"
+                  })]
+                })
+              }, key)
+            })
+          })
+        }, key);
+      })
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnDarkContext.default.Provider, {
+    value: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}__wrapper`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        nodeRef: panelRef,
+        in: toasts.length > 0,
+        timeout: {
+          enter: 300,
+          exit: 300
+        },
+        classNames: baseClassName,
+        unmountOnExit: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          ref: panelRef,
+          className: (0, _classnames.default)(baseClassName, {
+            [`${baseClassName}--empty`]: isEmpty
+          }),
+          children: [panelHeader, panelContent]
+        })
+      })
+    })
+  });
+};
+var _default = exports.default = PanelView;

package/cjs/components/Toaster/ToastView.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactTransitionGroup = require("react-transition-group");
+var _Toast = _interopRequireDefault(require("../Toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const ToastView = _ref => {
+  let {
+    toasts,
+    onToastClose,
+    position,
+    baseClassName
+  } = _ref;
+  let stack = toasts;
+  if (position === 'bottom-end') {
+    stack = [...stack];
+    stack.reverse();
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+    component: "span",
+    className: baseClassName,
+    children: stack.map(_ref2 => {
+      let {
+        key,
+        ...toastProps
+      } = _ref2;
+      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: `${baseClassName}__toast-`,
+        timeout: {
+          enter: 300,
+          exit: 300
+        },
+        nodeRef: toastRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+          ...toastProps,
+          autoClosable: autoClosable,
+          onClose: () => onToastClose({
+            ...toastProps,
+            key
+          }),
+          innerRef: toastRef,
+          className: (0, _classnames.default)(toastProps.className, `${baseClassName}__toast`)
+        })
+      }, key);
+    })
+  });
+};
+var _default = exports.default = ToastView;