@plesk/ui-library 3.31.3 → 3.32.0

package/cjs/components/SegmentedControl/SegmentedControl.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,12 +16,11 @@ var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _Menu = _interopRequireWildcard(require("../Menu"));
 var _Squeezer = _interopRequireDefault(require("../Squeezer"));
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 const alphaSort = (a, b) => a > b ? 1 : -1;
 
 /**
@@ -159,23 +157,28 @@ class SegmentedControl extends _react.Component {
     const {
       title
     } = buttons.find(button => button.value === selected) || {};
-    const menu = /*#__PURE__*/_react.default.createElement(_Menu.default, null, buttons.map(_ref2 => {
-      let {
-        title,
-        value,
-        ...buttonProps
-      } = _ref2;
-      const menuItemProps = {};
-      if (onChange !== null) {
-        menuItemProps.onClick = this.handleChange(value);
-      }
-      return /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, (0, _extends2.default)({
-        key: value
-      }, buttonProps, menuItemProps), title);
-    }));
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      menu: menu
-    }, title);
+    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 {
@@ -191,38 +194,41 @@ class SegmentedControl extends _react.Component {
       monoWidth
     } = this.state;
     const isCollapsed = this.state.compact;
-    return /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-      className: `${baseClassName}__button-group`
-    }, 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__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
-        key: value,
-        selected: buttonSelected,
-        ghost: ghost
-      }, handler, buttonProps), title);
-    }));
+    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 {
@@ -240,29 +246,34 @@ class SegmentedControl extends _react.Component {
       ...props
     } = this.props;
     const isCollapsed = this.isResponsive();
-    return /*#__PURE__*/_react.default.createElement(_ResponsiveContext.default.Provider, {
-      value: isCollapsed
-    }, /*#__PURE__*/_react.default.createElement(_Squeezer.default, {
-      compact: this.compact,
-      uncompact: this.uncompact,
-      innerRef: el => {
-        this.rootRef.current = el;
-      }
-    }, _ref4 => {
-      let {
-        ref
-      } = _ref4;
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-        ref: ref,
-        className: (0, _classnames.default)(baseClassName, {
-          [`${baseClassName}--inline`]: inline,
-          [`${baseClassName}--collapsed`]: isCollapsed,
-          [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
-        }, className)
-      }, props), label && /*#__PURE__*/_react.default.createElement("div", {
-        className: `${baseClassName}__label`
-      }, label), this.renderControl());
-    }));
+    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 => {
+          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()]
+          });
+        }
+      })
+    });
   }
 }
 SegmentedControl.propTypes = {

package/cjs/components/Select/MultiValue.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireDefault(require("react"));
 var _constants = require("../../constants");
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
 
 const MultiValue = _ref => {
@@ -26,25 +25,31 @@ const MultiValue = _ref => {
     e.stopPropagation();
     onRemove();
   };
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(baseClassName)
-  }, props), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__content`
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__label`
-  }, children), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: `${baseClassName}__remove`,
-    size: "12",
-    onMouseDown: onMouseDown,
-    onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 12 12",
-    focusable: "false",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M3.85 8.854a.498.498 0 1 1-.704-.704L5.296 6l-2.15-2.15a.498.498 0 0 1 .704-.704L6 5.296l2.15-2.15a.498.498 0 1 1 .704.704L6.704 6l2.15 2.15a.498.498 0 0 1-.704.704L6 6.704l-2.15 2.15z"
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(baseClassName),
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${baseClassName}__content`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: `${baseClassName}__label`,
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        className: `${baseClassName}__remove`,
+        size: "12",
+        onMouseDown: onMouseDown,
+        onClick: onClick,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 12 12",
+          focusable: "false",
+          "aria-hidden": "true",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+            d: "M3.85 8.854a.498.498 0 1 1-.704-.704L5.296 6l-2.15-2.15a.498.498 0 0 1 .704-.704L6 5.296l2.15-2.15a.498.498 0 1 1 .704.704L6.704 6l2.15 2.15a.498.498 0 0 1-.704.704L6 6.704l-2.15 2.15z"
+          })
+        })
+      })]
+    })
+  });
 };
 var _default = MultiValue;
 exports.default = _default;

package/cjs/components/Select/Select.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
 var _constants = require("../../constants");
@@ -15,6 +14,7 @@ var _Translate = _interopRequireDefault(require("../Translate"));
 var _SelectControl = _interopRequireDefault(require("./SelectControl"));
 var _SelectOptionGroup = _interopRequireDefault(require("./SelectOptionGroup"));
 var _SelectOption = _interopRequireDefault(require("./SelectOption"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
@@ -277,7 +277,7 @@ const Select = _ref => {
     setValue(nextValue);
     (0, _utils.safeInvoke)(onChange, nextValue);
   };
-  const control = /*#__PURE__*/_react.default.createElement(_SelectControl.default, {
+  const control = /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectControl.default, {
     id: id,
     name: name,
     current: current,
@@ -297,7 +297,7 @@ const Select = _ref => {
     placeholder: placeholder,
     ref: controlRef
   });
-  return /*#__PURE__*/_react.default.createElement(_ComboBoxDropdown.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboBoxDropdown.default, {
     className: (0, _classnames.default)(baseClassName, className, {
       [`${baseClassName}--size-${size}`]: size
     }),
@@ -311,13 +311,14 @@ const Select = _ref => {
     highlightedIndex: highlightedIndex,
     onHighlightedIndexChange: handleHighlightedIndexChange,
     onClose: handleClose,
-    noOptions: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    noOptions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
       content: "Select.noOptions",
       fallback: "No options"
     }),
     emitter: emitterRef.current,
-    value: value
-  }, props));
+    value: value,
+    ...props
+  });
 };
 var _default = Select;
 exports.default = _default;

package/cjs/components/Select/Select.stories.js

@@ -5,52 +5,53 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchableAtBottom = exports.Basic = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
 var _Select = _interopRequireDefault(require("./Select"));
 var _SelectOption = _interopRequireDefault(require("./SelectOption"));
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-const Basic = args => /*#__PURE__*/_react.default.createElement(_Select.default, args);
+const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+  ...args
+});
 exports.Basic = Basic;
 Basic.args = {
-  children: [/*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "1"
-  }, 'One'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "2"
-  }, 'Two'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "3"
-  }, 'Three'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "4"
-  }, 'Four'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "5"
-  }, 'Five'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "6"
-  }, 'Six'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "7"
-  }, 'Seven'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "8"
-  }, 'Eight'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "9"
-  }, 'Nine'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "10"
-  }, 'Ten'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "11"
-  }, 'Eleven'), /*#__PURE__*/_react.default.createElement(_SelectOption.default, {
-    key: "12"
-  }, 'Twelve')],
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'One'
+  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Two'
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Three'
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Four'
+  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Five'
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Six'
+  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Seven'
+  }, "7"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Eight'
+  }, "8"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Nine'
+  }, "9"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Ten'
+  }, "10"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Eleven'
+  }, "11"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+    children: 'Twelve'
+  }, "12")],
   'data-test': 'select'
 };
-const SearchableAtBottom = () => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      bottom: 0,
-      padding: 16
-    }
-  }, /*#__PURE__*/_react.default.createElement(Basic, (0, _extends2.default)({
-    searchable: true
-  }, Basic.args)));
-};
+const SearchableAtBottom = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  style: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    padding: 16
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
+    searchable: true,
+    ...Basic.args
+  })
+});
 exports.SearchableAtBottom = SearchableAtBottom;

package/cjs/components/Select/SelectControl.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _LocaleProvider = require("../LocaleProvider");
 var _constants = require("../../constants");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _MultiValue = _interopRequireDefault(require("./MultiValue"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 const DEFAULT_INPUT_WIDTH = 2;
@@ -161,84 +159,96 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
   const handleBlur = () => {
     setFocused(false);
   };
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--disabled`]: disabled,
       [`${baseClassName}--focused`]: focused,
       [`${baseClassName}--multiple`]: multiple
-    })
-  }, props, {
+    }),
+    ...props,
     onClick: handleClick,
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__value-container`
-  }, Array.isArray(current) && current.map(_ref3 => {
-    let {
-      value,
-      label
-    } = _ref3;
-    return /*#__PURE__*/_react.default.createElement(_MultiValue.default, {
-      key: value,
-      onRemove: () => handleValueRemove(value)
-    }, label);
-  }), /*#__PURE__*/_react.default.createElement("input", {
-    id: id,
-    className: `${baseClassName}__input`,
-    value: filterValue,
-    type: "text",
-    onChange: handleInputChange,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    readOnly: !searchable,
-    disabled: disabled,
-    ref: inputRef,
-    style: {
-      width: inputWidth
-    }
-  }), !filterValue && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !Array.isArray(current) && current && /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__value`
-  }, current.children), !hasValue && placeholder && /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__placeholder`
-  }, placeholder))), /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__indicators`
-  }, clearable && hasValue && /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--clear`),
-    tabIndex: -1,
-    onMouseDown: e => e.preventDefault(),
-    onClick: e => {
-      e.stopPropagation();
-      handleClear();
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: `${baseClassName}__indicator-icon`
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-4 -4 16 16",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1 .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
-  })))), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
-    tabIndex: -1
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: `${baseClassName}__indicator-icon`
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-4 -5 16 16",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M4 4.048L.847.895a.496.496 0 1 0-.702.702l3.452 3.451a.5.5 0 0 0 .806 0l3.452-3.451a.496.496 0 0 0-.702-.702L4 4.048z"
-  }))))), name && values.map(value => /*#__PURE__*/_react.default.createElement("input", {
-    key: value,
-    type: "hidden",
-    name: name,
-    value: value
-  })));
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: `${baseClassName}__value-container`,
+      children: [Array.isArray(current) && current.map(_ref3 => {
+        let {
+          value,
+          label
+        } = _ref3;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiValue.default, {
+          onRemove: () => handleValueRemove(value),
+          children: label
+        }, value);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        id: id,
+        className: `${baseClassName}__input`,
+        value: filterValue,
+        type: "text",
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        readOnly: !searchable,
+        disabled: disabled,
+        ref: inputRef,
+        style: {
+          width: inputWidth
+        }
+      }), !filterValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [!Array.isArray(current) && current && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: `${baseClassName}__value`,
+          children: current.children
+        }), !hasValue && placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: `${baseClassName}__placeholder`,
+          children: placeholder
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: `${baseClassName}__indicators`,
+      children: [clearable && hasValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--clear`),
+        tabIndex: -1,
+        onMouseDown: e => e.preventDefault(),
+        onClick: e => {
+          e.stopPropagation();
+          handleClear();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          className: `${baseClassName}__indicator-icon`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "-4 -4 16 16",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+              d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1 .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
+        tabIndex: -1,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          className: `${baseClassName}__indicator-icon`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "-4 -5 16 16",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+              d: "M4 4.048L.847.895a.496.496 0 1 0-.702.702l3.452 3.451a.5.5 0 0 0 .806 0l3.452-3.451a.496.496 0 0 0-.702-.702L4 4.048z"
+            })
+          })
+        })
+      })]
+    }), name && values.map(value => /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "hidden",
+      name: name,
+      value: value
+    }, value))]
+  });
 });
 SelectControl.displayName = 'SelectControl';
 var _default = SelectControl;

package/cjs/components/Select/SelectOption.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
@@ -16,7 +15,7 @@ const SelectOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition
   if (false) {
-    return /*#__PURE__*/_react.default.createElement("option", null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {});
   }
   return null;
 };