@plesk/ui-library 3.40.7 → 3.40.9

package/dist/plesk-ui-library.js

@@ -768,7 +768,7 @@ const Action = _ref => {
     size: _Icon.ICON_SIZE_16
   });
   let size = _Icon.ICON_SIZE_16;
-  if ( /*#__PURE__*/(0, _react.isValidElement)(icon) && icon.props.size) {
+  if (/*#__PURE__*/(0, _react.isValidElement)(icon) && icon.props.size) {
     ({
       size
     } = icon.props);
@@ -1158,7 +1158,7 @@ const Badge = _ref => {
         children: label
       });
     }
-    if ( /*#__PURE__*/(0, _react.isValidElement)(label)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(label)) {
       const cloneProps = {
         className: (0, _classnames.default)(`${baseClassName}__value`, {
           [`${baseClassName}__value--dot`]: isEmpty
@@ -1345,7 +1345,7 @@ const renderCaret = _ref2 => {
   } else {
     caretElement = caret;
   }
-  if ( /*#__PURE__*/(0, _react.isValidElement)(caretElement)) {
+  if (/*#__PURE__*/(0, _react.isValidElement)(caretElement)) {
     caretElement = /*#__PURE__*/(0, _react.cloneElement)(caretElement, {
       className: (0, _classnames.default)(`${baseClassName}__caret`, caretElement.props.className)
     });
@@ -1813,13 +1813,13 @@ class Card extends _react.Component {
     const result = [];
     if (!this.isRow()) {
       buttons.forEach((btn, index) => {
-        result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
+        result.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
           ...btn
         }, btn.key || index));
       });
     }
     if (menu) {
-      result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
+      result.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
         menu: menu,
         menuPlacement: 'bottom-end',
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
@@ -1828,7 +1828,7 @@ class Card extends _react.Component {
       }, "menu"));
     }
     if (rowContent && !this.isTile()) {
-      result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
+      result.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
         icon: {
           name: 'chevron-down',
           flipVertical: this.isExtended()
@@ -2951,7 +2951,7 @@ const CardListToolbar = _ref2 => {
   if (onViewChange && currentView !== _CardList.VIEW_RESPONSIVE) {
     const hasExpander = groups.filter(isToolbarExpander).length > 0;
     if (!hasExpander) {
-      toolbar.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarExpander, {}, "expander"));
+      toolbar.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarExpander, {}, "expander"));
     }
     toolbar.push(renderView(onViewChange, currentView));
   }
@@ -3696,7 +3696,7 @@ class CodeEditor extends _react.Component {
     };
   }
   componentDidMount() {
-    Promise.resolve().then(() => _interopRequireWildcard(__webpack_require__( /* webpackChunkName: "codemirror" *//*! ./CodeMirror */ "./components/CodeEditor/CodeMirror.tsx"))).then(_ref2 => {
+    Promise.resolve().then(() => _interopRequireWildcard(__webpack_require__(/* webpackChunkName: "codemirror" *//*! ./CodeMirror */ "./components/CodeEditor/CodeMirror.tsx"))).then(_ref2 => {
       let {
         CodeMirror
       } = _ref2;
@@ -4107,7 +4107,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const collect = function (children) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   _react.Children.forEach(children, child => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _ComboBoxOption.default) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _ComboBoxOption.default) {
       // eslint-disable-next-line prefer-const
       let {
         disabled,
@@ -4503,7 +4503,7 @@ const ComboBoxDropdown = _ref => {
         className: `${baseClassName}__menu`,
         children: [groups.reduce((acc, group) => {
           if (group.label) {
-            acc.push( /*#__PURE__*/(0, _react.createElement)(_Menu.MenuHeader, {
+            acc.push(/*#__PURE__*/(0, _react.createElement)(_Menu.MenuHeader, {
               ...group.props,
               key: `group_${group.label}`
             }, group.label));
@@ -4538,7 +4538,7 @@ const ComboBoxDropdown = _ref => {
               onMouseDown,
               'data-index': optionIndex
             };
-            acc.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
+            acc.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
               ...menuItemProps,
               children: option.children
             }, `option_${option.value}`));
@@ -4952,108 +4952,79 @@ Object.defineProperty(exports, "__esModule", ({
 exports["default"] = void 0;
 var _react = __webpack_require__(/*! react */ "react");
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
-var _reactMeasure = _interopRequireDefault(__webpack_require__(/*! react-measure */ "../node_modules/react-measure/dist/index.esm.js"));
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
 var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.tsx"));
 var _Link = _interopRequireDefault(__webpack_require__(/*! ../Link */ "./components/Link/index.tsx"));
+var _useContentOverflow = __webpack_require__(/*! ./useContentOverflow */ "./components/Cuttable/useContentOverflow.tsx");
 __webpack_require__(/*! ./Cuttable.less */ "./components/Cuttable/Cuttable.less");
 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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
 /**
  * `Cuttable` component is used for showing and hiding part of content.
  * @since 0.0.42
  */
-class Cuttable extends _react.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      collapsed: undefined,
-      autofit: true
-    });
-    _defineProperty(this, "contentRef", /*#__PURE__*/(0, _react.createRef)());
-    _defineProperty(this, "handleToggle", () => {
-      this.setState(_ref => {
-        let {
-          collapsed
-        } = _ref;
-        return {
-          collapsed: !collapsed,
-          autofit: false
-        };
-      });
-    });
-    _defineProperty(this, "handleResize", () => {
-      if (!this.state.autofit) {
-        return;
-      }
-      const content = this.contentRef.current;
-      if (content && content.scrollHeight > content.clientHeight) {
-        this.setState({
-          collapsed: this.props.collapsed
-        });
-      }
-    });
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      children,
-      collapsed,
-      maxHeight,
-      locale,
-      ...props
-    } = this.props;
-    const showMoreLessKey = this.state.collapsed ? 'showMore' : 'showLess';
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(baseClassName, {
-        [`${baseClassName}--collapse`]: this.state.collapsed === true,
-        [`${baseClassName}--expand`]: this.state.collapsed === false
-      }, className),
-      ...props,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
-        onResize: this.handleResize,
-        innerRef: el => {
-          this.contentRef.current = el;
-        },
-        children: _ref2 => {
-          let {
-            measureRef
-          } = _ref2;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: `${baseClassName}__content`,
-            style: {
-              maxHeight
-            },
-            ref: measureRef,
-            children: children
-          });
-        }
-      }), this.state.collapsed !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__action`,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
-          onClick: this.handleToggle,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-            content: `Cuttable.${showMoreLessKey}`,
-            fallback: locale[showMoreLessKey]
-          })
+const Cuttable = _ref => {
+  let {
+    children,
+    collapsed: externalCollapsed = true,
+    maxHeight = '7rem',
+    locale = {
+      showMore: 'Show more',
+      showLess: 'Show less'
+    },
+    className,
+    baseClassName = `${_constants.CLS_PREFIX}cuttable`,
+    ...props
+  } = _ref;
+  const contentRef = (0, _react.useRef)(null);
+  const hiddenElementRef = (0, _react.useRef)(null);
+  const [collapsed, setCollapsed] = (0, _react.useState)(externalCollapsed);
+  const [prevExternalCollapsed, setPrevExternalCollapsed] = (0, _react.useState)(externalCollapsed);
+  if (prevExternalCollapsed !== externalCollapsed) {
+    setPrevExternalCollapsed(externalCollapsed);
+    setCollapsed(externalCollapsed);
+  }
+  const actionLocaleKey = collapsed ? 'showMore' : 'showLess';
+  const isContentOverflowing = (0, _useContentOverflow.useContentOverflow)({
+    contentRef,
+    hiddenElementRef,
+    maxHeight
+  });
+  const toggle = () => setCollapsed(!collapsed);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(baseClassName, {
+      [`${baseClassName}--collapse`]: collapsed,
+      [`${baseClassName}--expand`]: !collapsed
+    }, className),
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: contentRef,
+      className: `${baseClassName}__content`,
+      style: {
+        maxHeight
+      },
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: hiddenElementRef,
+      className: `${baseClassName}__height-meter `,
+      style: {
+        height: maxHeight
+      },
+      "aria-hidden": true
+    }), isContentOverflowing && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}__action`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+        onClick: toggle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+          content: `Cuttable.${actionLocaleKey}`,
+          fallback: locale[actionLocaleKey]
         })
-      })]
-    });
-  }
-}
-_defineProperty(Cuttable, "defaultProps", {
-  collapsed: true,
-  maxHeight: '7rem',
-  locale: {
-    showMore: 'Show more',
-    showLess: 'Show less'
-  },
-  baseClassName: `${_constants.CLS_PREFIX}cuttable`
-});
+      })
+    })]
+  });
+};
 var _default = exports["default"] = Cuttable;
 
 /***/ }),
@@ -5081,6 +5052,51 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 /***/ }),
 
+/***/ "./components/Cuttable/useContentOverflow.tsx":
+/*!****************************************************!*\
+  !*** ./components/Cuttable/useContentOverflow.tsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.useContentOverflow = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+var _hooks = __webpack_require__(/*! ../../hooks */ "./hooks/index.tsx");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const useContentOverflow = _ref => {
+  let {
+    contentRef,
+    hiddenElementRef,
+    maxHeight
+  } = _ref;
+  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
+  const checkHeight = () => {
+    const contentElement = contentRef.current;
+    const hiddenElement = hiddenElementRef.current;
+    if (!contentElement || !hiddenElement) return;
+    setIsOverflowing(contentElement.scrollHeight > hiddenElement.getBoundingClientRect().height);
+  };
+  const checkHeightRef = (0, _react.useRef)(checkHeight);
+  checkHeightRef.current = checkHeight;
+  (0, _react.useLayoutEffect)(() => {
+    checkHeightRef.current();
+  }, [maxHeight]);
+  (0, _hooks.useResizeObserver)({
+    ref: contentRef,
+    onResize: checkHeight
+  });
+  return isOverflowing;
+};
+exports.useContentOverflow = useContentOverflow;
+
+/***/ }),
+
 /***/ "./components/Dialog/Dialog.tsx":
 /*!**************************************!*\
   !*** ./components/Dialog/Dialog.tsx ***!
@@ -5157,7 +5173,7 @@ const Dialog = _ref => {
   }, [isOpen]);
   const renderImage = (image, block) => {
     const classPrefix = `${baseClassName}__${block}`;
-    if ( /*#__PURE__*/(0, _react.isValidElement)(image)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(image)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classPrefix,
         children: image
@@ -5232,7 +5248,7 @@ const Dialog = _ref => {
   };
   let childrenElement;
   if (form) {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(form)) {
       childrenElement = /*#__PURE__*/(0, _react.cloneElement)(form, {
         cancelButton: getCancelButtonProps(form.props),
         footerClassName: (0, _classnames.default)(form.props.footerClassName, `${baseClassName}__form-footer`)
@@ -5456,7 +5472,7 @@ const Drawer = _ref => {
       });
     }
     if (form) {
-      if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
+      if (/*#__PURE__*/(0, _react.isValidElement)(form)) {
         return /*#__PURE__*/(0, _react.cloneElement)(form, {
           className: (0, _classnames.default)(`${baseClassName}__form`, form.props.className),
           cancelButton: form.props.cancelButton === false ? false : {
@@ -5902,7 +5918,7 @@ const createTarget = (node, _ref) => {
     onToggle,
     targetRef
   } = _ref;
-  if (!( /*#__PURE__*/(0, _react.isValidElement)(node) && node.type !== _Translate.default)) {
+  if (!(/*#__PURE__*/(0, _react.isValidElement)(node) && node.type !== _Translate.default)) {
     node = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       caret: true,
       children: node
@@ -7037,7 +7053,7 @@ class Form extends _react.Component {
     } = this.props;
     if (Array.isArray(additionalButtons)) {
       return additionalButtons.map(element => {
-        if ( /*#__PURE__*/(0, _react.isValidElement)(element)) {
+        if (/*#__PURE__*/(0, _react.isValidElement)(element)) {
           const props = {
             className: (0, _classnames.default)(element.props.className, `${baseClassName}__additional-button`)
           };
@@ -9476,7 +9492,7 @@ const create = function (icon) {
   if (!icon) {
     return icon;
   }
-  if ( /*#__PURE__*/(0, _react.isValidElement)(icon)) {
+  if (/*#__PURE__*/(0, _react.isValidElement)(icon)) {
     const {
       className,
       ...props
@@ -10235,7 +10251,7 @@ const Item = _ref => {
         children: title
       });
     }
-    if ( /*#__PURE__*/(0, _react.isValidElement)(title)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(title)) {
       title = /*#__PURE__*/(0, _react.cloneElement)(title, {
         className: (0, _classnames.default)(`${baseClassName}__title`, title.props.className)
       });
@@ -10546,7 +10562,7 @@ class ItemList extends _react.Component {
     } = this.props;
     if (reorderable) {
       // @ts-ignore
-      Promise.resolve().then(() => _interopRequireWildcard(__webpack_require__( /* webpackChunkName: "react-sortable-hoc" *//*! react-sortable-hoc */ "../node_modules/react-sortable-hoc/dist/commonjs/index.js"))).then(_ref2 => {
+      Promise.resolve().then(() => _interopRequireWildcard(__webpack_require__(/* webpackChunkName: "react-sortable-hoc" *//*! react-sortable-hoc */ "../node_modules/react-sortable-hoc/dist/commonjs/index.js"))).then(_ref2 => {
         let {
           sortableContainer,
           sortableElement
@@ -10568,7 +10584,7 @@ class ItemList extends _react.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
       ...props,
       children: _react.Children.map(children, child => {
-        if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+        if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridCol.default, {
             className: (0, _classnames.default)(`${baseClassName}__col`),
             children: /*#__PURE__*/(0, _react.cloneElement)(child, this.createItemProps(child))
@@ -10637,7 +10653,7 @@ class ItemList extends _react.Component {
       onSortEnd: onReorderEnd,
       ...props,
       children: _react.Children.map(children, (child, index) => {
-        if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+        if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
           const {
             disabled
           } = child.props;
@@ -10848,7 +10864,7 @@ const Layer = _ref => {
   const parentLevel = (0, _react.useContext)(LevelContext);
   const container = (0, _react.useContext)(PortalContext) || document.body;
   const renderChildren = () => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(children)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(children)) {
       return /*#__PURE__*/(0, _react.cloneElement)(children, {
         style: {
           ...children.props.style,
@@ -10858,7 +10874,7 @@ const Layer = _ref => {
     }
     return children;
   };
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(LevelContext.Provider, {
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(LevelContext.Provider, {
     value: parentLevel + level,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)(baseClassName, className),
@@ -11554,7 +11570,7 @@ const getHumanTotalRows = _ref2 => {
   });
   switch (mode) {
     case 'totalRows':
-      return wrapToText( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+      return wrapToText(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         namespace: "List",
         content: "totalRows",
         fallback: "%%totalRows%% items total",
@@ -11564,7 +11580,7 @@ const getHumanTotalRows = _ref2 => {
         translators: translators
       }));
     case 'selectedRows':
-      return wrapToText( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+      return wrapToText(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
@@ -11578,7 +11594,7 @@ const getHumanTotalRows = _ref2 => {
         translators: translators
       }));
     case 'selectedAllRows':
-      return wrapToText( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+      return wrapToText(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
@@ -11864,7 +11880,7 @@ class List extends _react.Component {
     }
   }
   applyReorderableList() {
-    Promise.resolve().then(() => _interopRequireWildcard(__webpack_require__( /* webpackChunkName: "react-movable" *//*! @plesk/react-movable */ "../node_modules/@plesk/react-movable/lib/index.js"))).then(_ref6 => {
+    Promise.resolve().then(() => _interopRequireWildcard(__webpack_require__(/* webpackChunkName: "react-movable" *//*! @plesk/react-movable */ "../node_modules/@plesk/react-movable/lib/index.js"))).then(_ref6 => {
       let {
         List: ReorderableList
       } = _ref6;
@@ -12920,7 +12936,7 @@ const ListActions = _ref => {
   const secondaryItems = [];
   let secondaryCount = 0;
   _react.Children.toArray(children).forEach((node, index) => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(node) && node.type === _ListAction.default) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(node) && node.type === _ListAction.default) {
       const {
         primary,
         hidden
@@ -12933,7 +12949,7 @@ const ListActions = _ref => {
       } else {
         secondaryCount++;
         if (!hidden) {
-          secondaryItems.push( /*#__PURE__*/(0, _react.cloneElement)(node, {
+          secondaryItems.push(/*#__PURE__*/(0, _react.cloneElement)(node, {
             primary: false
           }));
         }
@@ -13385,7 +13401,7 @@ const applyParams = function (message) {
     if (param === undefined) {
       result.push(m[0]);
     } else if (typeof param === 'object' && /*#__PURE__*/(0, _react.isValidElement)(param)) {
-      result.push( /*#__PURE__*/(0, _react.cloneElement)(param, {
+      result.push(/*#__PURE__*/(0, _react.cloneElement)(param, {
         key: m[1]
       }));
       hasElements = true;
@@ -13664,7 +13680,7 @@ const Media = _ref => {
         children: title
       });
     }
-    if ( /*#__PURE__*/(0, _react.isValidElement)(title)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(title)) {
       return /*#__PURE__*/(0, _react.cloneElement)(title, {
         className: (0, _classnames.default)(`${baseClassName}__title`, title.props.className)
       });
@@ -13802,7 +13818,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const hasIconItem = children => {
   let result = false;
   _react.Children.forEach(children, child => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(child) && (child.type === _MenuSelectableItem.default || child.props.icon)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child) && (child.type === _MenuSelectableItem.default || child.props.icon)) {
       result = true;
     }
   });
@@ -14431,7 +14447,7 @@ const OverlayCore = _ref => {
   const renderImage = sideBanner => {
     const classPrefix = `${baseClassName}__side`;
     let element = null;
-    if ( /*#__PURE__*/(0, _react.isValidElement)(sideBanner)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(sideBanner)) {
       element = sideBanner;
     } else if (typeof sideBanner === 'string') {
       element = /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -15730,7 +15746,7 @@ class Progress extends _react.Component {
     let isFailed = false;
     if (children) {
       _react.Children.forEach(children, child => {
-        if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+        if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
           const status = child.props.status ?? _ProgressStep.PROGRESS_STEP_DEFAULT_STATUS;
           isNotStarted = isNotStarted && status === _ProgressStep.STATUS_NOT_STARTED;
           isFinished = isFinished && status === _ProgressStep.STATUS_DONE;
@@ -16996,6 +17012,137 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 /***/ }),
 
+/***/ "./components/SegmentedControl/ButtonGroupControl.tsx":
+/*!************************************************************!*\
+  !*** ./components/SegmentedControl/ButtonGroupControl.tsx ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
+var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./components/Button/index.tsx"));
+var _ButtonGroup = _interopRequireDefault(__webpack_require__(/*! ../ButtonGroup */ "./components/ButtonGroup/index.tsx"));
+var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const ButtonGroupControl = _ref => {
+  let {
+    buttons,
+    selectedValues,
+    onClick,
+    ghost,
+    monospaced,
+    isResponsive,
+    baseClassName
+  } = _ref;
+  const buttonsRef = (0, _react.useRef)([]);
+  const [monoWidth, setMonoWidth] = (0, _react.useState)(0);
+  (0, _react.useLayoutEffect)(() => {
+    if (!monospaced) return;
+    const widths = buttonsRef.current.map(button => button.getBoundingClientRect().width);
+    const maxWidth = Math.max(...widths);
+    if (monoWidth !== maxWidth) {
+      setMonoWidth(maxWidth);
+    }
+  }, [monospaced, monoWidth]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
+    className: `${baseClassName}__button-group`,
+    children: buttons.map((_ref2, index) => {
+      let {
+        value,
+        title,
+        style = {},
+        ...buttonProps
+      } = _ref2;
+      const shouldApplyMonoWidth = !isResponsive && monospaced && monoWidth;
+      const buttonStyle = {
+        width: shouldApplyMonoWidth ? monoWidth : style.width,
+        ...style
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ref: node => {
+          index === 0 && (buttonsRef.current = []);
+          node && buttonsRef.current.push(node);
+        },
+        selected: selectedValues.includes(value),
+        ghost: ghost,
+        onClick: () => onClick(value),
+        ...buttonProps,
+        className: (0, _classnames.default)(buttonProps.className, `${baseClassName}__button`),
+        style: buttonStyle,
+        children: title
+      }, `${value}`);
+    })
+  });
+};
+var _default = exports["default"] = ButtonGroupControl;
+
+/***/ }),
+
+/***/ "./components/SegmentedControl/DropdownControl.tsx":
+/*!*********************************************************!*\
+  !*** ./components/SegmentedControl/DropdownControl.tsx ***!
+  \*********************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
+var _Menu = _interopRequireWildcard(__webpack_require__(/*! ../Menu */ "./components/Menu/index.tsx"));
+var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const DropdownControl = _ref => {
+  let {
+    buttons,
+    selected,
+    onClick
+  } = _ref;
+  const {
+    title = ''
+  } = buttons.find(button => button.value === selected) || {};
+  const menu = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+    children: buttons.map(_ref2 => {
+      let {
+        title,
+        value,
+        ...buttonProps
+      } = _ref2;
+      const handleClick = () => {
+        onClick(value);
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
+        ...buttonProps,
+        onClick: handleClick,
+        children: title
+      }, `${value}`);
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
+    menu: menu,
+    children: title
+  });
+};
+var _default = exports["default"] = DropdownControl;
+
+/***/ }),
+
 /***/ "./components/SegmentedControl/SegmentedControl.tsx":
 /*!**********************************************************!*\
   !*** ./components/SegmentedControl/SegmentedControl.tsx ***!
@@ -17012,297 +17159,130 @@ exports["default"] = exports.SEGMENTED_CONTROL_BASE_CLASS_NAME = void 0;
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
 var _react = __webpack_require__(/*! react */ "react");
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
-var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./components/Button/index.tsx"));
-var _ButtonGroup = _interopRequireDefault(__webpack_require__(/*! ../ButtonGroup */ "./components/ButtonGroup/index.tsx"));
-var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
-var _Menu = _interopRequireWildcard(__webpack_require__(/*! ../Menu */ "./components/Menu/index.tsx"));
 var _ResponsiveContext = _interopRequireDefault(__webpack_require__(/*! ../ResponsiveContext */ "./components/ResponsiveContext/index.tsx"));
 var _Squeezer = _interopRequireDefault(__webpack_require__(/*! ../Squeezer */ "./components/Squeezer/index.tsx"));
+var _DropdownControl = _interopRequireDefault(__webpack_require__(/*! ./DropdownControl */ "./components/SegmentedControl/DropdownControl.tsx"));
+var _ButtonGroupControl = _interopRequireDefault(__webpack_require__(/*! ./ButtonGroupControl */ "./components/SegmentedControl/ButtonGroupControl.tsx"));
+var _useResponsive = __webpack_require__(/*! ./useResponsive */ "./components/SegmentedControl/useResponsive.tsx");
+var _useSelected = __webpack_require__(/*! ./useSelected */ "./components/SegmentedControl/useSelected.tsx");
 __webpack_require__(/*! ../../helpers/base.less */ "./helpers/base.less");
 __webpack_require__(/*! ./SegmentedControl.less */ "./components/SegmentedControl/SegmentedControl.less");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-const alphaSort = (a, b) => a > b ? 1 : -1;
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
 const SEGMENTED_CONTROL_BASE_CLASS_NAME = exports.SEGMENTED_CONTROL_BASE_CLASS_NAME = `${_constants.CLS_PREFIX}segmented-control`;
 
 /**
- *  `Segmented Control` is a group of several [Buttons](#!/Button)
+ * `Segmented Control` is a group of several [Buttons](#!/Button)
  * each of which functions as a mutually exclusive option.
  * @since 0.0.68
  */
-class SegmentedControl extends _react.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      selected: this.props.selected,
-      monoWidth: 0
-    });
-    _defineProperty(this, "context", void 0);
-    _defineProperty(this, "isCompact", false);
-    _defineProperty(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
-    _defineProperty(this, "adjustMonospaced", () => {
-      const {
-        baseClassName,
-        monospaced
-      } = this.props;
-      if (monospaced) {
-        let monoWidth = 0;
-        this.rootRef.current?.querySelectorAll(`.${baseClassName}__button`).forEach(el => {
-          monoWidth = Math.max(monoWidth, el.getBoundingClientRect().width);
-        });
-        if (monoWidth !== this.state.monoWidth) {
-          this.setState({
-            monoWidth
-          });
-        }
-      }
-    });
-    _defineProperty(this, "handleChange", value => () => {
-      const {
-        multiple,
-        onChange
-      } = this.props;
-      const {
-        selected
-      } = this.state;
-      let prevSelected = selected;
-      let newSelected;
-      if (multiple) {
-        const isSelectedArray = Array.isArray(selected);
-        newSelected = isSelectedArray ? [...selected] : [];
-        if (!isSelectedArray || selected.indexOf(value) === -1) {
-          newSelected.push(value);
-        } else {
-          newSelected.splice(selected.indexOf(value), 1);
-        }
-        newSelected.sort(alphaSort);
-        if (isSelectedArray) {
-          prevSelected = [...selected].sort(alphaSort);
-        }
-      } else {
-        newSelected = value;
-      }
-      if (JSON.stringify(prevSelected) !== JSON.stringify(newSelected)) {
-        this.setState({
-          selected: newSelected
-        });
-        onChange?.(newSelected);
-      }
-    });
-    _defineProperty(this, "compact", () => {
-      if (this.isCompact) {
-        return false;
-      }
-      this.isCompact = true;
-      this.forceUpdate();
-      return true;
-    });
-    _defineProperty(this, "uncompact", () => {
-      if (!this.isCompact) {
-        return false;
-      }
-      this.isCompact = false;
-      this.forceUpdate();
-      return true;
-    });
-  }
-  static getDerivedStateFromProps(props, state) {
-    const {
-      selected,
-      multiple
-    } = props;
-    const {
-      prevSelected
-    } = state;
-    const nextState = {
-      selected: state.selected
-    };
-    if (selected !== prevSelected) {
-      nextState.selected = selected;
-    }
-    if (multiple && nextState.selected && !(nextState.selected instanceof Array)) {
-      nextState.selected = [nextState.selected];
-    }
-    nextState.prevSelected = selected;
-    return nextState;
-  }
-  componentDidMount() {
-    this.adjustMonospaced();
-  }
-  componentDidUpdate() {
-    this.adjustMonospaced();
-  }
-  isResponsive() {
-    return this.context === undefined ? this.isCompact : this.context;
-  }
-  renderControl() {
-    const {
-      buttons,
-      multiple
-    } = this.props;
-    const hasIcons = buttons.some(_ref => {
+const SegmentedControl = _ref => {
+  let {
+    label,
+    labelPlacement = 'top',
+    buttons,
+    monospaced = false,
+    multiple = false,
+    selected: externalSelected,
+    onChange,
+    inline = false,
+    ghost = false,
+    className,
+    baseClassName = SEGMENTED_CONTROL_BASE_CLASS_NAME,
+    ...props
+  } = _ref;
+  const rootRef = (0, _react.useRef)(null);
+  const {
+    isResponsive,
+    isInResponsiveContext,
+    ...squeezerProps
+  } = (0, _useResponsive.useResponsive)();
+  const {
+    selectedValues,
+    handleChange
+  } = (0, _useSelected.useSelected)({
+    multiple,
+    externalSelected,
+    onChange
+  });
+  const renderControl = () => {
+    const hasIcons = buttons.some(_ref2 => {
       let {
         icon
-      } = _ref;
+      } = _ref2;
       return !!icon;
     });
-    if (!hasIcons && !multiple && this.isResponsive()) {
-      return this.renderDropdown();
+    if (!hasIcons && !multiple && isResponsive) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownControl.default, {
+        buttons: buttons,
+        selected: selectedValues[0],
+        onClick: handleChange
+      });
     }
-    return this.renderButtonGroup();
-  }
-  renderDropdown() {
-    const {
-      buttons,
-      onChange
-    } = this.props;
-    const {
-      selected
-    } = this.state;
-    const {
-      title = ''
-    } = buttons.find(button => button.value === selected) || {};
-    const menu = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
-      children: buttons.map(_ref2 => {
-        let {
-          title,
-          value,
-          ...buttonProps
-        } = _ref2;
-        const menuItemProps = {};
-        if (onChange !== null) {
-          menuItemProps.onClick = this.handleChange(value);
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
-          ...buttonProps,
-          ...menuItemProps,
-          children: title
-        }, `${value}`);
-      })
-    });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
-      menu: menu,
-      children: title
-    });
-  }
-  renderButtonGroup() {
-    const {
-      buttons,
-      monospaced,
-      multiple,
-      onChange,
-      ghost,
-      baseClassName
-    } = this.props;
-    const {
-      selected,
-      monoWidth
-    } = this.state;
-    const isCollapsed = this.state.compact;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
-      className: `${baseClassName}__button-group`,
-      children: buttons.map(_ref3 => {
-        let {
-          value,
-          title,
-          ...buttonProps
-        } = _ref3;
-        // uncontrolled
-        const handler = {};
-        if (onChange !== null) {
-          handler.onClick = this.handleChange(value);
-        }
-        let buttonSelected = false;
-        if (multiple && selected && selected instanceof Array && selected.indexOf(value) !== -1) {
-          buttonSelected = true;
-        } else if (!multiple && selected === value) {
-          buttonSelected = true;
-        }
-        buttonProps.className = (0, _classnames.default)(buttonProps.className, `${baseClassName}__button`);
-        if (!isCollapsed && monospaced && monoWidth) {
-          buttonProps.style = {
-            width: monoWidth,
-            ...buttonProps.style
-          };
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          selected: buttonSelected,
-          ghost: ghost,
-          ...handler,
-          ...buttonProps,
-          children: title
-        }, `${value}`);
-      })
-    });
-  }
-  render() {
-    const {
-      label,
-      labelPlacement,
-      buttons,
-      monospaced,
-      multiple,
-      selected: selectedProp,
-      onChange,
-      inline,
-      ghost,
-      className,
-      baseClassName,
-      ...props
-    } = this.props;
-    const isCollapsed = this.isResponsive();
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
-      value: isCollapsed,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Squeezer.default, {
-        compact: this.compact,
-        uncompact: this.uncompact,
-        innerRef: el => {
-          // @ts-ignore
-          this.rootRef.current = el;
-        },
-        children: _ref4 => {
-          let {
-            ref
-          } = _ref4;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            ref: ref,
-            className: (0, _classnames.default)(baseClassName, {
-              [`${baseClassName}--inline`]: inline,
-              [`${baseClassName}--collapsed`]: isCollapsed,
-              [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
-            }, className),
-            ...props,
-            children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${baseClassName}__label`,
-              children: label
-            }), this.renderControl()]
-          });
-        }
+      value: isResponsive,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupControl.default, {
+        buttons: buttons,
+        selectedValues: selectedValues,
+        onClick: handleChange,
+        ghost: ghost,
+        isResponsive: isResponsive,
+        monospaced: monospaced,
+        baseClassName: baseClassName
       })
     });
-  }
-}
-_defineProperty(SegmentedControl, "defaultProps", {
-  label: null,
-  labelPlacement: 'top',
-  monospaced: false,
-  multiple: false,
-  onChange: null,
-  inline: false,
-  ghost: false,
-  className: null,
-  baseClassName: SEGMENTED_CONTROL_BASE_CLASS_NAME
-});
-_defineProperty(SegmentedControl, "contextType", _ResponsiveContext.default);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: rootRef,
+    className: (0, _classnames.default)(baseClassName, {
+      [`${baseClassName}--inline`]: inline,
+      [`${baseClassName}--collapsed`]: isResponsive,
+      [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
+    }, className),
+    ...props,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${baseClassName}__label`,
+      children: label
+    }), renderControl(), !isInResponsiveContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Squeezer.default, {
+      ref: rootRef,
+      ...squeezerProps
+    })]
+  });
+};
 var _default = exports["default"] = SegmentedControl;
 
 /***/ }),
 
+/***/ "./components/SegmentedControl/getSelectedValues.tsx":
+/*!***********************************************************!*\
+  !*** ./components/SegmentedControl/getSelectedValues.tsx ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.getSelectedValues = void 0;
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const getSelectedValues = selected => {
+  if (selected === undefined) {
+    return [];
+  }
+  if (Array.isArray(selected)) {
+    return selected;
+  }
+  return [selected];
+};
+exports.getSelectedValues = getSelectedValues;
+
+/***/ }),
+
 /***/ "./components/SegmentedControl/index.tsx":
 /*!***********************************************!*\
   !*** ./components/SegmentedControl/index.tsx ***!
@@ -17333,6 +17313,110 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 /***/ }),
 
+/***/ "./components/SegmentedControl/useResponsive.tsx":
+/*!*******************************************************!*\
+  !*** ./components/SegmentedControl/useResponsive.tsx ***!
+  \*******************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.useResponsive = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+var _ResponsiveContext = _interopRequireDefault(__webpack_require__(/*! ../ResponsiveContext */ "./components/ResponsiveContext/index.tsx"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const useResponsive = () => {
+  const isResponsive = (0, _react.useContext)(_ResponsiveContext.default);
+  const isInResponsiveContext = typeof isResponsive === 'boolean';
+  const [isResponsiveInternal, setIsResponsiveInternal] = (0, _react.useState)(false);
+  return {
+    isResponsive: isInResponsiveContext ? isResponsive : isResponsiveInternal,
+    isInResponsiveContext,
+    compact: () => {
+      setIsResponsiveInternal(true);
+      return false;
+    },
+    expand: () => {
+      setIsResponsiveInternal(false);
+      return false;
+    }
+  };
+};
+exports.useResponsive = useResponsive;
+
+/***/ }),
+
+/***/ "./components/SegmentedControl/useSelected.tsx":
+/*!*****************************************************!*\
+  !*** ./components/SegmentedControl/useSelected.tsx ***!
+  \*****************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.useSelected = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+var _getSelectedValues = __webpack_require__(/*! ./getSelectedValues */ "./components/SegmentedControl/getSelectedValues.tsx");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const alphaSort = (a, b) => a > b ? 1 : -1;
+const useSelected = _ref => {
+  let {
+    multiple,
+    externalSelected,
+    onChange
+  } = _ref;
+  const getExternal = () => multiple ? (0, _getSelectedValues.getSelectedValues)(externalSelected) : externalSelected;
+  const [selected, setSelected] = (0, _react.useState)(getExternal());
+  const [prevExternalSelected, setPrevExternalSelected] = (0, _react.useState)(externalSelected);
+  if (prevExternalSelected !== externalSelected) {
+    setPrevExternalSelected(externalSelected);
+    if (selected !== externalSelected) {
+      setSelected(getExternal());
+    }
+  }
+  const handleChange = value => {
+    let prevSelected = selected;
+    let newSelected;
+    if (multiple) {
+      const isSelectedArray = Array.isArray(selected);
+      newSelected = isSelectedArray ? [...selected] : [];
+      if (!isSelectedArray || selected.indexOf(value) === -1) {
+        newSelected.push(value);
+      } else {
+        newSelected.splice(selected.indexOf(value), 1);
+      }
+      newSelected.sort(alphaSort);
+      if (isSelectedArray) {
+        prevSelected = [...selected].sort(alphaSort);
+      }
+    } else {
+      newSelected = value;
+    }
+    if (JSON.stringify(prevSelected) !== JSON.stringify(newSelected)) {
+      setSelected(newSelected);
+      onChange?.(newSelected);
+    }
+  };
+  return {
+    selectedValues: (0, _getSelectedValues.getSelectedValues)(selected),
+    handleChange
+  };
+};
+exports.useSelected = useSelected;
+
+/***/ }),
+
 /***/ "./components/Select/MultiValue.tsx":
 /*!******************************************!*\
   !*** ./components/Select/MultiValue.tsx ***!
@@ -17433,7 +17517,7 @@ const collect = function (children) {
   let group = arguments.length > 2 ? arguments[2] : undefined;
   const groups = [];
   _react.Children.forEach(children, child => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(child) && (child.type === _SelectOptionGroup.default || child.type === 'optgroup')) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child) && (child.type === _SelectOptionGroup.default || child.type === 'optgroup')) {
       const {
         label,
         children,
@@ -17446,7 +17530,7 @@ const collect = function (children) {
       };
       groups.push(group);
       collect(children, options, group);
-    } else if ( /*#__PURE__*/(0, _react.isValidElement)(child) && (child.type === _SelectOption.default || child.type === 'option')) {
+    } else if (/*#__PURE__*/(0, _react.isValidElement)(child) && (child.type === _SelectOption.default || child.type === 'option')) {
       // eslint-disable-next-line prefer-const
       let {
         value,
@@ -18829,96 +18913,18 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports["default"] = void 0;
 var _react = __webpack_require__(/*! react */ "react");
-var _reactMeasure = _interopRequireDefault(__webpack_require__(/*! react-measure */ "../node_modules/react-measure/dist/index.esm.js"));
-var _utils = __webpack_require__(/*! ../utils */ "./components/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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-class Squeezer extends _react.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
-    _defineProperty(this, "measuring", false);
-    _defineProperty(this, "measurements", []);
-    _defineProperty(this, "minWidth", 0);
-    _defineProperty(this, "handleResize", () => {
-      this.measure();
-    });
-  }
-  addMeasurement(width) {
-    this.measurements.push(width);
-    if (this.measurements.length > 2) {
-      this.measurements.shift();
-    }
-  }
-  measure() {
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const {
-      compact,
-      uncompact
-    } = this.props;
-    if (this.measuring && !force) {
-      return;
-    }
-    this.measuring = true;
-    const root = this.rootRef.current;
-    const width = Math.ceil(root.getBoundingClientRect().width);
-    const scrollWidth = Math.ceil(root.scrollWidth);
-    let checkForce = false;
-    if (width < scrollWidth) {
-      if (compact()) {
-        this.minWidth = scrollWidth;
-        checkForce = true;
-      }
-    } else if (width > this.minWidth) {
-      if (uncompact()) {
-        this.minWidth = width;
-        checkForce = true;
-      }
-    }
-    this.addMeasurement(width);
-    this.check(checkForce);
-  }
-  check() {
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    if (!force && this.measurements.length === 2 && this.measurements[0] === this.measurements[1]) {
-      this.measuring = false;
-    } else {
-      this.setState({}, () => {
-        this.measure(true);
-      });
-    }
-  }
-  render() {
-    const {
-      children,
-      innerRef,
-      innerMeasure
-    } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
-      onResize: this.handleResize,
-      innerRef: el => {
-        if (el) {
-          this.rootRef.current = el;
-          (0, _utils.safeInvoke)(innerRef, el);
-          (0, _utils.safeInvoke)(innerMeasure, () => {
-            this.measure(true);
-          });
-        }
-      },
-      children: _ref => {
-        let {
-          measureRef
-        } = _ref;
-        return children({
-          ref: measureRef
-        });
-      }
-    });
-  }
-}
+var _hooks = __webpack_require__(/*! ../../hooks */ "./hooks/index.tsx");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+/** Render-less useSqueeze wrapper */
+const Squeezer = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  (0, _hooks.useSqueeze)({
+    ref: ref,
+    ...props
+  });
+  return null;
+});
+Squeezer.displayName = 'Squeezer';
 var _default = exports["default"] = Squeezer;
 
 /***/ }),
@@ -20333,7 +20339,7 @@ class Tabs extends _react.Component {
         children: label
       });
     }
-    if ( /*#__PURE__*/(0, _react.isValidElement)(label)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(label)) {
       return /*#__PURE__*/(0, _react.cloneElement)(label, {
         className: (0, _classnames.default)(`${baseClassName}__${tabMode}-label`, label.props.className)
       });
@@ -21342,7 +21348,7 @@ _defineProperty(Toaster, "create", function () {
   let container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
   const containerElement = document.createElement('div');
   container.appendChild(containerElement);
-  return (0, _reactDom.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toaster, {
+  return (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toaster, {
     ...props
   }), containerElement);
 });
@@ -21417,7 +21423,7 @@ class Registry {
   expand() {
     let changed = false;
     for (const item of this.items) {
-      if (this.checkItemIsCompactOrHasCompactItems(item)) {
+      if (item.isExpandable) {
         item.expand();
         changed = true;
         break;
@@ -21433,18 +21439,20 @@ class Registry {
       return isCompact;
     });
   }
-  get hasCompactItems() {
-    return this.items.some(this.checkItemIsCompactOrHasCompactItems);
-  }
-  checkItemIsCompactOrHasCompactItems(item) {
-    return item.isCompact || 'hasCompactItems' in item && item.hasCompactItems;
+  get isExpandable() {
+    return this.items.some(_ref2 => {
+      let {
+        isExpandable
+      } = _ref2;
+      return isExpandable;
+    });
   }
 }
 class RegistryItem {
-  constructor(_ref2) {
+  constructor(_ref3) {
     let {
       onCompactStateChange
-    } = _ref2;
+    } = _ref3;
     _defineProperty(this, "_isCompact", false);
     _defineProperty(this, "onCompactStateChange", void 0);
     this.onCompactStateChange = onCompactStateChange;
@@ -21460,6 +21468,9 @@ class RegistryItem {
   get isCompact() {
     return this._isCompact;
   }
+  get isExpandable() {
+    return this._isCompact;
+  }
 }
 const useRegistry = () => {
   const parentRegistry = useRegistryContext();
@@ -21857,7 +21868,7 @@ const toMenuItem = (child, isLast, onItemClick) => {
     case _Dropdown.default:
       {
         let onMenuItemClick;
-        if ( /*#__PURE__*/(0, _react.isValidElement)(child.props.menu)) {
+        if (/*#__PURE__*/(0, _react.isValidElement)(child.props.menu)) {
           ({
             onItemClick: onMenuItemClick
           } = child.props.menu.props);
@@ -21869,7 +21880,7 @@ const toMenuItem = (child, isLast, onItemClick) => {
     case _List.ListOperation:
       {
         const menuItem = toMenuItem(child.props.children, true, onItemClick);
-        if ( /*#__PURE__*/(0, _react.isValidElement)(menuItem)) {
+        if (/*#__PURE__*/(0, _react.isValidElement)(menuItem)) {
           return /*#__PURE__*/(0, _react.cloneElement)(child, {
             children: /*#__PURE__*/(0, _react.cloneElement)(menuItem, {
               onClick: e => {
@@ -22245,7 +22256,7 @@ const Tour = _ref => {
   const spots = _react.Children.toArray(children);
   if (current !== undefined && current in spots) {
     const spot = spots[current];
-    if ( /*#__PURE__*/(0, _react.isValidElement)(spot)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(spot)) {
       let popup;
       if (onClose && spot.props.popup) {
         popup = {
@@ -22411,7 +22422,7 @@ const isLikeText = node => {
   if (typeof node === 'string') {
     return true;
   }
-  if ( /*#__PURE__*/(0, _react.isValidElement)(node) && node.type === _Translate.default) {
+  if (/*#__PURE__*/(0, _react.isValidElement)(node) && node.type === _Translate.default) {
     const {
       component,
       children
@@ -23714,12 +23725,19 @@ module.exports = {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
+Object.defineProperty(exports, "useResizeObserver", ({
+  enumerable: true,
+  get: function () {
+    return _useResizeObserver.useResizeObserver;
+  }
+}));
 Object.defineProperty(exports, "useSqueeze", ({
   enumerable: true,
   get: function () {
     return _useSqueeze.useSqueeze;
   }
 }));
+var _useResizeObserver = __webpack_require__(/*! ./useResizeObserver */ "./hooks/useResizeObserver.tsx");
 var _useSqueeze = __webpack_require__(/*! ./useSqueeze */ "./hooks/useSqueeze.tsx");
 
 /***/ }),
@@ -23823,7 +23841,8 @@ var _useMutationObserver = __webpack_require__(/*! ./useMutationObserver */ "./h
 
 const MUTATION_OBSERVER_OPTIONS = {
   subtree: true,
-  childList: true
+  childList: true,
+  characterData: true
 };
 const useSqueeze = _ref => {
   let {
@@ -87642,7 +87661,7 @@ function _setPrototypeOf(t, e) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@plesk/ui-library","version":"3.40.7","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","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\\"","format:check":"prettier --check src","format":"prettier --write src","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.25.0","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","codemirror":"5.58.2","marked":"4.2.12","memoize-one":"^5.2.1","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^2.2.31","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.24.9","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.24.7","@babel/preset-env":"^7.25.0","@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@babel/types":"^7.25.0","@csstools/postcss-logical-float-and-clear":"^2.0.1","@plesk/eslint-config":"^3.0.0","@plesk/stylelint-config":"^2.0.0","@testing-library/dom":"^9.3.4","@testing-library/jest-dom":"^6.4.8","@testing-library/react":"^14.3.1","@testing-library/user-event":"^14.5.2","@types/buble":"^0.20.5","@types/classnames":"2.3.1","@types/codemirror":"^5.60.15","@types/doctrine":"^0.0.5","@types/jest":"^29.5.12","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^4.3.2","@types/node":"^22.1.0","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@types/react-measure":"2.0.9","@types/react-transition-group":"^4.4.10","@types/svg4everybody":"2.1.2","@types/webpack-env":"^1.18.5","@typescript-eslint/eslint-plugin":"^6.21.0","@typescript-eslint/parser":"^6.21.0","autoprefixer":"^10.4.19","babel-loader":"^8.3.0","babel-plugin-transform-require-ignore":"^0.1.1","cross-env":"^7.0.3","css-loader":"^7.1.2","css-minimizer-webpack-plugin":"^7.0.0","eslint":"^8.57.0","eslint-config-prettier":"^8.10.0","eslint-plugin-markdown":"^3.0.1","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-dev-server":"^10.0.0","jest-environment-jsdom":"^29.7.0","jest-image-snapshot":"^6.4.0","less":"^4.2.0","less-loader":"^12.2.0","mini-css-extract-plugin":"^2.9.0","postcss":"^8.4.40","postcss-less":"^6.0.0","postcss-loader":"^8.1.1","postcss-logical":"^7.0.1","prettier":"^2.8.8","puppeteer-core":"22.8.2","react":"^18.3.1","react-docgen-typescript":"^2.2.2","react-dom":"^18.3.1","react-styleguidist":"^13.1.3","rimraf":"^6.0.1","rtlcss":"^4.2.0","style-loader":"^4.0.0","stylelint":"^15.11.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^3.0.0","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.10","typescript":"5.2.2","webpack":"^5.93.0","webpack-cli":"^5.1.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"resolutions":{"trim":">=0.0.3"},"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.40.9","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","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\\"","format:check":"prettier --check src","format":"prettier --write src","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.25.6","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","codemirror":"5.58.2","marked":"4.2.12","memoize-one":"^5.2.1","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^2.2.31","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.25.2","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.25.4","@babel/preset-env":"^7.25.4","@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@babel/types":"^7.25.6","@csstools/postcss-logical-float-and-clear":"^2.0.1","@plesk/eslint-config":"^3.0.0","@plesk/stylelint-config":"^2.0.0","@testing-library/dom":"^9.3.4","@testing-library/jest-dom":"^6.5.0","@testing-library/react":"^14.3.1","@testing-library/user-event":"^14.5.2","@types/buble":"^0.20.5","@types/classnames":"2.3.1","@types/codemirror":"^5.60.15","@types/doctrine":"^0.0.5","@types/jest":"^29.5.13","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^4.3.2","@types/node":"^22.5.5","@types/react":"^18.3.8","@types/react-dom":"^18.3.0","@types/react-measure":"2.0.9","@types/react-transition-group":"^4.4.11","@types/svg4everybody":"2.1.2","@types/webpack-env":"^1.18.5","@typescript-eslint/eslint-plugin":"^6.21.0","@typescript-eslint/parser":"^6.21.0","autoprefixer":"^10.4.20","babel-loader":"^8.4.1","babel-plugin-transform-require-ignore":"^0.1.1","cross-env":"^7.0.3","css-loader":"^7.1.2","css-minimizer-webpack-plugin":"^7.0.0","eslint":"^8.57.1","eslint-config-prettier":"^8.10.0","eslint-plugin-markdown":"^3.0.1","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-dev-server":"^10.1.1","jest-environment-jsdom":"^29.7.0","jest-image-snapshot":"^6.4.0","less":"^4.2.0","less-loader":"^12.2.0","mini-css-extract-plugin":"^2.9.1","postcss":"^8.4.47","postcss-less":"^6.0.0","postcss-loader":"^8.1.1","postcss-logical":"^7.0.1","prettier":"^2.8.8","puppeteer-core":"22.8.2","react":"^18.3.1","react-docgen-typescript":"^2.2.2","react-dom":"^18.3.1","react-styleguidist":"^13.1.3","rimraf":"^6.0.1","rtlcss":"^4.3.0","style-loader":"^4.0.0","stylelint":"^15.11.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^3.0.0","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.10","typescript":"5.2.2","webpack":"^5.94.0","webpack-cli":"^5.1.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"resolutions":{"trim":">=0.0.3"},"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"}');
 
 /***/ }),