@plesk/ui-library 3.31.0 → 3.31.2

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

@@ -1,4 +1,5 @@
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import React, { cloneElement } from 'react';
 import ItemList from './ItemList';
 import Item from '../Item';
@@ -57,7 +58,8 @@ Basic.args = {
   }, 'Content 4')]
 };
 export const Cards = Basic.bind(null);
-Cards.args = { ...Basic.args,
+Cards.args = {
+  ...Basic.args,
   children: Basic.args.children.map(child => {
     return child ? /*#__PURE__*/cloneElement(child, {
       view: 'card',
@@ -66,37 +68,39 @@ Cards.args = { ...Basic.args,
   })
 };
 export const Reorderables = Basic.bind(null);
-Reorderables.args = { ...Basic.args,
+Reorderables.args = {
+  ...Basic.args,
   reorderable: true
 };
 export const Selectables = Basic.bind(null);
-Selectables.args = { ...Basic.args,
+Selectables.args = {
+  ...Basic.args,
   selectable: true,
   defaultValue: '2'
 };
 export const HoverableItemList = Basic.bind(null);
-HoverableItemList.args = { ...Basic.args,
+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,
+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/ItemList/index.js

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

package/esm/components/Label/Label.js

@@ -1,21 +1,23 @@
 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';
-
 /**
  * `Label` component is used for showing multiple characteristics or attributes of an object.
  * @since 0.0.42
  */
-const Label = ({
-  baseClassName = `${CLS_PREFIX}label`,
-  className,
-  intent,
-  children,
-  ...props
-}) => /*#__PURE__*/React.createElement("span", _extends({
-  className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, className)
-}, props), children);
-
+const Label = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}label`,
+    className,
+    intent,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, className)
+  }, props), children);
+};
 export default Label;

package/esm/components/Label/index.js

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

package/esm/components/Layer/Layer.js

@@ -1,38 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 import React, { isValidElement, cloneElement, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 const LevelContext = /*#__PURE__*/createContext(0);
 export const PortalContext = /*#__PURE__*/createContext(undefined);
-
 /**
  * `Layer` component.
  */
-const Layer = ({
-  baseClassName = `${CLS_PREFIX}layer`,
-  className,
-  children,
-  innerRef,
-  level = 0,
-  ...props
-}) => {
+const Layer = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}layer`,
+    className,
+    children,
+    innerRef,
+    level = 0,
+    ...props
+  } = _ref;
   const parentLevel = useContext(LevelContext);
   const container = useContext(PortalContext) || document.body;
-
   const renderChildren = () => {
     if ( /*#__PURE__*/isValidElement(children)) {
       return /*#__PURE__*/cloneElement(children, {
-        style: { ...children.props.style,
+        style: {
+          ...children.props.style,
           zIndex: parentLevel + level
         }
       });
     }
-
     return children;
   };
-
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(LevelContext.Provider, {
     value: parentLevel + level
   }, /*#__PURE__*/React.createElement("div", _extends({
@@ -40,5 +39,4 @@ const Layer = ({
     ref: innerRef
   }, props), renderChildren())), container);
 };
-
 export default Layer;

package/esm/components/Layer/index.js

@@ -1,3 +1,4 @@
 // Copyright 1999-2018. Plesk International GmbH. All rights reserved.
+
 export { default } from './Layer';
 export * from './Layer';

package/esm/components/Layout/Layout.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 React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import Measure from 'react-measure';
@@ -13,43 +14,36 @@ const propTypes = {
    * @since 1.4.0
    */
   type: PropTypes.oneOf(['fluid', 'simplified']),
-
   /**
    * Header content.
    * @since 1.4.0
    */
   header: PropTypes.node,
-
   /**
    * Define header position - always on top (fixed) or static.
    * @since 1.4.0
    */
   headerFixed: PropTypes.bool,
-
   /**
    * Additional content at the top of the header.
    * @since 3.2.0
    */
   headerAddon: PropTypes.node,
-
   /**
    * Sidebar content.
    * @since 1.4.0
    */
   sidebar: PropTypes.node,
-
   /**
    * Sidebar type.
    * @since 3.2.0
    */
   sidebarType: PropTypes.oneOf(['collapsed', 'folded']),
-
   /**
    * Define if sidebar can collapse.
    * @since 1.4.0
    */
   sidebarCollapsible: PropTypes.bool,
-
   /**
    * Sidebar collapsed state.
    * A boolean value is used for desktop mode only, but you can set an array with collapsed states for all modes, e.g. `['responsive', 'desktop']`.
@@ -57,37 +51,31 @@ const propTypes = {
    * @since 1.4.0
    */
   sidebarCollapsed: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
-
   /**
    * Additional content between header and main content.
    * @since 1.4.0
    */
   contentAddon: PropTypes.node,
-
   /**
    * Content header.
    * @since 3.0.0
    */
   contentHeader: PropTypes.node,
-
   /**
    * Footer content.
    * @since 1.4.0
    */
   footer: PropTypes.node,
-
   /**
    * Main content of the `Layout`.
    * @since 1.4.0
    */
   children: PropTypes.node,
-
   /**
    * Width of the content
    * @since 3.0.0
    */
   width: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * Sidebar onToggle handler.
    * The handler is called with two args:
@@ -98,12 +86,10 @@ const propTypes = {
    * @since 1.4.0
    */
   onSidebarToggle: PropTypes.func,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
@@ -127,7 +113,6 @@ const defaultProps = {
   className: undefined,
   baseClassName: `${CLS_PREFIX}layout`
 };
-
 const subscribeMatchMedia = (query, handler) => {
   const mq = window.matchMedia(query);
   handler(mq);
@@ -136,18 +121,18 @@ const subscribeMatchMedia = (query, handler) => {
     mq.removeListener(handler);
   };
 };
-
 const subscribeClickOutside = (refs, handler) => {
   const listener = event => {
-    if (refs.some(({
-      current
-    }) => !current || current.contains(event.target))) {
+    if (refs.some(_ref => {
+      let {
+        current
+      } = _ref;
+      return !current || current.contains(event.target);
+    })) {
       return;
     }
-
     handler(event);
   };
-
   document.addEventListener('mousedown', listener);
   document.addEventListener('touchstart', listener);
   return () => {
@@ -155,41 +140,36 @@ const subscribeClickOutside = (refs, handler) => {
     document.removeEventListener('touchstart', listener);
   };
 };
+
 /**
  * @since 1.4.0
  */
-
-
 export default class Layout extends Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       isSidebarClosedResponsive: true,
       headerHeight: null,
       isResponsive: window.matchMedia('(max-width: 1022px)').matches
     });
-
-    _defineProperty(this, "handleMatchMedia", ({
-      matches
-    }) => {
+    _defineProperty(this, "handleMatchMedia", _ref2 => {
+      let {
+        matches
+      } = _ref2;
       this.setState({
         isResponsive: matches
       });
     });
-
     _defineProperty(this, "handleClickOutside", () => {
       const {
         isResponsive
       } = this.state;
-
       if (isResponsive) {
         this.setState({
           isSidebarClosedResponsive: true
         });
       }
     });
-
     _defineProperty(this, "handleToggle", () => {
       this.setState(prevState => {
         const key = prevState.isResponsive ? 'isSidebarClosedResponsive' : 'isSidebarClosedDesktop';
@@ -202,15 +182,14 @@ export default class Layout extends Component {
         }
       });
     });
-
-    _defineProperty(this, "handleResize", ({
-      bounds
-    }) => {
+    _defineProperty(this, "handleResize", _ref3 => {
+      let {
+        bounds
+      } = _ref3;
       this.setState({
         headerHeight: bounds.height
       });
     });
-
     _defineProperty(this, "getSidebarClosed", () => {
       const {
         isResponsive,
@@ -219,12 +198,10 @@ export default class Layout extends Component {
       } = this.state;
       return isResponsive ? isSidebarClosedResponsive : isSidebarClosedDesktop;
     });
-
     this.headerRef = /*#__PURE__*/createRef();
     this.sidebarRef = /*#__PURE__*/createRef();
     this.responsiveSidebarTogglerRef = /*#__PURE__*/createRef();
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       sidebarCollapsed
@@ -233,7 +210,6 @@ export default class Layout extends Component {
       prevSidebarCollapsed
     } = state;
     const nextState = {};
-
     if (sidebarCollapsed !== prevSidebarCollapsed) {
       if (Array.isArray(sidebarCollapsed)) {
         nextState.isSidebarClosedDesktop = sidebarCollapsed.includes('desktop');
@@ -242,24 +218,21 @@ export default class Layout extends Component {
         nextState.isSidebarClosedDesktop = Boolean(sidebarCollapsed);
       }
     }
-
     nextState.prevSidebarCollapsed = sidebarCollapsed;
     return nextState;
   }
-
   componentDidMount() {
     this.unsubscribeMatchMedia = subscribeMatchMedia('(max-width: 1022px)', this.handleMatchMedia);
     this.unsubscribeClickOutside = subscribeClickOutside([this.sidebarRef, this.responsiveSidebarTogglerRef], this.handleClickOutside);
   }
-
   componentWillUnmount() {
     this.unsubscribeMatchMedia();
     this.unsubscribeClickOutside();
   }
-
-  renderHeader({
-    header
-  }) {
+  renderHeader(_ref4) {
+    let {
+      header
+    } = _ref4;
     const {
       baseClassName,
       headerAddon,
@@ -268,11 +241,9 @@ export default class Layout extends Component {
     const {
       headerHeight
     } = this.state;
-
     if (!header) {
       return null;
     }
-
     const isSidebarClosed = this.getSidebarClosed();
     return /*#__PURE__*/React.createElement(CSSTransition, {
       in: !isSidebarClosed,
@@ -295,80 +266,77 @@ export default class Layout extends Component {
     }, /*#__PURE__*/React.createElement(Measure, {
       onResize: this.handleResize,
       bounds: true
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/React.createElement("div", {
-      ref: measureRef,
-      className: `${baseClassName}__header-inner`
-    }, headerAddon ? /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__header-addon`
-    }, headerAddon) : null, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__header-content`
-    }, sidebar && /*#__PURE__*/React.createElement("button", {
-      className: classNames(`${baseClassName}__responsive-sidebar-toggler`, {
-        [`${baseClassName}__responsive-sidebar-toggler--open`]: !isSidebarClosed
-      }),
-      type: "button",
-      onClick: this.handleToggle,
-      ref: this.responsiveSidebarTogglerRef
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__responsive-sidebar-toggler-inner`
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__responsive-sidebar-toggler-icon`
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__header-content-inner`
-    }, header))))));
+    }, _ref5 => {
+      let {
+        measureRef
+      } = _ref5;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: measureRef,
+        className: `${baseClassName}__header-inner`
+      }, headerAddon ? /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__header-addon`
+      }, headerAddon) : null, /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__header-content`
+      }, sidebar && /*#__PURE__*/React.createElement("button", {
+        className: classNames(`${baseClassName}__responsive-sidebar-toggler`, {
+          [`${baseClassName}__responsive-sidebar-toggler--open`]: !isSidebarClosed
+        }),
+        type: "button",
+        onClick: this.handleToggle,
+        ref: this.responsiveSidebarTogglerRef
+      }, /*#__PURE__*/React.createElement("span", {
+        className: `${baseClassName}__responsive-sidebar-toggler-inner`
+      }, /*#__PURE__*/React.createElement("span", {
+        className: `${baseClassName}__responsive-sidebar-toggler-icon`
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__header-content-inner`
+      }, header)));
+    })));
   }
-
-  renderContentAddon({
-    contentAddon
-  }) {
+  renderContentAddon(_ref6) {
+    let {
+      contentAddon
+    } = _ref6;
     const {
       baseClassName
     } = this.props;
-
     if (!contentAddon) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content-addon`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content-addon-inner`
     }, contentAddon));
   }
-
-  renderContentHeader({
-    contentHeader
-  }) {
+  renderContentHeader(_ref7) {
+    let {
+      contentHeader
+    } = _ref7;
     const {
       baseClassName
     } = this.props;
-
     if (!contentHeader) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content-header`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content-header-inner`
     }, contentHeader));
   }
-
-  renderSidebar({
-    sidebar
-  }) {
+  renderSidebar(_ref8) {
+    let {
+      sidebar
+    } = _ref8;
     const {
       baseClassName,
       sidebarCollapsible,
       type
     } = this.props;
-
     if (!sidebar || type === 'simplified') {
       return null;
     }
-
     const isSidebarClosed = this.getSidebarClosed();
     return /*#__PURE__*/React.createElement(CSSTransition, {
       in: !isSidebarClosed,
@@ -401,10 +369,10 @@ export default class Layout extends Component {
       className: `${baseClassName}__sidebar-toggler-inner`
     })))));
   }
-
-  renderMainContent({
-    children
-  }) {
+  renderMainContent(_ref9) {
+    let {
+      children
+    } = _ref9;
     const {
       baseClassName
     } = this.props;
@@ -414,25 +382,22 @@ export default class Layout extends Component {
       className: `${baseClassName}__main-inner`
     }, children));
   }
-
-  renderFooter({
-    footer
-  }) {
+  renderFooter(_ref10) {
+    let {
+      footer
+    } = _ref10;
     const {
       baseClassName
     } = this.props;
-
     if (!footer) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("footer", {
       className: `${baseClassName}__footer`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__footer-inner`
     }, footer));
   }
-
   render() {
     const {
       baseClassName,
@@ -455,15 +420,12 @@ export default class Layout extends Component {
     } = this.props;
     let width = widthProp;
     let headerPositionFixed = headerFixed;
-
     if (type === 'simplified') {
       headerPositionFixed = false;
-
       if (!width) {
         width = 'sm';
       }
     }
-
     const isSidebarClosed = this.getSidebarClosed();
     return /*#__PURE__*/React.createElement("div", _extends({
       className: classNames(baseClassName, {
@@ -498,7 +460,6 @@ export default class Layout extends Component {
       footer
     })))));
   }
-
 }
 Layout.propTypes = propTypes;
 Layout.defaultProps = defaultProps;

package/esm/components/Layout/index.js

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