@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/ComboBoxDropdown/ComboBoxDropdown.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/prop-types */
+
 import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { Z_INDEX_DROPDOWN, CLS_PREFIX } from '../../constants';
 import classNames from 'classnames';
@@ -12,42 +13,38 @@ import { safeInvoke, scrollIntoView } from '../utils';
 export const findNextSafeIndex = (currIndex, diff, options) => {
   const maxIndex = options.length - 1;
   let attempt = 0;
-
   for (let i = currIndex + diff; attempt < options.length; i += diff) {
     attempt += 1;
-
     if (i > maxIndex) {
       i = 0;
     } else if (i < 0) {
       i = maxIndex;
     }
-
     if (options[i] && options[i].disabled === false) {
       return i;
     }
   }
-
   return -1;
 };
-
-const ComboBoxDropdown = ({
-  baseClassName = `${CLS_PREFIX}combobox-dropdown`,
-  className,
-  control,
-  controlRef,
-  opened,
-  disabled,
-  groups,
-  options,
-  onHighlightedIndexChange,
-  onClose,
-  value,
-  highlightedIndex,
-  onSelect,
-  noOptions,
-  emitter,
-  ...props
-}) => {
+const ComboBoxDropdown = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}combobox-dropdown`,
+    className,
+    control,
+    controlRef,
+    opened,
+    disabled,
+    groups,
+    options,
+    onHighlightedIndexChange,
+    onClose,
+    value,
+    highlightedIndex,
+    onSelect,
+    noOptions,
+    emitter,
+    ...props
+  } = _ref;
   const rootRef = useRef(null);
   const menuRef = useRef(null);
   const [minWidth, setMinWidth] = useState(0);
@@ -56,7 +53,6 @@ const ComboBoxDropdown = ({
       const {
         width
       } = rootRef.current.getBoundingClientRect();
-
       if (width !== minWidth) {
         setMinWidth(width);
       }
@@ -66,11 +62,9 @@ const ComboBoxDropdown = ({
     if (!opened) {
       return undefined;
     }
-
     const listener = () => {
       safeInvoke(onClose);
     };
-
     window.addEventListener('resize', listener, {
       once: true
     });
@@ -80,11 +74,9 @@ const ComboBoxDropdown = ({
     if (!emitter) {
       return;
     }
-
     emitter.on('focus', index => {
       if (menuRef.current) {
         const target = menuRef.current.querySelector(`[data-index="${index}"]`);
-
         if (target) {
           scrollIntoView(target, {
             behavior: 'instant',
@@ -126,30 +118,26 @@ const ComboBoxDropdown = ({
         key: `group_${group.label}`
       }), group.label));
     }
-
     group.options.forEach(option => {
       const optionIndex = options.indexOf(option);
       let onClick;
       let onMouseOver;
       let onMouseDown;
-
       if (!option.disabled) {
         onClick = e => {
           e.preventDefault();
           safeInvoke(onSelect, option.value);
         };
-
         onMouseOver = () => {
           // TODO: use throttle
           safeInvoke(onHighlightedIndexChange, optionIndex);
         };
-
         onMouseDown = e => {
           e.preventDefault();
         };
       }
-
-      const menuItemProps = { ...option.props,
+      const menuItemProps = {
+        ...option.props,
         active: value === option.value,
         className: classNames(`${baseClassName}__option`, {
           [`${baseClassName}__option--selected`]: optionIndex === highlightedIndex
@@ -170,5 +158,4 @@ const ComboBoxDropdown = ({
     className: `${baseClassName}__no-options`
   }, noOptions))));
 };
-
 export default ComboBoxDropdown;

package/esm/components/ComboBoxDropdown/index.js

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

package/esm/components/ConsoleOutput/ConsoleOutput.js

@@ -1,35 +1,28 @@
 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, { PureComponent, createRef } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-
 const scrollToBottom = el => {
   el.scrollTop = el.scrollHeight;
 };
-
 /**
  * `ConsoleOutput` component is used for showing dynamically updating data from console output.
  * @since 0.0.35
  */
 class ConsoleOutput extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "rootRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "prevScrollTop", 0);
-
     _defineProperty(this, "autoscrollCancelled", false);
-
     _defineProperty(this, "handleScroll", () => {
       const el = this.rootRef.current;
-
       if (!el) {
         return;
       }
-
       if (el.scrollTop < this.prevScrollTop) {
         this.autoscrollCancelled = true;
       } else if (el.clientHeight + el.scrollTop >= el.scrollHeight) {
@@ -37,33 +30,27 @@ class ConsoleOutput extends PureComponent {
       }
     });
   }
-
   componentDidMount() {
     const {
       autoscroll
     } = this.props;
     const el = this.rootRef.current;
-
     if (autoscroll && el) {
       scrollToBottom(el);
     }
   }
-
   componentDidUpdate() {
     const {
       autoscroll
     } = this.props;
     const el = this.rootRef.current;
-
     if (autoscroll && el) {
       this.prevScrollTop = el.scrollTop;
-
       if (!this.autoscrollCancelled) {
         scrollToBottom(el);
       }
     }
   }
-
   render() {
     const {
       baseClassName,
@@ -85,14 +72,11 @@ class ConsoleOutput extends PureComponent {
       className: `${baseClassName}__cursor`
     }) : null);
   }
-
 }
-
 _defineProperty(ConsoleOutput, "defaultProps", {
   baseClassName: `${CLS_PREFIX}console-output`,
   wide: false,
   cursor: false,
   autoscroll: true
 });
-
 export default ConsoleOutput;

package/esm/components/ConsoleOutput/index.js

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

package/esm/components/ContentLoader/ContentLoader.js

@@ -1,63 +1,58 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { Children } from 'react';
 import classNames from 'classnames';
 import Spinner from '../Spinner';
 import IconsLoader from './IconsLoader';
 import { CLS_PREFIX } from '../../constants';
-
 const getLoader = loader => {
   let loaderType;
   let loaderProps = {};
-
   if (typeof loader === 'object') {
     ({
       type: loaderType,
       ...loaderProps
     } = loader);
   }
-
   if (typeof loader === 'string') {
     loaderType = loader;
   }
-
   return {
     loaderType,
     loaderProps
   };
 };
+
 /**
  * `ContentLoader` component is used as placeholder which indicates that the system is loading requested content.
  * @since 1.1.0
  */
-
-
-const ContentLoader = ({
-  baseClassName = `${CLS_PREFIX}content-loader`,
-  className,
-  text,
-  overlay = false,
-  children,
-  backdrop = false,
-  blur = false,
-  loading = true,
-  loader = 'spinner',
-  spinner,
-  ...props
-}) => {
+const ContentLoader = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}content-loader`,
+    className,
+    text,
+    overlay = false,
+    children,
+    backdrop = false,
+    blur = false,
+    loading = true,
+    loader = 'spinner',
+    spinner,
+    ...props
+  } = _ref;
   if (!loading) {
     // workaround for FunctionComponent type which doesn't allow ReactNode as return type
     // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544
     const tmp = children;
     return tmp;
   }
-
   if (Children.toArray(children).length && overlay) {
     children = /*#__PURE__*/React.createElement("div", {
       className: classNames(`${baseClassName}__content`, blur && `${baseClassName}__content--blur`)
     }, children);
   }
-
   const {
     loaderType,
     loaderProps
@@ -75,5 +70,4 @@ const ContentLoader = ({
     className: `${baseClassName}__text`
   }, text))));
 };
-
 export default ContentLoader;

package/esm/components/ContentLoader/IconsLoader.js

@@ -1,60 +1,53 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import Icon from '../Icon';
 import { CLS_PREFIX } from '../../constants';
 const DEFAULT_ICONS = ['clock', 'emoticon-smile', 'rocket', 'sand-clock', 'sleep', 'web', 'star'];
-
 const useIconCursor = (icons, initialCursor, isSync) => {
   const targetRef = useRef(null);
   const [cursor, setCursor] = useState(initialCursor);
   useEffect(() => {
     const target = targetRef.current;
-
     const listener = () => {
       if (isSync()) {
         setCursor(c => (c + 2) % icons.length);
       }
     };
-
     if (target) {
       target.addEventListener('animationiteration', listener);
     }
-
     return () => {
       if (target) {
         target.removeEventListener('animationiteration', listener);
       }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [icons]);
   return [icons[cursor], targetRef];
 };
-
-const IconsLoader = ({
-  baseClassName = `${CLS_PREFIX}icons-loader`,
-  className,
-  icons,
-  size,
-  style,
-  ...props
-}) => {
-  var _icons;
-
+const IconsLoader = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}icons-loader`,
+    className,
+    icons,
+    size,
+    style,
+    ...props
+  } = _ref;
   const syncRef = useRef('icon1');
-
-  if (!((_icons = icons) !== null && _icons !== void 0 && _icons.length)) {
+  if (!icons?.length) {
     icons = DEFAULT_ICONS;
   } else if (icons.length === 1) {
     icons = [icons[0], icons[0]];
   }
-
   const [icon1, icon1Ref] = useIconCursor(icons, 0, () => {
     if (syncRef.current === 'icon1') {
       syncRef.current = 'icon2';
       return true;
     }
-
     return false;
   });
   const [icon2, icon2Ref] = useIconCursor(icons, 1, () => {
@@ -62,12 +55,12 @@ const IconsLoader = ({
       syncRef.current = 'icon1';
       return true;
     }
-
     return false;
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(baseClassName, className),
-    style: { ...style,
+    style: {
+      ...style,
       ['--icons-loader-size']: size ? size : undefined
     }
   }, props), /*#__PURE__*/React.createElement("div", {
@@ -82,5 +75,4 @@ const IconsLoader = ({
     size: size ? size : '64'
   })));
 };
-
 export default IconsLoader;

package/esm/components/ContentLoader/index.js

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

package/esm/components/Cuttable/Cuttable.js

@@ -1,46 +1,42 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-
 /* eslint-disable react/no-did-mount-set-state */
+
 import React, { Component, createRef } from 'react';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import Translate from '../Translate';
 import Link from '../Link';
-
 /**
  * `Cuttable` component is used for showing and hiding part of content.
  * @since 0.0.42
  */
 class Cuttable extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       collapsed: undefined,
       autofit: true
     });
-
     _defineProperty(this, "contentRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "handleToggle", () => {
-      this.setState(({
-        collapsed
-      }) => ({
-        collapsed: !collapsed,
-        autofit: false
-      }));
+      this.setState(_ref => {
+        let {
+          collapsed
+        } = _ref;
+        return {
+          collapsed: !collapsed,
+          autofit: false
+        };
+      });
     });
-
     _defineProperty(this, "handleResize", () => {
       if (!this.state.autofit) {
         return;
       }
-
       const content = this.contentRef.current;
-
       if (content && content.scrollHeight > content.clientHeight) {
         this.setState({
           collapsed: this.props.collapsed
@@ -48,7 +44,6 @@ class Cuttable extends Component {
       }
     });
   }
-
   render() {
     const {
       baseClassName,
@@ -70,15 +65,18 @@ class Cuttable extends Component {
       innerRef: el => {
         this.contentRef.current = el;
       }
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content`,
-      style: {
-        maxHeight
-      },
-      ref: measureRef
-    }, children)), this.state.collapsed !== undefined && /*#__PURE__*/React.createElement("div", {
+    }, _ref2 => {
+      let {
+        measureRef
+      } = _ref2;
+      return /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__content`,
+        style: {
+          maxHeight
+        },
+        ref: measureRef
+      }, children);
+    }), this.state.collapsed !== undefined && /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__action`
     }, /*#__PURE__*/React.createElement(Link, {
       onClick: this.handleToggle
@@ -87,9 +85,7 @@ class Cuttable extends Component {
       fallback: locale[showMoreLessKey]
     }))));
   }
-
 }
-
 _defineProperty(Cuttable, "defaultProps", {
   collapsed: true,
   maxHeight: '7rem',
@@ -99,5 +95,4 @@ _defineProperty(Cuttable, "defaultProps", {
   },
   baseClassName: `${CLS_PREFIX}cuttable`
 });
-
 export default Cuttable;

package/esm/components/Cuttable/Cuttable.stories.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import Cuttable from './Cuttable';
 import Paragraph from '../Paragraph';

package/esm/components/Cuttable/index.js

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