@plesk/ui-library 3.35.1 → 3.35.3

package/esm/components/Button/Button.js

@@ -201,7 +201,6 @@ Button.defaultProps = {
 /**
  * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
  * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
- *
- * Since: 0.0.37
+ * @since 0.0.37
  */
 export default Button;

package/esm/components/Carousel/Carousel.js

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
-import React, { Component, createRef } from 'react';
-import PropTypes from 'prop-types';
+import { Component, createRef } from 'react';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
@@ -18,7 +17,6 @@ const calcWidths = node => {
     totalWidth
   };
 };
-
 /**
  * Carousel component is used for optimizing page space by displaying only some parts
  * of entire content in a cyclic view.
@@ -35,23 +33,27 @@ class Carousel extends Component {
       slideWidths: [],
       totalWidth: 0
     });
-    this.speed = 500;
-    this.movingCallback = null;
-    this.playSpeed = 5000;
-    this.playTimer = null;
+    _defineProperty(this, "speed", 500);
+    _defineProperty(this, "playSpeed", 5000);
+    _defineProperty(this, "isRtl", void 0);
+    _defineProperty(this, "playTimer", null);
+    _defineProperty(this, "movingCallback", null);
+    _defineProperty(this, "rootRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "genuineRef", /*#__PURE__*/createRef());
     this.handlePrevClick = this.handlePrevClick.bind(this);
     this.handleNextClick = this.handleNextClick.bind(this);
     this.stop = this.stop.bind(this);
     this.play = this.play.bind(this);
     this.handleResize = this.handleResize.bind(this);
-    this.rootRef = /*#__PURE__*/createRef();
-    this.genuineRef = /*#__PURE__*/createRef();
   }
   componentDidMount() {
     this.isRtl = isRtl();
     this.play();
   }
   componentDidUpdate() {
+    if (!this.rootRef.current || !this.genuineRef.current) {
+      return;
+    }
     const {
       width
     } = this.rootRef.current.getBoundingClientRect();
@@ -69,7 +71,9 @@ class Carousel extends Component {
   }
   componentWillUnmount() {
     this.stop();
-    clearTimeout(this.movingCallback);
+    if (this.movingCallback) {
+      clearTimeout(this.movingCallback);
+    }
   }
   handlePrevClick() {
     this.stop();
@@ -120,11 +124,12 @@ class Carousel extends Component {
   }
   handleResize(_ref) {
     let {
-      bounds: {
-        width
-      }
+      bounds
     } = _ref;
     const node = this.genuineRef.current;
+    if (!node) {
+      return;
+    }
     const {
       slideWidths,
       totalWidth
@@ -132,7 +137,7 @@ class Carousel extends Component {
     this.setState({
       slideWidths,
       totalWidth,
-      showControls: width < totalWidth
+      showControls: (bounds?.width || 0) < totalWidth
     });
   }
   listStyle() {
@@ -160,8 +165,8 @@ class Carousel extends Component {
     return {
       WebkitTransform: `translateX(${x ? `${x}px` : 0})`,
       transform: `translateX(${x ? `${x}px` : 0})`,
-      WebkitTransition: moving ? `-webkit-transform ${this.speed}ms ease` : null,
-      transition: moving ? `transform ${this.speed}ms ease` : null
+      WebkitTransition: moving ? `-webkit-transform ${this.speed}ms ease` : undefined,
+      transition: moving ? `transform ${this.speed}ms ease` : undefined
     };
   }
   render() {
@@ -177,9 +182,7 @@ class Carousel extends Component {
     return /*#__PURE__*/_jsx(Measure, {
       onResize: this.handleResize,
       bounds: true,
-      innerRef: node => {
-        this.rootRef.current = node;
-      },
+      innerRef: this.rootRef,
       children: _ref2 => {
         let {
           measureRef
@@ -190,7 +193,7 @@ class Carousel extends Component {
           ...props,
           children: [/*#__PURE__*/_jsxs("div", {
             className: `${baseClassName}__slides`,
-            style: showControls ? this.listStyle() : null,
+            style: showControls ? this.listStyle() : undefined,
             children: [showControls && children, /*#__PURE__*/_jsx("div", {
               className: `${baseClassName}__genuine-slides`,
               ref: this.genuineRef,
@@ -223,24 +226,9 @@ class Carousel extends Component {
     });
   }
 }
-Carousel.propTypes = {
-  /**
-   * Slides
-   * @since 0.0.42
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Carousel.defaultProps = {
+_defineProperty(Carousel, "defaultProps", {
   children: null,
   className: null,
   baseClassName: `${CLS_PREFIX}carousel`
-};
+});
 export default Carousel;

package/esm/components/Drawer/Header.js

@@ -1,131 +1,94 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
-import { Component } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
 import Icon from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default class Header extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "isRtl", false);
-  }
-  componentDidMount() {
-    this.isRtl = isRtl();
-  }
-  renderBackButton() {
-    const {
-      baseClassName,
-      onClose
-    } = this.props;
-    return /*#__PURE__*/_jsx(Button, {
-      ghost: true,
-      className: classNames(`${baseClassName}__button`, `${baseClassName}__button--back`),
-      size: "lg",
-      icon: /*#__PURE__*/_jsx(Icon, {
-        name: "chevron-left",
-        flipHorizontal: this.isRtl,
-        className: `${baseClassName}__icon`
-      }),
-      onClick: onClose
-    });
-  }
-  renderHideButton() {
-    const {
-      baseClassName,
-      onClose
-    } = this.props;
-    return /*#__PURE__*/_jsx(Button, {
-      ghost: true,
-      className: classNames(`${baseClassName}__button`, `${baseClassName}__button--hide`),
-      size: "lg",
-      icon: /*#__PURE__*/_jsx(Icon, {
-        className: `${baseClassName}__icon`,
-        name: "minimize"
-      }),
-      onClick: onClose
-    });
-  }
-  renderCloseButton() {
+const Header = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}drawer-header`,
+    onClose,
+    children,
+    backButton = false,
+    hideButton = false,
+    tabs,
+    ...props
+  } = _ref;
+  const renderBackButton = () => /*#__PURE__*/_jsx(Button, {
+    ghost: true,
+    className: classNames(`${baseClassName}__button`, `${baseClassName}__button--back`),
+    size: "lg",
+    icon: /*#__PURE__*/_jsx(Icon, {
+      name: "chevron-left",
+      flipHorizontal: isRtl(),
+      className: `${baseClassName}__icon`
+    }),
+    onClick: onClose
+  });
+  const renderHideButton = () => /*#__PURE__*/_jsx(Button, {
+    ghost: true,
+    className: classNames(`${baseClassName}__button`, `${baseClassName}__button--hide`),
+    size: "lg",
+    icon: /*#__PURE__*/_jsx(Icon, {
+      className: `${baseClassName}__icon`,
+      name: "minimize"
+    }),
+    onClick: onClose
+  });
+  const renderCloseButton = function () {
     let {
       disabled = false
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const {
-      baseClassName,
-      onClose
-    } = this.props;
     return /*#__PURE__*/_jsx(Button, {
       ghost: true,
       className: classNames(`${baseClassName}__button`, `${baseClassName}__button--close`),
       size: "lg",
       icon: /*#__PURE__*/_jsx(Icon, {
-        name: 'cross-mark',
+        name: "cross-mark",
         className: `${baseClassName}__icon`
       }),
       onClick: onClose,
       disabled: disabled
     });
-  }
-  render() {
-    const {
-      baseClassName,
-      onClose,
-      children,
-      backButton,
-      hideButton,
-      tabs,
-      ...props
-    } = this.props;
-    let prefix;
-    let suffix;
-    if (onClose) {
-      switch (true) {
-        case backButton:
-          prefix = this.renderBackButton();
-          break;
-        case hideButton:
-          suffix = /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}__actions`,
-            children: [this.renderHideButton(), this.renderCloseButton({
-              disabled: true
-            })]
-          });
-          break;
-        default:
-          suffix = /*#__PURE__*/_jsx("div", {
-            className: `${baseClassName}__actions`,
-            children: this.renderCloseButton()
-          });
-          break;
-      }
+  };
+  let prefix;
+  let suffix;
+  if (onClose) {
+    if (backButton) {
+      prefix = renderBackButton();
+    } else if (hideButton) {
+      suffix = /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__actions`,
+        children: [renderHideButton(), renderCloseButton({
+          disabled: true
+        })]
+      });
+    } else {
+      suffix = /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__actions`,
+        children: renderCloseButton()
+      });
     }
-    return /*#__PURE__*/_jsx("div", {
-      className: baseClassName,
-      ...props,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClassName}__inner`,
-        children: [prefix, /*#__PURE__*/_jsxs("div", {
-          className: `${baseClassName}__content`,
-          children: [children, tabs && /*#__PURE__*/_jsx("div", {
-            className: `${baseClassName}__tabs`,
-            children: /*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}__tabs-inner`,
-              children: tabs
-            })
-          })]
-        }), suffix]
-      })
-    });
   }
-}
-_defineProperty(Header, "defaultProps", {
-  onClose: null,
-  baseClassName: `${CLS_PREFIX}drawer-header`,
-  backButton: false,
-  hideButton: false,
-  tabs: undefined
-});
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClassName,
+    ...props,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__inner`,
+      children: [prefix, /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__content`,
+        children: [children, tabs && /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__tabs`,
+          children: /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__tabs-inner`,
+            children: tabs
+          })
+        })]
+      }), suffix]
+    })
+  });
+};
+export default Header;

package/esm/components/Form/Form.js

@@ -367,13 +367,6 @@ class Form extends Component {
     });
   }
 }
-
-/**
- * `Form` component is used for entering and submitting of user data.
- * [More details about designing of forms.](#!/Good%20Forms)
- *
- * Since: 0.0.54
- */
 _defineProperty(Form, "defaultProps", {
   children: undefined,
   requiredMark: /*#__PURE__*/_jsx("span", {
@@ -412,4 +405,9 @@ const RefForwardingForm = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 RefForwardingForm.displayName = 'Form';
+/**
+ * `Form` component is used for entering and submitting of user data.
+ * [More details about designing of forms.](#!/Good%20Forms)
+ * @since 0.0.54
+ */
 export default RefForwardingForm;

package/esm/components/FormField/FormField.js

@@ -531,6 +531,7 @@ const propTypes = {
    */
   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,
@@ -548,7 +549,7 @@ const defaultProps = {
   onRemoveRow: null,
   fullDescription: undefined,
   className: undefined,
-  baseClassName: `${CLS_PREFIX}form-field`,
+  baseClassName: BASE_FORM_FIELD_CLASS_NAME,
   form: undefined,
   vertical: undefined,
   scrollableElement: undefined
@@ -583,4 +584,5 @@ const FormFieldWrapper = props => {
 FormFieldWrapper.displayName = 'FormField';
 FormFieldWrapper.propTypes = propTypes;
 FormFieldWrapper.defaultProps = defaultProps;
-export default FormFieldWrapper;
+export default FormFieldWrapper;
+export { BASE_FORM_FIELD_CLASS_NAME };

package/esm/components/FormField/index.js

@@ -1,3 +1,4 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-export { default } from './FormField';
+export { default } from './FormField';
+export { BASE_FORM_FIELD_CLASS_NAME } from './FormField';

package/esm/components/FormFieldCheckbox/FormFieldCheckbox.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Fragment } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Checkbox from '../Checkbox';
@@ -10,20 +9,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * `FormFieldCheckbox` component component is used for turning an option on or off
+ * `FormFieldCheckbox` component is used for turning an option on or off
  * and selecting or deselecting an item.
  * @since 0.0.58
  */
 const FormFieldCheckbox = _ref => {
   let {
-    baseClassName,
     className,
     label,
-    required,
-    checkedValue,
-    uncheckedValue,
     autoFocus,
-    multi,
+    required = false,
+    checkedValue = true,
+    uncheckedValue = false,
+    baseClassName = `${CLS_PREFIX}form-field-checkbox`,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(FormField, {
@@ -45,14 +43,14 @@ const FormFieldCheckbox = _ref => {
         children: [/*#__PURE__*/_jsx("input", {
           type: "hidden",
           name: getName(),
-          value: uncheckedValue
+          value: uncheckedValue.toString()
         }), /*#__PURE__*/_jsx(Checkbox, {
           checked: getValue() === checkedValue,
           onChange: checked => setValue(checked ? checkedValue : uncheckedValue),
           inputProps: {
             id: getId(),
             name: getName(),
-            value: checkedValue,
+            value: checkedValue.toString(),
             autoFocus
           },
           disabled: isDisabled(),
@@ -65,59 +63,4 @@ const FormFieldCheckbox = _ref => {
     }
   });
 };
-FormFieldCheckbox.propTypes = {
-  /**
-   * Disabled state of field.
-   * @since 0.1.0
-   */
-  disabled: PropTypes.bool,
-  /**
-   * 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
-   */
-  uncheckedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
-   */
-  autoFocus: PropTypes.bool,
-  /**
-   * @ignore Field cannot be multiple
-   */
-  multi: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  label: PropTypes.any,
-  /**
-   * @ignore
-   */
-  required: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  fullDescription: PropTypes.string
-};
-FormFieldCheckbox.defaultProps = {
-  disabled: undefined,
-  checkedValue: true,
-  uncheckedValue: false,
-  autoFocus: undefined,
-  multi: undefined,
-  label: undefined,
-  required: false,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}form-field-checkbox`,
-  fullDescription: undefined
-};
 export default FormFieldCheckbox;

package/esm/components/FormFieldPassword/PasswordMeter.js

@@ -34,12 +34,12 @@ const PasswordMeter = _ref => {
   }, [visible, value, onEstimate]);
   return /*#__PURE__*/_jsxs(Popover, {
     visible: visible && result !== null,
-    target: children,
     placement: "bottom-right",
     intent: result ? strengthIntents[result.strength] : undefined,
     canCloseOnOutsideClick: false,
     canCloseOnEscapePress: false,
     ...props,
+    target: children,
     children: [result?.strength ? /*#__PURE__*/_jsx(Translate, {
       component: "div",
       content: "FormFieldPassword.passwordStrength",