@plesk/ui-library 3.40.7 → 3.40.9

package/cjs/components/SegmentedControl/SegmentedControl.js

@@ -5,291 +5,96 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SEGMENTED_CONTROL_BASE_CLASS_NAME = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _constants = require("../../constants");
-var _Button = _interopRequireDefault(require("../Button"));
-var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup"));
-var _Dropdown = _interopRequireDefault(require("../Dropdown"));
-var _Menu = _interopRequireWildcard(require("../Menu"));
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
 var _Squeezer = _interopRequireDefault(require("../Squeezer"));
+var _DropdownControl = _interopRequireDefault(require("./DropdownControl"));
+var _ButtonGroupControl = _interopRequireDefault(require("./ButtonGroupControl"));
+var _useResponsive = require("./useResponsive");
+var _useSelected = require("./useSelected");
 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 alphaSort = (a, b) => a > b ? 1 : -1;
 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);
-    (0, _defineProperty2.default)(this, "state", {
-      selected: this.props.selected,
-      monoWidth: 0
-    });
-    (0, _defineProperty2.default)(this, "context", void 0);
-    (0, _defineProperty2.default)(this, "isCompact", false);
-    (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(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
-          });
-        }
-      }
-    });
-    (0, _defineProperty2.default)(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);
-      }
-    });
-    (0, _defineProperty2.default)(this, "compact", () => {
-      if (this.isCompact) {
-        return false;
-      }
-      this.isCompact = true;
-      this.forceUpdate();
-      return true;
-    });
-    (0, _defineProperty2.default)(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
       })
     });
-  }
-}
-(0, _defineProperty2.default)(SegmentedControl, "defaultProps", {
-  label: null,
-  labelPlacement: 'top',
-  monospaced: false,
-  multiple: false,
-  onChange: null,
-  inline: false,
-  ghost: false,
-  className: null,
-  baseClassName: SEGMENTED_CONTROL_BASE_CLASS_NAME
-});
-(0, _defineProperty2.default)(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;

package/cjs/components/SegmentedControl/getSelectedValues.js

@@ -0,0 +1,18 @@
+"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;

package/cjs/components/SegmentedControl/useResponsive.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsive = void 0;
+var _react = require("react");
+var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
+// 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;

package/cjs/components/SegmentedControl/useSelected.js

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

package/cjs/components/Select/Select.js

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

package/cjs/components/Squeezer/Squeezer.js

@@ -1,98 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _reactMeasure = _interopRequireDefault(require("react-measure"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
+var _hooks = require("../../hooks");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-class Squeezer extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(this, "measuring", false);
-    (0, _defineProperty2.default)(this, "measurements", []);
-    (0, _defineProperty2.default)(this, "minWidth", 0);
-    (0, _defineProperty2.default)(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
-        });
-      }
-    });
-  }
-}
+/** 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;

package/cjs/components/Tabs/Tabs.js

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

package/cjs/components/Toaster/Toaster.js

@@ -202,7 +202,7 @@ _Toaster = Toaster;
   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);
 });

package/cjs/components/Toolbar/RegistryContext.js

@@ -37,7 +37,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;
@@ -53,18 +53,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;
     (0, _defineProperty2.default)(this, "_isCompact", false);
     (0, _defineProperty2.default)(this, "onCompactStateChange", void 0);
     this.onCompactStateChange = onCompactStateChange;
@@ -80,6 +82,9 @@ class RegistryItem {
   get isCompact() {
     return this._isCompact;
   }
+  get isExpandable() {
+    return this._isCompact;
+  }
 }
 const useRegistry = () => {
   const parentRegistry = useRegistryContext();

package/cjs/components/Toolbar/ToolbarMenu.js

@@ -62,7 +62,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);
@@ -74,7 +74,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 => {