@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Button/Button.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import React, { cloneElement, forwardRef, isValidElement, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -30,24 +31,25 @@ const oldIconNames = {
 };
 import ResponsiveContext from '../ResponsiveContext';
 import OnDarkContext from '../OnDarkContext';
-
-const renderIcon = ({
-  baseClassName,
-  icon,
-  size,
-  empty
-}) => Icon.create(oldIconNames[icon] || icon, {
-  className: `${baseClassName}__icon`,
-  size: size === 'lg' || empty ? '16' : '12'
-});
-
-const renderCaret = ({
-  baseClassName,
-  size,
-  caret
-}) => {
+const renderIcon = _ref => {
+  let {
+    baseClassName,
+    icon,
+    size,
+    empty
+  } = _ref;
+  return Icon.create(oldIconNames[icon] || icon, {
+    className: `${baseClassName}__icon`,
+    size: size === 'lg' || empty ? '16' : '12'
+  });
+};
+const renderCaret = _ref2 => {
+  let {
+    baseClassName,
+    size,
+    caret
+  } = _ref2;
   let caretElement;
-
   if (typeof caret === 'boolean' && caret) {
     caretElement = /*#__PURE__*/React.createElement(Icon, {
       name: "chevron-down",
@@ -56,92 +58,78 @@ const renderCaret = ({
   } else {
     caretElement = caret;
   }
-
   if ( /*#__PURE__*/isValidElement(caretElement)) {
     caretElement = /*#__PURE__*/cloneElement(caretElement, {
       className: classNames(`${baseClassName}__caret`, caretElement.props.className)
     });
   }
-
   return caretElement;
 };
+
 /**
  * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
  * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
  * @since 0.0.37
  */
-
-
-const Button = /*#__PURE__*/forwardRef(({
-  baseClassName,
-  className,
-  component: Tag,
-  size,
-  intent,
-  ghost,
-  selected: selectedProp,
-  onToggle,
-  state,
-  icon,
-  caret,
-  fill,
-  tooltip,
-  children,
-  arrow,
-  disabled,
-  ...props
-}, ref) => {
+const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    baseClassName,
+    className,
+    component: Tag,
+    size,
+    intent,
+    ghost,
+    selected: selectedProp,
+    onToggle,
+    state,
+    icon,
+    caret,
+    fill,
+    tooltip,
+    children,
+    arrow,
+    disabled,
+    ...props
+  } = _ref3;
   const [selectedState, setSelectedState] = useState(false);
-
   const handleToggle = () => {
     setSelectedState(!selectedState);
     return !selectedState;
   };
-
   const isCollapsed = useContext(ResponsiveContext);
   const componentProps = {};
-
   if (Tag === 'button') {
     componentProps.type = 'button';
   } else if (Tag === 'a') {
     componentProps.role = 'button';
     componentProps.tabIndex = 0;
-
     if (disabled) {
       props.href = undefined;
     }
   }
-
   if (props.onClick && disabled) {
     props.onClick = e => {
       e.preventDefault();
     };
   }
-
   let childrenElement = children;
   let tooltipElement = tooltip;
-
   if (isCollapsed && icon && children) {
     childrenElement = null;
-
     if (!tooltip) {
       tooltipElement = children;
     }
   }
-
   if (!props.onClick && onToggle) {
     props.onClick = e => {
       e.preventDefault();
       onToggle(handleToggle());
     };
   }
-
   const selected = selectedProp === undefined ? selectedState : selectedProp;
-
   if (selectedProp !== undefined || onToggle) {
     componentProps['aria-pressed'] = String(selected);
   }
-
   const isArrowButton = arrow === 'forward' || arrow === 'backward';
   const hasAriaDisabled = Tag === 'button' && disabled && tooltip;
   let button = /*#__PURE__*/React.createElement(Tag, _extends({
@@ -177,13 +165,11 @@ const Button = /*#__PURE__*/forwardRef(({
   })), isArrowButton && !ghost && /*#__PURE__*/React.createElement("span", {
     className: `${baseClassName}__arrow`
   }));
-
   if (tooltipElement) {
     button = /*#__PURE__*/React.createElement(Tooltip, {
       title: tooltipElement
     }, button);
   }
-
   return button;
 });
 Button.displayName = 'Button';
@@ -193,95 +179,79 @@ Button.propTypes = {
    * @since 2.5.0
    */
   size: PropTypes.oneOf(['md', 'lg']),
-
   /**
    * Visual intent color to apply to component.
    * @since 0.0.42
    */
   intent: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'info']),
-
   /**
    * Display button with transparent background.
    * @since 2.1.0
    */
   ghost: PropTypes.bool,
-
   /**
    * Arrow button.
    * @since 2.6.0
    */
   arrow: PropTypes.oneOf(['forward', 'backward']),
-
   /**
    * Selected state of toggle button. Used in controlled component mode.
    * @since 0.0.68
    */
   selected: PropTypes.bool,
-
   /**
    * Toggle button callback. Used in uncontrolled component mode.
    * @since 0.0.68
    */
   onToggle: PropTypes.func,
-
   /**
    * State of the button
    * @since 0.0.42
    */
   state: PropTypes.oneOf(['active', 'loading', 'hovered', 'focused']),
-
   /**
    * Is button disabled?
    * @since 0.0.42
    */
   disabled: PropTypes.bool,
-
   /**
    * Tooltip for component
    * @since 0.0.42
    */
   tooltip: PropTypes.node,
-
   /**
    * Name of icon or [Icon](#!/Icon) component
    * @since 0.0.42
    */
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Show caret
    * @since 0.0.42
    */
   caret: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
-
   /**
    * Dynamically expand the button to fill out the whole available width of its parent container.
    * @since 1.8.0
    */
   fill: PropTypes.bool,
-
   /**
    * Content of the button
    * @since 0.0.37
    */
   children: PropTypes.node,
-
   /**
    * Component to render as the root element. Useful when rendering a `Button` as `<a>` or `<Link>`.
    * @since 0.0.42
    */
   component: PropTypes.elementType,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   baseClassName: PropTypes.string,
-
   /**
    * @ignore
    */

package/esm/components/Button/Button.stories.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import Button from './Button';
 export const Basic = args => /*#__PURE__*/React.createElement(Button, args);

package/esm/components/Button/index.js

@@ -1,2 +1,3 @@
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
 export { default } from './Button';

package/esm/components/ButtonGroup/ButtonGroup.js

@@ -1,22 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-
 /**
  * `ButtonGroup` component is used for visual grouping of several [Buttons](#!/Button) together.
  * @since 0.0.37
  */
-const ButtonGroup = ({
-  baseClassName = `${CLS_PREFIX}button-group`,
-  className,
-  children,
-  innerRef,
-  ...props
-}) => /*#__PURE__*/React.createElement("div", _extends({
-  className: classNames(baseClassName, className),
-  ref: innerRef
-}, props), children);
-
+const ButtonGroup = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}button-group`,
+    className,
+    children,
+    innerRef,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(baseClassName, className),
+    ref: innerRef
+  }, props), children);
+};
 export default ButtonGroup;

package/esm/components/ButtonGroup/index.js

@@ -1,2 +1,3 @@
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 export { default } from './ButtonGroup';

package/esm/components/Card/Card.js

@@ -3,6 +3,7 @@ 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';
@@ -17,19 +18,16 @@ import PreviewPanel from './PreviewPanel';
 const VIEW_TILE = 'tile';
 const VIEW_EXTENDED = 'extended';
 const VIEW_ROW = 'row';
+
 /**
  * @deprecated `Card` component is a part of [CardList](#!/CardList).
  * @since 0.0.54
  */
-
 class Card extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {});
-
     _defineProperty(this, "rootRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "handleToggleView", () => {
       const {
         view
@@ -39,7 +37,6 @@ class Card extends Component {
       });
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       view
@@ -48,25 +45,20 @@ class Card extends Component {
       prevView
     } = state;
     const nextState = {};
-
     if (view !== prevView) {
       nextState.view = view;
     }
-
     nextState.prevView = view;
     return nextState;
   }
-
   renderSelection() {
     const {
       baseClassName,
       selection
     } = this.props;
-
     if (!selection) {
       return null;
     }
-
     const {
       isSelected,
       onSelectionChange
@@ -83,7 +75,6 @@ class Card extends Component {
       fallback: "Select"
     }) : null));
   }
-
   renderTitle() {
     const {
       baseClassName,
@@ -106,41 +97,34 @@ class Card extends Component {
       })
     }, titleLinkProps)), this.isExtended() && this.renderTitleLabels());
   }
-
   renderTitleLabels() {
     const {
       baseClassName,
       titleLabels
     } = this.props;
-
     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)
     })));
   }
-
   renderLabels() {
     const {
       baseClassName,
       labels
     } = this.props;
-
     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)
     })));
   }
-
   renderHeader() {
     const {
       baseClassName
@@ -149,7 +133,6 @@ class Card extends Component {
       className: `${baseClassName}__header`
     }, this.renderSelection(), this.renderTitle(), this.isExtended() && this.renderLabels(), this.renderButtons());
   }
-
   renderRowHeader() {
     const {
       baseClassName,
@@ -161,7 +144,6 @@ class Card extends Component {
       className: `${baseClassName}__subtitle`
     }, subtitle), this.renderTitle());
   }
-
   renderContent() {
     const {
       baseClassName,
@@ -173,28 +155,24 @@ class Card extends Component {
       className: `${baseClassName}__main-content`
     }, children));
   }
-
   isExtended() {
     const {
       view
     } = this.state;
     return !this.isTile() && view === VIEW_EXTENDED;
   }
-
   isTile() {
     const {
       view
     } = this.state;
     return view === VIEW_TILE;
   }
-
   isRow() {
     const {
       view
     } = this.state;
     return !this.isTile() && view === VIEW_ROW;
   }
-
   renderButtons() {
     const {
       baseClassName,
@@ -203,7 +181,6 @@ class Card extends Component {
       buttons
     } = this.props;
     const result = [];
-
     if (!this.isRow()) {
       buttons.forEach((btn, index) => {
         result.push( /*#__PURE__*/React.createElement(CardButton, _extends({
@@ -211,7 +188,6 @@ class Card extends Component {
         }, btn)));
       });
     }
-
     if (menu) {
       result.push( /*#__PURE__*/React.createElement(Dropdown, {
         key: "menu",
@@ -221,7 +197,6 @@ class Card extends Component {
         icon: "menu"
       })));
     }
-
     if (rowContent && !this.isTile()) {
       result.push( /*#__PURE__*/React.createElement(CardButton, {
         key: "toggleView",
@@ -239,60 +214,47 @@ class Card extends Component {
         })
       }));
     }
-
     if (result.length === 0) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__buttons`
     }, result);
   }
-
   renderSideHeader() {
     const {
       sideHeader,
       baseClassName
     } = this.props;
-
     if (!sideHeader) {
       return null;
     }
-
     let sideHeaderElement = sideHeader;
-
     if (sideHeader.type === PreviewPanel) {
       const props = {
         className: classNames(sideHeader.props.className, `${baseClassName}__preview-panel`)
       };
-
       if (this.isRow()) {
         props.children = null;
       }
-
       sideHeaderElement = /*#__PURE__*/cloneElement(sideHeader, props);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__side-header`
     }, sideHeaderElement);
   }
-
   renderSideContent() {
     const {
       sideContent,
       baseClassName
     } = this.props;
-
     if (!sideContent) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__side-content`
     }, sideContent);
   }
-
   renderRow() {
     const {
       baseClassName,
@@ -308,7 +270,6 @@ class Card extends Component {
       className: `${baseClassName}__main-content`
     }, rowContent)), this.renderButtons()));
   }
-
   renderTile() {
     const {
       baseClassName
@@ -319,7 +280,6 @@ class Card extends Component {
       className: `${baseClassName}__body`
     }, this.renderSideHeader(), this.renderContent()), this.renderSideContent());
   }
-
   renderExtended() {
     const {
       baseClassName
@@ -334,7 +294,6 @@ class Card extends Component {
       className: `${baseClassName}__side`
     }, sideHeaderElement, sideContentElement) : null, this.renderContent()));
   }
-
   render() {
     const {
       baseClassName,
@@ -377,58 +336,48 @@ class Card extends Component {
       text: progress === true ? null : progress
     })));
   }
-
 }
-
 Card.propTypes = {
   /**
    * Content of the `Card`.
    * @since 0.0.54
    */
   children: PropTypes.node,
-
   /**
    * View mode.
    * @since 0.0.54
    */
   view: PropTypes.oneOf([VIEW_EXTENDED, VIEW_TILE, VIEW_ROW]),
-
   /**
    * Visual intent color to apply to component.
    * @since 0.0.54
    */
   intent: PropTypes.oneOf(['warning', 'danger', 'inactive']),
-
   /**
    * Text of title.
    * @since 0.0.54
    */
   title: PropTypes.node.isRequired,
-
   /**
    * Link for title.
    * @since 0.0.54
    */
   titleLink: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
   /**
    * List of labels in header, which should appear right after the title. See [Label](#!/Label) component for details.
    * @since 1.6.0
    */
   titleLabels: PropTypes.arrayOf(PropTypes.element),
-
   /**
    * Text of subtitle.
    * @since 0.0.54
    */
   subtitle: PropTypes.node,
-
   /**
    * List of labels in header, which should appear at the end of header. See [Label](#!/Label) component for details.
    * @since 0.0.54
    */
   labels: PropTypes.arrayOf(PropTypes.element),
-
   /**
    * List of additional buttons in header.
    * @since 0.0.54
@@ -438,13 +387,11 @@ Card.propTypes = {
     onClick: PropTypes.func.isRequired,
     tooltip: PropTypes.node
   })),
-
   /**
    * See [Menu](#!/Menu).
    * @since 0.3.0
    */
   menu: PropTypes.element,
-
   /**
    * Selection control.
    * @since 0.0.54
@@ -453,36 +400,30 @@ Card.propTypes = {
     isSelected: PropTypes.bool.isRequired,
     onSelectionChange: PropTypes.func.isRequired
   }),
-
   /**
    * Side header section. Recommended to use [PreviewPanel](#!/PreviewPanel) component.
    * @since 0.0.54
    */
   sideHeader: PropTypes.element,
-
   /**
    * Side content section.
    * @since 0.0.54
    */
   sideContent: PropTypes.element,
-
   /**
    * Content for row view.
    * @since 0.0.54
    */
   rowContent: PropTypes.any,
-
   /**
    * Indicate the progress state of the card.
    * @since 0.4.1
    */
   progress: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */