@plesk/ui-library 3.45.1 → 3.46.0

package/dist/plesk-ui-library.js

@@ -61321,7 +61321,7 @@ function useFocusVisible() {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@plesk/ui-library","version":"3.45.1","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"{src,styleguidist}/**/*.(less|css)\\"","format:check":"prettier --check src styleguidist","format":"prettier --write src styleguidist","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"rimraf ./styleguide && styleguidist build --config ./configs/styleguide.config.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.27.6","@floating-ui/react-dom":"^2.1.3","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","codemirror":"5.65.20","marked":"15.0.12","memoize-one":"^6.0.0","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"2.0.0","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^3.1.0","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.27.7","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.27.4","@babel/preset-env":"^7.27.2","@babel/preset-react":"^7.27.1","@babel/preset-typescript":"^7.27.1","@babel/types":"^7.27.7","@csstools/postcss-logical-float-and-clear":"^3.0.0","@plesk/eslint-config":"^4.0.0","@plesk/stylelint-config":"^3.0.1","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/buble":"^0.20.5","@types/classnames":"2.3.4","@types/codemirror":"^5.60.16","@types/doctrine":"^0.0.9","@types/jest":"^30.0.0","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^6.0.0","@types/node":"^24.0.7","@types/react":"^18.3.8","@types/react-dom":"^18.3.0","@types/react-measure":"2.0.12","@types/react-transition-group":"^4.4.12","@types/svg4everybody":"2.1.5","@types/webpack-env":"^1.18.8","autoprefixer":"^10.4.21","babel-loader":"^10.0.0","babel-plugin-transform-require-ignore":"^0.1.1","cross-env":"^10.0.0","css-loader":"^7.1.2","css-minimizer-webpack-plugin":"^7.0.2","eslint":"^9.30.0","eslint-config-prettier":"^10.1.5","eslint-plugin-markdown":"^5.1.0","html-webpack-plugin":"^5.6.3","jest":"^30.0.3","jest-dev-server":"^11.0.0","jest-environment-jsdom":"^30.0.2","jest-image-snapshot":"^6.5.1","less":"^4.3.0","less-loader":"^12.3.0","mini-css-extract-plugin":"^2.9.2","postcss":"^8.5.6","postcss-less":"^6.0.0","postcss-loader":"^8.1.1","postcss-logical":"^8.1.0","prettier":"^3.6.2","puppeteer-core":"22.15.0","react":"^18.3.1","react-docgen-typescript":"^2.4.0","react-dom":"^18.3.1","react-styleguidist":"^13.1.4","rimraf":"^6.0.1","rtlcss":"^4.3.0","style-loader":"^4.0.0","stylelint":"^16.21.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^8.0.4","stylelint-prettier":"^5.0.3","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.14","typescript":"5.9.2","typescript-eslint":"^8.35.0","webpack":"^5.99.9","webpack-cli":"^6.0.1"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"browserslist":["defaults","not op_mini all","not kaios > 0"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@plesk/ui-library","version":"3.46.0","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"{src,styleguidist}/**/*.(less|css)\\"","format:check":"prettier --check src styleguidist","format":"prettier --write src styleguidist","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"rimraf ./styleguide && styleguidist build --config ./configs/styleguide.config.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.27.6","@floating-ui/react-dom":"^2.1.3","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","codemirror":"5.65.20","marked":"15.0.12","memoize-one":"^6.0.0","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"2.0.0","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^3.1.0","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.27.7","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.27.4","@babel/preset-env":"^7.27.2","@babel/preset-react":"^7.27.1","@babel/preset-typescript":"^7.27.1","@babel/types":"^7.27.7","@csstools/postcss-logical-float-and-clear":"^3.0.0","@plesk/eslint-config":"^4.0.0","@plesk/stylelint-config":"^3.0.1","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/buble":"^0.20.5","@types/classnames":"2.3.4","@types/codemirror":"^5.60.16","@types/doctrine":"^0.0.9","@types/jest":"^30.0.0","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^6.0.0","@types/node":"^24.0.7","@types/react":"^18.3.8","@types/react-dom":"^18.3.0","@types/react-measure":"2.0.12","@types/react-transition-group":"^4.4.12","@types/svg4everybody":"2.1.5","@types/webpack-env":"^1.18.8","autoprefixer":"^10.4.21","babel-loader":"^10.0.0","babel-plugin-transform-require-ignore":"^0.1.1","cross-env":"^10.0.0","css-loader":"^7.1.2","css-minimizer-webpack-plugin":"^7.0.2","eslint":"^9.30.0","eslint-config-prettier":"^10.1.5","eslint-plugin-markdown":"^5.1.0","html-webpack-plugin":"^5.6.3","jest":"^30.0.3","jest-dev-server":"^11.0.0","jest-environment-jsdom":"^30.0.2","jest-image-snapshot":"^6.5.1","less":"^4.3.0","less-loader":"^12.3.0","mini-css-extract-plugin":"^2.9.2","postcss":"^8.5.6","postcss-less":"^6.0.0","postcss-loader":"^8.1.1","postcss-logical":"^8.1.0","prettier":"^3.6.2","puppeteer-core":"22.15.0","react":"^18.3.1","react-docgen-typescript":"^2.4.0","react-dom":"^18.3.1","react-styleguidist":"^13.1.4","rimraf":"^6.0.1","rtlcss":"^4.3.0","style-loader":"^4.0.0","stylelint":"^16.21.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^8.0.4","stylelint-prettier":"^5.0.3","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.14","typescript":"5.9.2","typescript-eslint":"^8.35.0","webpack":"^5.99.9","webpack-cli":"^6.0.1"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"browserslist":["defaults","not op_mini all","not kaios > 0"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
 
 /***/ }),
 
@@ -69104,6 +69104,7 @@ const FormFieldPasswordWrapper = props => {
     translate: translate
   });
 };
+FormFieldPasswordWrapper.defaultProps = FormFieldPassword.defaultProps;
 var _default = exports["default"] = FormFieldPasswordWrapper;
 
 /***/ }),
@@ -72047,6 +72048,7 @@ var _LocaleProvider = __webpack_require__(/*! ../LocaleProvider */ "./components
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
 __webpack_require__(/*! ../../helpers/base.less */ "./helpers/base.less");
 __webpack_require__(/*! ./Layout.less */ "./components/Layout/Layout.less");
+var _utils = __webpack_require__(/*! ../../utils */ "./utils.tsx");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -72165,6 +72167,17 @@ class Layout extends _react.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) {
+      (0, _utils.disableDocumentScroll)();
+    }
+    if (wasRightSidebarOpen && !isRightSidebarOpen) {
+      (0, _utils.enableDocumentScroll)();
+    }
+  }
   componentWillUnmount() {
     this.unsubscribeMatchMedia?.();
     this.unsubscribeClickOutside?.();
@@ -72323,6 +72336,42 @@ class Layout extends _react.Component {
       })
     });
   }
+  renderRightSidebar({
+    rightSidebar,
+    rightSidebarVisible
+  }) {
+    if (!rightSidebar) {
+      return null;
+    }
+    const {
+      baseClassName
+    } = this.props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.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__*/(0, _jsxRuntime.jsx)("aside", {
+        className: `${baseClassName}__right-sidebar`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${baseClassName}__right-sidebar-inner`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__right-sidebar-content`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${baseClassName}__right-sidebar-content-inner`,
+              children: rightSidebar
+            })
+          })
+        })
+      })
+    });
+  }
   renderMainContent({
     children
   }) {
@@ -72367,6 +72416,8 @@ class Layout extends _react.Component {
       sidebarType,
       sidebarCollapsible,
       sidebarCollapsed,
+      rightSidebar,
+      rightSidebarVisible,
       translate,
       onSidebarToggle,
       contentAddon,
@@ -72394,6 +72445,7 @@ class Layout extends _react.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,
@@ -72406,15 +72458,21 @@ class Layout extends _react.Component {
           children: [this.renderSidebar({
             sidebar
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: `${baseClassName}__content`,
-            children: [this.renderContentAddon({
-              contentAddon
-            }), this.renderContentHeader({
-              contentHeader
-            }), this.renderMainContent({
-              children
-            }), this.renderFooter({
-              footer
+            className: `${baseClassName}__content-wrapper`,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: `${baseClassName}__content`,
+              children: [this.renderContentAddon({
+                contentAddon
+              }), this.renderContentHeader({
+                contentHeader
+              }), this.renderMainContent({
+                children
+              }), this.renderFooter({
+                footer
+              })]
+            }), this.renderRightSidebar({
+              rightSidebar,
+              rightSidebarVisible
             })]
           })]
         })]