@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/CardList/CardListToolbar.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
-
 /* eslint-disable react/prop-types */
+
 import React, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { CLS_PREFIX } from '../../constants';
@@ -14,28 +14,24 @@ import Menu from '../Menu';
 import Checkbox from '../Checkbox';
 import Badge from '../Badge';
 import { VIEW_RESPONSIVE, VIEW_ROW, VIEW_TILE, VIEW_EXTENDED } from './CardList';
-
-const renderSelection = ({
-  onSelectAll,
-  onSelectNone,
-  checked,
-  badge,
-  menuItems = []
-}, baseClassName) => {
+const renderSelection = (_ref, baseClassName) => {
+  let {
+    onSelectAll,
+    onSelectNone,
+    checked,
+    badge,
+    menuItems = []
+  } = _ref;
   const hasDropdown = menuItems.length > 0;
   const buttonProps = {};
   const checkboxProps = {};
-
   if (hasDropdown) {
     buttonProps.caret = true;
-
     checkboxProps.onClick = e => e.stopPropagation();
-
     buttonProps.component = 'span';
   } else {
     buttonProps.component = 'label';
   }
-
   let button = /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
     className: `${baseClassName}--select-all-btn`
   }), /*#__PURE__*/React.createElement(Checkbox, _extends({
@@ -48,23 +44,19 @@ const renderSelection = ({
       }
     }
   }, checkboxProps)));
-
   if (badge) {
     if (typeof badge === 'string') {
       badge = {
         label: badge
       };
     }
-
     button = /*#__PURE__*/React.createElement(Badge, badge, button);
   }
-
   if (hasDropdown) {
     button = /*#__PURE__*/React.createElement(Dropdown, {
       menu: /*#__PURE__*/React.createElement(Menu, null, menuItems)
     }, button);
   }
-
   return /*#__PURE__*/React.createElement(ToolbarGroup, {
     key: "selection",
     title: /*#__PURE__*/React.createElement(Translate, {
@@ -73,7 +65,6 @@ const renderSelection = ({
     })
   }, button);
 };
-
 const renderView = (onViewChange, currentView) => {
   const viewButtons = [{
     value: VIEW_EXTENDED,
@@ -109,45 +100,36 @@ const renderView = (onViewChange, currentView) => {
     onChange: view => onViewChange(view)
   }));
 };
-
 const isToolbarExpander = element => /*#__PURE__*/isValidElement(element) && element.type === ToolbarExpander;
-
-const CardListToolbar = ({
-  baseClassName,
-  selection,
-  onViewChange,
-  currentView,
-  groups
-}) => {
+const CardListToolbar = _ref2 => {
+  let {
+    baseClassName,
+    selection,
+    onViewChange,
+    currentView,
+    groups
+  } = _ref2;
   let toolbar = [];
-
   if (selection) {
     toolbar.push(renderSelection(selection, baseClassName));
   }
-
   toolbar = toolbar.concat(groups);
-
   if (onViewChange && currentView !== VIEW_RESPONSIVE) {
     const hasExpander = groups.filter(isToolbarExpander).length > 0;
-
     if (!hasExpander) {
       toolbar.push( /*#__PURE__*/React.createElement(ToolbarExpander, {
         key: "expander"
       }));
     }
-
     toolbar.push(renderView(onViewChange, currentView));
   }
-
   if (toolbar.length === 0) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement(Toolbar, {
     className: baseClassName
   }, toolbar);
 };
-
 CardListToolbar.propTypes = {
   selection: PropTypes.object,
   groups: PropTypes.arrayOf(PropTypes.element).isRequired,

package/esm/components/CardList/index.js

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

package/esm/components/Carousel/Carousel.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import { isRtl } from '../../utils';
 import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
@@ -8,7 +9,6 @@ import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
-
 const calcWidths = node => {
   const slideWidths = [].map.call(node.childNodes, el => el.clientWidth);
   const totalWidth = slideWidths.reduce((prev, curr) => prev + curr, 0);
@@ -17,17 +17,15 @@ const calcWidths = node => {
     totalWidth
   };
 };
+
 /**
  * Carousel component is used for optimizing page space by displaying only some parts
  * of entire content in a cyclic view.
  * @since 0.0.42
  */
-
-
 class Carousel extends Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       showControls: false,
       current: 0,
@@ -36,7 +34,6 @@ class Carousel extends Component {
       slideWidths: [],
       totalWidth: 0
     });
-
     this.speed = 500;
     this.movingCallback = null;
     this.playSpeed = 5000;
@@ -49,12 +46,10 @@ class Carousel extends Component {
     this.rootRef = /*#__PURE__*/createRef();
     this.genuineRef = /*#__PURE__*/createRef();
   }
-
   componentDidMount() {
     this.isRtl = isRtl();
     this.play();
   }
-
   componentDidUpdate() {
     const {
       width
@@ -63,7 +58,6 @@ class Carousel extends Component {
       slideWidths,
       totalWidth
     } = calcWidths(this.genuineRef.current);
-
     if (this.state.totalWidth !== totalWidth) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
@@ -73,56 +67,45 @@ class Carousel extends Component {
       });
     }
   }
-
   componentWillUnmount() {
     this.stop();
     clearTimeout(this.movingCallback);
   }
-
   handlePrevClick() {
     this.stop();
     this.setCurrentSlide(this.state.current - 1);
   }
-
   handleNextClick() {
     this.stop();
     this.setCurrentSlide(this.state.current + 1);
   }
-
   play() {
     this.playTimer = setTimeout(() => {
       this.setCurrentSlide(this.state.current + 1);
       this.play();
     }, this.playSpeed);
   }
-
   stop() {
     if (this.playTimer) {
       clearTimeout(this.playTimer);
       this.playTimer = null;
     }
   }
-
   setCurrentSlide(next) {
     const {
       slideWidths,
       moving
     } = this.state;
-
     if (moving) {
       return;
     }
-
     let current = next;
-
     if (current < 0) {
       current = slideWidths.length - 1;
     }
-
     if (current >= slideWidths.length) {
       current = 0;
     }
-
     this.setState({
       current,
       next,
@@ -135,12 +118,12 @@ class Carousel extends Component {
       });
     }, this.speed);
   }
-
-  handleResize({
-    bounds: {
-      width
-    }
-  }) {
+  handleResize(_ref) {
+    let {
+      bounds: {
+        width
+      }
+    } = _ref;
     const node = this.genuineRef.current;
     const {
       slideWidths,
@@ -152,7 +135,6 @@ class Carousel extends Component {
       showControls: width < totalWidth
     });
   }
-
   listStyle() {
     const {
       current,
@@ -163,7 +145,6 @@ class Carousel extends Component {
     } = this.state;
     const moveTo = moving ? next : current;
     let x = -totalWidth + 26;
-
     if (moveTo < 0) {
       for (let i = moveTo; i < 0; i++) {
         x += slideWidths[i + slideWidths.length];
@@ -173,11 +154,9 @@ class Carousel extends Component {
         x -= slideWidths[i % slideWidths.length];
       }
     }
-
     if (this.isRtl) {
       x = -x;
     }
-
     return {
       WebkitTransform: `translateX(${x ? `${x}px` : 0})`,
       transform: `translateX(${x ? `${x}px` : 0})`,
@@ -185,7 +164,6 @@ class Carousel extends Component {
       transition: moving ? `transform ${this.speed}ms ease` : null
     };
   }
-
   render() {
     const {
       showControls
@@ -202,52 +180,51 @@ class Carousel extends Component {
       innerRef: node => {
         this.rootRef.current = node;
       }
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/React.createElement("section", _extends({
-      ref: measureRef,
-      className: classNames(baseClassName, className)
-    }, props), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__slides`,
-      style: showControls ? this.listStyle() : null
-    }, showControls && children, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__genuine-slides`,
-      ref: this.genuineRef
-    }, children), showControls && children), showControls && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__controls`
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames(`${baseClassName}__control`, `${baseClassName}__control--previous`),
-      onClick: this.handlePrevClick
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "chevron-left",
-      flipHorizontal: this.isRtl,
-      className: `${baseClassName}__control-icon`
-    })), /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames(`${baseClassName}__control`, `${baseClassName}__control--next`),
-      onClick: this.handleNextClick
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "chevron-right",
-      flipHorizontal: this.isRtl,
-      className: `${baseClassName}__control-icon`
-    })))));
+    }, _ref2 => {
+      let {
+        measureRef
+      } = _ref2;
+      return /*#__PURE__*/React.createElement("section", _extends({
+        ref: measureRef,
+        className: classNames(baseClassName, className)
+      }, props), /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__slides`,
+        style: showControls ? this.listStyle() : null
+      }, showControls && children, /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__genuine-slides`,
+        ref: this.genuineRef
+      }, children), showControls && children), showControls && /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__controls`
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: classNames(`${baseClassName}__control`, `${baseClassName}__control--previous`),
+        onClick: this.handlePrevClick
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "chevron-left",
+        flipHorizontal: this.isRtl,
+        className: `${baseClassName}__control-icon`
+      })), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: classNames(`${baseClassName}__control`, `${baseClassName}__control--next`),
+        onClick: this.handleNextClick
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "chevron-right",
+        flipHorizontal: this.isRtl,
+        className: `${baseClassName}__control-icon`
+      }))));
+    });
   }
-
 }
-
 Carousel.propTypes = {
   /**
    * Slides
    * @since 0.0.42
    */
   children: PropTypes.node,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */

package/esm/components/Carousel/index.js

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

package/esm/components/Checkbox/Checkbox.js

@@ -1,35 +1,35 @@
 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';
 import Tooltip from '../Tooltip';
-
 /**
  * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
  * @since 0.0.55
  */
-const Checkbox = ({
-  baseClassName = `${CLS_PREFIX}checkbox`,
-  className,
-  children,
-  onChange,
-  tooltip,
-  checked,
-  defaultChecked,
-  disabled = false,
-  name,
-  indeterminate = false,
-  inputProps,
-  rightAddon,
-  ...props
-}) => {
+const Checkbox = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}checkbox`,
+    className,
+    children,
+    onChange,
+    tooltip,
+    checked,
+    defaultChecked,
+    disabled = false,
+    name,
+    indeterminate = false,
+    inputProps,
+    rightAddon,
+    ...props
+  } = _ref;
   const handleChange = event => {
     if (!disabled && onChange) {
       onChange(event.target.checked);
     }
   };
-
   let result = /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(baseClassName, {
       [`${baseClassName}--disabled`]: disabled,
@@ -50,14 +50,11 @@ const Checkbox = ({
   }), children ? /*#__PURE__*/React.createElement("span", {
     className: `${baseClassName}__text`
   }, children) : null), rightAddon ? rightAddon : null));
-
   if (tooltip) {
     result = /*#__PURE__*/React.createElement(Tooltip, {
       title: tooltip
     }, result);
   }
-
   return result;
 };
-
 export default Checkbox;

package/esm/components/Checkbox/index.js

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

package/esm/components/ClosingConfirmation/index.js

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

package/esm/components/ClosingConfirmation/locale/en-US.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 export default {
   confirm: 'Leave',
   cancel: 'Go Back',

package/esm/components/ClosingConfirmation/useClosingConfirmation.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import React, { useState } from 'react';
 import Button from '../Button';
 import Dialog from '../Dialog';
@@ -6,25 +7,21 @@ import Paragraph from '../Paragraph';
 import Translate from '../Translate';
 import { safeInvoke } from '../utils';
 import locale from './locale/en-US';
-
-const useClosingConfirmation = ({
-  onClose,
-  closingConfirmation
-}) => {
+const useClosingConfirmation = _ref => {
+  let {
+    onClose,
+    closingConfirmation
+  } = _ref;
   const [isReady, setIsReady] = useState(false);
   const [isDialogVisible, setIsDialogVisible] = useState(false);
-
   const handleConfirm = () => {
     setIsDialogVisible(false);
     safeInvoke(onClose);
   };
-
   const handleCancel = () => {
     setIsDialogVisible(false);
   };
-
   let onCloseWithConfirmation;
-
   if (typeof onClose === 'function') {
     onCloseWithConfirmation = () => {
       if (closingConfirmation) {
@@ -35,9 +32,7 @@ const useClosingConfirmation = ({
       }
     };
   }
-
   let closingConfirmationDialog = null;
-
   if (isReady) {
     closingConfirmationDialog = /*#__PURE__*/React.createElement(Dialog, {
       isOpen: isDialogVisible,
@@ -63,11 +58,9 @@ const useClosingConfirmation = ({
       fallback: locale.content
     })));
   }
-
   return {
     onCloseWithConfirmation,
     closingConfirmationDialog
   };
 };
-
 export default useClosingConfirmation;