@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Drawer/Drawer.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import React, { Fragment, isValidElement, cloneElement, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -19,62 +20,52 @@ const propTypes = {
    * @since 0.0.65
    */
   isOpen: PropTypes.bool,
-
   /**
    * The title of the `Drawer`.
    * @since 0.0.65
    */
   title: PropTypes.node.isRequired,
-
   /**
    * 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
    */
   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
    */
   backButton: PropTypes.bool,
-
   /**
    * 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
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * onClose handler.
    * @since 0.0.65
    */
   onClose: PropTypes.func,
-
   /**
    * Whether show or not a confirmation dialog on close.
    * @since 3.21.0
    */
   closingConfirmation: PropTypes.bool,
-
   /**
    * Wraps children into [Form](#!/Form) if not empty.<br>
    * **Note:** in case of *element* you should take care of providing additional form props from [Drawer](#!/Drawer) through your custom component. See example below for more details
@@ -82,13 +73,11 @@ const propTypes = {
    * @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
    */
   sideBanner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Additional properties for the sideBanner
    * @since 3.25.0
@@ -98,19 +87,16 @@ const propTypes = {
      * Values for css background property
      */
     background: PropTypes.string,
-
     /**
      * One of: center, flex-start, flex-end
      */
     align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
   }),
-
   /**
    * Content of the `Drawer`.
    * @since 0.0.65
    */
   children: PropTypes.node,
-
   /**
    * Adds [Progress](#!/Progress) into footer.
    * @since 1.11.0
@@ -120,7 +106,6 @@ const propTypes = {
      * A title for the progress.
      */
     title: PropTypes.string,
-
     /**
      * An array of [ProgressStep](#!/ProgressStep) props.
      */
@@ -130,34 +115,28 @@ const propTypes = {
       progress: PropTypes.number,
       icon: PropTypes.string
     })).isRequired,
-
     /**
      * An option that controls drawer closing ability.
      */
     cancelable: PropTypes.bool,
-
     /**
      * On overall status event handler.
      * @since 3.8.0
      */
     onStatusChange: PropTypes.func,
-
     /**
      * @ignore
      */
     onClose: PropTypes.func,
-
     /**
      * @ignore
      */
     onClosableChange: PropTypes.func
   }),
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
@@ -181,27 +160,28 @@ 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
  */
-
-const Drawer = ({
-  baseClassName,
-  className,
-  children,
-  title,
-  subtitle,
-  backButton,
-  hideButton,
-  tabs,
-  onClose,
-  form,
-  progress,
-  closingConfirmation,
-  ...props
-}) => {
+const Drawer = _ref => {
+  let {
+    baseClassName,
+    className,
+    children,
+    title,
+    subtitle,
+    backButton,
+    hideButton,
+    tabs,
+    onClose,
+    form,
+    progress,
+    closingConfirmation,
+    ...props
+  } = _ref;
   const scrollableRef = useRef();
   const [isClosable, setIsClosable] = useState(true);
   const {
@@ -211,16 +191,15 @@ const Drawer = ({
     onClose,
     closingConfirmation
   });
-
   const takeApart = render => {
     if (progress) {
       progress.onClose = onCloseWithConfirmation;
       progress.onClosableChange = setIsClosable;
-
-      const drawerProgressRender = ({
-        content,
-        footer
-      }) => {
+      const drawerProgressRender = _ref2 => {
+        let {
+          content,
+          footer
+        } = _ref2;
         return render({
           content: /*#__PURE__*/React.createElement("div", {
             className: `${baseClassName}__form`
@@ -228,12 +207,10 @@ const Drawer = ({
           footer
         });
       };
-
       return /*#__PURE__*/React.createElement(DrawerProgress, _extends({
         render: drawerProgressRender
       }, progress));
     }
-
     if (form) {
       if ( /*#__PURE__*/isValidElement(form)) {
         return /*#__PURE__*/cloneElement(form, {
@@ -242,81 +219,87 @@ const Drawer = ({
             onClick: onCloseWithConfirmation,
             ...form.props.cancelButton
           },
-          render: ({
-            renderForm,
-            renderActionButtons
-          }) => render({
-            content: renderForm(),
-            footer: renderActionButtons()
-          })
+          render: _ref3 => {
+            let {
+              renderForm,
+              renderActionButtons
+            } = _ref3;
+            return render({
+              content: renderForm(),
+              footer: renderActionButtons()
+            });
+          }
         });
       }
-
       if (typeof form === 'object') {
         form.className = classNames(`${baseClassName}__form`, form.className);
-
         if (form.cancelButton !== false) {
           form.cancelButton = {
             onClick: onCloseWithConfirmation,
             ...form.cancelButton
           };
         }
-
         return /*#__PURE__*/React.createElement(Form, _extends({}, form, {
-          render: ({
-            renderForm,
-            renderActionButtons
-          }) => render({
-            content: renderForm(),
-            footer: renderActionButtons()
-          })
+          render: _ref4 => {
+            let {
+              renderForm,
+              renderActionButtons
+            } = _ref4;
+            return render({
+              content: renderForm(),
+              footer: renderActionButtons()
+            });
+          }
         }), children);
       }
     }
-
     return render({
       content: /*#__PURE__*/React.createElement("div", {
         className: `${baseClassName}__inner-body`
       }, children)
     });
   };
-
   return /*#__PURE__*/React.createElement(Overlay, _extends({
     className: classNames(baseClassName, {
       [`${baseClassName}--form`]: form
     }, className),
     onClose: onCloseWithConfirmation,
     canCloseOnBackdropClick: true
-  }, props), takeApart(({
-    content,
-    footer
-  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
-    backButton: backButton,
-    hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-    onClose: onCloseWithConfirmation,
-    tabs: tabs
-  }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
-    level: "2",
-    className: `${baseClassName}__title`
-  }, title) : /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__title`
-  }, title), subtitle && /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__subtitle`
-  }, subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, ({
-    handleScroll
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__body`,
-    onScroll: handleScroll,
-    ref: scrollableRef
-  }, /*#__PURE__*/React.createElement(ScrollableElementFormContext.Provider, {
-    value: scrollableRef.current
-  }, content))), footer && /*#__PURE__*/React.createElement("footer", {
-    className: `${baseClassName}__footer`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__footer-inner`
-  }, footer)))), closingConfirmationDialog);
+  }, props), takeApart(_ref5 => {
+    let {
+      content,
+      footer
+    } = _ref5;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+      backButton: backButton,
+      hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
+      onClose: onCloseWithConfirmation,
+      tabs: tabs
+    }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
+      level: "2",
+      className: `${baseClassName}__title`
+    }, title) : /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__title`
+    }, title), subtitle && /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__subtitle`
+    }, subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, _ref6 => {
+      let {
+        handleScroll
+      } = _ref6;
+      return /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__body`,
+        onScroll: handleScroll,
+        ref: scrollableRef
+      }, /*#__PURE__*/React.createElement(ScrollableElementFormContext.Provider, {
+        value: scrollableRef.current
+      }, content));
+    }), footer && /*#__PURE__*/React.createElement("footer", {
+      className: `${baseClassName}__footer`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__footer-inner`
+    }, footer)));
+  }), closingConfirmationDialog);
 };
-
 Drawer.propTypes = propTypes;
 Drawer.defaultProps = defaultProps;
 export default Drawer;

package/esm/components/Drawer/Drawer.stories.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import React, { useState } from 'react';
 import Button from '../Button';
 import Drawer from './Drawer';
@@ -21,11 +22,13 @@ Basic.args = {
   subtitle: 'Subtitle'
 };
 export const WithForm = args => /*#__PURE__*/React.createElement(Basic, args);
-WithForm.args = { ...Basic.args,
+WithForm.args = {
+  ...Basic.args,
   form: {}
 };
 export const WithSideBanner = args => /*#__PURE__*/React.createElement(Basic, args);
-WithSideBanner.args = { ...Basic.args,
+WithSideBanner.args = {
+  ...Basic.args,
   size: 'xs',
   sideBanner: /*#__PURE__*/React.createElement("img", {
     src: image
@@ -35,6 +38,7 @@ WithSideBanner.args = { ...Basic.args,
   }
 };
 export const WithClosingConfirmation = args => /*#__PURE__*/React.createElement(Basic, args);
-WithClosingConfirmation.args = { ...Basic.args,
+WithClosingConfirmation.args = {
+  ...Basic.args,
   closingConfirmation: true
 };

package/esm/components/Drawer/DrawerProgress.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 import React, { Component, Fragment, isValidElement, cloneElement } from 'react';
 import Button from '../Button';
 import Translate from '../Translate';
@@ -8,7 +9,6 @@ import Progress from '../Progress';
 import ProgressStep, { STATUS_DONE, STATUS_ERROR, STATUS_NOT_STARTED } from '../ProgressStep';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke } from '../utils';
-
 const renderAdditionalButtons = buttons => {
   const buttonProcessing = button => {
     if ( /*#__PURE__*/isValidElement(button) && button.type === Button) {
@@ -16,23 +16,17 @@ const renderAdditionalButtons = buttons => {
         size: 'lg'
       });
     }
-
     return button;
   };
-
   return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
 };
-
 class DrawerProgress extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       status: null
     });
-
     _defineProperty(this, "closeTimeout", void 0);
-
     _defineProperty(this, "handleStatusChange", status => {
       const {
         onClosableChange,
@@ -48,14 +42,12 @@ class DrawerProgress extends Component {
         status
       });
       safeInvoke(onClosableChange, cancelable || isFinished || isFailed);
-
       if (isFinished) {
         safeInvoke(onFinish);
       } else if (isFailed) {
         safeInvoke(onFail);
       }
     });
-
     _defineProperty(this, "handleClose", () => {
       const {
         onClose,
@@ -63,14 +55,11 @@ class DrawerProgress extends Component {
         cancelable
       } = this.props;
       window.clearTimeout(this.closeTimeout);
-
       if (cancelable) {
         safeInvoke(onCancel);
       }
-
       safeInvoke(onClose);
     });
-
     _defineProperty(this, "handleCancel", () => {
       const {
         onCancel,
@@ -78,15 +67,12 @@ class DrawerProgress extends Component {
         cancelable
       } = this.props;
       window.clearTimeout(this.closeTimeout);
-
       if (cancelable) {
         safeInvoke(onCancel);
       }
-
       safeInvoke(onClose);
     });
   }
-
   componentDidUpdate(_prevProps, prevState) {
     const {
       autoCloseTimeout,
@@ -95,24 +81,19 @@ class DrawerProgress extends Component {
     const {
       status
     } = this.state;
-
     if (prevState.status !== STATUS_DONE && status === STATUS_DONE) {
       window.clearTimeout(this.closeTimeout);
-
       if (autoCloseTimeout !== undefined) {
         this.closeTimeout = window.setTimeout(this.handleClose, autoCloseTimeout);
       }
     }
-
     if (prevState.status === STATUS_NOT_STARTED && status !== STATUS_NOT_STARTED) {
       safeInvoke(onStart);
     }
   }
-
   componentWillUnmount() {
     window.clearTimeout(this.closeTimeout);
   }
-
   render() {
     const {
       baseClassName,
@@ -151,14 +132,11 @@ class DrawerProgress extends Component {
       footer
     }) : /*#__PURE__*/React.createElement(Fragment, null, content, footer);
   }
-
 }
-
 _defineProperty(DrawerProgress, "defaultProps", {
   baseClassName: `${CLS_PREFIX}drawer-progress`,
   autoCloseTimeout: 0,
   cancelable: false,
   steps: []
 });
-
 export default DrawerProgress;

package/esm/components/Drawer/Header.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import { isRtl } from '../../utils';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -12,7 +13,6 @@ export default class Header extends Component {
   componentDidMount() {
     this.isRtl = isRtl();
   }
-
   renderBackButton() {
     const {
       baseClassName,
@@ -30,7 +30,6 @@ export default class Header extends Component {
       onClick: onClose
     });
   }
-
   renderHideButton() {
     const {
       baseClassName,
@@ -47,10 +46,10 @@ export default class Header extends Component {
       onClick: onClose
     });
   }
-
-  renderCloseButton({
-    disabled = false
-  } = {}) {
+  renderCloseButton() {
+    let {
+      disabled = false
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       baseClassName,
       onClose
@@ -67,7 +66,6 @@ export default class Header extends Component {
       disabled: disabled
     });
   }
-
   render() {
     const {
       baseClassName,
@@ -80,13 +78,11 @@ export default class Header extends Component {
     } = this.props;
     let prefix;
     let suffix;
-
     if (onClose) {
       switch (true) {
         case backButton:
           prefix = this.renderBackButton();
           break;
-
         case hideButton:
           suffix = /*#__PURE__*/React.createElement("div", {
             className: `${baseClassName}__actions`
@@ -94,7 +90,6 @@ export default class Header extends Component {
             disabled: true
           }));
           break;
-
         default:
           suffix = /*#__PURE__*/React.createElement("div", {
             className: `${baseClassName}__actions`
@@ -102,7 +97,6 @@ export default class Header extends Component {
           break;
       }
     }
-
     return /*#__PURE__*/React.createElement("div", _extends({
       className: baseClassName
     }, props), /*#__PURE__*/React.createElement("div", {
@@ -115,9 +109,7 @@ export default class Header extends Component {
       className: `${baseClassName}__tabs-inner`
     }, tabs))), suffix));
   }
-
 }
-
 _defineProperty(Header, "propTypes", {
   baseClassName: PropTypes.string,
   onClose: PropTypes.func,
@@ -126,7 +118,6 @@ _defineProperty(Header, "propTypes", {
   hideButton: PropTypes.bool,
   tabs: PropTypes.node
 });
-
 _defineProperty(Header, "defaultProps", {
   onClose: null,
   baseClassName: `${CLS_PREFIX}drawer-header`,

package/esm/components/Drawer/ScrollDirection.js

@@ -1,18 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-
 class ScrollDirection extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       direction: 'up'
     });
-
     _defineProperty(this, "prevScrollTop", 0);
-
     _defineProperty(this, "handleScroll", e => {
       const {
         scrollTop
@@ -24,7 +21,6 @@ class ScrollDirection extends Component {
       });
     });
   }
-
   render() {
     const {
       children
@@ -34,9 +30,7 @@ class ScrollDirection extends Component {
       handleScroll: this.handleScroll
     });
   }
-
 }
-
 ScrollDirection.propTypes = {
   children: PropTypes.func.isRequired
 };

package/esm/components/Drawer/index.js

@@ -1,2 +1,3 @@
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
 export { default } from './Drawer';