@plesk/ui-library 3.31.0 → 3.31.2

package/cjs/components/Popover/Popover.js

@@ -1,51 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
-
 var _constants = require("../../constants");
-
 var _Popper = _interopRequireDefault(require("../Popper"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Heading = _interopRequireDefault(require("../Heading"));
-
 var _AutoClosable = _interopRequireDefault(require("../AutoClosable"));
-
 var _Translate = require("../Translate");
-
 var _utils = require("../utils");
-
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
-
 var _FocusTrap = _interopRequireDefault(require("../FocusTrap"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 const PLACEMENT_MAP = {
   'top-left': 'top-end',
   'top-right': 'top-start',
@@ -57,20 +38,17 @@ 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 _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     (0, _defineProperty2.default)(this, "state", {
       show: this.props.defaultVisible,
       arrowInHeader: false
@@ -85,11 +63,9 @@ class Popover extends _react.Component {
         show,
         arrowInHeader
       } = this.state;
-
       if (!show || !this.popperData) {
         return;
       }
-
       const {
         actualPlacement,
         arrowStyle
@@ -101,11 +77,9 @@ class Popover extends _react.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
@@ -125,11 +99,9 @@ class Popover extends _react.Component {
       const {
         canCloseOnOutsideClick
       } = this.props;
-
       if (show && !canCloseOnOutsideClick) {
         return;
       }
-
       this.targetRef.current = e.currentTarget;
       this.setState(prevState => ({
         show: !prevState.show
@@ -139,18 +111,15 @@ class Popover extends _react.Component {
       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 {
@@ -158,7 +127,6 @@ class Popover extends _react.Component {
           show: false
         });
       }
-
       if (isNeedFocus) {
         this.prevFocusElement.focus();
       }
@@ -175,21 +143,17 @@ class Popover extends _react.Component {
       const {
         targetRef
       } = this.props;
-
       if (targetRef || this.targetRef.current) {
         return [targetRef, this.targetRef];
       }
-
       return [(0, _reactDom.findDOMNode)(this)];
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     return {
       show: isControlled(props) ? props.visible : state.show
     };
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       canCloseOnEscapePress,
@@ -198,23 +162,18 @@ class Popover extends _react.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) {
@@ -222,7 +181,6 @@ class Popover extends _react.Component {
       }
     }
   }
-
   render() {
     const {
       baseClassName,
@@ -249,10 +207,8 @@ class Popover extends _react.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') {
@@ -263,7 +219,6 @@ class Popover extends _react.Component {
         behavior = ['left', 'right', 'top', 'bottom'];
       }
     }
-
     const close = /*#__PURE__*/_react.default.createElement(_Button.default, {
       className: (0, _classnames.default)(`${baseClassName}__close`, title && `${baseClassName}__close--heading`),
       onClick: this.handleClose,
@@ -273,35 +228,34 @@ class Popover extends _react.Component {
         size: title ? 16 : 12
       }
     });
-
     const heading = title && /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
       onResize: this.handleHeaderResize,
       bounds: true
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/_react.default.createElement("div", {
-      ref: measureRef,
-      className: `${baseClassName}__heading`
-    }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
-      level: "5",
-      className: `${baseClassName}__title`
-    }, title) : title, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__extra`
-    }, extra, close)));
-
+    }, _ref => {
+      let {
+        measureRef
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: measureRef,
+        className: `${baseClassName}__heading`
+      }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
+        level: "5",
+        className: `${baseClassName}__title`
+      }, title) : title, /*#__PURE__*/_react.default.createElement("div", {
+        className: `${baseClassName}__extra`
+      }, extra, close));
+    });
     const trigger = isControlled(this.props) ? target : /*#__PURE__*/(0, _react.cloneElement)(target, {
       className: (0, _classnames.default)(target.props.className, `${baseClassName}__target`),
       onClick: (0, _utils.wrapFunction)(target.props.onClick, this.handleTargetClick)
     });
     const popperPlacement = PLACEMENT_MAP[placement] || placement;
     let wrapperStyle;
-
     if (height) {
       wrapperStyle = {
         height: normalize(height)
       };
     }
-
     const content = /*#__PURE__*/_react.default.createElement(_FocusTrap.default, {
       ref: this.contentRef,
       onKeyUp: canCloseOnEscapePress && show ? this.hotkeyHandler : null,
@@ -312,7 +266,6 @@ class Popover extends _react.Component {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__content-inner`
     }, children)));
-
     return /*#__PURE__*/_react.default.createElement(_Popper.default, (0, _extends2.default)({
       target: trigger,
       targetRef: targetRef ? targetRef : this.targetRef,
@@ -338,9 +291,7 @@ class Popover extends _react.Component {
       nodeRef: this.contentRef
     }, content) : content);
   }
-
 }
-
 (0, _defineProperty2.default)(Popover, "contextType", _OnDarkContext.default);
 Popover.propTypes = {
   /**
@@ -348,7 +299,6 @@ Popover.propTypes = {
    * @since 0.0.65
    */
   target: _propTypes.default.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.
@@ -357,101 +307,84 @@ Popover.propTypes = {
   targetRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(HTMLElement)
   })]),
-
   /**
    * Popover visibility. For controlled component only.
    * @since 0.0.65
    */
   visible: _propTypes.default.bool,
-
   /**
    * Popover default (on init) visibility. For uncontrolled component only.
    * @since 0.0.66
    */
   defaultVisible: _propTypes.default.bool,
-
   /**
    * Popover title. Header will only be rendered if this prop is defined.
    * @since 0.0.42
    */
   title: _propTypes.default.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.default.func,
-
   /**
    * Popover placement
    * @since 0.0.42
    */
   placement: _propTypes.default.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.default.bool,
-
   /**
    * Indicating if pressing the escape key should close the popover.
    * @since 0.0.65
    */
   canCloseOnEscapePress: _propTypes.default.bool,
-
   /**
    * Content of the Popover
    * @since 0.0.42
    */
   children: _propTypes.default.node,
-
   /**
    * Visual intent color to apply to component.
    * @since 0.0.59
    */
   intent: _propTypes.default.oneOf(['info', 'success', 'warning', 'danger']),
-
   /**
    * Undo predefined max-width.
    * @since 2.4.0
    */
   wide: _propTypes.default.bool,
-
   /**
    * Define the popover width.
    * @since 3.2.0
    */
   width: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * Define the popover height.
    * @since 3.3.0
    */
   height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
   /**
    * A slot for buttons or links in the header.
    * @since 3.16.0
    */
   extra: _propTypes.default.node,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * @ignore
    */
   baseClassName: _propTypes.default.string,
-
   /**
    * Boundaries element for preventOverflow property.
    * @since 1.12.4
    */
   boundariesElement: _propTypes.default.oneOfType([_propTypes.default.oneOf(['scrollParent', 'window', 'viewport']), _propTypes.default.instanceOf(HTMLElement)]),
-
   /**
    * @ignore
    */

package/cjs/components/Popover/Popover.stories.js

@@ -1,25 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ThreeButtons = exports.Basic = exports.Autofocus = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Link = _interopRequireDefault(require("../Link"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Paragraph = _interopRequireDefault(require("../Paragraph"));
-
 var _Popover = _interopRequireDefault(require("./Popover"));
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-const Basic = args => /*#__PURE__*/_react.default.createElement(_Popover.default, args);
 
+const Basic = args => /*#__PURE__*/_react.default.createElement(_Popover.default, args);
 exports.Basic = Basic;
 Basic.args = {
   target: /*#__PURE__*/_react.default.createElement(_Link.default, {
@@ -27,11 +20,10 @@ Basic.args = {
   }, 'Trigger'),
   children: 'Content'
 };
-
 const ThreeButtons = args => /*#__PURE__*/_react.default.createElement(Basic, args);
-
 exports.ThreeButtons = ThreeButtons;
-ThreeButtons.args = { ...Basic.args,
+ThreeButtons.args = {
+  ...Basic.args,
   children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Paragraph.default, null, 'Enim ea occaecat dolor veniam.'), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "data-id": "button-1"
   }, 'Button 1'), /*#__PURE__*/_react.default.createElement(_Paragraph.default, null, 'Incididunt ipsum nulla officia adipisicing voluptate enim reprehenderit.'), /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -40,11 +32,10 @@ ThreeButtons.args = { ...Basic.args,
     "data-id": "button-3"
   }, 'Button 3'), /*#__PURE__*/_react.default.createElement(_Paragraph.default, null, 'Cillum sunt nisi aute amet elit ut sit dolor in aliqua minim.'))
 };
-
 const Autofocus = args => /*#__PURE__*/_react.default.createElement(Basic, args);
-
 exports.Autofocus = Autofocus;
-Autofocus.args = { ...Basic.args,
+Autofocus.args = {
+  ...Basic.args,
   children: /*#__PURE__*/_react.default.createElement("input", {
     autoFocus: true
   })

package/cjs/components/Popover/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _Popover.default;
   }
 });
-
 var _Popover = _interopRequireDefault(require("./Popover"));

package/cjs/components/Popper/Popper.js

@@ -1,34 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _constants = require("../../constants");
-
 var _popper = _interopRequireDefault(require("popper.js"));
-
 var _Layer = _interopRequireDefault(require("../Layer"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
@@ -37,8 +24,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * `Popper` component.
  */
 class Popper extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     (0, _defineProperty2.default)(this, "state", {
       popperStyle: null,
       arrowStyle: null,
@@ -50,7 +37,6 @@ class Popper extends _react.Component {
       if (!state) {
         return;
       }
-
       const {
         onUpdate
       } = this.props;
@@ -67,17 +53,14 @@ class Popper extends _react.Component {
         arrowStyle: state.arrowStyles
       };
       this.setState(data);
-
       if (onUpdate) {
         onUpdate(data);
       }
     });
   }
-
   componentDidMount() {
     this.updatePopper(this.props);
   }
-
   componentDidUpdate(prevProps) {
     const {
       show,
@@ -88,37 +71,33 @@ class Popper extends _react.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: {
@@ -153,16 +132,13 @@ class Popper extends _react.Component {
       }
     };
     let reference;
-
     if (targetRef && targetRef.current) {
       reference = targetRef.current;
     } else {
       reference = (0, _reactDom.findDOMNode)(this);
     }
-
     this.popper = new _popper.default(reference, this.contentRef.current, popperOpts);
   }
-
   render() {
     const {
       baseClassName,
@@ -197,7 +173,8 @@ class Popper extends _react.Component {
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       ref: this.contentRef,
       className: (0, _classnames.default)(baseClassName, className, `${baseClassName}--placement-${actualPlacement}`),
-      style: { ...style,
+      style: {
+        ...style,
         ...(popperStyle ? popperStyle : {
           position: 'fixed',
           opacity: 0
@@ -205,77 +182,62 @@ class Popper extends _react.Component {
       }
     }, props), children, arrowElement)) : null);
   }
-
 }
-
 Popper.propTypes = {
   /**
    * Whether show popper content.
    */
   show: _propTypes.default.bool,
-
   /**
    * Content of the `Popper`.
    */
   children: _propTypes.default.node,
-
   /**
    * Target for popper.
    */
   target: _propTypes.default.any.isRequired,
-
   /**
    * A React reference to the DOM element that needs for calculating the position of the popup.
    */
   targetRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(HTMLElement)
   })]),
-
   /**
    * Arrow element of popper
    */
   arrow: _propTypes.default.element,
-
   /**
    * Placement for popper.
    */
   placement: _propTypes.default.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.default.oneOfType([_propTypes.default.oneOf(['flip', 'clockwise', 'counterclockwise']), _propTypes.default.arrayOf(_propTypes.default.string)]),
-
   /**
    * Shift your popper on both axis.
    */
   offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
   /**
    * Update callback function
    */
   onUpdate: _propTypes.default.func,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * @ignore
    */
   baseClassName: _propTypes.default.string,
-
   /**
    * zIndex value.
    */
   zIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
   /**
    * Boundaries element for preventOverflow property.
    */
   boundariesElement: _propTypes.default.oneOfType([_propTypes.default.oneOf(['scrollParent', 'window', 'viewport']), _propTypes.default.instanceOf(HTMLElement)]),
-
   /**
    * @ignore
    */

package/cjs/components/Popper/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _Popper.default;
   }
 });
-
 var _Popper = _interopRequireDefault(require("./Popper"));