@plesk/ui-library 3.31.2 → 3.31.3

package/dist/plesk-ui-library.js

@@ -1290,6 +1290,7 @@ var _Tooltip = _interopRequireDefault(__webpack_require__(/*! ../Tooltip */ "./c
 var _oldIconNames = _interopRequireDefault(__webpack_require__(/*! ./old-icon-names.json */ "./components/Button/old-icon-names.json"));
 var _ResponsiveContext = _interopRequireDefault(__webpack_require__(/*! ../ResponsiveContext */ "./components/ResponsiveContext/index.tsx"));
 var _OnDarkContext = _interopRequireDefault(__webpack_require__(/*! ../OnDarkContext */ "./components/OnDarkContext/index.tsx"));
+var _ButtonContext = _interopRequireDefault(__webpack_require__(/*! ./ButtonContext */ "./components/Button/ButtonContext.tsx"));
 __webpack_require__(/*! ../../helpers/base.less */ "./helpers/base.less");
 __webpack_require__(/*! ./Button.less */ "./components/Button/Button.less");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1342,7 +1343,7 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     baseClassName,
     className,
     component: Tag,
-    size,
+    size: propsSize,
     intent,
     ghost,
     selected: selectedProp,
@@ -1363,6 +1364,8 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     return !selectedState;
   };
   const isCollapsed = (0, _react.useContext)(_ResponsiveContext.default);
+  const buttonContextConfig = (0, _react.useContext)(_ButtonContext.default);
+  const size = propsSize || buttonContextConfig.defaultProps.size;
   const componentProps = {};
   if (Tag === 'button') {
     componentProps.type = 'button';
@@ -1547,6 +1550,44 @@ exports["default"] = _default;
 
 /***/ }),
 
+/***/ "./components/Button/ButtonContext.tsx":
+/*!*********************************************!*\
+  !*** ./components/Button/ButtonContext.tsx ***!
+  \*********************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.getButtonContextValue = exports["default"] = exports.ButtonContext = void 0;
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const defaultValue = {
+  defaultProps: {
+    size: undefined
+  }
+};
+const ButtonContext = /*#__PURE__*/_react.default.createContext(defaultValue);
+exports.ButtonContext = ButtonContext;
+const getButtonContextValue = value => ({
+  ...defaultValue,
+  ...value,
+  defaultProps: {
+    ...defaultValue.defaultProps,
+    ...(value.defaultProps || {})
+  }
+});
+exports.getButtonContextValue = getButtonContextValue;
+var _default = ButtonContext;
+exports["default"] = _default;
+
+/***/ }),
+
 /***/ "./components/Button/index.js":
 /*!************************************!*\
   !*** ./components/Button/index.js ***!
@@ -5444,7 +5485,6 @@ var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
 var _Overlay = _interopRequireDefault(__webpack_require__(/*! ../Overlay */ "./components/Overlay/index.js"));
 var _ClosingConfirmation = __webpack_require__(/*! ../ClosingConfirmation */ "./components/ClosingConfirmation/index.tsx");
 var _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ "./components/Drawer/Header.js"));
-var _ScrollDirection = _interopRequireDefault(__webpack_require__(/*! ./ScrollDirection */ "./components/Drawer/ScrollDirection.js"));
 var _Form = _interopRequireDefault(__webpack_require__(/*! ../Form */ "./components/Form/index.tsx"));
 var _Heading = _interopRequireDefault(__webpack_require__(/*! ../Heading */ "./components/Heading/index.tsx"));
 var _Translate = __webpack_require__(/*! ../Translate */ "./components/Translate/index.js");
@@ -5605,7 +5645,7 @@ const defaultProps = {
 
 /**
  * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
- * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
+ * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
  * @since 0.0.65
  */
 const Drawer = _ref => {
@@ -5724,18 +5764,12 @@ const Drawer = _ref => {
       className: `${baseClassName}__title`
     }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__subtitle`
-    }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, _ref6 => {
-      let {
-        handleScroll
-      } = _ref6;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: `${baseClassName}__body`,
-        onScroll: handleScroll,
-        ref: scrollableRef
-      }, /*#__PURE__*/_react.default.createElement(_ScrollableElementFormContext.default.Provider, {
-        value: scrollableRef.current
-      }, content));
-    }), footer && /*#__PURE__*/_react.default.createElement("footer", {
+    }, subtitle)), /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__body`,
+      ref: scrollableRef
+    }, /*#__PURE__*/_react.default.createElement(_ScrollableElementFormContext.default.Provider, {
+      value: scrollableRef.current
+    }, content)), footer && /*#__PURE__*/_react.default.createElement("footer", {
       className: `${baseClassName}__footer`
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__footer-inner`
@@ -5764,6 +5798,7 @@ Object.defineProperty(exports, "__esModule", ({
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
 var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./components/Button/index.js"));
+var _ButtonContext = __webpack_require__(/*! ../Button/ButtonContext */ "./components/Button/ButtonContext.tsx");
 var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
 var _Progress = _interopRequireDefault(__webpack_require__(/*! ../Progress */ "./components/Progress/index.js"));
 var _ProgressStep = _interopRequireWildcard(__webpack_require__(/*! ../ProgressStep */ "./components/ProgressStep/index.js"));
@@ -5777,17 +5812,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
-const renderAdditionalButtons = buttons => {
-  const buttonProcessing = button => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(button) && button.type === _Button.default) {
-      return /*#__PURE__*/(0, _react.cloneElement)(button, {
-        size: 'lg'
-      });
-    }
-    return button;
-  };
-  return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
-};
+const additionalButtonsConfig = (0, _ButtonContext.getButtonContextValue)({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class DrawerProgress extends _react.Component {
   constructor() {
     super(...arguments);
@@ -5888,7 +5917,9 @@ class DrawerProgress extends _react.Component {
     }, step)))));
     const footer = hasFooter ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__footer`
-    }, renderAdditionalButtons(buttons), canCancel && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    }, /*#__PURE__*/_react.default.createElement(_ButtonContext.ButtonContext.Provider, {
+      value: additionalButtonsConfig
+    }, buttons), canCancel && /*#__PURE__*/_react.default.createElement(_Button.default, {
       onClick: this.handleCancel,
       size: "lg"
     }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -6060,61 +6091,6 @@ _defineProperty(Header, "defaultProps", {
 
 /***/ }),
 
-/***/ "./components/Drawer/ScrollDirection.js":
-/*!**********************************************!*\
-  !*** ./components/Drawer/ScrollDirection.js ***!
-  \**********************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
-exports["default"] = void 0;
-var _react = __webpack_require__(/*! react */ "react");
-var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
-class ScrollDirection extends _react.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      direction: 'up'
-    });
-    _defineProperty(this, "prevScrollTop", 0);
-    _defineProperty(this, "handleScroll", e => {
-      const {
-        scrollTop
-      } = e.target;
-      const direction = scrollTop > this.prevScrollTop ? 'down' : 'up';
-      this.prevScrollTop = scrollTop;
-      this.setState({
-        direction
-      });
-    });
-  }
-  render() {
-    const {
-      children
-    } = this.props;
-    return children({
-      direction: this.state.direction,
-      handleScroll: this.handleScroll
-    });
-  }
-}
-ScrollDirection.propTypes = {
-  children: _propTypes.default.func.isRequired
-};
-var _default = ScrollDirection;
-exports["default"] = _default;
-
-/***/ }),
-
 /***/ "./components/Drawer/index.js":
 /*!************************************!*\
   !*** ./components/Drawer/index.js ***!
@@ -7000,6 +6976,7 @@ var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "
 var _reactMeasure = _interopRequireDefault(__webpack_require__(/*! react-measure */ "../node_modules/react-measure/dist/index.esm.js"));
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
 var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./components/Button/index.js"));
+var _ButtonContext = __webpack_require__(/*! ../Button/ButtonContext */ "./components/Button/ButtonContext.tsx");
 var _FormField = _interopRequireDefault(__webpack_require__(/*! ../FormField */ "./components/FormField/index.js"));
 var _Section = _interopRequireDefault(__webpack_require__(/*! ../Section */ "./components/Section/index.js"));
 var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
@@ -7015,7 +6992,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-/* eslint-disable react/no-deprecated */
+const actionButtonsConfig = (0, _ButtonContext.getButtonContextValue)({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class Form extends _react.Component {
   constructor() {
     var _this;
@@ -7189,7 +7170,9 @@ class Form extends _react.Component {
       } = this.props;
       return /*#__PURE__*/_react.default.createElement(_Section.default, {
         className: (0, _classnames.default)(`${baseClassName}__footer`, footerClassName)
-      }, /*#__PURE__*/_react.default.createElement(_FormField.default, null, this.renderSubmitButton({
+      }, /*#__PURE__*/_react.default.createElement(_FormField.default, null, /*#__PURE__*/_react.default.createElement(_ButtonContext.ButtonContext.Provider, {
+        value: actionButtonsConfig
+      }, this.renderSubmitButton({
         submitButton,
         state
       }), this.renderApplyButton({
@@ -7200,7 +7183,7 @@ class Form extends _react.Component {
       }), this.renderCancelButton({
         cancelButton,
         state
-      })));
+      }))));
     });
   }
   static getDerivedStateFromProps(props, state) {
@@ -7261,7 +7244,6 @@ class Form extends _react.Component {
       return null;
     }
     return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-      size: "lg",
       intent: "primary",
       state: state === 'submit' ? 'loading' : undefined,
       disabled: !!state,
@@ -7272,7 +7254,7 @@ class Form extends _react.Component {
         content: "Form.submitButton",
         fallback: "Save"
       })
-    }, submitButton));
+    }, typeof submitButton === 'object' ? submitButton : {}));
   }
   renderApplyButton(_ref5) {
     let {
@@ -7282,18 +7264,18 @@ class Form extends _react.Component {
     if (!applyButton) {
       return null;
     }
-    return /*#__PURE__*/(0, _react.createElement)(_Button.default, {
-      size: 'lg',
-      intent: 'primary',
+    return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+      intent: "primary",
       state: state === 'apply' ? 'loading' : undefined,
       disabled: !!state,
-      onClick: this.handleApplyClick,
+      onClick: this.handleApplyClick
+      // eslint-disable-next-line react/no-children-prop
+      ,
       children: /*#__PURE__*/_react.default.createElement(_Translate.default, {
         content: "Form.applyButton",
         fallback: "Apply"
-      }),
-      ...applyButton
-    });
+      })
+    }, typeof applyButton === 'object' ? applyButton : {}));
   }
   renderCancelButton(_ref6) {
     let {
@@ -7303,16 +7285,16 @@ class Form extends _react.Component {
     if (!cancelButton) {
       return null;
     }
-    return /*#__PURE__*/(0, _react.createElement)(_Button.default, {
-      size: 'lg',
+    return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
       state: state === 'cancel' ? 'loading' : undefined,
-      disabled: !!state,
+      disabled: !!state
+      // eslint-disable-next-line react/no-children-prop
+      ,
       children: /*#__PURE__*/_react.default.createElement(_Translate.default, {
         content: "Form.cancelButton",
         fallback: "Cancel"
-      }),
-      ...cancelButton
-    });
+      })
+    }, typeof cancelButton === 'object' ? cancelButton : {}));
   }
   renderAdditionalButtons(_ref7) {
     let {
@@ -7327,9 +7309,6 @@ class Form extends _react.Component {
           const props = {
             className: (0, _classnames.default)(element.props.className, `${baseClassName}__additional-button`)
           };
-          if (element.type === _Button.default) {
-            props.size = 'lg';
-          }
           return /*#__PURE__*/(0, _react.cloneElement)(element, props);
         }
         return element;
@@ -13969,9 +13948,10 @@ var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */
 var _default2 = _interopRequireDefault(__webpack_require__(/*! ./images/default.png */ "./components/List/images/default.png"));
 var _filtered = _interopRequireDefault(__webpack_require__(/*! ./images/filtered.png */ "./components/List/images/filtered.png"));
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
+var _ButtonContext = __webpack_require__(/*! ../Button/ButtonContext */ "./components/Button/ButtonContext.tsx");
 __webpack_require__(/*! ./ListEmptyView.less */ "./components/List/ListEmptyView.less");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 const createImage = (baseClassName, image, reason) => {
   if (image === undefined) {
     image = reason === 'filtered' ? _filtered.default : _default2.default;
@@ -14017,6 +13997,11 @@ const createDescription = (baseClassName, description, reason) => {
     className: `${baseClassName}__description`
   }, description);
 };
+const buttonConfig = (0, _ButtonContext.getButtonContextValue)({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 
 /**
  * `ListEmptyView` component is used for displaying "empty" state of [List](#!/List)
@@ -14040,7 +14025,9 @@ const ListEmptyView = _ref => {
     className: `${baseClassName}__body`
   }, createTitle(baseClassName, title, reason), createDescription(baseClassName, description, reason), actions && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__actions`
-  }, actions)));
+  }, /*#__PURE__*/_react.default.createElement(_ButtonContext.ButtonContext.Provider, {
+    value: buttonConfig
+  }, actions))));
 };
 var _default = ListEmptyView;
 exports["default"] = _default;
@@ -77043,7 +77030,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /**!
  * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version 1.14.3
+ * @version 1.16.1
  * @license
  * Copyright (c) 2016 Federico Zivolo and contributors
  *
@@ -77065,16 +77052,17 @@ __webpack_require__.r(__webpack_exports__);
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
 
-var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
-var timeoutDuration = 0;
-for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
-  if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
-    timeoutDuration = 1;
-    break;
+var timeoutDuration = function () {
+  var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
+  for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
+    if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
+      return 1;
+    }
   }
-}
+  return 0;
+}();
 
 function microtaskDebounce(fn) {
   var called = false;
@@ -77140,7 +77128,8 @@ function getStyleComputedProperty(element, property) {
     return [];
   }
   // NOTE: 1 DOM access here
-  var css = getComputedStyle(element, null);
+  var window = element.ownerDocument.defaultView;
+  var css = window.getComputedStyle(element, null);
   return property ? css[property] : css;
 }
 
@@ -77193,6 +77182,17 @@ function getScrollParent(element) {
   return getScrollParent(getParentNode(element));
 }
 
+/**
+ * Returns the reference node of the reference object, or the reference object itself.
+ * @method
+ * @memberof Popper.Utils
+ * @param {Element|Object} reference - the reference element (the popper will be relative to this)
+ * @returns {Element} parent
+ */
+function getReferenceNode(reference) {
+  return reference && reference.referenceNode ? reference.referenceNode : reference;
+}
+
 var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
 var isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);
 
@@ -77228,7 +77228,7 @@ function getOffsetParent(element) {
   var noOffsetParent = isIE(10) ? document.body : null;
 
   // NOTE: 1 DOM access here
-  var offsetParent = element.offsetParent;
+  var offsetParent = element.offsetParent || null;
   // Skip hidden elements which don't have an offsetParent
   while (offsetParent === noOffsetParent && element.nextElementSibling) {
     offsetParent = (element = element.nextElementSibling).offsetParent;
@@ -77240,9 +77240,9 @@ function getOffsetParent(element) {
     return element ? element.ownerDocument.documentElement : document.documentElement;
   }
 
-  // .offsetParent will return the closest TD or TABLE in case
+  // .offsetParent will return the closest TH, TD or TABLE in case
   // no offsetParent is present, I hate this job...
-  if (['TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
+  if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
     return getOffsetParent(offsetParent);
   }
 
@@ -77376,14 +77376,14 @@ function getBordersSize(styles, axis) {
   var sideA = axis === 'x' ? 'Left' : 'Top';
   var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
 
-  return parseFloat(styles['border' + sideA + 'Width'], 10) + parseFloat(styles['border' + sideB + 'Width'], 10);
+  return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
 }
 
 function getSize(axis, body, html, computedStyle) {
-  return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0);
+  return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
 }
 
-function getWindowSizes() {
+function getWindowSizes(document) {
   var body = document.body;
   var html = document.documentElement;
   var computedStyle = isIE(10) && getComputedStyle(html);
@@ -77500,9 +77500,9 @@ function getBoundingClientRect(element) {
   };
 
   // subtract scrollbar size from sizes
-  var sizes = element.nodeName === 'HTML' ? getWindowSizes() : {};
-  var width = sizes.width || element.clientWidth || result.right - result.left;
-  var height = sizes.height || element.clientHeight || result.bottom - result.top;
+  var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
+  var width = sizes.width || element.clientWidth || result.width;
+  var height = sizes.height || element.clientHeight || result.height;
 
   var horizScrollbar = element.offsetWidth - width;
   var vertScrollbar = element.offsetHeight - height;
@@ -77531,11 +77531,11 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) {
   var scrollParent = getScrollParent(children);
 
   var styles = getStyleComputedProperty(parent);
-  var borderTopWidth = parseFloat(styles.borderTopWidth, 10);
-  var borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);
+  var borderTopWidth = parseFloat(styles.borderTopWidth);
+  var borderLeftWidth = parseFloat(styles.borderLeftWidth);
 
   // In cases where the parent is fixed, we must ignore negative scroll in offset calc
-  if (fixedPosition && parent.nodeName === 'HTML') {
+  if (fixedPosition && isHTML) {
     parentRect.top = Math.max(parentRect.top, 0);
     parentRect.left = Math.max(parentRect.left, 0);
   }
@@ -77553,8 +77553,8 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) {
   // differently when margins are applied to it. The margins are included in
   // the box of the documentElement, in the other cases not.
   if (!isIE10 && isHTML) {
-    var marginTop = parseFloat(styles.marginTop, 10);
-    var marginLeft = parseFloat(styles.marginLeft, 10);
+    var marginTop = parseFloat(styles.marginTop);
+    var marginLeft = parseFloat(styles.marginLeft);
 
     offsets.top -= borderTopWidth - marginTop;
     offsets.bottom -= borderTopWidth - marginTop;
@@ -77610,7 +77610,11 @@ function isFixed(element) {
   if (getStyleComputedProperty(element, 'position') === 'fixed') {
     return true;
   }
-  return isFixed(getParentNode(element));
+  var parentNode = getParentNode(element);
+  if (!parentNode) {
+    return false;
+  }
+  return isFixed(parentNode);
 }
 
 /**
@@ -77650,7 +77654,7 @@ function getBoundaries(popper, reference, padding, boundariesElement) {
   // NOTE: 1 DOM access here
 
   var boundaries = { top: 0, left: 0 };
-  var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);
+  var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
 
   // Handle viewport case
   if (boundariesElement === 'viewport') {
@@ -77673,7 +77677,7 @@ function getBoundaries(popper, reference, padding, boundariesElement) {
 
     // In case of HTML, we need a different computation
     if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
-      var _getWindowSizes = getWindowSizes(),
+      var _getWindowSizes = getWindowSizes(popper.ownerDocument),
           height = _getWindowSizes.height,
           width = _getWindowSizes.width;
 
@@ -77688,10 +77692,12 @@ function getBoundaries(popper, reference, padding, boundariesElement) {
   }
 
   // Add paddings
-  boundaries.left += padding;
-  boundaries.top += padding;
-  boundaries.right -= padding;
-  boundaries.bottom -= padding;
+  padding = padding || 0;
+  var isPaddingNumber = typeof padding === 'number';
+  boundaries.left += isPaddingNumber ? padding : padding.left || 0;
+  boundaries.top += isPaddingNumber ? padding : padding.top || 0;
+  boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
+  boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
 
   return boundaries;
 }
@@ -77776,7 +77782,7 @@ function computeAutoPlacement(placement, refRect, popper, reference, boundariesE
 function getReferenceOffsets(state, popper, reference) {
   var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
 
-  var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);
+  var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
   return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
 }
 
@@ -77788,9 +77794,10 @@ function getReferenceOffsets(state, popper, reference) {
  * @returns {Object} object containing width and height properties
  */
 function getOuterSizes(element) {
-  var styles = getComputedStyle(element);
-  var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
-  var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+  var window = element.ownerDocument.defaultView;
+  var styles = window.getComputedStyle(element);
+  var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
+  var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
   var result = {
     width: element.offsetWidth + y,
     height: element.offsetHeight + x
@@ -78016,7 +78023,7 @@ function getSupportedPropertyName(property) {
 }
 
 /**
- * Destroy the popper
+ * Destroys the popper.
  * @method
  * @memberof Popper
  */
@@ -78037,7 +78044,7 @@ function destroy() {
 
   this.disableEventListeners();
 
-  // remove the popper if user explicity asked for the deletion on destroy
+  // remove the popper if user explicitly asked for the deletion on destroy
   // do not use `remove` because IE11 doesn't support it
   if (this.options.removeOnDestroy) {
     this.popper.parentNode.removeChild(this.popper);
@@ -78123,7 +78130,7 @@ function removeEventListeners(reference, state) {
 
 /**
  * It will remove resize/scroll events and won't recalculate popper position
- * when they are triggered. It also won't trigger onUpdate callback anymore,
+ * when they are triggered. It also won't trigger `onUpdate` callback anymore,
  * unless you call `update` method manually.
  * @method
  * @memberof Popper
@@ -78240,6 +78247,57 @@ function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
   return options;
 }
 
+/**
+ * @function
+ * @memberof Popper.Utils
+ * @argument {Object} data - The data object generated by `update` method
+ * @argument {Boolean} shouldRound - If the offsets should be rounded at all
+ * @returns {Object} The popper's position offsets rounded
+ *
+ * The tale of pixel-perfect positioning. It's still not 100% perfect, but as
+ * good as it can be within reason.
+ * Discussion here: https://github.com/FezVrasta/popper.js/pull/715
+ *
+ * Low DPI screens cause a popper to be blurry if not using full pixels (Safari
+ * as well on High DPI screens).
+ *
+ * Firefox prefers no rounding for positioning and does not have blurriness on
+ * high DPI screens.
+ *
+ * Only horizontal placement and left/right values need to be considered.
+ */
+function getRoundedOffsets(data, shouldRound) {
+  var _data$offsets = data.offsets,
+      popper = _data$offsets.popper,
+      reference = _data$offsets.reference;
+  var round = Math.round,
+      floor = Math.floor;
+
+  var noRound = function noRound(v) {
+    return v;
+  };
+
+  var referenceWidth = round(reference.width);
+  var popperWidth = round(popper.width);
+
+  var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
+  var isVariation = data.placement.indexOf('-') !== -1;
+  var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
+  var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
+
+  var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
+  var verticalToInteger = !shouldRound ? noRound : round;
+
+  return {
+    left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
+    top: verticalToInteger(popper.top),
+    bottom: verticalToInteger(popper.bottom),
+    right: horizontalToInteger(popper.right)
+  };
+}
+
+var isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);
+
 /**
  * @function
  * @memberof Modifiers
@@ -78270,15 +78328,7 @@ function computeStyle(data, options) {
     position: popper.position
   };
 
-  // Avoid blurry text by using full pixel integers.
-  // For pixel-perfect positioning, top/bottom prefers rounded
-  // values, while left/right prefers floored values.
-  var offsets = {
-    left: Math.floor(popper.left),
-    top: Math.round(popper.top),
-    bottom: Math.round(popper.bottom),
-    right: Math.floor(popper.right)
-  };
+  var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
 
   var sideA = x === 'bottom' ? 'top' : 'bottom';
   var sideB = y === 'right' ? 'left' : 'right';
@@ -78300,12 +78350,22 @@ function computeStyle(data, options) {
   var left = void 0,
       top = void 0;
   if (sideA === 'bottom') {
-    top = -offsetParentRect.height + offsets.bottom;
+    // when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
+    // and not the bottom of the html element
+    if (offsetParent.nodeName === 'HTML') {
+      top = -offsetParent.clientHeight + offsets.bottom;
+    } else {
+      top = -offsetParentRect.height + offsets.bottom;
+    }
   } else {
     top = offsets.top;
   }
   if (sideB === 'right') {
-    left = -offsetParentRect.width + offsets.right;
+    if (offsetParent.nodeName === 'HTML') {
+      left = -offsetParent.clientWidth + offsets.right;
+    } else {
+      left = -offsetParentRect.width + offsets.right;
+    }
   } else {
     left = offsets.left;
   }
@@ -78414,7 +78474,7 @@ function arrow(data, options) {
 
   //
   // extends keepTogether behavior making sure the popper and its
-  // reference have enough pixels in conjuction
+  // reference have enough pixels in conjunction
   //
 
   // top/left side
@@ -78433,8 +78493,8 @@ function arrow(data, options) {
   // Compute the sideValue using the updated popper offsets
   // take popper margin in account because we don't have this info available
   var css = getStyleComputedProperty(data.instance.popper);
-  var popperMarginSide = parseFloat(css['margin' + sideCapitalized], 10);
-  var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width'], 10);
+  var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
+  var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
   var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
 
   // prevent arrowElement from being placed not contiguously to its popper
@@ -78484,7 +78544,7 @@ function getOppositeVariation(variation) {
  * - `top-end` (on top of reference, right aligned)
  * - `right-start` (on right of reference, top aligned)
  * - `bottom` (on bottom, centered)
- * - `auto-right` (on the side with more space available, alignment depends by placement)
+ * - `auto-end` (on the side with more space available, alignment depends by placement)
  *
  * @static
  * @type {Array}
@@ -78586,7 +78646,14 @@ function flip(data, options) {
 
     // flip the variation if required
     var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
-    var flippedVariation = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
+
+    // flips variation if reference element overflows boundaries
+    var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
+
+    // flips variation if popper content overflows boundaries
+    var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
+
+    var flippedVariation = flippedVariationByRef || flippedVariationByContent;
 
     if (overlapsRef || overflowsBoundaries || flippedVariation) {
       // this boolean to detect any flip loop
@@ -79026,7 +79093,7 @@ var modifiers = {
    * The `offset` modifier can shift your popper on both its axis.
    *
    * It accepts the following units:
-   * - `px` or unitless, interpreted as pixels
+   * - `px` or unit-less, interpreted as pixels
    * - `%` or `%r`, percentage relative to the length of the reference element
    * - `%p`, percentage relative to the length of the popper element
    * - `vw`, CSS viewport width unit
@@ -79034,7 +79101,7 @@ var modifiers = {
    *
    * For length is intended the main axis relative to the placement of the popper.<br />
    * This means that if the placement is `top` or `bottom`, the length will be the
-   * `width`. In case of `left` or `right`, it will be the height.
+   * `width`. In case of `left` or `right`, it will be the `height`.
    *
    * You can provide a single value (as `Number` or `String`), or a pair of values
    * as `String` divided by a comma or one (or more) white spaces.<br />
@@ -79055,7 +79122,7 @@ var modifiers = {
    * ```
    * > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
    * > with their reference element, unfortunately, you will have to disable the `flip` modifier.
-   * > More on this [reading this issue](https://github.com/FezVrasta/popper.js/issues/373)
+   * > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
    *
    * @memberof modifiers
    * @inner
@@ -79076,7 +79143,7 @@ var modifiers = {
   /**
    * Modifier used to prevent the popper from being positioned outside the boundary.
    *
-   * An scenario exists where the reference itself is not within the boundaries.<br />
+   * A scenario exists where the reference itself is not within the boundaries.<br />
    * We can say it has "escaped the boundaries" — or just "escaped".<br />
    * In this case we need to decide whether the popper should either:
    *
@@ -79106,23 +79173,23 @@ var modifiers = {
     /**
      * @prop {number} padding=5
      * Amount of pixel used to define a minimum distance between the boundaries
-     * and the popper this makes sure the popper has always a little padding
+     * and the popper. This makes sure the popper always has a little padding
      * between the edges of its container
      */
     padding: 5,
     /**
      * @prop {String|HTMLElement} boundariesElement='scrollParent'
-     * Boundaries used by the modifier, can be `scrollParent`, `window`,
+     * Boundaries used by the modifier. Can be `scrollParent`, `window`,
      * `viewport` or any DOM element.
      */
     boundariesElement: 'scrollParent'
   },
 
   /**
-   * Modifier used to make sure the reference and its popper stay near eachothers
-   * without leaving any gap between the two. Expecially useful when the arrow is
-   * enabled and you want to assure it to point to its reference element.
-   * It cares only about the first axis, you can still have poppers with margin
+   * Modifier used to make sure the reference and its popper stay near each other
+   * without leaving any gap between the two. Especially useful when the arrow is
+   * enabled and you want to ensure that it points to its reference element.
+   * It cares only about the first axis. You can still have poppers with margin
    * between the popper and its reference element.
    * @memberof modifiers
    * @inner
@@ -79140,7 +79207,7 @@ var modifiers = {
    * This modifier is used to move the `arrowElement` of the popper to make
    * sure it is positioned between the reference element and its popper element.
    * It will read the outer size of the `arrowElement` node to detect how many
-   * pixels of conjuction are needed.
+   * pixels of conjunction are needed.
    *
    * It has no effect if no `arrowElement` is provided.
    * @memberof modifiers
@@ -79179,7 +79246,7 @@ var modifiers = {
      * @prop {String|Array} behavior='flip'
      * The behavior used to change the popper's placement. It can be one of
      * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
-     * placements (with optional variations).
+     * placements (with optional variations)
      */
     behavior: 'flip',
     /**
@@ -79189,11 +79256,27 @@ var modifiers = {
     padding: 5,
     /**
      * @prop {String|HTMLElement} boundariesElement='viewport'
-     * The element which will define the boundaries of the popper position,
-     * the popper will never be placed outside of the defined boundaries
-     * (except if keepTogether is enabled)
+     * The element which will define the boundaries of the popper position.
+     * The popper will never be placed outside of the defined boundaries
+     * (except if `keepTogether` is enabled)
+     */
+    boundariesElement: 'viewport',
+    /**
+     * @prop {Boolean} flipVariations=false
+     * The popper will switch placement variation between `-start` and `-end` when
+     * the reference element overlaps its boundaries.
+     *
+     * The original placement should have a set variation.
      */
-    boundariesElement: 'viewport'
+    flipVariations: false,
+    /**
+     * @prop {Boolean} flipVariationsByContent=false
+     * The popper will switch placement variation between `-start` and `-end` when
+     * the popper element overlaps its reference boundaries.
+     *
+     * The original placement should have a set variation.
+     */
+    flipVariationsByContent: false
   },
 
   /**
@@ -79255,8 +79338,8 @@ var modifiers = {
     fn: computeStyle,
     /**
      * @prop {Boolean} gpuAcceleration=true
-     * If true, it uses the CSS 3d transformation to position the popper.
-     * Otherwise, it will use the `top` and `left` properties.
+     * If true, it uses the CSS 3D transformation to position the popper.
+     * Otherwise, it will use the `top` and `left` properties
      */
     gpuAcceleration: true,
     /**
@@ -79283,7 +79366,7 @@ var modifiers = {
    * Note that if you disable this modifier, you must make sure the popper element
    * has its position set to `absolute` before Popper.js can do its work!
    *
-   * Just disable this modifier and define you own to achieve the desired effect.
+   * Just disable this modifier and define your own to achieve the desired effect.
    *
    * @memberof modifiers
    * @inner
@@ -79300,27 +79383,27 @@ var modifiers = {
     /**
      * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
      * @prop {Boolean} gpuAcceleration=true
-     * If true, it uses the CSS 3d transformation to position the popper.
-     * Otherwise, it will use the `top` and `left` properties.
+     * If true, it uses the CSS 3D transformation to position the popper.
+     * Otherwise, it will use the `top` and `left` properties
      */
     gpuAcceleration: undefined
   }
 };
 
 /**
- * The `dataObject` is an object containing all the informations used by Popper.js
- * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
+ * The `dataObject` is an object containing all the information used by Popper.js.
+ * This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
  * @name dataObject
  * @property {Object} data.instance The Popper.js instance
  * @property {String} data.placement Placement applied to popper
  * @property {String} data.originalPlacement Placement originally defined on init
  * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
- * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
+ * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
  * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
- * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
- * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)
+ * @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
+ * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
  * @property {Object} data.boundaries Offsets of the popper boundaries
- * @property {Object} data.offsets The measurements of popper, reference and arrow elements.
+ * @property {Object} data.offsets The measurements of popper, reference and arrow elements
  * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
  * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
  * @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
@@ -79328,9 +79411,9 @@ var modifiers = {
 
 /**
  * Default options provided to Popper.js constructor.<br />
- * These can be overriden using the `options` argument of Popper.js.<br />
- * To override an option, simply pass as 3rd argument an object with the same
- * structure of this object, example:
+ * These can be overridden using the `options` argument of Popper.js.<br />
+ * To override an option, simply pass an object with the same
+ * structure of the `options` object, as the 3rd argument. For example:
  * ```
  * new Popper(ref, pop, {
  *   modifiers: {
@@ -79344,7 +79427,7 @@ var modifiers = {
  */
 var Defaults = {
   /**
-   * Popper's placement
+   * Popper's placement.
    * @prop {Popper.placements} placement='bottom'
    */
   placement: 'bottom',
@@ -79356,7 +79439,7 @@ var Defaults = {
   positionFixed: false,
 
   /**
-   * Whether events (resize, scroll) are initially enabled
+   * Whether events (resize, scroll) are initially enabled.
    * @prop {Boolean} eventsEnabled=true
    */
   eventsEnabled: true,
@@ -79370,17 +79453,17 @@ var Defaults = {
 
   /**
    * Callback called when the popper is created.<br />
-   * By default, is set to no-op.<br />
+   * By default, it is set to no-op.<br />
    * Access Popper.js instance with `data.instance`.
    * @prop {onCreate}
    */
   onCreate: function onCreate() {},
 
   /**
-   * Callback called when the popper is updated, this callback is not called
+   * Callback called when the popper is updated. This callback is not called
    * on the initialization/creation of the popper, but only on subsequent
    * updates.<br />
-   * By default, is set to no-op.<br />
+   * By default, it is set to no-op.<br />
    * Access Popper.js instance with `data.instance`.
    * @prop {onUpdate}
    */
@@ -79388,7 +79471,7 @@ var Defaults = {
 
   /**
    * List of modifiers used to modify the offsets before they are applied to the popper.
-   * They provide most of the functionalities of Popper.js
+   * They provide most of the functionalities of Popper.js.
    * @prop {modifiers}
    */
   modifiers: modifiers
@@ -79408,10 +79491,10 @@ var Defaults = {
 // Methods
 var Popper = function () {
   /**
-   * Create a new Popper.js instance
+   * Creates a new Popper.js instance.
    * @class Popper
-   * @param {HTMLElement|referenceObject} reference - The reference element used to position the popper
-   * @param {HTMLElement} popper - The HTML element used as popper.
+   * @param {Element|referenceObject} reference - The reference element used to position the popper
+   * @param {Element} popper - The HTML / XML element used as the popper
    * @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
    * @return {Object} instance - The generated Popper.js instance
    */
@@ -79507,7 +79590,7 @@ var Popper = function () {
     }
 
     /**
-     * Schedule an update, it will run on the next UI update available
+     * Schedules an update. It will run on the next UI update available.
      * @method scheduleUpdate
      * @memberof Popper
      */
@@ -79544,7 +79627,7 @@ var Popper = function () {
  * new Popper(referenceObject, popperNode);
  * ```
  *
- * NB: This feature isn't supported in Internet Explorer 10
+ * NB: This feature isn't supported in Internet Explorer 10.
  * @name referenceObject
  * @property {Function} data.getBoundingClientRect
  * A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
@@ -80577,7 +80660,7 @@ if (false) {} else {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
-/* harmony export */   "withContentRect": () => (/* binding */ withContentRect)
+/* harmony export */   withContentRect: () => (/* binding */ withContentRect)
 /* harmony export */ });
 /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "../node_modules/@babel/runtime/helpers/esm/extends.js");
 /* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ "../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js");
@@ -80660,6 +80743,19 @@ function getContentRect(node, types) {
   return calculations;
 }
 
+/**
+ * Returns the global window object associated with provided element.
+ */
+function getWindowOf(target) {
+  // Assume that the element is an instance of Node, which means that it
+  // has the "ownerDocument" property from which we can retrieve a
+  // corresponding global object.
+  var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView; // Return the local window object if it's not possible extract one from
+  // provided element.
+
+  return ownerGlobal || window;
+}
+
 function withContentRect(types) {
   return function (WrappedComponent) {
     var _class, _temp;
@@ -80690,6 +80786,7 @@ function withContentRect(types) {
         _this._animationFrameID = null;
         _this._resizeObserver = null;
         _this._node = null;
+        _this._window = null;
 
         _this.measure = function (entries) {
           var contentRect = getContentRect(_this._node, types || getTypes(_this.props));
@@ -80698,7 +80795,7 @@ function withContentRect(types) {
             contentRect.entry = entries[0].contentRect;
           }
 
-          _this._animationFrameID = window.requestAnimationFrame(function () {
+          _this._animationFrameID = _this._window.requestAnimationFrame(function () {
             if (_this._resizeObserver !== null) {
               _this.setState({
                 contentRect: contentRect
@@ -80717,11 +80814,7 @@ function withContentRect(types) {
           }
 
           _this._node = node;
-
-          if (_this._resizeObserver !== null && _this._node !== null) {
-            _this._resizeObserver.observe(_this._node);
-          }
-
+          _this._window = getWindowOf(_this._node);
           var innerRef = _this.props.innerRef;
 
           if (innerRef) {
@@ -80731,6 +80824,10 @@ function withContentRect(types) {
               innerRef.current = _this._node;
             }
           }
+
+          if (_this._resizeObserver !== null && _this._node !== null) {
+            _this._resizeObserver.observe(_this._node);
+          }
         };
 
         return _this;
@@ -80739,7 +80836,7 @@ function withContentRect(types) {
       var _proto = WithContentRect.prototype;
 
       _proto.componentDidMount = function componentDidMount() {
-        this._resizeObserver = new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_4__["default"](this.measure);
+        this._resizeObserver = this._window !== null && this._window.ResizeObserver ? new this._window.ResizeObserver(this.measure) : new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_4__["default"](this.measure);
 
         if (this._node !== null) {
           this._resizeObserver.observe(this._node);
@@ -80751,13 +80848,15 @@ function withContentRect(types) {
       };
 
       _proto.componentWillUnmount = function componentWillUnmount() {
+        if (this._window !== null) {
+          this._window.cancelAnimationFrame(this._animationFrameID);
+        }
+
         if (this._resizeObserver !== null) {
           this._resizeObserver.disconnect();
 
           this._resizeObserver = null;
         }
-
-        window.cancelAnimationFrame(this._animationFrameID);
       };
 
       _proto.render = function render() {
@@ -82680,7 +82779,7 @@ ReplaceTransition.propTypes =  true ? {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
-/* harmony export */   "modes": () => (/* binding */ modes)
+/* harmony export */   modes: () => (/* binding */ modes)
 /* harmony export */ });
 /* harmony import */ var _babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/inheritsLoose */ "../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
@@ -82958,11 +83057,11 @@ SwitchTransition.defaultProps = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "ENTERED": () => (/* binding */ ENTERED),
-/* harmony export */   "ENTERING": () => (/* binding */ ENTERING),
-/* harmony export */   "EXITED": () => (/* binding */ EXITED),
-/* harmony export */   "EXITING": () => (/* binding */ EXITING),
-/* harmony export */   "UNMOUNTED": () => (/* binding */ UNMOUNTED),
+/* harmony export */   ENTERED: () => (/* binding */ ENTERED),
+/* harmony export */   ENTERING: () => (/* binding */ ENTERING),
+/* harmony export */   EXITED: () => (/* binding */ EXITED),
+/* harmony export */   EXITING: () => (/* binding */ EXITING),
+/* harmony export */   UNMOUNTED: () => (/* binding */ UNMOUNTED),
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ "../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js");
@@ -83862,12 +83961,12 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "CSSTransition": () => (/* reexport safe */ _CSSTransition__WEBPACK_IMPORTED_MODULE_0__["default"]),
-/* harmony export */   "ReplaceTransition": () => (/* reexport safe */ _ReplaceTransition__WEBPACK_IMPORTED_MODULE_1__["default"]),
-/* harmony export */   "SwitchTransition": () => (/* reexport safe */ _SwitchTransition__WEBPACK_IMPORTED_MODULE_2__["default"]),
-/* harmony export */   "Transition": () => (/* reexport safe */ _Transition__WEBPACK_IMPORTED_MODULE_4__["default"]),
-/* harmony export */   "TransitionGroup": () => (/* reexport safe */ _TransitionGroup__WEBPACK_IMPORTED_MODULE_3__["default"]),
-/* harmony export */   "config": () => (/* reexport safe */ _config__WEBPACK_IMPORTED_MODULE_5__["default"])
+/* harmony export */   CSSTransition: () => (/* reexport safe */ _CSSTransition__WEBPACK_IMPORTED_MODULE_0__["default"]),
+/* harmony export */   ReplaceTransition: () => (/* reexport safe */ _ReplaceTransition__WEBPACK_IMPORTED_MODULE_1__["default"]),
+/* harmony export */   SwitchTransition: () => (/* reexport safe */ _SwitchTransition__WEBPACK_IMPORTED_MODULE_2__["default"]),
+/* harmony export */   Transition: () => (/* reexport safe */ _Transition__WEBPACK_IMPORTED_MODULE_4__["default"]),
+/* harmony export */   TransitionGroup: () => (/* reexport safe */ _TransitionGroup__WEBPACK_IMPORTED_MODULE_3__["default"]),
+/* harmony export */   config: () => (/* reexport safe */ _config__WEBPACK_IMPORTED_MODULE_5__["default"])
 /* harmony export */ });
 /* harmony import */ var _CSSTransition__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CSSTransition */ "../node_modules/react-transition-group/esm/CSSTransition.js");
 /* harmony import */ var _ReplaceTransition__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ReplaceTransition */ "../node_modules/react-transition-group/esm/ReplaceTransition.js");
@@ -83893,10 +83992,10 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "getChildMapping": () => (/* binding */ getChildMapping),
-/* harmony export */   "getInitialChildMapping": () => (/* binding */ getInitialChildMapping),
-/* harmony export */   "getNextChildMapping": () => (/* binding */ getNextChildMapping),
-/* harmony export */   "mergeChildMappings": () => (/* binding */ mergeChildMappings)
+/* harmony export */   getChildMapping: () => (/* binding */ getChildMapping),
+/* harmony export */   getInitialChildMapping: () => (/* binding */ getInitialChildMapping),
+/* harmony export */   getNextChildMapping: () => (/* binding */ getNextChildMapping),
+/* harmony export */   mergeChildMappings: () => (/* binding */ mergeChildMappings)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -84052,8 +84151,8 @@ function getNextChildMapping(nextProps, prevChildMapping, onExited) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "classNamesShape": () => (/* binding */ classNamesShape),
-/* harmony export */   "timeoutsShape": () => (/* binding */ timeoutsShape)
+/* harmony export */   classNamesShape: () => (/* binding */ classNamesShape),
+/* harmony export */   timeoutsShape: () => (/* binding */ timeoutsShape)
 /* harmony export */ });
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
@@ -84087,7 +84186,7 @@ var classNamesShape =  true ? prop_types__WEBPACK_IMPORTED_MODULE_0___default().
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "forceReflow": () => (/* binding */ forceReflow)
+/* harmony export */   forceReflow: () => (/* binding */ forceReflow)
 /* harmony export */ });
 var forceReflow = function forceReflow(node) {
   return node.scrollTop;
@@ -85229,8 +85328,8 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!function(root,
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "FocusVisibleManager": () => (/* binding */ FocusVisibleManager),
-/* harmony export */   "useFocusVisible": () => (/* binding */ useFocusVisible)
+/* harmony export */   FocusVisibleManager: () => (/* binding */ FocusVisibleManager),
+/* harmony export */   useFocusVisible: () => (/* binding */ useFocusVisible)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -88286,7 +88385,7 @@ function _setPrototypeOf(o, p) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.31.2","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.21.0","@plesk/react-movable":"^2.7.1","classnames":"^2.3.2","codemirror":"5.58.2","marked":"4.2.12","memoize-one":"^5.2.1","popper.js":"1.14.3","prop-types":"^15.8.1","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^2.2.31","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.21.4","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.21.4","@babel/preset-env":"^7.21.4","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.4","@babel/types":"^7.21.4","@csstools/postcss-logical-float-and-clear":"^1.0.1","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^1.0.0","@types/buble":"^0.19.2","@types/cheerio":"^0.22.31","@types/classnames":"2.2.7","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.12","@types/jest":"^23.3.14","@types/marked":"^4.0.8","@types/node":"^12.20.55","@types/react":"^16.14.38","@types/react-dom":"^16.9.18","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.5","@types/svg4everybody":"2.1.0","@typescript-eslint/eslint-plugin":"^2.34.0","@typescript-eslint/parser":"^2.34.0","autoprefixer":"^10.4.14","babel-loader":"^8.3.0","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.1","css-loader":"^6.7.3","css-minimizer-webpack-plugin":"^4.2.2","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.15.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.4.1","fs-extra":"^7.0.1","html-webpack-plugin":"^5.5.0","inquirer":"^3.3.0","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.5.1","less":"^4.1.3","less-loader":"^11.1.0","mini-css-extract-plugin":"^2.7.5","postcss":"^8.4.21","postcss-less":"^6.0.0","postcss-loader":"^7.2.4","postcss-logical":"^6.1.0","prettier":"^2.8.7","puppeteer-core":"13.1.3","react":"^16.14.0","react-dom":"^16.14.0","react-styleguidist":"^12.0.1","react-test-renderer":"^16.14.0","rimraf":"^3.0.2","rtlcss":"^4.0.0","style-loader":"^3.3.2","stylelint":"^14.16.1","stylelint-config-prettier":"^9.0.5","stylelint-declaration-block-no-ignored-properties":"^2.7.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^2.0.0","stylelint-use-logical-spec":"^5.0.0","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.7","typescript":"3.7.2","webpack":"^5.78.0","webpack-cli":"^5.0.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","@types/react":"^16.14.35","**/caniuse-lite":"1.0.30001430","trim":"0.0.3","postcss":"8.4.21"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
+module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.31.3","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"{src,styleguidist}/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.21.5","@plesk/react-movable":"^2.7.1","classnames":"^2.3.2","codemirror":"5.58.2","marked":"4.2.12","memoize-one":"^5.2.1","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^2.2.31","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.21.8","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.21.4","@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.5","@babel/types":"^7.21.5","@csstools/postcss-logical-float-and-clear":"^1.0.1","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^2.0.0","@types/buble":"^0.20.1","@types/cheerio":"^0.22.31","@types/classnames":"2.3.1","@types/doctrine":"^0.0.5","@types/enzyme":"^3.10.13","@types/jest":"^23.3.14","@types/marked":"^4.3.1","@types/node":"^12.20.55","@types/react":"^16.14.41","@types/react-dom":"^16.9.19","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.6","@types/svg4everybody":"2.1.2","@typescript-eslint/eslint-plugin":"^2.34.0","@typescript-eslint/parser":"^2.34.0","autoprefixer":"^10.4.14","babel-loader":"^8.3.0","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.1","css-loader":"^6.7.4","css-minimizer-webpack-plugin":"^5.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.15.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.4.1","fs-extra":"^7.0.1","html-webpack-plugin":"^5.5.1","inquirer":"^3.3.0","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.5.1","less":"^4.1.3","less-loader":"^11.1.0","mini-css-extract-plugin":"^2.7.6","postcss":"^8.4.23","postcss-less":"^6.0.0","postcss-loader":"^7.3.0","postcss-logical":"^6.2.0","prettier":"^2.8.8","puppeteer-core":"13.1.3","react":"^16.14.0","react-dom":"^16.14.0","react-styleguidist":"^12.0.1","react-test-renderer":"^16.14.0","rimraf":"^3.0.2","rtlcss":"^4.1.0","style-loader":"^3.3.3","stylelint":"^15.6.2","stylelint-declaration-block-no-ignored-properties":"^2.7.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^3.0.0","stylelint-use-logical-spec":"^5.0.0","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.9","typescript":"3.7.2","webpack":"^5.83.1","webpack-cli":"^5.1.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/react":"^16.14.35","trim":">=0.0.3","postcss":"^8.4.23"},"browserslist":["defaults","not op_mini all","not kaios > 0"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
 
 /***/ }),