@airtable/blocks 0.0.0-experimental-f52bc4e5e-20250709 → 0.0.0-experimental-75d011284-20250904

package/dist/cjs/base/ui/popover.js

@@ -1,42 +1,21 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PopoverPlacements = exports.FitInWindowModes = void 0;
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.promise.js");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _emotion = require("emotion");
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
 var React = _interopRequireWildcard(require("react"));
-var _private_utils = require("../../shared/private_utils");
 var _error_utils = require("../../shared/error_utils");
 var _baymax_utils = require("./baymax_utils");
 var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
 var Geometry = _interopRequireWildcard(require("./geometry/geometry"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @module @airtable/blocks/ui: Popover */ /** */
+/** @module @airtable/blocks/ui: Popover */
+/** */
 // NOTE(evanhahn) I wasn't figure out a better way to document these enums
 // with JSDoc. The @memberof directive doesn't seem to work when the token
 // contains a period (as Popover.placements does).
@@ -45,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * to the anchor element. Accessed via `Tooltip.placements`.
  */
 // TODO (stephen): convert to createEnum
-var PopoverPlacements = exports.PopoverPlacements = /*#__PURE__*/function (PopoverPlacements) {
+let PopoverPlacements = exports.PopoverPlacements = /*#__PURE__*/function (PopoverPlacements) {
   PopoverPlacements["TOP"] = "top";
   PopoverPlacements["BOTTOM"] = "bottom";
   PopoverPlacements["CENTER"] = "center";
@@ -63,7 +42,7 @@ var PopoverPlacements = exports.PopoverPlacements = /*#__PURE__*/function (Popov
  * Dictates how a {@link Popover} or {@link Tooltip} component should be kept within the viewport. Accessed via `Popover.fitInWindowModes` or `Tooltip.fitInWindowModes`.
  */
 // TODO (stephen): convert to createEnum
-var FitInWindowModes = exports.FitInWindowModes = /*#__PURE__*/function (FitInWindowModes) {
+let FitInWindowModes = exports.FitInWindowModes = /*#__PURE__*/function (FitInWindowModes) {
   FitInWindowModes["NONE"] = "none";
   FitInWindowModes["FLIP"] = "flip";
   FitInWindowModes["NUDGE"] = "nudge";
@@ -84,324 +63,253 @@ var FitInWindowModes = exports.FitInWindowModes = /*#__PURE__*/function (FitInWi
  * @docsPath UI/components/Popover
  * @component
  */
-var Popover = /*#__PURE__*/function (_React$Component) {
+class Popover extends React.Component {
   /** @hidden */
-  function Popover(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, Popover);
-    _this = _callSuper(this, Popover, [props]);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_container", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_background", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_popoverContent", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_mouseDownOutsidePopover", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_detectElementResize", void 0);
-    _this._container = null;
-    _this._background = null;
-    _this._popoverContent = null;
-    _this._mouseDownOutsidePopover = false;
-    _this._onMouseDown = _this._onMouseDown.bind(_this);
-    _this._onMouseUp = _this._onMouseUp.bind(_this);
-    _this._refreshContainerAsync = _this._refreshContainerAsync.bind(_this);
-    return _this;
+  static placements = PopoverPlacements;
+  /** @hidden */
+  static fitInWindowModes = FitInWindowModes;
+
+  /** @hidden */
+  static defaultProps = {
+    placementX: PopoverPlacements.CENTER,
+    placementY: PopoverPlacements.BOTTOM,
+    placementOffsetX: 0,
+    placementOffsetY: 0,
+    fitInWindowMode: FitInWindowModes.FLIP,
+    isOpen: true
+  };
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @hidden */
+  constructor(props) {
+    super(props);
+    this._reactRoot = null;
+    this._container = null;
+    this._anchor = null;
+    this._background = null;
+    this._popoverContent = null;
+    this._mouseDownOutsidePopover = false;
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+    this._refreshContainerAsync = this._refreshContainerAsync.bind(this);
   }
   /** @hidden */
-  (0, _inherits2.default)(Popover, _React$Component);
-  return (0, _createClass2.default)(Popover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.isOpen) {
-        this._createContainer();
-      }
-      this._refreshContainerAsync();
+  componentDidMount() {
+    if (this.props.isOpen) {
+      this._createContainer();
     }
-    /** @hidden */
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.isOpen) {
-        this._createContainer();
-      } else {
-        this._destroyContainer();
-      }
+    this._refreshContainerAsync();
+  }
+  /** @hidden */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.isOpen) {
+      this._createContainer();
+    } else {
+      this._destroyContainer();
     }
-    /** @hidden */
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this._refreshContainerAsync();
+  }
+  /** @hidden */
+  componentDidUpdate() {
+    this._refreshContainerAsync();
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    this._destroyContainer();
+  }
+  /** @internal */
+  _createContainer() {
+    if (this._container) {
+      return;
     }
-    /** @hidden */
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._destroyContainer();
+    this._container = document.createElement('div');
+    const container = this._container;
+    container.setAttribute('tabIndex', '0');
+    container.style.zIndex = '99999';
+    container.style.position = 'relative';
+    (0, _error_utils.invariant)(document.body, 'no document body');
+    document.body.appendChild(container);
+    this._reactRoot = (0, _client.createRoot)(container);
+    window.addEventListener('scroll', this._refreshContainerAsync);
+    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._detectElementResize.addResizeListener(this._anchor, this._refreshContainerAsync);
+  }
+  /** @internal */
+  _destroyContainer() {
+    const container = this._container;
+    if (!container) {
+      return;
     }
-    /** @internal */
-  }, {
-    key: "_createContainer",
-    value: function _createContainer() {
-      if (this._container) {
-        return;
-      }
-      this._container = document.createElement('div');
-      var container = this._container;
-      container.setAttribute('tabIndex', '0');
-      container.style.zIndex = '99999';
-      container.style.position = 'relative';
-      (0, _error_utils.invariant)(document.body, 'no document body');
-      document.body.appendChild(container);
-      window.addEventListener('scroll', this._refreshContainerAsync);
-      this._detectElementResize = (0, _create_detect_element_resize.default)();
-      this._detectElementResize.addResizeListener(this._anchor, this._refreshContainerAsync);
+    window.removeEventListener('scroll', this._refreshContainerAsync);
+    if (this._detectElementResize) {
+      this._detectElementResize.removeResizeListener(this._anchor, this._refreshContainerAsync);
     }
-    /** @internal */
-  }, {
-    key: "_destroyContainer",
-    value: function _destroyContainer() {
-      var container = this._container;
-      if (!container) {
-        return;
-      }
-      window.removeEventListener('scroll', this._refreshContainerAsync);
-      if (this._detectElementResize) {
-        this._detectElementResize.removeResizeListener(this._anchor, this._refreshContainerAsync);
-      }
-      _reactDom.default.unmountComponentAtNode(container);
-      container.remove();
-      this._container = null;
+    this._reactRoot?.unmount();
+    container.remove();
+    this._container = null;
+  }
+  /** @internal */
+  async _refreshContainerAsync() {
+    if (!this._container) {
+      return;
     }
-    /** @internal */
-  }, {
-    key: "_anchor",
-    get: function get() {
-      // TODO: use a ref
-      // eslint-disable-next-line react/no-find-dom-node
-      return _reactDom.default.findDOMNode(this);
+    const anchor = this._anchor;
+    (0, _error_utils.invariant)(anchor instanceof Element, 'No anchor');
+    const anchorBoundingClientRect = anchor.getBoundingClientRect();
+    const anchorRect = new Geometry.Rect(anchorBoundingClientRect.left, anchorBoundingClientRect.top, anchorBoundingClientRect.width, anchorBoundingClientRect.height);
+    const viewportRect = new Geometry.Rect(0, 0, window.innerWidth, window.innerHeight);
+
+    // Render the tooltip to measure its size. Render it to the right of the anchor element
+    // to start. Wait for the async render to complete before measuring. Otherwise, the
+    await this._renderPopoverAtPositionAsync(anchorRect.right(), anchorRect.top());
+    const measurementPopover = this._popoverContent;
+    // HACK(10/17/19): The measurementPopover is sometimes not set, possibly due to some race
+    // condition with the the popover being unmounted but we've been unable to identify the root
+    // cause. Calling this function again on the next frame works as a workaround. We plan to
+    // rebuild popover/tooltip in the new SDK without using ReactDOM.unstable_renderSubtreeIntoContainer,
+    // so this is hopefully just a temporary measure.
+    if (!measurementPopover) {
+      requestAnimationFrame(this._refreshContainerAsync);
+      return;
     }
-    /** @internal */
-  }, {
-    key: "_refreshContainerAsync",
-    value: (function () {
-      var _refreshContainerAsync2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var anchor, anchorBoundingClientRect, anchorRect, viewportRect, measurementPopover, measurementPopoverBoundingRect, popoverSize, popoverRect, placementX, placementY, flippedPopoverRect;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (this._container) {
-                _context.next = 2;
-                break;
-              }
-              return _context.abrupt("return");
-            case 2:
-              anchor = this._anchor;
-              (0, _error_utils.invariant)(anchor instanceof Element, 'No anchor');
-              anchorBoundingClientRect = anchor.getBoundingClientRect();
-              anchorRect = new Geometry.Rect(anchorBoundingClientRect.left, anchorBoundingClientRect.top, anchorBoundingClientRect.width, anchorBoundingClientRect.height);
-              viewportRect = new Geometry.Rect(0, 0, window.innerWidth, window.innerHeight); // Render the tooltip to measure its size. Render it to the right of the anchor element
-              // to start. Wait for the async render to complete before measuring. Otherwise, the
-              _context.next = 9;
-              return this._renderPopoverAtPositionAsync(anchorRect.right(), anchorRect.top());
-            case 9:
-              measurementPopover = this._popoverContent; // HACK(10/17/19): The measurementPopover is sometimes not set, possibly due to some race
-              // condition with the the popover being unmounted but we've been unable to identify the root
-              // cause. Calling this function again on the next frame works as a workaround. We plan to
-              // rebuild popover/tooltip in the new SDK without using ReactDOM.unstable_renderSubtreeIntoContainer,
-              // so this is hopefully just a temporary measure.
-              if (measurementPopover) {
-                _context.next = 13;
-                break;
-              }
-              requestAnimationFrame(this._refreshContainerAsync);
-              return _context.abrupt("return");
-            case 13:
-              measurementPopoverBoundingRect = measurementPopover.getBoundingClientRect();
-              popoverSize = new Geometry.Size(measurementPopoverBoundingRect.width, measurementPopoverBoundingRect.height);
-              popoverRect = this._getPlacedPopoverRect(popoverSize, anchorRect, this.props.placementX, this.props.placementY);
-              if (this.props.fitInWindowMode === FitInWindowModes.FLIP && !this._isRectContainedWithinViewportRect(popoverRect, viewportRect)) {
-                // Popover rect is outside the viewport rect, and fitInWindowMode is flip, so
-                // let's try flipping the popover.
-                placementX = this.props.placementX;
-                placementY = this.props.placementY;
-                if (popoverRect.left() < viewportRect.left()) {
-                  placementX = PopoverPlacements.RIGHT;
-                } else if (popoverRect.right() > viewportRect.right()) {
-                  placementX = PopoverPlacements.LEFT;
-                }
-                if (popoverRect.top() < viewportRect.top()) {
-                  placementY = PopoverPlacements.BOTTOM;
-                } else if (popoverRect.bottom() > viewportRect.bottom()) {
-                  placementY = PopoverPlacements.TOP;
-                }
-                flippedPopoverRect = this._getPlacedPopoverRect(popoverSize, anchorRect, placementX, placementY); // Check if the flipped rect is within the viewport before using it. If the flipped rect
-                // is also outside the viewport, we might as well just use the original one and then nudge it.
-                if (this._isRectContainedWithinViewportRect(flippedPopoverRect, viewportRect)) {
-                  popoverRect = flippedPopoverRect;
-                }
-              }
-              if (this.props.fitInWindowMode !== FitInWindowModes.NONE) {
-                // Check again. If flipping didn't bring it inside viewport bounds,
-                // nudge it until it's within the viewport.
-                if (popoverRect.left() < viewportRect.left()) {
-                  popoverRect = new Geometry.Rect(viewportRect.left(), popoverRect.y, popoverRect.width, popoverRect.height);
-                } else if (popoverRect.right() > viewportRect.right()) {
-                  popoverRect = new Geometry.Rect(viewportRect.right() - popoverRect.width, popoverRect.y, popoverRect.width, popoverRect.height);
-                }
-                if (popoverRect.top() < viewportRect.top()) {
-                  popoverRect = new Geometry.Rect(popoverRect.x, viewportRect.top(), popoverRect.width, popoverRect.height);
-                } else if (popoverRect.bottom() > viewportRect.bottom()) {
-                  popoverRect = new Geometry.Rect(popoverRect.x, viewportRect.bottom() - popoverRect.height, popoverRect.width, popoverRect.height);
-                }
-              }
-              _context.next = 20;
-              return this._renderPopoverAtPositionAsync(popoverRect.left(), popoverRect.top());
-            case 20:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function _refreshContainerAsync() {
-        return _refreshContainerAsync2.apply(this, arguments);
-      }
-      return _refreshContainerAsync;
-    }() /** @internal */)
-  }, {
-    key: "_isRectContainedWithinViewportRect",
-    value: function _isRectContainedWithinViewportRect(rect, viewportRect) {
-      if (rect.left() < viewportRect.left() || rect.right() > viewportRect.right() || rect.top() < viewportRect.top() || rect.bottom() > viewportRect.bottom()) {
-        return false;
+    const measurementPopoverBoundingRect = measurementPopover.getBoundingClientRect();
+    const popoverSize = new Geometry.Size(measurementPopoverBoundingRect.width, measurementPopoverBoundingRect.height);
+    let popoverRect = this._getPlacedPopoverRect(popoverSize, anchorRect, this.props.placementX, this.props.placementY);
+    if (this.props.fitInWindowMode === FitInWindowModes.FLIP && !this._isRectContainedWithinViewportRect(popoverRect, viewportRect)) {
+      // Popover rect is outside the viewport rect, and fitInWindowMode is flip, so
+      // let's try flipping the popover.
+      let placementX = this.props.placementX;
+      let placementY = this.props.placementY;
+      if (popoverRect.left() < viewportRect.left()) {
+        placementX = PopoverPlacements.RIGHT;
+      } else if (popoverRect.right() > viewportRect.right()) {
+        placementX = PopoverPlacements.LEFT;
       }
-      return true;
-    }
-    /** @internal */
-  }, {
-    key: "_getPlacedPopoverRect",
-    value: function _getPlacedPopoverRect(popoverSize, anchorRect, placementX, placementY) {
-      var anchorCenterPoint = anchorRect.centerPoint();
-      var x;
-      if (placementX === PopoverPlacements.LEFT) {
-        x = anchorRect.left() - popoverSize.width - this.props.placementOffsetX;
-      } else if (placementX === PopoverPlacements.RIGHT) {
-        x = anchorRect.right() + this.props.placementOffsetX;
-      } else {
-        x = anchorCenterPoint.x - popoverSize.width / 2;
+      if (popoverRect.top() < viewportRect.top()) {
+        placementY = PopoverPlacements.BOTTOM;
+      } else if (popoverRect.bottom() > viewportRect.bottom()) {
+        placementY = PopoverPlacements.TOP;
       }
-      var y;
-      if (placementY === PopoverPlacements.TOP) {
-        y = anchorRect.top() - popoverSize.height - this.props.placementOffsetY;
-      } else if (placementY === PopoverPlacements.BOTTOM) {
-        y = anchorRect.bottom() + this.props.placementOffsetY;
-      } else {
-        y = anchorCenterPoint.y - popoverSize.height / 2;
+      const flippedPopoverRect = this._getPlacedPopoverRect(popoverSize, anchorRect, placementX, placementY);
+
+      // Check if the flipped rect is within the viewport before using it. If the flipped rect
+      // is also outside the viewport, we might as well just use the original one and then nudge it.
+      if (this._isRectContainedWithinViewportRect(flippedPopoverRect, viewportRect)) {
+        popoverRect = flippedPopoverRect;
       }
-      return new Geometry.Rect(x, y, popoverSize.width, popoverSize.height);
     }
-    /** @internal */
-  }, {
-    key: "_renderPopoverAtPositionAsync",
-    value: (function () {
-      var _renderPopoverAtPositionAsync2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(left, top) {
-        var content, backgroundClassName, backgroundStyle;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              content = this.props.renderContent();
-              content = /*#__PURE__*/React.cloneElement(content, {
-                ref: el => this._popoverContent = el,
-                style: _objectSpread(_objectSpread({}, content.props.style), {}, {
-                  position: 'absolute',
-                  top,
-                  left
-                })
-              });
-              backgroundClassName = (0, _emotion.cx)((0, _baymax_utils.baymax)('fixed all-0'), this.props.backgroundClassName);
-              backgroundStyle = this.props.backgroundStyle;
-              return _context2.abrupt("return", new Promise(resolve => {
-                var container = this._container;
-                (0, _error_utils.invariant)(container, 'container must exist');
-                // TODO(jb): we'll need to change this to support all versions of ReactDOM.
-                // Probably shouldn't be using unstable methods like this when we release the
-                // editor.
-                _reactDom.default.unstable_renderSubtreeIntoContainer(this, /*#__PURE__*/React.createElement("div", {
-                  ref: el => this._background = el,
-                  className: backgroundClassName,
-                  style: backgroundStyle,
-                  onMouseDown: this._onMouseDown,
-                  onMouseUp: this._onMouseUp
-                }, content), container, resolve);
-              }));
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function _renderPopoverAtPositionAsync(_x, _x2) {
-        return _renderPopoverAtPositionAsync2.apply(this, arguments);
+    if (this.props.fitInWindowMode !== FitInWindowModes.NONE) {
+      // Check again. If flipping didn't bring it inside viewport bounds,
+      // nudge it until it's within the viewport.
+      if (popoverRect.left() < viewportRect.left()) {
+        popoverRect = new Geometry.Rect(viewportRect.left(), popoverRect.y, popoverRect.width, popoverRect.height);
+      } else if (popoverRect.right() > viewportRect.right()) {
+        popoverRect = new Geometry.Rect(viewportRect.right() - popoverRect.width, popoverRect.y, popoverRect.width, popoverRect.height);
       }
-      return _renderPopoverAtPositionAsync;
-    }() /** @internal */)
-  }, {
-    key: "_onMouseDown",
-    value: function _onMouseDown(e) {
-      if (this._shouldClickingOnElementClosePopover(e.target)) {
-        this._mouseDownOutsidePopover = true;
+      if (popoverRect.top() < viewportRect.top()) {
+        popoverRect = new Geometry.Rect(popoverRect.x, viewportRect.top(), popoverRect.width, popoverRect.height);
+      } else if (popoverRect.bottom() > viewportRect.bottom()) {
+        popoverRect = new Geometry.Rect(popoverRect.x, viewportRect.bottom() - popoverRect.height, popoverRect.width, popoverRect.height);
       }
     }
-    /** @internal */
-  }, {
-    key: "_onMouseUp",
-    value: function _onMouseUp(e) {
-      if (this._mouseDownOutsidePopover && this.props.onClose && this._shouldClickingOnElementClosePopover(e.target)) {
-        this.props.onClose();
-      }
-      this._mouseDownOutsidePopover = false;
+    await this._renderPopoverAtPositionAsync(popoverRect.left(), popoverRect.top());
+  }
+  /** @internal */
+  _isRectContainedWithinViewportRect(rect, viewportRect) {
+    if (rect.left() < viewportRect.left() || rect.right() > viewportRect.right() || rect.top() < viewportRect.top() || rect.bottom() > viewportRect.bottom()) {
+      return false;
     }
-    /** @internal */
-  }, {
-    key: "_shouldClickingOnElementClosePopover",
-    value: function _shouldClickingOnElementClosePopover(element) {
-      return element === this._background;
+    return true;
+  }
+  /** @internal */
+  _getPlacedPopoverRect(popoverSize, anchorRect, placementX, placementY) {
+    const anchorCenterPoint = anchorRect.centerPoint();
+    let x;
+    if (placementX === PopoverPlacements.LEFT) {
+      x = anchorRect.left() - popoverSize.width - this.props.placementOffsetX;
+    } else if (placementX === PopoverPlacements.RIGHT) {
+      x = anchorRect.right() + this.props.placementOffsetX;
+    } else {
+      x = anchorCenterPoint.x - popoverSize.width / 2;
     }
-    /** @hidden */
-  }, {
-    key: "render",
-    value: function render() {
-      // TODO: if children is not a component (e.g. just string), wrap it in a div?
-      return this.props.children;
+    let y;
+    if (placementY === PopoverPlacements.TOP) {
+      y = anchorRect.top() - popoverSize.height - this.props.placementOffsetY;
+    } else if (placementY === PopoverPlacements.BOTTOM) {
+      y = anchorRect.bottom() + this.props.placementOffsetY;
+    } else {
+      y = anchorCenterPoint.y - popoverSize.height / 2;
     }
-  }]);
-}(React.Component);
-/** @hidden */
-(0, _defineProperty2.default)(Popover, "placements", PopoverPlacements);
-/** @hidden */
-(0, _defineProperty2.default)(Popover, "fitInWindowModes", FitInWindowModes);
-/** @hidden */
-(0, _defineProperty2.default)(Popover, "propTypes", {
-  children: _propTypes.default.element.isRequired,
-  renderContent: _propTypes.default.func.isRequired,
-  placementX: _propTypes.default.oneOf([PopoverPlacements.LEFT, PopoverPlacements.CENTER, PopoverPlacements.RIGHT]),
-  placementY: _propTypes.default.oneOf([PopoverPlacements.TOP, PopoverPlacements.CENTER, PopoverPlacements.BOTTOM]),
-  placementOffsetX: _propTypes.default.number,
-  placementOffsetY: _propTypes.default.number,
-  fitInWindowMode: _propTypes.default.oneOf((0, _private_utils.values)(FitInWindowModes)),
-  onClose: _propTypes.default.func,
-  isOpen: _propTypes.default.bool,
-  backgroundClassName: _propTypes.default.string,
-  backgroundStyle: _propTypes.default.object
-});
-/** @hidden */
-(0, _defineProperty2.default)(Popover, "defaultProps", {
-  placementX: PopoverPlacements.CENTER,
-  placementY: PopoverPlacements.BOTTOM,
-  placementOffsetX: 0,
-  placementOffsetY: 0,
-  fitInWindowMode: FitInWindowModes.FLIP,
-  isOpen: true
-});
+    return new Geometry.Rect(x, y, popoverSize.width, popoverSize.height);
+  }
+  /** @internal */
+  async _renderPopoverAtPositionAsync(left, top) {
+    let content = this.props.renderContent();
+    content = /*#__PURE__*/React.cloneElement(content, {
+      ref: el => {
+        this._popoverContent = el;
+      },
+      style: {
+        ...content.props.style,
+        position: 'absolute',
+        top,
+        left
+      }
+    });
+    const backgroundClassName = (0, _emotion.cx)((0, _baymax_utils.baymax)('fixed all-0'), this.props.backgroundClassName);
+    const backgroundStyle = this.props.backgroundStyle;
+    return new Promise(resolve => {
+      const container = this._container;
+      (0, _error_utils.invariant)(container, 'container must exist');
+      const root = this._reactRoot;
+      (0, _error_utils.invariant)(root, 'root must exist');
+      root.render( /*#__PURE__*/React.createElement("div", {
+        ref: el => {
+          this._background = el;
+          resolve();
+        },
+        className: backgroundClassName,
+        style: backgroundStyle,
+        onMouseDown: this._onMouseDown,
+        onMouseUp: this._onMouseUp
+      }, content));
+    });
+  }
+  /** @internal */
+  _onMouseDown(e) {
+    if (this._shouldClickingOnElementClosePopover(e.target)) {
+      this._mouseDownOutsidePopover = true;
+    }
+  }
+  /** @internal */
+  _onMouseUp(e) {
+    if (this._mouseDownOutsidePopover && this.props.onClose && this._shouldClickingOnElementClosePopover(e.target)) {
+      this.props.onClose();
+    }
+    this._mouseDownOutsidePopover = false;
+  }
+  /** @internal */
+  _shouldClickingOnElementClosePopover(element) {
+    return element === this._background;
+  }
+  /** @hidden */
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: el => {
+        this._anchor = el;
+      }
+    }, this.props.children);
+  }
+}
 var _default = exports.default = Popover;