@plesk/ui-library 3.25.6 → 3.27.0

package/cjs/components/Panel/Panel.js

@@ -17,6 +17,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _constants = require("../../constants");
 
+var _reactTransitionGroup = require("react-transition-group");
+
 var _Translate = require("../Translate");
 
 var _Heading = _interopRequireDefault(require("../Heading"));
@@ -29,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
 
@@ -92,13 +94,21 @@ class Panel extends _react.Component {
       collapsed
     } = this.state;
     const handleToggle = collapsible ? this.handleToggle : undefined;
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    const rootRef = /*#__PURE__*/(0, _react.createRef)();
+    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      classNames: `${baseClassName}-`,
+      in: !collapsed,
+      timeout: 300,
+      nodeRef: rootRef
+    }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--collapsible`]: collapsible,
         [`${baseClassName}--collapsed`]: collapsed,
         [`${baseClassName}--expanded`]: !collapsed
       }, className)
-    }, props), title && /*#__PURE__*/_react.default.createElement("div", {
+    }, props, {
+      ref: rootRef
+    }), title && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__header`,
       onClick: handleToggle
     }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
@@ -117,7 +127,7 @@ class Panel extends _react.Component {
       onClick: handleToggle
     }))), /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__content`
-    }, children));
+    }, children)));
   }
 
 }

package/cjs/components/Popper/Popper.js

@@ -33,8 +33,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /* eslint-disable react/no-deprecated */
 
-/**
- * `Popper` component.
+/**
+ * `Popper` component.
  */
 class Popper extends _react.Component {
   constructor(...args) {
@@ -209,75 +209,75 @@ class Popper extends _react.Component {
 }
 
 Popper.propTypes = {
-  /**
-   * Whether show popper content.
+  /**
+   * Whether show popper content.
    */
   show: _propTypes.default.bool,
 
-  /**
-   * Content of the `Popper`.
+  /**
+   * Content of the `Popper`.
    */
   children: _propTypes.default.node,
 
-  /**
-   * Target for popper.
+  /**
+   * Target for popper.
    */
   target: _propTypes.default.any.isRequired,
 
-  /**
-   * A React reference to the DOM element that needs for calculating the position of the popup.
+  /**
+   * A React reference to the DOM element that needs for calculating the position of the popup.
    */
   targetRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(HTMLElement)
   })]),
 
-  /**
-   * Arrow element of popper
+  /**
+   * Arrow element of popper
    */
   arrow: _propTypes.default.element,
 
-  /**
-   * Placement for popper.
+  /**
+   * Placement for popper.
    */
   placement: _propTypes.default.oneOf(['auto', 'auto-start', 'auto-end', 'auto-top', 'auto-right', 'auto-bottom', 'auto-left', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
 
-  /**
-   * The behavior used to change the popper's placement.
+  /**
+   * The behavior used to change the popper's placement.
    */
   behavior: _propTypes.default.oneOfType([_propTypes.default.oneOf(['flip', 'clockwise', 'counterclockwise']), _propTypes.default.arrayOf(_propTypes.default.string)]),
 
-  /**
-   * Shift your popper on both axis.
+  /**
+   * Shift your popper on both axis.
    */
   offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
-  /**
-   * Update callback function
+  /**
+   * Update callback function
    */
   onUpdate: _propTypes.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * zIndex value.
+  /**
+   * zIndex value.
    */
   zIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 
-  /**
-   * Boundaries element for preventOverflow property.
+  /**
+   * Boundaries element for preventOverflow property.
    */
   boundariesElement: _propTypes.default.oneOfType([_propTypes.default.oneOf(['scrollParent', 'window', 'viewport']), _propTypes.default.instanceOf(HTMLElement)]),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   style: _propTypes.default.object
 };

package/cjs/components/ProgressStep/ProgressStep.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 const STATUS_NOT_STARTED = 'not_started';
 exports.STATUS_NOT_STARTED = STATUS_NOT_STARTED;
 const STATUS_RUNNING = 'running';
@@ -64,39 +64,39 @@ const ProgressStep = ({
   switch (status) {
     case STATUS_NOT_STARTED:
       intent = 'inactive';
-      icon = false;
+      icon = 'dot';
       break;
 
     case STATUS_RUNNING:
-      intent = 'info';
-      icon = false;
+      intent = false;
+      icon = 'dot';
       break;
 
     case STATUS_DONE:
       intent = 'success';
-      icon = 'check-mark';
+      icon = 'check-mark-circle-filled';
       break;
 
     case STATUS_WARNING:
       intent = 'warning';
-      icon = 'triangle-exclamation-mark';
+      icon = 'triangle-exclamation-mark-filled';
       break;
 
     case STATUS_ERROR:
       intent = 'danger';
-      icon = 'exclamation-mark-circle';
+      icon = 'exclamation-mark-circle-filled';
       break;
 
     case STATUS_CANCELED:
       progress = 0;
       intent = 'inactive';
-      icon = 'cross-mark';
+      icon = 'cross-mark-circle-filled';
       break;
   }
 
   icon = _Icon.default.create(icon, {
     className: `${baseClassName}__icon`,
-    size: _Icon.ICON_SIZE_12,
+    size: _Icon.ICON_SIZE_16,
     intent
   });
 
@@ -114,19 +114,21 @@ const ProgressStep = ({
     className: `${baseClassName}__media`
   }, icon), /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__body`
-  }, (title || statusText) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (title || statusText || _react.Children.toArray(children).length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__labels`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${baseClassName}__labels-body`
   }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__title`
-  }, title), statusText && /*#__PURE__*/_react.default.createElement("div", {
+  }, title), _react.Children.toArray(children).length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${baseClassName}__content`
+  }, children) : null), statusText && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__status`
   }, statusText)), STATUS_RUNNING === status && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     className: `${baseClassName}__progress`,
     intent: "info",
     progress: progress
-  }), _react.Children.toArray(children).length ? /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__content`
-  }, children) : null));
+  })));
 };
 
 ProgressStep.propTypes = {

package/cjs/components/Section/Section.js

@@ -29,6 +29,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _VerticalContext = _interopRequireWildcard(require("../VerticalContext"));
 
+var _FormContext = _interopRequireDefault(require("../Form/FormContext"));
+
 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; }
@@ -36,23 +38,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
-const getVertical = (props, verticalContext) => {
-  if (props.vertical !== null && props.vertical !== undefined) {
-    return props.vertical;
-  }
+const getErrorsForChildren = (form, children) => {
+  let errors = {};
 
-  if (verticalContext !== undefined) {
-    return verticalContext;
-  }
+  _react.Children.forEach(children, child => {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      return;
+    }
 
-  return undefined;
-};
-/**
- * `Section` component is used for dividing of complex content into groups for better readability
- * and comprehension of the presented information.
- * @since 0.0.54
- */
+    if (child.props.name) {
+      errors = { ...errors,
+        ...form.getErrors(child.props.name)
+      };
+    }
 
+    if (child.props.children) {
+      errors = { ...errors,
+        ...getErrorsForChildren(form, child.props.children)
+      };
+    }
+  });
+
+  return errors;
+};
 
 class Section extends _react.Component {
   constructor(...args) {
@@ -63,9 +71,7 @@ class Section extends _react.Component {
     (0, _defineProperty2.default)(this, "handleResize", ({
       bounds
     }) => {
-      const vertical = getVertical(this.props, this.context);
-
-      if (vertical !== undefined) {
+      if (this.props.vertical !== undefined) {
         return;
       }
 
@@ -82,16 +88,24 @@ class Section extends _react.Component {
         collapsed
       }) => ({
         collapsed: !collapsed
-      }));
+      }), () => {
+        if (this.props.onToggle) {
+          this.props.onToggle(this.state.collapsed);
+        }
+      });
     });
   }
 
   static getDerivedStateFromProps(props, state) {
     const {
-      collapsed
+      collapsible,
+      collapsed,
+      form,
+      children
     } = props;
     const {
-      prevCollapsed
+      prevCollapsed,
+      prevErrors
     } = state;
     const nextState = {};
 
@@ -100,6 +114,17 @@ class Section extends _react.Component {
     }
 
     nextState.prevCollapsed = collapsed;
+
+    if (collapsible && form) {
+      const errors = getErrorsForChildren(form, children);
+
+      if (JSON.stringify(errors) !== JSON.stringify(prevErrors) && Object.keys(errors).length > 0) {
+        nextState.collapsed = false;
+      }
+
+      nextState.prevErrors = errors;
+    }
+
     return nextState;
   }
 
@@ -178,13 +203,14 @@ class Section extends _react.Component {
       collapsed,
       onTitleChange,
       onClose,
+      onToggle,
       buttons,
       vertical: verticalProp,
       children,
+      form,
       ...props
     } = this.props;
-    let vertical = getVertical(this.props, this.context);
-    vertical = vertical === undefined ? this.state.vertical : vertical;
+    const vertical = verticalProp === undefined ? this.state.vertical : verticalProp;
     return /*#__PURE__*/_react.default.createElement(_VerticalContext.default.Provider, {
       value: vertical
     }, /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
@@ -221,85 +247,119 @@ class Section extends _react.Component {
 
 }
 
-Section.propTypes = {
-  /**
-   * Title of the section.
-   * @since 0.0.54
+const propTypes = {
+  /**
+   * Title of the section.
+   * @since 0.0.54
    */
   title: _propTypes.default.node,
 
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.54
+  /**
+   * Visual intent color to apply to component.
+   * @since 0.0.54
    */
   intent: _propTypes.default.oneOf(['danger', 'warning', 'success', 'inactive']),
 
-  /**
-   * Is section collapsible.
-   * @since 0.0.54
+  /**
+   * Is section collapsible.
+   * @since 0.0.54
    */
   collapsible: _propTypes.default.bool,
 
-  /**
-   * Is section collapsed now.
-   * @since 0.0.54
+  /**
+   * Is section collapsed now.
+   * @since 0.0.54
    */
   collapsed: _propTypes.default.bool,
 
-  /**
-   * Event handler of title change with inline editing form.
-   * @since 0.0.54
+  /**
+   * Event handler of title change with inline editing form.
+   * @since 0.0.54
    */
   onTitleChange: _propTypes.default.func,
 
-  /**
-   * Event handler of closing section with X-sign at the right.
-   * @since 0.0.54
+  /**
+   * Event handler of closing section with X-sign at the right.
+   * @since 0.0.54
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * Array of custom section action button at the right.
-   * @since 0.0.54
+  /**
+   * A callback executed when the section collapsing.
+   * @since 3.26.0
+   */
+  onToggle: _propTypes.default.func,
+
+  /**
+   * Array of custom section action button at the right.
+   * @since 0.0.54
    */
   buttons: _propTypes.default.arrayOf(_propTypes.default.element),
 
-  /**
-   * Vertical or horizontal section view.
-   * Section view will be automatically switched if this parameter is not specified explicitly.
-   * @since 0.3.0
+  /**
+   * Vertical or horizontal section view.
+   * Section view will be automatically switched if this parameter is not specified explicitly.
+   * @since 0.3.0
    */
   vertical: _propTypes.default.bool,
 
-  /**
-   * Content of the `Section`.
-   * @since 0.0.54
+  /**
+   * Content of the `Section`.
+   * @since 0.0.54
    */
   children: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
+   */
+  baseClassName: _propTypes.default.string,
+
+  /**
+   * @ignore
    */
-  baseClassName: _propTypes.default.string
+  form: _propTypes.default.object
 };
-Section.defaultProps = {
-  title: null,
-  intent: null,
+const defaultProps = {
+  title: undefined,
+  intent: undefined,
   collapsible: false,
   collapsed: false,
-  onTitleChange: null,
-  onClose: null,
-  buttons: null,
-  vertical: null,
-  children: null,
-  className: null,
-  baseClassName: `${_constants.CLS_PREFIX}section`
+  onTitleChange: undefined,
+  onClose: undefined,
+  onToggle: undefined,
+  buttons: undefined,
+  vertical: undefined,
+  children: undefined,
+  className: undefined,
+  baseClassName: `${_constants.CLS_PREFIX}section`,
+  form: undefined
 };
-Section.contextType = _VerticalContext.default;
-var _default = Section;
+Section.propTypes = propTypes;
+Section.defaultProps = defaultProps;
+/**
+ * `Section` component is used for dividing of complex content into groups for better readability
+ * and comprehension of the presented information.
+ * @since 0.0.54
+ */
+
+const SectionWrapper = props => {
+  const form = (0, _react.useContext)(_FormContext.default);
+  const verticalContext = (0, _react.useContext)(_VerticalContext.default);
+  const vertical = props.vertical === undefined ? verticalContext : props.vertical;
+  return /*#__PURE__*/_react.default.createElement(Section, (0, _extends2.default)({}, props, {
+    form: form,
+    vertical: vertical
+  }));
+};
+
+SectionWrapper.displayName = 'Section';
+SectionWrapper.propTypes = propTypes;
+SectionWrapper.defaultProps = defaultProps;
+SectionWrapper.WrappedComponent = Section;
+var _default = SectionWrapper;
 exports.default = _default;

package/cjs/components/Select/Select.js

@@ -60,12 +60,12 @@ const collect = (children, options = [], group) => {
         ...props
       } = child.props;
 
-      if (typeof value !== 'string' && typeof value !== 'number' && typeof children === 'string') {
-        value = children;
-      }
-
-      if (!value) {
-        throw new Error('The value can only be a number or a string.');
+      if (typeof value !== 'string' && typeof value !== 'number') {
+        if (typeof children === 'string' && children) {
+          value = children;
+        } else {
+          throw new Error('The value can only be a number or a string.');
+        }
       }
 
       let label;
@@ -118,9 +118,9 @@ const getNextValue = (value, prevValue) => {
   return value;
 };
 
-/**
- * `Select` component is used for making a choice among a set of related options.
- * @since 2.3.0
+/**
+ * `Select` component is used for making a choice among a set of related options.
+ * @since 2.3.0
  */
 const Select = ({
   id,

package/cjs/components/Select/SelectControl.js

@@ -248,7 +248,7 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     "aria-hidden": "true",
     focusable: "false"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1 .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
+    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1\r .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
   })))), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),

package/cjs/components/Tabs/Tab.js

@@ -15,58 +15,58 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 /* eslint-disable react/no-unused-prop-types */
 
-/**
- * `Tab` is an individual element of the [Tabs](#!/Tabs) component.
- *
- * Each `Tab` can display an icon near the tab name for easier identification.
- * It can also display a [Label](#!/Label) next to the tab name for showing additional information about its content.
- * You can make `Tabs` closeable, for example, if you are using them for opening and displaying files.
- * @since 0.0.35
+/**
+ * `Tab` is an individual element of the [Tabs](#!/Tabs) component.
+ *
+ * Each `Tab` can display an icon near the tab name for easier identification.
+ * It can also display a [Label](#!/Label) next to the tab name for showing additional information about its content.
+ * You can make `Tabs` closeable, for example, if you are using them for opening and displaying files.
+ * @since 0.0.35
  */
 const Tab = ({
   children
 }) => /*#__PURE__*/_react.default.createElement("div", null, children);
 
 Tab.propTypes = {
-  /**
-   * Tab title
-   * @since 0.0.35
+  /**
+   * Tab title
+   * @since 0.0.35
    */
   title: _propTypes.default.node.isRequired,
 
-  /**
-   * Label in tab title
-   * @since 0.0.42
+  /**
+   * Label in tab title
+   * @since 0.0.42
    */
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
 
-  /**
-   * Name of icon or Icon component for tab
-   * @since 0.0.42
+  /**
+   * Name of icon or Icon component for tab
+   * @since 0.0.42
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Activate callback.
-   * @since 0.0.43
+  /**
+   * Activate callback.
+   * @since 0.0.43
    */
   onActivate: _propTypes.default.func,
 
-  /**
-   * Close callback
-   * @since 0.0.58
+  /**
+   * Close callback
+   * @since 0.0.58
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * Component to render as the root element.
-   * @since 2.5.1
+  /**
+   * Component to render as the root element.
+   * @since 2.5.1
    */
   component: _propTypes.default.elementType,
 
-  /**
-   * Tab content
-   * @since 0.0.47
+  /**
+   * Tab content
+   * @since 0.0.47
    */
   children: _propTypes.default.node
 };