@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/Card/Card.js

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { Component, Children, cloneElement, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -15,6 +12,8 @@ import ContentLoader from '../ContentLoader';
 import Translate from '../Translate';
 import CardButton from './CardButton';
 import PreviewPanel from './PreviewPanel';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const VIEW_TILE = 'tile';
 const VIEW_EXTENDED = 'extended';
 const VIEW_ROW = 'row';
@@ -63,17 +62,19 @@ class Card extends Component {
       isSelected,
       onSelectionChange
     } = selection;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__selection`
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      checked: isSelected,
-      onChange: isSelected => onSelectionChange({
-        isSelected
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__selection`,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        checked: isSelected,
+        onChange: isSelected => onSelectionChange({
+          isSelected
+        }),
+        children: this.isExtended() ? /*#__PURE__*/_jsx(Translate, {
+          content: "Card.select",
+          fallback: "Select"
+        }) : null
       })
-    }, this.isExtended() ? /*#__PURE__*/React.createElement(Translate, {
-      content: "Card.select",
-      fallback: "Select"
-    }) : null));
+    });
   }
   renderTitle() {
     const {
@@ -84,18 +85,21 @@ class Card extends Component {
     const titleLinkProps = typeof titleLink === 'string' ? {
       href: titleLink
     } : titleLink;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__title`
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__title-text`
-    }, title), titleLinkProps && /*#__PURE__*/React.createElement(CardButton, _extends({
-      component: "a",
-      icon: "chain",
-      tooltip: /*#__PURE__*/React.createElement(Translate, {
-        content: "Card.titleLinkTooltip",
-        fallback: "Go to page"
-      })
-    }, titleLinkProps)), this.isExtended() && this.renderTitleLabels());
+    return /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__title`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClassName}__title-text`,
+        children: title
+      }), titleLinkProps && /*#__PURE__*/_jsx(CardButton, {
+        component: "a",
+        icon: "chain",
+        tooltip: /*#__PURE__*/_jsx(Translate, {
+          content: "Card.titleLinkTooltip",
+          fallback: "Go to page"
+        }),
+        ...titleLinkProps
+      }), this.isExtended() && this.renderTitleLabels()]
+    });
   }
   renderTitleLabels() {
     const {
@@ -105,11 +109,12 @@ class Card extends Component {
     if (titleLabels.length === 0) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__title-labels`
-    }, Children.map(titleLabels, label => /*#__PURE__*/cloneElement(label, {
-      className: classNames(`${baseClassName}__label`, label.props.className)
-    })));
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__title-labels`,
+      children: Children.map(titleLabels, label => /*#__PURE__*/cloneElement(label, {
+        className: classNames(`${baseClassName}__label`, label.props.className)
+      }))
+    });
   }
   renderLabels() {
     const {
@@ -119,41 +124,47 @@ class Card extends Component {
     if (labels.length === 0) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__labels`
-    }, Children.map(labels, label => /*#__PURE__*/cloneElement(label, {
-      className: classNames(`${baseClassName}__label`, label.props.className)
-    })));
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__labels`,
+      children: Children.map(labels, label => /*#__PURE__*/cloneElement(label, {
+        className: classNames(`${baseClassName}__label`, label.props.className)
+      }))
+    });
   }
   renderHeader() {
     const {
       baseClassName
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__header`
-    }, this.renderSelection(), this.renderTitle(), this.isExtended() && this.renderLabels(), this.renderButtons());
+    return /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__header`,
+      children: [this.renderSelection(), this.renderTitle(), this.isExtended() && this.renderLabels(), this.renderButtons()]
+    });
   }
   renderRowHeader() {
     const {
       baseClassName,
       subtitle
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__header`
-    }, subtitle && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__subtitle`
-    }, subtitle), this.renderTitle());
+    return /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__header`,
+      children: [subtitle && /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__subtitle`,
+        children: subtitle
+      }), this.renderTitle()]
+    });
   }
   renderContent() {
     const {
       baseClassName,
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__main`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__main-content`
-    }, children));
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__main`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__main-content`,
+        children: children
+      })
+    });
   }
   isExtended() {
     const {
@@ -183,43 +194,43 @@ class Card extends Component {
     const result = [];
     if (!this.isRow()) {
       buttons.forEach((btn, index) => {
-        result.push( /*#__PURE__*/React.createElement(CardButton, _extends({
-          key: btn.key || index
-        }, btn)));
+        result.push( /*#__PURE__*/_jsx(CardButton, {
+          ...btn
+        }, btn.key || index));
       });
     }
     if (menu) {
-      result.push( /*#__PURE__*/React.createElement(Dropdown, {
-        key: "menu",
+      result.push( /*#__PURE__*/_jsx(Dropdown, {
         menu: menu,
-        menuPlacement: 'bottom-end'
-      }, /*#__PURE__*/React.createElement(CardButton, {
-        icon: "menu"
-      })));
+        menuPlacement: 'bottom-end',
+        children: /*#__PURE__*/_jsx(CardButton, {
+          icon: "menu"
+        })
+      }, "menu"));
     }
     if (rowContent && !this.isTile()) {
-      result.push( /*#__PURE__*/React.createElement(CardButton, {
-        key: "toggleView",
+      result.push( /*#__PURE__*/_jsx(CardButton, {
         icon: {
           name: 'chevron-down',
           flipVertical: this.isExtended()
         },
         onClick: this.handleToggleView,
-        tooltip: this.isExtended() ? /*#__PURE__*/React.createElement(Translate, {
+        tooltip: this.isExtended() ? /*#__PURE__*/_jsx(Translate, {
           content: "Card.collapseCardTooltip",
           fallback: "Collapse the card"
-        }) : /*#__PURE__*/React.createElement(Translate, {
+        }) : /*#__PURE__*/_jsx(Translate, {
           content: "Card.expandCardTooltip",
           fallback: "Expand the card"
         })
-      }));
+      }, "toggleView"));
     }
     if (result.length === 0) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__buttons`
-    }, result);
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__buttons`,
+      children: result
+    });
   }
   renderSideHeader() {
     const {
@@ -239,9 +250,10 @@ class Card extends Component {
       }
       sideHeaderElement = /*#__PURE__*/cloneElement(sideHeader, props);
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__side-header`
-    }, sideHeaderElement);
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__side-header`,
+      children: sideHeaderElement
+    });
   }
   renderSideContent() {
     const {
@@ -251,34 +263,41 @@ class Card extends Component {
     if (!sideContent) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__side-content`
-    }, sideContent);
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__side-content`,
+      children: sideContent
+    });
   }
   renderRow() {
     const {
       baseClassName,
       rowContent
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__inner`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__body`
-    }, this.renderSelection(), this.renderSideHeader(), this.renderRowHeader(), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__main`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__main-content`
-    }, rowContent)), this.renderButtons()));
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__inner`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__body`,
+        children: [this.renderSelection(), this.renderSideHeader(), this.renderRowHeader(), /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__main`,
+          children: /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__main-content`,
+            children: rowContent
+          })
+        }), this.renderButtons()]
+      })
+    });
   }
   renderTile() {
     const {
       baseClassName
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__inner`
-    }, this.renderHeader(), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__body`
-    }, this.renderSideHeader(), this.renderContent()), this.renderSideContent());
+    return /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__inner`,
+      children: [this.renderHeader(), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__body`,
+        children: [this.renderSideHeader(), this.renderContent()]
+      }), this.renderSideContent()]
+    });
   }
   renderExtended() {
     const {
@@ -286,13 +305,16 @@ class Card extends Component {
     } = this.props;
     const sideHeaderElement = this.renderSideHeader();
     const sideContentElement = this.renderSideContent();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__inner`
-    }, this.renderHeader(), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__body`
-    }, sideHeaderElement || sideContentElement ? /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__side`
-    }, sideHeaderElement, sideContentElement) : null, this.renderContent()));
+    return /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__inner`,
+      children: [this.renderHeader(), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__body`,
+        children: [sideHeaderElement || sideContentElement ? /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__side`,
+          children: [sideHeaderElement, sideContentElement]
+        }) : null, this.renderContent()]
+      })]
+    });
   }
   render() {
     const {
@@ -315,26 +337,28 @@ class Card extends Component {
       progress,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(CSSTransition, {
+    return /*#__PURE__*/_jsx(CSSTransition, {
       classNames: `${baseClassName}-`,
       in: this.isExtended(),
       timeout: 300,
-      nodeRef: this.rootRef
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: classNames(baseClassName, {
-        [`${baseClassName}--extended`]: this.isExtended(),
-        [`${baseClassName}--tile`]: this.isTile(),
-        [`${baseClassName}--row`]: this.isRow(),
-        [`${baseClassName}--${intent}`]: intent,
-        [`${baseClassName}--progress`]: progress
-      }, className)
-    }, props, {
-      ref: this.rootRef
-    }), this.isExtended() && this.renderExtended(), this.isTile() && this.renderTile(), this.isRow() && this.renderRow(), progress && /*#__PURE__*/React.createElement(ContentLoader, {
-      overlay: true,
-      backdrop: true,
-      text: progress === true ? null : progress
-    })));
+      nodeRef: this.rootRef,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames(baseClassName, {
+          [`${baseClassName}--extended`]: this.isExtended(),
+          [`${baseClassName}--tile`]: this.isTile(),
+          [`${baseClassName}--row`]: this.isRow(),
+          [`${baseClassName}--${intent}`]: intent,
+          [`${baseClassName}--progress`]: progress
+        }, className),
+        ...props,
+        ref: this.rootRef,
+        children: [this.isExtended() && this.renderExtended(), this.isTile() && this.renderTile(), this.isRow() && this.renderRow(), progress && /*#__PURE__*/_jsx(ContentLoader, {
+          overlay: true,
+          backdrop: true,
+          text: progress === true ? null : progress
+        })]
+      })
+    });
   }
 }
 Card.propTypes = {

package/esm/components/Card/CardButton.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
@@ -6,14 +5,16 @@ import PropTypes from 'prop-types';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
 import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
 const CardButton = _ref => {
   let {
     icon,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    icon: Icon.create(icon)
-  }, props));
+  return /*#__PURE__*/_jsx(Button, {
+    icon: Icon.create(icon),
+    ...props
+  });
 };
 CardButton.propTypes = {
   /**

package/esm/components/Card/PreviewPanel.js

@@ -1,14 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import ContentLoader from '../ContentLoader';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { loadImage } from './helpers';
 import noImage from './images/no-image.svg';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const determineSource = _ref => {
   let {
     image,
@@ -70,9 +69,10 @@ const PreviewPanel = _ref2 => {
   }, [source.type, source.url]);
   const renderLoader = () => {
     if (status === 'loading') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__loader`
-      }, /*#__PURE__*/React.createElement(ContentLoader, null));
+      return /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__loader`,
+        children: /*#__PURE__*/_jsx(ContentLoader, {})
+      });
     }
     return null;
   };
@@ -123,20 +123,26 @@ const PreviewPanel = _ref2 => {
         padding: `${padding instanceof Array ? padding.join('px ') : padding}px`
       };
     }
-    return /*#__PURE__*/React.createElement("img", _extends({
-      className: `${baseClassName}__image`
-    }, imageProps));
+    return /*#__PURE__*/_jsx("img", {
+      className: `${baseClassName}__image`,
+      ...imageProps
+    });
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--background`]: source.type === 'background'
-    }, `${baseClassName}--${status}`, className)
-  }, props, renderBackground()), renderLoader(), renderImage(), /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${baseClassName}__content`, {
-      [`${baseClassName}__content--empty`]: !children
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__content-inner`
-  }, children)));
+    }, `${baseClassName}--${status}`, className),
+    ...props,
+    ...renderBackground(),
+    children: [renderLoader(), renderImage(), /*#__PURE__*/_jsx("div", {
+      className: classNames(`${baseClassName}__content`, {
+        [`${baseClassName}__content--empty`]: !children
+      }),
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__content-inner`,
+        children: children
+      })
+    })]
+  });
 };
 export default PreviewPanel;

package/esm/components/CardList/CardList.js

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { Component, cloneElement, Children } from 'react';
 import { safeInvoke } from '../utils';
 import PropTypes from 'prop-types';
@@ -17,6 +14,8 @@ import Button from '../Button';
 import Spinner from '../Spinner';
 import Translate from '../Translate';
 import CardListToolbar from './CardListToolbar';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const VIEW_TILE = 'tile';
 export const VIEW_RESPONSIVE = 'responsive';
 export const VIEW_EXTENDED = 'extended';
@@ -183,16 +182,18 @@ class CardList extends Component {
       return null;
     }
     if (view === VIEW_RESPONSIVE && page < totalPages) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__pagination`
-      }, /*#__PURE__*/React.createElement(Button, {
-        onClick: () => this.loadMore()
-      }, /*#__PURE__*/React.createElement(Translate, {
-        content: 'CardList.loadMore',
-        fallback: 'Load more'
-      })));
+      return /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__pagination`,
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: () => this.loadMore(),
+          children: /*#__PURE__*/_jsx(Translate, {
+            content: 'CardList.loadMore',
+            fallback: 'Load more'
+          })
+        })
+      });
     }
-    return /*#__PURE__*/React.createElement(Pagination, {
+    return /*#__PURE__*/_jsx(Pagination, {
       className: `${baseClassName}__pagination`,
       total: totalPages,
       current: page,
@@ -241,13 +242,15 @@ class CardList extends Component {
     if (!loading) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content-blocker`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__loader`
-    }, /*#__PURE__*/React.createElement(Spinner, {
-      className: `${baseClassName}__loader-spinner`
-    })));
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__content-blocker`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__loader`,
+        children: /*#__PURE__*/_jsx(Spinner, {
+          className: `${baseClassName}__loader-spinner`
+        })
+      })
+    });
   }
   render() {
     const {
@@ -271,40 +274,45 @@ class CardList extends Component {
     } = this.props;
     let content = this.state.items.map(this.renderItem);
     if (this.isTile()) {
-      content = /*#__PURE__*/React.createElement(Grid, {
+      content = /*#__PURE__*/_jsx(Grid, {
         minColumnWidth: 400,
-        gap: "md"
-      }, Children.map(content, child => /*#__PURE__*/React.createElement(GridCol, {
-        key: child.props.key
-      }, child)));
+        gap: "md",
+        children: Children.map(content, child => /*#__PURE__*/_jsx(GridCol, {
+          children: child
+        }, child.props.key))
+      });
     }
-    return /*#__PURE__*/React.createElement(Measure, {
+    return /*#__PURE__*/_jsx(Measure, {
       bounds: true,
-      onResize: this.handleResize
-    }, _ref3 => {
-      let {
-        measureRef
-      } = _ref3;
-      return /*#__PURE__*/React.createElement("div", _extends({
-        ref: measureRef,
-        className: classNames(baseClassName, className)
-      }, props), /*#__PURE__*/React.createElement(CardListToolbar, {
-        selection: onSelectionChange && this.state.totalItems > 1 ? {
-          ...selectionButton,
-          total: this.state.totalItems,
-          onSelectAll: this.selectAll,
-          onSelectNone: this.selectNone,
-          checked: this.state.items.length === selection.length
-        } : null,
-        onViewChange: viewSwitcher ? view => this.changeView(view) : null,
-        currentView: this.state.view,
-        groups: toolbarGroups
-      }), this.state.items.length > 0 && /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__list ${baseClassName}__list--${this.state.view}`
-      }, content), this.state.items.length === 0 && !loading && /*#__PURE__*/React.createElement(Translate, {
-        content: "CardList.notFound",
-        fallback: "No items found."
-      }), this.renderPagination(), this.renderLoader());
+      onResize: this.handleResize,
+      children: _ref3 => {
+        let {
+          measureRef
+        } = _ref3;
+        return /*#__PURE__*/_jsxs("div", {
+          ref: measureRef,
+          className: classNames(baseClassName, className),
+          ...props,
+          children: [/*#__PURE__*/_jsx(CardListToolbar, {
+            selection: onSelectionChange && this.state.totalItems > 1 ? {
+              ...selectionButton,
+              total: this.state.totalItems,
+              onSelectAll: this.selectAll,
+              onSelectNone: this.selectNone,
+              checked: this.state.items.length === selection.length
+            } : null,
+            onViewChange: viewSwitcher ? view => this.changeView(view) : null,
+            currentView: this.state.view,
+            groups: toolbarGroups
+          }), this.state.items.length > 0 && /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__list ${baseClassName}__list--${this.state.view}`,
+            children: content
+          }), this.state.items.length === 0 && !loading && /*#__PURE__*/_jsx(Translate, {
+            content: "CardList.notFound",
+            fallback: "No items found."
+          }), this.renderPagination(), this.renderLoader()]
+        });
+      }
     });
   }
 }