@plesk/ui-library 3.40.8 → 3.40.10

package/cjs/components/Action/Action.js

@@ -45,7 +45,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);

package/cjs/components/Badge/Badge.js

@@ -35,7 +35,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

package/cjs/components/Button/Button.js

@@ -62,7 +62,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)
     });

package/cjs/components/Card/Card.js

@@ -202,13 +202,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, {
@@ -217,7 +217,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()

package/cjs/components/CardList/CardListToolbar.js

@@ -134,7 +134,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));
   }

package/cjs/components/CodeEditor/CodeEditor.js

@@ -88,7 +88,7 @@ class CodeEditor extends _react.Component {
     };
   }
   componentDidMount() {
-    Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "codemirror" */'./CodeMirror'))).then(_ref2 => {
+    Promise.resolve().then(() => _interopRequireWildcard(require(/* webpackChunkName: "codemirror" */'./CodeMirror'))).then(_ref2 => {
       let {
         CodeMirror
       } = _ref2;

package/cjs/components/ComboBox/ComboBox.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return 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,

package/cjs/components/ComboBoxDropdown/ComboBoxDropdown.js

@@ -123,7 +123,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));
@@ -158,7 +158,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}`));

package/cjs/components/Cuttable/Cuttable.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactMeasure = _interopRequireDefault(require("react-measure"));
 var _constants = require("../../constants");
 var _Translate = _interopRequireDefault(require("../Translate"));
 var _Link = _interopRequireDefault(require("../Link"));
+var _useContentOverflow = require("./useContentOverflow");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
@@ -19,92 +18,64 @@ var _jsxRuntime = require("react/jsx-runtime");
  * `Cuttable` component is used for showing and hiding part of content.
  * @since 0.0.42
  */
-class Cuttable extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "state", {
-      collapsed: undefined,
-      autofit: true
-    });
-    (0, _defineProperty2.default)(this, "contentRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(this, "handleToggle", () => {
-      this.setState(_ref => {
-        let {
-          collapsed
-        } = _ref;
-        return {
-          collapsed: !collapsed,
-          autofit: false
-        };
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleResize", () => {
-      if (!this.state.autofit) {
-        return;
-      }
-      const content = this.contentRef.current;
-      if (content && content.scrollHeight > content.clientHeight) {
-        this.setState({
-          collapsed: this.props.collapsed
-        });
-      }
-    });
+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);
   }
-  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 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 && isContentOverflowing,
+      [`${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]
         })
-      })]
-    });
-  }
-}
-(0, _defineProperty2.default)(Cuttable, "defaultProps", {
-  collapsed: true,
-  maxHeight: '7rem',
-  locale: {
-    showMore: 'Show more',
-    showLess: 'Show less'
-  },
-  baseClassName: `${_constants.CLS_PREFIX}cuttable`
-});
+      })
+    })]
+  });
+};
 var _default = exports.default = Cuttable;

package/cjs/components/Cuttable/useContentOverflow.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useContentOverflow = void 0;
+var _react = require("react");
+var _hooks = require("../../hooks");
+// 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;

package/cjs/components/Dialog/Dialog.js

@@ -65,7 +65,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
@@ -140,7 +140,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`)

package/cjs/components/Drawer/Drawer.js

@@ -75,7 +75,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 : {

package/cjs/components/Dropdown/Dropdown.js

@@ -25,7 +25,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

package/cjs/components/Form/Form.js

@@ -349,7 +349,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`)
           };

package/cjs/components/Icon/utils.js

@@ -18,7 +18,7 @@ const create = function (icon) {
   if (!icon) {
     return icon;
   }
-  if ( /*#__PURE__*/(0, _react.isValidElement)(icon)) {
+  if (/*#__PURE__*/(0, _react.isValidElement)(icon)) {
     const {
       className,
       ...props

package/cjs/components/Item/Item.js

@@ -63,7 +63,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)
       });

package/cjs/components/ItemList/ItemList.js

@@ -126,7 +126,7 @@ class ItemList extends _react.Component {
     } = this.props;
     if (reorderable) {
       // @ts-ignore
-      Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "react-sortable-hoc" */'react-sortable-hoc'))).then(_ref2 => {
+      Promise.resolve().then(() => _interopRequireWildcard(require(/* webpackChunkName: "react-sortable-hoc" */'react-sortable-hoc'))).then(_ref2 => {
         let {
           sortableContainer,
           sortableElement
@@ -148,7 +148,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))
@@ -217,7 +217,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;

package/cjs/components/Layer/Layer.js

@@ -29,7 +29,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,
@@ -39,7 +39,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),

package/cjs/components/List/List.js

@@ -79,7 +79,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",
@@ -89,7 +89,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",
@@ -103,7 +103,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",
@@ -389,7 +389,7 @@ class List extends _react.Component {
     }
   }
   applyReorderableList() {
-    Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "react-movable" */'@plesk/react-movable'))).then(_ref6 => {
+    Promise.resolve().then(() => _interopRequireWildcard(require(/* webpackChunkName: "react-movable" */'@plesk/react-movable'))).then(_ref6 => {
       let {
         List: ReorderableList
       } = _ref6;

package/cjs/components/List/ListActions.js

@@ -48,7 +48,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
@@ -61,7 +61,7 @@ const ListActions = _ref => {
       } else {
         secondaryCount++;
         if (!hidden) {
-          secondaryItems.push( /*#__PURE__*/(0, _react.cloneElement)(node, {
+          secondaryItems.push(/*#__PURE__*/(0, _react.cloneElement)(node, {
             primary: false
           }));
         }

package/cjs/components/LocaleProvider/LocaleProvider.js

@@ -27,7 +27,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;

package/cjs/components/Media/Media.js

@@ -61,7 +61,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)
       });

package/cjs/components/Menu/Menu.js

@@ -17,7 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 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;
     }
   });

package/cjs/components/Overlay/Overlay.js

@@ -75,7 +75,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", {

package/cjs/components/Progress/Progress.js

@@ -35,7 +35,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;

package/cjs/components/SegmentedControl/ButtonGroupControl.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup"));
+var _jsxRuntime = require("react/jsx-runtime");
+// 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;

package/cjs/components/SegmentedControl/DropdownControl.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+var _Menu = _interopRequireWildcard(require("../Menu"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+// 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;