@plesk/ui-library 3.35.8 → 3.35.9

package/esm/components/Card/helpers.js

@@ -6,6 +6,7 @@ const loadImage = (src, _ref) => {
     onFailure
   } = _ref;
   const image = new Image();
+  image.loading = 'lazy';
   image.onload = onSuccess;
   image.onerror = onFailure;
   image.src = src;

package/esm/components/CodeEditor/CodeEditor.js

@@ -1,10 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component } from 'react';
+import { Component, createRef } from 'react';
 import { safeInvoke } from '../utils';
 import { isRtl } from '../../utils';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,10 +35,16 @@ class CodeEditor extends Component {
         direction: isRtl() ? 'rtl' : 'ltr'
       }
     });
+    _defineProperty(this, "textareaNode", /*#__PURE__*/createRef());
+    _defineProperty(this, "CodeMirror", void 0);
+    _defineProperty(this, "codeMirror", void 0);
     _defineProperty(this, "handleScroll", () => {
       const {
         onScroll
       } = this.props;
+      if (!this.codeMirror) {
+        return;
+      }
       safeInvoke(onScroll, this.codeMirror.getScrollInfo());
     });
     _defineProperty(this, "handleChange", (doc, changes) => {
@@ -80,7 +85,7 @@ class CodeEditor extends Component {
       let {
         CodeMirror
       } = _ref2;
-      if (!this.textareaNode) {
+      if (!this.textareaNode.current) {
         return;
       }
       this.CodeMirror = CodeMirror;
@@ -91,17 +96,19 @@ class CodeEditor extends Component {
       const {
         options
       } = this.state;
-      this.codeMirror = CodeMirror.fromTextArea(this.textareaNode, options);
+      this.codeMirror = CodeMirror.fromTextArea(this.textareaNode.current, options);
       this.codeMirror.on('scroll', this.handleScroll);
       if (scrollPosition) {
         this.codeMirror.scrollTo(scrollPosition.left, scrollPosition.top);
       }
       this.updateMode(this.props);
+      // Save fn typing is missed by some reason.
+      // @ts-ignore
       CodeMirror.commands.save = this.props.onSave;
       CodeMirror.commands.find = CodeMirror.commands.findPersistent;
       CodeMirror.commands.findNext = CodeMirror.commands.findPersistentNext;
       CodeMirror.commands.findPrev = CodeMirror.commands.findPersistentPrev;
-      safeInvoke(onInit, this.codeMirror.display.wrapper);
+      safeInvoke(onInit, this.codeMirror.getWrapperElement());
       this.codeMirror.on('change', this.handleChange);
     });
   }
@@ -109,8 +116,9 @@ class CodeEditor extends Component {
     if (!this.codeMirror) {
       return;
     }
-    Object.keys(this.state.options).forEach(name => {
-      this.codeMirror.setOption(name, this.state.options[name]);
+    Object.entries(this.state.options).forEach(_ref3 => {
+      let [key, value] = _ref3;
+      this.codeMirror?.setOption(key, value);
     });
     const {
       children,
@@ -131,7 +139,7 @@ class CodeEditor extends Component {
       if (autofocus) {
         this.codeMirror.focus();
       }
-    } else if (scrollPosition !== prevProps.scrollPosition) {
+    } else if (scrollPosition && scrollPosition !== prevProps.scrollPosition) {
       this.codeMirror.scrollTo(scrollPosition.left, scrollPosition.top);
     }
   }
@@ -142,24 +150,24 @@ class CodeEditor extends Component {
     }
   }
   findModeByFileName(fileName) {
-    const modeInfo = this.CodeMirror.findModeByFileName(fileName);
+    const modeInfo = this.CodeMirror?.findModeByFileName(fileName);
     if (modeInfo) {
       return modeInfo.mode;
     }
     return null;
   }
-  updateMode(_ref3) {
+  updateMode(_ref4) {
     let {
       mode,
       fileName
-    } = _ref3;
+    } = _ref4;
     if (!mode && fileName) {
       mode = this.findModeByFileName(fileName);
     }
     if (!mode) {
       return;
     }
-    this.CodeMirror.loadMode(this.codeMirror, mode);
+    this.codeMirror?.setOption('mode', mode);
   }
   getLineSeparator() {
     let content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -190,82 +198,14 @@ class CodeEditor extends Component {
       style: {
         display: 'none'
       },
-      ref: ref => this.textareaNode = ref,
+      ref: this.textareaNode,
       className: classNames(baseClassName, className),
       defaultValue: content,
       ...props
     });
   }
 }
-CodeEditor.propTypes = {
-  /**
-   * The mode to use. When not given, this will default to the first mode that was loaded.
-   * @since 0.0.61
-   */
-  mode: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /**
-   * CodeEditor can detect mode by file name. Will be ignored if you set mode property.
-   * @since 0.0.61
-   */
-  fileName: PropTypes.string,
-  /**
-   * Content of the `CodeEditor`.
-   * @since 0.0.61
-   */
-  children: PropTypes.string,
-  /**
-   * Set read only.
-   * @since 0.0.61
-   */
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /**
-   * Set auto focus.
-   * @since 0.0.61
-   */
-  autofocus: PropTypes.bool,
-  /**
-   * onInit event handler.
-   * @since 0.0.61
-   */
-  onInit: PropTypes.func,
-  /**
-   * onChange event handler.
-   * @since 0.0.61
-   */
-  onChange: PropTypes.func,
-  /**
-   * onSave event handler.
-   * @since 0.0.61
-   */
-  onSave: PropTypes.func,
-  /**
-   * See all supported options in [CodeMirror](https://codemirror.net/doc/manual.html#config) documentation.
-   * @since 0.0.61
-   */
-  options: PropTypes.object,
-  /**
-   * Set scroll position.
-   * @since 1.12.4
-   */
-  scrollPosition: PropTypes.shape({
-    left: PropTypes.number,
-    top: PropTypes.number
-  }),
-  /**
-   * onScroll event handler.
-   * @since 1.12.4
-   */
-  onScroll: PropTypes.func,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-CodeEditor.defaultProps = {
+_defineProperty(CodeEditor, "defaultProps", {
   mode: '',
   fileName: '',
   children: '',
@@ -279,5 +219,5 @@ CodeEditor.defaultProps = {
   baseClassName: `${CLS_PREFIX}code-editor`,
   scrollPosition: undefined,
   onScroll: undefined
-};
+});
 export default CodeEditor;

package/esm/components/CodeEditor/CodeMirror.js

@@ -12,7 +12,4 @@ const importAll = r => {
   r.keys().forEach(r);
 };
 importAll(require.context('codemirror/mode/', true, /\.js$/));
-CodeMirror.loadMode = function (instance, mode) {
-  instance.setOption('mode', mode);
-};
 export { CodeMirror };

package/esm/components/FormField/FormField.js

@@ -1,9 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component, useContext } from 'react';
+import { Component, useContext } from 'react';
 import { scrollIntoView, safeInvoke } from '../utils';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { SectionItem } from '../Section';
@@ -21,13 +20,33 @@ import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DisabledContext from '../Form/DisabledContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const BASE_FORM_FIELD_CLASS_NAME = `${CLS_PREFIX}form-field`;
 const defaultValue = undefined;
+const defaultProps = {
+  id: undefined,
+  name: undefined,
+  value: defaultValue,
+  onChange: null,
+  label: undefined,
+  description: undefined,
+  errors: {},
+  required: false,
+  children: undefined,
+  multi: undefined,
+  disabled: undefined,
+  locale: undefined,
+  addMoreValidator: undefined,
+  onRemoveRow: null,
+  fullDescription: undefined,
+  className: undefined,
+  baseClassName: BASE_FORM_FIELD_CLASS_NAME,
+  form: undefined,
+  vertical: undefined,
+  scrollableElement: undefined
+};
 
 /**
- * Simple helper to handle situations when we expecting only array
- * @param value
- * @param nonEmpty
- * @returns {Array}
+ * Simple helper to handle situations when we're expecting only array
  */
 const getArrayHelper = function (value) {
   let nonEmpty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -40,9 +59,7 @@ const getArrayHelper = function (value) {
   }
   return result;
 };
-const isControlled = props => props.value !== undefined;
 const isEmpty = value => !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
  */
@@ -51,16 +68,18 @@ class FormField extends Component {
     var _this;
     super(_props);
     _this = this;
+    _defineProperty(this, "fieldApi", void 0);
+    _defineProperty(this, "targetRefs", void 0);
+    _defineProperty(this, "focusTimer", null);
     /**
      * Field API provided to field
-     * @param index
-     * @returns {Object}
      */
     _defineProperty(this, "getFieldApi", index => {
       if (!this.props.multi) {
         return this.fieldApi;
       }
       return {
+        getValues: () => this.fieldApi.getValues(),
         getId: () => {
           const id = this.fieldApi.getId();
           return id ? `${id}-${index}` : id;
@@ -96,7 +115,7 @@ class FormField extends Component {
         getSeparator: () => /*#__PURE__*/_jsx("span", {
           className: `${this.props.baseClassName}__separator`
         }),
-        isDisabled: () => this.props.disabled,
+        isDisabled: () => !!this.props.disabled,
         getFullDescription: () => {
           if (index === 0) {
             return this.fieldApi.getFullDescription();
@@ -134,11 +153,10 @@ class FormField extends Component {
     });
     /**
      * Handler for clicks on 'Remove'
-     * @param index
      */
     _defineProperty(this, "handleRemove", index => {
       const values = getArrayHelper(this.fieldApi.getValue());
-      this.fieldApi.setValue(values.filter((value, valueIndex) => valueIndex !== index));
+      this.fieldApi.setValue(values.filter((_, valueIndex) => valueIndex !== index));
 
       // Can be used for removing errors from form properties
       safeInvoke(this.props.onRemoveRow, index);
@@ -147,7 +165,7 @@ class FormField extends Component {
       this.setState(prevState => {
         if (prevState.errors && prevState.errors.filter) {
           return {
-            errors: prevState.errors.filter((error, errorIndex) => errorIndex !== index)
+            errors: prevState.errors.filter((_, errorIndex) => errorIndex !== index)
           };
         }
         return {};
@@ -157,9 +175,7 @@ class FormField extends Component {
       this.targetRefs[index] = node;
     });
     /**
-     * Renders 'Remove' button for each row
-     * @param index
-     * @returns {null|React.ReactElement}
+     * Renders 'Remove' button for each row.
      */
     _defineProperty(this, "renderRemoveButton", index => {
       const {
@@ -187,9 +203,7 @@ class FormField extends Component {
       });
     });
     /**
-     * Renders description for last row
-     * @param index
-     * @returns {null|React.ReactElement}
+     * Renders description for last row.
      */
     _defineProperty(this, "renderDescription", index => {
       const {
@@ -207,9 +221,7 @@ class FormField extends Component {
       });
     });
     /**
-     * Renders one field
-     * @param index
-     * @returns {React.ReactElement}
+     * Renders one field.
      */
     _defineProperty(this, "renderField", function () {
       let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -311,7 +323,7 @@ class FormField extends Component {
         if (this.props.name) {
           return this.props.name.replace(/[[\]]+/g, '-').replace(/-+$/, '');
         }
-        return null;
+        return undefined;
       },
       getName: () => this.props.name,
       getValues: () => {
@@ -383,39 +395,41 @@ class FormField extends Component {
       prevErrors,
       prevRequired
     } = state;
-    if (isControlled(props)) {
+    if (props.value !== undefined) {
       nextState.value = props.value;
     }
     if (errors !== prevErrors) {
       nextState.errors = errors;
     }
-    if (form && required !== prevRequired) {
-      form.setRequiredField(name, required);
+    if (name && form && required !== prevRequired) {
+      form.setRequiredField(name, !!required);
     }
     nextState.prevErrors = errors;
     nextState.prevRequired = required;
     return nextState;
   }
   componentDidMount() {
-    if (this.props.form) {
-      this.props.form.setRequiredField(this.props.name, this.props.required);
+    if (this.props.form && this.props.name) {
+      this.props.form.setRequiredField(this.props.name, !!this.props.required);
       this.props.form.registerField(this.props.name, {
         focus: this.focus
       });
     }
   }
   componentWillUnmount() {
-    if (this.props.form) {
+    if (this.props.form && this.props.name) {
       this.props.form.setRequiredField(this.props.name, false);
       this.props.form.unregisterField(this.props.name);
     }
-    clearTimeout(this.focusTimer);
+    if (this.focusTimer) {
+      clearTimeout(this.focusTimer);
+    }
   }
   render() {
     if (!this.props.multi) {
       return this.renderField();
     }
-    const max = this.props.multi.max || Infinity;
+    const max = typeof this.props.multi === 'object' && this.props.multi.max ? this.props.multi.max : Infinity;
     let index = 0;
     const count = (this.fieldApi.getValue() || []).length || 1;
     const lines = [];
@@ -425,137 +439,6 @@ class FormField extends Component {
     return lines;
   }
 }
-const propTypes = {
-  /**
-   * Field ID.
-   * @since 0.0.59
-   */
-  id: PropTypes.string,
-  /**
-   * Field name.
-   * @since 0.0.54
-   */
-  name: PropTypes.string,
-  /**
-   * 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
-   */
-  onChange: PropTypes.func,
-  /**
-   * Field label.
-   * @since 0.0.54
-   */
-  label: PropTypes.any,
-  /**
-   * Field description.
-   * @since 0.0.57
-   */
-  description: PropTypes.any,
-  /**
-   * 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
-   */
-  errors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  /**
-   * Indicates whether field is required.
-   * @since 0.0.54
-   */
-  required: PropTypes.bool,
-  /**
-   * 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
-   */
-  multi: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    max: PropTypes.number.isRequired
-  })]),
-  /**
-   * @ignore Disabled state of multiple field.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * 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
-   */
-  addMoreValidator: PropTypes.func,
-  /**
-   * A callback function, can be executed when the row is removed.
-   * @since 1.12.0
-   */
-  onRemoveRow: PropTypes.func,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * @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: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  scrollableElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.instanceOf(Window)])
-};
-const BASE_FORM_FIELD_CLASS_NAME = `${CLS_PREFIX}form-field`;
-const defaultProps = {
-  id: undefined,
-  name: undefined,
-  value: defaultValue,
-  onChange: null,
-  label: undefined,
-  description: undefined,
-  errors: {},
-  required: false,
-  children: undefined,
-  multi: undefined,
-  disabled: undefined,
-  locale: undefined,
-  addMoreValidator: undefined,
-  onRemoveRow: null,
-  fullDescription: undefined,
-  className: undefined,
-  baseClassName: BASE_FORM_FIELD_CLASS_NAME,
-  form: undefined,
-  vertical: undefined,
-  scrollableElement: undefined
-};
-FormField.propTypes = propTypes;
-FormField.defaultProps = defaultProps;
 
 /**
  * `FormField` component is used for showing of parameter values in Form or
@@ -566,7 +449,7 @@ FormField.defaultProps = defaultProps;
  * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
  * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
  */
-
+_defineProperty(FormField, "defaultProps", defaultProps);
 const FormFieldWrapper = props => {
   const form = useContext(FormContext);
   const verticalContext = useContext(VerticalContext);
@@ -582,7 +465,5 @@ const FormFieldWrapper = props => {
   });
 };
 FormFieldWrapper.displayName = 'FormField';
-FormFieldWrapper.propTypes = propTypes;
 FormFieldWrapper.defaultProps = defaultProps;
-export default FormFieldWrapper;
-export { BASE_FORM_FIELD_CLASS_NAME };
+export default FormFieldWrapper;

package/esm/components/ItemList/ItemList.js

@@ -1,12 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component, Children, cloneElement, isValidElement } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Grid from '../Grid';
 import GridCol from '../GridCol';
 import { safeInvoke } from '../utils';
+import { Component, Children, cloneElement, isValidElement } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const getNextSelectedValue = (value, prevValue, toggleable) => {
   if (Array.isArray(prevValue)) {

package/esm/components/List/List.js

@@ -1246,6 +1246,9 @@ class List extends Component {
     if (sidebar) {
       content = /*#__PURE__*/_jsxs(Columns, {
         gap: "md",
+        className: classNames(`${baseClassName}__content`, {
+          [`${baseClassName}__content--vertical`]: vertical
+        }),
         children: [/*#__PURE__*/_jsx(Column, {
           fill: true,
           children: content

package/esm/index.js

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