@plesk/ui-library 3.40.10 → 3.40.12

package/esm/components/InPlaceEdit/Editor.js

@@ -0,0 +1,61 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useState } from 'react';
+import classNames from 'classnames';
+import Button from '../Button';
+import Input from '../Input';
+import Translate from '../Translate';
+import locale from './locale/en-US';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Editor = _ref => {
+  let {
+    value: initialValue = '',
+    onSave,
+    onCancel,
+    baseClassName
+  } = _ref;
+  const [value, setValue] = 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__*/_jsxs("div", {
+    className: `${baseClassName}__edit`,
+    children: [/*#__PURE__*/_jsx(Input, {
+      className: `${baseClassName}__edit-input`,
+      value: value,
+      onChange: handleChange,
+      onKeyDown: handleInputKeyDown,
+      autoFocus: true
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__edit-actions`,
+      children: [/*#__PURE__*/_jsx(Button, {
+        ghost: true,
+        className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
+        icon: "check-mark",
+        onClick: handleSave,
+        tooltip: /*#__PURE__*/_jsx(Translate, {
+          content: "InPlaceEdit.okButtonHint",
+          fallback: locale.okButtonHint
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        ghost: true,
+        className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
+        icon: "cross-mark",
+        onClick: onCancel,
+        tooltip: /*#__PURE__*/_jsx(Translate, {
+          content: "InPlaceEdit.cancelButtonHint",
+          fallback: locale.cancelButtonHint
+        })
+      })]
+    })]
+  });
+};
+export default Editor;

package/esm/components/InPlaceEdit/InPlaceEdit.js

@@ -1,13 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component } from 'react';
+import { useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
-import Input from '../Input';
-import Tooltip from '../Tooltip';
 import Translate from '../Translate';
+import Editor from './Editor';
 import locale from './locale/en-US';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -16,114 +14,41 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * give users a different way of editing the text.
  * @since 1.8.3
  */
-class InPlaceEdit extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      editing: false,
-      draft: ''
-    });
-    _defineProperty(this, "handleEdit", () => {
-      this.setState(_ref => {
-        let {
-          editing
-        } = _ref;
-        return {
-          editing: !editing,
-          draft: editing ? '' : this.props.value
-        };
-      });
-    });
-    _defineProperty(this, "handleEditKey", event => {
-      if (event.key === 'Escape') {
-        this.handleEdit();
-      } else if (event.key === 'Enter') {
-        this.handleEditOk();
-      }
-    });
-    _defineProperty(this, "handleChange", event => {
-      this.setState({
-        draft: event.target.value
-      });
-    });
-    _defineProperty(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__*/_jsxs("div", {
-      className: classNames(baseClassName, className),
-      ...props,
-      children: [editing ? /*#__PURE__*/_jsxs("div", {
-        className: `${baseClassName}__edit`,
-        children: [/*#__PURE__*/_jsx(Input, {
-          className: `${baseClassName}__edit-input`,
-          value: draft,
-          onChange: this.handleChange,
-          onKeyDown: this.handleEditKey,
-          autoFocus: true
-        }), /*#__PURE__*/_jsxs("div", {
-          className: `${baseClassName}__edit-actions`,
-          children: [/*#__PURE__*/_jsx(Tooltip, {
-            title: /*#__PURE__*/_jsx(Translate, {
-              content: "InPlaceEdit.okButtonHint",
-              fallback: locale.okButtonHint
-            }),
-            children: /*#__PURE__*/_jsx(Button, {
-              ghost: true,
-              className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
-              icon: "check-mark",
-              onClick: this.handleEditOk
-            })
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: /*#__PURE__*/_jsx(Translate, {
-              content: "InPlaceEdit.cancelButtonHint",
-              fallback: locale.cancelButtonHint
-            }),
-            children: /*#__PURE__*/_jsx(Button, {
-              ghost: true,
-              className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
-              icon: "cross-mark",
-              onClick: this.handleEdit
-            })
-          })]
-        })]
-      }) : value, onChange && !editing && /*#__PURE__*/_jsx(Tooltip, {
-        title: /*#__PURE__*/_jsx(Translate, {
-          content: "InPlaceEdit.editButtonHint",
-          fallback: locale.editButtonHint
-        }),
-        children: /*#__PURE__*/_jsx(Button, {
-          ghost: true,
-          className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
-          onClick: this.handleEdit,
-          icon: {
-            name: 'pencil',
-            className: `${baseClassName}__control-button-icon`
-          }
-        })
-      })]
-    });
-  }
-}
-_defineProperty(InPlaceEdit, "defaultProps", {
-  value: null,
-  onChange: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}in-place-edit`
-});
+const InPlaceEdit = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}in-place-edit`,
+    className,
+    onChange,
+    value,
+    ...props
+  } = _ref;
+  const [isEditing, setIsEditing] = useState(false);
+  const toggleEditing = () => setIsEditing(current => !current);
+  const handleSave = newValue => {
+    onChange?.(newValue);
+    toggleEditing();
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: [!isEditing && value, !isEditing && onChange && /*#__PURE__*/_jsx(Button, {
+      ghost: true,
+      className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
+      onClick: toggleEditing,
+      icon: {
+        name: 'pencil',
+        className: `${baseClassName}__control-button-icon`
+      },
+      tooltip: /*#__PURE__*/_jsx(Translate, {
+        content: "InPlaceEdit.editButtonHint",
+        fallback: locale.editButtonHint
+      })
+    }), isEditing && /*#__PURE__*/_jsx(Editor, {
+      baseClassName: baseClassName,
+      value: `${value}`,
+      onSave: handleSave,
+      onCancel: toggleEditing
+    })]
+  });
+};
 export default InPlaceEdit;

package/esm/components/Tabs/Tabs.js

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

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.40.10";
+const version = "3.40.12";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.40.10",
+  "version": "3.40.12",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -25,8 +25,8 @@
     "lint:es": "eslint --ext js,md,tsx src configs scripts styleguidist",
     "lint:types": "tsc",
     "lint:style": "stylelint \"{src,styleguidist}/**/*.less\"",
-    "format:check": "prettier --check src",
-    "format": "prettier --write src",
+    "format:check": "prettier --check src styleguidist",
+    "format": "prettier --write src styleguidist",
     "styleguide": "styleguidist server --config ./configs/styleguide.config.js",
     "styleguide:build": "rimraf ./styleguide && styleguidist build --config ./configs/styleguide.config.js",
     "prepublishOnly": "yarn install && yarn test && yarn build && yarn styleguide:build",
@@ -48,13 +48,13 @@
     "classnames": "^2.5.1",
     "codemirror": "5.58.2",
     "marked": "4.2.12",
-    "memoize-one": "^5.2.1",
+    "memoize-one": "^6.0.0",
     "popper.js": "1.16.1",
     "prop-types": "^15.8.1",
     "react-measure": "2.5.2",
     "react-sortable-hoc": "0.6.8",
     "react-transition-group": "^4.4.5",
-    "scroll-into-view-if-needed": "^2.2.31",
+    "scroll-into-view-if-needed": "^3.1.0",
     "svg4everybody": "2.1.9",
     "use-focus-visible": "^1.0.2"
   },
@@ -67,7 +67,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@babel/types": "^7.25.6",
-    "@csstools/postcss-logical-float-and-clear": "^2.0.1",
+    "@csstools/postcss-logical-float-and-clear": "^3.0.0",
     "@plesk/eslint-config": "^3.0.0",
     "@plesk/stylelint-config": "^2.0.0",
     "@testing-library/dom": "^9.3.4",
@@ -77,7 +77,7 @@
     "@types/buble": "^0.20.5",
     "@types/classnames": "2.3.1",
     "@types/codemirror": "^5.60.15",
-    "@types/doctrine": "^0.0.5",
+    "@types/doctrine": "^0.0.9",
     "@types/jest": "^29.5.13",
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/marked": "^4.3.2",
@@ -86,12 +86,12 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-measure": "2.0.9",
     "@types/react-transition-group": "^4.4.11",
-    "@types/svg4everybody": "2.1.2",
+    "@types/svg4everybody": "2.1.5",
     "@types/webpack-env": "^1.18.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.20",
-    "babel-loader": "^8.4.1",
+    "babel-loader": "^9.2.1",
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
@@ -110,8 +110,8 @@
     "postcss": "^8.4.47",
     "postcss-less": "^6.0.0",
     "postcss-loader": "^8.1.1",
-    "postcss-logical": "^7.0.1",
-    "prettier": "^2.8.8",
+    "postcss-logical": "^8.0.0",
+    "prettier": "^3.4.1",
     "puppeteer-core": "22.8.2",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
@@ -123,7 +123,7 @@
     "stylelint": "^15.11.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-no-unsupported-browser-features": "^6.1.0",
-    "stylelint-prettier": "^3.0.0",
+    "stylelint-prettier": "^4.1.0",
     "stylelint-use-logical-spec": "^5.0.1",
     "svg-mixer": "^2.3.14",
     "terser-webpack-plugin": "^5.3.10",