@plesk/ui-library 3.29.2 → 3.31.0

package/esm/components/Action/Action.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 import React, { isValidElement, Children } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
@@ -15,6 +15,7 @@ const Action = ({
   baseClassName = `${CLS_PREFIX}action`,
   component: Tag = 'a',
   icon,
+  onClick,
   rightAddon,
   bottomAddon,
   children,
@@ -40,18 +41,24 @@ const Action = ({
     } = icon.props);
   }
 
+  const tagProps = { ...props,
+    onClick,
+    className: classNames(props.className, `${baseClassName}__content`) || undefined
+  };
+
   if (progress) {
     icon = /*#__PURE__*/React.createElement(Icon, {
       size: size,
       className: `${baseClassName}__icon`
     }, /*#__PURE__*/React.createElement(Spinner, null));
-  }
 
-  const tagProps = { ...props,
-    className: classNames(props.className, `${baseClassName}__content`) || undefined
-  };
+    tagProps.onClick = e => e.preventDefault();
+
+    tagProps.tabIndex = -1;
+  } // accessibility
+
 
-  if (tagProps.onClick) {
+  if (onClick) {
     tagProps.tabIndex = tagProps.tabIndex || 0;
     tagProps.onKeyDown = wrapFunction(tagProps.onKeyDown, e => {
       if (e.key === 'Enter') {

package/esm/components/FormField/FormField.js

@@ -204,6 +204,7 @@ class FormField extends Component {
       }
 
       return /*#__PURE__*/React.createElement(Hint, {
+        component: "div",
         className: `${baseClassName}__description`
       }, description);
     });

package/esm/components/FormFieldRadioButtons/FormFieldRadioButtons.js

@@ -59,6 +59,7 @@ class FormFieldRadioButtons extends Component {
     }, label || value), description || indentFields ? /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content`
     }, description && /*#__PURE__*/React.createElement(Hint, {
+      component: "div",
       className: `${FormField.defaultProps.baseClassName}__description`
     }, description), indentFields.map(field => {
       if (isDisabled() || disabled || getValue() !== value) {

package/esm/components/Hint/Hint.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
@@ -12,9 +12,12 @@ const Hint = ({
   baseClassName = `${CLS_PREFIX}hint`,
   className,
   children,
+  component: Tag = 'span',
   ...props
-}) => /*#__PURE__*/React.createElement("span", _extends({
-  className: classNames(baseClassName, className)
-}, props), children);
+}) => {
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    className: classNames(baseClassName, className)
+  }, props), children);
+};
 
 export default Hint;

package/esm/components/Icon/constants.js

@@ -1,4 +1,4 @@
 /* eslint-disable max-len */
 // This file is generated by create-svg-sprite. Do not edit.
-export const NAMES_12 = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
-export const NAMES = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
+export const NAMES_12 = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress', 'zero-circle-filled'];
+export const NAMES = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress', 'zero-circle-filled'];

package/esm/components/Icon/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="11088" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <symbol viewBox="0 0 12 12" id="archive:12">
       <path d="M2 1h7v.5a.5.5 0 0 0 1 0V1a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-.5a.5.5 0 0 0-1 0v.5H2V1z" />
@@ -799,6 +799,12 @@
     <symbol viewBox="0 0 16 16" id="folders-tree:16">
       <path fill-rule="evenodd" d="M2 1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2v3.543l-.25-.25A1 1 0 0 0 3.043 10H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H5V9h7v1.543l-.25-.25a1 1 0 0 0-.707-.293H10a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2V9a1 1 0 0 0-1-1H5V7h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4.457l-.707-.707A1 1 0 0 0 3.043 1H2zm0 5V2h1.043l.707.707A1 1 0 0 0 4.457 3H7v3H2zm0 5v4h5v-3H4.457a1 1 0 0 1-.707-.293L3.043 11H2zm8 4v-4h1.043l.707.707a1 1 0 0 0 .707.293H15v3h-5z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="forward-circle-filled:12">
+      <path fill-rule="evenodd" d="M0 5.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0Zm2.65-2.85c.2-.2.5-.2.7 0L6.21 5.5 3.35 8.35a.5.5 0 1 1-.7-.7L4.79 5.5 2.65 3.35a.5.5 0 0 1 0-.7Zm3 0c.2-.2.5-.2.7 0L9.21 5.5 6.35 8.35a.5.5 0 1 1-.7-.7L7.79 5.5 5.65 3.35a.5.5 0 0 1 0-.7Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="forward-circle-filled:16">
+      <path fill-rule="evenodd" d="M7.5 15a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15ZM4.65 3.65c.2-.2.5-.2.7 0L9.21 7.5l-3.86 3.85a.5.5 0 0 1-.7-.7L7.79 7.5 4.65 4.35a.5.5 0 0 1 0-.7Zm3 0c.2-.2.5-.2.7 0l3.86 3.85-3.86 3.85a.5.5 0 0 1-.7-.7l3.14-3.15-3.14-3.15a.5.5 0 0 1 0-.7Z" clip-rule="evenodd" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="four-squares:12">
       <path fill-rule="evenodd" d="M5 2H2v3h3V2zM2 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM11 2H8v3h3V2zM8 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H8zM5 8H2v3h3V8zM2 7a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2zM11 8H8v3h3V8zM8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H8z" clip-rule="evenodd" />
     </symbol>
@@ -997,6 +1003,16 @@
     <symbol viewBox="0 0 16 16" id="lock-open:16">
       <path fill-rule="evenodd" d="M10.9927 7.00023l.8786-.87865c1.1716-1.17158 1.1716-3.07108 0-4.24265-1.1715-1.17158-3.07103-1.17158-4.24261 0l-.08396.08396c-.19527.19526-.51185.19526-.70711 0s-.19526-.51184 0-.70711l.08396-.08396c1.5621-1.5621 4.09472-1.5621 5.65682 0s1.5621 4.09476 0 5.65686l-.1715.17155H13c.5523 0 1 .44771 1 1v6.99997c0 .5523-.4477 1-1 1H3c-.55228 0-1-.4477-1-1V8.00023c0-.55229.44772-1 1-1h7.9927zm-7.9927 1h10v6.99997H3V8.00023z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="mail-circle-filled:12">
+      <path d="M3 7V4.14l1.56 1.25a1.5 1.5 0 0 0 1.88 0L8 4.14V7a.5.5 0 0 1-.5.5h-4A.5.5 0 0 1 3 7Z" />
+      <path d="M5.19 4.61 3.8 3.5h3.4L5.81 4.61a.5.5 0 0 1-.62 0Z" />
+      <path fill-rule="evenodd" d="M0 5.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0ZM2 4c0-.83.67-1.5 1.5-1.5h4C8.33 2.5 9 3.17 9 4v3c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 2 7V4Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="mail-circle-filled:16">
+      <path d="M3 5.5c0-.1.02-.18.07-.25.03.06.07.1.13.15l3.4 2.55c.53.4 1.27.4 1.8 0l3.4-2.55a.5.5 0 0 0 .13-.15.5.5 0 0 1 .07.25v4a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-4Z" />
+      <path d="M7.2 7.15 4.33 5h6.34L7.8 7.15a.5.5 0 0 1-.6 0Z" />
+      <path fill-rule="evenodd" d="M7.5 15a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15ZM2 5.5C2 4.67 2.67 4 3.5 4h8c.83 0 1.5.67 1.5 1.5v4c0 .83-.67 1.5-1.5 1.5h-8A1.5 1.5 0 0 1 2 9.5v-4Z" clip-rule="evenodd" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="mail-settings:12">
       <path fill-rule="evenodd" d="M0 1.75A.75.75 0 01.75 1h10.5a.75.75 0 01.75.75V6a.5.5 0 01-1 0V3.152L6.496 5.725a1 1 0 01-.992 0L1 3.152V9h4.5a.5.5 0 010 1H.75A.75.75 0 010 9.25v-7.5zM11 2H1l5 2.857L11 2z" clip-rule="evenodd" />
       <path fill-rule="evenodd" d="M10.534 11.79a.25.25 0 01-.342-.091l-.418-.724a1.51 1.51 0 01-.548 0l-.418.724a.25.25 0 01-.342.091l-.433-.25a.25.25 0 01-.091-.341l.418-.724A1.497 1.497 0 018.085 10H7.25A.25.25 0 017 9.75v-.5A.25.25 0 017.25 9h.835c.062-.175.156-.336.275-.475l-.418-.723a.25.25 0 01.091-.342l.433-.25a.25.25 0 01.342.092l.418.723a1.508 1.508 0 01.548 0l.418-.723a.25.25 0 01.341-.092l.434.25a.25.25 0 01.091.342l-.418.723c.119.139.213.3.275.475h.835a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.835a1.499 1.499 0 01-.275.475l.418.724a.25.25 0 01-.091.341l-.434.25zM9.5 10a.5.5 0 100-1 .5.5 0 000 1z" clip-rule="evenodd" />
@@ -1294,6 +1310,12 @@
       <path d="M10 5.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zM5.5 5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5zM7.5 5.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7z" />
       <path fill-rule="evenodd" d="M5 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h3.5a.5.5 0 0 1 0 1H14v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V3h-.5a.5.5 0 0 1 0-1H5zm1-1h4v1H6V1zM3 3v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V3H3z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="redirect-circle-filled:12">
+      <path fill-rule="evenodd" d="M0 5.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0Zm3 1c0-.28.22-.5.5-.5h3.8L5.65 7.65a.5.5 0 0 0 .7.7L8.8 5.9a.5.5 0 0 0 .2-.4.5.5 0 0 0-.2-.4L6.35 2.65a.5.5 0 0 0-.7.7L7.3 5H3.5C2.67 5 2 5.67 2 6.5V8a.5.5 0 0 0 1 0V6.5Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="redirect-circle-filled:16">
+      <path fill-rule="evenodd" d="M7.5 15a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Zm.15-4.35a.5.5 0 0 0 .7.7L11.8 7.9a.5.5 0 0 0 .2-.4.5.5 0 0 0-.2-.4L8.35 3.65a.5.5 0 0 0-.7.7L10.3 7H4.5C3.67 7 3 7.67 3 8.5v3a.5.5 0 0 0 1 0v-3c0-.28.22-.5.5-.5h5.8l-2.65 2.65Z" clip-rule="evenodd" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="refresh:12">
       <path d="M4.4 1.487c.14.139.345.186.536.14A4.5 4.5 0 0 1 10 8.064V7.5a.5.5 0 0 0-1 0v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 0-1h-.89A5.5 5.5 0 0 0 4.587.683c-.36.096-.449.54-.185.804zM1.39 3H.5a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-.564a4.5 4.5 0 0 0 5.064 6.437.565.565 0 0 1 .535.14c.264.264.175.708-.185.804A5.5 5.5 0 0 1 1.39 3z" />
     </symbol>
@@ -1658,5 +1680,13 @@
     <symbol viewBox="0 0 16 16" id="wordpress:16">
       <path fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM1.635 5.162c-.387.871-.6 1.83-.6 2.838a6.95 6.95 0 0 0 3.923 6.268L1.635 5.162zm4.398 9.522c.62.184 1.28.281 1.967.281.814 0 1.589-.135 2.315-.387a.303.303 0 0 1-.048-.097L8.126 8.61l-2.093 6.073zm3.72-10.016s-.377.038-.794.067l2.519 7.498.697-2.325.078-.249c.262-.84.455-1.46.455-2.008 0-.862-.31-1.453-.571-1.918l-.08-.129c-.326-.525-.608-.98-.608-1.508 0-.64.484-1.24 1.172-1.24.014 0 .029.002.043.005.015.002.03.005.044.005a6.967 6.967 0 0 0-10.53 1.307c.164.01.32.01.445.01.737 0 1.86-.087 1.86-.087.378-.03.417.523.049.572 0 0-.378.038-.804.067l2.548 7.547 1.52-4.573-1.094-2.974c-.368-.02-.727-.067-.727-.067-.377-.02-.33-.601.04-.572 0 0 1.142.087 1.83.087.727 0 1.86-.087 1.86-.087.378-.03.426.523.048.572zM14.965 8c0-1.21-.31-2.354-.852-3.342.029.223.048.455.048.717 0 .707-.135 1.501-.533 2.5l-2.13 6.15A6.977 6.977 0 0 0 14.964 8z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="zero-circle-filled:12">
+      <path d="M5.5 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" />
+      <path fill-rule="evenodd" d="M0 5.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0ZM5.5 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="zero-circle-filled:16">
+      <path d="M7.5 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z" />
+      <path fill-rule="evenodd" d="M0 7.5a7.5 7.5 0 1 0 15 0 7.5 7.5 0 0 0-15 0Zm3 0a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0Z" clip-rule="evenodd" />
+    </symbol>
   </defs>
 </svg>

package/esm/components/Link/Link.js

@@ -1,10 +1,10 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 import classNames from 'classnames';
 import React, { useContext } from 'react';
 import { isRtl } from '../../utils';
 import { CLS_PREFIX } from '../../constants';
 import OnDarkContext from '../OnDarkContext';
-import { safeInvoke } from '../utils';
+import { wrapFunction } from '../utils';
 import Icon from '../Icon';
 
 /**
@@ -24,7 +24,6 @@ const Link = ({
   pseudo = false,
   component,
   children,
-  onKeyDown,
   ...other
 }) => {
   const Component = component ? component : 'a';
@@ -55,15 +54,12 @@ const Link = ({
 
   if (onClick) {
     props.tabIndex = props.tabIndex || 0;
-
-    props.onKeyDown = e => {
+    props.onKeyDown = wrapFunction(props.onKeyDown, e => {
       if (e.key === 'Enter') {
         e.preventDefault();
         e.currentTarget.click();
       }
-
-      safeInvoke(onKeyDown, e);
-    };
+    });
   }
 
   return (

package/esm/components/LocaleProvider/LocaleProvider.js

@@ -49,10 +49,10 @@ const getMessage = (fullKey, messages) => {
   }
 
   return messages[fullKey];
-}; // eslint-disable-next-line default-param-last
-
+};
 
-const createTranslate = messages => (key, params = {}, fallback) => {
+const createTranslate = messages => // eslint-disable-next-line default-param-last
+(key, params = {}, fallback) => {
   if (typeof key !== 'string') {
     return '';
   }

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.29.2",
+  "version": "3.31.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -81,14 +81,14 @@
     "@types/webpack-dev-server": "^3.10.1",
     "@typescript-eslint/eslint-plugin": "^2.7.0",
     "@typescript-eslint/parser": "^2.7.0",
-    "autoprefixer": "^10.3.7",
+    "autoprefixer": "^10.4.13",
     "babel-loader": "^8.2.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^6.4.0",
-    "css-minimizer-webpack-plugin": "^3.1.1",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.2.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
@@ -102,14 +102,14 @@
     "jest": "^24.9.0",
     "jest-dev-server": "^4.4.0",
     "jest-image-snapshot": "^4.0.2",
-    "less": "^4.1.2",
-    "less-loader": "^10.2.0",
-    "mini-css-extract-plugin": "^2.4.3",
-    "postcss": "^8.4.6",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss": "^8.4.18",
     "postcss-less": "^6.0.0",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^7.0.1",
     "postcss-logical": "^5.0.3",
-    "prettier": "^2.0.5",
+    "prettier": "^2.7.1",
     "puppeteer-core": "13.1.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
@@ -118,17 +118,17 @@
     "rimraf": "^3.0.1",
     "rtlcss": "^3.4.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.3.0",
+    "stylelint": "^14.14.1",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
-    "stylelint-no-unsupported-browser-features": "^5.0.2",
+    "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
+    "stylelint-no-unsupported-browser-features": "^6.0.1",
     "stylelint-prettier": "^2.0.0",
-    "stylelint-use-logical-spec": "^3.2.2",
+    "stylelint-use-logical-spec": "^4.1.0",
     "svg-mixer": "^2.3.14",
     "terser-webpack-plugin": "^5.2.4",
     "typescript": "^3.7.2",
-    "webpack": "^5.60.0",
-    "webpack-cli": "^4.9.1"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {
     "react": "^16.8.6",
@@ -137,7 +137,7 @@
   "resolutions": {
     "@babel/types": "^7.15.6",
     "@types/node": "^12.12.8",
-    "**/caniuse-lite": "1.0.30001390"
+    "**/caniuse-lite": "1.0.30001430"
   },
   "browserslist": [
     "last 2 versions",