@plesk/ui-library 3.25.6 → 3.27.0

package/esm/components/Popper/Popper.js

@@ -10,8 +10,8 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import PopperJs from 'popper.js';
 import Layer from '../Layer';
-/**
- * `Popper` component.
+/**
+ * `Popper` component.
  */
 
 class Popper extends Component {
@@ -191,75 +191,75 @@ class Popper extends Component {
 }
 
 Popper.propTypes = {
-  /**
-   * Whether show popper content.
+  /**
+   * Whether show popper content.
    */
   show: PropTypes.bool,
 
-  /**
-   * Content of the `Popper`.
+  /**
+   * Content of the `Popper`.
    */
   children: PropTypes.node,
 
-  /**
-   * Target for popper.
+  /**
+   * Target for popper.
    */
   target: PropTypes.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.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(HTMLElement)
   })]),
 
-  /**
-   * Arrow element of popper
+  /**
+   * Arrow element of popper
    */
   arrow: PropTypes.element,
 
-  /**
-   * Placement for popper.
+  /**
+   * Placement for popper.
    */
   placement: PropTypes.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.oneOfType([PropTypes.oneOf(['flip', 'clockwise', 'counterclockwise']), PropTypes.arrayOf(PropTypes.string)]),
 
-  /**
-   * Shift your popper on both axis.
+  /**
+   * Shift your popper on both axis.
    */
   offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Update callback function
+  /**
+   * Update callback function
    */
   onUpdate: PropTypes.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
 
-  /**
-   * zIndex value.
+  /**
+   * zIndex value.
    */
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /**
-   * Boundaries element for preventOverflow property.
+  /**
+   * Boundaries element for preventOverflow property.
    */
   boundariesElement: PropTypes.oneOfType([PropTypes.oneOf(['scrollParent', 'window', 'viewport']), PropTypes.instanceOf(HTMLElement)]),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   style: PropTypes.object
 };

package/esm/components/ProgressStep/ProgressStep.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 import React, { isValidElement, Children, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Icon, { ICON_SIZE_12 } from '../Icon';
+import Icon, { ICON_SIZE_16 } from '../Icon';
 import Status from '../Status';
 import { CLS_PREFIX } from '../../constants';
 import ProgressBar from '../ProgressBar';
@@ -35,39 +35,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.create(icon, {
     className: `${baseClassName}__icon`,
-    size: ICON_SIZE_12,
+    size: ICON_SIZE_16,
     intent
   });
 
@@ -85,19 +85,21 @@ const ProgressStep = ({
     className: `${baseClassName}__media`
   }, icon), /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__body`
-  }, (title || statusText) && /*#__PURE__*/React.createElement("div", {
+  }, (title || statusText || Children.toArray(children).length > 0) && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__labels`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${baseClassName}__labels-body`
   }, title && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__title`
-  }, title), statusText && /*#__PURE__*/React.createElement("div", {
+  }, title), Children.toArray(children).length ? /*#__PURE__*/React.createElement("div", {
+    className: `${baseClassName}__content`
+  }, children) : null), statusText && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__status`
   }, statusText)), STATUS_RUNNING === status && /*#__PURE__*/React.createElement(ProgressBar, {
     className: `${baseClassName}__progress`,
     intent: "info",
     progress: progress
-  }), Children.toArray(children).length ? /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__content`
-  }, children) : null));
+  })));
 };
 
 ProgressStep.propTypes = {

package/esm/components/Section/Section.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
-import React, { Component } from 'react';
+import React, { Component, Children, isValidElement, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Measure from 'react-measure';
@@ -11,25 +11,30 @@ import { CLS_PREFIX } from '../../constants';
 import { isClickable } from '../utils';
 import InPlaceEdit from '../InPlaceEdit';
 import Button from '../Button';
-import Vertical, { VERTICAL_BREAKPOINT } from '../VerticalContext';
-
-const getVertical = (props, verticalContext) => {
-  if (props.vertical !== null && props.vertical !== undefined) {
-    return props.vertical;
-  }
+import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
+import FormContext from '../Form/FormContext';
+
+const getErrorsForChildren = (form, children) => {
+  let errors = {};
+  Children.forEach(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return;
+    }
 
-  if (verticalContext !== undefined) {
-    return verticalContext;
-  }
+    if (child.props.name) {
+      errors = { ...errors,
+        ...form.getErrors(child.props.name)
+      };
+    }
 
-  return undefined;
+    if (child.props.children) {
+      errors = { ...errors,
+        ...getErrorsForChildren(form, child.props.children)
+      };
+    }
+  });
+  return errors;
 };
-/**
- * `Section` component is used for dividing of complex content into groups for better readability
- * and comprehension of the presented information.
- * @since 0.0.54
- */
-
 
 class Section extends Component {
   constructor(...args) {
@@ -42,9 +47,7 @@ class Section extends Component {
     _defineProperty(this, "handleResize", ({
       bounds
     }) => {
-      const vertical = getVertical(this.props, this.context);
-
-      if (vertical !== undefined) {
+      if (this.props.vertical !== undefined) {
         return;
       }
 
@@ -62,16 +65,24 @@ class Section extends 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 = {};
 
@@ -80,6 +91,17 @@ class Section extends 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;
   }
 
@@ -158,14 +180,15 @@ class Section extends 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;
-    return /*#__PURE__*/React.createElement(Vertical.Provider, {
+    const vertical = verticalProp === undefined ? this.state.vertical : verticalProp;
+    return /*#__PURE__*/React.createElement(VerticalContext.Provider, {
       value: vertical
     }, /*#__PURE__*/React.createElement(Measure, {
       onResize: this.handleResize,
@@ -201,84 +224,118 @@ class Section extends Component {
 
 }
 
-Section.propTypes = {
-  /**
-   * Title of the section.
-   * @since 0.0.54
+const propTypes = {
+  /**
+   * Title of the section.
+   * @since 0.0.54
    */
   title: PropTypes.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.oneOf(['danger', 'warning', 'success', 'inactive']),
 
-  /**
-   * Is section collapsible.
-   * @since 0.0.54
+  /**
+   * Is section collapsible.
+   * @since 0.0.54
    */
   collapsible: PropTypes.bool,
 
-  /**
-   * Is section collapsed now.
-   * @since 0.0.54
+  /**
+   * Is section collapsed now.
+   * @since 0.0.54
    */
   collapsed: PropTypes.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.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.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.func,
+
+  /**
+   * Array of custom section action button at the right.
+   * @since 0.0.54
    */
   buttons: PropTypes.arrayOf(PropTypes.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.bool,
 
-  /**
-   * Content of the `Section`.
-   * @since 0.0.54
+  /**
+   * Content of the `Section`.
+   * @since 0.0.54
    */
   children: PropTypes.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
+   */
+  baseClassName: PropTypes.string,
+
+  /**
+   * @ignore
    */
-  baseClassName: PropTypes.string
+  form: PropTypes.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: `${CLS_PREFIX}section`
+  onTitleChange: undefined,
+  onClose: undefined,
+  onToggle: undefined,
+  buttons: undefined,
+  vertical: undefined,
+  children: undefined,
+  className: undefined,
+  baseClassName: `${CLS_PREFIX}section`,
+  form: undefined
 };
-Section.contextType = Vertical;
-export 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 = useContext(FormContext);
+  const verticalContext = useContext(VerticalContext);
+  const vertical = props.vertical === undefined ? verticalContext : props.vertical;
+  return /*#__PURE__*/React.createElement(Section, _extends({}, props, {
+    form: form,
+    vertical: vertical
+  }));
+};
+
+SectionWrapper.displayName = 'Section';
+SectionWrapper.propTypes = propTypes;
+SectionWrapper.defaultProps = defaultProps;
+SectionWrapper.WrappedComponent = Section;
+export default SectionWrapper;

package/esm/components/Select/Select.js

@@ -37,12 +37,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;
@@ -95,9 +95,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/esm/components/Select/SelectControl.js

@@ -228,7 +228,7 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl({
     "aria-hidden": "true",
     focusable: "false"
   }, /*#__PURE__*/React.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.createElement("button", {
     type: "button",
     className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),

package/esm/components/Tabs/Tab.js

@@ -3,13 +3,13 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import PropTypes from '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 = ({
@@ -17,45 +17,45 @@ const Tab = ({
 }) => /*#__PURE__*/React.createElement("div", null, children);
 
 Tab.propTypes = {
-  /**
-   * Tab title
-   * @since 0.0.35
+  /**
+   * Tab title
+   * @since 0.0.35
    */
   title: PropTypes.node.isRequired,
 
-  /**
-   * Label in tab title
-   * @since 0.0.42
+  /**
+   * Label in tab title
+   * @since 0.0.42
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
 
-  /**
-   * Activate callback.
-   * @since 0.0.43
+  /**
+   * Activate callback.
+   * @since 0.0.43
    */
   onActivate: PropTypes.func,
 
-  /**
-   * Close callback
-   * @since 0.0.58
+  /**
+   * Close callback
+   * @since 0.0.58
    */
   onClose: PropTypes.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.elementType,
 
-  /**
-   * Tab content
-   * @since 0.0.47
+  /**
+   * Tab content
+   * @since 0.0.47
    */
   children: PropTypes.node
 };