@atlaskit/editor-common 69.2.1 → 69.3.0

package/dist/esm/transforms/layout.js

@@ -0,0 +1,58 @@
+import { Fragment, Slice } from 'prosemirror-model';
+import { flatmap, mapFragment } from '../utils/slice';
+
+var isLayoutNode = function isLayoutNode(node) {
+  return node.type === node.type.schema.nodes.layoutSection || node.type === node.type.schema.nodes.layoutColumn;
+};
+
+export function unwrapContentFromLayout(maybeLayoutSection) {
+  var fragment = mapFragment(Fragment.from(maybeLayoutSection), function (node) {
+    return isLayoutNode(node) ? node.content : node;
+  });
+  var nodes = [];
+  fragment.forEach(function (i) {
+    return nodes.push(i);
+  });
+  return nodes;
+}
+export function removeLayoutFromFirstChild(node, i) {
+  return i === 0 ? unwrapContentFromLayout(node) : node;
+}
+export function removeLayoutFromLastChild(node, i, fragment) {
+  return i === fragment.childCount - 1 ? unwrapContentFromLayout(node) : node;
+}
+/**
+ * When we have a slice that cuts across a layoutSection/layoutColumn
+ * we can end up with unexpected behaviour on paste/drop where a user
+ * is able to add columns to a layoutSection. By 'lifting' any content
+ * inside an 'open' layoutSection/layoutColumn to the top level, we
+ * can ensure prevent this.
+ *
+ * We only care about slices with non-zero openStart / openEnd's here
+ * as we're totally fine for people to copy/paste a full layoutSection
+ */
+
+export function transformSliceToRemoveOpenLayoutNodes(slice, schema) {
+  // Case 1: A slice entirely within a single layoutSection
+  if (slice.openStart && slice.openEnd && slice.content.childCount === 1) {
+    var maybeLayoutSection = slice.content.firstChild;
+
+    if (maybeLayoutSection.type === schema.nodes.layoutSection) {
+      return new Slice(flatmap(slice.content, removeLayoutFromFirstChild), // '-2' here because we've removed the layoutSection/layoutColumn; reducing the open depth.
+      slice.openStart - 2, slice.openEnd - 2);
+    }
+  } // Case 2: A slice starting inside a layoutSection and finishing outside
+
+
+  if (slice.openStart && slice.content.firstChild.type === schema.nodes.layoutSection) {
+    slice = new Slice(flatmap(slice.content, removeLayoutFromFirstChild), slice.openStart - 2, slice.openEnd);
+  } // Case 3: A slice starting outside a layoutSection and finishing inside
+
+
+  if (slice.openEnd && slice.content.lastChild.type === schema.nodes.layoutSection) {
+    slice = new Slice(flatmap(slice.content, removeLayoutFromLastChild), slice.openStart, slice.openEnd - 2);
+  } // Case 2 & 3 also handles a slice starting in one layoutSection & finishing in a different layoutSection
+
+
+  return slice;
+}

package/dist/esm/types/command.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/context-panel.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/editor-actions.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/editor-appearance.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/editor-container-width.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/editor-plugin.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/editor-react-context.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/empty-state-handler.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/feature-flags.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/floating-toolbar.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/index.js

@@ -6,4 +6,5 @@ export var SortOrder;
   SortOrder["NO_ORDER"] = "no_order";
 })(SortOrder || (SortOrder = {}));
 
-export { AnnotationUpdateEmitter, AnnotationUpdateEvent } from './annotation';
+export { AnnotationUpdateEmitter, AnnotationUpdateEvent } from './annotation';
+export { ToolbarSize, ToolbarWidths, ToolbarWidthsFullPage } from './toolbar';

package/dist/esm/types/plugin-factory.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/prosemirror-config.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/quick-insert.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/supported-browsers.js

@@ -0,0 +1,2 @@
+var SupportedBrowsers = ['ie', 'gecko', 'chrome', 'safari'];
+export {};

package/dist/esm/types/toolbar.js

@@ -0,0 +1,30 @@
+export var ToolbarSize;
+
+(function (ToolbarSize) {
+  ToolbarSize[ToolbarSize["XXL"] = 6] = "XXL";
+  ToolbarSize[ToolbarSize["XL"] = 5] = "XL";
+  ToolbarSize[ToolbarSize["L"] = 4] = "L";
+  ToolbarSize[ToolbarSize["M"] = 3] = "M";
+  ToolbarSize[ToolbarSize["S"] = 2] = "S";
+  ToolbarSize[ToolbarSize["XXXS"] = 1] = "XXXS";
+})(ToolbarSize || (ToolbarSize = {}));
+
+export var ToolbarWidths;
+
+(function (ToolbarWidths) {
+  ToolbarWidths[ToolbarWidths["XXL"] = 610] = "XXL";
+  ToolbarWidths[ToolbarWidths["XL"] = 540] = "XL";
+  ToolbarWidths[ToolbarWidths["L"] = 460] = "L";
+  ToolbarWidths[ToolbarWidths["M"] = 450] = "M";
+  ToolbarWidths[ToolbarWidths["S"] = 370] = "S";
+})(ToolbarWidths || (ToolbarWidths = {}));
+
+export var ToolbarWidthsFullPage;
+
+(function (ToolbarWidthsFullPage) {
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XXL"] = 650] = "XXL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XL"] = 580] = "XL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["L"] = 540] = "L";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["M"] = 490] = "M";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["S"] = 410] = "S";
+})(ToolbarWidthsFullPage || (ToolbarWidthsFullPage = {}));

package/dist/esm/types/ui-components.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/DropList/index.js

@@ -0,0 +1,205 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import Layer from '../Layer';
+var packageName = "@atlaskit/editor-common";
+var packageVersion = "69.3.0";
+var halfFocusRing = 1;
+var dropOffset = "0, ".concat(gridSize(), "px");
+
+var DropList = /*#__PURE__*/function (_Component) {
+  _inherits(DropList, _Component);
+
+  var _super = _createSuper(DropList);
+
+  function DropList() {
+    var _this;
+
+    _classCallCheck(this, DropList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
+
+    _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
+
+    _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), themed({
+        light: token('color.text', N900),
+        dark: token('color.text', DN600)
+      })(theme), themed({
+        light: token('elevation.surface.overlay', N0),
+        dark: token('elevation.surface.overlay', DN50)
+      })(theme), borderRadius(), gridSize() / 2, gridSize(), gridSize() / 4, N50A, N60A, gridSize() / 2);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+      _this.setContentWidth(); // We use a captured event here to avoid a radio or checkbox dropdown item firing its
+      // click event first, which would cause a re-render of the element and prevent DropList
+      // from detecting the actual source of this original click event.
+
+
+      document.addEventListener('click', _this.handleClickOutside, true);
+      document.addEventListener('keydown', _this.handleEsc);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
+      if (_this.props.isOpen) {
+        _this.setContentWidth();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
+      document.removeEventListener('click', _this.handleClickOutside, true);
+      document.removeEventListener('keydown', _this.handleEsc);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setContentWidth", function () {
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          dropContentRef = _assertThisInitialize.dropContentRef,
+          triggerRef = _assertThisInitialize.triggerRef;
+
+      var shouldFitContainer = _this.props.shouldFitContainer; // We need to manually set the content width to match the trigger width
+
+      if (shouldFitContainer && dropContentRef && triggerRef) {
+        dropContentRef.style.width = "".concat(triggerRef.offsetWidth - halfFocusRing * 2, "px");
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleEsc", function (event) {
+      if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
+        _this.close(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (event) {
+      if (_this.props.isOpen) {
+        if (event.target instanceof Node) {
+          // Rather than check for the target within the entire DropList, we specify the trigger/content.
+          // This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
+          // blanket which stretches to the viewport should not stop 'close' from being triggered.
+          var withinTrigger = _this.triggerRef && _this.triggerRef.contains(event.target);
+
+          var withinContent = _this.dropContentRef && _this.dropContentRef.contains(event.target);
+
+          if (!withinTrigger && !withinContent) {
+            _this.close(event);
+          }
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "close", function (event) {
+      if (_this.props.onOpenChange) {
+        _this.props.onOpenChange({
+          isOpen: false,
+          event: event
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleContentRef", function (ref) {
+      _this.dropContentRef = ref; // If the dropdown has just been opened, we focus on the containing element so the
+      // user can tab to the first dropdown item. We will only receive this ref if isOpen
+      // is true or null, so no need to check for truthiness here.
+
+      if (ref) {
+        ref.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTriggerRef", function (ref) {
+      _this.triggerRef = ref;
+    });
+
+    return _this;
+  }
+
+  _createClass(DropList, [{
+    key: "getChildContext",
+    value:
+    /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+    function getChildContext() {
+      return {
+        shouldAllowMultilineItems: false
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          isOpen = _this$props.isOpen,
+          position = _this$props.position,
+          trigger = _this$props.trigger,
+          onPositioned = _this$props.onPositioned,
+          testId = _this$props.testId;
+      var layerContent = isOpen ? jsx("div", {
+        css: function css(theme) {
+          return _this2.menuWrapper({
+            theme: theme
+          });
+        },
+        "data-role": "droplistContent",
+        "data-testid": testId && "".concat(testId, "--content"),
+        ref: this.handleContentRef
+      }, children) : null;
+      return jsx("div", {
+        css: this.wrapperStyles
+      }, jsx(Layer, {
+        content: layerContent,
+        offset: dropOffset,
+        position: position,
+        onPositioned: onPositioned
+      }, jsx("div", {
+        css: this.triggerStyles,
+        ref: this.handleTriggerRef
+      }, trigger)));
+    }
+  }]);
+
+  return DropList;
+}(Component);
+
+var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+export default withAnalyticsContext({
+  componentName: 'droplist',
+  packageName: packageName,
+  packageVersion: packageVersion
+})(withAnalyticsEvents({
+  onOpenChange: createAndFireEventOnAtlaskit({
+    action: 'toggled',
+    actionSubject: 'droplist',
+    attributes: {
+      componentName: 'droplist',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DropList));

package/dist/esm/ui/ErrorBoundary/index.js

@@ -0,0 +1,84 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { ACTION, EVENT_TYPE } from '../../analytics';
+export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      errorCaptured: false
+    });
+
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "hasFallback",
+    value: function hasFallback() {
+      return typeof this.props.fallbackComponent !== 'undefined';
+    }
+  }, {
+    key: "shouldRecover",
+    value: function shouldRecover() {
+      return this.hasFallback() && this.state.errorCaptured;
+    }
+  }, {
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      if (this.props.dispatchAnalyticsEvent) {
+        this.props.dispatchAnalyticsEvent({
+          action: ACTION.EDITOR_CRASHED,
+          actionSubject: this.props.component,
+          actionSubjectId: this.props.componentId,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            error: error,
+            errorInfo: errorInfo,
+            // @ts-expect-error
+            errorRethrown: !this.hasFallback()
+          }
+        });
+      }
+
+      if (this.hasFallback()) {
+        this.setState({
+          errorCaptured: true
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.shouldRecover()) {
+        return this.props.fallbackComponent;
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React.Component);

package/dist/esm/ui/Layer/index.js

@@ -0,0 +1,228 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import Popper from 'popper.js'; // eslint-disable-line import/extensions
+
+import rafSchedule from 'raf-schd';
+import { positionPropToPopperPosition } from './internal/helpers';
+var defaultState = {
+  hasExtractedStyles: false,
+  // We set these default offsets to prevent a flash of popper content in the wrong position
+  // which can cause incorrect height calculations. Popper will calculate these values
+  offsets: {
+    popper: {
+      left: -9999,
+      top: -9999,
+      position: null
+    }
+  },
+  // fix Safari parent width: https://product-fabric.atlassian.net/browse/ED-1784
+  cssPosition: 'absolute',
+  originalHeight: null,
+  maxHeight: null
+};
+
+var Layer = /*#__PURE__*/function (_Component) {
+  _inherits(Layer, _Component);
+
+  var _super = _createSuper(Layer);
+
+  // working with extract-react-types
+  function Layer(props) {
+    var _this;
+
+    _classCallCheck(this, Layer);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "targetRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "contentRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "extractStyles", function (state) {
+      if (state) {
+        var popperHeight = state.offsets.popper.height;
+        var left = Math.round(state.offsets.popper.left);
+        var top = Math.round(state.offsets.popper.top);
+        var cssPosition = 'absolute';
+        var originalHeight = _this.state.originalHeight || popperHeight;
+
+        var maxHeight = _this.calculateMaxHeight(originalHeight, popperHeight, top, cssPosition);
+
+        _this.setState({
+          // position: fixed or absolute
+          cssPosition: cssPosition,
+          hasExtractedStyles: true,
+          transform: "translate3d(".concat(left, "px, ").concat(top, "px, 0px)"),
+          originalHeight: originalHeight,
+          maxHeight: maxHeight
+        });
+      }
+    });
+
+    _this.state = defaultState;
+    _this.extractStyles = rafSchedule(_this.extractStyles.bind(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  _createClass(Layer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.applyPopper(this.props);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      this.applyPopper(nextProps);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var onPositioned = this.props.onPositioned;
+      var hasExtractedStyles = this.state.hasExtractedStyles; // This flag is set the first time the position is calculated from Popper and applied to the content
+
+      if (!prevState.hasExtractedStyles && hasExtractedStyles && onPositioned) {
+        onPositioned();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // this.extractStyles.cancel();
+      if (this.popper) {
+        this.popper.destroy();
+      }
+    }
+    /* Calculate the max height of the popper if it's height is greater than the viewport to prevent
+     * the bottom of the popper not being viewable.
+     * Only works if the popper uses viewport as the boundary and has a fixed position ancestor.
+     */
+
+  }, {
+    key: "calculateMaxHeight",
+    value: function calculateMaxHeight(originalHeight, currentHeight, positionTop, cssPosition) {
+      var DocumentElementClientHeight = 0;
+
+      if (document.documentElement) {
+        DocumentElementClientHeight = document.documentElement.clientHeight;
+      }
+
+      if (cssPosition !== 'fixed') {
+        return null;
+      }
+
+      var viewportHeight = Math.max(DocumentElementClientHeight, window.innerHeight || 0);
+      return viewportHeight < originalHeight && currentHeight + positionTop >= viewportHeight - 50 ? // allow some spacing either side of viewport height
+      viewportHeight - 12 : null;
+    }
+  }, {
+    key: "applyPopper",
+    value: function applyPopper(props) {
+      if (!this.targetRef.current || !this.contentRef.current) {
+        return;
+      }
+
+      if (this.popper) {
+        this.popper.destroy();
+      } // "new Popper(...)" operation is very expensive when called on virtual DOM.
+      // This condition reduces the number of calls so we can run our tests faster
+      // (time was reduced from 100s to 13s).
+
+
+      if (!props.content) {
+        return;
+      } // we wrap our target in a div so that we can safely get a reference to it, but we pass the
+      // actual target to popper
+
+
+      var isAlwaysFixed = false;
+      var actualTarget = this.targetRef.current.children[0];
+      var popperOpts = {
+        placement: positionPropToPopperPosition(props.position),
+        onCreate: this.extractStyles,
+        onUpdate: this.extractStyles,
+        modifiers: {
+          applyStyle: {
+            enabled: false
+          },
+          hide: {
+            enabled: false
+          },
+          offset: {
+            enabled: true,
+            offset: this.props.offset
+          },
+          flip: {
+            enabled: false,
+            flipVariations: true,
+            boundariesElement: 'viewport',
+            padding: 0 // leave 0 pixels between popper and the boundariesElement
+
+          },
+          preventOverflow: {
+            enabled: false,
+            escapeWithReference: true
+          }
+        },
+        positionFixed: isAlwaysFixed
+      };
+
+      if (actualTarget) {
+        this.popper = new Popper(actualTarget, this.contentRef.current, popperOpts);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          transform = _this$state.transform,
+          hasExtractedStyles = _this$state.hasExtractedStyles,
+          maxHeight = _this$state.maxHeight;
+      var opacity = hasExtractedStyles ? {} : {
+        opacity: 0
+      };
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        ref: this.targetRef
+      }, this.props.children), /*#__PURE__*/React.createElement("div", {
+        ref: this.contentRef,
+        style: _objectSpread({
+          top: 0,
+          left: 0,
+          position: 'absolute',
+          transform: transform,
+          maxHeight: maxHeight ? maxHeight : 'auto'
+        }, opacity)
+      }, this.props.content));
+    }
+  }]);
+
+  return Layer;
+}(Component);
+
+_defineProperty(Layer, "defaultProps", {
+  boundariesElement: 'viewport',
+  children: null,
+  content: null,
+  offset: '0, 0',
+  position: 'right middle',
+  zIndex: 400,
+  lockScroll: false,
+  isAlwaysFixed: false,
+  onPositioned: function onPositioned() {}
+});
+
+export { Layer as default };