@plesk/ui-library 3.35.6 → 3.35.8

package/esm/components/AutoClosable/AutoClosable.js

@@ -12,6 +12,7 @@ const AutoClosableContext = /*#__PURE__*/createContext(null);
 class AutoClosable extends Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "context", void 0);
     _defineProperty(this, "children", []);
     _defineProperty(this, "addChild", child => {
       this.children.push(child);

package/esm/components/InputNumber/InputNumber.js

@@ -35,8 +35,8 @@ const toNumber = value => {
   }
   return value;
 };
-const isMinDisabled = (value, min) => min !== undefined && value !== '' && value <= min;
-const isMaxDisabled = (value, max) => max !== undefined && value !== '' && value >= max;
+const isMinDisabled = (value, min) => min !== undefined && value !== '' && +value <= min;
+const isMaxDisabled = (value, max) => max !== undefined && value !== '' && +value >= max;
 
 /**
  * `InputNumber` component is used for entering integer numbers.

package/esm/components/Item/Item.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component, cloneElement, isValidElement, Children } from 'react';
-import PropTypes from 'prop-types';
+import { cloneElement, isValidElement, Children } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon, { NAMES, ICON_SIZE_32 } from '../Icon';
@@ -11,23 +10,33 @@ import Tooltip from '../Tooltip';
 import { createProxyProps, wrapFunction } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const VIEW_SIMPLE = 'simple';
-const VIEW_CARD = 'card';
-
 /**
  * `Item` component is element of [ItemList](#!/ItemList) and it is presented as
  * a combination of icon, text title and content (similar to [Media](#!/Media)).
  * @since 0.0.48
  */
-class Item extends Component {
-  renderTitle(title) {
+const Item = _ref => {
+  let {
+    children,
+    baseClassName = `${CLS_PREFIX}item`,
+    component,
+    view = 'simple',
+    className,
+    icon,
+    title,
+    description,
+    footer,
+    value,
+    tooltip,
+    disabled,
+    hoverable,
+    ...props
+  } = _ref;
+  const Tag = component || 'div';
+  const renderTitle = () => {
     if (!title) {
       return null;
     }
-    const {
-      baseClassName,
-      view
-    } = this.props;
     let wrappable = false;
     if (typeof title === 'string') {
       title = /*#__PURE__*/_jsx("span", {
@@ -52,8 +61,8 @@ class Item extends Component {
       });
     }
     return title;
-  }
-  renderIcon(icon) {
+  };
+  const renderIcon = () => {
     if (!icon) {
       return null;
     }
@@ -66,147 +75,49 @@ class Item extends Component {
     return Icon.create(icon, {
       size: ICON_SIZE_32
     });
-  }
-  render() {
-    const {
-      children,
-      baseClassName,
-      component: Tag,
-      view,
-      className,
-      icon,
-      title,
-      description,
-      footer,
-      value,
-      tooltip,
-      disabled,
-      hoverable,
-      ...props
-    } = this.props;
-    if (props.onClick) {
-      if (disabled) {
-        props.onClick = e => e.preventDefault();
-      } else {
-        props.tabIndex = 0;
-        props.onKeyDown = wrapFunction(props.onKeyDown, e => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            e.currentTarget.click();
-          }
-        });
-      }
-    }
-    const item = /*#__PURE__*/_jsxs(Tag, {
-      className: classNames(baseClassName, {
-        [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled,
-        [`${baseClassName}--hoverable`]: hoverable
-      }, className),
-      ...props,
-      children: [/*#__PURE__*/_jsxs(Media, {
-        image: this.renderIcon(icon),
-        title: this.renderTitle(title),
-        className: `${baseClassName}__media`,
-        children: [description && /*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}__description`,
-          children: description
-        }), Children.toArray(children).length ? /*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}__content`,
-          children: children
-        }) : null]
-      }), footer && /*#__PURE__*/_jsx("footer", {
-        className: `${baseClassName}__footer`,
-        children: footer
-      })]
-    });
-    if (tooltip) {
-      return createProxyProps(props => /*#__PURE__*/_jsx(Tooltip, {
-        title: tooltip,
-        children: /*#__PURE__*/cloneElement(item, props)
-      }));
+  };
+  if (props.onClick) {
+    if (disabled) {
+      props.onClick = e => e.preventDefault();
+    } else {
+      props.tabIndex = 0;
+      props.onKeyDown = wrapFunction(props.onKeyDown, e => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+      });
     }
-    return item;
   }
-}
-Item.propTypes = {
-  /**
-   * Component to render as the root element. Useful when rendering a `Item` as `<a>` or `<Link>`.
-   * @since 0.0.48
-   */
-  component: PropTypes.elementType,
-  /**
-   * View mode.
-   * @since 2.1.0
-   */
-  view: PropTypes.oneOf([VIEW_SIMPLE, VIEW_CARD]),
-  /**
-   * Icon.
-   * @since 0.0.48
-   */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Title.
-   * @since 0.0.48
-   */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Content for footer.
-   * @since 2.1.0
-   */
-  footer: PropTypes.node,
-  /**
-   * Description. Renders as small grey text.
-   * @since 2.1.0
-   */
-  description: PropTypes.node,
-  /**
-   * Content of the `Item`.
-   * @since 0.0.48
-   */
-  children: PropTypes.node,
-  /**
-   * An unique value. It needs only in ItemList with selectable view.
-   * @since 2.3.0
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Tooltip for component.
-   * @since 2.5.1
-   */
-  tooltip: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * Whether disabled or not.
-   * @since 3.15.0
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Add hover shadow and pointer cursor.
-   * @since 3.26.0
-   */
-  hoverable: PropTypes.bool
-};
-Item.defaultProps = {
-  component: 'div',
-  view: VIEW_SIMPLE,
-  hoverable: undefined,
-  title: undefined,
-  description: undefined,
-  icon: undefined,
-  footer: undefined,
-  children: undefined,
-  value: undefined,
-  tooltip: undefined,
-  className: undefined,
-  disabled: undefined,
-  baseClassName: `${CLS_PREFIX}item`
+  const item = /*#__PURE__*/_jsxs(Tag, {
+    className: classNames(baseClassName, {
+      [`${baseClassName}--card`]: view === 'card',
+      [`${baseClassName}--disabled`]: disabled,
+      [`${baseClassName}--hoverable`]: hoverable
+    }, className),
+    ...props,
+    children: [/*#__PURE__*/_jsxs(Media, {
+      image: renderIcon(),
+      title: renderTitle(),
+      className: `${baseClassName}__media`,
+      children: [description && /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__description`,
+        children: description
+      }), Children.toArray(children).length ? /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__content`,
+        children: children
+      }) : null]
+    }), footer && /*#__PURE__*/_jsx("footer", {
+      className: `${baseClassName}__footer`,
+      children: footer
+    })]
+  });
+  if (tooltip) {
+    return createProxyProps(props => /*#__PURE__*/_jsx(Tooltip, {
+      title: tooltip,
+      children: /*#__PURE__*/cloneElement(item, props)
+    }));
+  }
+  return item;
 };
 export default Item;

package/esm/components/Overlay/Overlay.js

@@ -2,6 +2,7 @@
 
 import { disableDocumentScroll, enableDocumentScroll } from '../../utils';
 import { isValidElement, useRef, useState, useLayoutEffect, useCallback, useEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
 import { safeInvoke } from '../utils';
 import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_OVERLAY } from '../../constants';
@@ -31,18 +32,8 @@ const OverlayCore = _ref => {
     onAnimationExited,
     ...props
   } = _ref;
-  const animationTimeoutRef = useRef();
+  const backdropRef = useRef(null);
   const contentRef = useRef(null);
-  const prevIsOpen = useRef(externalIsOpen);
-  if (prevIsOpen.current !== externalIsOpen) {
-    prevIsOpen.current = externalIsOpen;
-    if (externalIsOpen) {
-      clearTimeout(animationTimeoutRef.current);
-    } else {
-      animationTimeoutRef.current = window.setTimeout(onAnimationExited, 300);
-    }
-  }
-  useEffect(() => () => clearTimeout(animationTimeoutRef.current), []);
   const [isOpen, setIsOpen] = useState(false);
   useEffect(() => setIsOpen(externalIsOpen), [externalIsOpen]);
   const focus = () => {
@@ -97,29 +88,48 @@ const OverlayCore = _ref => {
       children: element
     });
   };
+  const openClassName = `${baseClassName}--open`;
+  const transitionBaseProps = {
+    in: isOpen,
+    classNames: {
+      enterActive: openClassName,
+      enterDone: openClassName
+    },
+    timeout: 300
+  };
   return /*#__PURE__*/_jsx(Layer, {
     level: Z_INDEX_OVERLAY,
     children: /*#__PURE__*/_jsxs("div", {
-      className: classNames(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, isOpen && `${baseClassName}--open`, className),
+      className: classNames(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, className),
       style: {
         '--overlay-side-banner-background': sideBannerContainer?.background,
         '--overlay-side-banner-align': sideBannerContainer?.align,
         ...style
       },
       ...props,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}__backdrop`,
-        onClick: handleBackdropClick
-      }), /*#__PURE__*/_jsxs(FocusTrap, {
-        className: `${baseClassName}__content`,
-        onKeyUp: canCloseOnEscapePress ? handleContentKeyUp : undefined,
-        ref: contentRef,
-        role: "dialog",
-        "aria-modal": "true",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}__body`,
-          children: children
-        }), sideBanner && renderImage(sideBanner)]
+      children: [/*#__PURE__*/_jsx(CSSTransition, {
+        nodeRef: backdropRef,
+        ...transitionBaseProps,
+        children: /*#__PURE__*/_jsx("div", {
+          ref: backdropRef,
+          className: `${baseClassName}__backdrop`,
+          onClick: handleBackdropClick
+        })
+      }), /*#__PURE__*/_jsx(CSSTransition, {
+        onExited: onAnimationExited,
+        nodeRef: contentRef,
+        ...transitionBaseProps,
+        children: /*#__PURE__*/_jsxs(FocusTrap, {
+          className: `${baseClassName}__content`,
+          onKeyUp: canCloseOnEscapePress ? handleContentKeyUp : undefined,
+          ref: contentRef,
+          role: "dialog",
+          "aria-modal": "true",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__body`,
+            children: children
+          }), sideBanner && renderImage(sideBanner)]
+        })
       })]
     })
   });

package/esm/components/Popover/Popover.js

@@ -219,7 +219,7 @@ class Popover extends Component {
       ghost: true,
       icon: {
         name: 'cross-mark',
-        size: title ? 16 : 12
+        size: title ? '16' : '12'
       }
     });
     const heading = title && /*#__PURE__*/_jsx(Measure, {

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -27,6 +27,7 @@ class SegmentedControl extends Component {
       selected: this.props.selected,
       monoWidth: 0
     });
+    _defineProperty(this, "context", void 0);
     _defineProperty(this, "isCompact", false);
     _defineProperty(this, "rootRef", /*#__PURE__*/createRef());
     _defineProperty(this, "adjustMonospaced", () => {