@plesk/ui-library 3.40.7 → 3.40.9

package/esm/components/Action/Action.js

@@ -36,7 +36,7 @@ const Action = _ref => {
     size: ICON_SIZE_16
   });
   let size = ICON_SIZE_16;
-  if ( /*#__PURE__*/isValidElement(icon) && icon.props.size) {
+  if (/*#__PURE__*/isValidElement(icon) && icon.props.size) {
     ({
       size
     } = icon.props);

package/esm/components/Badge/Badge.js

@@ -28,7 +28,7 @@ const Badge = _ref => {
         children: label
       });
     }
-    if ( /*#__PURE__*/isValidElement(label)) {
+    if (/*#__PURE__*/isValidElement(label)) {
       const cloneProps = {
         className: classNames(`${baseClassName}__value`, {
           [`${baseClassName}__value--dot`]: isEmpty

package/esm/components/Button/Button.js

@@ -56,7 +56,7 @@ const renderCaret = _ref2 => {
   } else {
     caretElement = caret;
   }
-  if ( /*#__PURE__*/isValidElement(caretElement)) {
+  if (/*#__PURE__*/isValidElement(caretElement)) {
     caretElement = /*#__PURE__*/cloneElement(caretElement, {
       className: classNames(`${baseClassName}__caret`, caretElement.props.className)
     });

package/esm/components/Card/Card.js

@@ -193,13 +193,13 @@ class Card extends Component {
     const result = [];
     if (!this.isRow()) {
       buttons.forEach((btn, index) => {
-        result.push( /*#__PURE__*/_jsx(CardButton, {
+        result.push(/*#__PURE__*/_jsx(CardButton, {
           ...btn
         }, btn.key || index));
       });
     }
     if (menu) {
-      result.push( /*#__PURE__*/_jsx(Dropdown, {
+      result.push(/*#__PURE__*/_jsx(Dropdown, {
         menu: menu,
         menuPlacement: 'bottom-end',
         children: /*#__PURE__*/_jsx(CardButton, {
@@ -208,7 +208,7 @@ class Card extends Component {
       }, "menu"));
     }
     if (rowContent && !this.isTile()) {
-      result.push( /*#__PURE__*/_jsx(CardButton, {
+      result.push(/*#__PURE__*/_jsx(CardButton, {
         icon: {
           name: 'chevron-down',
           flipVertical: this.isExtended()

package/esm/components/CardList/CardListToolbar.js

@@ -125,7 +125,7 @@ const CardListToolbar = _ref2 => {
   if (onViewChange && currentView !== VIEW_RESPONSIVE) {
     const hasExpander = groups.filter(isToolbarExpander).length > 0;
     if (!hasExpander) {
-      toolbar.push( /*#__PURE__*/_jsx(ToolbarExpander, {}, "expander"));
+      toolbar.push(/*#__PURE__*/_jsx(ToolbarExpander, {}, "expander"));
     }
     toolbar.push(renderView(onViewChange, currentView));
   }

package/esm/components/CodeEditor/CodeEditor.js

@@ -81,7 +81,7 @@ class CodeEditor extends Component {
     };
   }
   componentDidMount() {
-    import( /* webpackChunkName: "codemirror" */'./CodeMirror').then(_ref2 => {
+    import(/* webpackChunkName: "codemirror" */'./CodeMirror').then(_ref2 => {
       let {
         CodeMirror
       } = _ref2;

package/esm/components/ComboBox/ComboBox.js

@@ -12,7 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const collect = function (children) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   Children.forEach(children, child => {
-    if ( /*#__PURE__*/isValidElement(child) && child.type === ComboBoxOption) {
+    if (/*#__PURE__*/isValidElement(child) && child.type === ComboBoxOption) {
       // eslint-disable-next-line prefer-const
       let {
         disabled,

package/esm/components/ComboBoxDropdown/ComboBoxDropdown.js

@@ -113,7 +113,7 @@ const ComboBoxDropdown = _ref => {
         className: `${baseClassName}__menu`,
         children: [groups.reduce((acc, group) => {
           if (group.label) {
-            acc.push( /*#__PURE__*/_createElement(MenuHeader, {
+            acc.push(/*#__PURE__*/_createElement(MenuHeader, {
               ...group.props,
               key: `group_${group.label}`
             }, group.label));
@@ -148,7 +148,7 @@ const ComboBoxDropdown = _ref => {
               onMouseDown,
               'data-index': optionIndex
             };
-            acc.push( /*#__PURE__*/_jsx(MenuItem, {
+            acc.push(/*#__PURE__*/_jsx(MenuItem, {
               ...menuItemProps,
               children: option.children
             }, `option_${option.value}`));

package/esm/components/Cuttable/Cuttable.js

@@ -1,103 +1,74 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component, createRef } from 'react';
+import { useRef, useState } from 'react';
 import classNames from 'classnames';
-import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import Translate from '../Translate';
 import Link from '../Link';
+import { useContentOverflow } from './useContentOverflow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Cuttable` component is used for showing and hiding part of content.
  * @since 0.0.42
  */
-class Cuttable extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      collapsed: undefined,
-      autofit: true
-    });
-    _defineProperty(this, "contentRef", /*#__PURE__*/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
-        });
-      }
-    });
+const Cuttable = _ref => {
+  let {
+    children,
+    collapsed: externalCollapsed = true,
+    maxHeight = '7rem',
+    locale = {
+      showMore: 'Show more',
+      showLess: 'Show less'
+    },
+    className,
+    baseClassName = `${CLS_PREFIX}cuttable`,
+    ...props
+  } = _ref;
+  const contentRef = useRef(null);
+  const hiddenElementRef = useRef(null);
+  const [collapsed, setCollapsed] = useState(externalCollapsed);
+  const [prevExternalCollapsed, setPrevExternalCollapsed] = 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__*/_jsxs("div", {
-      className: classNames(baseClassName, {
-        [`${baseClassName}--collapse`]: this.state.collapsed === true,
-        [`${baseClassName}--expand`]: this.state.collapsed === false
-      }, className),
-      ...props,
-      children: [/*#__PURE__*/_jsx(Measure, {
-        onResize: this.handleResize,
-        innerRef: el => {
-          this.contentRef.current = el;
-        },
-        children: _ref2 => {
-          let {
-            measureRef
-          } = _ref2;
-          return /*#__PURE__*/_jsx("div", {
-            className: `${baseClassName}__content`,
-            style: {
-              maxHeight
-            },
-            ref: measureRef,
-            children: children
-          });
-        }
-      }), this.state.collapsed !== undefined && /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}__action`,
-        children: /*#__PURE__*/_jsx(Link, {
-          onClick: this.handleToggle,
-          children: /*#__PURE__*/_jsx(Translate, {
-            content: `Cuttable.${showMoreLessKey}`,
-            fallback: locale[showMoreLessKey]
-          })
+  const actionLocaleKey = collapsed ? 'showMore' : 'showLess';
+  const isContentOverflowing = useContentOverflow({
+    contentRef,
+    hiddenElementRef,
+    maxHeight
+  });
+  const toggle = () => setCollapsed(!collapsed);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(baseClassName, {
+      [`${baseClassName}--collapse`]: collapsed,
+      [`${baseClassName}--expand`]: !collapsed
+    }, className),
+    ...props,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: contentRef,
+      className: `${baseClassName}__content`,
+      style: {
+        maxHeight
+      },
+      children: children
+    }), /*#__PURE__*/_jsx("div", {
+      ref: hiddenElementRef,
+      className: `${baseClassName}__height-meter `,
+      style: {
+        height: maxHeight
+      },
+      "aria-hidden": true
+    }), isContentOverflowing && /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__action`,
+      children: /*#__PURE__*/_jsx(Link, {
+        onClick: toggle,
+        children: /*#__PURE__*/_jsx(Translate, {
+          content: `Cuttable.${actionLocaleKey}`,
+          fallback: locale[actionLocaleKey]
         })
-      })]
-    });
-  }
-}
-_defineProperty(Cuttable, "defaultProps", {
-  collapsed: true,
-  maxHeight: '7rem',
-  locale: {
-    showMore: 'Show more',
-    showLess: 'Show less'
-  },
-  baseClassName: `${CLS_PREFIX}cuttable`
-});
+      })
+    })]
+  });
+};
 export default Cuttable;

package/esm/components/Cuttable/useContentOverflow.js

@@ -0,0 +1,28 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useResizeObserver } from '../../hooks';
+export const useContentOverflow = _ref => {
+  let {
+    contentRef,
+    hiddenElementRef,
+    maxHeight
+  } = _ref;
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const checkHeight = () => {
+    const contentElement = contentRef.current;
+    const hiddenElement = hiddenElementRef.current;
+    if (!contentElement || !hiddenElement) return;
+    setIsOverflowing(contentElement.scrollHeight > hiddenElement.getBoundingClientRect().height);
+  };
+  const checkHeightRef = useRef(checkHeight);
+  checkHeightRef.current = checkHeight;
+  useLayoutEffect(() => {
+    checkHeightRef.current();
+  }, [maxHeight]);
+  useResizeObserver({
+    ref: contentRef,
+    onResize: checkHeight
+  });
+  return isOverflowing;
+};

package/esm/components/Dialog/Dialog.js

@@ -56,7 +56,7 @@ const Dialog = _ref => {
   }, [isOpen]);
   const renderImage = (image, block) => {
     const classPrefix = `${baseClassName}__${block}`;
-    if ( /*#__PURE__*/isValidElement(image)) {
+    if (/*#__PURE__*/isValidElement(image)) {
       return /*#__PURE__*/_jsx("div", {
         className: classPrefix,
         children: image
@@ -131,7 +131,7 @@ const Dialog = _ref => {
   };
   let childrenElement;
   if (form) {
-    if ( /*#__PURE__*/isValidElement(form)) {
+    if (/*#__PURE__*/isValidElement(form)) {
       childrenElement = /*#__PURE__*/cloneElement(form, {
         cancelButton: getCancelButtonProps(form.props),
         footerClassName: classNames(form.props.footerClassName, `${baseClassName}__form-footer`)

package/esm/components/Drawer/Drawer.js

@@ -68,7 +68,7 @@ const Drawer = _ref => {
       });
     }
     if (form) {
-      if ( /*#__PURE__*/isValidElement(form)) {
+      if (/*#__PURE__*/isValidElement(form)) {
         return /*#__PURE__*/cloneElement(form, {
           className: classNames(`${baseClassName}__form`, form.props.className),
           cancelButton: form.props.cancelButton === false ? false : {

package/esm/components/Dropdown/Dropdown.js

@@ -18,7 +18,7 @@ const createTarget = (node, _ref) => {
     onToggle,
     targetRef
   } = _ref;
-  if (!( /*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
+  if (!(/*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
     node = /*#__PURE__*/_jsx(Button, {
       caret: true,
       children: node

package/esm/components/Form/Form.js

@@ -340,7 +340,7 @@ class Form extends Component {
     } = this.props;
     if (Array.isArray(additionalButtons)) {
       return additionalButtons.map(element => {
-        if ( /*#__PURE__*/isValidElement(element)) {
+        if (/*#__PURE__*/isValidElement(element)) {
           const props = {
             className: classNames(element.props.className, `${baseClassName}__additional-button`)
           };

package/esm/components/Icon/utils.js

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

package/esm/components/Item/Item.js

@@ -54,7 +54,7 @@ const Item = _ref => {
         children: title
       });
     }
-    if ( /*#__PURE__*/isValidElement(title)) {
+    if (/*#__PURE__*/isValidElement(title)) {
       title = /*#__PURE__*/cloneElement(title, {
         className: classNames(`${baseClassName}__title`, title.props.className)
       });

package/esm/components/ItemList/ItemList.js

@@ -119,7 +119,7 @@ class ItemList extends Component {
     } = this.props;
     if (reorderable) {
       // @ts-ignore
-      import( /* webpackChunkName: "react-sortable-hoc" */'react-sortable-hoc').then(_ref2 => {
+      import(/* webpackChunkName: "react-sortable-hoc" */'react-sortable-hoc').then(_ref2 => {
         let {
           sortableContainer,
           sortableElement
@@ -141,7 +141,7 @@ class ItemList extends Component {
     return /*#__PURE__*/_jsx(Grid, {
       ...props,
       children: Children.map(children, child => {
-        if ( /*#__PURE__*/isValidElement(child)) {
+        if (/*#__PURE__*/isValidElement(child)) {
           return /*#__PURE__*/_jsx(GridCol, {
             className: classNames(`${baseClassName}__col`),
             children: /*#__PURE__*/cloneElement(child, this.createItemProps(child))
@@ -210,7 +210,7 @@ class ItemList extends Component {
       onSortEnd: onReorderEnd,
       ...props,
       children: Children.map(children, (child, index) => {
-        if ( /*#__PURE__*/isValidElement(child)) {
+        if (/*#__PURE__*/isValidElement(child)) {
           const {
             disabled
           } = child.props;

package/esm/components/Layer/Layer.js

@@ -22,7 +22,7 @@ const Layer = _ref => {
   const parentLevel = useContext(LevelContext);
   const container = useContext(PortalContext) || document.body;
   const renderChildren = () => {
-    if ( /*#__PURE__*/isValidElement(children)) {
+    if (/*#__PURE__*/isValidElement(children)) {
       return /*#__PURE__*/cloneElement(children, {
         style: {
           ...children.props.style,
@@ -32,7 +32,7 @@ const Layer = _ref => {
     }
     return children;
   };
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(LevelContext.Provider, {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(LevelContext.Provider, {
     value: parentLevel + level,
     children: /*#__PURE__*/_jsx("div", {
       className: classNames(baseClassName, className),

package/esm/components/List/List.js

@@ -72,7 +72,7 @@ const getHumanTotalRows = _ref2 => {
   });
   switch (mode) {
     case 'totalRows':
-      return wrapToText( /*#__PURE__*/_jsx(Translate, {
+      return wrapToText(/*#__PURE__*/_jsx(Translate, {
         namespace: "List",
         content: "totalRows",
         fallback: "%%totalRows%% items total",
@@ -82,7 +82,7 @@ const getHumanTotalRows = _ref2 => {
         translators: translators
       }));
     case 'selectedRows':
-      return wrapToText( /*#__PURE__*/_jsx(Translate, {
+      return wrapToText(/*#__PURE__*/_jsx(Translate, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
@@ -96,7 +96,7 @@ const getHumanTotalRows = _ref2 => {
         translators: translators
       }));
     case 'selectedAllRows':
-      return wrapToText( /*#__PURE__*/_jsx(Translate, {
+      return wrapToText(/*#__PURE__*/_jsx(Translate, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
@@ -382,7 +382,7 @@ class List extends Component {
     }
   }
   applyReorderableList() {
-    import( /* webpackChunkName: "react-movable" */'@plesk/react-movable').then(_ref6 => {
+    import(/* webpackChunkName: "react-movable" */'@plesk/react-movable').then(_ref6 => {
       let {
         List: ReorderableList
       } = _ref6;

package/esm/components/List/ListActions.js

@@ -41,7 +41,7 @@ const ListActions = _ref => {
   const secondaryItems = [];
   let secondaryCount = 0;
   Children.toArray(children).forEach((node, index) => {
-    if ( /*#__PURE__*/isValidElement(node) && node.type === ListAction) {
+    if (/*#__PURE__*/isValidElement(node) && node.type === ListAction) {
       const {
         primary,
         hidden
@@ -54,7 +54,7 @@ const ListActions = _ref => {
       } else {
         secondaryCount++;
         if (!hidden) {
-          secondaryItems.push( /*#__PURE__*/cloneElement(node, {
+          secondaryItems.push(/*#__PURE__*/cloneElement(node, {
             primary: false
           }));
         }

package/esm/components/LocaleProvider/LocaleProvider.js

@@ -20,7 +20,7 @@ const applyParams = function (message) {
     if (param === undefined) {
       result.push(m[0]);
     } else if (typeof param === 'object' && /*#__PURE__*/isValidElement(param)) {
-      result.push( /*#__PURE__*/cloneElement(param, {
+      result.push(/*#__PURE__*/cloneElement(param, {
         key: m[1]
       }));
       hasElements = true;

package/esm/components/Media/Media.js

@@ -52,7 +52,7 @@ const Media = _ref => {
         children: title
       });
     }
-    if ( /*#__PURE__*/isValidElement(title)) {
+    if (/*#__PURE__*/isValidElement(title)) {
       return /*#__PURE__*/cloneElement(title, {
         className: classNames(`${baseClassName}__title`, title.props.className)
       });

package/esm/components/Menu/Menu.js

@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const hasIconItem = children => {
   let result = false;
   Children.forEach(children, child => {
-    if ( /*#__PURE__*/isValidElement(child) && (child.type === MenuSelectableItem || child.props.icon)) {
+    if (/*#__PURE__*/isValidElement(child) && (child.type === MenuSelectableItem || child.props.icon)) {
       result = true;
     }
   });

package/esm/components/Overlay/Overlay.js

@@ -68,7 +68,7 @@ const OverlayCore = _ref => {
   const renderImage = sideBanner => {
     const classPrefix = `${baseClassName}__side`;
     let element = null;
-    if ( /*#__PURE__*/isValidElement(sideBanner)) {
+    if (/*#__PURE__*/isValidElement(sideBanner)) {
       element = sideBanner;
     } else if (typeof sideBanner === 'string') {
       element = /*#__PURE__*/_jsx("img", {

package/esm/components/Progress/Progress.js

@@ -28,7 +28,7 @@ class Progress extends Component {
     let isFailed = false;
     if (children) {
       Children.forEach(children, child => {
-        if ( /*#__PURE__*/isValidElement(child)) {
+        if (/*#__PURE__*/isValidElement(child)) {
           const status = child.props.status ?? PROGRESS_STEP_DEFAULT_STATUS;
           isNotStarted = isNotStarted && status === STATUS_NOT_STARTED;
           isFinished = isFinished && status === STATUS_DONE;

package/esm/components/SegmentedControl/ButtonGroupControl.js

@@ -0,0 +1,58 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useState, useLayoutEffect, useRef } from 'react';
+import classNames from 'classnames';
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ButtonGroupControl = _ref => {
+  let {
+    buttons,
+    selectedValues,
+    onClick,
+    ghost,
+    monospaced,
+    isResponsive,
+    baseClassName
+  } = _ref;
+  const buttonsRef = useRef([]);
+  const [monoWidth, setMonoWidth] = useState(0);
+  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__*/_jsx(ButtonGroup, {
+    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__*/_jsx(Button, {
+        ref: node => {
+          index === 0 && (buttonsRef.current = []);
+          node && buttonsRef.current.push(node);
+        },
+        selected: selectedValues.includes(value),
+        ghost: ghost,
+        onClick: () => onClick(value),
+        ...buttonProps,
+        className: classNames(buttonProps.className, `${baseClassName}__button`),
+        style: buttonStyle,
+        children: title
+      }, `${value}`);
+    })
+  });
+};
+export default ButtonGroupControl;

package/esm/components/SegmentedControl/DropdownControl.js

@@ -0,0 +1,37 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import Dropdown from '../Dropdown';
+import Menu, { MenuItem } from '../Menu';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DropdownControl = _ref => {
+  let {
+    buttons,
+    selected,
+    onClick
+  } = _ref;
+  const {
+    title = ''
+  } = buttons.find(button => button.value === selected) || {};
+  const menu = /*#__PURE__*/_jsx(Menu, {
+    children: buttons.map(_ref2 => {
+      let {
+        title,
+        value,
+        ...buttonProps
+      } = _ref2;
+      const handleClick = () => {
+        onClick(value);
+      };
+      return /*#__PURE__*/_jsx(MenuItem, {
+        ...buttonProps,
+        onClick: handleClick,
+        children: title
+      }, `${value}`);
+    })
+  });
+  return /*#__PURE__*/_jsx(Dropdown, {
+    menu: menu,
+    children: title
+  });
+};
+export default DropdownControl;