@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Popover/Popover.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import React, { cloneElement, Component, createRef } from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -28,30 +29,23 @@ const PLACEMENT_MAP = {
   'left-bottom': 'left-start'
 };
 const ARROW_HEIGHT = 26;
-
 const isControlled = props => props.visible !== null;
-
 const normalize = value => String(Number(value)) === String(value) ? `${value}px` : value;
+
 /**
  * `Popover` component is non-modal pop-up window used for providing additional information
  * for an interface element. It also may contain Form with few fields or any other small content.
  * @since 0.0.42
  */
-
-
 class Popover extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       show: this.props.defaultVisible,
       arrowInHeader: false
     });
-
     _defineProperty(this, "contentRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "targetRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "checkArrowPosition", () => {
       const {
         title
@@ -60,11 +54,9 @@ class Popover extends Component {
         show,
         arrowInHeader
       } = this.state;
-
       if (!show || !this.popperData) {
         return;
       }
-
       const {
         actualPlacement,
         arrowStyle
@@ -76,25 +68,21 @@ class Popover extends Component {
       let newArrowInHeader = false;
       const directionBottomOrPopoverLowEnough = direction === 'bottom' || top !== null && this.headerBounds && top < this.headerBounds.height - ARROW_HEIGHT / 2;
       const rightDirection = direction !== 'top' && directionBottomOrPopoverLowEnough;
-
       if (title && this.headerBounds && rightDirection) {
         newArrowInHeader = true;
       }
-
       if (arrowInHeader !== newArrowInHeader) {
         this.setState({
           arrowInHeader: newArrowInHeader
         });
       }
     });
-
     _defineProperty(this, "hotkeyHandler", e => {
       if (!e.isDefaultPrevented() && e.key === 'Escape') {
         this.handleClose();
         e.preventDefault();
       }
     });
-
     _defineProperty(this, "handleTargetClick", e => {
       const {
         show
@@ -102,33 +90,27 @@ class Popover extends Component {
       const {
         canCloseOnOutsideClick
       } = this.props;
-
       if (show && !canCloseOnOutsideClick) {
         return;
       }
-
       this.targetRef.current = e.currentTarget;
       this.setState(prevState => ({
         show: !prevState.show
       }));
     });
-
     _defineProperty(this, "handleClose", () => {
       const {
         show
       } = this.state;
-
       if (!show) {
         return;
       }
-
       const {
         onClose,
         canCloseOnEscapePress,
         autoFocus
       } = this.props;
       const isNeedFocus = autoFocus && canCloseOnEscapePress && this.prevFocusElement && (!document.activeElement || this.contentRef.current.contains(document.activeElement));
-
       if (onClose) {
         onClose();
       } else {
@@ -136,41 +118,33 @@ class Popover extends Component {
           show: false
         });
       }
-
       if (isNeedFocus) {
         this.prevFocusElement.focus();
       }
     });
-
     _defineProperty(this, "handleHeaderResize", contentRect => {
       this.headerBounds = contentRect.bounds;
       this.checkArrowPosition();
     });
-
     _defineProperty(this, "handlePopperUpdate", popperData => {
       this.popperData = popperData;
       this.checkArrowPosition();
     });
-
     _defineProperty(this, "getIgnoreNodes", () => {
       const {
         targetRef
       } = this.props;
-
       if (targetRef || this.targetRef.current) {
         return [targetRef, this.targetRef];
       }
-
       return [findDOMNode(this)];
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     return {
       show: isControlled(props) ? props.visible : state.show
     };
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       canCloseOnEscapePress,
@@ -179,23 +153,18 @@ class Popover extends Component {
     const {
       show
     } = this.state;
-
     if (autoFocus && canCloseOnEscapePress && !prevState.show && show) {
       setTimeout(() => this.focus(), 0);
     }
   }
-
   focus() {
     if (this.contentRef.current === null || document.activeElement === null || !this.state.show) {
       return;
     }
-
     this.prevFocusElement = document.activeElement;
     const isFocusOutside = !this.contentRef.current.contains(document.activeElement);
-
     if (isFocusOutside) {
       const autofocusElement = this.contentRef.current.querySelector('[autofocus]');
-
       if (autofocusElement !== null) {
         autofocusElement.focus();
       } else if (this.contentRef.current) {
@@ -203,7 +172,6 @@ class Popover extends Component {
       }
     }
   }
-
   render() {
     const {
       baseClassName,
@@ -230,10 +198,8 @@ class Popover extends Component {
       arrowInHeader
     } = this.state;
     let behavior;
-
     if (placement !== 'auto') {
       const [direction] = placement.split('-');
-
       if (direction === 'top') {
         behavior = ['top', 'bottom', 'right', 'left'];
       } else if (direction === 'right') {
@@ -244,7 +210,6 @@ class Popover extends Component {
         behavior = ['left', 'right', 'top', 'bottom'];
       }
     }
-
     const close = /*#__PURE__*/React.createElement(Button, {
       className: classNames(`${baseClassName}__close`, title && `${baseClassName}__close--heading`),
       onClick: this.handleClose,
@@ -257,30 +222,31 @@ class Popover extends Component {
     const heading = title && /*#__PURE__*/React.createElement(Measure, {
       onResize: this.handleHeaderResize,
       bounds: true
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/React.createElement("div", {
-      ref: measureRef,
-      className: `${baseClassName}__heading`
-    }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
-      level: "5",
-      className: `${baseClassName}__title`
-    }, title) : title, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__extra`
-    }, extra, close)));
+    }, _ref => {
+      let {
+        measureRef
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: measureRef,
+        className: `${baseClassName}__heading`
+      }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
+        level: "5",
+        className: `${baseClassName}__title`
+      }, title) : title, /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__extra`
+      }, extra, close));
+    });
     const trigger = isControlled(this.props) ? target : /*#__PURE__*/cloneElement(target, {
       className: classNames(target.props.className, `${baseClassName}__target`),
       onClick: wrapFunction(target.props.onClick, this.handleTargetClick)
     });
     const popperPlacement = PLACEMENT_MAP[placement] || placement;
     let wrapperStyle;
-
     if (height) {
       wrapperStyle = {
         height: normalize(height)
       };
     }
-
     const content = /*#__PURE__*/React.createElement(FocusTrap, {
       ref: this.contentRef,
       onKeyUp: canCloseOnEscapePress && show ? this.hotkeyHandler : null,
@@ -316,18 +282,14 @@ class Popover extends Component {
       nodeRef: this.contentRef
     }, content) : content);
   }
-
 }
-
 _defineProperty(Popover, "contextType", OnDarkContext);
-
 Popover.propTypes = {
   /**
    * The reference element used to position the popover.
    * @since 0.0.65
    */
   target: PropTypes.element.isRequired,
-
   /**
    * A React reference to the DOM element that needs for calculating the position of the popup.
    * It is required only when visible or defaultVisible props are provided.
@@ -336,101 +298,84 @@ Popover.propTypes = {
   targetRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(HTMLElement)
   })]),
-
   /**
    * Popover visibility. For controlled component only.
    * @since 0.0.65
    */
   visible: PropTypes.bool,
-
   /**
    * Popover default (on init) visibility. For uncontrolled component only.
    * @since 0.0.66
    */
   defaultVisible: PropTypes.bool,
-
   /**
    * Popover title. Header will only be rendered if this prop is defined.
    * @since 0.0.42
    */
   title: PropTypes.node,
-
   /**
    * Click handler for close button. If it is not defined then default behavior (hide popover) will be used.
    * @since 0.0.42
    */
   onClose: PropTypes.func,
-
   /**
    * Popover placement
    * @since 0.0.42
    */
   placement: PropTypes.oneOf(['auto', 'top-left', 'top', 'top-right', 'right-top', 'right', 'right-bottom', 'bottom-right', 'bottom', 'bottom-left', 'left-bottom', 'left', 'left-top']),
-
   /**
    * Indicating if clicking outside the popover should close it.
    * @since 0.0.65
    */
   canCloseOnOutsideClick: PropTypes.bool,
-
   /**
    * Indicating if pressing the escape key should close the popover.
    * @since 0.0.65
    */
   canCloseOnEscapePress: PropTypes.bool,
-
   /**
    * Content of the Popover
    * @since 0.0.42
    */
   children: PropTypes.node,
-
   /**
    * Visual intent color to apply to component.
    * @since 0.0.59
    */
   intent: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
-
   /**
    * Undo predefined max-width.
    * @since 2.4.0
    */
   wide: PropTypes.bool,
-
   /**
    * Define the popover width.
    * @since 3.2.0
    */
   width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * Define the popover height.
    * @since 3.3.0
    */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * A slot for buttons or links in the header.
    * @since 3.16.0
    */
   extra: PropTypes.node,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   baseClassName: PropTypes.string,
-
   /**
    * Boundaries element for preventOverflow property.
    * @since 1.12.4
    */
   boundariesElement: PropTypes.oneOfType([PropTypes.oneOf(['scrollParent', 'window', 'viewport']), PropTypes.instanceOf(HTMLElement)]),
-
   /**
    * @ignore
    */

package/esm/components/Popover/Popover.stories.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import Link from '../Link';
 import Button from '../Button';
@@ -12,7 +13,8 @@ Basic.args = {
   children: 'Content'
 };
 export const ThreeButtons = args => /*#__PURE__*/React.createElement(Basic, args);
-ThreeButtons.args = { ...Basic.args,
+ThreeButtons.args = {
+  ...Basic.args,
   children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph, null, 'Enim ea occaecat dolor veniam.'), /*#__PURE__*/React.createElement(Button, {
     "data-id": "button-1"
   }, 'Button 1'), /*#__PURE__*/React.createElement(Paragraph, null, 'Incididunt ipsum nulla officia adipisicing voluptate enim reprehenderit.'), /*#__PURE__*/React.createElement(Button, {
@@ -22,7 +24,8 @@ ThreeButtons.args = { ...Basic.args,
   }, 'Button 3'), /*#__PURE__*/React.createElement(Paragraph, null, 'Cillum sunt nisi aute amet elit ut sit dolor in aliqua minim.'))
 };
 export const Autofocus = args => /*#__PURE__*/React.createElement(Basic, args);
-Autofocus.args = { ...Basic.args,
+Autofocus.args = {
+  ...Basic.args,
   children: /*#__PURE__*/React.createElement("input", {
     autoFocus: true
   })

package/esm/components/Popover/index.js

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

package/esm/components/Popper/Popper.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import React, { cloneElement, Component, Fragment, createRef } from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -10,29 +11,24 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import PopperJs from 'popper.js';
 import Layer from '../Layer';
+
 /**
  * `Popper` component.
  */
-
 class Popper extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       popperStyle: null,
       arrowStyle: null,
       actualPlacement: this.props.placement
     });
-
     _defineProperty(this, "popper", null);
-
     _defineProperty(this, "contentRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "extractStyles", state => {
       if (!state) {
         return;
       }
-
       const {
         onUpdate
       } = this.props;
@@ -49,17 +45,14 @@ class Popper extends Component {
         arrowStyle: state.arrowStyles
       };
       this.setState(data);
-
       if (onUpdate) {
         onUpdate(data);
       }
     });
   }
-
   componentDidMount() {
     this.updatePopper(this.props);
   }
-
   componentDidUpdate(prevProps) {
     const {
       show,
@@ -70,37 +63,33 @@ class Popper extends Component {
       arrow,
       children
     } = this.props;
-
     if (prevProps.show !== show || prevProps.boundariesElement !== boundariesElement || prevProps.placement !== placement || prevProps.offset !== offset || prevProps.behavior !== behavior || prevProps.arrow !== arrow || prevProps.children !== children) {
       setTimeout(() => {
         this.updatePopper(this.props);
       }, 0);
     }
   }
-
   componentWillUnmount() {
     if (this.popper) {
       this.popper.destroy();
     }
   }
-
-  updatePopper({
-    show,
-    boundariesElement,
-    placement,
-    offset,
-    behavior,
-    arrow,
-    targetRef
-  }) {
+  updatePopper(_ref) {
+    let {
+      show,
+      boundariesElement,
+      placement,
+      offset,
+      behavior,
+      arrow,
+      targetRef
+    } = _ref;
     if (this.popper) {
       this.popper.destroy();
     }
-
     if (!this.contentRef.current || !show) {
       return;
     }
-
     const popperOpts = {
       placement,
       modifiers: {
@@ -135,16 +124,13 @@ class Popper extends Component {
       }
     };
     let reference;
-
     if (targetRef && targetRef.current) {
       reference = targetRef.current;
     } else {
       reference = findDOMNode(this);
     }
-
     this.popper = new PopperJs(reference, this.contentRef.current, popperOpts);
   }
-
   render() {
     const {
       baseClassName,
@@ -179,7 +165,8 @@ class Popper extends Component {
     }, /*#__PURE__*/React.createElement("div", _extends({
       ref: this.contentRef,
       className: classNames(baseClassName, className, `${baseClassName}--placement-${actualPlacement}`),
-      style: { ...style,
+      style: {
+        ...style,
         ...(popperStyle ? popperStyle : {
           position: 'fixed',
           opacity: 0
@@ -187,77 +174,62 @@ class Popper extends Component {
       }
     }, props), children, arrowElement)) : null);
   }
-
 }
-
 Popper.propTypes = {
   /**
    * Whether show popper content.
    */
   show: PropTypes.bool,
-
   /**
    * Content of the `Popper`.
    */
   children: PropTypes.node,
-
   /**
    * Target for popper.
    */
   target: PropTypes.any.isRequired,
-
   /**
    * A React reference to the DOM element that needs for calculating the position of the popup.
    */
   targetRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(HTMLElement)
   })]),
-
   /**
    * Arrow element of popper
    */
   arrow: PropTypes.element,
-
   /**
    * Placement for popper.
    */
   placement: PropTypes.oneOf(['auto', 'auto-start', 'auto-end', 'auto-top', 'auto-right', 'auto-bottom', 'auto-left', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
-
   /**
    * The behavior used to change the popper's placement.
    */
   behavior: PropTypes.oneOfType([PropTypes.oneOf(['flip', 'clockwise', 'counterclockwise']), PropTypes.arrayOf(PropTypes.string)]),
-
   /**
    * Shift your popper on both axis.
    */
   offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * Update callback function
    */
   onUpdate: PropTypes.func,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   baseClassName: PropTypes.string,
-
   /**
    * zIndex value.
    */
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * Boundaries element for preventOverflow property.
    */
   boundariesElement: PropTypes.oneOfType([PropTypes.oneOf(['scrollParent', 'window', 'viewport']), PropTypes.instanceOf(HTMLElement)]),
-
   /**
    * @ignore
    */

package/esm/components/Popper/index.js

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