@carbon/react 1.27.0 → 1.28.0

package/lib/internal/ClickListener.js

@@ -23,83 +23,67 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * given `children` element.
  */
 
-var ClickListener = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(ClickListener, _React$Component);
+class ClickListener extends React__default["default"].Component {
+  static getEventTarget(evt) {
+    // support Shadow DOM
+    if (evt.composed && typeof evt.composedPath === 'function') {
+      return evt.composedPath()[0];
+    }
 
-  var _super = _rollupPluginBabelHelpers.createSuper(ClickListener);
+    return evt.target;
+  }
 
-  function ClickListener(props) {
-    var _this;
+  constructor(props) {
+    super(props); // We manually bind handlers in this Component, versus using class
+    // properties, so that we can properly test the `handleRef` handler.
 
-    _rollupPluginBabelHelpers.classCallCheck(this, ClickListener);
+    this.handleRef = this.handleRef.bind(this);
+    this.handleDocumentClick = this.handleDocumentClick.bind(this);
+  }
 
-    _this = _super.call(this, props); // We manually bind handlers in this Component, versus using class
-    // properties, so that we can properly test the `handleRef` handler.
+  componentDidMount() {
+    document.addEventListener('click', this.handleDocumentClick);
+  }
 
-    _this.handleRef = _this.handleRef.bind(_rollupPluginBabelHelpers.assertThisInitialized(_this));
-    _this.handleDocumentClick = _this.handleDocumentClick.bind(_rollupPluginBabelHelpers.assertThisInitialized(_this));
-    return _this;
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleDocumentClick);
   }
 
-  _rollupPluginBabelHelpers.createClass(ClickListener, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('click', this.handleDocumentClick);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('click', this.handleDocumentClick);
-    }
-  }, {
-    key: "handleDocumentClick",
-    value: function handleDocumentClick(evt) {
-      if (this.element) {
-        if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
-          this.props.onClickOutside(evt);
-        }
+  handleDocumentClick(evt) {
+    if (this.element) {
+      if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
+        this.props.onClickOutside(evt);
       }
     }
-  }, {
-    key: "handleRef",
-    value: function handleRef(el) {
-      var children = this.props.children;
-      this.element = el;
-      /**
-       * One important note, `children.ref` corresponds to a `ref` prop passed in
-       * directly to the child, not necessarily a `ref` defined in the component.
-       * This means that here we target the following `ref` location:
-       *
-       * <ClickListener onClickOutside={() => {}}>
-       *   <Child ref={targetedRefHere} />
-       * </ClickListener>
-       */
-
-      if (children.ref && typeof children.ref === 'function') {
-        children.ref(el);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React__default["default"].cloneElement(this.props.children, {
-        ref: this.handleRef
-      });
-    }
-  }], [{
-    key: "getEventTarget",
-    value: function getEventTarget(evt) {
-      // support Shadow DOM
-      if (evt.composed && typeof evt.composedPath === 'function') {
-        return evt.composedPath()[0];
-      }
+  }
 
-      return evt.target;
+  handleRef(el) {
+    const {
+      children
+    } = this.props;
+    this.element = el;
+    /**
+     * One important note, `children.ref` corresponds to a `ref` prop passed in
+     * directly to the child, not necessarily a `ref` defined in the component.
+     * This means that here we target the following `ref` location:
+     *
+     * <ClickListener onClickOutside={() => {}}>
+     *   <Child ref={targetedRefHere} />
+     * </ClickListener>
+     */
+
+    if (children.ref && typeof children.ref === 'function') {
+      children.ref(el);
     }
-  }]);
+  }
+
+  render() {
+    return /*#__PURE__*/React__default["default"].cloneElement(this.props.children, {
+      ref: this.handleRef
+    });
+  }
 
-  return ClickListener;
-}(React__default["default"].Component);
+}
 
 _rollupPluginBabelHelpers.defineProperty(ClickListener, "propTypes", {
   children: PropTypes__default["default"].element.isRequired,

package/lib/internal/FloatingMenu.js

@@ -57,10 +57,10 @@ var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
  * @property {string} position Position style (static, absolute, relative...)
  */
 
-var DIRECTION_LEFT = 'left';
-var DIRECTION_TOP = 'top';
-var DIRECTION_RIGHT = 'right';
-var DIRECTION_BOTTOM = 'bottom';
+const DIRECTION_LEFT = 'left';
+const DIRECTION_TOP = 'top';
+const DIRECTION_RIGHT = 'right';
+const DIRECTION_BOTTOM = 'bottom';
 /**
  * @param {FloatingMenu~offset} [oldMenuOffset={}] The old value.
  * @param {FloatingMenu~offset} [menuOffset={}] The new value.
@@ -68,11 +68,11 @@ var DIRECTION_BOTTOM = 'bottom';
  * @private
  */
 
-var hasChangeInOffset = function hasChangeInOffset() {
-  var oldMenuOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var menuOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+const hasChangeInOffset = function () {
+  let oldMenuOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let menuOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-  if (_rollupPluginBabelHelpers["typeof"](oldMenuOffset) !== _rollupPluginBabelHelpers["typeof"](menuOffset)) {
+  if (typeof oldMenuOffset !== typeof menuOffset) {
     return true;
   }
 
@@ -96,64 +96,56 @@ var hasChangeInOffset = function hasChangeInOffset() {
  */
 
 
-var getFloatingPosition = function getFloatingPosition(_ref) {
-  var _DIRECTION_LEFT$DIREC;
-
-  var menuSize = _ref.menuSize,
-      _ref$refPosition = _ref.refPosition,
-      refPosition = _ref$refPosition === void 0 ? {} : _ref$refPosition,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? {} : _ref$offset,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? DIRECTION_BOTTOM : _ref$direction,
-      _ref$scrollX = _ref.scrollX,
-      pageXOffset = _ref$scrollX === void 0 ? 0 : _ref$scrollX,
-      _ref$scrollY = _ref.scrollY,
-      pageYOffset = _ref$scrollY === void 0 ? 0 : _ref$scrollY,
-      container = _ref.container;
-  var _refPosition$left = refPosition.left,
-      refLeft = _refPosition$left === void 0 ? 0 : _refPosition$left,
-      _refPosition$top = refPosition.top,
-      refTop = _refPosition$top === void 0 ? 0 : _refPosition$top,
-      _refPosition$right = refPosition.right,
-      refRight = _refPosition$right === void 0 ? 0 : _refPosition$right,
-      _refPosition$bottom = refPosition.bottom,
-      refBottom = _refPosition$bottom === void 0 ? 0 : _refPosition$bottom;
-  var scrollX = container.position !== 'static' ? 0 : pageXOffset;
-  var scrollY = container.position !== 'static' ? 0 : pageYOffset;
-  var relativeDiff = {
+const getFloatingPosition = _ref => {
+  let {
+    menuSize,
+    refPosition = {},
+    offset = {},
+    direction = DIRECTION_BOTTOM,
+    scrollX: pageXOffset = 0,
+    scrollY: pageYOffset = 0,
+    container
+  } = _ref;
+  const {
+    left: refLeft = 0,
+    top: refTop = 0,
+    right: refRight = 0,
+    bottom: refBottom = 0
+  } = refPosition;
+  const scrollX = container.position !== 'static' ? 0 : pageXOffset;
+  const scrollY = container.position !== 'static' ? 0 : pageYOffset;
+  const relativeDiff = {
     top: container.position !== 'static' ? container.rect.top : 0,
     left: container.position !== 'static' ? container.rect.left : 0
   };
-  var width = menuSize.width,
-      height = menuSize.height;
-  var _offset$top = offset.top,
-      top = _offset$top === void 0 ? 0 : _offset$top,
-      _offset$left = offset.left,
-      left = _offset$left === void 0 ? 0 : _offset$left;
-  var refCenterHorizontal = (refLeft + refRight) / 2;
-  var refCenterVertical = (refTop + refBottom) / 2;
-  return (_DIRECTION_LEFT$DIREC = {}, _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, function () {
-    return {
+  const {
+    width,
+    height
+  } = menuSize;
+  const {
+    top = 0,
+    left = 0
+  } = offset;
+  const refCenterHorizontal = (refLeft + refRight) / 2;
+  const refCenterVertical = (refTop + refBottom) / 2;
+  return {
+    [DIRECTION_LEFT]: () => ({
       left: refLeft - width + scrollX - left - relativeDiff.left,
       top: refCenterVertical - height / 2 + scrollY + top - 9 - relativeDiff.top
-    };
-  }), _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, function () {
-    return {
+    }),
+    [DIRECTION_TOP]: () => ({
       left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
       top: refTop - height + scrollY - top - relativeDiff.top
-    };
-  }), _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, function () {
-    return {
+    }),
+    [DIRECTION_RIGHT]: () => ({
       left: refRight + scrollX + left - relativeDiff.left,
       top: refCenterVertical - height / 2 + scrollY + top + 3 - relativeDiff.top
-    };
-  }), _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, function () {
-    return {
+    }),
+    [DIRECTION_BOTTOM]: () => ({
       left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
       top: refBottom + scrollY + top - relativeDiff.top
-    };
-  }), _DIRECTION_LEFT$DIREC)[direction]();
+    })
+  }[direction]();
 };
 /**
  * A menu that is detached from the triggering element.
@@ -161,25 +153,16 @@ var getFloatingPosition = function getFloatingPosition(_ref) {
  */
 
 
-var FloatingMenu = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(FloatingMenu, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(FloatingMenu);
-
-  function FloatingMenu() {
+class FloatingMenu extends React__default["default"].Component {
+  constructor() {
     var _this;
 
-    _rollupPluginBabelHelpers.classCallCheck(this, FloatingMenu);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    super(...arguments);
+    _this = this;
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _rollupPluginBabelHelpers.defineProperty(this, "_placeInProgress", false);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_placeInProgress", false);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
       /**
        * The position of the menu, relative to the top-left corner of the viewport.
        * @type {FloatingMenu~offset}
@@ -187,49 +170,53 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       floatingPosition: undefined
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_menuContainer", null);
+    _rollupPluginBabelHelpers.defineProperty(this, "_menuContainer", null);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_menuBody", null);
+    _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "startSentinel", /*#__PURE__*/React__default["default"].createRef());
+    _rollupPluginBabelHelpers.defineProperty(this, "startSentinel", /*#__PURE__*/React__default["default"].createRef());
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "endSentinel", /*#__PURE__*/React__default["default"].createRef());
+    _rollupPluginBabelHelpers.defineProperty(this, "endSentinel", /*#__PURE__*/React__default["default"].createRef());
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_updateMenuSize", function () {
-      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var menuBody = _this._menuBody;
+    _rollupPluginBabelHelpers.defineProperty(this, "_updateMenuSize", function () {
+      let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      let isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      const menuBody = _this._menuBody;
       process.env.NODE_ENV !== "production" ? warning.warning(menuBody, 'The DOM node for menu body for calculating its position is not available. Skipping...') : void 0;
 
       if (!menuBody) {
         return;
       }
 
-      var _prevProps$menuOffset = prevProps.menuOffset,
-          oldMenuOffset = _prevProps$menuOffset === void 0 ? {} : _prevProps$menuOffset,
-          oldMenuDirection = prevProps.menuDirection;
-      var _this$props = _this.props,
-          _this$props$menuOffse = _this$props.menuOffset,
-          menuOffset = _this$props$menuOffse === void 0 ? {} : _this$props$menuOffse,
-          menuDirection = _this$props.menuDirection;
+      const {
+        menuOffset: oldMenuOffset = {},
+        menuDirection: oldMenuDirection
+      } = prevProps;
+      const {
+        menuOffset = {},
+        menuDirection
+      } = _this.props;
 
       if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
-        var _this$props2 = _this.props,
-            flipped = _this$props2.flipped,
-            triggerRef = _this$props2.triggerRef,
-            updateOrientation = _this$props2.updateOrientation;
-        var triggerEl = triggerRef.current;
-        var menuSize = menuBody.getBoundingClientRect();
-        var refPosition = triggerEl && triggerEl.getBoundingClientRect();
-        var offset = typeof menuOffset !== 'function' ? menuOffset : menuOffset(menuBody, menuDirection, triggerEl, flipped); // Optional function to allow parent component to check
+        const {
+          flipped,
+          triggerRef,
+          updateOrientation
+        } = _this.props;
+        const {
+          current: triggerEl
+        } = triggerRef;
+        const menuSize = menuBody.getBoundingClientRect();
+        const refPosition = triggerEl && triggerEl.getBoundingClientRect();
+        const offset = typeof menuOffset !== 'function' ? menuOffset : menuOffset(menuBody, menuDirection, triggerEl, flipped); // Optional function to allow parent component to check
         // if the orientation needs to be changed based on params
 
         if (updateOrientation) {
           updateOrientation({
-            menuSize: menuSize,
-            refPosition: refPosition,
+            menuSize,
+            refPosition,
             direction: menuDirection,
-            offset: offset,
+            offset,
             scrollX: window__default["default"].pageXOffset,
             scrollY: window__default["default"].pageYOffset,
             container: {
@@ -245,10 +232,10 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
         if (menuSize.width > 0 && menuSize.height > 0 || !offset) {
           _this.setState({
             floatingPosition: getFloatingPosition({
-              menuSize: menuSize,
-              refPosition: refPosition,
+              menuSize,
+              refPosition,
               direction: menuDirection,
-              offset: offset,
+              offset,
               scrollX: window__default["default"].pageXOffset,
               scrollY: window__default["default"].pageYOffset,
               container: {
@@ -256,9 +243,9 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
                 position: getComputedStyle(_this.props.target()).position
               }
             })
-          }, function () {
+          }, () => {
             if (!isAdjustment) {
-              var newMenuSize = menuBody.getBoundingClientRect();
+              const newMenuSize = menuBody.getBoundingClientRect();
 
               if (newMenuSize !== menuSize) {
                 _this._updateMenuSize(_this.props, true);
@@ -269,11 +256,11 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_focusMenuContent", function (menuBody) {
-      var primaryFocusNode = menuBody.querySelector(_this.props.selectorPrimaryFocus || null);
-      var tabbableNode = menuBody.querySelector(navigation.selectorTabbable);
-      var focusableNode = menuBody.querySelector(navigation.selectorFocusable);
-      var focusTarget = primaryFocusNode || // User defined focusable node
+    _rollupPluginBabelHelpers.defineProperty(this, "_focusMenuContent", menuBody => {
+      const primaryFocusNode = menuBody.querySelector(this.props.selectorPrimaryFocus || null);
+      const tabbableNode = menuBody.querySelector(navigation.selectorTabbable);
+      const focusableNode = menuBody.querySelector(navigation.selectorFocusable);
+      const focusTarget = primaryFocusNode || // User defined focusable node
       tabbableNode || // First sequentially focusable node
       focusableNode || // First programmatic focusable node
       menuBody;
@@ -284,133 +271,139 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_menuRef", function (menuBody) {
-      var menuRef = _this.props.menuRef;
-      _this._placeInProgress = !!menuBody;
-      menuRef && menuRef(_this._menuBody = menuBody);
+    _rollupPluginBabelHelpers.defineProperty(this, "_menuRef", menuBody => {
+      const {
+        menuRef
+      } = this.props;
+      this._placeInProgress = !!menuBody;
+      menuRef && menuRef(this._menuBody = menuBody);
 
       if (menuBody) {
-        _this._updateMenuSize();
+        this._updateMenuSize();
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_getChildrenWithProps", function () {
-      var _this$props3 = _this.props,
-          styles = _this$props3.styles,
-          children = _this$props3.children;
-      var pos = _this.state.floatingPosition; // If no pos available, we need to hide the element (offscreen to the left)
+    _rollupPluginBabelHelpers.defineProperty(this, "_getChildrenWithProps", () => {
+      const {
+        styles,
+        children
+      } = this.props;
+      const {
+        floatingPosition: pos
+      } = this.state; // If no pos available, we need to hide the element (offscreen to the left)
       // This is done so we can measure the content before positioning it correctly.
 
-      var positioningStyle = pos ? {
-        left: "".concat(pos.left, "px"),
-        top: "".concat(pos.top, "px"),
+      const positioningStyle = pos ? {
+        left: `${pos.left}px`,
+        top: `${pos.top}px`,
         right: 'auto'
       } : {
         visibility: 'hidden',
         top: '0px'
       };
       return /*#__PURE__*/React__default["default"].cloneElement(children, {
-        ref: _this._menuRef,
-        style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, styles), positioningStyle), {}, {
+        ref: this._menuRef,
+        style: { ...styles,
+          ...positioningStyle,
           position: 'absolute',
           opacity: 1
-        })
+        }
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleBlur", function (_ref2) {
-      var oldActiveNode = _ref2.target,
-          currentActiveNode = _ref2.relatedTarget;
+    _rollupPluginBabelHelpers.defineProperty(this, "handleBlur", _ref2 => {
+      let {
+        target: oldActiveNode,
+        relatedTarget: currentActiveNode
+      } = _ref2;
 
       if (currentActiveNode && oldActiveNode) {
-        var startSentinelNode = _this.startSentinel.current;
-        var endSentinelNode = _this.endSentinel.current;
+        const {
+          current: startSentinelNode
+        } = this.startSentinel;
+        const {
+          current: endSentinelNode
+        } = this.endSentinel;
         wrapFocus["default"]({
-          bodyNode: _this._menuBody,
-          startSentinelNode: startSentinelNode,
-          endSentinelNode: endSentinelNode,
-          currentActiveNode: currentActiveNode,
-          oldActiveNode: oldActiveNode
+          bodyNode: this._menuBody,
+          startSentinelNode,
+          endSentinelNode,
+          currentActiveNode,
+          oldActiveNode
         });
       }
     });
+  }
 
-    return _this;
+  componentWillUnmount() {
+    this.hResize.release();
   }
 
-  _rollupPluginBabelHelpers.createClass(FloatingMenu, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.hResize.release();
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+  componentDidMount() {
+    this.hResize = OptimizedResize["default"].add(() => {
+      this._updateMenuSize();
+    });
+  }
+  /**
+   * Set focus on floating menu content after menu placement.
+   * @param {Element} menuBody The DOM element of the menu body.
+   * @private
+   */
 
-      this.hResize = OptimizedResize["default"].add(function () {
-        _this2._updateMenuSize();
-      });
-    }
-    /**
-     * Set focus on floating menu content after menu placement.
-     * @param {Element} menuBody The DOM element of the menu body.
-     * @private
-     */
-
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      this._updateMenuSize(prevProps);
-
-      var onPlace = this.props.onPlace;
-
-      if (this._placeInProgress && this.state.floatingPosition) {
-        if (this._menuBody && !this._menuBody.contains(document.activeElement)) {
-          this._focusMenuContent(this._menuBody);
-        }
 
-        if (typeof onPlace === 'function') {
-          onPlace(this._menuBody);
-          this._placeInProgress = false;
-        }
+  componentDidUpdate(prevProps) {
+    this._updateMenuSize(prevProps);
+
+    const {
+      onPlace
+    } = this.props;
+
+    if (this._placeInProgress && this.state.floatingPosition) {
+      if (this._menuBody && !this._menuBody.contains(document.activeElement)) {
+        this._focusMenuContent(this._menuBody);
       }
-    }
-    /**
-     * A callback for called when menu body is mounted or unmounted.
-     * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-
-      if (typeof document !== 'undefined') {
-        var _this$props4 = this.props,
-            focusTrap = _this$props4.focusTrap,
-            target = _this$props4.target;
-        return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
-          onBlur: focusTrap ? this.handleBlur : null
-        }, /*#__PURE__*/React__default["default"].createElement("span", {
-          ref: this.startSentinel,
-          tabIndex: "0",
-          role: "link",
-          className: "".concat(prefix, "--visually-hidden")
-        }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default["default"].createElement("span", {
-          ref: this.endSentinel,
-          tabIndex: "0",
-          role: "link",
-          className: "".concat(prefix, "--visually-hidden")
-        }, "Focus sentinel")), !target ? document.body : target());
+
+      if (typeof onPlace === 'function') {
+        onPlace(this._menuBody);
+        this._placeInProgress = false;
       }
+    }
+  }
+  /**
+   * A callback for called when menu body is mounted or unmounted.
+   * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
+   */
 
-      return null;
+
+  render() {
+    const {
+      context: prefix
+    } = this;
+
+    if (typeof document !== 'undefined') {
+      const {
+        focusTrap,
+        target
+      } = this.props;
+      return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
+        onBlur: focusTrap ? this.handleBlur : null
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: this.startSentinel,
+        tabIndex: "0",
+        role: "link",
+        className: `${prefix}--visually-hidden`
+      }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: this.endSentinel,
+        tabIndex: "0",
+        role: "link",
+        className: `${prefix}--visually-hidden`
+      }, "Focus sentinel")), !target ? document.body : target());
     }
-  }]);
 
-  return FloatingMenu;
-}(React__default["default"].Component);
+    return null;
+  }
+
+}
 
 _rollupPluginBabelHelpers.defineProperty(FloatingMenu, "contextType", usePrefix.PrefixContext);