@plesk/ui-library 3.40.10 → 3.40.12

package/cjs/components/InPlaceEdit/Editor.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Translate = _interopRequireDefault(require("../Translate"));
+var _enUS = _interopRequireDefault(require("./locale/en-US"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const Editor = _ref => {
+  let {
+    value: initialValue = '',
+    onSave,
+    onCancel,
+    baseClassName
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(initialValue);
+  const handleChange = event => {
+    setValue(event.target.value);
+  };
+  const handleSave = () => onSave(value);
+  const handleInputKeyDown = event => {
+    if (event.key === 'Escape') {
+      onCancel();
+    } else if (event.key === 'Enter') {
+      handleSave();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: `${baseClassName}__edit`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+      className: `${baseClassName}__edit-input`,
+      value: value,
+      onChange: handleChange,
+      onKeyDown: handleInputKeyDown,
+      autoFocus: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${baseClassName}__edit-actions`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ghost: true,
+        className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
+        icon: "check-mark",
+        onClick: handleSave,
+        tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+          content: "InPlaceEdit.okButtonHint",
+          fallback: _enUS.default.okButtonHint
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ghost: true,
+        className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
+        icon: "cross-mark",
+        onClick: onCancel,
+        tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+          content: "InPlaceEdit.cancelButtonHint",
+          fallback: _enUS.default.cancelButtonHint
+        })
+      })]
+    })]
+  });
+};
+var _default = exports.default = Editor;

package/cjs/components/InPlaceEdit/InPlaceEdit.js

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Button = _interopRequireDefault(require("../Button"));
-var _Input = _interopRequireDefault(require("../Input"));
-var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Translate = _interopRequireDefault(require("../Translate"));
+var _Editor = _interopRequireDefault(require("./Editor"));
 var _enUS = _interopRequireDefault(require("./locale/en-US"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
@@ -23,114 +21,41 @@ var _jsxRuntime = require("react/jsx-runtime");
  * give users a different way of editing the text.
  * @since 1.8.3
  */
-class InPlaceEdit extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "state", {
-      editing: false,
-      draft: ''
-    });
-    (0, _defineProperty2.default)(this, "handleEdit", () => {
-      this.setState(_ref => {
-        let {
-          editing
-        } = _ref;
-        return {
-          editing: !editing,
-          draft: editing ? '' : this.props.value
-        };
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleEditKey", event => {
-      if (event.key === 'Escape') {
-        this.handleEdit();
-      } else if (event.key === 'Enter') {
-        this.handleEditOk();
-      }
-    });
-    (0, _defineProperty2.default)(this, "handleChange", event => {
-      this.setState({
-        draft: event.target.value
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleEditOk", () => {
-      if (this.props.onChange) {
-        this.props.onChange(this.state.draft);
-      }
-      this.handleEdit();
-    });
-  }
-  render() {
-    const {
-      draft,
-      editing
-    } = this.state;
-    const {
-      baseClassName,
-      className,
-      onChange,
-      value,
-      ...props
-    } = this.props;
-    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`
-          }
-        })
-      })]
-    });
-  }
-}
-(0, _defineProperty2.default)(InPlaceEdit, "defaultProps", {
-  value: null,
-  onChange: null,
-  className: null,
-  baseClassName: `${_constants.CLS_PREFIX}in-place-edit`
-});
+const InPlaceEdit = _ref => {
+  let {
+    baseClassName = `${_constants.CLS_PREFIX}in-place-edit`,
+    className,
+    onChange,
+    value,
+    ...props
+  } = _ref;
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const toggleEditing = () => setIsEditing(current => !current);
+  const handleSave = newValue => {
+    onChange?.(newValue);
+    toggleEditing();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(baseClassName, className),
+    ...props,
+    children: [!isEditing && value, !isEditing && onChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      ghost: true,
+      className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
+      onClick: toggleEditing,
+      icon: {
+        name: 'pencil',
+        className: `${baseClassName}__control-button-icon`
+      },
+      tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+        content: "InPlaceEdit.editButtonHint",
+        fallback: _enUS.default.editButtonHint
+      })
+    }), isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Editor.default, {
+      baseClassName: baseClassName,
+      value: `${value}`,
+      onSave: handleSave,
+      onCancel: toggleEditing
+    })]
+  });
+};
 var _default = exports.default = InPlaceEdit;

package/cjs/components/Tabs/Tabs.js

@@ -458,9 +458,12 @@ class Tabs extends _react.Component {
     } = this.state;
     const clone = /*#__PURE__*/(0, _react.cloneElement)(search, searchProps);
     if (compact) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__search`,
-        children: clone
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
+        value: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${baseClassName}__search`,
+          children: clone
+        })
       });
     }
     return clone;
@@ -520,55 +523,52 @@ class Tabs extends _react.Component {
         addonBlock = this.renderSearchBar(searchProps);
       }
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
-      value: compact,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)(baseClassName, className),
-        ...props,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
-          onResize: this.handleResize,
-          innerRef: ref => this.tabsnavRef = ref,
-          children: _ref => {
-            let {
-              measureRef
-            } = _ref;
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
-              ref: measureRef,
-              children: [this.renderTabList(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
-                onResize: this.handleResize,
-                children: _ref2 => {
-                  let {
-                    measureRef: ref
-                  } = _ref2;
-                  const fakeTabs = this.renderFakeTabs();
-                  return fakeTabs ? /*#__PURE__*/(0, _react.cloneElement)(fakeTabs, {
-                    ref
-                  }) : null;
-                }
-              }), searchBlock, addonBlock && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
-                onResize: this.handleAddonResize,
-                bounds: true,
-                children: _ref3 => {
-                  let {
-                    measureRef: ref
-                  } = _ref3;
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                    className: `${baseClassName}__addon`,
-                    ref: ref,
-                    ...addonProps,
-                    children: addonBlock
-                  });
-                }
-              })]
-            });
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}__tab-panel`,
-          role: "tabpanel",
-          children: _react.Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null)
-        })]
-      })
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(baseClassName, className),
+      ...props,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
+        onResize: this.handleResize,
+        innerRef: ref => this.tabsnavRef = ref,
+        children: _ref => {
+          let {
+            measureRef
+          } = _ref;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
+            ref: measureRef,
+            children: [this.renderTabList(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
+              onResize: this.handleResize,
+              children: _ref2 => {
+                let {
+                  measureRef: ref
+                } = _ref2;
+                const fakeTabs = this.renderFakeTabs();
+                return fakeTabs ? /*#__PURE__*/(0, _react.cloneElement)(fakeTabs, {
+                  ref
+                }) : null;
+              }
+            }), searchBlock, addonBlock && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
+              onResize: this.handleAddonResize,
+              bounds: true,
+              children: _ref3 => {
+                let {
+                  measureRef: ref
+                } = _ref3;
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: `${baseClassName}__addon`,
+                  ref: ref,
+                  ...addonProps,
+                  children: addonBlock
+                });
+              }
+            })]
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__tab-panel`,
+        role: "tabpanel",
+        children: _react.Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null)
+      })]
     });
   }
 }

package/cjs/index.js

@@ -46,5 +46,5 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-const version = exports.version = "3.40.10";
+const version = exports.version = "3.40.12";
 (0, _svg4everybody.default)();