@plesk/ui-library 3.28.1 → 3.29.0

package/esm/components/AutoClosable/AutoClosable.js

@@ -67,7 +67,9 @@ class AutoClosable extends Component {
   }
 
   componentDidMount() {
-    document.body.addEventListener('click', this.onOutsideClick);
+    document.body.addEventListener('click', this.onOutsideClick, {
+      capture: true
+    });
 
     if (this.context) {
       this.context.addChild(this);
@@ -75,7 +77,9 @@ class AutoClosable extends Component {
   }
 
   componentWillUnmount() {
-    document.body.removeEventListener('click', this.onOutsideClick);
+    document.body.removeEventListener('click', this.onOutsideClick, {
+      capture: true
+    });
 
     if (this.context) {
       this.context.removeChild(this);

package/esm/components/Button/Button.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
-import React, { cloneElement, isValidElement, useContext, useState } from 'react';
+import React, { cloneElement, forwardRef, isValidElement, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
@@ -72,7 +72,7 @@ const renderCaret = ({
  */
 
 
-const Button = ({
+const Button = /*#__PURE__*/forwardRef(({
   baseClassName,
   className,
   component: Tag,
@@ -90,7 +90,7 @@ const Button = ({
   arrow,
   disabled,
   ...props
-}) => {
+}, ref) => {
   const [selectedState, setSelectedState] = useState(false);
 
   const handleToggle = () => {
@@ -145,6 +145,7 @@ const Button = ({
   const isArrowButton = arrow === 'forward' || arrow === 'backward';
   const hasAriaDisabled = Tag === 'button' && disabled && tooltip;
   let button = /*#__PURE__*/React.createElement(Tag, _extends({
+    ref: ref,
     className: classNames(baseClassName, {
       [`${baseClassName}--${size}`]: size,
       [`${baseClassName}--${intent}`]: intent && !ghost,
@@ -184,8 +185,8 @@ const Button = ({
   }
 
   return button;
-};
-
+});
+Button.displayName = 'Button';
 Button.propTypes = {
   /**
    * Button size.
@@ -279,7 +280,12 @@ Button.propTypes = {
   /**
    * @ignore
    */
-  baseClassName: PropTypes.string
+  baseClassName: PropTypes.string,
+
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func
 };
 Button.defaultProps = {
   size: undefined,
@@ -297,6 +303,7 @@ Button.defaultProps = {
   component: 'button',
   className: undefined,
   baseClassName: `${CLS_PREFIX}button`,
-  arrow: undefined
+  arrow: undefined,
+  onClick: undefined
 };
 export default Button;

package/esm/components/FormField/FormField.js

@@ -199,7 +199,7 @@ class FormField extends Component {
         multi
       } = this.props;
 
-      if (!description || multi && this.state.value.length - 1 > index) {
+      if (!description || multi && this.fieldApi.getValue().length - 1 > index) {
         return null;
       }
 

package/esm/components/List/List.js

@@ -875,14 +875,9 @@ class List extends Component {
 
     if (totalRows && /*#__PURE__*/isValidElement(pagination)) {
       const {
-        itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS,
-        itemsPerPage
+        itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS
       } = pagination.props;
 
-      if (Number.isInteger(itemsPerPage)) {
-        return totalRows > itemsPerPage;
-      }
-
       if (Array.isArray(itemsPerPageOptions)) {
         const numericOptions = itemsPerPageOptions.filter(v => Number(v) === v);
 

package/esm/components/Overlay/Overlay.js

@@ -87,8 +87,6 @@ export default class Overlay extends Component {
       isExist: true
     }, () => {
       this.prevFocusElement = document.activeElement;
-    });
-    setTimeout(() => {
       this.setState({
         isOpened: true
       }, () => {

package/esm/components/Select/Select.js

@@ -172,8 +172,8 @@ const Select = ({
 
   if (filterValue) {
     const lowerFilterValue = filterValue.toLowerCase();
-    groupFns.push(group => !!group.label && group.label.toLowerCase().indexOf(lowerFilterValue) === 0);
-    optionFns.push(option => option.label.toLowerCase().indexOf(lowerFilterValue) === 0);
+    groupFns.push(group => !!group.label && group.label.toLowerCase().includes(lowerFilterValue));
+    optionFns.push(option => option.label.toLowerCase().includes(lowerFilterValue));
   }
 
   if (groupFns.length || optionFns.length) {
@@ -253,7 +253,7 @@ const Select = ({
 
   const handleHighlightSearch = query => {
     const lowerQuery = query.toLowerCase();
-    const index = options.findIndex(o => !o.disabled && o.label.toLowerCase().indexOf(lowerQuery) === 0);
+    const index = options.findIndex(o => !o.disabled && o.label.toLowerCase().includes(lowerQuery));
 
     if (index !== -1) {
       setHighlightedIndex(index);

package/esm/components/Toast/Toast.js

@@ -7,6 +7,7 @@ import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
 import Button from '../Button';
 import { intentIconMap } from '../intentIconMap';
+import OnDarkContext from '../OnDarkContext';
 const AUTOCLOSE_TIMEOUT = 6000;
 export default class Toast extends Component {
   constructor(...args) {
@@ -51,6 +52,10 @@ export default class Toast extends Component {
       className,
       message,
       intent,
+      accent,
+      icon = intent && /*#__PURE__*/React.createElement(Icon, {
+        name: intentIconMap[intent]
+      }),
       onClose,
       closable = true,
       autoClosable,
@@ -58,18 +63,18 @@ export default class Toast extends Component {
       innerRef,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", _extends({
+    const result = /*#__PURE__*/React.createElement("div", _extends({
       tabIndex: 0,
-      className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, className)
+      className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className)
     }, props, {
       ref: innerRef
-    }), intent ? /*#__PURE__*/React.createElement("span", {
+    }), icon ? /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__icon`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: intentIconMap[intent]
-    })) : null, /*#__PURE__*/React.createElement("span", {
+    }, Icon.create(icon, {
+      intent
+    })) : null, /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content`
-    }, message), closable ? /*#__PURE__*/React.createElement("span", {
+    }, message), closable ? /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__action`
     }, /*#__PURE__*/React.createElement(Button, {
       ghost: true,
@@ -80,6 +85,14 @@ export default class Toast extends Component {
       className: `${baseClassName}__close`,
       onClick: onClose
     })) : null);
+
+    if (accent) {
+      return result;
+    }
+
+    return /*#__PURE__*/React.createElement(OnDarkContext.Provider, {
+      value: true
+    }, result);
   }
 
 }

package/esm/components/Toaster/Toaster.js

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_TOASTER } from '../../constants';
 import Toast from '../Toast';
 import Layer from '../Layer';
-import OnDarkContext from '../OnDarkContext';
 let toastId = 0;
 
 /**
@@ -44,6 +43,8 @@ export default class Toaster extends Component {
    * Add a new toast
    *
    * `intent` - Visual intent color to apply to component. (Type: `oneOf` 'info', 'success', 'warning', 'danger'. *Required*.)<br>
+   * `accent` - Contrast (light) version of the component. (Type: `boolean`. Default: 'undefined'.)<br>
+   * `icon` - Name of icon or [Icon](#!/Icon) component. (Type: `oneOfType` 'string', 'object', 'element'. Default: `undefined`.)<br>
    * `message` - Message to display in the body of the toast. (Type: `any`. Default: `undefined`.)<br>
    * `onClose` - onClose handler. (Type: `func`. Default: `undefined`.)<br>
    * `closable` - Show close control (cross mark). (Type: `boolean`. Default: `true`.)<br>
@@ -133,9 +134,7 @@ export default class Toaster extends Component {
       stack.reverse();
     }
 
-    return /*#__PURE__*/React.createElement(OnDarkContext.Provider, {
-      value: true
-    }, /*#__PURE__*/React.createElement(Layer, {
+    return /*#__PURE__*/React.createElement(Layer, {
       level: Z_INDEX_TOASTER
     }, /*#__PURE__*/React.createElement("div", _extends({
       className: classNames(baseClassName, {
@@ -181,7 +180,7 @@ export default class Toaster extends Component {
         },
         innerRef: toastRef
       })));
-    })))));
+    }))));
   }
 
 }

package/esm/components/index.js

@@ -98,4 +98,5 @@ export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';
 export { default as Link } from './Link';
 export { default as Skeleton } from './Skeleton';
-export * from './Skeleton';
+export * from './Skeleton';
+export { PortalContext } from './Layer';

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.28.1",
+  "version": "3.29.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -137,7 +137,7 @@
   "resolutions": {
     "@babel/types": "^7.15.6",
     "@types/node": "^12.12.8",
-    "**/caniuse-lite": "1.0.30001307"
+    "**/caniuse-lite": "1.0.30001390"
   },
   "browserslist": [
     "last 2 versions",