@plesk/ui-library 3.25.6 → 3.27.0

package/cjs/components/Drawer/Drawer.js

@@ -29,8 +29,6 @@ var _Form = _interopRequireDefault(require("../Form"));
 
 var _Heading = _interopRequireDefault(require("../Heading"));
 
-var _Text = _interopRequireDefault(require("../Text"));
-
 var _Translate = require("../Translate");
 
 var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));
@@ -43,107 +41,113 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 const propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 0.0.65
+  /**
+   * Toggles visibility.
+   * @since 0.0.65
    */
   isOpen: _propTypes.default.bool,
 
-  /**
-   * The title of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * The title of the `Drawer`.
+   * @since 0.0.65
    */
   title: _propTypes.default.node.isRequired,
 
-  /**
-   * The subtitle of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * The subtitle of the `Drawer`.
+   * @since 0.0.65
    */
   subtitle: _propTypes.default.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.default.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.default.bool,
 
-  /**
-   * Overlay placement.
-   * @since 0.0.65
+  /**
+   * A slot for `Tabs` component.
+   * @since 3.26.0
+   */
+  tabs: _propTypes.default.node,
+
+  /**
+   * Overlay placement.
+   * @since 0.0.65
    */
   placement: _propTypes.default.oneOf(['left', 'right']),
 
-  /**
-   * Overlay size.
-   * @since 0.0.65
+  /**
+   * Overlay size.
+   * @since 0.0.65
    */
   size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
 
-  /**
-   * onClose handler.
-   * @since 0.0.65
+  /**
+   * onClose handler.
+   * @since 0.0.65
    */
   onClose: _propTypes.default.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.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.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.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
+  /**
+   * Additional properties for the sideBanner
+   * @since 3.25.0
    */
   sideBannerContainer: _propTypes.default.shape({
-    /**
-     * Values for css background property
+    /**
+     * Values for css background property
      */
     background: _propTypes.default.string,
 
-    /**
-     * One of: center, flex-start, flex-end
+    /**
+     * One of: center, flex-start, flex-end
      */
     align: _propTypes.default.oneOf(['center', 'flex-start', 'flex-end'])
   }),
 
-  /**
-   * Content of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * Content of the `Drawer`.
+   * @since 0.0.65
    */
   children: _propTypes.default.node,
 
-  /**
-   * Adds [Progress](#!/Progress) into footer.
-   * @since 1.11.0
+  /**
+   * Adds [Progress](#!/Progress) into footer.
+   * @since 1.11.0
    */
   progress: _propTypes.default.shape({
-    /**
-     * A title for the progress.
+    /**
+     * A title for the progress.
      */
     title: _propTypes.default.string,
 
-    /**
-     * An array of [ProgressStep](#!/ProgressStep) props.
+    /**
+     * An array of [ProgressStep](#!/ProgressStep) props.
      */
     steps: _propTypes.default.arrayOf(_propTypes.default.shape({
       title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
@@ -152,35 +156,35 @@ const propTypes = {
       icon: _propTypes.default.string
     })).isRequired,
 
-    /**
-     * An option that controls drawer closing ability.
+    /**
+     * An option that controls drawer closing ability.
      */
     cancelable: _propTypes.default.bool,
 
-    /**
-     * On overall status event handler.
-     * @since 3.8.0
+    /**
+     * On overall status event handler.
+     * @since 3.8.0
      */
     onStatusChange: _propTypes.default.func,
 
-    /**
-     * @ignore
+    /**
+     * @ignore
      */
     onClose: _propTypes.default.func,
 
-    /**
-     * @ignore
+    /**
+     * @ignore
      */
     onClosableChange: _propTypes.default.func
   }),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -189,6 +193,7 @@ const defaultProps = {
   subtitle: '',
   backButton: undefined,
   hideButton: undefined,
+  tabs: undefined,
   placement: 'left',
   size: 'md',
   onClose: null,
@@ -201,10 +206,10 @@ const defaultProps = {
   className: null,
   baseClassName: `${_constants.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 = ({
@@ -215,6 +220,7 @@ const Drawer = ({
   subtitle,
   backButton,
   hideButton,
+  tabs,
   onClose,
   form,
   progress,
@@ -235,9 +241,23 @@ const Drawer = ({
     if (progress) {
       progress.onClose = onCloseWithConfirmation;
       progress.onClosableChange = setIsClosable;
-    }
 
-    const createProgress = () => /*#__PURE__*/_react.default.createElement(_DrawerProgress.default, progress);
+      const drawerProgressRender = ({
+        content,
+        footer
+      }) => {
+        return render({
+          content: /*#__PURE__*/_react.default.createElement("div", {
+            className: `${baseClassName}__form`
+          }, content),
+          footer
+        });
+      };
+
+      return /*#__PURE__*/_react.default.createElement(_DrawerProgress.default, (0, _extends2.default)({
+        render: drawerProgressRender
+      }, progress));
+    }
 
     if (form) {
       if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
@@ -252,7 +272,7 @@ const Drawer = ({
             renderActionButtons
           }) => render({
             content: renderForm(),
-            footer: progress ? createProgress() : renderActionButtons()
+            footer: renderActionButtons()
           })
         });
       }
@@ -273,25 +293,16 @@ const Drawer = ({
             renderActionButtons
           }) => render({
             content: renderForm(),
-            footer: progress ? createProgress() : renderActionButtons()
+            footer: renderActionButtons()
           })
         }), children);
       }
     }
 
-    children = /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__inner-body`
-    }, children);
-
-    if (progress) {
-      return render({
-        content: children,
-        footer: createProgress()
-      });
-    }
-
     return render({
-      content: children
+      content: /*#__PURE__*/_react.default.createElement("div", {
+        className: `${baseClassName}__inner-body`
+      }, children)
     });
   };
 
@@ -307,7 +318,8 @@ const Drawer = ({
   }) => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.default, {
     backButton: backButton,
     hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-    onClose: onCloseWithConfirmation
+    onClose: onCloseWithConfirmation,
+    tabs: tabs
   }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
     level: "2",
     className: `${baseClassName}__title`
@@ -315,9 +327,7 @@ const Drawer = ({
     className: `${baseClassName}__title`
   }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__subtitle`
-  }, (0, _Translate.isLikeText)(subtitle) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
-    intent: "muted"
-  }, subtitle) : subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
+  }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
     handleScroll
   }) => /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__body`,

package/cjs/components/Drawer/DrawerProgress.js

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

package/cjs/components/Drawer/Header.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 class Header extends _react.Component {
   componentDidMount() {
     this.isRtl = (0, _utils.isRtl)();
@@ -97,6 +97,7 @@ class Header extends _react.Component {
       children,
       backButton,
       hideButton,
+      tabs,
       ...props
     } = this.props;
     let prefix;
@@ -130,7 +131,11 @@ class Header extends _react.Component {
       className: `${baseClassName}__inner`
     }, prefix, /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__content`
-    }, children), suffix));
+    }, children, tabs && /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__tabs`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__tabs-inner`
+    }, tabs))), suffix));
   }
 
 }
@@ -141,11 +146,13 @@ exports.default = Header;
   onClose: _propTypes.default.func,
   children: _propTypes.default.node.isRequired,
   backButton: _propTypes.default.bool,
-  hideButton: _propTypes.default.bool
+  hideButton: _propTypes.default.bool,
+  tabs: _propTypes.default.node
 });
 (0, _defineProperty2.default)(Header, "defaultProps", {
   onClose: null,
   baseClassName: `${_constants.CLS_PREFIX}drawer-header`,
   backButton: false,
-  hideButton: false
+  hideButton: false,
+  tabs: undefined
 });

package/cjs/components/Form/Form.js

@@ -396,10 +396,10 @@ class Form extends _react.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
  */