@plesk/ui-library 3.35.6 → 3.35.8

package/cjs/components/AutoClosable/AutoClosable.js

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

package/cjs/components/InputNumber/InputNumber.js

@@ -42,8 +42,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/cjs/components/Item/Item.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Icon = _interopRequireWildcard(require("../Icon"));
@@ -19,23 +18,33 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-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 _react.Component {
-  renderTitle(title) {
+const Item = _ref => {
+  let {
+    children,
+    baseClassName = `${_constants.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__*/(0, _jsxRuntime.jsx)("span", {
@@ -60,8 +69,8 @@ class Item extends _react.Component {
       });
     }
     return title;
-  }
-  renderIcon(icon) {
+  };
+  const renderIcon = () => {
     if (!icon) {
       return null;
     }
@@ -74,147 +83,49 @@ class Item extends _react.Component {
     return _Icon.default.create(icon, {
       size: _Icon.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 = (0, _utils.wrapFunction)(props.onKeyDown, e => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            e.currentTarget.click();
-          }
-        });
-      }
-    }
-    const item = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
-      className: (0, _classnames.default)(baseClassName, {
-        [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled,
-        [`${baseClassName}--hoverable`]: hoverable
-      }, className),
-      ...props,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Media.default, {
-        image: this.renderIcon(icon),
-        title: this.renderTitle(title),
-        className: `${baseClassName}__media`,
-        children: [description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}__description`,
-          children: description
-        }), _react.Children.toArray(children).length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}__content`,
-          children: children
-        }) : null]
-      }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
-        className: `${baseClassName}__footer`,
-        children: footer
-      })]
-    });
-    if (tooltip) {
-      return (0, _utils.createProxyProps)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-        title: tooltip,
-        children: /*#__PURE__*/(0, _react.cloneElement)(item, props)
-      }));
+  };
+  if (props.onClick) {
+    if (disabled) {
+      props.onClick = e => e.preventDefault();
+    } else {
+      props.tabIndex = 0;
+      props.onKeyDown = (0, _utils.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.default.elementType,
-  /**
-   * View mode.
-   * @since 2.1.0
-   */
-  view: _propTypes.default.oneOf([VIEW_SIMPLE, VIEW_CARD]),
-  /**
-   * Icon.
-   * @since 0.0.48
-   */
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-  /**
-   * Title.
-   * @since 0.0.48
-   */
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-  /**
-   * Content for footer.
-   * @since 2.1.0
-   */
-  footer: _propTypes.default.node,
-  /**
-   * Description. Renders as small grey text.
-   * @since 2.1.0
-   */
-  description: _propTypes.default.node,
-  /**
-   * Content of the `Item`.
-   * @since 0.0.48
-   */
-  children: _propTypes.default.node,
-  /**
-   * An unique value. It needs only in ItemList with selectable view.
-   * @since 2.3.0
-   */
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /**
-   * Tooltip for component.
-   * @since 2.5.1
-   */
-  tooltip: _propTypes.default.node,
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.string,
-  /**
-   * Whether disabled or not.
-   * @since 3.15.0
-   */
-  disabled: _propTypes.default.bool,
-  /**
-   * Add hover shadow and pointer cursor.
-   * @since 3.26.0
-   */
-  hoverable: _propTypes.default.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: `${_constants.CLS_PREFIX}item`
+  const item = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
+    className: (0, _classnames.default)(baseClassName, {
+      [`${baseClassName}--card`]: view === 'card',
+      [`${baseClassName}--disabled`]: disabled,
+      [`${baseClassName}--hoverable`]: hoverable
+    }, className),
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Media.default, {
+      image: renderIcon(),
+      title: renderTitle(),
+      className: `${baseClassName}__media`,
+      children: [description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__description`,
+        children: description
+      }), _react.Children.toArray(children).length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__content`,
+        children: children
+      }) : null]
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
+      className: `${baseClassName}__footer`,
+      children: footer
+    })]
+  });
+  if (tooltip) {
+    return (0, _utils.createProxyProps)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: tooltip,
+      children: /*#__PURE__*/(0, _react.cloneElement)(item, props)
+    }));
+  }
+  return item;
 };
 var _default = exports.default = Item;

package/cjs/components/Overlay/Overlay.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _utils = require("../../utils");
 var _react = require("react");
+var _reactTransitionGroup = require("react-transition-group");
 var _utils2 = require("../utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
@@ -37,18 +38,8 @@ const OverlayCore = _ref => {
     onAnimationExited,
     ...props
   } = _ref;
-  const animationTimeoutRef = (0, _react.useRef)();
+  const backdropRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
-  const prevIsOpen = (0, _react.useRef)(externalIsOpen);
-  if (prevIsOpen.current !== externalIsOpen) {
-    prevIsOpen.current = externalIsOpen;
-    if (externalIsOpen) {
-      clearTimeout(animationTimeoutRef.current);
-    } else {
-      animationTimeoutRef.current = window.setTimeout(onAnimationExited, 300);
-    }
-  }
-  (0, _react.useEffect)(() => () => clearTimeout(animationTimeoutRef.current), []);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => setIsOpen(externalIsOpen), [externalIsOpen]);
   const focus = () => {
@@ -103,29 +94,48 @@ const OverlayCore = _ref => {
       children: element
     });
   };
+  const openClassName = `${baseClassName}--open`;
+  const transitionBaseProps = {
+    in: isOpen,
+    classNames: {
+      enterActive: openClassName,
+      enterDone: openClassName
+    },
+    timeout: 300
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layer.default, {
     level: _constants.Z_INDEX_OVERLAY,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, isOpen && `${baseClassName}--open`, className),
+      className: (0, _classnames.default)(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__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__backdrop`,
-        onClick: handleBackdropClick
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusTrap.default, {
-        className: `${baseClassName}__content`,
-        onKeyUp: canCloseOnEscapePress ? handleContentKeyUp : undefined,
-        ref: contentRef,
-        role: "dialog",
-        "aria-modal": "true",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}__body`,
-          children: children
-        }), sideBanner && renderImage(sideBanner)]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        nodeRef: backdropRef,
+        ...transitionBaseProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: backdropRef,
+          className: `${baseClassName}__backdrop`,
+          onClick: handleBackdropClick
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        onExited: onAnimationExited,
+        nodeRef: contentRef,
+        ...transitionBaseProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusTrap.default, {
+          className: `${baseClassName}__content`,
+          onKeyUp: canCloseOnEscapePress ? handleContentKeyUp : undefined,
+          ref: contentRef,
+          role: "dialog",
+          "aria-modal": "true",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__body`,
+            children: children
+          }), sideBanner && renderImage(sideBanner)]
+        })
       })]
     })
   });

package/cjs/components/Popover/Popover.js

@@ -225,7 +225,7 @@ class Popover extends _react.Component {
       ghost: true,
       icon: {
         name: 'cross-mark',
-        size: title ? 16 : 12
+        size: title ? '16' : '12'
       }
     });
     const heading = title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {

package/cjs/components/SegmentedControl/SegmentedControl.js

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