@plesk/ui-library 3.35.7 → 3.35.8

package/cjs/components/Overlay/Overlay.js

@@ -38,7 +38,7 @@ const OverlayCore = _ref => {
     onAnimationExited,
     ...props
   } = _ref;
-  const overlayRef = (0, _react.useRef)(null);
+  const backdropRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => setIsOpen(externalIsOpen), [externalIsOpen]);
@@ -94,30 +94,38 @@ 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.jsx)(_reactTransitionGroup.CSSTransition, {
-      in: isOpen,
-      timeout: 300,
-      classNames: {
-        enterActive: `${baseClassName}--open`,
-        enterDone: `${baseClassName}--open`
-      },
-      onExited: onAnimationExited,
-      nodeRef: overlayRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      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
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: overlayRef,
-        className: (0, _classnames.default)(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, className),
-        ...props,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...props,
+      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.jsxs)(_FocusTrap.default, {
+        })
+      }), /*#__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,
@@ -127,8 +135,8 @@ const OverlayCore = _ref => {
             className: `${baseClassName}__body`,
             children: children
           }), sideBanner && renderImage(sideBanner)]
-        })]
-      })
+        })
+      })]
     })
   });
 };

package/cjs/index.js

@@ -46,5 +46,5 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-const version = exports.version = "3.35.7";
+const version = exports.version = "3.35.8";
 (0, _svg4everybody.default)();