@plesk/ui-library 3.45.1 → 3.46.0

package/esm/components/FormFieldPassword/FormFieldPassword.js

@@ -237,4 +237,5 @@ const FormFieldPasswordWrapper = props => {
     translate: translate
   });
 };
+FormFieldPasswordWrapper.defaultProps = FormFieldPassword.defaultProps;
 export default FormFieldPasswordWrapper;

package/esm/components/Layout/Layout.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { useInternalTranslate } from '../LocaleProvider';
 import { CLS_PREFIX } from '../../constants';
+import { disableDocumentScroll, enableDocumentScroll } from '../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const subscribeMatchMedia = (query, handler) => {
   const mq = window.matchMedia(query);
@@ -121,6 +122,17 @@ class Layout extends Component {
     this.unsubscribeMatchMedia = subscribeMatchMedia('(max-width: 1022px)', this.handleMatchMedia);
     this.unsubscribeClickOutside = subscribeClickOutside([this.sidebarRef, this.responsiveSidebarTogglerRef], this.handleClickOutside);
   }
+  componentDidUpdate(prevProps) {
+    const isRightSidebarOpen = this.props.rightSidebar && this.props.rightSidebarVisible;
+    const wasRightSidebarOpen = prevProps.rightSidebar && prevProps.rightSidebarVisible;
+    const isMobile = window.matchMedia('(max-width: 780px)').matches;
+    if (!wasRightSidebarOpen && isRightSidebarOpen && isMobile) {
+      disableDocumentScroll();
+    }
+    if (wasRightSidebarOpen && !isRightSidebarOpen) {
+      enableDocumentScroll();
+    }
+  }
   componentWillUnmount() {
     this.unsubscribeMatchMedia?.();
     this.unsubscribeClickOutside?.();
@@ -279,6 +291,42 @@ class Layout extends Component {
       })
     });
   }
+  renderRightSidebar({
+    rightSidebar,
+    rightSidebarVisible
+  }) {
+    if (!rightSidebar) {
+      return null;
+    }
+    const {
+      baseClassName
+    } = this.props;
+    return /*#__PURE__*/_jsx(CSSTransition, {
+      in: !rightSidebarVisible,
+      timeout: 300,
+      classNames: {
+        enter: `${baseClassName}__right-sidebar--enter`,
+        enterActive: `${baseClassName}__right-sidebar--active-enter`,
+        enterDone: `${baseClassName}__right-sidebar--on`,
+        exit: `${baseClassName}__right-sidebar--exit`,
+        exitActive: `${baseClassName}__right-sidebar--active-exit`,
+        exitDone: `${baseClassName}__right-sidebar--off`
+      },
+      children: /*#__PURE__*/_jsx("aside", {
+        className: `${baseClassName}__right-sidebar`,
+        children: /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__right-sidebar-inner`,
+          children: /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__right-sidebar-content`,
+            children: /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__right-sidebar-content-inner`,
+              children: rightSidebar
+            })
+          })
+        })
+      })
+    });
+  }
   renderMainContent({
     children
   }) {
@@ -323,6 +371,8 @@ class Layout extends Component {
       sidebarType,
       sidebarCollapsible,
       sidebarCollapsed,
+      rightSidebar,
+      rightSidebarVisible,
       translate,
       onSidebarToggle,
       contentAddon,
@@ -350,6 +400,7 @@ class Layout extends Component {
         [`${baseClassName}--sidebar`]: sidebar,
         [`${baseClassName}--sidebar-type-${sidebarType}`]: sidebarType && sidebar,
         [`${baseClassName}--sidebar-collapsed`]: sidebarType === 'collapsed' && isSidebarClosed,
+        [`${baseClassName}--right-sidebar-collapsed`]: !rightSidebar || !rightSidebarVisible,
         [`${baseClassName}--sidebar-folded`]: sidebarType === 'folded' && isSidebarClosed
       }, className),
       ...props,
@@ -362,15 +413,21 @@ class Layout extends Component {
           children: [this.renderSidebar({
             sidebar
           }), /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}__content`,
-            children: [this.renderContentAddon({
-              contentAddon
-            }), this.renderContentHeader({
-              contentHeader
-            }), this.renderMainContent({
-              children
-            }), this.renderFooter({
-              footer
+            className: `${baseClassName}__content-wrapper`,
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClassName}__content`,
+              children: [this.renderContentAddon({
+                contentAddon
+              }), this.renderContentHeader({
+                contentHeader
+              }), this.renderMainContent({
+                children
+              }), this.renderFooter({
+                footer
+              })]
+            }), this.renderRightSidebar({
+              rightSidebar,
+              rightSidebarVisible
             })]
           })]
         })]

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.45.1";
+const version = "3.46.0";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.45.1",
+  "version": "3.46.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",