@plesk/ui-library 3.31.0 → 3.31.1

package/esm/components/Dialog/Dialog.js

@@ -14,35 +14,34 @@ import Heading from '../Heading';
 import Text from '../Text';
 import Translate, { isLikeText } from '../Translate';
 import { safeInvoke } from '../utils';
-
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/isValidElement(value);
+
 /**
  * `Dialog` is a modal window that asks users to make a decision or enter additional information.
  * @since 0.0.68
  */
-
-
-const Dialog = ({
-  baseClassName,
-  className,
-  children,
-  actions,
-  isOpen,
-  banner,
-  image,
-  title,
-  subtitle,
-  cancelTitle,
-  cancelButton,
-  buttons,
-  form,
-  size,
-  closable,
-  onClose,
-  closingConfirmation,
-  canClose,
-  ...props
-}) => {
+const Dialog = _ref => {
+  let {
+    baseClassName,
+    className,
+    children,
+    actions,
+    isOpen,
+    banner,
+    image,
+    title,
+    subtitle,
+    cancelTitle,
+    cancelButton,
+    buttons,
+    form,
+    size,
+    closable,
+    onClose,
+    closingConfirmation,
+    canClose,
+    ...props
+  } = _ref;
   const [isVisible, setIsVisible] = useState(isOpen);
   const {
     onCloseWithConfirmation,
@@ -57,16 +56,13 @@ const Dialog = ({
   useEffect(() => {
     setIsVisible(isOpen);
   }, [isOpen]);
-
   const renderImage = (image, block) => {
     const classPrefix = `${baseClassName}__${block}`;
-
     if ( /*#__PURE__*/isValidElement(image)) {
       return /*#__PURE__*/React.createElement("div", {
         className: classPrefix
       }, image);
     }
-
     if (typeof image === 'string') {
       return /*#__PURE__*/React.createElement("div", {
         className: classPrefix
@@ -75,23 +71,19 @@ const Dialog = ({
         src: image
       }));
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: classPrefix
     }, /*#__PURE__*/React.createElement("img", _extends({
       className: `${classPrefix}-inner`
     }, image)));
   };
-
   const getCancelButtonProps = () => {
     if (!closable) {
       return false;
     }
-
     if (cancelButton === false || form && form.cancelButton === false) {
       return false;
     }
-
     let props = {
       onClick: onCloseWithConfirmation,
       children: cancelTitle || /*#__PURE__*/React.createElement(Translate, {
@@ -99,45 +91,37 @@ const Dialog = ({
         fallback: "Cancel"
       })
     };
-
     if (form && isProps(form.cancelButton)) {
-      props = { ...props,
+      props = {
+        ...props,
         ...form.cancelButton
       };
     }
-
     if (isProps(cancelButton)) {
-      props = { ...props,
+      props = {
+        ...props,
         ...cancelButton
       };
     }
-
     return props;
   };
-
   const renderButtons = () => {
     if (form) {
       return null;
     }
-
     let cancel;
     const cancelButtonProps = getCancelButtonProps();
-
     if (cancelButtonProps) {
       cancel = /*#__PURE__*/React.createElement(Button, cancelButtonProps);
     }
-
     if (buttons || cancel) {
       return /*#__PURE__*/React.createElement("div", {
         className: `${baseClassName}__buttons`
       }, buttons, cancel);
     }
-
     return null;
   };
-
   let childrenElement;
-
   if (form) {
     form.cancelButton = getCancelButtonProps();
     form.footerClassName = classNames(form.footerClassName, `${baseClassName}__form-footer`);
@@ -146,7 +130,6 @@ const Dialog = ({
   } else {
     childrenElement = children;
   }
-
   return /*#__PURE__*/React.createElement(Overlay, _extends({
     className: classNames(baseClassName, className),
     isOpen: isVisible,
@@ -184,26 +167,22 @@ const Dialog = ({
     className: `${baseClassName}__content`
   }, image && renderImage(image, 'image'), childrenElement, renderButtons()), closingConfirmationDialog);
 };
-
 Dialog.propTypes = {
   /**
    * Toggles visibility.
    * @since 0.0.68
    */
   isOpen: PropTypes.bool,
-
   /**
    * Banner. Renders in front of content as wide as dialog.
    * @since 0.0.68
    */
   banner: PropTypes.oneOfType([PropTypes.string, 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
@@ -213,103 +192,86 @@ Dialog.propTypes = {
      * Values for css background property
      */
     background: PropTypes.string,
-
     /**
      * One of: center, flex-start, flex-end
      */
     align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
   }),
-
   /**
    * Image. Renders into content.
    * @since 0.0.68
    */
   image: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Title
    * @since 0.0.68
    */
   title: PropTypes.node,
-
   /**
    * The subtitle of the `Dialog`.
    * @since 4.0.0
    */
   subtitle: PropTypes.node,
-
   /**
    * Title of "cancel" button
    * @since 0.0.68
    * @deprecated Use `cancelButton` instead.
    */
   cancelTitle: PropTypes.node,
-
   /**
    * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
    * @since 3.13.0
    */
   cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-
   /**
    * Buttons except "cancel" button
    * @since 0.0.68
    */
   buttons: PropTypes.node,
-
   /**
    * Actions which will be shown in Dialog header
    * @since 1.2.0
    */
   actions: PropTypes.node,
-
   /**
    * Wraps children into [Form](#!/Form) if not empty.
    * @since 0.0.68
    */
   form: PropTypes.object,
-
   /**
    * Dialog width
    * @since 0.0.68
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * If the value is false, the dialog cannot be closed and the Close button is hidden.
    * @since 1.2.0
    */
   closable: PropTypes.bool,
-
   /**
    * Disable close dialog button
    * @since 4.0.0
    */
   canClose: PropTypes.bool,
-
   /**
    * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
    * @since 0.0.68
    */
   onClose: PropTypes.func,
-
   /**
    * Whether show or not a confirmation dialog on close.
    * @since 3.21.0
    */
   closingConfirmation: PropTypes.bool,
-
   /**
    * Content of the `DialogWindow`.
    * @since 0.0.68
    */
   children: PropTypes.node,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */

package/esm/components/Dialog/Dialog.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 Dialog from './Dialog';
@@ -21,7 +22,8 @@ Basic.args = {
   subtitle: 'Subtitle'
 };
 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

package/esm/components/Dialog/index.js

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

package/esm/components/DistractionFreeModeContext/DistractionFreeModeContext.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import { createContext } from 'react';
 const DistractionFreeModeContext = /*#__PURE__*/createContext(undefined);
 DistractionFreeModeContext.displayName = 'DistractionFreeModeContext';

package/esm/components/DistractionFreeModeContext/index.js

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

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;