@plesk/ui-library 3.31.0 → 3.31.2

package/cjs/components/Dialog/Dialog.js

@@ -1,73 +1,57 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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"));
-
 var _constants = require("../../constants");
-
 var _Overlay = _interopRequireDefault(require("../Overlay"));
-
 var _ClosingConfirmation = require("../ClosingConfirmation");
-
 var _Form = _interopRequireDefault(require("../Form"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Heading = _interopRequireDefault(require("../Heading"));
-
 var _Text = _interopRequireDefault(require("../Text"));
-
 var _Translate = _interopRequireWildcard(require("../Translate"));
-
 var _utils = require("../utils");
-
 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);
+
 /**
  * `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] = (0, _react.useState)(isOpen);
   const {
     onCloseWithConfirmation,
@@ -82,16 +66,13 @@ const Dialog = ({
   (0, _react.useEffect)(() => {
     setIsVisible(isOpen);
   }, [isOpen]);
-
   const renderImage = (image, block) => {
     const classPrefix = `${baseClassName}__${block}`;
-
     if ( /*#__PURE__*/(0, _react.isValidElement)(image)) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classPrefix
       }, image);
     }
-
     if (typeof image === 'string') {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classPrefix
@@ -100,23 +81,20 @@ const Dialog = ({
         src: image
       }));
     }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: classPrefix
     }, /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
       className: `${classPrefix}-inner`
     }, image)));
   };
-
-  const getCancelButtonProps = () => {
+  const getCancelButtonProps = function () {
+    let formProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : form;
     if (!closable) {
       return false;
     }
-
-    if (cancelButton === false || form && form.cancelButton === false) {
+    if (cancelButton === false || formProps && formProps.cancelButton === false) {
       return false;
     }
-
     let props = {
       onClick: onCloseWithConfirmation,
       children: cancelTitle || /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -124,54 +102,52 @@ const Dialog = ({
         fallback: "Cancel"
       })
     };
-
-    if (form && isProps(form.cancelButton)) {
-      props = { ...props,
-        ...form.cancelButton
+    if (formProps && isProps(formProps.cancelButton)) {
+      props = {
+        ...props,
+        ...formProps.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.default.createElement(_Button.default, cancelButtonProps);
     }
-
     if (buttons || cancel) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: `${baseClassName}__buttons`
       }, buttons, cancel);
     }
-
     return null;
   };
-
   let childrenElement;
-
   if (form) {
-    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);
+    if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
+      childrenElement = /*#__PURE__*/(0, _react.cloneElement)(form, {
+        cancelButton: getCancelButtonProps(form.props),
+        footerClassName: (0, _classnames.default)(form.props.footerClassName, `${baseClassName}__form-footer`)
+      });
+    } else if (typeof form === 'object') {
+      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);
+    }
   } else {
     childrenElement = children;
   }
-
   return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({
     className: (0, _classnames.default)(baseClassName, className),
     isOpen: isVisible,
@@ -209,26 +185,22 @@ const Dialog = ({
     className: `${baseClassName}__content`
   }, image && renderImage(image, 'image'), childrenElement, renderButtons()), closingConfirmationDialog);
 };
-
 Dialog.propTypes = {
   /**
    * Toggles visibility.
    * @since 0.0.68
    */
   isOpen: _propTypes.default.bool,
-
   /**
    * Banner. Renders in front of content as wide as dialog.
    * @since 0.0.68
    */
   banner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-
   /**
    * 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
@@ -238,103 +210,86 @@ Dialog.propTypes = {
      * Values for css background property
      */
     background: _propTypes.default.string,
-
     /**
      * One of: center, flex-start, flex-end
      */
     align: _propTypes.default.oneOf(['center', 'flex-start', 'flex-end'])
   }),
-
   /**
    * Image. Renders into content.
    * @since 0.0.68
    */
   image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-
   /**
    * Title
    * @since 0.0.68
    */
   title: _propTypes.default.node,
-
   /**
    * The subtitle of the `Dialog`.
    * @since 4.0.0
    */
   subtitle: _propTypes.default.node,
-
   /**
    * Title of "cancel" button
    * @since 0.0.68
    * @deprecated Use `cancelButton` instead.
    */
   cancelTitle: _propTypes.default.node,
-
   /**
    * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
    * @since 3.13.0
    */
   cancelButton: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
-
   /**
    * Buttons except "cancel" button
    * @since 0.0.68
    */
   buttons: _propTypes.default.node,
-
   /**
    * Actions which will be shown in Dialog header
    * @since 1.2.0
    */
   actions: _propTypes.default.node,
-
   /**
    * Wraps children into [Form](#!/Form) if not empty.
    * @since 0.0.68
    */
-  form: _propTypes.default.object,
-
+  form: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.element]),
   /**
    * Dialog width
    * @since 0.0.68
    */
   size: _propTypes.default.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.default.bool,
-
   /**
    * Disable close dialog button
    * @since 4.0.0
    */
   canClose: _propTypes.default.bool,
-
   /**
    * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
    * @since 0.0.68
    */
   onClose: _propTypes.default.func,
-
   /**
    * Whether show or not a confirmation dialog on close.
    * @since 3.21.0
    */
   closingConfirmation: _propTypes.default.bool,
-
   /**
    * Content of the `DialogWindow`.
    * @since 0.0.68
    */
   children: _propTypes.default.node,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * @ignore
    */

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

@@ -1,27 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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 _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; }
-
 // 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, {
@@ -33,18 +25,16 @@ const Basic = args => {
     onClose: () => setIsOpen(false)
   })));
 };
-
 exports.Basic = Basic;
 Basic.args = {
   children: 'Dialog content.',
   title: 'Title',
   subtitle: 'Subtitle'
 };
-
 const WithSideBanner = args => /*#__PURE__*/_react.default.createElement(Basic, args);
-
 exports.WithSideBanner = WithSideBanner;
-WithSideBanner.args = { ...Basic.args,
+WithSideBanner.args = {
+  ...Basic.args,
   size: 'xs',
   sideBanner: /*#__PURE__*/_react.default.createElement("img", {
     src: _placeholder_400x.default

package/cjs/components/Dialog/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _Dialog.default;
   }
 });
-
 var _Dialog = _interopRequireDefault(require("./Dialog"));

package/cjs/components/DistractionFreeModeContext/DistractionFreeModeContext.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 const DistractionFreeModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 DistractionFreeModeContext.displayName = 'DistractionFreeModeContext';
 var _default = DistractionFreeModeContext;

package/cjs/components/DistractionFreeModeContext/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _DistractionFreeModeContext.default;
   }
 });
-
 var _DistractionFreeModeContext = _interopRequireDefault(require("./DistractionFreeModeContext"));