@plesk/ui-library 3.25.7 → 3.26.0

package/esm/components/Drawer/Drawer.js

@@ -10,7 +10,6 @@ import Header from './Header';
 import ScrollDirection from './ScrollDirection';
 import Form from '../Form';
 import Heading from '../Heading';
-import Text from '../Text';
 import { isLikeText } from '../Translate';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DrawerProgress from './DrawerProgress';
@@ -46,6 +45,12 @@ const propTypes = {
    */
   backButton: PropTypes.bool,
 
+  /**
+   * A slot for `Tabs` component.
+   * @since 3.26.0
+   */
+  tabs: PropTypes.node,
+
   /**
    * Overlay placement.
    * @since 0.0.65
@@ -161,6 +166,7 @@ const defaultProps = {
   subtitle: '',
   backButton: undefined,
   hideButton: undefined,
+  tabs: undefined,
   placement: 'left',
   size: 'md',
   onClose: null,
@@ -187,6 +193,7 @@ const Drawer = ({
   subtitle,
   backButton,
   hideButton,
+  tabs,
   onClose,
   form,
   progress,
@@ -279,7 +286,8 @@ const Drawer = ({
   }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
     backButton: backButton,
     hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-    onClose: onCloseWithConfirmation
+    onClose: onCloseWithConfirmation,
+    tabs: tabs
   }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
     level: "2",
     className: `${baseClassName}__title`
@@ -287,9 +295,7 @@ const Drawer = ({
     className: `${baseClassName}__title`
   }, title), subtitle && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__subtitle`
-  }, isLikeText(subtitle) ? /*#__PURE__*/React.createElement(Text, {
-    intent: "muted"
-  }, subtitle) : subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, ({
+  }, subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, ({
     handleScroll
   }) => /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__body`,

package/esm/components/Drawer/Header.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 import { isRtl } from '../../utils';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -75,6 +75,7 @@ export default class Header extends Component {
       children,
       backButton,
       hideButton,
+      tabs,
       ...props
     } = this.props;
     let prefix;
@@ -108,7 +109,11 @@ export default class Header extends Component {
       className: `${baseClassName}__inner`
     }, prefix, /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content`
-    }, children), suffix));
+    }, children, tabs && /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__tabs`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${baseClassName}__tabs-inner`
+    }, tabs))), suffix));
   }
 
 }
@@ -118,12 +123,14 @@ _defineProperty(Header, "propTypes", {
   onClose: PropTypes.func,
   children: PropTypes.node.isRequired,
   backButton: PropTypes.bool,
-  hideButton: PropTypes.bool
+  hideButton: PropTypes.bool,
+  tabs: PropTypes.node
 });
 
 _defineProperty(Header, "defaultProps", {
   onClose: null,
   baseClassName: `${CLS_PREFIX}drawer-header`,
   backButton: false,
-  hideButton: false
+  hideButton: false,
+  tabs: undefined
 });

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', 'dollar', 'dollar-filled', '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', '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', 'dollar', 'dollar-filled', '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', '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', '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', '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', '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'];

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

@@ -1,4 +1,4 @@
-<svg width="16" height="10944" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11040" 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" />
@@ -592,6 +592,14 @@
       <path d="M11.145 2.855a.496.496 0 0 1 0-.702L13.097.202A.5.5 0 0 1 13.498 0h.004a.495.495 0 0 1 .401.202l1.952 1.951a.496.496 0 0 1-.702.702L14 1.702V10h-1V1.702l-1.153 1.153a.496.496 0 0 1-.702 0zM9.5 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
       <path d="M2 10c0-1.477.534-2.83 1.419-3.875a.47.47 0 0 1 .692-.014c.195.195.193.51.018.724A5 5 0 1 0 13 10h1.001a6 6 0 0 1-12 0z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="docker-filled:12">
+      <path d="M11.85 5.287c-.3-.224-.6-.3-.9-.3-.225 0-.375 0-.6.076-.075-.526-.375-.9-.75-1.2l-.15-.15-.15.15c-.225.3-.3.824-.225 1.2 0 .3.075.6.3.824-.375.226-.825.3-1.275.3H.75a.75.75 0 0 0-.75.75c.075 1.426.6 4.5 3.9 4.5 4.35 0 5.1-2.475 6.15-5.1h.15c.675 0 1.275-.225 1.65-.825l.15-.15-.15-.075zm-10.875.15h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225H.975c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm4.5-1.875h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225z" />
+      <path d="M5.475 5.438h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5 0h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.075.226.225.226zm-1.5-3.75h.675c.15 0 .225-.076.225-.226V.787c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-3 3.75h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5-1.876h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-1.5 0h.675c.15 0 .225-.075.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm1.5 1.876h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="docker-filled:16">
+      <path d="M15.8 6.8c-.4-.3-.8-.4-1.2-.4-.3 0-.5 0-.8.1-.1-.7-.5-1.2-1-1.6l-.2-.2-.2.2c-.3.4-.4 1.1-.3 1.6 0 .4.1.8.4 1.1-.5.3-1.1.4-1.7.4H1a1 1 0 0 0-1 1c.1 1.9.8 6 5.2 6 5.8 0 6.8-3.3 8.2-6.8h.2c.9 0 1.7-.3 2.2-1.1l.2-.2-.2-.1zM1.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM7.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+      <path d="M7.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM9.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.1.3.3.3zM7.3 2h.9c.2 0 .3-.1.3-.3V.8c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="dollar-filled:12">
       <path fill-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM6.5 3a.5.5 0 0 0-.5.5v.53A1.5 1.5 0 0 0 6.3 7h.4a.5.5 0 0 1 0 1H5.3a.5.5 0 0 0 0 1H6v.5a.5.5 0 0 0 1 0v-.53A1.5 1.5 0 0 0 6.7 6h-.4a.5.5 0 0 1 0-1h1.4a.5.5 0 0 0 0-1H7v-.5a.5.5 0 0 0-.5-.5z" clip-rule="evenodd" />
     </symbol>
@@ -606,6 +614,12 @@
       <path fill-rule="evenodd" d="M8.5 15c3.5899 0 6.5-2.9101 6.5-6.5S12.0899 2 8.5 2 2 4.9101 2 8.5 4.9101 15 8.5 15zm0 1c4.1421 0 7.5-3.3579 7.5-7.5S12.6421 1 8.5 1 1 4.3579 1 8.5 4.3579 16 8.5 16z" clip-rule="evenodd" />
       <path d="M8 4.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1H8c-.5523 0-1 .4477-1 1s.4477 1 1 1h1c1.1046 0 2 .8954 2 2s-.8954 2-2 2v.5a.5.5 0 0 1-1 0V12H6.5a.5.5 0 0 1 0-1H9c.5523 0 1-.4477 1-1s-.4477-1-1-1H8c-1.1046 0-2-.8954-2-2s.8954-2 2-2v-.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="dot:12">
+      <path d="M7.5 6a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="dot:16">
+      <path d="M6,8a2,2 0 1,0 4,0a2,2 0 1,0 -4,0" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="emoticon-confused:12">
       <path fill-rule="evenodd" d="M6 11A5 5 0 106 1a5 5 0 000 10zm0 1A6 6 0 106 0a6 6 0 000 12z" clip-rule="evenodd" />
       <path d="M8.803 9a.244.244 0 00.2-.383C8.334 7.636 7.259 7 6.048 7c-1.21 0-2.285.636-2.956 1.617a.244.244 0 00.2.383h5.512zM4.75 4.75a1 1 0 11-2 0 1 1 0 012 0zM9.25 4.75a1 1 0 11-2 0 1 1 0 012 0z" />

package/esm/components/Item/Item.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 import React, { Component, cloneElement, isValidElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -83,6 +83,7 @@ class Item extends Component {
       value,
       tooltip,
       disabled,
+      hoverable,
       ...props
     } = this.props;
 
@@ -103,7 +104,8 @@ class Item extends Component {
     const item = /*#__PURE__*/React.createElement(Tag, _extends({
       className: classNames(baseClassName, {
         [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled
+        [`${baseClassName}--disabled`]: disabled,
+        [`${baseClassName}--hoverable`]: hoverable
       }, className)
     }, props), /*#__PURE__*/React.createElement(Media, {
       image: this.renderIcon(icon),
@@ -197,11 +199,18 @@ Item.propTypes = {
    * Whether disabled or not.
    * @since 3.15.0
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * Add hover shadow and pointer cursor.
+   * @since 3.26.0
+   */
+  hoverable: PropTypes.bool
 };
 Item.defaultProps = {
   component: 'div',
   view: VIEW_SIMPLE,
+  hoverable: undefined,
   title: undefined,
   description: undefined,
   icon: undefined,

package/esm/components/ItemLink/ItemLink.js

@@ -14,6 +14,7 @@ const ItemLink = ({
   baseClassName = `${CLS_PREFIX}item-link`,
   className,
   children,
+  hoverable,
   ...props
 }) => {
   if (props.onClick) {

package/esm/components/ItemList/ItemList.js

@@ -42,7 +42,8 @@ class ItemList extends Component {
         baseClassName,
         selectable,
         onSelect,
-        reorderable
+        reorderable,
+        hoverable
       } = this.props;
       const classNameList = [`${baseClassName}__item`];
       const props = {};
@@ -67,6 +68,11 @@ class ItemList extends Component {
           });
           safeInvoke(onSelect, nextValue);
         };
+      } // Extends hoverable behavior from the ItemList in case if its child doesn't have its own
+
+
+      if (item.props.hoverable === undefined) {
+        props.hoverable = hoverable && this.canManageHoverableState();
       }
 
       if (reorderable) {
@@ -161,18 +167,43 @@ class ItemList extends Component {
     }));
   }
 
-  hasViewCard() {
-    const {
-      children
-    } = this.props;
+  someChild(predicate) {
     let result = false;
-    Children.forEach(children, child => {
-      if (child && child.props && child.props.view === 'card') {
+    Children.forEach(this.props.children, child => {
+      if (child && predicate(child)) {
         result = true;
       }
     });
     return result;
   }
+  /**
+   * There are some states where we can't manage hoverable state
+   */
+
+
+  canManageHoverableState() {
+    const {
+      reorderable,
+      selectable
+    } = this.props;
+    return !reorderable && !selectable;
+  }
+
+  isHoverable() {
+    if (!this.canManageHoverableState()) {
+      return false;
+    }
+
+    return this.props.hoverable || this.hasHoverableCard();
+  }
+
+  hasViewCard() {
+    return this.someChild(child => child.props && child.props.view === 'card');
+  }
+
+  hasHoverableCard() {
+    return this.someChild(child => child.props && !!child.props.hoverable);
+  }
 
   renderReorderable({
     baseClassName,
@@ -231,7 +262,7 @@ class ItemList extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(this.props.baseClassName, {
-        [`${this.props.baseClassName}--hoverable`]: hoverable && !reorderable && !selectable,
+        [`${this.props.baseClassName}--hoverable`]: this.isHoverable(),
         [`${this.props.baseClassName}--stretchable`]: stretchable,
         [`${this.props.baseClassName}--selectable`]: selectable,
         [`${this.props.baseClassName}--cards`]: this.hasViewCard()

package/esm/components/ItemList/ItemList.stories.js

@@ -39,7 +39,8 @@ Basic.args = {
       name: "star-circle-filled",
       intent: "warning"
     }),
-    onClick: () => {}
+    onClick: () => {},
+    hoverable: true
   }, 'Content 3'), /*#__PURE__*/React.createElement(Item, {
     key: "4",
     value: "4",
@@ -51,7 +52,8 @@ Basic.args = {
       intent: "danger"
     }),
     onClick: () => {},
-    disabled: true
+    disabled: true,
+    hoverable: true
   }, 'Content 4')]
 };
 export const Cards = Basic.bind(null);
@@ -71,4 +73,32 @@ export const Selectables = Basic.bind(null);
 Selectables.args = { ...Basic.args,
   selectable: true,
   defaultValue: '2'
+};
+export const HoverableItemList = Basic.bind(null);
+HoverableItemList.args = { ...Basic.args,
+  hoverable: true,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/cloneElement(child, {
+      hoverable: index === 0 ? false : undefined
+    });
+  })
+};
+export const HoverableItems = Basic.bind(null);
+HoverableItems.args = { ...Basic.args,
+  hoverable: false,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/cloneElement(child, {
+      hoverable: index % 2 === 0
+    });
+  })
 };

package/esm/components/ProgressStep/ProgressStep.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 import React, { isValidElement, Children, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Icon, { ICON_SIZE_12 } from '../Icon';
+import Icon, { ICON_SIZE_16 } from '../Icon';
 import Status from '../Status';
 import { CLS_PREFIX } from '../../constants';
 import ProgressBar from '../ProgressBar';
@@ -35,39 +35,39 @@ const ProgressStep = ({
   switch (status) {
     case STATUS_NOT_STARTED:
       intent = 'inactive';
-      icon = false;
+      icon = 'dot';
       break;
 
     case STATUS_RUNNING:
-      intent = 'info';
-      icon = false;
+      intent = false;
+      icon = 'dot';
       break;
 
     case STATUS_DONE:
       intent = 'success';
-      icon = 'check-mark';
+      icon = 'check-mark-circle-filled';
       break;
 
     case STATUS_WARNING:
       intent = 'warning';
-      icon = 'triangle-exclamation-mark';
+      icon = 'triangle-exclamation-mark-filled';
       break;
 
     case STATUS_ERROR:
       intent = 'danger';
-      icon = 'exclamation-mark-circle';
+      icon = 'exclamation-mark-circle-filled';
       break;
 
     case STATUS_CANCELED:
       progress = 0;
       intent = 'inactive';
-      icon = 'cross-mark';
+      icon = 'cross-mark-circle-filled';
       break;
   }
 
   icon = Icon.create(icon, {
     className: `${baseClassName}__icon`,
-    size: ICON_SIZE_12,
+    size: ICON_SIZE_16,
     intent
   });
 
@@ -85,19 +85,21 @@ const ProgressStep = ({
     className: `${baseClassName}__media`
   }, icon), /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__body`
-  }, (title || statusText) && /*#__PURE__*/React.createElement("div", {
+  }, (title || statusText || Children.toArray(children).length > 0) && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__labels`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${baseClassName}__labels-body`
   }, title && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__title`
-  }, title), statusText && /*#__PURE__*/React.createElement("div", {
+  }, title), Children.toArray(children).length ? /*#__PURE__*/React.createElement("div", {
+    className: `${baseClassName}__content`
+  }, children) : null), statusText && /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__status`
   }, statusText)), STATUS_RUNNING === status && /*#__PURE__*/React.createElement(ProgressBar, {
     className: `${baseClassName}__progress`,
     intent: "info",
     progress: progress
-  }), Children.toArray(children).length ? /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__content`
-  }, children) : null));
+  })));
 };
 
 ProgressStep.propTypes = {

package/esm/components/Section/Section.js

@@ -65,7 +65,11 @@ class Section extends Component {
         collapsed
       }) => ({
         collapsed: !collapsed
-      }));
+      }), () => {
+        if (this.props.onToggle) {
+          this.props.onToggle(this.state.collapsed);
+        }
+      });
     });
   }
 
@@ -176,9 +180,11 @@ class Section extends Component {
       collapsed,
       onTitleChange,
       onClose,
+      onToggle,
       buttons,
       vertical: verticalProp,
       children,
+      form,
       ...props
     } = this.props;
     const vertical = verticalProp === undefined ? this.state.vertical : verticalProp;
@@ -255,6 +261,12 @@ const propTypes = {
    */
   onClose: PropTypes.func,
 
+  /**
+   * A callback executed when the section collapsing.
+   * @since 3.26.0
+   */
+  onToggle: PropTypes.func,
+
   /**
    * Array of custom section action button at the right.
    * @since 0.0.54
@@ -296,6 +308,7 @@ const defaultProps = {
   collapsed: false,
   onTitleChange: undefined,
   onClose: undefined,
+  onToggle: undefined,
   buttons: undefined,
   vertical: undefined,
   children: undefined,

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.25.7",
+  "version": "3.26.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",