@carbon/react 1.77.0 → 1.78.0-rc.0

package/lib/internal/FloatingMenu.js

@@ -9,17 +9,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
 var React = require('react');
+var FeatureFlags = require('@carbon/feature-flags');
 var ReactDOM = require('react-dom');
 var window = require('window-or-global');
 var OptimizedResize = require('./OptimizedResize.js');
 var navigation = require('./keyboard/navigation.js');
+var usePrefix = require('./usePrefix.js');
 var warning = require('./warning.js');
 var wrapFocus = require('./wrapFocus.js');
-var usePrefix = require('./usePrefix.js');
-var FeatureFlags = require('@carbon/feature-flags');
 var match = require('./keyboard/match.js');
 var keys = require('./keyboard/keys.js');
 
@@ -43,85 +41,27 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
-
-/**
- * The structure for the position of floating menu.
- * @typedef {object} FloatingMenu~position
- * @property {number} left The left position.
- * @property {number} top The top position.
- * @property {number} right The right position.
- * @property {number} bottom The bottom position.
- */
-
-/**
- * The structure for the size of floating menu.
- * @typedef {object} FloatingMenu~size
- * @property {number} width The width.
- * @property {number} height The height.
- */
-
-/**
- * The structure for the position offset of floating menu.
- * @typedef {object} FloatingMenu~offset
- * @property {number} top The top position.
- * @property {number} left The left position.
- */
-
-/**
- * The structure for the target container.
- * @typedef {object} FloatingMenu~container
- * @property {DOMRect} rect Return of element.getBoundingClientRect()
- * @property {string} position Position style (static, absolute, relative...)
- */
 
 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.
- * @returns `true` if the parent component wants to change in the adjustment of the floating menu position.
- * @private
- */
-const hasChangeInOffset = function () {
-  let oldMenuOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let menuOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (typeof oldMenuOffset !== typeof menuOffset) {
-    return true;
-  }
-  if (Object(menuOffset) === menuOffset && typeof menuOffset !== 'function') {
-    return oldMenuOffset.top !== menuOffset.top || oldMenuOffset.left !== menuOffset.left;
-  }
-  return oldMenuOffset !== menuOffset;
-};
-
-/**
- * @param {object} params The parameters.
- * @param {FloatingMenu~size} params.menuSize The size of the menu.
- * @param {FloatingMenu~position} params.refPosition The position of the triggering element.
- * @param {FloatingMenu~offset} [params.offset={ left: 0, top: 0 }] The position offset of the menu.
- * @param {string} [params.direction=bottom] The menu direction.
- * @param {number} [params.scrollX=0] The scroll position of the viewport.
- * @param {number} [params.scrollY=0] The scroll position of the viewport.
- * @param {FloatingMenu~container} [params.container] The size and position type of target element.
- * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
- * @private
+ * Computes the floating menu's position based on the menu size, trigger element
+ * position, offset, direction, and container.
  */
 const getFloatingPosition = _ref => {
   let {
     menuSize,
-    refPosition = {},
-    offset = {},
-    direction = DIRECTION_BOTTOM,
-    scrollX: pageXOffset = 0,
-    scrollY: pageYOffset = 0,
+    refPosition,
+    offset,
+    direction,
+    scrollX,
+    scrollY,
     container
   } = _ref;
   const {
@@ -130,8 +70,8 @@ const getFloatingPosition = _ref => {
     right: refRight = 0,
     bottom: refBottom = 0
   } = refPosition;
-  const scrollX = container.position !== 'static' ? 0 : pageXOffset;
-  const scrollY = container.position !== 'static' ? 0 : pageYOffset;
+  const effectiveScrollX = container.position !== 'static' ? 0 : scrollX;
+  const effectiveScrollY = container.position !== 'static' ? 0 : scrollY;
   const relativeDiff = {
     top: container.position !== 'static' ? container.rect.top : 0,
     left: container.position !== 'static' ? container.rect.left : 0
@@ -146,370 +86,237 @@ const getFloatingPosition = _ref => {
   } = offset;
   const refCenterHorizontal = (refLeft + refRight) / 2;
   const refCenterVertical = (refTop + refBottom) / 2;
-  return {
+  const positions = {
     [DIRECTION_LEFT]: () => ({
-      left: refLeft - width + scrollX - left - relativeDiff.left,
-      top: refCenterVertical - height / 2 + scrollY + top - 9 - relativeDiff.top
+      left: refLeft - width + effectiveScrollX - left - relativeDiff.left,
+      top: refCenterVertical - height / 2 + effectiveScrollY + top - 9 - relativeDiff.top
     }),
     [DIRECTION_TOP]: () => ({
-      left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
-      top: refTop - height + scrollY - top - relativeDiff.top
+      left: refCenterHorizontal - width / 2 + effectiveScrollX + left - relativeDiff.left,
+      top: refTop - height + effectiveScrollY - top - relativeDiff.top
     }),
     [DIRECTION_RIGHT]: () => ({
-      left: refRight + scrollX + left - relativeDiff.left,
-      top: refCenterVertical - height / 2 + scrollY + top + 3 - relativeDiff.top
+      left: refRight + effectiveScrollX + left - relativeDiff.left,
+      top: refCenterVertical - height / 2 + effectiveScrollY + top + 3 - relativeDiff.top
     }),
     [DIRECTION_BOTTOM]: () => ({
-      left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
-      top: refBottom + scrollY + top - relativeDiff.top
+      left: refCenterHorizontal - width / 2 + effectiveScrollX + left - relativeDiff.left,
+      top: refBottom + effectiveScrollY + top - relativeDiff.top
     })
-  }[direction]();
+  };
+  return positions[direction]();
 };
-
-/**
- * A menu that is detached from the triggering element.
- * Useful when the container of the triggering element cannot have `overflow:visible` style, etc.
- */
-class FloatingMenu extends React__default["default"].Component {
-  constructor() {
-    var _this;
-    super(...arguments);
-    _this = this;
-    // `true` if the menu body is mounted and calculation of the position is in progress.
-    _rollupPluginBabelHelpers.defineProperty(this, "_placeInProgress", false);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {
-      /**
-       * The position of the menu, relative to the top-left corner of the viewport.
-       * @type {FloatingMenu~offset}
-       */
-      floatingPosition: undefined
-    });
-    /**
-     * The cached reference to the menu container.
-     * Only used if React portal API is not available.
-     * @type {Element}
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_menuContainer", null);
-    /**
-     * The cached reference to the menu body.
-     * The reference is set via callback ref instead of object ref,
-     * in order to hook the event when the element ref gets available,
-     * which can be at a different timing from `cDM()`, presumably with SSR scenario.
-     * @type {Element}
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
-    /**
-     * Focus sentinel refs for focus trap behavior
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "startSentinel", /*#__PURE__*/React__default["default"].createRef());
-    _rollupPluginBabelHelpers.defineProperty(this, "endSentinel", /*#__PURE__*/React__default["default"].createRef());
-    /**
-     * Calculates the position in the viewport of floating menu,
-     * once this component is mounted or updated upon change in the following props:
-     *
-     * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
-     * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
-     *
-     * @private
-     */
-    _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;
+const FloatingMenu = _ref2 => {
+  let {
+    children,
+    flipped,
+    focusTrap,
+    menuDirection = DIRECTION_BOTTOM,
+    menuOffset = {},
+    menuRef: externalMenuRef,
+    onPlace,
+    selectorPrimaryFocus,
+    styles,
+    target = () => document.body,
+    triggerRef,
+    updateOrientation
+  } = _ref2;
+  const prefix = React.useContext(usePrefix.PrefixContext);
+  const [floatingPosition, setFloatingPosition] = React.useState(undefined);
+  const menuBodyRef = React.useRef(null);
+  const startSentinelRef = React.useRef(null);
+  const endSentinelRef = React.useRef(null);
+  const placeInProgressRef = React.useRef(false);
+  const updateMenuPosition = React.useCallback(isAdjustment => {
+    const menuBody = menuBodyRef.current;
+    if (!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;
-      }
-      const {
-        menuOffset: oldMenuOffset = {},
-        menuDirection: oldMenuDirection
-      } = prevProps;
-      const {
-        menuOffset = {},
-        menuDirection = DIRECTION_BOTTOM
-      } = _this.props;
-      if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
-        const {
-          flipped,
-          triggerRef,
-          updateOrientation = null
-        } = _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,
-            refPosition,
-            direction: menuDirection,
-            offset,
-            scrollX: window__default["default"].pageXOffset,
-            scrollY: window__default["default"].pageYOffset,
-            container: {
-              rect: _this.props.target().getBoundingClientRect(),
-              position: getComputedStyle(_this.props.target()).position
-            }
-          });
-        }
-        // Skips if either in the following condition:
-        // a) Menu body has `display:none`
-        // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
-        if (menuSize.width > 0 && menuSize.height > 0 || !offset) {
-          _this.setState({
-            floatingPosition: getFloatingPosition({
-              menuSize,
-              refPosition,
-              direction: menuDirection,
-              offset,
-              scrollX: window__default["default"].pageXOffset,
-              scrollY: window__default["default"].pageYOffset,
-              container: {
-                rect: _this.props.target().getBoundingClientRect(),
-                position: getComputedStyle(_this.props.target()).position
-              }
-            })
-          }, () => {
-            if (!isAdjustment) {
-              const newMenuSize = menuBody.getBoundingClientRect();
-              if (newMenuSize !== menuSize) {
-                _this._updateMenuSize(_this.props, true);
-              }
-            }
-          });
+      return;
+    }
+    const triggerEl = triggerRef.current;
+    const menuSize = menuBody.getBoundingClientRect();
+    const refPosition = triggerEl ? triggerEl.getBoundingClientRect() : undefined;
+    const offsetValue = typeof menuOffset === 'function' ? menuOffset(menuBody, menuDirection, triggerEl, flipped) : menuOffset;
+    if (updateOrientation) {
+      updateOrientation({
+        menuSize,
+        refPosition,
+        direction: menuDirection,
+        offset: offsetValue,
+        scrollX: window__default["default"].pageXOffset,
+        scrollY: window__default["default"].pageYOffset,
+        container: {
+          rect: target().getBoundingClientRect(),
+          position: getComputedStyle(target()).position
         }
-      }
-    });
-    /**
-     * Set focus on floating menu content after menu placement.
-     * @param {Element} menuBody The DOM element of the menu body.
-     * @private
-     */
-    _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;
-      focusTarget.focus();
-      if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
-        process.env.NODE_ENV !== "production" ? warning.warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;
-      }
-    });
-    /**
-     * 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.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_menuRef", menuBody => {
-      const {
-        menuRef
-      } = this.props;
-      this._placeInProgress = !!menuBody;
-      menuRef && menuRef(this._menuBody = menuBody);
-      if (menuBody) {
-        this._updateMenuSize();
-      }
-    });
-    /**
-     * @returns The child nodes, with styles containing the floating menu position.
-     * @private
-     */
-    _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.
-      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: {
-          ...styles,
-          ...positioningStyle,
-          position: 'absolute',
-          opacity: 1
+      });
+    }
+
+    // Only set position if the menu has a valid size or if no offset is provided.
+    if (menuSize.width > 0 && menuSize.height > 0 || !offsetValue) {
+      const newFloatingPosition = getFloatingPosition({
+        menuSize,
+        refPosition: refPosition ?? {
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0
+        },
+        offset: offsetValue,
+        direction: menuDirection,
+        scrollX: window__default["default"].pageXOffset,
+        scrollY: window__default["default"].pageYOffset,
+        container: {
+          rect: target().getBoundingClientRect(),
+          position: getComputedStyle(target()).position
         }
       });
-    });
-    /**
-     * Blur handler for when focus wrap behavior is enabled
-     * @param {Event} event
-     * @param {Element} event.target previously focused node
-     * @param {Element} event.relatedTarget current focused node
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleBlur", _ref2 => {
-      let {
-        target: oldActiveNode,
-        relatedTarget: currentActiveNode
-      } = _ref2;
-      if (currentActiveNode && oldActiveNode) {
-        const {
-          current: startSentinelNode
-        } = this.startSentinel;
-        const {
-          current: endSentinelNode
-        } = this.endSentinel;
-        wrapFocus["default"]({
-          bodyNode: this._menuBody,
-          startSentinelNode,
-          endSentinelNode,
-          currentActiveNode,
-          oldActiveNode
-        });
+
+      // Only update if the position has actually changed.
+      if (!floatingPosition || floatingPosition.left !== newFloatingPosition.left || floatingPosition.top !== newFloatingPosition.top) {
+        setFloatingPosition(newFloatingPosition);
       }
-    });
-    /**
-     * Keydown handler for when focus wrap behavior is enabled
-     * @param {Event} event
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleKeyDown", event => {
-      if (match.match(event, keys.Tab) && this._menuBody) {
-        wrapFocus.wrapFocusWithoutSentinels({
-          containerNode: this._menuBody,
-          currentActiveNode: event.target,
-          event
-        });
+
+      // Re-check after setting the position if not already adjusting.
+      if (!isAdjustment) {
+        const newMenuSize = menuBody.getBoundingClientRect();
+        // TODO: Was there a bug in the old code? How could one `DOMRect` be
+        // compared to another using `!==`?
+        if (newMenuSize.width !== menuSize.width || newMenuSize.height !== menuSize.height) {
+          updateMenuPosition(true);
+        }
       }
-    });
-  }
-  componentWillUnmount() {
-    this.hResize.release();
-  }
-  componentDidMount() {
-    this.hResize = OptimizedResize["default"].add(() => {
-      this._updateMenuSize();
-    });
-  }
-  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);
+    }
+  }, [triggerRef, menuOffset, menuDirection, flipped, target, updateOrientation, floatingPosition]);
+  const focusMenuContent = menuBody => {
+    const primaryFocusNode = selectorPrimaryFocus ? menuBody.querySelector(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;
+    focusTarget.focus();
+    if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
+      process.env.NODE_ENV !== "production" ? warning.warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;
+    }
+  };
+  const handleMenuRef = node => {
+    menuBodyRef.current = node;
+    placeInProgressRef.current = !!node;
+    if (externalMenuRef) {
+      externalMenuRef(node);
+    }
+    if (node) {
+      updateMenuPosition();
+    }
+  };
+
+  // When the menu has been placed, focus the content and call onPlace.
+  React.useEffect(() => {
+    if (placeInProgressRef.current && floatingPosition && menuBodyRef.current) {
+      if (!menuBodyRef.current.contains(document.activeElement)) {
+        focusMenuContent(menuBodyRef.current);
       }
       if (typeof onPlace === 'function') {
-        onPlace(this._menuBody);
-        this._placeInProgress = false;
+        onPlace(menuBodyRef.current);
       }
+      placeInProgressRef.current = false;
     }
-  }
-  render() {
-    const {
-      context: prefix
-    } = this;
-    const focusTrapWithoutSentinels = FeatureFlags__namespace.enabled('enable-experimental-focus-wrap-without-sentinels');
-    if (typeof document !== 'undefined') {
-      const {
-        focusTrap,
-        target
-      } = this.props;
-      return /*#__PURE__*/ReactDOM__default["default"].createPortal(
-      /*#__PURE__*/
-      //eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      React__default["default"].createElement("div", {
-        onBlur: focusTrap && !focusTrapWithoutSentinels ? this.handleBlur : () => {},
-        onKeyDown: focusTrapWithoutSentinels ? this.handleKeyDown : () => {}
-      }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
-        ref: this.startSentinel,
-        tabIndex: "0",
-        role: "link",
-        className: `${prefix}--visually-hidden`
-      }, "Focus sentinel"), this._getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
-        ref: this.endSentinel,
-        tabIndex: "0",
-        role: "link",
-        className: `${prefix}--visually-hidden`
-      }, "Focus sentinel")), !target ? document.body : target());
-    }
-    return null;
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(FloatingMenu, "contextType", usePrefix.PrefixContext);
-_rollupPluginBabelHelpers.defineProperty(FloatingMenu, "propTypes", {
-  /**
-   * Contents to put into the floating menu.
-   */
-  children: PropTypes__default["default"].object,
-  /**
-   * `true` if the menu alignment should be flipped.
-   */
-  flipped: PropTypes__default["default"].bool,
-  /**
-   * Enable or disable focus trap behavior
-   */
-  focusTrap: PropTypes__default["default"].bool,
-  /**
-   * Where to put the tooltip, relative to the trigger button.
-   */
-  menuDirection: PropTypes__default["default"].oneOf([DIRECTION_LEFT, DIRECTION_TOP, DIRECTION_RIGHT, DIRECTION_BOTTOM]),
-  /**
-   * The adjustment of the floating menu position, considering the position of dropdown arrow, etc.
-   */
-  menuOffset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-    top: PropTypes__default["default"].number,
-    left: PropTypes__default["default"].number
-  }), PropTypes__default["default"].func]),
-  /**
-   * The callback called when the menu body has been mounted to/will be unmounted from the DOM.
-   */
-  menuRef: PropTypes__default["default"].func,
-  /**
-   * The callback called when the menu body has been mounted and positioned.
-   */
-  onPlace: PropTypes__default["default"].func,
-  /**
-   * Specify a CSS selector that matches the DOM element that should
-   * be focused when the Modal opens
-   */
-  selectorPrimaryFocus: PropTypes__default["default"].string,
-  /**
-   * The additional styles to put to the floating menu.
-   */
-  styles: PropTypes__default["default"].object,
+  }, [floatingPosition, onPlace]);
+
+  // Attach a resize listener.
+  React.useEffect(() => {
+    const resizeHandler = OptimizedResize["default"].add(() => {
+      updateMenuPosition();
+    });
+    return () => {
+      resizeHandler.release();
+    };
+  }, [triggerRef, menuOffset, menuDirection, flipped, target, updateOrientation]);
+
+  // Update menu position when key props change.
+  React.useEffect(() => {
+    updateMenuPosition();
+  }, [menuOffset, menuDirection, flipped, triggerRef, target, updateOrientation]);
+
   /**
-   * The query selector indicating where the floating menu body should be placed.
+   * Clones the child element to add a `ref` and positioning styles.
    */
-  target: PropTypes__default["default"].func,
+  const getChildrenWithProps = () => {
+    const pos = floatingPosition;
+    const positioningStyle = pos ? {
+      left: `${pos.left}px`,
+      top: `${pos.top}px`,
+      right: 'auto'
+    } : {
+      visibility: 'hidden',
+      top: '0px'
+    };
+    return /*#__PURE__*/React.cloneElement(children, {
+      ref: handleMenuRef,
+      style: {
+        ...styles,
+        ...positioningStyle,
+        position: 'absolute',
+        opacity: 1
+      }
+    });
+  };
+
   /**
-   * The element ref of the tooltip's trigger button.
+   * Blur handler used when focus trapping is enabled.
    */
-  triggerRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
-  })]),
+  const handleBlur = event => {
+    if (menuBodyRef.current && startSentinelRef.current && endSentinelRef.current) {
+      wrapFocus["default"]({
+        bodyNode: menuBodyRef.current,
+        startTrapNode: startSentinelRef.current,
+        endTrapNode: endSentinelRef.current,
+        currentActiveNode: event.relatedTarget,
+        oldActiveNode: event.target
+      });
+    }
+  };
+
   /**
-   * Optional function to change orientation of tooltip based on parent
+   * Keydown handler for focus wrapping when experimental focus trap is enabled.
    */
-  updateOrientation: PropTypes__default["default"].func
-});
-var FloatingMenu$1 = FloatingMenu;
+  const handleKeyDown = event => {
+    if (match.match(event, keys.Tab) && menuBodyRef.current) {
+      wrapFocus.wrapFocusWithoutSentinels({
+        containerNode: menuBodyRef.current,
+        currentActiveNode: event.target,
+        event
+      });
+    }
+  };
+  const focusTrapWithoutSentinels = FeatureFlags__namespace.enabled('enable-experimental-focus-wrap-without-sentinels');
+  if (typeof document !== 'undefined') {
+    const portalTarget = target ? target() : document.body;
+    return /*#__PURE__*/ReactDOM__default["default"].createPortal(/*#__PURE__*/React__default["default"].createElement("div", {
+      onBlur: focusTrap && !focusTrapWithoutSentinels ? handleBlur : undefined,
+      onKeyDown: focusTrapWithoutSentinels ? handleKeyDown : undefined
+    }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
+      ref: startSentinelRef,
+      tabIndex: 0,
+      role: "link",
+      className: `${prefix}--visually-hidden`
+    }, "Focus sentinel"), getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
+      ref: endSentinelRef,
+      tabIndex: 0,
+      role: "link",
+      className: `${prefix}--visually-hidden`
+    }, "Focus sentinel")), portalTarget);
+  }
+  return null;
+};
 
 exports.DIRECTION_BOTTOM = DIRECTION_BOTTOM;
 exports.DIRECTION_LEFT = DIRECTION_LEFT;
 exports.DIRECTION_RIGHT = DIRECTION_RIGHT;
 exports.DIRECTION_TOP = DIRECTION_TOP;
-exports["default"] = FloatingMenu$1;
+exports.FloatingMenu = FloatingMenu;