@plesk/ui-library 3.26.1 → 3.27.0

package/esm/components/FormField/FormField.js

@@ -22,11 +22,11 @@ import VerticalContext from '../VerticalContext';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DisabledContext from '../Form/DisabledContext';
 const defaultValue = undefined;
-/**
- * Simple helper to handle situations when we expecting only array
- * @param value
- * @param nonEmpty
- * @returns {Array}
+/**
+ * Simple helper to handle situations when we expecting only array
+ * @param value
+ * @param nonEmpty
+ * @returns {Array}
  */
 
 const getArrayHelper = (value, nonEmpty = false) => {
@@ -44,8 +44,12 @@ const getArrayHelper = (value, nonEmpty = false) => {
 };
 
 const isControlled = props => props.value !== undefined;
-/**
- * @since 0.0.54
+
+const isEmpty = value => {
+  return !value && value !== 0 || Array.isArray(value) && value.length === 0 || !Array.isArray(value) && typeof value === 'object' && Object.values(value).filter(t => Boolean(t)).length === 0;
+};
+/**
+ * @since 0.0.54
  */
 
 
@@ -167,18 +171,19 @@ class FormField extends Component {
         disabled
       } = this.props;
       const value = getArrayHelper(this.fieldApi.getValue());
+      const isClearable = multi && value.length === 1 && !isEmpty(value[0]);
 
-      if (!multi || value.length <= 1) {
+      if (!multi || value.length < 1 || value.length === 1 && isEmpty(value[0])) {
         return null;
       }
 
       return /*#__PURE__*/React.createElement(Button, {
         className: `${this.props.baseClassName}__remove`,
-        icon: "cross-mark",
+        icon: isClearable ? 'clean' : 'cross-mark',
         tooltip: /*#__PURE__*/React.createElement(Translate, {
           namespace: "FormField",
-          content: "remove",
-          fallback: "Remove",
+          content: isClearable ? 'clear' : 'remove',
+          fallback: isClearable ? 'Clear' : 'Remove',
           translators: locale
         }),
         onClick: () => this.handleRemove(index),
@@ -410,10 +415,10 @@ class FormField extends Component {
 
     clearTimeout(this.focusTimer);
   }
-  /**
-   * Field API provided to field
-   * @param index
-   * @returns {Object}
+  /**
+   * Field API provided to field
+   * @param index
+   * @returns {Object}
    */
 
 
@@ -437,127 +442,127 @@ class FormField extends Component {
 }
 
 const propTypes = {
-  /**
-   * Field ID.
-   * @since 0.0.59
+  /**
+   * Field ID.
+   * @since 0.0.59
    */
   id: PropTypes.string,
 
-  /**
-   * Field name.
-   * @since 0.0.54
+  /**
+   * Field name.
+   * @since 0.0.54
    */
   name: PropTypes.string,
 
-  /**
-   * Field value.
-   * @deprecated Use [Form](#!/Form) values.
-   * @since 0.0.57
+  /**
+   * Field value.
+   * @deprecated Use [Form](#!/Form) values.
+   * @since 0.0.57
    */
   value: PropTypes.any,
 
-  /**
-   * A callback function, can be executed when the value is changing.
-   * @since 0.4.1
+  /**
+   * A callback function, can be executed when the value is changing.
+   * @since 0.4.1
    */
   onChange: PropTypes.func,
 
-  /**
-   * Field label.
-   * @since 0.0.54
+  /**
+   * Field label.
+   * @since 0.0.54
    */
   label: PropTypes.any,
 
-  /**
-   * Field description.
-   * @since 0.0.57
+  /**
+   * Field description.
+   * @since 0.0.57
    */
   description: PropTypes.any,
 
-  /**
-   * Show long descriptions in popover after clicking on "( i )" icon
-   * @since 3.14.0
+  /**
+   * Show long descriptions in popover after clicking on "( i )" icon
+   * @since 3.14.0
    */
   fullDescription: PropTypes.node,
 
-  /**
-   * Field errors.
-   *  @deprecated Use [Form](#!/Form) errors.
-   * @since 0.0.57
+  /**
+   * Field errors.
+   *  @deprecated Use [Form](#!/Form) errors.
+   * @since 0.0.57
    */
   errors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
-  /**
-   * Indicates whether field is required.
-   * @since 0.0.54
+  /**
+   * Indicates whether field is required.
+   * @since 0.0.54
    */
   required: PropTypes.bool,
 
-  /**
-   * Content of the `FormField`.
-   * @since 0.0.54
+  /**
+   * Content of the `FormField`.
+   * @since 0.0.54
    */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 
-  /**
-   * 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
+  /**
+   * 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.oneOfType([PropTypes.bool, PropTypes.shape({
     max: PropTypes.number.isRequired
   })]),
 
-  /**
-   * @ignore Disabled state of multiple field.
+  /**
+   * @ignore Disabled state of multiple field.
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Localization messages
-   * @since 1.12.0
+  /**
+   * Localization messages
+   * @since 1.12.0
    */
   locale: PropTypes.shape({
     addMore: PropTypes.node,
     remove: PropTypes.node
   }),
 
-  /**
-   * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
-   * @ignore
-   * @deprecated
+  /**
+   * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
+   * @ignore
+   * @deprecated
    */
   addMoreValidator: PropTypes.func,
 
-  /**
-   * A callback function, can be executed when the row is removed.
-   * @since 1.12.0
+  /**
+   * A callback function, can be executed when the row is removed.
+   * @since 1.12.0
    */
   onRemoveRow: PropTypes.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   form: PropTypes.object,
 
-  /**
-   * Vertical or horizontal field view.
-   * If it is not defined explicitly, the vertical mode will use from Form or Section components.
-   * @since 3.13.0
+  /**
+   * Vertical or horizontal field view.
+   * If it is not defined explicitly, the vertical mode will use from Form or Section components.
+   * @since 3.13.0
    */
   vertical: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   scrollableElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.instanceOf(Window)])
 };
@@ -585,14 +590,14 @@ const defaultProps = {
 };
 FormField.propTypes = propTypes;
 FormField.defaultProps = defaultProps;
-/**
- * `FormField` component is used for showing of parameter values in Form or
- * for entering of user data with any form elements.
- *
- * For the most cases the following form elements can be used:
- * * [FormFieldText](#!/FormFieldText) for entering text,
- * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
- * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
+/**
+ * `FormField` component is used for showing of parameter values in Form or
+ * for entering of user data with any form elements.
+ *
+ * For the most cases the following form elements can be used:
+ * * [FormFieldText](#!/FormFieldText) for entering text,
+ * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
+ * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
  */
 
 const FormFieldWrapper = props => {

package/esm/components/FormFieldCheckbox/FormFieldCheckbox.js

@@ -7,10 +7,10 @@ import { CLS_PREFIX } from '../../constants';
 import Checkbox from '../Checkbox';
 import FormField from '../FormField';
 
-/**
- * `FormFieldCheckbox` component component is used for turning an option on or off
- * and selecting or deselecting an item.
- * @since 0.0.58
+/**
+ * `FormFieldCheckbox` component component is used for turning an option on or off
+ * and selecting or deselecting an item.
+ * @since 0.0.58
  */
 const FormFieldCheckbox = ({
   baseClassName,
@@ -52,52 +52,52 @@ const FormFieldCheckbox = ({
 }, label)));
 
 FormFieldCheckbox.propTypes = {
-  /**
-   * Disabled state of field.
-   * @since 0.1.0
+  /**
+   * Disabled state of field.
+   * @since 0.1.0
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Custom checked value. Default is boolean true.
-   * @since 0.0.59
+  /**
+   * Custom checked value. Default is boolean true.
+   * @since 0.0.59
    */
   checkedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /**
-   * Custom unchecked value. Default is boolean false.
-   * @since 0.0.59
+  /**
+   * Custom unchecked value. Default is boolean false.
+   * @since 0.0.59
    */
   uncheckedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
+  /**
+   * The browser will automatically focus on the component upon rendering the screen
+   * @since 1.9.0
    */
   autoFocus: PropTypes.bool,
 
-  /**
-   * @ignore Field cannot be multiple
+  /**
+   * @ignore Field cannot be multiple
    */
   multi: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   label: PropTypes.any,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   required: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
   fullDescription: PropTypes.string

package/esm/components/FormFieldPassword/FormFieldPassword.js

@@ -22,9 +22,9 @@ export const generatePassword = () => {
   const password = ['upper', 'lower', 'lower', 'lower', 'number', 'number', 'special', 'number', 'upper', 'upper', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower'];
   return password.sort((a, b) => Math.floor(b.length * Math.random()) - Math.floor(a.length * Math.random())).map(symbolClass => symbolClasses[symbolClass][Math.floor(symbolClasses[symbolClass].length * Math.random())]).join('');
 };
-/**
- * `FormFieldPassword` component provides secure way to enter a password.
- * @since 0.0.58
+/**
+ * `FormFieldPassword` component provides secure way to enter a password.
+ * @since 0.0.58
  */
 
 class FormFieldPassword extends Component {
@@ -272,33 +272,33 @@ class FormFieldPassword extends Component {
 }
 
 FormFieldPassword.propTypes = {
-  /**
-   * Is show button hidden?
-   * @since 0.0.59
+  /**
+   * Is show button hidden?
+   * @since 0.0.59
    */
   hideShowButton: PropTypes.bool,
 
-  /**
-   * Is generate button hidden?
-   * @since 0.0.59
+  /**
+   * Is generate button hidden?
+   * @since 0.0.59
    */
   hideGenerateButton: PropTypes.bool,
 
-  /**
-   * Is password meter hidden?
-   * @since 0.0.59
+  /**
+   * Is password meter hidden?
+   * @since 0.0.59
    */
   hidePasswordMeter: PropTypes.bool,
 
-  /**
-   * Additional props for password meter. . See [Popover](#!/Popover) for more information.
-   * @since 1.5.6
+  /**
+   * Additional props for password meter. . See [Popover](#!/Popover) for more information.
+   * @since 1.5.6
    */
   passwordMeterProps: PropTypes.object,
 
-  /**
-   * A set of custom password score rules.
-   * @since 3.21.0
+  /**
+   * A set of custom password score rules.
+   * @since 3.21.0
    */
   passwordScoreRules: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
@@ -306,37 +306,37 @@ FormFieldPassword.propTypes = {
     score: PropTypes.func.isRequired
   })),
 
-  /**
-   * Size of the control
-   * @since 1.5.6
+  /**
+   * Size of the control
+   * @since 1.5.6
    */
   size: PropTypes.oneOf(['md', 'lg', 'xl', 'fill']),
 
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
+  /**
+   * The browser will automatically focus on the component upon rendering the screen
+   * @since 1.9.0
    */
   autoFocus: PropTypes.bool,
 
-  /**
-   * Prevent password autocompletion.
-   * @since 2.5.1
+  /**
+   * Prevent password autocompletion.
+   * @since 2.5.1
    */
   autoComplete: PropTypes.oneOf(['new-password']),
 
-  /**
-   * A render function for customizing the password generation button.
-   * @since 3.13.0
+  /**
+   * A render function for customizing the password generation button.
+   * @since 3.13.0
    */
   generateButton: PropTypes.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };

package/esm/components/FormFieldRadioButtons/FormFieldRadioButtons.js

@@ -10,9 +10,9 @@ import FormField from '../FormField';
 import Hint from '../Hint';
 import Radio from '../Radio';
 
-/**
- * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
- * @since 0.2.0
+/**
+ * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
+ * @since 0.2.0
  */
 class FormFieldRadioButtons extends Component {
   render() {
@@ -74,68 +74,68 @@ class FormFieldRadioButtons extends Component {
 }
 
 FormFieldRadioButtons.propTypes = {
-  /**
-   * Options definition.
-   * @since 0.2.0
+  /**
+   * Options definition.
+   * @since 0.2.0
    */
   options: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * Option value.
+    /**
+     * Option value.
      */
     value: PropTypes.string.isRequired,
 
-    /**
-     * Option label.
+    /**
+     * Option label.
      */
     label: PropTypes.node.isRequired,
 
-    /**
-     * Text hint located below option for providing additional information.
+    /**
+     * Text hint located below option for providing additional information.
      */
     description: PropTypes.node,
 
-    /**
-     * Set true if option is not available to choice.
+    /**
+     * Set true if option is not available to choice.
      */
     disabled: PropTypes.bool,
 
-    /**
-     * Optional array of `FormField` components under this option.
+    /**
+     * Optional array of `FormField` components under this option.
      */
     indentFields: PropTypes.array
   })).isRequired,
 
-  /**
-   * Value of current chosen option.
-   * @deprecated Use [Form](#!/Form) values.
-   * @since 0.2.0
+  /**
+   * Value of current chosen option.
+   * @deprecated Use [Form](#!/Form) values.
+   * @since 0.2.0
    */
   value: PropTypes.string,
 
-  /**
-   * Disabled state of field.
-   * @since 0.2.0
+  /**
+   * Disabled state of field.
+   * @since 0.2.0
    */
   disabled: PropTypes.bool,
 
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
+  /**
+   * The browser will automatically focus on the component upon rendering the screen
+   * @since 1.9.0
    */
   autoFocus: PropTypes.bool,
 
-  /**
-   * @ignore Field cannot be multiple
+  /**
+   * @ignore Field cannot be multiple
    */
   multi: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };

package/esm/components/FormFieldSelect/FormFieldSelect.js

@@ -6,10 +6,10 @@ import { CLS_PREFIX } from '../../constants';
 import FormField from '../FormField';
 import Select from '../Select';
 
-/**
- * `FormFieldSelect` componentis is used for making a choice among a set of related options.
- * See description of `Select` for [the full list of properties](#!/Select) of this component.
- * @since 1.12.3
+/**
+ * `FormFieldSelect` componentis is used for making a choice among a set of related options.
+ * See description of `Select` for [the full list of properties](#!/Select) of this component.
+ * @since 1.12.3
  */
 const FormFieldSelect = ({
   size,