@plesk/ui-library 3.40.7 → 3.40.9

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -1,286 +1,93 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import { Component, createRef } from 'react';
+import { useRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
-import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
-import Dropdown from '../Dropdown';
-import Menu, { MenuItem } from '../Menu';
 import ResponsiveContext from '../ResponsiveContext';
 import Squeezer from '../Squeezer';
+import DropdownControl from './DropdownControl';
+import ButtonGroupControl from './ButtonGroupControl';
+import { useResponsive } from './useResponsive';
+import { useSelected } from './useSelected';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const alphaSort = (a, b) => a > b ? 1 : -1;
 export const SEGMENTED_CONTROL_BASE_CLASS_NAME = `${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 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__*/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 = useRef(null);
+  const {
+    isResponsive,
+    isInResponsiveContext,
+    ...squeezerProps
+  } = useResponsive();
+  const {
+    selectedValues,
+    handleChange
+  } = 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__*/_jsx(DropdownControl, {
+        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__*/_jsx(Menu, {
-      children: buttons.map(_ref2 => {
-        let {
-          title,
-          value,
-          ...buttonProps
-        } = _ref2;
-        const menuItemProps = {};
-        if (onChange !== null) {
-          menuItemProps.onClick = this.handleChange(value);
-        }
-        return /*#__PURE__*/_jsx(MenuItem, {
-          ...buttonProps,
-          ...menuItemProps,
-          children: title
-        }, `${value}`);
-      })
-    });
-    return /*#__PURE__*/_jsx(Dropdown, {
-      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__*/_jsx(ButtonGroup, {
-      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 = classNames(buttonProps.className, `${baseClassName}__button`);
-        if (!isCollapsed && monospaced && monoWidth) {
-          buttonProps.style = {
-            width: monoWidth,
-            ...buttonProps.style
-          };
-        }
-        return /*#__PURE__*/_jsx(Button, {
-          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__*/_jsx(ResponsiveContext.Provider, {
-      value: isCollapsed,
-      children: /*#__PURE__*/_jsx(Squeezer, {
-        compact: this.compact,
-        uncompact: this.uncompact,
-        innerRef: el => {
-          // @ts-ignore
-          this.rootRef.current = el;
-        },
-        children: _ref4 => {
-          let {
-            ref
-          } = _ref4;
-          return /*#__PURE__*/_jsxs("div", {
-            ref: ref,
-            className: classNames(baseClassName, {
-              [`${baseClassName}--inline`]: inline,
-              [`${baseClassName}--collapsed`]: isCollapsed,
-              [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
-            }, className),
-            ...props,
-            children: [label && /*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}__label`,
-              children: label
-            }), this.renderControl()]
-          });
-        }
+      value: isResponsive,
+      children: /*#__PURE__*/_jsx(ButtonGroupControl, {
+        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);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: rootRef,
+    className: classNames(baseClassName, {
+      [`${baseClassName}--inline`]: inline,
+      [`${baseClassName}--collapsed`]: isResponsive,
+      [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
+    }, className),
+    ...props,
+    children: [label && /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__label`,
+      children: label
+    }), renderControl(), !isInResponsiveContext && /*#__PURE__*/_jsx(Squeezer, {
+      ref: rootRef,
+      ...squeezerProps
+    })]
+  });
+};
 export default SegmentedControl;

package/esm/components/SegmentedControl/getSelectedValues.js

@@ -0,0 +1,11 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+export const getSelectedValues = selected => {
+  if (selected === undefined) {
+    return [];
+  }
+  if (Array.isArray(selected)) {
+    return selected;
+  }
+  return [selected];
+};

package/esm/components/SegmentedControl/useResponsive.js

@@ -0,0 +1,21 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useContext, useState } from 'react';
+import ResponsiveContext from '../ResponsiveContext';
+export const useResponsive = () => {
+  const isResponsive = useContext(ResponsiveContext);
+  const isInResponsiveContext = typeof isResponsive === 'boolean';
+  const [isResponsiveInternal, setIsResponsiveInternal] = useState(false);
+  return {
+    isResponsive: isInResponsiveContext ? isResponsive : isResponsiveInternal,
+    isInResponsiveContext,
+    compact: () => {
+      setIsResponsiveInternal(true);
+      return false;
+    },
+    expand: () => {
+      setIsResponsiveInternal(false);
+      return false;
+    }
+  };
+};

package/esm/components/SegmentedControl/useSelected.js

@@ -0,0 +1,48 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useState } from 'react';
+import { getSelectedValues } from './getSelectedValues';
+const alphaSort = (a, b) => a > b ? 1 : -1;
+export const useSelected = _ref => {
+  let {
+    multiple,
+    externalSelected,
+    onChange
+  } = _ref;
+  const getExternal = () => multiple ? getSelectedValues(externalSelected) : externalSelected;
+  const [selected, setSelected] = useState(getExternal());
+  const [prevExternalSelected, setPrevExternalSelected] = 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: getSelectedValues(selected),
+    handleChange
+  };
+};

package/esm/components/Select/Select.js

@@ -16,7 +16,7 @@ const collect = function (children) {
   let group = arguments.length > 2 ? arguments[2] : undefined;
   const groups = [];
   Children.forEach(children, child => {
-    if ( /*#__PURE__*/isValidElement(child) && (child.type === SelectOptionGroup || child.type === 'optgroup')) {
+    if (/*#__PURE__*/isValidElement(child) && (child.type === SelectOptionGroup || child.type === 'optgroup')) {
       const {
         label,
         children,
@@ -29,7 +29,7 @@ const collect = function (children) {
       };
       groups.push(group);
       collect(children, options, group);
-    } else if ( /*#__PURE__*/isValidElement(child) && (child.type === SelectOption || child.type === 'option')) {
+    } else if (/*#__PURE__*/isValidElement(child) && (child.type === SelectOption || child.type === 'option')) {
       // eslint-disable-next-line prefer-const
       let {
         value,

package/esm/components/Squeezer/Squeezer.js

@@ -1,91 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component, createRef } from 'react';
-import Measure from 'react-measure';
-import { safeInvoke } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-class Squeezer extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "rootRef", /*#__PURE__*/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__*/_jsx(Measure, {
-      onResize: this.handleResize,
-      innerRef: el => {
-        if (el) {
-          this.rootRef.current = el;
-          safeInvoke(innerRef, el);
-          safeInvoke(innerMeasure, () => {
-            this.measure(true);
-          });
-        }
-      },
-      children: _ref => {
-        let {
-          measureRef
-        } = _ref;
-        return children({
-          ref: measureRef
-        });
-      }
-    });
-  }
-}
+import { forwardRef } from 'react';
+import { useSqueeze } from '../../hooks';
+/** Render-less useSqueeze wrapper */
+const Squeezer = /*#__PURE__*/forwardRef((props, ref) => {
+  useSqueeze({
+    ref: ref,
+    ...props
+  });
+  return null;
+});
+Squeezer.displayName = 'Squeezer';
 export default Squeezer;

package/esm/components/Tabs/Tabs.js

@@ -290,7 +290,7 @@ class Tabs extends Component {
         children: label
       });
     }
-    if ( /*#__PURE__*/isValidElement(label)) {
+    if (/*#__PURE__*/isValidElement(label)) {
       return /*#__PURE__*/cloneElement(label, {
         className: classNames(`${baseClassName}__${tabMode}-label`, label.props.className)
       });

package/esm/components/Toaster/Toaster.js

@@ -196,7 +196,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 render( /*#__PURE__*/_jsx(_Toaster, {
+  return render(/*#__PURE__*/_jsx(_Toaster, {
     ...props
   }), containerElement);
 });

package/esm/components/Toolbar/RegistryContext.js

@@ -30,7 +30,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;
@@ -46,18 +46,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;
@@ -73,6 +75,9 @@ class RegistryItem {
   get isCompact() {
     return this._isCompact;
   }
+  get isExpandable() {
+    return this._isCompact;
+  }
 }
 export const useRegistry = () => {
   const parentRegistry = useRegistryContext();

package/esm/components/Toolbar/ToolbarMenu.js

@@ -53,7 +53,7 @@ const toMenuItem = (child, isLast, onItemClick) => {
     case Dropdown:
       {
         let onMenuItemClick;
-        if ( /*#__PURE__*/isValidElement(child.props.menu)) {
+        if (/*#__PURE__*/isValidElement(child.props.menu)) {
           ({
             onItemClick: onMenuItemClick
           } = child.props.menu.props);
@@ -65,7 +65,7 @@ const toMenuItem = (child, isLast, onItemClick) => {
     case ListOperation:
       {
         const menuItem = toMenuItem(child.props.children, true, onItemClick);
-        if ( /*#__PURE__*/isValidElement(menuItem)) {
+        if (/*#__PURE__*/isValidElement(menuItem)) {
           return /*#__PURE__*/cloneElement(child, {
             children: /*#__PURE__*/cloneElement(menuItem, {
               onClick: e => {

package/esm/components/Tour/Tour.js

@@ -17,7 +17,7 @@ const Tour = _ref => {
   const spots = Children.toArray(children);
   if (current !== undefined && current in spots) {
     const spot = spots[current];
-    if ( /*#__PURE__*/isValidElement(spot)) {
+    if (/*#__PURE__*/isValidElement(spot)) {
       let popup;
       if (onClose && spot.props.popup) {
         popup = {

package/esm/components/Translate/isLikeText.js

@@ -6,7 +6,7 @@ export const isLikeText = node => {
   if (typeof node === 'string') {
     return true;
   }
-  if ( /*#__PURE__*/isValidElement(node) && node.type === Translate) {
+  if (/*#__PURE__*/isValidElement(node) && node.type === Translate) {
     const {
       component,
       children

package/esm/hooks/index.js

@@ -1,3 +1,4 @@
 // Copyright 1999-2024. Plesk International GmbH. All rights reserved.
 
+export { useResizeObserver } from './useResizeObserver';
 export { useSqueeze } from './useSqueeze';

package/esm/hooks/useSqueeze.js

@@ -5,7 +5,8 @@ import { useResizeObserver } from './useResizeObserver';
 import { useMutationObserver } from './useMutationObserver';
 const MUTATION_OBSERVER_OPTIONS = {
   subtree: true,
-  childList: true
+  childList: true,
+  characterData: true
 };
 export const useSqueeze = _ref => {
   let {