@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessage.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import ContentLoader from '../ContentLoader';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `ExtendedStatusMessage` component is similar to regular [StatusMessage](#!/StatusMessage)
  * but it is used when the message itself is the primary content on the page.
@@ -20,20 +20,25 @@ const ExtendedStatusMessage = _ref => {
     loading,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__container`
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, {
-      [`${baseClassName}--${intent}`]: intent,
-      [`${baseClassName}--loading`]: loading
-    }, className)
-  }, props), image ? /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__image`
-  }, image) : null, /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__body`
-  }, children), loading && /*#__PURE__*/React.createElement(ContentLoader, {
-    overlay: true,
-    text: loading === true ? null : loading
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: `${baseClassName}__container`,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames(baseClassName, {
+        [`${baseClassName}--${intent}`]: intent,
+        [`${baseClassName}--loading`]: loading
+      }, className),
+      ...props,
+      children: [image ? /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__image`,
+        children: image
+      }) : null, /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__body`,
+        children: children
+      }), loading && /*#__PURE__*/_jsx(ContentLoader, {
+        overlay: true,
+        text: loading === true ? null : loading
+      })]
+    })
+  });
 };
 export default ExtendedStatusMessage;

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageActions.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `ExtendedStatusMessageActions` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
  * @since 0.0.35
@@ -16,8 +15,10 @@ const ExtendedStatusMessageActions = _ref => {
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(`${baseClassName}__actions`, className)
-  }, props), children);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(`${baseClassName}__actions`, className),
+    ...props,
+    children: children
+  });
 };
 export default ExtendedStatusMessageActions;

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageDescription.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `ExtendedStatusMessageDescription` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
  * @since 0.0.35
@@ -16,8 +15,10 @@ const ExtendedStatusMessageDescription = _ref => {
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(`${baseClassName}__description`, className)
-  }, props), children);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(`${baseClassName}__description`, className),
+    ...props,
+    children: children
+  });
 };
 export default ExtendedStatusMessageDescription;

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageSeparator.js

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `ExtendedStatusMessageSeparator` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
  * @since 0.0.35
@@ -13,8 +12,9 @@ const ExtendedStatusMessageSeparator = _ref => {
     className,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("hr", _extends({
-    className: classNames(className)
-  }, props));
+  return /*#__PURE__*/_jsx("hr", {
+    className: classNames(className),
+    ...props
+  });
 };
 export default ExtendedStatusMessageSeparator;

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessageTitle.js

@@ -1,10 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Heading from '../Heading';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `ExtendedStatusMessageTitle` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
  * @since 0.0.35
@@ -17,9 +16,11 @@ const ExtendedStatusMessageTitle = _ref => {
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement(Heading, _extends({
+  return /*#__PURE__*/_jsx(Heading, {
     level: 3,
-    className: classNames(`${baseClassName}__title`, className)
-  }, props), children);
+    className: classNames(`${baseClassName}__title`, className),
+    ...props,
+    children: children
+  });
 };
 export default ExtendedStatusMessageTitle;

package/esm/components/Figure/Figure.js

@@ -1,10 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Figure component.
  * @since 0.0.42
@@ -18,14 +19,17 @@ const Figure = _ref => {
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("figure", _extends({
-    className: classNames(baseClassName, className)
-  }, props), children, href && /*#__PURE__*/React.createElement("a", {
-    href: href,
-    className: classNames(`${baseClassName}__overlay`, `${baseClassName}__overlay--cover`, `${baseClassName}__action`)
-  }), caption && /*#__PURE__*/React.createElement("figcaption", {
-    className: classNames(`${baseClassName}__overlay`, `${baseClassName}__overlay--bottom`)
-  }, caption));
+  return /*#__PURE__*/_jsxs("figure", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: [children, href && /*#__PURE__*/_jsx("a", {
+      href: href,
+      className: classNames(`${baseClassName}__overlay`, `${baseClassName}__overlay--cover`, `${baseClassName}__action`)
+    }), caption && /*#__PURE__*/_jsx("figcaption", {
+      className: classNames(`${baseClassName}__overlay`, `${baseClassName}__overlay--bottom`),
+      children: caption
+    })]
+  });
 };
 Figure.propTypes = {
   /**

package/esm/components/FocusTrap/FocusTrap.js

@@ -1,9 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { useRef, useMemo, forwardRef } from 'react';
+import { useRef, useMemo, forwardRef } from 'react';
 import { createFocusManager, mergeRefs, wrapFunction } from '../utils';
 import { isFocusable } from '../Overlay/Focuser';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const canSkip = node => node instanceof HTMLElement && node.dataset && node.dataset.skipAutoFocus;
 const createFocusStrategy = checkSkipAutoFocusRef => {
   const elements = [];
@@ -97,17 +98,19 @@ const FocusTrap = (_ref, ref) => {
         break;
     }
   });
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", {
     onFocus: handleFocus,
     ref: mergeRefs(rootRef, ref),
-    tabIndex: -1
-  }, props), /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: trapBeforeRef
-  }), children, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: trapAfterRef
-  }));
+    tabIndex: -1,
+    ...props,
+    children: [/*#__PURE__*/_jsx("div", {
+      tabIndex: 0,
+      ref: trapBeforeRef
+    }), children, /*#__PURE__*/_jsx("div", {
+      tabIndex: 0,
+      ref: trapAfterRef
+    })]
+  });
 };
 FocusTrap.displayName = 'FocusTrap';
 export default /*#__PURE__*/forwardRef(FocusTrap);

package/esm/components/Form/Form.js

@@ -1,15 +1,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 { 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 +15,13 @@ import FormContext from './FormContext';
 import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import DisabledContext from './DisabledContext';
 import { safeInvoke } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const actionButtonsConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class Form extends Component {
   constructor() {
     var _this;
@@ -27,9 +32,7 @@ class Form extends Component {
       vertical: this.props.vertical || false,
       requiredFields: [],
       formContext: {
-        getValues: () => {
-          return this.state.values;
-        },
+        getValues: () => this.state.values,
         getValue: (name, def) => {
           if (this.state.values) {
             return getIn(this.state.values, name, def);
@@ -146,37 +149,43 @@ class Form extends Component {
         vertical,
         ...props
       } = _this.props;
-      return /*#__PURE__*/React.createElement(FormContext.Provider, {
-        value: _this.state.formContext
-      }, /*#__PURE__*/React.createElement(VerticalContext.Provider, {
-        value: _this.state.vertical
-      }, /*#__PURE__*/React.createElement(DisabledContext.Provider, {
-        value: !!state
-      }, /*#__PURE__*/React.createElement(Measure, {
-        onResize: _this.handleResize,
-        innerRef: innerRef,
-        bounds: true
-      }, _ref3 => {
-        let {
-          measureRef
-        } = _ref3;
-        return /*#__PURE__*/React.createElement("form", _extends({
-          ref: measureRef,
-          className: classNames(baseClassName, {
-            [`${baseClassName}--has-required`]: _this.hasRequiredField()
-          }, className),
-          onSubmit: _this.handleSubmit
-        }, props), children, actionButtons, /*#__PURE__*/React.createElement("input", {
-          type: "image",
-          src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
-          style: {
-            border: 0,
-            height: 0,
-            width: 0,
-            position: 'absolute'
-          }
-        }));
-      }))));
+      return /*#__PURE__*/_jsx(FormContext.Provider, {
+        value: _this.state.formContext,
+        children: /*#__PURE__*/_jsx(VerticalContext.Provider, {
+          value: _this.state.vertical,
+          children: /*#__PURE__*/_jsx(DisabledContext.Provider, {
+            value: !!state,
+            children: /*#__PURE__*/_jsx(Measure, {
+              onResize: _this.handleResize,
+              innerRef: innerRef,
+              bounds: true,
+              children: _ref3 => {
+                let {
+                  measureRef
+                } = _ref3;
+                return /*#__PURE__*/_jsxs("form", {
+                  ref: measureRef,
+                  className: classNames(baseClassName, {
+                    [`${baseClassName}--has-required`]: _this.hasRequiredField()
+                  }, className),
+                  onSubmit: _this.handleSubmit,
+                  ...props,
+                  children: [children, actionButtons, /*#__PURE__*/_jsx("input", {
+                    type: "image",
+                    src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
+                    style: {
+                      border: 0,
+                      height: 0,
+                      width: 0,
+                      position: 'absolute'
+                    }
+                  })]
+                });
+              }
+            })
+          })
+        })
+      });
     });
     _defineProperty(this, "renderActionButtons", () => {
       const {
@@ -188,20 +197,26 @@ class Form extends Component {
         baseClassName,
         footerClassName
       } = this.props;
-      return /*#__PURE__*/React.createElement(Section, {
-        className: classNames(`${baseClassName}__footer`, footerClassName)
-      }, /*#__PURE__*/React.createElement(FormField, null, this.renderSubmitButton({
-        submitButton,
-        state
-      }), this.renderApplyButton({
-        applyButton,
-        state
-      }), this.renderAdditionalButtons({
-        additionalButtons
-      }), this.renderCancelButton({
-        cancelButton,
-        state
-      })));
+      return /*#__PURE__*/_jsx(Section, {
+        className: classNames(`${baseClassName}__footer`, footerClassName),
+        children: /*#__PURE__*/_jsx(FormField, {
+          children: /*#__PURE__*/_jsxs(ButtonContext.Provider, {
+            value: actionButtonsConfig,
+            children: [this.renderSubmitButton({
+              submitButton,
+              state
+            }), this.renderApplyButton({
+              applyButton,
+              state
+            }), this.renderAdditionalButtons({
+              additionalButtons
+            }), this.renderCancelButton({
+              cancelButton,
+              state
+            })]
+          })
+        })
+      });
     });
   }
   static getDerivedStateFromProps(props, state) {
@@ -261,19 +276,19 @@ class Form extends Component {
     if (!submitButton) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(Button, _extends({
-      size: "lg",
+    return /*#__PURE__*/_jsx(Button, {
       intent: "primary",
       state: state === 'submit' ? 'loading' : undefined,
       disabled: !!state,
       onClick: this.handleSubmitClick
       // eslint-disable-next-line react/no-children-prop
       ,
-      children: /*#__PURE__*/React.createElement(Translate, {
+      children: /*#__PURE__*/_jsx(Translate, {
         content: "Form.submitButton",
         fallback: "Save"
-      })
-    }, submitButton));
+      }),
+      ...(typeof submitButton === 'object' ? submitButton : {})
+    });
   }
   renderApplyButton(_ref5) {
     let {
@@ -283,17 +298,18 @@ class Form extends Component {
     if (!applyButton) {
       return null;
     }
-    return /*#__PURE__*/createElement(Button, {
-      size: 'lg',
-      intent: 'primary',
+    return /*#__PURE__*/_jsx(Button, {
+      intent: "primary",
       state: state === 'apply' ? 'loading' : undefined,
       disabled: !!state,
-      onClick: this.handleApplyClick,
-      children: /*#__PURE__*/React.createElement(Translate, {
+      onClick: this.handleApplyClick
+      // eslint-disable-next-line react/no-children-prop
+      ,
+      children: /*#__PURE__*/_jsx(Translate, {
         content: "Form.applyButton",
         fallback: "Apply"
       }),
-      ...applyButton
+      ...(typeof applyButton === 'object' ? applyButton : {})
     });
   }
   renderCancelButton(_ref6) {
@@ -304,15 +320,16 @@ class Form extends Component {
     if (!cancelButton) {
       return null;
     }
-    return /*#__PURE__*/createElement(Button, {
-      size: 'lg',
+    return /*#__PURE__*/_jsx(Button, {
       state: state === 'cancel' ? 'loading' : undefined,
-      disabled: !!state,
-      children: /*#__PURE__*/React.createElement(Translate, {
+      disabled: !!state
+      // eslint-disable-next-line react/no-children-prop
+      ,
+      children: /*#__PURE__*/_jsx(Translate, {
         content: "Form.cancelButton",
         fallback: "Cancel"
       }),
-      ...cancelButton
+      ...(typeof cancelButton === 'object' ? cancelButton : {})
     });
   }
   renderAdditionalButtons(_ref7) {
@@ -328,9 +345,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;
@@ -361,7 +375,7 @@ class Form extends Component {
  */
 _defineProperty(Form, "defaultProps", {
   children: undefined,
-  requiredMark: /*#__PURE__*/React.createElement("span", {
+  requiredMark: /*#__PURE__*/_jsx("span", {
     className: `${CLS_PREFIX}form__required`
   }),
   hideRequiredLegend: false,
@@ -391,9 +405,10 @@ const RefForwardingForm = /*#__PURE__*/forwardRef((props, ref) => {
       }));
     }
   }));
-  return /*#__PURE__*/React.createElement(Form, _extends({
-    innerRef: innerRef
-  }, props));
+  return /*#__PURE__*/_jsx(Form, {
+    innerRef: innerRef,
+    ...props
+  });
 });
 RefForwardingForm.displayName = 'Form';
 export default RefForwardingForm;

package/esm/components/Form/Form.stories.js

@@ -1,28 +1,27 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Form from './Form';
 import FormFieldText from '../FormFieldText';
 import FormFieldPassword from '../FormFieldPassword';
 import FormFieldCheckbox from '../FormFieldCheckbox';
-export const Basic = args => /*#__PURE__*/React.createElement(Form, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Form, {
+  ...args
+});
 Basic.args = {
   values: {
     field1: 'Value 1',
     field2: 'Value 2',
     field3: true
   },
-  children: [/*#__PURE__*/React.createElement(FormFieldText, {
-    key: "1",
+  children: [/*#__PURE__*/_jsx(FormFieldText, {
     label: "Field 1",
     name: "field1"
-  }), /*#__PURE__*/React.createElement(FormFieldPassword, {
-    key: "2",
+  }, "1"), /*#__PURE__*/_jsx(FormFieldPassword, {
     label: "Field 2",
     name: "field2"
-  }), /*#__PURE__*/React.createElement(FormFieldCheckbox, {
-    key: "3",
+  }, "2"), /*#__PURE__*/_jsx(FormFieldCheckbox, {
     label: "Field 3",
     name: "field3"
-  })]
+  }, "3")]
 };