@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Skeleton/SkeletonTabs.stories.js

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

package/esm/components/Skeleton/SkeletonText.js

@@ -1,30 +1,33 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import classNames from 'classnames';
 import Skeleton from './Skeleton';
 import { CLS_PREFIX } from '../../constants';
-
 /**
  * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
  * @since 3.28.0
  */
-const SkeletonText = ({
-  lines = 3,
-  component: Tag = 'span',
-  className,
-  baseClassName = `${CLS_PREFIX}skeleton-text`,
-  lineProps = {},
-  ...props
-}) => /*#__PURE__*/React.createElement(Tag, _extends({
-  className: classNames(baseClassName, className)
-}, props), Array.from({
-  length: lines
-}).map((_, key) => /*#__PURE__*/React.createElement(Skeleton // eslint-disable-next-line react/no-array-index-key
-, _extends({
-  key: key
-}, lineProps, {
-  className: classNames(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
-}))));
-
+const SkeletonText = _ref => {
+  let {
+    lines = 3,
+    component: Tag = 'span',
+    className,
+    baseClassName = `${CLS_PREFIX}skeleton-text`,
+    lineProps = {},
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    className: classNames(baseClassName, className)
+  }, props), Array.from({
+    length: lines
+  }).map((_, key) => /*#__PURE__*/React.createElement(Skeleton
+  // eslint-disable-next-line react/no-array-index-key
+  , _extends({
+    key: key
+  }, lineProps, {
+    className: classNames(`${baseClassName}__line`, lineProps?.className)
+  }))));
+};
 export default SkeletonText;

package/esm/components/Skeleton/SkeletonText.stories.js

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

package/esm/components/Skeleton/index.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
 export { default } from './Skeleton';
 export { default as SkeletonText } from './SkeletonText';
 export { default as SkeletonTabs } from './SkeletonTabs';

package/esm/components/Spinner/Spinner.js

@@ -1,29 +1,31 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-
 /**
  * `Spinner` component.
  */
-const Spinner = ({
-  baseClassName = `${CLS_PREFIX}spinner`,
-  className,
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  className: classNames(baseClassName, className)
-}, props, {
-  viewBox: "0 0 48 48",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React.createElement("circle", {
-  className: `${baseClassName}__path`,
-  fill: "none",
-  strokeWidth: "6",
-  strokeLinecap: "round",
-  cx: "24",
-  cy: "24",
-  r: "21"
-}));
-
+const Spinner = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}spinner`,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    className: classNames(baseClassName, className)
+  }, props, {
+    viewBox: "0 0 48 48",
+    xmlns: "http://www.w3.org/2000/svg"
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: `${baseClassName}__path`,
+    fill: "none",
+    strokeWidth: "6",
+    strokeLinecap: "round",
+    cx: "24",
+    cy: "24",
+    r: "21"
+  }));
+};
 export default Spinner;

package/esm/components/Spinner/index.js

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

package/esm/components/SplitButton/SplitButton.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -12,48 +13,42 @@ const focusStrategy = {
   getNext(container, element) {
     const elements = container.children;
     const index = Array.prototype.indexOf.call(elements, element);
-
     if (index === 0) {
       return elements[1].firstElementChild;
     }
-
     return undefined;
   },
-
   getPrev(container, element) {
     if (element === container.children[1].querySelector('button')) {
       return container.children[0];
     }
-
     return undefined;
   },
-
   getFirst(container) {
     return container.children[0];
   },
-
   getLast(container) {
     return container.children[1].querySelector('button');
   }
-
 };
+
 /**
  * `Split Button` is a combination of a standard [Button](#!/Button) with a [Dropdown](#!/Dropdown) menu.
  * It is used for grouping several related actions when one of the actions should be accessible immediately
  * because it is used more often than others.
  * @since 0.0.40
  */
-
-const SplitButton = ({
-  baseClassName,
-  className,
-  menu,
-  children,
-  opened,
-  onClick,
-  onKeyDown,
-  ...props
-}) => {
+const SplitButton = _ref => {
+  let {
+    baseClassName,
+    className,
+    menu,
+    children,
+    opened,
+    onClick,
+    onKeyDown,
+    ...props
+  } = _ref;
   const rootRef = useRef();
   const {
     focusNext,
@@ -61,13 +56,11 @@ const SplitButton = ({
   } = createFocusManager(rootRef, undefined, focusStrategy);
   const handleKeyDown = wrapFunction(onKeyDown, e => {
     e.stopPropagation();
-
     switch (e.key) {
       case 'ArrowLeft':
         e.preventDefault();
         focusPrev();
         break;
-
       case 'ArrowRight':
         e.preventDefault();
         focusNext();
@@ -90,39 +83,32 @@ const SplitButton = ({
     tabIndex: -1
   })));
 };
-
 SplitButton.propTypes = {
   /**
    * @since 0.0.47
    */
   menu: PropTypes.any,
-
   /**
    * @since 0.0.47
    */
   opened: PropTypes.bool,
-
   /**
    * Content of the button group
    * @since 0.0.40
    */
   children: PropTypes.node,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   baseClassName: PropTypes.string,
-
   /**
    * @ignore
    */
   onClick: PropTypes.func,
-
   /**
    * @ignore
    */

package/esm/components/SplitButton/index.js

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

package/esm/components/Spot/Spot.js

@@ -1,26 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { useState, useEffect, useRef } from 'react';
 import { scrollIntoView } from '../utils';
 import OnDarkContext from '../OnDarkContext';
 import Layer from '../Layer';
 import SpotPulsar from './SpotPulsar';
 import SpotPopup from './SpotPopup';
-
 const isEqual = (a, b) => a.top === b.top && a.left === b.left && a.right === b.right && a.bottom === b.bottom && a.width === b.width && a.height === b.height;
+
 /**
  * The component can be used to attract the user's attention to a specific element on the page.
  * @since 3.0.1
  */
-
-
-const Spot = ({
-  selector,
-  popup,
-  meta,
-  placement,
-  ...props
-}) => {
+const Spot = _ref => {
+  let {
+    selector,
+    popup,
+    meta,
+    placement,
+    ...props
+  } = _ref;
   const [rect, setRect] = useState();
   const pulsarRef = useRef(null);
   useEffect(() => {
@@ -29,13 +29,10 @@ const Spot = ({
     let isMoving = false;
     let needUpdate = false;
     let needScrollIntoView = true;
-
     const check = () => {
       const node = document.querySelector(selector);
-
       if (node) {
         const nextRect = node.getBoundingClientRect();
-
         if (!lastRect) {
           isMoving = true;
           lastRect = nextRect;
@@ -47,11 +44,9 @@ const Spot = ({
           isMoving = false;
           needUpdate = true;
         }
-
         if (needUpdate) {
           setRect(nextRect);
           needUpdate = false;
-
           if (needScrollIntoView) {
             needScrollIntoView = false;
             scrollIntoView(node, {
@@ -63,18 +58,15 @@ const Spot = ({
         setRect(undefined);
       }
     };
-
     check();
     const retryId = window.setInterval(check, 125);
     return () => {
       window.clearInterval(retryId);
     };
   }, [selector]);
-
   if (!rect) {
     return null;
   }
-
   const pulsar = /*#__PURE__*/React.createElement(SpotPulsar, _extends({
     rect: rect,
     placement: placement
@@ -89,5 +81,4 @@ const Spot = ({
     meta: meta
   }, popup)) : /*#__PURE__*/React.createElement("div", null, pulsar)));
 };
-
 export default Spot;

package/esm/components/Spot/SpotPopup.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import classNames from 'classnames';
 import React, { useEffect, useState, useRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
@@ -9,42 +10,43 @@ import Translate from '../Translate';
 import Focuser from '../Overlay/Focuser';
 import { safeInvoke } from '../utils';
 
-const SpotPopup = ({
-  baseClassName = `${CLS_PREFIX}spot-popup`,
-  className,
-  pulsar,
-  pulsarRef,
-  title,
-  placement,
-  image,
-  children,
-  buttons,
-  meta,
-  onClose,
-  size,
-  locale,
-  ...props
-}) => {
-  const footerRef = useRef(null); // rerendering is necessary to fix a popover arrow
+// TODO: Use SpotSpotProps['popup'] instead of copypaste
+
+const SpotPopup = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}spot-popup`,
+    className,
+    pulsar,
+    pulsarRef,
+    title,
+    placement,
+    image,
+    children,
+    buttons,
+    meta,
+    onClose,
+    size,
+    locale,
+    ...props
+  } = _ref;
+  const footerRef = useRef(null);
 
+  // rerendering is necessary to fix a popover arrow
   const [, setReady] = useState(false);
   useEffect(() => {
     setReady(true);
-
     if (footerRef.current) {
       setTimeout(() => {
         new Focuser().focusLastDescendant(footerRef.current);
       });
     }
   }, []);
-
   if (typeof image === 'string') {
     image = /*#__PURE__*/React.createElement("img", {
       src: image,
       alt: ""
     });
   }
-
   return /*#__PURE__*/React.createElement(Popover, _extends({
     className: classNames(baseClassName, className, {
       [`${baseClassName}--${size}`]: size
@@ -80,5 +82,4 @@ const SpotPopup = ({
     className: `${baseClassName}__actions`
   }, buttons)));
 };
-
 export default SpotPopup;

package/esm/components/Spot/SpotPulsar.js

@@ -1,28 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
 const OFFSET = 23;
-
 const calculate = (rect, placement) => {
   const placementTop = rect.height / 2;
   let placementLeft = 0;
-
   switch (placement) {
     case 'left':
       placementLeft = Math.min(OFFSET, rect.height / 2);
       break;
-
     case 'right':
       placementLeft = rect.width - Math.min(OFFSET, rect.height / 2);
       break;
-
     case 'center':
       placementLeft = rect.width / 2;
       break;
   }
-
   const top = rect.top + placementTop - OFFSET + window.pageYOffset;
   const left = rect.left + placementLeft - OFFSET + window.pageXOffset;
   return {
@@ -30,14 +26,14 @@ const calculate = (rect, placement) => {
     left
   };
 };
-
-const SpotPulsar = /*#__PURE__*/forwardRef(function SpotPulsar({
-  baseClassName = `${CLS_PREFIX}spot-pulsar`,
-  className,
-  rect,
-  placement = 'center',
-  ...props
-}, ref) {
+const SpotPulsar = /*#__PURE__*/forwardRef(function SpotPulsar(_ref, ref) {
+  let {
+    baseClassName = `${CLS_PREFIX}spot-pulsar`,
+    className,
+    rect,
+    placement = 'center',
+    ...props
+  } = _ref;
   const position = calculate(rect, placement);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(baseClassName, className),

package/esm/components/Spot/index.js

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

package/esm/components/Squeezer/Squeezer.js

@@ -1,51 +1,41 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { Component, createRef } from 'react';
 import Measure from 'react-measure';
 import { safeInvoke } from '../utils';
-
 class Squeezer extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "rootRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "measuring", false);
-
     _defineProperty(this, "measurements", []);
-
     _defineProperty(this, "minWidth", 0);
-
     _defineProperty(this, "handleResize", () => {
       this.measure();
     });
   }
-
   addMeasurement(width) {
     this.measurements.push(width);
-
     if (this.measurements.length > 2) {
       this.measurements.shift();
     }
   }
-
-  measure(force = false) {
+  measure() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     // eslint-disable-next-line react/prop-types
     const {
       compact,
       uncompact
     } = this.props;
-
     if (this.measuring && !force) {
       return;
     }
-
     this.measuring = true;
     const root = this.rootRef.current;
     const width = Math.ceil(root.getBoundingClientRect().width);
     const scrollWidth = Math.ceil(root.scrollWidth);
     let checkForce = false;
-
     if (width < scrollWidth) {
       if (compact()) {
         this.minWidth = scrollWidth;
@@ -57,12 +47,11 @@ class Squeezer extends Component {
         checkForce = true;
       }
     }
-
     this.addMeasurement(width);
     this.check(checkForce);
   }
-
-  check(force = false) {
+  check() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     if (!force && this.measurements.length === 2 && this.measurements[0] === this.measurements[1]) {
       this.measuring = false;
     } else {
@@ -71,7 +60,6 @@ class Squeezer extends Component {
       });
     }
   }
-
   render() {
     // eslint-disable-next-line react/prop-types
     const {
@@ -90,13 +78,14 @@ class Squeezer extends Component {
           });
         }
       }
-    }, ({
-      measureRef
-    }) => children({
-      ref: measureRef
-    }));
+    }, _ref => {
+      let {
+        measureRef
+      } = _ref;
+      return children({
+        ref: measureRef
+      });
+    });
   }
-
 }
-
 export default Squeezer;

package/esm/components/Squeezer/index.js

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

package/esm/components/Status/Status.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
@@ -7,42 +8,38 @@ import { intentIconMap } from '../intentIconMap';
 import Action from '../Action';
 import Icon from '../Icon';
 import OnDarkContext from '../OnDarkContext';
-
 const toIcon = (icon, intent) => {
   if (icon === false) {
     return undefined;
   }
-
   if ((icon === true || !icon) && intent) {
     icon = intentIconMap[intent];
   }
-
   return Icon.create(icon, intent ? {
     name: intentIconMap[intent]
   } : undefined);
 };
+
 /**
  * `Status` component is used for indicating state of an object or the system.
  * @since 0.0.68
  */
-
-
-const Status = ({
-  baseClassName = `${CLS_PREFIX}status`,
-  className,
-  children,
-  icon,
-  intent,
-  progress,
-  compact,
-  flip,
-  outerProps = {},
-  ...props
-}) => {
+const Status = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}status`,
+    className,
+    children,
+    icon,
+    intent,
+    progress,
+    compact,
+    flip,
+    outerProps = {},
+    ...props
+  } = _ref;
   if (intent === 'muted') {
     intent = 'inactive';
   }
-
   return /*#__PURE__*/React.createElement(Action, _extends({
     component: "span",
     icon: compact ? undefined : toIcon(icon, intent),
@@ -50,7 +47,8 @@ const Status = ({
       [`${baseClassName}--${intent}`]: intent && !progress,
       [`${baseClassName}--on-dark`]: useContext(OnDarkContext)
     }, className),
-    outerProps: { ...outerProps,
+    outerProps: {
+      ...outerProps,
       className: classNames({
         [`${baseClassName}--compact`]: compact,
         [`${baseClassName}--flip`]: flip
@@ -59,5 +57,4 @@ const Status = ({
     progress: progress
   }, props), children);
 };
-
 export default Status;

package/esm/components/Status/Status.stories.js

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

package/esm/components/Status/index.js

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