@plesk/ui-library 3.31.0 → 3.31.1

package/esm/components/ItemList/ItemList.js

@@ -1,33 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import React, { Component, Children, cloneElement, isValidElement } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Grid from '../Grid';
 import GridCol from '../GridCol';
 import { safeInvoke } from '../utils';
-
 const getNextSelectedValue = (value, prevValue, toggleable) => {
   if (Array.isArray(prevValue)) {
     if (prevValue.indexOf(value) !== -1) {
       if (toggleable) {
         return prevValue.filter(v => v !== value);
       }
-
       return prevValue;
     }
-
     return [...prevValue, value];
   }
-
   if (toggleable && prevValue === value) {
     return null;
   }
-
   return value;
 };
-
 /**
  * `ItemList` component is used for displaying list of [Items](#!/Item)
  * according to [Grid](#!/Grid) principle.
@@ -35,8 +30,8 @@ const getNextSelectedValue = (value, prevValue, toggleable) => {
  */
 class ItemList extends Component {
   constructor(_props) {
-    super(_props); // eslint-disable-next-line react/state-in-constructor
-
+    super(_props);
+    // eslint-disable-next-line react/state-in-constructor
     _defineProperty(this, "createItemProps", item => {
       const {
         baseClassName,
@@ -47,19 +42,16 @@ class ItemList extends Component {
       } = this.props;
       const classNameList = [`${baseClassName}__item`];
       const props = {};
-
       if (selectable && item.props.value !== undefined) {
         const {
           value
         } = this.state;
         const itemValue = item.props.value;
-
         if (Array.isArray(value) && value.indexOf(itemValue) !== -1) {
           classNameList.push(`${baseClassName}__item--selected`);
         } else if (value === itemValue) {
           classNameList.push(`${baseClassName}__item--selected`);
         }
-
         props.onClick = e => {
           safeInvoke(item.props.onClick, e);
           const nextValue = getNextSelectedValue(itemValue, value, selectable === 'toggleable' || selectable === 'multiple');
@@ -68,45 +60,40 @@ class ItemList extends Component {
           });
           safeInvoke(onSelect, nextValue);
         };
-      } // Extends hoverable behavior from the ItemList in case if its child doesn't have its own
-
+      }
 
+      // Extends hoverable behavior from the ItemList in case if its child doesn't have its own
       if (item.props.hoverable === undefined) {
         props.hoverable = hoverable && this.canManageHoverableState();
       }
-
       if (reorderable) {
         classNameList.push(`${baseClassName}__item--reorderable`);
       }
-
       classNameList.push(item.props.className);
       props.className = classNames(...classNameList);
       return props;
     });
-
     this.state = {
       ReorderableGrid: null,
       ReorderableGridCol: null,
       value: typeof _props.defaultValue === 'undefined' ? null : _props.defaultValue
     };
   }
-
-  static getDerivedStateFromProps({
-    selectable,
-    value: propValue
-  }, state) {
+  static getDerivedStateFromProps(_ref, state) {
+    let {
+      selectable,
+      value: propValue
+    } = _ref;
     if (selectable) {
       const multiple = selectable === 'multiple';
       const safeValue = multiple ? [] : null;
       const value = typeof propValue === 'undefined' ? state.value : propValue;
-
       if (multiple && !Array.isArray(value)) {
         if (value) {
           return {
             value: [value]
           };
         }
-
         return {
           value: safeValue
         };
@@ -116,33 +103,27 @@ class ItemList extends Component {
             value: value[0]
           };
         }
-
         return {
           value: safeValue
         };
       }
-
       return {
         value
       };
     }
-
     return null;
   }
-
   componentDidMount() {
     const {
       reorderable
     } = this.props;
-
     if (reorderable) {
       // @ts-ignore
-      import(
-      /* webpackChunkName: "react-sortable-hoc" */
-      'react-sortable-hoc').then(({
-        sortableContainer,
-        sortableElement
-      }) => {
+      import( /* webpackChunkName: "react-sortable-hoc" */'react-sortable-hoc').then(_ref2 => {
+        let {
+          sortableContainer,
+          sortableElement
+        } = _ref2;
         this.setState({
           ReorderableGrid: sortableContainer(Grid),
           ReorderableGridCol: sortableElement(GridCol)
@@ -150,23 +131,21 @@ class ItemList extends Component {
       });
     }
   }
-
-  renderNormal({
-    baseClassName,
-    children,
-    ...props
-  }) {
+  renderNormal(_ref3) {
+    let {
+      baseClassName,
+      children,
+      ...props
+    } = _ref3;
     return /*#__PURE__*/React.createElement(Grid, props, Children.map(children, child => {
       if ( /*#__PURE__*/isValidElement(child)) {
         return /*#__PURE__*/React.createElement(GridCol, {
           className: classNames(`${baseClassName}__col`)
         }, /*#__PURE__*/cloneElement(child, this.createItemProps(child)));
       }
-
       return null;
     }));
   }
-
   someChild(predicate) {
     let result = false;
     Children.forEach(this.props.children, child => {
@@ -176,11 +155,10 @@ class ItemList extends Component {
     });
     return result;
   }
+
   /**
    * There are some states where we can't manage hoverable state
    */
-
-
   canManageHoverableState() {
     const {
       reorderable,
@@ -188,38 +166,32 @@ class ItemList extends Component {
     } = this.props;
     return !reorderable && !selectable;
   }
-
   isHoverable() {
     if (!this.canManageHoverableState()) {
       return false;
     }
-
     return this.props.hoverable || this.hasHoverableCard();
   }
-
   hasViewCard() {
     return this.someChild(child => child.props && child.props.view === 'card');
   }
-
   hasHoverableCard() {
     return this.someChild(child => child.props && !!child.props.hoverable);
   }
-
-  renderReorderable({
-    baseClassName,
-    onReorderEnd,
-    children,
-    ...props
-  }) {
+  renderReorderable(_ref4) {
+    let {
+      baseClassName,
+      onReorderEnd,
+      children,
+      ...props
+    } = _ref4;
     const {
       ReorderableGrid,
       ReorderableGridCol
     } = this.state;
-
     if (!ReorderableGrid) {
       return null;
     }
-
     const helperClass = classNames({
       [`${baseClassName}__col--gap-xs`]: props.gap === 'xs',
       [`${baseClassName}__col--gap-sm`]: props.gap === 'sm',
@@ -242,11 +214,9 @@ class ItemList extends Component {
           disabled: disabled
         }, /*#__PURE__*/cloneElement(child, this.createItemProps(child)));
       }
-
       return null;
     }));
   }
-
   render() {
     const {
       className,
@@ -272,9 +242,7 @@ class ItemList extends Component {
       ...props
     }) : this.renderNormal(props));
   }
-
 }
-
 _defineProperty(ItemList, "defaultProps", {
   hoverable: true,
   stretchable: false,
@@ -282,5 +250,4 @@ _defineProperty(ItemList, "defaultProps", {
   selectable: false,
   baseClassName: `${CLS_PREFIX}item-list`
 });
-
 export default ItemList;

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';