@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/InputNumber/InputNumber.js

@@ -1,70 +1,62 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import classNames from 'classnames';
 import React, { useState, useRef, useLayoutEffect } from 'react';
 import { safeInvoke } from '../utils';
 import Input from '../Input';
 import Button from '../Button';
 import { CLS_PREFIX } from '../../constants';
-
-const fitToMinMax = (value, min = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1), max = Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1) => {
+const fitToMinMax = function (value) {
+  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
+  let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1;
   if (max !== undefined && value > max) {
     return max;
   }
-
   if (min !== undefined && value < min) {
     return min;
   }
-
   return value;
 };
-
 const isLikeNumber = value => {
   if (String(value).trim() === '') {
     return false;
   }
-
   const number = parseFloat(String(value));
   return typeof number === 'number' && !isNaN(number);
 };
-
 const toNumber = value => {
   if (typeof value === 'string') {
     const number = parseFloat(value);
-
     if (!isLikeNumber(number)) {
       return 0;
     }
-
     return number;
   }
-
   return value;
 };
-
 const isMinDisabled = (value, min) => min !== undefined && value !== '' && value <= min;
-
 const isMaxDisabled = (value, max) => max !== undefined && value !== '' && value >= max;
+
 /**
  * `InputNumber` component is used for entering integer numbers.
  * @since 2.2.0
  */
-
-
-const InputNumber = ({
-  baseClassName = `${CLS_PREFIX}input-number`,
-  className,
-  defaultValue,
-  value: propValue,
-  disabled,
-  onChange,
-  min,
-  max,
-  step = 1,
-  decrementIcon = 'minus',
-  incrementIcon = 'plus',
-  ...props
-}) => {
+const InputNumber = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}input-number`,
+    className,
+    defaultValue,
+    value: propValue,
+    disabled,
+    onChange,
+    min,
+    max,
+    step = 1,
+    decrementIcon = 'minus',
+    incrementIcon = 'plus',
+    ...props
+  } = _ref;
   const inputRef = useRef(null);
   const isControlled = propValue !== undefined;
   const safeDefaultValue = typeof defaultValue === 'number' ? defaultValue : '';
@@ -76,83 +68,65 @@ const InputNumber = ({
       setValue(safePropValue);
     }
   }, [isControlled, safePropValue]);
-
   const fireChange = nextValue => {
     if (firedRef.current !== nextValue) {
       firedRef.current = nextValue;
       safeInvoke(onChange, nextValue);
     }
   };
-
   const createIncDec = diff => () => {
     const nextValue = fitToMinMax(toNumber(value) + diff, min, max);
-
     if (!isControlled || nextValue === safePropValue) {
       setValue(nextValue);
     }
-
     fireChange(nextValue);
   };
-
   const handleInc = createIncDec(+step);
   const handleDec = createIncDec(-step);
-
   const handleChange = e => {
     const currValue = e.target.value;
     let nextValue = currValue;
-
     if (String(currValue).trim() === '') {
       nextValue = '';
     }
-
     setValue(nextValue);
   };
-
   const handleKeyDown = e => {
     switch (e.key) {
       case 'ArrowUp':
         handleInc();
         break;
-
       case 'ArrowDown':
         handleDec();
         break;
-
       case 'Enter':
         handleBlur();
         break;
     }
   };
-
   const handleBlur = () => {
     let nextValue;
-
     if (isLikeNumber(value)) {
       nextValue = fitToMinMax(toNumber(value), min, max);
       fireChange(nextValue);
     } else {
       nextValue = '';
     }
-
     if (isControlled) {
       setValue(safePropValue);
     } else {
       setValue(nextValue);
     }
   };
-
   const handleMouseDown = e => {
     e.preventDefault();
-
     if (e.currentTarget.hasAttribute('disabled')) {
       return;
     }
-
     if (inputRef.current && document.activeElement !== inputRef.current) {
       inputRef.current.focus();
     }
   };
-
   const minDisabled = disabled || isMinDisabled(value, min);
   const maxDisabled = disabled || isMaxDisabled(value, max);
   return /*#__PURE__*/React.createElement(Input, _extends({
@@ -184,5 +158,4 @@ const InputNumber = ({
     })
   }));
 };
-
 export default InputNumber;

package/esm/components/InputNumber/index.js

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

package/esm/components/Item/Item.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import React, { Component, cloneElement, isValidElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -11,24 +12,22 @@ import Tooltip from '../Tooltip';
 import { createProxyProps, wrapFunction } from '../utils';
 const VIEW_SIMPLE = 'simple';
 const VIEW_CARD = 'card';
+
 /**
  * `Item` component is element of [ItemList](#!/ItemList) and it is presented as
  * a combination of icon, text title and content (similar to [Media](#!/Media)).
  * @since 0.0.48
  */
-
 class Item extends Component {
   renderTitle(title) {
     if (!title) {
       return null;
     }
-
     const {
       baseClassName,
       view
     } = this.props;
     let wrappable = false;
-
     if (typeof title === 'string') {
       title = /*#__PURE__*/React.createElement("span", null, title);
       wrappable = true;
@@ -36,39 +35,32 @@ class Item extends Component {
       title = /*#__PURE__*/React.createElement("a", title);
       wrappable = true;
     }
-
     if (wrappable && view === 'card') {
       title = /*#__PURE__*/React.createElement(Heading, {
         level: 3
       }, title);
     }
-
     if ( /*#__PURE__*/isValidElement(title)) {
       title = /*#__PURE__*/cloneElement(title, {
         className: classNames(`${baseClassName}__title`, title.props.className)
       });
     }
-
     return title;
   }
-
   renderIcon(icon) {
     if (!icon) {
       return null;
     }
-
     if (typeof icon === 'string') {
       return Icon.create({}, {
         size: ICON_SIZE_32,
         [NAMES.indexOf(icon) === -1 ? 'src' : 'name']: icon
       });
     }
-
     return Icon.create(icon, {
       size: ICON_SIZE_32
     });
   }
-
   render() {
     const {
       children,
@@ -86,7 +78,6 @@ class Item extends Component {
       hoverable,
       ...props
     } = this.props;
-
     if (props.onClick) {
       if (disabled) {
         props.onClick = e => e.preventDefault();
@@ -100,7 +91,6 @@ class Item extends Component {
         });
       }
     }
-
     const item = /*#__PURE__*/React.createElement(Tag, _extends({
       className: classNames(baseClassName, {
         [`${baseClassName}--card`]: view === 'card',
@@ -118,89 +108,73 @@ class Item extends Component {
     }, children) : null), footer && /*#__PURE__*/React.createElement("footer", {
       className: `${baseClassName}__footer`
     }, footer));
-
     if (tooltip) {
       return createProxyProps(props => /*#__PURE__*/React.createElement(Tooltip, {
         title: tooltip
       }, /*#__PURE__*/cloneElement(item, props)));
     }
-
     return item;
   }
-
 }
-
 Item.propTypes = {
   /**
    * Component to render as the root element. Useful when rendering a `Item` as `<a>` or `<Link>`.
    * @since 0.0.48
    */
   component: PropTypes.elementType,
-
   /**
    * View mode.
    * @since 2.1.0
    */
   view: PropTypes.oneOf([VIEW_SIMPLE, VIEW_CARD]),
-
   /**
    * Icon.
    * @since 0.0.48
    */
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Title.
    * @since 0.0.48
    */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Content for footer.
    * @since 2.1.0
    */
   footer: PropTypes.node,
-
   /**
    * Description. Renders as small grey text.
    * @since 2.1.0
    */
   description: PropTypes.node,
-
   /**
    * Content of the `Item`.
    * @since 0.0.48
    */
   children: PropTypes.node,
-
   /**
    * An unique value. It needs only in ItemList with selectable view.
    * @since 2.3.0
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * Tooltip for component.
    * @since 2.5.1
    */
   tooltip: PropTypes.node,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   baseClassName: PropTypes.string,
-
   /**
    * Whether disabled or not.
    * @since 3.15.0
    */
   disabled: PropTypes.bool,
-
   /**
    * Add hover shadow and pointer cursor.
    * @since 3.26.0

package/esm/components/Item/index.js

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

package/esm/components/ItemLink/ItemLink.js

@@ -1,22 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import classNames from 'classnames';
 import React from 'react';
 import { wrapFunction } from '../utils';
 import { CLS_PREFIX } from '../../constants';
-
 /**
  * `ItemLink` component is a part of [ItemList](#!/ItemList) and
  * is used for specifying a special action on the list (for example, adding new item).
  * @since 2.3.0
  */
-const ItemLink = ({
-  baseClassName = `${CLS_PREFIX}item-link`,
-  className,
-  children,
-  hoverable,
-  ...props
-}) => {
+const ItemLink = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}item-link`,
+    className,
+    children,
+    hoverable,
+    ...props
+  } = _ref;
   if (props.onClick) {
     props.tabIndex = props.tabIndex || 0;
     props.role = props.role || 'button';
@@ -27,12 +28,10 @@ const ItemLink = ({
       }
     });
   }
-
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(baseClassName, className)
   }, props), /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName}__content`
   }, children));
 };
-
 export default ItemLink;

package/esm/components/ItemLink/ItemLink.stories.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import ItemLink from './ItemLink';
 export const Basic = args => /*#__PURE__*/React.createElement(ItemLink, args);

package/esm/components/ItemLink/index.js

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

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;