@plesk/ui-library 3.40.12 → 3.41.0

package/esm/components/ItemList/ItemList.js

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

package/esm/components/List/ListEmptyView.js

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

package/esm/components/Spinner/Spinner.js

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

package/esm/components/Toast/Toast.js

@@ -1,97 +1,68 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
 import Button from '../Button';
 import { intentIconMap } from '../intentIconMap';
 import OnDarkContext from '../OnDarkContext';
+import { useAutoClose } from './useAutoClose';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AUTOCLOSE_TIMEOUT = 6000;
-export default class Toast extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "timer", void 0);
+const Toast = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}toast`,
+    className,
+    message,
+    intent,
+    accent,
+    icon = intent && /*#__PURE__*/_jsx(Icon, {
+      name: intentIconMap[intent]
+    }),
+    onClose,
+    closable = true,
+    autoClosable,
+    autoCloseTimeout,
+    innerRef,
+    groupKey,
+    ...props
+  } = _ref;
+  useAutoClose({
+    autoClosable,
+    autoCloseTimeout,
+    onClose
+  });
+  const result = /*#__PURE__*/_jsxs("div", {
+    tabIndex: 0,
+    className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className),
+    ...props,
+    ref: innerRef,
+    children: [icon && /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__icon`,
+      children: Icon.create(icon, {
+        intent
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__content`,
+      children: message
+    }), closable && /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__action`,
+      children: /*#__PURE__*/_jsx(Button, {
+        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__*/_jsx(Icon, {
-        name: intentIconMap[intent]
-      }),
-      onClose,
-      closable = true,
-      autoClosable,
-      autoCloseTimeout,
-      innerRef,
-      ...props
-    } = this.props;
-    const result = /*#__PURE__*/_jsxs("div", {
-      tabIndex: 0,
-      className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className),
-      ...props,
-      ref: innerRef,
-      children: [icon ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}__icon`,
-        children: Icon.create(icon, {
-          intent
-        })
-      }) : null, /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}__content`,
-        children: message
-      }), closable ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}__action`,
-        children: /*#__PURE__*/_jsx(Button, {
-          ghost: true,
-          icon: {
-            name: 'cross-mark',
-            size: '12'
-          },
-          className: `${baseClassName}__close`,
-          onClick: onClose
-        })
-      }) : null]
-    });
-    if (accent) {
-      return result;
-    }
-    return /*#__PURE__*/_jsx(OnDarkContext.Provider, {
-      value: true,
-      children: result
-    });
-  }
-}
-_defineProperty(Toast, "defaultProps", {
-  baseClassName: `${CLS_PREFIX}toast`
-});
+  return /*#__PURE__*/_jsx(OnDarkContext.Provider, {
+    value: true,
+    children: result
+  });
+};
+export default Toast;

package/esm/components/Toast/useAutoClose.js

@@ -0,0 +1,27 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useEffect, useRef } from 'react';
+const AUTOCLOSE_TIMEOUT = 6000;
+const getAutoCloseTimeout = (autoClosable, autoCloseTimeout) => {
+  if (typeof autoClosable !== 'boolean') {
+    return autoCloseTimeout;
+  }
+  return autoClosable ? AUTOCLOSE_TIMEOUT : undefined;
+};
+export const useAutoClose = _ref => {
+  let {
+    autoClosable,
+    autoCloseTimeout: externalAutoCloseTimeout,
+    onClose
+  } = _ref;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    const autoCloseTimeout = getAutoCloseTimeout(autoClosable, externalAutoCloseTimeout);
+    let timeoutId;
+    if (autoCloseTimeout && onCloseRef.current) {
+      timeoutId = window.setTimeout(onCloseRef.current, autoCloseTimeout);
+    }
+    return () => window.clearTimeout(timeoutId);
+  }, [autoClosable, externalAutoCloseTimeout]);
+};

package/esm/components/Toaster/GroupLabel.js

@@ -0,0 +1,47 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import Label from '../Label';
+import Tooltip from '../Tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+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__*/_jsx(Tooltip, {
+      title: title,
+      children: content
+    });
+  };
+  const label = /*#__PURE__*/_jsx(Label, {
+    ...labelProps
+  });
+  return wrapInTooltip(label);
+};
+export default GroupLabel;

package/esm/components/Toaster/PanelView.js

@@ -0,0 +1,168 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { createRef, useState, useRef } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import classNames from 'classnames';
+import Button from '../Button';
+import Toast from '../Toast';
+import OnDarkContext from '../OnDarkContext';
+import GroupLabel from './GroupLabel';
+import { getGroups } from './getGroups';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const PanelView = _ref => {
+  let {
+    toasts,
+    onToastClose,
+    onToastGroupClose,
+    baseClassName,
+    groupConfigs,
+    isCollapsed: externalIsCollapsed,
+    onCollapseStateChange
+  } = _ref;
+  const groups = getGroups({
+    toasts,
+    groupConfigs
+  });
+  const notEmptyGroups = groups.filter(_ref2 => {
+    let {
+      count
+    } = _ref2;
+    return count > 0;
+  });
+  const panelRef = useRef(null);
+  const headerRef = useRef(null);
+  const isCollapsed = externalIsCollapsed ?? false;
+  const [isHeaderVisible, setIsHeaderVisible] = 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__*/_jsx(CSSTransition, {
+    nodeRef: headerRef,
+    in: isHeaderVisible,
+    timeout: {
+      enter: isSingleNonClosableToast ? 600 : 300,
+      exit: 300
+    },
+    classNames: `${baseClassName}__header`,
+    unmountOnExit: true,
+    children: /*#__PURE__*/_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__*/_jsx("div", {
+        className: `${baseClassName}__header-labels`,
+        children: notEmptyGroups.map(group => /*#__PURE__*/_jsx(GroupLabel, {
+          group: group,
+          onClose: () => onToastGroupClose?.(group.keys)
+        }, group.groupKey))
+      }), /*#__PURE__*/_jsx(Button, {
+        ghost: true,
+        icon: isCollapsed ? 'chevron-up' : 'chevron-down',
+        onClick: () => onCollapseStateChange?.(!isCollapsed),
+        className: `${baseClassName}__header-collapse`,
+        "aria-label": "Collapse"
+      })]
+    })
+  });
+  const panelContent = /*#__PURE__*/_jsx("div", {
+    className: classNames(`${baseClassName}__content-wrapper`, {
+      [`${baseClassName}__content-wrapper--collapsed`]: isCollapsed
+    }),
+    style: {
+      '--_pul-toaster--panel-content-enter-delay': isSingleToast || isEmpty ? '300ms' : undefined
+    },
+    children: /*#__PURE__*/_jsx(TransitionGroup, {
+      component: "div",
+      className: `${baseClassName}__content`,
+      children: toasts.map(_ref3 => {
+        let {
+          key,
+          ...toastProps
+        } = _ref3;
+        const toastRef = /*#__PURE__*/createRef();
+        const toastClassName = `${baseClassName}__toast`;
+        return /*#__PURE__*/_jsx(CSSTransition, {
+          classNames: `${toastClassName}__wrapper`,
+          timeout: {
+            enter: 30000,
+            exit: 300
+          },
+          nodeRef: toastRef,
+          enter: toasts.length > 1,
+          children: /*#__PURE__*/_jsx("div", {
+            className: `${toastClassName}__wrapper`,
+            ref: toastRef,
+            children: /*#__PURE__*/_jsx("div", {
+              className: `${toastClassName}__sub-wrapper`,
+              children: /*#__PURE__*/_jsx(Toast, {
+                ...toastProps,
+                onClose: () => {
+                  onToastClose({
+                    key,
+                    ...toastProps
+                  });
+                },
+                className: classNames(toastProps.className, toastClassName, isSingleNonClosableToast && `${toastClassName}--with-collapse`),
+                message: /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [toastProps.message, isSingleNonClosableToast && !isHeaderVisible && /*#__PURE__*/_jsx(Button, {
+                    size: "md",
+                    ghost: true,
+                    icon: {
+                      name: 'chevron-down'
+                    },
+                    className: `${baseClassName}__toast-collapse`,
+                    onClick: handleToastCollapse,
+                    "aria-label": "Collapse"
+                  })]
+                })
+              }, key)
+            })
+          })
+        }, key);
+      })
+    })
+  });
+  return /*#__PURE__*/_jsx(OnDarkContext.Provider, {
+    value: true,
+    children: /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__wrapper`,
+      children: /*#__PURE__*/_jsx(CSSTransition, {
+        nodeRef: panelRef,
+        in: toasts.length > 0,
+        timeout: {
+          enter: 300,
+          exit: 300
+        },
+        classNames: baseClassName,
+        unmountOnExit: true,
+        children: /*#__PURE__*/_jsxs("div", {
+          ref: panelRef,
+          className: classNames(baseClassName, {
+            [`${baseClassName}--empty`]: isEmpty
+          }),
+          children: [panelHeader, panelContent]
+        })
+      })
+    })
+  });
+};
+export default PanelView;

package/esm/components/Toaster/ToastView.js

@@ -0,0 +1,59 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { createRef } from 'react';
+import classNames from 'classnames';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import Toast from '../Toast';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToastView = _ref => {
+  let {
+    toasts,
+    onToastClose,
+    position,
+    baseClassName
+  } = _ref;
+  let stack = toasts;
+  if (position === 'bottom-end') {
+    stack = [...stack];
+    stack.reverse();
+  }
+  return /*#__PURE__*/_jsx(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__*/createRef();
+      return /*#__PURE__*/_jsx(CSSTransition, {
+        classNames: `${baseClassName}__toast-`,
+        timeout: {
+          enter: 300,
+          exit: 300
+        },
+        nodeRef: toastRef,
+        children: /*#__PURE__*/_jsx(Toast, {
+          ...toastProps,
+          autoClosable: autoClosable,
+          onClose: () => onToastClose({
+            ...toastProps,
+            key
+          }),
+          innerRef: toastRef,
+          className: classNames(toastProps.className, `${baseClassName}__toast`)
+        })
+      }, key);
+    })
+  });
+};
+export default ToastView;