@plesk/ui-library 3.31.2 → 3.32.0

package/cjs/components/Dialog/Dialog.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -18,12 +17,11 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _Translate = _interopRequireWildcard(require("../Translate"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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-2021. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/(0, _react.isValidElement)(value);
 
 /**
@@ -69,23 +67,27 @@ const Dialog = _ref => {
   const renderImage = (image, block) => {
     const classPrefix = `${baseClassName}__${block}`;
     if ( /*#__PURE__*/(0, _react.isValidElement)(image)) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classPrefix
-      }, image);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classPrefix,
+        children: image
+      });
     }
     if (typeof image === 'string') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classPrefix
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        className: `${classPrefix}-inner`,
-        src: image
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classPrefix,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: `${classPrefix}-inner`,
+          src: image
+        })
+      });
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classPrefix
-    }, /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
-      className: `${classPrefix}-inner`
-    }, image)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classPrefix,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: `${classPrefix}-inner`,
+        ...image
+      })
+    });
   };
   const getCancelButtonProps = function () {
     let formProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : form;
@@ -97,7 +99,7 @@ const Dialog = _ref => {
     }
     let props = {
       onClick: onCloseWithConfirmation,
-      children: cancelTitle || /*#__PURE__*/_react.default.createElement(_Translate.default, {
+      children: cancelTitle || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         content: "Dialog.cancelButton",
         fallback: "Cancel"
       })
@@ -123,12 +125,15 @@ const Dialog = _ref => {
     let cancel;
     const cancelButtonProps = getCancelButtonProps();
     if (cancelButtonProps) {
-      cancel = /*#__PURE__*/_react.default.createElement(_Button.default, cancelButtonProps);
+      cancel = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ...cancelButtonProps
+      });
     }
     if (buttons || cancel) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: `${baseClassName}__buttons`
-      }, buttons, cancel);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: `${baseClassName}__buttons`,
+        children: [buttons, cancel]
+      });
     }
     return null;
   };
@@ -143,47 +148,62 @@ const Dialog = _ref => {
       form.cancelButton = getCancelButtonProps();
       form.footerClassName = (0, _classnames.default)(form.footerClassName, `${baseClassName}__form-footer`);
       form.applyButton = form.applyButton || false;
-      childrenElement = /*#__PURE__*/_react.default.createElement(_Form.default, form, children);
+      childrenElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
+        ...form,
+        children: children
+      });
     }
   } else {
     childrenElement = children;
   }
-  return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Overlay.default, {
     className: (0, _classnames.default)(baseClassName, className),
     isOpen: isVisible,
     onClose: onCloseWithConfirmation,
     canCloseOnBackdropClick: canClose && closable,
     canCloseOnEscapePress: canClose && closable,
-    size: size
-  }, props), (title || subtitle || actions) && /*#__PURE__*/_react.default.createElement("header", {
-    className: `${baseClassName}__header`
-  }, banner && renderImage(banner, 'banner'), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__header-inner`
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__header-body`
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__header-content`
-  }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
-    level: "2",
-    className: `${baseClassName}__title`
-  }, title) : /*#__PURE__*/_react.default.createElement("div", {
-    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)), (actions || closable) && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__header-actions`
-  }, actions, closable && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    className: `${baseClassName}__header-close`,
-    disabled: !canClose,
-    ghost: true,
-    size: "lg",
-    icon: "cross-mark",
-    onClick: onCloseWithConfirmation
-  }))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__content`
-  }, image && renderImage(image, 'image'), childrenElement, renderButtons()), closingConfirmationDialog);
+    size: size,
+    ...props,
+    children: [(title || subtitle || actions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+      className: `${baseClassName}__header`,
+      children: [banner && renderImage(banner, 'banner'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__header-inner`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${baseClassName}__header-body`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: `${baseClassName}__header-content`,
+            children: [(0, _Translate.isLikeText)(title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
+              level: "2",
+              className: `${baseClassName}__title`,
+              children: title
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${baseClassName}__title`,
+              children: title
+            }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${baseClassName}__subtitle`,
+              children: (0, _Translate.isLikeText)(subtitle) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+                intent: "muted",
+                children: subtitle
+              }) : subtitle
+            })]
+          }), (actions || closable) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: `${baseClassName}__header-actions`,
+            children: [actions, closable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              className: `${baseClassName}__header-close`,
+              disabled: !canClose,
+              ghost: true,
+              size: "lg",
+              icon: "cross-mark",
+              onClick: onCloseWithConfirmation
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${baseClassName}__content`,
+      children: [image && renderImage(image, 'image'), childrenElement, renderButtons()]
+    }), closingConfirmationDialog]
+  });
 };
 Dialog.propTypes = {
   /**

package/cjs/components/Dialog/Dialog.stories.js

@@ -5,25 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WithSideBanner = exports.Basic = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _Button = _interopRequireDefault(require("../Button"));
 var _Dialog = _interopRequireDefault(require("./Dialog"));
 var _placeholder_400x = _interopRequireDefault(require("../../docs/public/placeholders/placeholder_400x400.svg"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-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; }
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 const Basic = args => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setIsOpen(true),
-    "data-id": "trigger"
-  }, 'Open'), /*#__PURE__*/_react.default.createElement(_Dialog.default, (0, _extends2.default)({}, args, {
-    "data-type": "test",
-    isOpen: isOpen,
-    onClose: () => setIsOpen(false)
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: () => setIsOpen(true),
+      "data-id": "trigger",
+      children: 'Open'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      ...args,
+      "data-type": "test",
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false)
+    })]
+  });
 };
 exports.Basic = Basic;
 Basic.args = {
@@ -31,12 +33,14 @@ Basic.args = {
   title: 'Title',
   subtitle: 'Subtitle'
 };
-const WithSideBanner = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+const WithSideBanner = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
+  ...args
+});
 exports.WithSideBanner = WithSideBanner;
 WithSideBanner.args = {
   ...Basic.args,
   size: 'xs',
-  sideBanner: /*#__PURE__*/_react.default.createElement("img", {
+  sideBanner: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     src: _placeholder_400x.default
   }),
   sideBannerContainer: {

package/cjs/components/Drawer/Drawer.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -13,12 +12,12 @@ var _constants = require("../../constants");
 var _Overlay = _interopRequireDefault(require("../Overlay"));
 var _ClosingConfirmation = require("../ClosingConfirmation");
 var _Header = _interopRequireDefault(require("./Header"));
-var _ScrollDirection = _interopRequireDefault(require("./ScrollDirection"));
 var _Form = _interopRequireDefault(require("../Form"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _Translate = require("../Translate");
 var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));
 var _DrawerProgress = _interopRequireDefault(require("./DrawerProgress"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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-2021. Plesk International GmbH. All rights reserved.
@@ -172,7 +171,7 @@ const defaultProps = {
 
 /**
  * `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.
+ * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
  * @since 0.0.65
  */
 const Drawer = _ref => {
@@ -210,15 +209,17 @@ const Drawer = _ref => {
           footer
         } = _ref2;
         return render({
-          content: /*#__PURE__*/_react.default.createElement("div", {
-            className: `${baseClassName}__form`
-          }, content),
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__form`,
+            children: content
+          }),
           footer
         });
       };
-      return /*#__PURE__*/_react.default.createElement(_DrawerProgress.default, (0, _extends2.default)({
-        render: drawerProgressRender
-      }, progress));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerProgress.default, {
+        render: drawerProgressRender,
+        ...progress
+      });
     }
     if (form) {
       if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
@@ -248,7 +249,8 @@ const Drawer = _ref => {
             ...form.cancelButton
           };
         }
-        return /*#__PURE__*/_react.default.createElement(_Form.default, (0, _extends2.default)({}, form, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
+          ...form,
           render: _ref4 => {
             let {
               renderForm,
@@ -258,56 +260,64 @@ const Drawer = _ref => {
               content: renderForm(),
               footer: renderActionButtons()
             });
-          }
-        }), children);
+          },
+          children: children
+        });
       }
     }
     return render({
-      content: /*#__PURE__*/_react.default.createElement("div", {
-        className: `${baseClassName}__inner-body`
-      }, children)
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__inner-body`,
+        children: children
+      })
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Overlay.default, {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--form`]: form
     }, className),
     onClose: onCloseWithConfirmation,
-    canCloseOnBackdropClick: true
-  }, props), takeApart(_ref5 => {
-    let {
-      content,
-      footer
-    } = _ref5;
-    return /*#__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,
-      tabs: tabs
-    }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
-      level: "2",
-      className: `${baseClassName}__title`
-    }, title) : /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__title`
-    }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__subtitle`
-    }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, _ref6 => {
+    canCloseOnBackdropClick: true,
+    ...props,
+    children: [takeApart(_ref5 => {
       let {
-        handleScroll
-      } = _ref6;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: `${baseClassName}__body`,
-        onScroll: handleScroll,
-        ref: scrollableRef
-      }, /*#__PURE__*/_react.default.createElement(_ScrollableElementFormContext.default.Provider, {
-        value: scrollableRef.current
-      }, content));
-    }), footer && /*#__PURE__*/_react.default.createElement("footer", {
-      className: `${baseClassName}__footer`
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__footer-inner`
-    }, footer)));
-  }), closingConfirmationDialog);
+        content,
+        footer
+      } = _ref5;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header.default, {
+          backButton: backButton,
+          hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
+          onClose: onCloseWithConfirmation,
+          tabs: tabs,
+          children: [(0, _Translate.isLikeText)(title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
+            level: "2",
+            className: `${baseClassName}__title`,
+            children: title
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__title`,
+            children: title
+          }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__subtitle`,
+            children: subtitle
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${baseClassName}__body`,
+          ref: scrollableRef,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollableElementFormContext.default.Provider, {
+            value: scrollableRef.current,
+            children: content
+          })
+        }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
+          className: `${baseClassName}__footer`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__footer-inner`,
+            children: footer
+          })
+        })]
+      });
+    }), closingConfirmationDialog]
+  });
 };
 Drawer.propTypes = propTypes;
 Drawer.defaultProps = defaultProps;

package/cjs/components/Drawer/Drawer.stories.js

@@ -5,25 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WithSideBanner = exports.WithForm = exports.WithClosingConfirmation = exports.Basic = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _Button = _interopRequireDefault(require("../Button"));
 var _Drawer = _interopRequireDefault(require("./Drawer"));
 var _placeholder_400x = _interopRequireDefault(require("../../docs/public/placeholders/placeholder_400x400.svg"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-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; }
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 const Basic = args => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setIsOpen(true),
-    "data-id": "trigger"
-  }, 'Open'), /*#__PURE__*/_react.default.createElement(_Drawer.default, (0, _extends2.default)({}, args, {
-    "data-type": "test",
-    isOpen: isOpen,
-    onClose: () => setIsOpen(false)
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: () => setIsOpen(true),
+      "data-id": "trigger",
+      children: 'Open'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+      ...args,
+      "data-type": "test",
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false)
+    })]
+  });
 };
 exports.Basic = Basic;
 Basic.args = {
@@ -31,25 +33,31 @@ Basic.args = {
   title: 'Title',
   subtitle: 'Subtitle'
 };
-const WithForm = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+const WithForm = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
+  ...args
+});
 exports.WithForm = WithForm;
 WithForm.args = {
   ...Basic.args,
   form: {}
 };
-const WithSideBanner = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+const WithSideBanner = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
+  ...args
+});
 exports.WithSideBanner = WithSideBanner;
 WithSideBanner.args = {
   ...Basic.args,
   size: 'xs',
-  sideBanner: /*#__PURE__*/_react.default.createElement("img", {
+  sideBanner: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     src: _placeholder_400x.default
   }),
   sideBannerContainer: {
     background: 'skyblue'
   }
 };
-const WithClosingConfirmation = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+const WithClosingConfirmation = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
+  ...args
+});
 exports.WithClosingConfirmation = WithClosingConfirmation;
 WithClosingConfirmation.args = {
   ...Basic.args,

package/cjs/components/Drawer/DrawerProgress.js

@@ -5,30 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _Button = _interopRequireDefault(require("../Button"));
+var _ButtonContext = require("../Button/ButtonContext");
 var _Translate = _interopRequireDefault(require("../Translate"));
 var _Progress = _interopRequireDefault(require("../Progress"));
 var _ProgressStep = _interopRequireWildcard(require("../ProgressStep"));
 var _constants = require("../../constants");
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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.
 
-const renderAdditionalButtons = buttons => {
-  const buttonProcessing = button => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(button) && button.type === _Button.default) {
-      return /*#__PURE__*/(0, _react.cloneElement)(button, {
-        size: 'lg'
-      });
-    }
-    return button;
-  };
-  return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
-};
+const additionalButtonsConfig = (0, _ButtonContext.getButtonContextValue)({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class DrawerProgress extends _react.Component {
   constructor() {
     super(...arguments);
@@ -119,27 +114,41 @@ class DrawerProgress extends _react.Component {
     const isFailed = status === _ProgressStep.STATUS_ERROR;
     const canCancel = cancelable && !(isFinished || isFailed);
     const hasFooter = !!(buttons || canCancel);
-    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)))));
-    const footer = hasFooter ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__footer`
-    }, renderAdditionalButtons(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;
+    const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__title`,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
+        onStatusChange: this.handleStatusChange,
+        className: `${baseClassName}__progress`,
+        children: steps.map((step, index) =>
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        (0, _jsxRuntime.jsx)(_ProgressStep.default, {
+          ...step
+        }, index.toString()))
+      })]
+    });
+    const footer = hasFooter ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${baseClassName}__footer`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonContext.ButtonContext.Provider, {
+        value: additionalButtonsConfig,
+        children: buttons
+      }), canCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: this.handleCancel,
+        size: "lg",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+          content: "DrawerProgress.cancelButton",
+          fallback: "Cancel"
+        })
+      })]
+    }) : null;
     return typeof render === 'function' ? render({
       content,
       footer
-    }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, content, footer);
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [content, footer]
+    });
   }
 }
 (0, _defineProperty2.default)(DrawerProgress, "defaultProps", {