@plesk/ui-library 3.31.2 → 3.31.3

package/esm/components/Button/Button.js

@@ -31,6 +31,7 @@ const oldIconNames = {
 };
 import ResponsiveContext from '../ResponsiveContext';
 import OnDarkContext from '../OnDarkContext';
+import ButtonContext from './ButtonContext';
 const renderIcon = _ref => {
   let {
     baseClassName,
@@ -76,7 +77,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
     baseClassName,
     className,
     component: Tag,
-    size,
+    size: propsSize,
     intent,
     ghost,
     selected: selectedProp,
@@ -97,6 +98,8 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
     return !selectedState;
   };
   const isCollapsed = useContext(ResponsiveContext);
+  const buttonContextConfig = useContext(ButtonContext);
+  const size = propsSize || buttonContextConfig.defaultProps.size;
   const componentProps = {};
   if (Tag === 'button') {
     componentProps.type = 'button';

package/esm/components/Button/ButtonContext.js

@@ -0,0 +1,18 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import React from 'react';
+const defaultValue = {
+  defaultProps: {
+    size: undefined
+  }
+};
+export const ButtonContext = /*#__PURE__*/React.createContext(defaultValue);
+export const getButtonContextValue = value => ({
+  ...defaultValue,
+  ...value,
+  defaultProps: {
+    ...defaultValue.defaultProps,
+    ...(value.defaultProps || {})
+  }
+});
+export default ButtonContext;

package/esm/components/Drawer/Drawer.js

@@ -8,7 +8,6 @@ import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
 import { useClosingConfirmation } from '../ClosingConfirmation';
 import Header from './Header';
-import ScrollDirection from './ScrollDirection';
 import Form from '../Form';
 import Heading from '../Heading';
 import { isLikeText } from '../Translate';
@@ -163,7 +162,7 @@ const defaultProps = {
 
 /**
  * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
- * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
+ * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
  * @since 0.0.65
  */
 const Drawer = _ref => {
@@ -282,18 +281,12 @@ const Drawer = _ref => {
       className: `${baseClassName}__title`
     }, title), subtitle && /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__subtitle`
-    }, subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, _ref6 => {
-      let {
-        handleScroll
-      } = _ref6;
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__body`,
-        onScroll: handleScroll,
-        ref: scrollableRef
-      }, /*#__PURE__*/React.createElement(ScrollableElementFormContext.Provider, {
-        value: scrollableRef.current
-      }, content));
-    }), footer && /*#__PURE__*/React.createElement("footer", {
+    }, subtitle)), /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__body`,
+      ref: scrollableRef
+    }, /*#__PURE__*/React.createElement(ScrollableElementFormContext.Provider, {
+      value: scrollableRef.current
+    }, content)), footer && /*#__PURE__*/React.createElement("footer", {
       className: `${baseClassName}__footer`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__footer-inner`

package/esm/components/Drawer/DrawerProgress.js

@@ -2,24 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
 
-import React, { Component, Fragment, isValidElement, cloneElement } from 'react';
+import React, { Component, Fragment } from 'react';
 import Button from '../Button';
+import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 import Translate from '../Translate';
 import Progress from '../Progress';
 import ProgressStep, { STATUS_DONE, STATUS_ERROR, STATUS_NOT_STARTED } from '../ProgressStep';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke } from '../utils';
-const renderAdditionalButtons = buttons => {
-  const buttonProcessing = button => {
-    if ( /*#__PURE__*/isValidElement(button) && button.type === Button) {
-      return /*#__PURE__*/cloneElement(button, {
-        size: 'lg'
-      });
-    }
-    return button;
-  };
-  return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
-};
+const additionalButtonsConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class DrawerProgress extends Component {
   constructor() {
     super(...arguments);
@@ -120,7 +115,9 @@ class DrawerProgress extends Component {
     }, step)))));
     const footer = hasFooter ? /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__footer`
-    }, renderAdditionalButtons(buttons), canCancel && /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(ButtonContext.Provider, {
+      value: additionalButtonsConfig
+    }, buttons), canCancel && /*#__PURE__*/React.createElement(Button, {
       onClick: this.handleCancel,
       size: "lg"
     }, /*#__PURE__*/React.createElement(Translate, {

package/esm/components/Form/Form.js

@@ -2,14 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
-import React, { createElement, Component, cloneElement, isValidElement, useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { Component, cloneElement, isValidElement, useRef, forwardRef, useImperativeHandle } from 'react';
 import { getIn, setIn } from './utils';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
+import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 import FormField from '../FormField';
 import Section from '../Section';
 import Translate from '../Translate';
@@ -17,6 +16,11 @@ import FormContext from './FormContext';
 import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import DisabledContext from './DisabledContext';
 import { safeInvoke } from '../utils';
+const actionButtonsConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class Form extends Component {
   constructor() {
     var _this;
@@ -190,7 +194,9 @@ class Form extends Component {
       } = this.props;
       return /*#__PURE__*/React.createElement(Section, {
         className: classNames(`${baseClassName}__footer`, footerClassName)
-      }, /*#__PURE__*/React.createElement(FormField, null, this.renderSubmitButton({
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(ButtonContext.Provider, {
+        value: actionButtonsConfig
+      }, this.renderSubmitButton({
         submitButton,
         state
       }), this.renderApplyButton({
@@ -201,7 +207,7 @@ class Form extends Component {
       }), this.renderCancelButton({
         cancelButton,
         state
-      })));
+      }))));
     });
   }
   static getDerivedStateFromProps(props, state) {
@@ -262,7 +268,6 @@ class Form extends Component {
       return null;
     }
     return /*#__PURE__*/React.createElement(Button, _extends({
-      size: "lg",
       intent: "primary",
       state: state === 'submit' ? 'loading' : undefined,
       disabled: !!state,
@@ -273,7 +278,7 @@ class Form extends Component {
         content: "Form.submitButton",
         fallback: "Save"
       })
-    }, submitButton));
+    }, typeof submitButton === 'object' ? submitButton : {}));
   }
   renderApplyButton(_ref5) {
     let {
@@ -283,18 +288,18 @@ class Form extends Component {
     if (!applyButton) {
       return null;
     }
-    return /*#__PURE__*/createElement(Button, {
-      size: 'lg',
-      intent: 'primary',
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      intent: "primary",
       state: state === 'apply' ? 'loading' : undefined,
       disabled: !!state,
-      onClick: this.handleApplyClick,
+      onClick: this.handleApplyClick
+      // eslint-disable-next-line react/no-children-prop
+      ,
       children: /*#__PURE__*/React.createElement(Translate, {
         content: "Form.applyButton",
         fallback: "Apply"
-      }),
-      ...applyButton
-    });
+      })
+    }, typeof applyButton === 'object' ? applyButton : {}));
   }
   renderCancelButton(_ref6) {
     let {
@@ -304,16 +309,16 @@ class Form extends Component {
     if (!cancelButton) {
       return null;
     }
-    return /*#__PURE__*/createElement(Button, {
-      size: 'lg',
+    return /*#__PURE__*/React.createElement(Button, _extends({
       state: state === 'cancel' ? 'loading' : undefined,
-      disabled: !!state,
+      disabled: !!state
+      // eslint-disable-next-line react/no-children-prop
+      ,
       children: /*#__PURE__*/React.createElement(Translate, {
         content: "Form.cancelButton",
         fallback: "Cancel"
-      }),
-      ...cancelButton
-    });
+      })
+    }, typeof cancelButton === 'object' ? cancelButton : {}));
   }
   renderAdditionalButtons(_ref7) {
     let {
@@ -328,9 +333,6 @@ class Form extends Component {
           const props = {
             className: classNames(element.props.className, `${baseClassName}__additional-button`)
           };
-          if (element.type === Button) {
-            props.size = 'lg';
-          }
           return /*#__PURE__*/cloneElement(element, props);
         }
         return element;

package/esm/components/List/ListEmptyView.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import classNames from 'classnames';
@@ -8,6 +8,7 @@ import Translate from '../Translate';
 import empty from './images/default.png';
 import filtered from './images/filtered.png';
 import { CLS_PREFIX } from '../../constants';
+import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 const createImage = (baseClassName, image, reason) => {
   if (image === undefined) {
     image = reason === 'filtered' ? filtered : empty;
@@ -53,6 +54,11 @@ const createDescription = (baseClassName, description, reason) => {
     className: `${baseClassName}__description`
   }, description);
 };
+const buttonConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 
 /**
  * `ListEmptyView` component is used for displaying "empty" state of [List](#!/List)
@@ -76,6 +82,8 @@ const ListEmptyView = _ref => {
     className: `${baseClassName}__body`
   }, createTitle(baseClassName, title, reason), createDescription(baseClassName, description, reason), actions && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__actions`
-  }, actions)));
+  }, /*#__PURE__*/React.createElement(ButtonContext.Provider, {
+    value: buttonConfig
+  }, actions))));
 };
 export default ListEmptyView;

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.31.2",
+  "version": "3.31.3",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -24,7 +24,7 @@
     "lint": "yarn lint:es && yarn lint:types && yarn lint:style",
     "lint:es": "eslint --ext js,md,tsx src configs scripts styleguidist",
     "lint:types": "tsc",
-    "lint:style": "stylelint \"src/**/*.less\"",
+    "lint:style": "stylelint \"{src,styleguidist}/**/*.less\"",
     "styleguide": "styleguidist server --config ./configs/styleguide.config.js",
     "styleguide:build": "styleguidist build --config ./configs/styleguide.config.js",
     "create-component": "node scripts/create-component.js",
@@ -42,15 +42,15 @@
     "/index.js"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
+    "@babel/runtime": "^7.21.5",
     "@plesk/react-movable": "^2.7.1",
     "classnames": "^2.3.2",
     "codemirror": "5.58.2",
     "marked": "4.2.12",
     "memoize-one": "^5.2.1",
-    "popper.js": "1.14.3",
+    "popper.js": "1.16.1",
     "prop-types": "^15.8.1",
-    "react-measure": "2.3.0",
+    "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",
@@ -58,30 +58,30 @@
     "use-focus-visible": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
+    "@babel/core": "^7.21.8",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
-    "@babel/types": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/types": "^7.21.5",
     "@csstools/postcss-logical-float-and-clear": "^1.0.1",
     "@plesk/eslint-config": "^1.1.0",
-    "@plesk/stylelint-config": "^1.0.0",
-    "@types/buble": "^0.19.2",
+    "@plesk/stylelint-config": "^2.0.0",
+    "@types/buble": "^0.20.1",
     "@types/cheerio": "^0.22.31",
-    "@types/classnames": "2.2.7",
-    "@types/doctrine": "^0.0.3",
-    "@types/enzyme": "^3.10.12",
+    "@types/classnames": "2.3.1",
+    "@types/doctrine": "^0.0.5",
+    "@types/enzyme": "^3.10.13",
     "@types/jest": "^23.3.14",
-    "@types/marked": "^4.0.8",
+    "@types/marked": "^4.3.1",
     "@types/node": "^12.20.55",
-    "@types/react": "^16.14.38",
-    "@types/react-dom": "^16.9.18",
+    "@types/react": "^16.14.41",
+    "@types/react-dom": "^16.9.19",
     "@types/react-measure": "2.0.8",
-    "@types/react-transition-group": "^4.4.5",
-    "@types/svg4everybody": "2.1.0",
+    "@types/react-transition-group": "^4.4.6",
+    "@types/svg4everybody": "2.1.2",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
     "autoprefixer": "^10.4.14",
@@ -90,8 +90,8 @@
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^5.2.1",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^4.2.2",
+    "css-loader": "^6.7.4",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.6.2",
@@ -99,38 +99,37 @@
     "eslint-plugin-markdown": "^1.0.2",
     "eslint-plugin-prettier": "^3.4.1",
     "fs-extra": "^7.0.1",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.5.1",
     "inquirer": "^3.3.0",
     "jest": "^24.9.0",
     "jest-dev-server": "^4.4.0",
     "jest-image-snapshot": "^4.5.1",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
-    "mini-css-extract-plugin": "^2.7.5",
-    "postcss": "^8.4.21",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.23",
     "postcss-less": "^6.0.0",
-    "postcss-loader": "^7.2.4",
-    "postcss-logical": "^6.1.0",
-    "prettier": "^2.8.7",
+    "postcss-loader": "^7.3.0",
+    "postcss-logical": "^6.2.0",
+    "prettier": "^2.8.8",
     "puppeteer-core": "13.1.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-styleguidist": "^12.0.1",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
-    "rtlcss": "^4.0.0",
-    "style-loader": "^3.3.2",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.5",
+    "rtlcss": "^4.1.0",
+    "style-loader": "^3.3.3",
+    "stylelint": "^15.6.2",
     "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
     "stylelint-no-unsupported-browser-features": "^6.1.0",
-    "stylelint-prettier": "^2.0.0",
+    "stylelint-prettier": "^3.0.0",
     "stylelint-use-logical-spec": "^5.0.0",
     "svg-mixer": "^2.3.14",
-    "terser-webpack-plugin": "^5.3.7",
+    "terser-webpack-plugin": "^5.3.9",
     "typescript": "3.7.2",
-    "webpack": "^5.78.0",
-    "webpack-cli": "^5.0.1"
+    "webpack": "^5.83.1",
+    "webpack-cli": "^5.1.1"
   },
   "peerDependencies": {
     "react": "^16.8.6",
@@ -138,18 +137,14 @@
   },
   "resolutions": {
     "@babel/types": "^7.15.6",
-    "@types/node": "^12.12.8",
     "@types/react": "^16.14.35",
-    "**/caniuse-lite": "1.0.30001430",
-    "trim": "0.0.3",
-    "postcss": "8.4.21"
+    "trim": ">=0.0.3",
+    "postcss": "^8.4.23"
   },
   "browserslist": [
-    "last 2 versions",
-    ">1%",
+    "defaults",
     "not op_mini all",
-    "not dead",
-    "not ie 11"
+    "not kaios > 0"
   ],
   "author": "Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)",
   "license": "Apache-2.0"