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

BlockMenu plugin for @atlaskit/editor-core

/* block-menu.tsx generated by @compiled/babel-plugin v3.0.2 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./block-menu.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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) { _defineProperty(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; }
import React, { useContext, useEffect, useRef } from 'react';
import { injectIntl } from 'react-intl';
import { cx } from '@atlaskit/css';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
import { BLOCK_MENU_TEST_ID } from '@atlaskit/editor-common/block-menu/key';
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
import Popup from '@atlaskit/editor-common/Popup';
import { DRAG_HANDLE_SELECTOR, NESTED_DROPDOWN_MENU, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles/drag-handle';
import { ArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider';
import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider/types';
import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
import withReactEditorViewOuterListeners from '@atlaskit/editor-common/ui-react/with-react-editor-view-outer-listeners';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles/constants';
import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { Box } from '@atlaskit/primitives/compiled/box';
import { redo } from '@atlaskit/prosemirror-history/redo';
import { undo } from '@atlaskit/prosemirror-history/undo';
import { useBlockMenu } from './block-menu-provider';
import { BlockMenuRenderer } from './block-menu-renderer/BlockMenuRenderer';
import { BlockMenuTargetVisibilityProvider } from './block-menu-target-visibility-context';
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 = withReactEditorViewOuterListeners(Popup);
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
   */
  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: ACTION.OPENED,
        actionSubject: ACTION_SUBJECT.BLOCK_MENU,
        eventType: EVENT_TYPE.UI,
        attributes: {
          inputMethod: openedViaKeyboard ? INPUT_METHOD.KEYBOARD : 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;
  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 = useContext(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 (isExperimentEnabled('platform_editor_menu_radius_update')) {
    return /*#__PURE__*/React.createElement(ToolbarMenuContainer, {
      testId: BLOCK_MENU_TEST_ID,
      ref: ref,
      xcss: styles.maxWidthStyles
    }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
      type: 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.createElement(BlockMenuRenderer, {
      allRegisteredComponents: blockMenuComponents || []
    })));
  }
  return /*#__PURE__*/React.createElement(Box, {
    testId: BLOCK_MENU_TEST_ID,
    role: "menu",
    ref: ref,
    xcss: cx(styles.base, styles.maxWidthStyles, styles.emptyMenuSectionStyles)
  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
    type: 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.createElement(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) && isExperimentEnabled('platform_editor_popup_target_visibility');
  var _useSharedPluginState = 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 = useBlockMenu(),
    onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
  var isMenuOpenRef = React.useRef(isMenuOpen);
  isMenuOpenRef.current = isMenuOpen;
  var _React$useState = React.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    surfaceDragHandle = _React$useState2[0],
    setSurfaceDragHandle = _React$useState2[1];
  React.useLayoutEffect(function () {
    if (!isExperimentEnabled('platform_editor_block_control_migration')) {
      return;
    }
    var readElement = function readElement() {
      return setSurfaceDragHandle(surfaceDragHandleElementStore.get(editorView));
    };
    readElement();
    return surfaceDragHandleElementStore.subscribe(editorView, function () {
      if (!isMenuOpenRef.current) {
        readElement();
      }
    });
  }, [editorView]);
  var openMenuHandleRef = React.useRef(null);
  var anchoredToRef = React.useRef(undefined);
  if (!isMenuOpen) {
    openMenuHandleRef.current = null;
    anchoredToRef.current = undefined;
  } else if (!openMenuHandleRef.current || anchoredToRef.current !== menuTriggerBy) {
    var _ref6, _surfaceDragHandleEle;
    openMenuHandleRef.current = (_ref6 = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : openMenuHandleRef.current) !== null && _ref6 !== void 0 ? _ref6 : surfaceDragHandle;
    anchoredToRef.current = menuTriggerBy;
  }
  var targetHandleRef = 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(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.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 = useRef(false);
  var popupRef = useRef(undefined);
  var _React$useState3 = React.useState(0),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    menuHeight = _React$useState4[0],
    setMenuHeight = _React$useState4[1];
  var _React$useState5 = React.useState({
      isVisible: undefined,
      restoreFocusTo: null
    }),
    _React$useState6 = _slicedToArray(_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.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(NESTED_DROPDOWN_MENU) !== null);
    setTargetVisibility({
      isVisible: false,
      restoreFocusTo: isFocusInMenu ? activeElement : null
    });
  }, []);
  React.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.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) || 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(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) {
      undo(editorView.state, editorView.dispatch);
    } else if (isRedo) {
      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(DRAG_HANDLE_SELECTOR) || e.target.closest(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.createElement(BlockMenuContent, {
    api: api,
    setRef: setRef
  });
  return /*#__PURE__*/React.createElement(ErrorBoundary, {
    component: 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.createElement(PopupWithListeners, {
    alignX: 'right',
    alignY: 'start',
    handleClickOutside: handleClickOutside,
    handleEscapeKeydown: closeMenu,
    handleKeyDown: handleKeyDown,
    mountTo: mountTo,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    target: targetHandleRef,
    visibilityTarget: visibilityTarget,
    zIndex: 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: [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.createElement(BlockMenuTargetVisibilityProvider, {
    value: targetVisible
  }, blockMenuContent) : blockMenuContent));
};

// eslint-disable-next-line @typescript-eslint/no-restricted-types
var _default_1 = injectIntl(BlockMenu);
export default _default_1;