@plesk/ui-library 3.27.2 → 3.28.0

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

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

@@ -1,4 +1,4 @@
-<svg width="16" height="11040" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11088" 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" />
@@ -1391,6 +1391,14 @@
     <symbol viewBox="0 0 16 16" id="send:16">
       <path fill-rule="evenodd" d="M15.63 1.174a.5.5 0 0 1 .067.55l-6.5 13a.5.5 0 0 1-.827.101l-1.5-1.75-.005-.006L5.646 11.6a.5.5 0 0 1-.061-.544l1.304-2.587-3.016.975a.5.5 0 0 1-.474-.09l-1.468-1.22-.006-.005-1.75-1.5a.5.5 0 0 1 .172-.855l14.75-4.75a.5.5 0 0 1 .532.15zM1.503 6.452l1.068.916 1.254 1.04L7.721 7.15a.5.5 0 0 1 .6.7l-1.696 3.365 1.007 1.213 1.008 1.176L14.27 2.34 1.505 6.452z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="server:12">
+      <path d="M2.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1ZM5 2.5c0-.28.22-.5.5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5ZM2.5 6a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1ZM5 6.5c0-.28.22-.5.5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z" />
+      <path fill-rule="evenodd" d="M0 3a2 2 0 0 0 .68 1.5A2 2 0 0 0 0 6v1c0 1.1.9 2 2 2h3.5v.09a1.5 1.5 0 0 0-.91.91H.5a.5.5 0 1 0 0 1h4.09a1.5 1.5 0 0 0 2.82 0h4.09a.5.5 0 0 0 0-1H7.41a1.5 1.5 0 0 0-.91-.91V9H10a2 2 0 0 0 2-2V6a2 2 0 0 0-.68-1.5A2 2 0 0 0 12 3V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v1Zm10-2H2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Zm0 7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h8Zm-4 3a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="server:16">
+      <path d="M3 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM5 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0ZM9 7a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H9ZM3 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM8 3a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z" />
+      <path fill-rule="evenodd" d="M0 4a2 2 0 0 0 .68 1.5A2 2 0 0 0 0 7v2c0 1.1.9 2 2 2h5.5v1.09a1.5 1.5 0 0 0-.91.91H.5a.5.5 0 1 0 0 1h6.09a1.5 1.5 0 0 0 2.82 0h6.09a.5.5 0 0 0 0-1H9.41a1.5 1.5 0 0 0-.91-.91V11H14a2 2 0 0 0 2-2V7a2 2 0 0 0-.68-1.5A2 2 0 0 0 16 4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v2Zm14 6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12Zm0-9H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM8.5 13.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" clip-rule="evenodd" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="servers:12">
       <path d="M8 6.5a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5zM0 1.5a.5.5 0 011 0v2a.5.5 0 01-1 0v-2zM2.5 1a.5.5 0 00-.5.5v2a.5.5 0 001 0v-2a.5.5 0 00-.5-.5zM8.5 2a.5.5 0 000 1H9v1a1 1 0 001 1h1.5a.5.5 0 000-1H10V3a1 1 0 00-1-1h-.5zM9 9v1h-.5a.5.5 0 000 1H9a1 1 0 001-1V9h1.5a.5.5 0 000-1H10a1 1 0 00-1 1z" />
       <path fill-rule="evenodd" d="M4 2a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H5a1 1 0 01-1-1V2zm1 0h1v1H5V2z" clip-rule="evenodd" />

package/esm/components/ProgressDialog/ProgressDialog.js

@@ -131,7 +131,8 @@ class ProgressDialog extends Component {
     }, props, {
       isOpen: isOpen,
       onClose: this.handleClose,
-      closable: canClose || canCancel
+      closable: canClose || canCancel,
+      canClose: canClose
     }), description && /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__description`
     }, description), /*#__PURE__*/React.createElement(Progress, {

package/esm/components/Skeleton/Skeleton.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import classNames from 'classnames';
+import { normalizeSize } from '../utils';
+import { CLS_PREFIX } from '../../constants';
+
+/**
+ * `Skeleton` (or content-placeholder) is placeholder preview of content before the data gets loaded to reduce load-time frustration.
+ * Skeleton is used for non-text components, images, media-objects, etc.
+ * @since 3.28.0
+ */
+const Skeleton = ({
+  width,
+  maxWidth,
+  height,
+  style,
+  component: Tag = 'span',
+  className,
+  baseClassName = `${CLS_PREFIX}skeleton`,
+  ...props
+}) => {
+  const finalStyle = { ...style,
+    width: normalizeSize(width),
+    maxWidth: normalizeSize(maxWidth),
+    height: normalizeSize(height)
+  };
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    className: classNames(baseClassName, className),
+    style: finalStyle
+  }, props));
+};
+
+export default Skeleton;

package/esm/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,10 @@
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import Skeleton from './Skeleton';
+export const Basic = args => /*#__PURE__*/React.createElement(Skeleton, args);
+Basic.args = {};
+export const CustomSize = args => /*#__PURE__*/React.createElement(Basic, args);
+CustomSize.args = {
+  width: 200,
+  height: 100
+};

package/esm/components/Skeleton/SkeletonTabs.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import classNames from 'classnames';
+import SkeletonText from './SkeletonText';
+import { CLS_PREFIX } from '../../constants';
+
+/**
+ * Skeleton for tabs component
+ * @since `3.28.0
+ */
+const SkeletonTabs = ({
+  count = 3,
+  className,
+  baseClassName = `${CLS_PREFIX}skeleton-tabs`,
+  ...props
+}) => /*#__PURE__*/React.createElement("div", _extends({
+  className: classNames(baseClassName, className)
+}, props), /*#__PURE__*/React.createElement(SkeletonText, {
+  lineProps: {
+    maxWidth: 100
+  },
+  lines: count
+}));
+
+export default SkeletonTabs;

package/esm/components/Skeleton/SkeletonTabs.stories.js

@@ -0,0 +1,4 @@
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import SkeletonTabs from './SkeletonTabs';
+export const Basic = args => /*#__PURE__*/React.createElement(SkeletonTabs, args);

package/esm/components/Skeleton/SkeletonText.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import classNames from 'classnames';
+import Skeleton from './Skeleton';
+import { CLS_PREFIX } from '../../constants';
+
+/**
+ * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
+ * @since 3.28.0
+ */
+const SkeletonText = ({
+  lines = 3,
+  component: Tag = 'span',
+  className,
+  baseClassName = `${CLS_PREFIX}skeleton-text`,
+  lineProps = {},
+  ...props
+}) => /*#__PURE__*/React.createElement(Tag, _extends({
+  className: classNames(baseClassName, className)
+}, props), Array.from({
+  length: lines
+}).map((_, key) => /*#__PURE__*/React.createElement(Skeleton // eslint-disable-next-line react/no-array-index-key
+, _extends({
+  key: key
+}, lineProps, {
+  className: classNames(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
+}))));
+
+export default SkeletonText;

package/esm/components/Skeleton/SkeletonText.stories.js

@@ -0,0 +1,16 @@
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import SkeletonText from './SkeletonText';
+export const Basic = args => /*#__PURE__*/React.createElement(SkeletonText, args);
+Basic.args = {};
+export const LinesCount = args => /*#__PURE__*/React.createElement(Basic, args);
+LinesCount.args = {
+  lines: 5
+};
+export const Custom = args => /*#__PURE__*/React.createElement(Basic, args);
+Custom.args = {
+  lines: 5,
+  lineProps: {
+    width: 200
+  }
+};

package/esm/components/Skeleton/index.js

@@ -0,0 +1,4 @@
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+export { default } from './Skeleton';
+export { default as SkeletonText } from './SkeletonText';
+export { default as SkeletonTabs } from './SkeletonTabs';

package/esm/components/index.js

@@ -96,4 +96,6 @@ export * from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';
-export { default as Link } from './Link';
+export { default as Link } from './Link';
+export { default as Skeleton } from './Skeleton';
+export * from './Skeleton';

package/esm/components/utils.js

@@ -223,4 +223,5 @@ export const mergeRefs = (...refs) => value => {
       ref.current = value;
     }
   });
-};
+};
+export const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.27.2",
+  "version": "3.28.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -29,7 +29,7 @@
     "styleguide:build": "styleguidist build --config ./configs/styleguide.config.js",
     "create-component": "node scripts/create-component.js",
     "prepublishOnly": "yarn install && yarn test && yarn build && yarn styleguide:build",
-    "storybook": "webpack serve --config ./configs/storybook.config.js",
+    "storybook": "webpack serve --config ./configs/storybook.config.js --disable-host-check",
     "postinstall": "node ./scripts/postinstall.js"
   },
   "files": [
@@ -110,7 +110,7 @@
     "postcss-loader": "^6.2.1",
     "postcss-logical": "^5.0.3",
     "prettier": "^2.0.5",
-    "puppeteer-core": "^5.2.1",
+    "puppeteer-core": "13.1.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-styleguidist": "^11.1.7",