@plesk/ui-library 3.26.1 → 3.27.0

package/esm/components/Drawer/Drawer.js

@@ -14,113 +14,113 @@ 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,
 
-  /**
-   * A slot for `Tabs` component.
-   * @since 3.26.0
+  /**
+   * A slot for `Tabs` component.
+   * @since 3.26.0
    */
   tabs: PropTypes.node,
 
-  /**
-   * Overlay placement.
-   * @since 0.0.65
+  /**
+   * 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]),
@@ -129,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
 };
@@ -179,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 = ({
@@ -214,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)) {
@@ -231,7 +245,7 @@ const Drawer = ({
             renderActionButtons
           }) => render({
             content: renderForm(),
-            footer: progress ? createProgress() : renderActionButtons()
+            footer: renderActionButtons()
           })
         });
       }
@@ -252,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)
     });
   };
 

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/Dropdown/Dropdown.js

@@ -129,11 +129,11 @@ const useEnhancedMenu = (menu, {
     menuRef
   };
 };
-/**
- * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).
- * Use dropdown for grouping actions that are not used often or are less important than others -- in other words,
- * for stuff that you don't want to show users all the time, especially if you have limited screen space.
- * @since 0.0.57
+/**
+ * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).
+ * Use dropdown for grouping actions that are not used often or are less important than others -- in other words,
+ * for stuff that you don't want to show users all the time, especially if you have limited screen space.
+ * @since 0.0.57
  */
 
 
@@ -209,45 +209,45 @@ const Dropdown = ({
 };
 
 Dropdown.propTypes = {
-  /**
-   * Dropdown [menu](#!/Menu).
-   * @since 0.0.57
+  /**
+   * Dropdown [menu](#!/Menu).
+   * @since 0.0.57
    */
   menu: PropTypes.element.isRequired,
 
-  /**
-   * Menu placement.
-   * @since 0.0.60
+  /**
+   * Menu placement.
+   * @since 0.0.60
    */
   menuPlacement: PropTypes.string,
 
-  /**
-   * Content of the `Dropdown`.
-   * @since 0.0.57
+  /**
+   * Content of the `Dropdown`.
+   * @since 0.0.57
    */
   children: PropTypes.node,
 
-  /**
-   * Custom localization messages.
-   * @since 3.6.0
+  /**
+   * Custom localization messages.
+   * @since 3.6.0
    */
   locale: PropTypes.shape({
     close: PropTypes.node
   }),
 
-  /**
-   * Display menu as overlay.
-   * @ignore
+  /**
+   * Display menu as overlay.
+   * @ignore
    */
   overlay: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessage.js

@@ -5,10 +5,10 @@ import classNames from 'classnames';
 import ContentLoader from '../ContentLoader';
 import { CLS_PREFIX } from '../../constants';
 
-/**
- * `ExtendedStatusMessage` component is similar to regular [StatusMessage](#!/StatusMessage)
- * but it is used when the message itself is the primary content on the page.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessage` component is similar to regular [StatusMessage](#!/StatusMessage)
+ * but it is used when the message itself is the primary content on the page.
+ * @since 0.0.35
  */
 const ExtendedStatusMessage = ({
   baseClassName = `${CLS_PREFIX}extended-status-message`,

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageActions.js

@@ -4,9 +4,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 
-/**
- * `ExtendedStatusMessageActions` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageActions` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 const ExtendedStatusMessageActions = ({
   baseClassName = `${CLS_PREFIX}extended-status-message`,

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageDescription.js

@@ -4,9 +4,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 
-/**
- * `ExtendedStatusMessageDescription` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageDescription` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 const ExtendedStatusMessageDescription = ({
   baseClassName = `${CLS_PREFIX}extended-status-message`,

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageSeparator.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import classNames from 'classnames';
 
-/**
- * `ExtendedStatusMessageSeparator` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageSeparator` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 const ExtendedStatusMessageSeparator = ({
   className,

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageTitle.js

@@ -5,9 +5,9 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Heading from '../Heading';
 
-/**
- * `ExtendedStatusMessageTitle` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageTitle` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 const ExtendedStatusMessageTitle = ({
   baseClassName = `${CLS_PREFIX}extended-status-message`,

package/esm/components/Figure/Figure.js

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 
-/**
- * Figure component.
- * @since 0.0.42
+/**
+ * Figure component.
+ * @since 0.0.42
  */
 const Figure = ({
   baseClassName,
@@ -26,29 +26,29 @@ const Figure = ({
 }, caption));
 
 Figure.propTypes = {
-  /**
-   * @since 0.0.47
+  /**
+   * @since 0.0.47
    */
   href: PropTypes.string,
 
-  /**
-   * @since 0.0.47
+  /**
+   * @since 0.0.47
    */
   caption: PropTypes.any,
 
-  /**
-   * Content of the figure
-   * @since 0.0.42
+  /**
+   * Content of the figure
+   * @since 0.0.42
    */
   children: PropTypes.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };

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
  */
 
 

package/esm/components/Form/utils.js

@@ -18,17 +18,17 @@ const fixObj = (obj, key) => {
 
   return [...obj];
 };
-/**
- * Deeply get a value from an object via its path.
- *
- * @param {object} obj The object to query.
- * @param {string} name The path of the property to get.
- * @param {*} def The value returned for `undefined` resolved values.
- * @returns {*} Returns the resolved value.
- *
- * @example
- * const name = getIn(state, 'user[name]', 'Anonymous');
- *
+/**
+ * Deeply get a value from an object via its path.
+ *
+ * @param {object} obj The object to query.
+ * @param {string} name The path of the property to get.
+ * @param {*} def The value returned for `undefined` resolved values.
+ * @returns {*} Returns the resolved value.
+ *
+ * @example
+ * const name = getIn(state, 'user[name]', 'Anonymous');
+ *
  */
 
 
@@ -42,17 +42,17 @@ const getIn = (obj, name, def) => {
 
   return val === undefined ? def : val;
 };
-/**
- * Deeply set a value from in object via it's path.
- * Does not mutate an original object.
- *
- * @param {object} obj The object to query.
- * @param {string} name The path of the property to set.
- * @param {*} val The value to set.
- * @returns {object} Returns a new object.
- *
- * @example
- * const nextState = setIn(state, 'user[name]', 'John');
+/**
+ * Deeply set a value from in object via it's path.
+ * Does not mutate an original object.
+ *
+ * @param {object} obj The object to query.
+ * @param {string} name The path of the property to set.
+ * @param {*} val The value to set.
+ * @returns {object} Returns a new object.
+ *
+ * @example
+ * const nextState = setIn(state, 'user[name]', 'John');
  */