@plesk/ui-library 3.25.6 → 3.27.0

package/esm/components/Drawer/Drawer.js

@@ -10,112 +10,117 @@ import Header from './Header';
 import ScrollDirection from './ScrollDirection';
 import Form from '../Form';
 import Heading from '../Heading';
-import Text from '../Text';
 import { isLikeText } from '../Translate';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DrawerProgress from './DrawerProgress';
 const propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 0.0.65
+  /**
+   * Toggles visibility.
+   * @since 0.0.65
    */
   isOpen: PropTypes.bool,
 
-  /**
-   * The title of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * The title of the `Drawer`.
+   * @since 0.0.65
    */
   title: PropTypes.node.isRequired,
 
-  /**
-   * The subtitle of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * The subtitle of the `Drawer`.
+   * @since 0.0.65
    */
   subtitle: PropTypes.node,
 
-  /**
-   * Show the minimize button and the inactive close button.
-   * @since 1.4.1
+  /**
+   * Show the minimize button and the inactive close button.
+   * @since 1.4.1
    */
   hideButton: PropTypes.bool,
 
-  /**
-   * Show back button in the header. If true the close button is not show.
-   * @deprecated Not recommended to use. Use default close button instead.
-   * @since 0.0.65
+  /**
+   * Show back button in the header. If true the close button is not show.
+   * @deprecated Not recommended to use. Use default close button instead.
+   * @since 0.0.65
    */
   backButton: PropTypes.bool,
 
-  /**
-   * Overlay placement.
-   * @since 0.0.65
+  /**
+   * A slot for `Tabs` component.
+   * @since 3.26.0
+   */
+  tabs: PropTypes.node,
+
+  /**
+   * Overlay placement.
+   * @since 0.0.65
    */
   placement: PropTypes.oneOf(['left', 'right']),
 
-  /**
-   * Overlay size.
-   * @since 0.0.65
+  /**
+   * Overlay size.
+   * @since 0.0.65
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
 
-  /**
-   * onClose handler.
-   * @since 0.0.65
+  /**
+   * onClose handler.
+   * @since 0.0.65
    */
   onClose: PropTypes.func,
 
-  /**
-   * Whether show or not a confirmation dialog on close.
-   * @since 3.21.0
+  /**
+   * Whether show or not a confirmation dialog on close.
+   * @since 3.21.0
    */
   closingConfirmation: PropTypes.bool,
 
-  /**
-   * Wraps children into [Form](#!/Form) if not empty.
-   * @since 0.0.66
+  /**
+   * Wraps children into [Form](#!/Form) if not empty.
+   * @since 0.0.66
    */
   form: PropTypes.oneOfType([PropTypes.object, PropTypes.element]),
 
-  /**
-   * Block with an image, placed at the side of the component
-   * @since 3.25.0
+  /**
+   * Block with an image, placed at the side of the component
+   * @since 3.25.0
    */
   sideBanner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
 
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
+  /**
+   * Additional properties for the sideBanner
+   * @since 3.25.0
    */
   sideBannerContainer: PropTypes.shape({
-    /**
-     * Values for css background property
+    /**
+     * Values for css background property
      */
     background: PropTypes.string,
 
-    /**
-     * One of: center, flex-start, flex-end
+    /**
+     * One of: center, flex-start, flex-end
      */
     align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
   }),
 
-  /**
-   * Content of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * Content of the `Drawer`.
+   * @since 0.0.65
    */
   children: PropTypes.node,
 
-  /**
-   * Adds [Progress](#!/Progress) into footer.
-   * @since 1.11.0
+  /**
+   * Adds [Progress](#!/Progress) into footer.
+   * @since 1.11.0
    */
   progress: PropTypes.shape({
-    /**
-     * A title for the progress.
+    /**
+     * A title for the progress.
      */
     title: PropTypes.string,
 
-    /**
-     * An array of [ProgressStep](#!/ProgressStep) props.
+    /**
+     * An array of [ProgressStep](#!/ProgressStep) props.
      */
     steps: PropTypes.arrayOf(PropTypes.shape({
       title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
@@ -124,35 +129,35 @@ const propTypes = {
       icon: PropTypes.string
     })).isRequired,
 
-    /**
-     * An option that controls drawer closing ability.
+    /**
+     * An option that controls drawer closing ability.
      */
     cancelable: PropTypes.bool,
 
-    /**
-     * On overall status event handler.
-     * @since 3.8.0
+    /**
+     * On overall status event handler.
+     * @since 3.8.0
      */
     onStatusChange: PropTypes.func,
 
-    /**
-     * @ignore
+    /**
+     * @ignore
      */
     onClose: PropTypes.func,
 
-    /**
-     * @ignore
+    /**
+     * @ignore
      */
     onClosableChange: PropTypes.func
   }),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };
@@ -161,6 +166,7 @@ const defaultProps = {
   subtitle: '',
   backButton: undefined,
   hideButton: undefined,
+  tabs: undefined,
   placement: 'left',
   size: 'md',
   onClose: null,
@@ -173,10 +179,10 @@ const defaultProps = {
   className: null,
   baseClassName: `${CLS_PREFIX}drawer`
 };
-/**
- * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
- * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
- * @since 0.0.65
+/**
+ * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
+ * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
+ * @since 0.0.65
  */
 
 const Drawer = ({
@@ -187,6 +193,7 @@ const Drawer = ({
   subtitle,
   backButton,
   hideButton,
+  tabs,
   onClose,
   form,
   progress,
@@ -207,9 +214,23 @@ const Drawer = ({
     if (progress) {
       progress.onClose = onCloseWithConfirmation;
       progress.onClosableChange = setIsClosable;
-    }
 
-    const createProgress = () => /*#__PURE__*/React.createElement(DrawerProgress, progress);
+      const drawerProgressRender = ({
+        content,
+        footer
+      }) => {
+        return render({
+          content: /*#__PURE__*/React.createElement("div", {
+            className: `${baseClassName}__form`
+          }, content),
+          footer
+        });
+      };
+
+      return /*#__PURE__*/React.createElement(DrawerProgress, _extends({
+        render: drawerProgressRender
+      }, progress));
+    }
 
     if (form) {
       if ( /*#__PURE__*/isValidElement(form)) {
@@ -224,7 +245,7 @@ const Drawer = ({
             renderActionButtons
           }) => render({
             content: renderForm(),
-            footer: progress ? createProgress() : renderActionButtons()
+            footer: renderActionButtons()
           })
         });
       }
@@ -245,25 +266,16 @@ const Drawer = ({
             renderActionButtons
           }) => render({
             content: renderForm(),
-            footer: progress ? createProgress() : renderActionButtons()
+            footer: renderActionButtons()
           })
         }), children);
       }
     }
 
-    children = /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__inner-body`
-    }, children);
-
-    if (progress) {
-      return render({
-        content: children,
-        footer: createProgress()
-      });
-    }
-
     return render({
-      content: children
+      content: /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__inner-body`
+      }, children)
     });
   };
 
@@ -279,7 +291,8 @@ const Drawer = ({
   }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
     backButton: backButton,
     hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-    onClose: onCloseWithConfirmation
+    onClose: onCloseWithConfirmation,
+    tabs: tabs
   }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
     level: "2",
     className: `${baseClassName}__title`
@@ -287,9 +300,7 @@ const Drawer = ({
     className: `${baseClassName}__title`
   }, title), subtitle && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__subtitle`
-  }, isLikeText(subtitle) ? /*#__PURE__*/React.createElement(Text, {
-    intent: "muted"
-  }, subtitle) : subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, ({
+  }, subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, ({
     handleScroll
   }) => /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__body`,

package/esm/components/Drawer/DrawerProgress.js

@@ -85,7 +85,7 @@ class DrawerProgress extends Component {
     if (prevState.status !== STATUS_DONE && status === STATUS_DONE) {
       window.clearTimeout(this.closeTimeout);
 
-      if (autoCloseTimeout) {
+      if (autoCloseTimeout !== undefined) {
         this.closeTimeout = window.setTimeout(this.handleClose, autoCloseTimeout);
       }
     }
@@ -105,7 +105,8 @@ class DrawerProgress extends Component {
       title,
       steps,
       buttons,
-      cancelable
+      cancelable,
+      render
     } = this.props;
     const {
       status
@@ -113,35 +114,35 @@ class DrawerProgress extends Component {
     const isFinished = status === STATUS_DONE;
     const isFailed = status === STATUS_ERROR;
     const canCancel = cancelable && !(isFinished || isFailed);
-    /* eslint-disable react/jsx-indent */
-
-    return /*#__PURE__*/React.createElement(Fragment, null, title && /*#__PURE__*/React.createElement("div", {
+    const hasFooter = !!(buttons || canCancel);
+    const content = /*#__PURE__*/React.createElement(Fragment, null, title && /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__title`
     }, title), /*#__PURE__*/React.createElement(Progress, {
       onStatusChange: this.handleStatusChange,
       className: `${baseClassName}__progress`
     }, steps.map((step, index) => /*#__PURE__*/React.createElement(ProgressStep, _extends({
       key: index.toString()
-    }, step)))), /*#__PURE__*/React.createElement("div", {
+    }, step)))));
+    const footer = hasFooter ? /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__footer`
-    }, buttons, (isFinished || isFailed) && /*#__PURE__*/React.createElement(Button, {
-      onClick: this.handleClose
-    }, /*#__PURE__*/React.createElement(Translate, {
-      content: "DrawerProgress.closeButton",
-      fallback: "Close"
-    })), canCancel && /*#__PURE__*/React.createElement(Button, {
-      onClick: this.handleCancel
+    }, buttons, canCancel && /*#__PURE__*/React.createElement(Button, {
+      onClick: this.handleCancel,
+      size: "lg"
     }, /*#__PURE__*/React.createElement(Translate, {
       content: "DrawerProgress.cancelButton",
       fallback: "Cancel"
-    }))));
+    }))) : null;
+    return typeof render === 'function' ? render({
+      content,
+      footer
+    }) : /*#__PURE__*/React.createElement(Fragment, null, content, footer);
   }
 
 }
 
 _defineProperty(DrawerProgress, "defaultProps", {
   baseClassName: `${CLS_PREFIX}drawer-progress`,
-  autoCloseTimeout: 3000,
+  autoCloseTimeout: 0,
   cancelable: false,
   steps: []
 });

package/esm/components/Drawer/Header.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 import { isRtl } from '../../utils';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -75,6 +75,7 @@ export default class Header extends Component {
       children,
       backButton,
       hideButton,
+      tabs,
       ...props
     } = this.props;
     let prefix;
@@ -108,7 +109,11 @@ export default class Header extends Component {
       className: `${baseClassName}__inner`
     }, prefix, /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content`
-    }, children), suffix));
+    }, children, tabs && /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__tabs`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__tabs-inner`
+    }, tabs))), suffix));
   }
 
 }
@@ -118,12 +123,14 @@ _defineProperty(Header, "propTypes", {
   onClose: PropTypes.func,
   children: PropTypes.node.isRequired,
   backButton: PropTypes.bool,
-  hideButton: PropTypes.bool
+  hideButton: PropTypes.bool,
+  tabs: PropTypes.node
 });
 
 _defineProperty(Header, "defaultProps", {
   onClose: null,
   baseClassName: `${CLS_PREFIX}drawer-header`,
   backButton: false,
-  hideButton: false
+  hideButton: false,
+  tabs: undefined
 });

package/esm/components/Form/Form.js

@@ -377,10 +377,10 @@ class Form extends Component {
   }
 
 }
-/**
- * `Form` component is used for entering and submitting of user data.
- * [More details about designing of forms.](#!/Good%20Forms)
- * @since 0.0.54
+/**
+ * `Form` component is used for entering and submitting of user data.
+ * [More details about designing of forms.](#!/Good%20Forms)
+ * @since 0.0.54
  */