@atlaskit/editor-plugin-block-menu/dist/cjs/ui/block-menu.js

BlockMenu plugin for @atlaskit/editor-core

/* block-menu.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./block-menu.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _css = require("@atlaskit/css");
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
var _surfaceDragHandleElement = require("@atlaskit/editor-common/block-controls/surface-drag-handle-element");
var _key = require("@atlaskit/editor-common/block-menu/key");
var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
var _Popup = _interopRequireDefault(require("@atlaskit/editor-common/Popup"));
var _dragHandle = require("@atlaskit/editor-common/styles/drag-handle");
var _ArrowKeyNavigationProvider = require("@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider");
var _types = require("@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider/types");
var _uiReact = require("@atlaskit/editor-common/ui-react");
var _withReactEditorViewOuterListeners = _interopRequireDefault(require("@atlaskit/editor-common/ui-react/with-react-editor-view-outer-listeners"));
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
var _constants = require("@atlaskit/editor-shared-styles/constants");
var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _box = require("@atlaskit/primitives/compiled/box");
var _redo = require("@atlaskit/prosemirror-history/redo");
var _undo = require("@atlaskit/prosemirror-history/undo");
var _blockMenuProvider = require("./block-menu-provider");
var _BlockMenuRenderer = require("./block-menu-renderer/BlockMenuRenderer");
var _blockMenuTargetVisibilityContext = require("./block-menu-target-visibility-context");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; }
var styles = {
  base: "_2rko12b0 _bfhk1bhr _16qs130s",
  maxWidthStyles: "_p12fnklw",
  emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
};
var DEFAULT_MENU_WIDTH = 230;
var DRAG_HANDLE_OFFSET_PADDING = 5;
var FALLBACK_MENU_HEIGHT = 300;
var PopupWithListeners = (0, _withReactEditorViewOuterListeners.default)(_Popup.default);
var useConditionalBlockMenuEffect = function useConditionalBlockMenuEffect(_ref) {
  var api = _ref.api,
    isMenuOpen = _ref.isMenuOpen,
    menuTriggerBy = _ref.menuTriggerBy,
    selectedByShortcutOrDragHandle = _ref.selectedByShortcutOrDragHandle,
    hasFocus = _ref.hasFocus,
    openedViaKeyboard = _ref.openedViaKeyboard,
    prevIsMenuOpenRef = _ref.prevIsMenuOpenRef;
  /**
   * NOTE: do not add `currentUserIntent` to dependency array as it causes unnecessary re-renders and messes with the user intent state
   */
  (0, _react.useEffect)(function () {
    var _api$userIntent;
    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus) {
      return;
    }

    // Fire analytics event when block menu opens (only on first transition from closed to open)
    if (!prevIsMenuOpenRef.current && isMenuOpen) {
      var _api$analytics;
      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
        action: _enums.ACTION.OPENED,
        actionSubject: _enums.ACTION_SUBJECT.BLOCK_MENU,
        eventType: _enums.EVENT_TYPE.UI,
        attributes: {
          inputMethod: openedViaKeyboard ? _enums.INPUT_METHOD.KEYBOARD : _enums.INPUT_METHOD.MOUSE
        }
      });
    }

    // Update the previous state
    prevIsMenuOpenRef.current = isMenuOpen;
    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, openedViaKeyboard, prevIsMenuOpenRef]);
};
var isSelectionWithinCodeBlock = function isSelectionWithinCodeBlock(state) {
  var _state$selection = state.selection,
    $from = _state$selection.$from,
    $to = _state$selection.$to;
  return $from.sameParent($to) && $from.parent.type === state.schema.nodes.codeBlock;
};
var useCloseBlockMenuOnResize = function useCloseBlockMenuOnResize(_ref2) {
  var isEnabled = _ref2.isEnabled,
    mountTo = _ref2.mountTo,
    boundariesElement = _ref2.boundariesElement,
    scrollableElement = _ref2.scrollableElement,
    closeMenu = _ref2.closeMenu;
  (0, _react.useEffect)(function () {
    if (!isEnabled || typeof ResizeObserver === 'undefined') {
      return;
    }
    var observedElements = Array.from(new Set([mountTo, boundariesElement, scrollableElement].filter(function (element) {
      return Boolean(element);
    })));
    if (observedElements.length === 0) {
      return;
    }
    var pendingInitialResizeElements = new Set(observedElements);
    var resizeObserver = new ResizeObserver(function (entries) {
      var hasResizeAfterInitialObservation = entries.some(function (_ref3) {
        var target = _ref3.target;
        if (target instanceof HTMLElement && pendingInitialResizeElements.has(target)) {
          pendingInitialResizeElements.delete(target);
          return false;
        }
        return true;
      });
      if (hasResizeAfterInitialObservation) {
        closeMenu();
      }
    });
    observedElements.forEach(function (element) {
      return resizeObserver.observe(element);
    });
    return function () {
      resizeObserver.disconnect();
    };
  }, [boundariesElement, closeMenu, isEnabled, mountTo, scrollableElement]);
};
var BlockMenuContent = function BlockMenuContent(_ref4) {
  var _api$blockMenu;
  var api = _ref4.api,
    setRef = _ref4.setRef;
  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
  var ref = function ref(el) {
    setOutsideClickTargetRef(el);
    setRef === null || setRef === void 0 || setRef(el);
  };
  var shouldDisableArrowKeyNavigation = function shouldDisableArrowKeyNavigation(event) {
    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
      return false;
    }
    var target = event.target;
    if (!(target instanceof HTMLElement)) {
      return false;
    }
    return target.closest('[data-toolbar-nested-dropdown-menu]') !== null;
  };
  if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_menu_radius_update')) {
    return /*#__PURE__*/_react.default.createElement(_toolbarMenuContainer.ToolbarMenuContainer, {
      testId: _key.BLOCK_MENU_TEST_ID,
      ref: ref,
      xcss: styles.maxWidthStyles
    }, /*#__PURE__*/_react.default.createElement(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider, {
      type: _types.ArrowKeyNavigationType.MENU
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      handleClose: function handleClose(e) {
        return e.preventDefault();
      },
      disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
    }, /*#__PURE__*/_react.default.createElement(_BlockMenuRenderer.BlockMenuRenderer, {
      allRegisteredComponents: blockMenuComponents || []
    })));
  }
  return /*#__PURE__*/_react.default.createElement(_box.Box, {
    testId: _key.BLOCK_MENU_TEST_ID,
    role: "menu",
    ref: ref,
    xcss: (0, _css.cx)(styles.base, styles.maxWidthStyles, styles.emptyMenuSectionStyles)
  }, /*#__PURE__*/_react.default.createElement(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider, {
    type: _types.ArrowKeyNavigationType.MENU
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    handleClose: function handleClose(e) {
      return e.preventDefault();
    },
    disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
  }, /*#__PURE__*/_react.default.createElement(_BlockMenuRenderer.BlockMenuRenderer, {
    allRegisteredComponents: blockMenuComponents || []
  })));
};
var BlockMenu = function BlockMenu(_ref5) {
  var _openMenuHandleRef$cu, _editorView$dom, _ref8, _api$analytics2;
  var editorView = _ref5.editorView,
    api = _ref5.api,
    mountTo = _ref5.mountTo,
    boundariesElement = _ref5.boundariesElement,
    scrollableElement = _ref5.scrollableElement;
  var isPopupTargetVisibilityEnabled = Boolean(mountTo) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_popup_target_visibility');
  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$userIntentSta, _states$blockControls5;
      return {
        menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
        menuTriggerByNode: isPopupTargetVisibilityEnabled ? (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode : undefined,
        isSelectedViaDragHandle: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isSelectedViaDragHandle,
        isMenuOpen: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.isMenuOpen,
        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
        openedViaKeyboard: (_states$blockControls5 = states.blockControlsState) === null || _states$blockControls5 === void 0 || (_states$blockControls5 = _states$blockControls5.blockMenuOptions) === null || _states$blockControls5 === void 0 ? void 0 : _states$blockControls5.openedViaKeyboard
      };
    }),
    menuTriggerBy = _useSharedPluginState.menuTriggerBy,
    menuTriggerByNode = _useSharedPluginState.menuTriggerByNode,
    isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
    isMenuOpen = _useSharedPluginState.isMenuOpen,
    currentUserIntent = _useSharedPluginState.currentUserIntent,
    openedViaKeyboard = _useSharedPluginState.openedViaKeyboard;
  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
    onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
  var isMenuOpenRef = _react.default.useRef(isMenuOpen);
  isMenuOpenRef.current = isMenuOpen;
  var _React$useState = _react.default.useState(null),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    surfaceDragHandle = _React$useState2[0],
    setSurfaceDragHandle = _React$useState2[1];
  _react.default.useLayoutEffect(function () {
    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
      return;
    }
    var readElement = function readElement() {
      return setSurfaceDragHandle(_surfaceDragHandleElement.surfaceDragHandleElementStore.get(editorView));
    };
    readElement();
    return _surfaceDragHandleElement.surfaceDragHandleElementStore.subscribe(editorView, function () {
      if (!isMenuOpenRef.current) {
        readElement();
      }
    });
  }, [editorView]);
  var openMenuHandleRef = _react.default.useRef(null);
  var anchoredToRef = _react.default.useRef(undefined);
  if (!isMenuOpen) {
    openMenuHandleRef.current = null;
    anchoredToRef.current = undefined;
  } else if (!openMenuHandleRef.current || anchoredToRef.current !== menuTriggerBy) {
    var _ref6, _surfaceDragHandleEle;
    openMenuHandleRef.current = (_ref6 = (_surfaceDragHandleEle = _surfaceDragHandleElement.surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : openMenuHandleRef.current) !== null && _ref6 !== void 0 ? _ref6 : surfaceDragHandle;
    anchoredToRef.current = menuTriggerBy;
  }
  var targetHandleRef = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_dragHandle.DRAG_HANDLE_SELECTOR);
  var menuTargetNode = menuTriggerByNode && (editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(menuTriggerByNode.pos));
  var visibilityTarget = menuTargetNode instanceof HTMLElement ? menuTargetNode : undefined;
  var closeMenu = _react.default.useCallback(function () {
    api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
      var _api$blockControls, _api$userIntent2;
      var tr = _ref7.tr;
      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
        closeMenu: true
      })({
        tr: tr
      });
      onDropdownOpenChanged(false);
      api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
        tr: tr
      });
      return tr;
    });
  }, [api, currentUserIntent, onDropdownOpenChanged]);
  useCloseBlockMenuOnResize({
    isEnabled: Boolean(isMenuOpen),
    mountTo: mountTo,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    closeMenu: closeMenu
  });
  var prevIsMenuOpenRef = (0, _react.useRef)(false);
  var popupRef = (0, _react.useRef)(undefined);
  var _React$useState3 = _react.default.useState(0),
    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
    menuHeight = _React$useState4[0],
    setMenuHeight = _React$useState4[1];
  var _React$useState5 = _react.default.useState({
      isVisible: undefined,
      restoreFocusTo: null
    }),
    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
    targetVisibility = _React$useState6[0],
    setTargetVisibility = _React$useState6[1];
  var targetVisible = targetVisibility.isVisible,
    restoreFocusTo = targetVisibility.restoreFocusTo;
  // CSS visibility can move focus to the document body. Preserve the active menu item so the
  // existing focus-loss guard does not close the menus during a temporary scroll transition.
  var handleTargetVisibilityChanged = _react.default.useCallback(function (isVisible) {
    var _popupRef$current;
    if (isVisible) {
      setTargetVisibility(function (current) {
        return {
          isVisible: true,
          restoreFocusTo: current.isVisible === false ? current.restoreFocusTo : null
        };
      });
      return;
    }

    // Capture focus before scheduling the state update so the updater stays pure.
    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
    var activeElement = document.activeElement;
    var isFocusInMenu = activeElement instanceof HTMLElement && (((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.contains(activeElement)) || activeElement.closest(_dragHandle.NESTED_DROPDOWN_MENU) !== null);
    setTargetVisibility({
      isVisible: false,
      restoreFocusTo: isFocusInMenu ? activeElement : null
    });
  }, []);
  _react.default.useLayoutEffect(function () {
    if (!isPopupTargetVisibilityEnabled || !targetVisible || !restoreFocusTo) {
      return;
    }
    var _restoreFocusTo$owner = restoreFocusTo.ownerDocument,
      activeElement = _restoreFocusTo$owner.activeElement,
      body = _restoreFocusTo$owner.body,
      documentElement = _restoreFocusTo$owner.documentElement;
    var focusWasLost = activeElement === null || activeElement === body || activeElement === documentElement;
    if (restoreFocusTo.isConnected && focusWasLost) {
      restoreFocusTo.focus({
        preventScroll: true
      });
    }
    setTargetVisibility(function (current) {
      return _objectSpread(_objectSpread({}, current), {}, {
        restoreFocusTo: null
      });
    });
  }, [isPopupTargetVisibilityEnabled, restoreFocusTo, targetVisible]);
  var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
  _react.default.useLayoutEffect(function () {
    var _popupRef$current2;
    if (!isMenuOpen) {
      return;
    }
    onDropdownOpenChanged(true);
    setMenuHeight(((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.clientHeight) || FALLBACK_MENU_HEIGHT);
  }, [isMenuOpen, onDropdownOpenChanged]);

  // Nested dropdowns are portaled outside the block-menu popup. Sparse surface reconciliation
  // dispatches after the menu opens, so a re-render can occur while focus is inside that portal.
  var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || isPopupTargetVisibilityEnabled && (targetVisible === false || restoreFocusTo !== null) ||
  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
  document.activeElement === targetHandleRef || popupRef.current && (
  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
  popupRef.current.contains(document.activeElement) ||
  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
  popupRef.current === document.activeElement) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') &&
  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
  document.activeElement instanceof HTMLElement &&
  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
  document.activeElement.closest(_dragHandle.NESTED_DROPDOWN_MENU) !== null) !== null && _ref8 !== void 0 ? _ref8 : false;
  var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;

  // Use conditional hook based on feature flag
  useConditionalBlockMenuEffect({
    api: api,
    isMenuOpen: isMenuOpen,
    menuTriggerBy: menuTriggerBy,
    selectedByShortcutOrDragHandle: selectedByShortcutOrDragHandle,
    hasFocus: hasFocus,
    openedViaKeyboard: openedViaKeyboard,
    prevIsMenuOpenRef: prevIsMenuOpenRef
  });
  if (!isMenuOpen) {
    return null;
  }
  var handleKeyDown = function handleKeyDown(event) {
    var _api$core, _api$blockControls2;
    // When the editor view has focus, the keydown will be handled by the
    // selection preservation plugin – exit early to avoid double handling
    // Also exit if selection is within a code block to avoid double handling when code block got focus when the node after it is deleted
    if (!editorView || editorView !== null && editorView !== void 0 && editorView.hasFocus() || isSelectionWithinCodeBlock(editorView.state)) {
      return;
    }
    var key = event.key.toLowerCase();
    var isMetaCtrl = event.metaKey || event.ctrlKey;
    var isDelete = ['backspace', 'delete'].includes(key);
    var isUndo = isMetaCtrl && key === 'z' && !event.shiftKey;
    var isRedo = isMetaCtrl && (key === 'y' || key === 'z' && event.shiftKey);

    // Necessary to prevent the editor from handling the delete natively
    if (isDelete || isUndo || isRedo) {
      event.preventDefault();
      event.stopPropagation();
    }
    if (isUndo) {
      (0, _undo.undo)(editorView.state, editorView.dispatch);
    } else if (isRedo) {
      (0, _redo.redo)(editorView.state, editorView.dispatch);
    }
    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.handleKeyDownWithPreservedSelection(event));
  };
  var handleClickOutside = function handleClickOutside(e) {
    // check if the clicked element was another drag handle or nested dropdown menu, if so don't close the menu
    if (e.target instanceof HTMLElement && (e.target.closest(_dragHandle.DRAG_HANDLE_SELECTOR) || e.target.closest(_dragHandle.NESTED_DROPDOWN_MENU))) {
      return;
    }
    closeMenu();
  };
  if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
    closeMenu();
    return null;
  }
  var setRef = function setRef(el) {
    if (el) {
      popupRef.current = el;
    }
  };
  if (!(targetHandleRef instanceof HTMLElement)) {
    return null;
  }
  var blockMenuContent = /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
    api: api,
    setRef: setRef
  });
  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
    component: _enums.ACTION_SUBJECT.BLOCK_MENU,
    dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
    fallbackComponent: null
  }, /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
    alignX: 'right',
    alignY: 'start',
    handleClickOutside: handleClickOutside,
    handleEscapeKeydown: closeMenu,
    handleKeyDown: handleKeyDown,
    mountTo: mountTo,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    target: targetHandleRef,
    visibilityTarget: visibilityTarget,
    zIndex: _constants.akEditorFloatingOverlapPanelZIndex,
    fitWidth: DEFAULT_MENU_WIDTH,
    fitHeight: menuHeight,
    preventOverflow: true,
    stick: true,
    hideWhenTargetOutOfView: isPopupTargetVisibilityEnabled,
    onTargetVisibilityChanged: isPopupTargetVisibilityEnabled ? handleTargetVisibilityChanged : undefined
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    offset: [_dragHandle.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
    focusTrap: openedViaKeyboard ?
    // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
    {
      initialFocus: undefined
    } : undefined
  }, isPopupTargetVisibilityEnabled ? /*#__PURE__*/_react.default.createElement(_blockMenuTargetVisibilityContext.BlockMenuTargetVisibilityProvider, {
    value: targetVisible
  }, blockMenuContent) : blockMenuContent));
};

// eslint-disable-next-line @typescript-eslint/no-restricted-types
var _default_1 = (0, _reactIntl.injectIntl)(BlockMenu);
var _default = exports.default = _default_1;