@plesk/ui-library 3.31.2 → 3.32.0

package/cjs/components/FormFieldText/FormFieldText.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -13,6 +12,7 @@ var _constants = require("../../constants");
 var _FormField = _interopRequireDefault(require("../FormField"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _TextArea = _interopRequireDefault(require("../TextArea"));
+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.
@@ -39,42 +39,46 @@ class FormFieldText extends _react.Component {
       inputProps,
       ...props
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_FormField.default, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormField.default, {
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--multiline`]: multiline
-      }, className)
-    }, props), _ref => {
-      let {
-        getId,
-        getName,
-        getValue,
-        setValue,
-        isDisabled
-      } = _ref;
-      return multiline ? /*#__PURE__*/_react.default.createElement(_TextArea.default, (0, _extends2.default)({
-        id: getId(),
-        name: getName(),
-        value: getValue(''),
-        onChange: e => setValue(e.target.value),
-        disabled: isDisabled(),
-        size: size,
-        rows: rows,
-        placeholder: placeholder,
-        autoFocus: autoFocus,
-        autoComplete: autoComplete,
-        autoheight: autoheight
-      }, inputProps)) : /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
-        id: getId(),
-        name: getName(),
-        className: `${baseClassName}__input`,
-        value: getValue(''),
-        onChange: e => setValue(e.target.value),
-        disabled: isDisabled(),
-        size: size,
-        placeholder: placeholder,
-        autoFocus: autoFocus,
-        autoComplete: autoComplete
-      }, inputProps));
+      }, className),
+      ...props,
+      children: _ref => {
+        let {
+          getId,
+          getName,
+          getValue,
+          setValue,
+          isDisabled
+        } = _ref;
+        return multiline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.default, {
+          id: getId(),
+          name: getName(),
+          value: getValue(''),
+          onChange: e => setValue(e.target.value),
+          disabled: isDisabled(),
+          size: size,
+          rows: rows,
+          placeholder: placeholder,
+          autoFocus: autoFocus,
+          autoComplete: autoComplete,
+          autoheight: autoheight,
+          ...inputProps
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+          id: getId(),
+          name: getName(),
+          className: `${baseClassName}__input`,
+          value: getValue(''),
+          onChange: e => setValue(e.target.value),
+          disabled: isDisabled(),
+          size: size,
+          placeholder: placeholder,
+          autoFocus: autoFocus,
+          autoComplete: autoComplete,
+          ...inputProps
+        });
+      }
     });
   }
 }

package/cjs/components/Grid/Grid.js

@@ -5,13 +5,13 @@ 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"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
 var _constants = require("../../constants");
+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.
@@ -93,20 +93,23 @@ class Grid extends _react.Component {
       [`${baseClassName}--gap-lg`]: gap === 'lg',
       [`${baseClassName}--gap-xl`]: gap === 'xl'
     }, className);
-    const result = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      className: computedClassName
-    }, props), minColumnWidth > 0 && !this.state.xs ? null : children);
+    const result = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: computedClassName,
+      ...props,
+      children: minColumnWidth > 0 && !this.state.xs ? null : children
+    });
     if (minColumnWidth > 0) {
-      return /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
         bounds: true,
-        onResize: this.handleResize
-      }, _ref2 => {
-        let {
-          measureRef
-        } = _ref2;
-        return /*#__PURE__*/(0, _react.cloneElement)(result, {
-          ref: measureRef
-        });
+        onResize: this.handleResize,
+        children: _ref2 => {
+          let {
+            measureRef
+          } = _ref2;
+          return /*#__PURE__*/(0, _react.cloneElement)(result, {
+            ref: measureRef
+          });
+        }
       });
     }
     return result;

package/cjs/components/GridCol/GridCol.js

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
  * `GridCol` component is a part of [Grid](#!/Grid) component.
  * @since 0.0.48
- */
-
-const GridCol = _ref => {
+ */const GridCol = _ref => {
   let {
     baseClassName,
     className,
@@ -36,9 +34,11 @@ const GridCol = _ref => {
     [`${baseClassName}--lg-${lg}`]: lg,
     [`${baseClassName}--xl-${xl}`]: xl
   }, className);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: computedClassName
-  }, props), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: computedClassName,
+    ...props,
+    children: children
+  });
 };
 GridCol.propTypes = {
   /**

package/cjs/components/Heading/Heading.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Icon = _interopRequireWildcard(require("../Icon"));
+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.
@@ -41,17 +40,20 @@ const Heading = _ref => {
   if (level === 6) {
     iconSize = _Icon.ICON_SIZE_12;
   }
-  return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--h${level}`]: level,
       [`${baseClassName}--icon`]: icon
-    }, className)
-  }, props), _Icon.default.create(icon, {
-    className: `${baseClassName}__icon`,
-    size: iconSize
-  }), icon ? /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__text`
-  }, children) : children);
+    }, className),
+    ...props,
+    children: [_Icon.default.create(icon, {
+      className: `${baseClassName}__icon`,
+      size: iconSize
+    }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: `${baseClassName}__text`,
+      children: children
+    }) : children]
+  });
 };
 var _default = Heading;
 exports.default = _default;

package/cjs/components/Hint/Hint.js

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
 /**
@@ -23,9 +22,11 @@ const Hint = _ref => {
     component: Tag = 'span',
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
-    className: (0, _classnames.default)(baseClassName, className)
-  }, props), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+    className: (0, _classnames.default)(baseClassName, className),
+    ...props,
+    children: children
+  });
 };
 var _default = Hint;
 exports.default = _default;

package/cjs/components/Icon/Icon.js

@@ -16,8 +16,7 @@ var _exportNames = {
   ICON_SIZE_192: true
 };
 exports.default = exports.ICON_SIZE_96 = exports.ICON_SIZE_64 = exports.ICON_SIZE_48 = exports.ICON_SIZE_32 = exports.ICON_SIZE_24 = exports.ICON_SIZE_192 = exports.ICON_SIZE_16 = exports.ICON_SIZE_128 = exports.ICON_SIZE_12 = 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 _constants = require("../../constants");
 var _oldIconNames = _interopRequireDefault(require("./oldIconNames"));
@@ -36,8 +35,7 @@ Object.keys(_constants2).forEach(function (key) {
 });
 var _utils = require("./utils");
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
-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 ICON_SIZE_12 = '12';
@@ -98,7 +96,7 @@ const Icon = _ref => {
   } = _ref;
   const newSize = size && oldIconSizes[size] || size;
   const newName = name ? _oldIconNames.default[name] || name : null;
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--size-${newSize}`]: newSize,
       [`${baseClassName}--intent ${baseClassName}--${intent}`]: intent,
@@ -107,15 +105,18 @@ const Icon = _ref => {
       [`${baseClassName}--flip-horizontal`]: flipHorizontal,
       [`${baseClassName}--flip-vertical`]: flipVertical,
       [`${baseClassName}--on-dark`]: (0, _react.useContext)(_OnDarkContext.default)
-    }, className)
-  }, props), newName ? /*#__PURE__*/_react.default.createElement("svg", {
-    focusable: "false"
-  }, /*#__PURE__*/_react.default.createElement("use", {
-    href: getHref(newName, newSize)
-  })) : src && /*#__PURE__*/_react.default.createElement("img", {
-    src: src,
-    alt: alt
-  }) || children);
+    }, className),
+    ...props,
+    children: newName ? /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      focusable: "false",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("use", {
+        href: getHref(newName, newSize)
+      })
+    }) : src && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: src,
+      alt: alt
+    }) || children
+  });
 };
 Icon.create = _utils.create;
 var _default = Icon;

package/cjs/components/Icon/Icon.stories.js

@@ -5,25 +5,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Basic = exports.All = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("./Icon"));
 var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-const Basic = args => /*#__PURE__*/_react.default.createElement(_Icon.default, args);
+const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+  ...args
+});
 exports.Basic = Basic;
 Basic.args = {};
-const All = () => /*#__PURE__*/_react.default.createElement("div", {
+const All = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   style: {
     display: 'inline-block'
   },
-  id: "icons"
-}, _constants.NAMES_12.map(name => /*#__PURE__*/_react.default.createElement("div", {
-  key: name,
-  style: {
-    margin: 16
-  }
-}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-  name: name
-}))));
+  id: "icons",
+  children: _constants.NAMES_12.map(name => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      margin: 16
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: name
+    })
+  }, name))
+});
 exports.All = All;

package/cjs/components/Icon/utils.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.create = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("./Icon"));
+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-2019. Plesk International GmbH. All rights reserved.
@@ -41,12 +41,15 @@ const create = function (icon) {
       className,
       ...props
     } = icon;
-    return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({}, defaults, {
-      className: defaults.className || className ? (0, _classnames.default)(defaults.className, className) : null
-    }, props));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      ...defaults,
+      className: defaults.className || className ? (0, _classnames.default)(defaults.className, className) : null,
+      ...props
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({}, defaults, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    ...defaults,
     name: icon
-  }));
+  });
 };
 exports.create = create;

package/cjs/components/InPlaceEdit/InPlaceEdit.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"));
@@ -16,12 +15,11 @@ var _Input = _interopRequireDefault(require("../Input"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Translate = _interopRequireDefault(require("../Translate"));
 var _enUS = _interopRequireDefault(require("./locale/en-US"));
+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 */
-
 /**
  * This component allows users to edit a short text "in place" — in other words, straight in the interface, without
  * opening additional dialog windows. If a text is large enough that it doesn't fit on a single line, you should
@@ -75,52 +73,59 @@ class InPlaceEdit extends _react.Component {
       value,
       ...props
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      className: (0, _classnames.default)(baseClassName, className)
-    }, props), editing ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__edit`
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-      className: `${baseClassName}__edit-input`,
-      value: draft,
-      onChange: this.handleChange,
-      onKeyDown: this.handleEditKey,
-      autoFocus: true
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__edit-actions`
-    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "InPlaceEdit.okButtonHint",
-        fallback: _enUS.default.okButtonHint
-      })
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      ghost: true,
-      className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
-      icon: "check-mark",
-      onClick: this.handleEditOk
-    })), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "InPlaceEdit.cancelButtonHint",
-        fallback: _enUS.default.cancelButtonHint
-      })
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      ghost: true,
-      className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
-      icon: "cross-mark",
-      onClick: this.handleEdit
-    })))) : value, onChange && !editing && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "InPlaceEdit.editButtonHint",
-        fallback: _enUS.default.editButtonHint
-      })
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      ghost: true,
-      className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
-      onClick: this.handleEdit,
-      icon: {
-        name: 'pencil',
-        className: `${baseClassName}__control-button-icon`
-      }
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(baseClassName, className),
+      ...props,
+      children: [editing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: `${baseClassName}__edit`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+          className: `${baseClassName}__edit-input`,
+          value: draft,
+          onChange: this.handleChange,
+          onKeyDown: this.handleEditKey,
+          autoFocus: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${baseClassName}__edit-actions`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+              content: "InPlaceEdit.okButtonHint",
+              fallback: _enUS.default.okButtonHint
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              ghost: true,
+              className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
+              icon: "check-mark",
+              onClick: this.handleEditOk
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+              content: "InPlaceEdit.cancelButtonHint",
+              fallback: _enUS.default.cancelButtonHint
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              ghost: true,
+              className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
+              icon: "cross-mark",
+              onClick: this.handleEdit
+            })
+          })]
+        })]
+      }) : value, onChange && !editing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+          content: "InPlaceEdit.editButtonHint",
+          fallback: _enUS.default.editButtonHint
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          ghost: true,
+          className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
+          onClick: this.handleEdit,
+          icon: {
+            name: 'pencil',
+            className: `${baseClassName}__control-button-icon`
+          }
+        })
+      })]
+    });
   }
 }
 InPlaceEdit.propTypes = {

package/cjs/components/Input/Input.js

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
@@ -29,22 +28,27 @@ const Input = _ref => {
     ...props
   } = _ref;
   const useSizeModifier = typeof size === 'string' && ['sm', 'md', 'lg', 'xl', 'fill'].indexOf(size) !== -1;
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--size-${size}`]: useSizeModifier,
       [`${baseClassName}--text-${textAlign}`]: textAlign,
       [`${baseClassName}--affix`]: prefix || suffix
-    }, className)
-  }, rootProps), prefix && /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__prefix`
-  }, prefix), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-    ref: innerRef,
-    type: type,
-    size: typeof size === 'number' ? size : undefined,
-    className: `${baseClassName}__input`
-  }, props)), suffix && /*#__PURE__*/_react.default.createElement("span", {
-    className: `${baseClassName}__suffix`
-  }, suffix));
+    }, className),
+    ...rootProps,
+    children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: `${baseClassName}__prefix`,
+      children: prefix
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ref: innerRef,
+      type: type,
+      size: typeof size === 'number' ? size : undefined,
+      className: `${baseClassName}__input`,
+      ...props
+    }), suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: `${baseClassName}__suffix`,
+      children: suffix
+    })]
+  });
 };
 var _default = Input;
 exports.default = _default;