@plesk/ui-library 3.29.0 → 3.29.2

package/esm/components/ContentLoader/IconsLoader.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import Icon from '../Icon';
 import { CLS_PREFIX } from '../../constants';
 const DEFAULT_ICONS = ['clock', 'emoticon-smile', 'rocket', 'sand-clock', 'sleep', 'web', 'star'];
 
-const useIcon = (icons, initialCursor, isSync) => {
+const useIconCursor = (icons, initialCursor, isSync) => {
   const targetRef = useRef(null);
   const [cursor, setCursor] = useState(initialCursor);
   useEffect(() => {
@@ -28,50 +28,58 @@ const useIcon = (icons, initialCursor, isSync) => {
       }
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [icons]);
-  return {
-    name: icons[cursor],
-    targetRef
-  };
+  return [icons[cursor], targetRef];
 };
 
 const IconsLoader = ({
   baseClassName = `${CLS_PREFIX}icons-loader`,
   className,
   icons,
+  size,
+  style,
   ...props
 }) => {
-  const syncRef = useRef(0);
-  icons = icons && icons.length > 0 ? icons : DEFAULT_ICONS;
-  const icon1 = useIcon(icons, 0, () => {
-    if (syncRef.current === 0) {
-      syncRef.current += 1;
+  var _icons;
+
+  const syncRef = useRef('icon1');
+
+  if (!((_icons = icons) !== null && _icons !== void 0 && _icons.length)) {
+    icons = DEFAULT_ICONS;
+  } else if (icons.length === 1) {
+    icons = [icons[0], icons[0]];
+  }
+
+  const [icon1, icon1Ref] = useIconCursor(icons, 0, () => {
+    if (syncRef.current === 'icon1') {
+      syncRef.current = 'icon2';
       return true;
     }
 
     return false;
   });
-  const icon2 = useIcon(icons, 1, () => {
-    if (syncRef.current === 1) {
-      syncRef.current -= 1;
+  const [icon2, icon2Ref] = useIconCursor(icons, 1, () => {
+    if (syncRef.current === 'icon2') {
+      syncRef.current = 'icon1';
       return true;
     }
 
     return false;
   });
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, className)
+    className: classNames(baseClassName, className),
+    style: { ...style,
+      ['--icons-loader-size']: size ? size : undefined
+    }
   }, props), /*#__PURE__*/React.createElement("div", {
     className: classNames(`${baseClassName}__icon`, `${baseClassName}__icon--1`),
-    ref: icon1.targetRef
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: icon1.name,
-    size: "64"
+    ref: icon1Ref
+  }, Icon.create(icon1, {
+    size: size ? size : '64'
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames(`${baseClassName}__icon`, `${baseClassName}__icon--2`),
-    ref: icon2.targetRef
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: icon2.name,
-    size: "64"
+    ref: icon2Ref
+  }, Icon.create(icon2, {
+    size: size ? size : '64'
   })));
 };
 

package/esm/components/Drawer/Drawer.js

@@ -76,7 +76,9 @@ const propTypes = {
   closingConfirmation: PropTypes.bool,
 
   /**
-   * Wraps children into [Form](#!/Form) if not empty.
+   * Wraps children into [Form](#!/Form) if not empty.<br>
+   * **Note:** in case of *element* you should take care of providing additional form props from [Drawer](#!/Drawer) through your custom component. See example below for more details
+   *
    * @since 0.0.66
    */
   form: PropTypes.oneOfType([PropTypes.object, PropTypes.element]),

package/esm/components/FormField/FormField.js

@@ -199,7 +199,7 @@ class FormField extends Component {
         multi
       } = this.props;
 
-      if (!description || multi && this.fieldApi.getValue().length - 1 > index) {
+      if (!description || multi && getArrayHelper(this.fieldApi.getValue()).length - 1 > index) {
         return null;
       }
 

package/esm/components/FormFieldText/FormFieldText.js

@@ -116,10 +116,12 @@ FormFieldText.propTypes = {
   autoComplete: PropTypes.oneOf(['on', 'off']),
 
   /**
-   * If 'true', a field will be multiple
+   * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
    * @since 1.12.0
    */
-  multi: PropTypes.bool,
+  multi: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    max: PropTypes.number.isRequired
+  })]),
 
   /**
    * @ignore

package/esm/components/Toast/Toast.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.29.0",
+  "version": "3.29.2",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",