@plesk/ui-library 3.31.1 → 3.31.3

package/esm/components/Button/Button.js

@@ -31,6 +31,7 @@ const oldIconNames = {
 };
 import ResponsiveContext from '../ResponsiveContext';
 import OnDarkContext from '../OnDarkContext';
+import ButtonContext from './ButtonContext';
 const renderIcon = _ref => {
   let {
     baseClassName,
@@ -76,7 +77,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
     baseClassName,
     className,
     component: Tag,
-    size,
+    size: propsSize,
     intent,
     ghost,
     selected: selectedProp,
@@ -97,6 +98,8 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
     return !selectedState;
   };
   const isCollapsed = useContext(ResponsiveContext);
+  const buttonContextConfig = useContext(ButtonContext);
+  const size = propsSize || buttonContextConfig.defaultProps.size;
   const componentProps = {};
   if (Tag === 'button') {
     componentProps.type = 'button';

package/esm/components/Button/ButtonContext.js

@@ -0,0 +1,18 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import React from 'react';
+const defaultValue = {
+  defaultProps: {
+    size: undefined
+  }
+};
+export const ButtonContext = /*#__PURE__*/React.createContext(defaultValue);
+export const getButtonContextValue = value => ({
+  ...defaultValue,
+  ...value,
+  defaultProps: {
+    ...defaultValue.defaultProps,
+    ...(value.defaultProps || {})
+  }
+});
+export default ButtonContext;

package/esm/components/ComboBox/ComboBoxOption.js

@@ -4,8 +4,7 @@ import React from 'react';
 /**
  * `ComboBoxOption` is a part of [ComboBox](#!/ComboBox) component.
  * @since 2.6.0
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ComboBoxOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition

package/esm/components/Dialog/Dialog.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
-import React, { isValidElement, useEffect, useState } from 'react';
+import React, { isValidElement, cloneElement, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
@@ -77,11 +77,12 @@ const Dialog = _ref => {
       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 = {
@@ -91,10 +92,10 @@ const Dialog = _ref => {
         fallback: "Cancel"
       })
     };
-    if (form && isProps(form.cancelButton)) {
+    if (formProps && isProps(formProps.cancelButton)) {
       props = {
         ...props,
-        ...form.cancelButton
+        ...formProps.cancelButton
       };
     }
     if (isProps(cancelButton)) {
@@ -123,10 +124,17 @@ const Dialog = _ref => {
   };
   let childrenElement;
   if (form) {
-    form.cancelButton = getCancelButtonProps();
-    form.footerClassName = classNames(form.footerClassName, `${baseClassName}__form-footer`);
-    form.applyButton = form.applyButton || false;
-    childrenElement = /*#__PURE__*/React.createElement(Form, form, children);
+    if ( /*#__PURE__*/isValidElement(form)) {
+      childrenElement = /*#__PURE__*/cloneElement(form, {
+        cancelButton: getCancelButtonProps(form.props),
+        footerClassName: classNames(form.props.footerClassName, `${baseClassName}__form-footer`)
+      });
+    } else if (typeof form === 'object') {
+      form.cancelButton = getCancelButtonProps();
+      form.footerClassName = classNames(form.footerClassName, `${baseClassName}__form-footer`);
+      form.applyButton = form.applyButton || false;
+      childrenElement = /*#__PURE__*/React.createElement(Form, form, children);
+    }
   } else {
     childrenElement = children;
   }
@@ -237,7 +245,7 @@ Dialog.propTypes = {
    * Wraps children into [Form](#!/Form) if not empty.
    * @since 0.0.68
    */
-  form: PropTypes.object,
+  form: PropTypes.oneOfType([PropTypes.object, PropTypes.element]),
   /**
    * Dialog width
    * @since 0.0.68

package/esm/components/Drawer/Drawer.js

@@ -8,7 +8,6 @@ import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
 import { useClosingConfirmation } from '../ClosingConfirmation';
 import Header from './Header';
-import ScrollDirection from './ScrollDirection';
 import Form from '../Form';
 import Heading from '../Heading';
 import { isLikeText } from '../Translate';
@@ -163,7 +162,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 => {
@@ -282,18 +281,12 @@ const Drawer = _ref => {
       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", {
+    }, subtitle)), /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__body`,
+      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`

package/esm/components/Drawer/DrawerProgress.js

@@ -2,24 +2,19 @@ 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 React, { Component, Fragment } from 'react';
 import Button from '../Button';
+import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 import Translate from '../Translate';
 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) {
-      return /*#__PURE__*/cloneElement(button, {
-        size: 'lg'
-      });
-    }
-    return button;
-  };
-  return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
-};
+const additionalButtonsConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class DrawerProgress extends Component {
   constructor() {
     super(...arguments);
@@ -120,7 +115,9 @@ class DrawerProgress extends Component {
     }, step)))));
     const footer = hasFooter ? /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__footer`
-    }, renderAdditionalButtons(buttons), canCancel && /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(ButtonContext.Provider, {
+      value: additionalButtonsConfig
+    }, buttons), canCancel && /*#__PURE__*/React.createElement(Button, {
       onClick: this.handleCancel,
       size: "lg"
     }, /*#__PURE__*/React.createElement(Translate, {

package/esm/components/Form/Form.js

@@ -2,14 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
-import React, { createElement, Component, cloneElement, isValidElement, useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { Component, cloneElement, isValidElement, useRef, forwardRef, useImperativeHandle } from 'react';
 import { getIn, setIn } from './utils';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
+import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 import FormField from '../FormField';
 import Section from '../Section';
 import Translate from '../Translate';
@@ -17,6 +16,11 @@ import FormContext from './FormContext';
 import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import DisabledContext from './DisabledContext';
 import { safeInvoke } from '../utils';
+const actionButtonsConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class Form extends Component {
   constructor() {
     var _this;
@@ -190,7 +194,9 @@ class Form extends Component {
       } = this.props;
       return /*#__PURE__*/React.createElement(Section, {
         className: classNames(`${baseClassName}__footer`, footerClassName)
-      }, /*#__PURE__*/React.createElement(FormField, null, this.renderSubmitButton({
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(ButtonContext.Provider, {
+        value: actionButtonsConfig
+      }, this.renderSubmitButton({
         submitButton,
         state
       }), this.renderApplyButton({
@@ -201,7 +207,7 @@ class Form extends Component {
       }), this.renderCancelButton({
         cancelButton,
         state
-      })));
+      }))));
     });
   }
   static getDerivedStateFromProps(props, state) {
@@ -262,7 +268,6 @@ class Form extends Component {
       return null;
     }
     return /*#__PURE__*/React.createElement(Button, _extends({
-      size: "lg",
       intent: "primary",
       state: state === 'submit' ? 'loading' : undefined,
       disabled: !!state,
@@ -271,9 +276,9 @@ class Form extends Component {
       ,
       children: /*#__PURE__*/React.createElement(Translate, {
         content: "Form.submitButton",
-        fallback: "OK"
+        fallback: "Save"
       })
-    }, submitButton));
+    }, typeof submitButton === 'object' ? submitButton : {}));
   }
   renderApplyButton(_ref5) {
     let {
@@ -283,18 +288,18 @@ class Form extends Component {
     if (!applyButton) {
       return null;
     }
-    return /*#__PURE__*/createElement(Button, {
-      size: 'lg',
-      intent: 'primary',
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      intent: "primary",
       state: state === 'apply' ? 'loading' : undefined,
       disabled: !!state,
-      onClick: this.handleApplyClick,
+      onClick: this.handleApplyClick
+      // eslint-disable-next-line react/no-children-prop
+      ,
       children: /*#__PURE__*/React.createElement(Translate, {
         content: "Form.applyButton",
         fallback: "Apply"
-      }),
-      ...applyButton
-    });
+      })
+    }, typeof applyButton === 'object' ? applyButton : {}));
   }
   renderCancelButton(_ref6) {
     let {
@@ -304,16 +309,16 @@ class Form extends Component {
     if (!cancelButton) {
       return null;
     }
-    return /*#__PURE__*/createElement(Button, {
-      size: 'lg',
+    return /*#__PURE__*/React.createElement(Button, _extends({
       state: state === 'cancel' ? 'loading' : undefined,
-      disabled: !!state,
+      disabled: !!state
+      // eslint-disable-next-line react/no-children-prop
+      ,
       children: /*#__PURE__*/React.createElement(Translate, {
         content: "Form.cancelButton",
         fallback: "Cancel"
-      }),
-      ...cancelButton
-    });
+      })
+    }, typeof cancelButton === 'object' ? cancelButton : {}));
   }
   renderAdditionalButtons(_ref7) {
     let {
@@ -328,9 +333,6 @@ class Form extends Component {
           const props = {
             className: classNames(element.props.className, `${baseClassName}__additional-button`)
           };
-          if (element.type === Button) {
-            props.size = 'lg';
-          }
           return /*#__PURE__*/cloneElement(element, props);
         }
         return element;

package/esm/components/Link/Link.js

@@ -7,11 +7,13 @@ import { CLS_PREFIX } from '../../constants';
 import OnDarkContext from '../OnDarkContext';
 import { wrapFunction } from '../utils';
 import Icon from '../Icon';
+
+// eslint-disable-next-line space-infix-ops
+
 /**
  * FIXME: With the following code all @ts-ignore comments can be removed, but react-docgen cannot parse it.
  * const Link = <P extends any>({ ... }: LinkProps<P>) => {
  */
-
 /**
  * `Link` is used for navigation purposes.
  * @since 1.9.0

package/esm/components/List/List.js

@@ -365,14 +365,7 @@ class List extends Component {
   }
   componentDidMount() {
     if (this.props.reorderable) {
-      import( /* webpackChunkName: "react-movable" */'@plesk/react-movable').then(_ref7 => {
-        let {
-          List: ReorderableList
-        } = _ref7;
-        this.setState({
-          ReorderableList
-        });
-      });
+      this.applyReorderableList();
     }
   }
   componentDidUpdate(prevProps) {
@@ -388,6 +381,19 @@ class List extends Component {
       });
       this.needScroll = false;
     }
+    if (prevProps.reorderable !== this.props.reorderable && this.props.reorderable) {
+      this.applyReorderableList();
+    }
+  }
+  applyReorderableList() {
+    import( /* webpackChunkName: "react-movable" */'@plesk/react-movable').then(_ref7 => {
+      let {
+        List: ReorderableList
+      } = _ref7;
+      this.setState({
+        ReorderableList
+      });
+    });
   }
   getData() {
     const {

package/esm/components/List/ListEmptyView.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import classNames from 'classnames';
@@ -8,6 +8,7 @@ import Translate from '../Translate';
 import empty from './images/default.png';
 import filtered from './images/filtered.png';
 import { CLS_PREFIX } from '../../constants';
+import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 const createImage = (baseClassName, image, reason) => {
   if (image === undefined) {
     image = reason === 'filtered' ? filtered : empty;
@@ -53,6 +54,11 @@ const createDescription = (baseClassName, description, reason) => {
     className: `${baseClassName}__description`
   }, description);
 };
+const buttonConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 
 /**
  * `ListEmptyView` component is used for displaying "empty" state of [List](#!/List)
@@ -76,6 +82,8 @@ const ListEmptyView = _ref => {
     className: `${baseClassName}__body`
   }, createTitle(baseClassName, title, reason), createDescription(baseClassName, description, reason), actions && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__actions`
-  }, actions)));
+  }, /*#__PURE__*/React.createElement(ButtonContext.Provider, {
+    value: buttonConfig
+  }, actions))));
 };
 export default ListEmptyView;

package/esm/components/Markdown/Markdown.js

@@ -25,9 +25,7 @@ const Markdown = _ref => {
       [`${baseClassName}--compact`]: compact
     }, className),
     dangerouslySetInnerHTML: {
-      __html: marked(children, {
-        sanitize: true
-      })
+      __html: marked(children)
     }
   }, props));
 };

package/esm/components/Select/SelectOption.js

@@ -4,8 +4,7 @@ import React from 'react';
 /**
  * `SelectOption` is a part of [SelectOptionGroup](#!/SelectOptionGroup) component.
  * @since 2.3.0
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SelectOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition

package/esm/components/Spot/SpotPopup.js

@@ -9,6 +9,9 @@ import Text from '../Text';
 import Translate from '../Translate';
 import Focuser from '../Overlay/Focuser';
 import { safeInvoke } from '../utils';
+
+// TODO: Use SpotSpotProps['popup'] instead of copypaste
+
 const SpotPopup = _ref => {
   let {
     baseClassName = `${CLS_PREFIX}spot-popup`,

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2018. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.31.1";
+const version = "3.31.3";
 export * from './publicPath';
 export { version };
 export * from './utils';