@atlaskit/editor-plugin-block-menu 5.2.11 → 5.2.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 5.2.12
+
+### Patch Changes
+
+- [`b3c4249a34e4b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b3c4249a34e4b) -
+  EDITOR-3880 Improve block menu rendering to support infinite nesting
+
 ## 5.2.11
 
 ### Patch Changes

package/dist/cjs/ui/block-menu-renderer/BlockMenuComponent.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockMenuComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BlockMenuComponents = require("./BlockMenuComponents");
+var _utils = require("./utils");
+/**
+ * Renders the given registered component based on its type
+ */
+var BlockMenuComponent = exports.BlockMenuComponent = function BlockMenuComponent(_ref) {
+  var registeredComponent = _ref.registeredComponent,
+    childrenMap = _ref.childrenMap,
+    fallbacks = _ref.fallbacks;
+  if (registeredComponent.type === 'block-menu-item') {
+    var ItemComponent = registeredComponent.component || fallbacks['block-menu-item'];
+    return /*#__PURE__*/_react.default.createElement(ItemComponent, {
+      key: registeredComponent.key
+    });
+  }
+  if (!(0, _utils.willComponentRender)(registeredComponent, childrenMap)) {
+    return null;
+  }
+  var ParentComponent = registeredComponent.component || fallbacks[registeredComponent.type];
+  var childrenMapKey = (0, _utils.getChildrenMapKey)(registeredComponent.key, registeredComponent.type);
+  var registeredComponents = childrenMap.get(childrenMapKey);
+  return /*#__PURE__*/_react.default.createElement(ParentComponent, {
+    key: registeredComponent.key
+  }, /*#__PURE__*/_react.default.createElement(_BlockMenuComponents.BlockMenuComponents, {
+    registeredComponents: registeredComponents,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  }));
+};

package/dist/cjs/ui/block-menu-renderer/BlockMenuComponents.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BlockMenuComponent = require("./BlockMenuComponent");
+/**
+ * Renders the given registered components
+ * Returns null if no components are rendered
+ */
+var BlockMenuComponents = exports.BlockMenuComponents = function BlockMenuComponents(_ref) {
+  var registeredComponents = _ref.registeredComponents,
+    childrenMap = _ref.childrenMap,
+    fallbacks = _ref.fallbacks;
+  if (!(registeredComponents !== null && registeredComponents !== void 0 && registeredComponents.length)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, registeredComponents.map(function (registeredComponent) {
+    return /*#__PURE__*/_react.default.createElement(_BlockMenuComponent.BlockMenuComponent, {
+      key: registeredComponent.key,
+      registeredComponent: registeredComponent,
+      childrenMap: childrenMap,
+      fallbacks: fallbacks
+    });
+  }));
+};

package/dist/cjs/ui/block-menu-renderer/BlockMenuRenderer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockMenuRenderer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _BlockMenuComponents = require("./BlockMenuComponents");
+var _fallbacks = require("./fallbacks");
+var _utils = require("./utils");
+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); }
+/**
+ * BlockMenuRenderer orchestrates the rendering of the entire block menu hierarchy
+ */
+var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_ref) {
+  var allRegisteredComponents = _ref.allRegisteredComponents,
+    _ref$fallbacks = _ref.fallbacks,
+    fallbacks = _ref$fallbacks === void 0 ? _fallbacks.BLOCK_MENU_FALLBACKS : _ref$fallbacks;
+  var _useMemo = (0, _react.useMemo)(function () {
+      return {
+        childrenMap: (0, _utils.buildChildrenMap)(allRegisteredComponents),
+        topLevelSections: (0, _utils.getSortedTopLevelSections)(allRegisteredComponents)
+      };
+    }, [allRegisteredComponents]),
+    childrenMap = _useMemo.childrenMap,
+    topLevelSections = _useMemo.topLevelSections;
+  return /*#__PURE__*/_react.default.createElement(_BlockMenuComponents.BlockMenuComponents, {
+    registeredComponents: topLevelSections,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  });
+};

package/dist/cjs/ui/block-menu-renderer/fallbacks.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BLOCK_MENU_FALLBACKS = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var BLOCK_MENU_FALLBACKS = exports.BLOCK_MENU_FALLBACKS = {
+  'block-menu-nested': function blockMenuNested(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+      elemBefore: undefined,
+      elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+        label: ""
+      }),
+      text: "Nested Menu",
+      enableMaxHeight: true,
+      shouldFitContainer: true
+    }, children);
+  },
+  'block-menu-section': function blockMenuSection(_ref2) {
+    var children = _ref2.children;
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+  },
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  'block-menu-item': function blockMenuItem() {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item");
+  }
+};

package/dist/cjs/ui/block-menu-renderer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/block-menu-renderer/utils.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.willComponentRender = exports.getSortedTopLevelSections = exports.getChildrenMapKey = exports.buildChildrenMap = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Type guard to check if a component has a parent
+ *
+ * @param component The block menu component to check
+ * @returns True if the component has a parent, false otherwise
+ */
+var hasParent = function hasParent(component) {
+  return 'parent' in component && !!component.parent;
+};
+
+/**
+ * Type guard to identify top-level sections (sections without a parent)
+ *
+ * @param component The block menu component to check
+ * @returns True if the component is a top-level section, false otherwise
+ */
+var isTopLevelSection = function isTopLevelSection(component) {
+  return component.type === 'block-menu-section' && !hasParent(component);
+};
+
+/**
+ * Gets all top-level sections (those without a parent) sorted by rank
+ *
+ * @param components All registered block menu components
+ * @returns Sorted array of top-level sections
+ */
+var getSortedTopLevelSections = exports.getSortedTopLevelSections = function getSortedTopLevelSections(components) {
+  return components.filter(isTopLevelSection).sort(function (a, b) {
+    return (a.rank || 0) - (b.rank || 0);
+  });
+};
+
+/**
+ * Generates a unique key from a key and type
+ * Used to lookup children in the childrenMap
+ *
+ * @param key The component's key
+ * @param type The component's type
+ * @returns A unique string key combining type and key
+ */
+var getChildrenMapKey = exports.getChildrenMapKey = function getChildrenMapKey(key, type) {
+  return "".concat(type, ":").concat(key);
+};
+
+/**
+ * Builds a map of parent keys to their sorted children
+ * This enables efficient hierarchical rendering of the menu structure
+ *
+ * @param components All registered block menu components
+ * @returns Map where keys are parent identifiers and values are sorted child components
+ */
+var buildChildrenMap = exports.buildChildrenMap = function buildChildrenMap(components) {
+  var childrenMap = new Map();
+  var _iterator = _createForOfIteratorHelper(components),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var component = _step.value;
+      // Only components with parents can be children
+      if ('parent' in component && !!component.parent) {
+        var childrenMapKey = getChildrenMapKey(component.parent.key, component.parent.type);
+        var existing = childrenMap.get(childrenMapKey) || [];
+        existing.push(component);
+        childrenMap.set(childrenMapKey, existing);
+      }
+    }
+
+    // Sort children by their rank within their parent
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var _iterator2 = _createForOfIteratorHelper(childrenMap.entries()),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = (0, _slicedToArray2.default)(_step2.value, 2),
+        children = _step2$value[1];
+      children.sort(function (a, b) {
+        var rankA = hasParent(a) ? a.parent.rank || 0 : 0;
+        var rankB = hasParent(b) ? b.parent.rank || 0 : 0;
+        return rankA - rankB;
+      });
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return childrenMap;
+};
+
+/**
+ * Determines whether a component will render based on its type and children
+ *
+ * Rules:
+ * - An item will not render if has a component that returns null
+ * - A nested menu will render if it has at least one registered child component
+ * - A section will render if it has at least one registered child component that will render
+ *
+ * NOTE: This requires invoking each item's component function to check for null return
+ */
+var _willComponentRender = exports.willComponentRender = function willComponentRender(registeredComponent, childrenMap) {
+  if (registeredComponent.type === 'block-menu-item') {
+    return registeredComponent.component ? registeredComponent.component() !== null : true;
+  }
+  var childrenMapKey = getChildrenMapKey(registeredComponent.key, registeredComponent.type);
+  var registeredComponents = childrenMap.get(childrenMapKey) || [];
+  if (registeredComponent.type === 'block-menu-nested') {
+    return registeredComponents.length > 0;
+  }
+  return registeredComponents.some(function (childComponent) {
+    return _willComponentRender(childComponent, childrenMap);
+  });
+};

package/dist/cjs/ui/block-menu.js

@@ -19,15 +19,15 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockMenuProvider = require("./block-menu-provider");
-var _blockMenuRenderer = require("./block-menu-renderer");
+var _BlockMenuRenderer = require("./block-menu-renderer/BlockMenuRenderer");
 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); }
 var styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
@@ -120,24 +120,11 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
     testId: "editor-block-menu",
     ref: ref,
     xcss: (0, _css.cx)(styles.base, (0, _experiments.editorExperiment)('platform_synced_block', true) && styles.emptyMenuSectionStyles)
-  }, /*#__PURE__*/_react.default.createElement(_blockMenuRenderer.BlockMenuRenderer, {
-    components: blockMenuComponents || [],
-    fallbacks: {
-      nestedMenu: function nestedMenu() {
-        return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
-          elemBefore: undefined,
-          elemAfter: undefined
-        }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item")));
-      },
-      section: function section() {
-        return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item"));
-      },
-      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
-      item: function item() {
-        return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, null, "Block Menu Item");
-      }
-    }
-  }));
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    type: _uiMenu.ArrowKeyNavigationType.MENU
+  }, /*#__PURE__*/_react.default.createElement(_BlockMenuRenderer.BlockMenuRenderer, {
+    allRegisteredComponents: blockMenuComponents || []
+  })));
 };
 var BlockMenu = function BlockMenu(_ref4) {
   var _editorView$dom, _ref5;

package/dist/es2019/ui/block-menu-renderer/BlockMenuComponent.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BlockMenuComponents } from './BlockMenuComponents';
+import { getChildrenMapKey, willComponentRender } from './utils';
+/**
+ * Renders the given registered component based on its type
+ */
+export const BlockMenuComponent = ({
+  registeredComponent,
+  childrenMap,
+  fallbacks
+}) => {
+  if (registeredComponent.type === 'block-menu-item') {
+    const ItemComponent = registeredComponent.component || fallbacks['block-menu-item'];
+    return /*#__PURE__*/React.createElement(ItemComponent, {
+      key: registeredComponent.key
+    });
+  }
+  if (!willComponentRender(registeredComponent, childrenMap)) {
+    return null;
+  }
+  const ParentComponent = registeredComponent.component || fallbacks[registeredComponent.type];
+  const childrenMapKey = getChildrenMapKey(registeredComponent.key, registeredComponent.type);
+  const registeredComponents = childrenMap.get(childrenMapKey);
+  return /*#__PURE__*/React.createElement(ParentComponent, {
+    key: registeredComponent.key
+  }, /*#__PURE__*/React.createElement(BlockMenuComponents, {
+    registeredComponents: registeredComponents,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  }));
+};

package/dist/es2019/ui/block-menu-renderer/BlockMenuComponents.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BlockMenuComponent } from './BlockMenuComponent';
+/**
+ * Renders the given registered components
+ * Returns null if no components are rendered
+ */
+export const BlockMenuComponents = ({
+  registeredComponents,
+  childrenMap,
+  fallbacks
+}) => {
+  if (!(registeredComponents !== null && registeredComponents !== void 0 && registeredComponents.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, registeredComponents.map(registeredComponent => /*#__PURE__*/React.createElement(BlockMenuComponent, {
+    key: registeredComponent.key,
+    registeredComponent: registeredComponent,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  })));
+};

package/dist/es2019/ui/block-menu-renderer/BlockMenuRenderer.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import { BlockMenuComponents } from './BlockMenuComponents';
+import { BLOCK_MENU_FALLBACKS } from './fallbacks';
+import { buildChildrenMap, getSortedTopLevelSections } from './utils';
+/**
+ * BlockMenuRenderer orchestrates the rendering of the entire block menu hierarchy
+ */
+export const BlockMenuRenderer = ({
+  allRegisteredComponents,
+  fallbacks = BLOCK_MENU_FALLBACKS
+}) => {
+  const {
+    childrenMap,
+    topLevelSections
+  } = useMemo(() => ({
+    childrenMap: buildChildrenMap(allRegisteredComponents),
+    topLevelSections: getSortedTopLevelSections(allRegisteredComponents)
+  }), [allRegisteredComponents]);
+  return /*#__PURE__*/React.createElement(BlockMenuComponents, {
+    registeredComponents: topLevelSections,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  });
+};

package/dist/es2019/ui/block-menu-renderer/fallbacks.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+export const BLOCK_MENU_FALLBACKS = {
+  'block-menu-nested': ({
+    children
+  }) => /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    elemBefore: undefined,
+    elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: ""
+    }),
+    text: "Nested Menu",
+    enableMaxHeight: true,
+    shouldFitContainer: true
+  }, children),
+  'block-menu-section': ({
+    children
+  }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children),
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  'block-menu-item': () => /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item")
+};

package/dist/es2019/ui/block-menu-renderer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/block-menu-renderer/utils.js

@@ -0,0 +1,93 @@
+/**
+ * Type guard to check if a component has a parent
+ *
+ * @param component The block menu component to check
+ * @returns True if the component has a parent, false otherwise
+ */
+const hasParent = component => {
+  return 'parent' in component && !!component.parent;
+};
+
+/**
+ * Type guard to identify top-level sections (sections without a parent)
+ *
+ * @param component The block menu component to check
+ * @returns True if the component is a top-level section, false otherwise
+ */
+const isTopLevelSection = component => {
+  return component.type === 'block-menu-section' && !hasParent(component);
+};
+
+/**
+ * Gets all top-level sections (those without a parent) sorted by rank
+ *
+ * @param components All registered block menu components
+ * @returns Sorted array of top-level sections
+ */
+export const getSortedTopLevelSections = components => {
+  return components.filter(isTopLevelSection).sort((a, b) => (a.rank || 0) - (b.rank || 0));
+};
+
+/**
+ * Generates a unique key from a key and type
+ * Used to lookup children in the childrenMap
+ *
+ * @param key The component's key
+ * @param type The component's type
+ * @returns A unique string key combining type and key
+ */
+export const getChildrenMapKey = (key, type) => {
+  return `${type}:${key}`;
+};
+
+/**
+ * Builds a map of parent keys to their sorted children
+ * This enables efficient hierarchical rendering of the menu structure
+ *
+ * @param components All registered block menu components
+ * @returns Map where keys are parent identifiers and values are sorted child components
+ */
+export const buildChildrenMap = components => {
+  const childrenMap = new Map();
+  for (const component of components) {
+    // Only components with parents can be children
+    if ('parent' in component && !!component.parent) {
+      const childrenMapKey = getChildrenMapKey(component.parent.key, component.parent.type);
+      const existing = childrenMap.get(childrenMapKey) || [];
+      existing.push(component);
+      childrenMap.set(childrenMapKey, existing);
+    }
+  }
+
+  // Sort children by their rank within their parent
+  for (const [, children] of childrenMap.entries()) {
+    children.sort((a, b) => {
+      const rankA = hasParent(a) ? a.parent.rank || 0 : 0;
+      const rankB = hasParent(b) ? b.parent.rank || 0 : 0;
+      return rankA - rankB;
+    });
+  }
+  return childrenMap;
+};
+
+/**
+ * Determines whether a component will render based on its type and children
+ *
+ * Rules:
+ * - An item will not render if has a component that returns null
+ * - A nested menu will render if it has at least one registered child component
+ * - A section will render if it has at least one registered child component that will render
+ *
+ * NOTE: This requires invoking each item's component function to check for null return
+ */
+export const willComponentRender = (registeredComponent, childrenMap) => {
+  if (registeredComponent.type === 'block-menu-item') {
+    return registeredComponent.component ? registeredComponent.component() !== null : true;
+  }
+  const childrenMapKey = getChildrenMapKey(registeredComponent.key, registeredComponent.type);
+  const registeredComponents = childrenMap.get(childrenMapKey) || [];
+  if (registeredComponent.type === 'block-menu-nested') {
+    return registeredComponents.length > 0;
+  }
+  return registeredComponents.some(childComponent => willComponentRender(childComponent, childrenMap));
+};

package/dist/es2019/ui/block-menu.js

@@ -10,15 +10,15 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { Box } from '@atlaskit/primitives/compiled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useBlockMenu } from './block-menu-provider';
-import { BlockMenuRenderer } from './block-menu-renderer';
+import { BlockMenuRenderer } from './block-menu-renderer/BlockMenuRenderer';
 const styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
   emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
@@ -111,18 +111,11 @@ const BlockMenuContent = ({
     testId: "editor-block-menu",
     ref: ref,
     xcss: cx(styles.base, editorExperiment('platform_synced_block', true) && styles.emptyMenuSectionStyles)
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU
   }, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
-    components: blockMenuComponents || [],
-    fallbacks: {
-      nestedMenu: () => /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-        elemBefore: undefined,
-        elemAfter: undefined
-      }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item"))),
-      section: () => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item")),
-      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
-      item: () => /*#__PURE__*/React.createElement(ToolbarDropdownItem, null, "Block Menu Item")
-    }
-  }));
+    allRegisteredComponents: blockMenuComponents || []
+  })));
 };
 const BlockMenu = ({
   editorView,

package/dist/esm/ui/block-menu-renderer/BlockMenuComponent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BlockMenuComponents } from './BlockMenuComponents';
+import { getChildrenMapKey, willComponentRender } from './utils';
+/**
+ * Renders the given registered component based on its type
+ */
+export var BlockMenuComponent = function BlockMenuComponent(_ref) {
+  var registeredComponent = _ref.registeredComponent,
+    childrenMap = _ref.childrenMap,
+    fallbacks = _ref.fallbacks;
+  if (registeredComponent.type === 'block-menu-item') {
+    var ItemComponent = registeredComponent.component || fallbacks['block-menu-item'];
+    return /*#__PURE__*/React.createElement(ItemComponent, {
+      key: registeredComponent.key
+    });
+  }
+  if (!willComponentRender(registeredComponent, childrenMap)) {
+    return null;
+  }
+  var ParentComponent = registeredComponent.component || fallbacks[registeredComponent.type];
+  var childrenMapKey = getChildrenMapKey(registeredComponent.key, registeredComponent.type);
+  var registeredComponents = childrenMap.get(childrenMapKey);
+  return /*#__PURE__*/React.createElement(ParentComponent, {
+    key: registeredComponent.key
+  }, /*#__PURE__*/React.createElement(BlockMenuComponents, {
+    registeredComponents: registeredComponents,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  }));
+};

package/dist/esm/ui/block-menu-renderer/BlockMenuComponents.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BlockMenuComponent } from './BlockMenuComponent';
+/**
+ * Renders the given registered components
+ * Returns null if no components are rendered
+ */
+export var BlockMenuComponents = function BlockMenuComponents(_ref) {
+  var registeredComponents = _ref.registeredComponents,
+    childrenMap = _ref.childrenMap,
+    fallbacks = _ref.fallbacks;
+  if (!(registeredComponents !== null && registeredComponents !== void 0 && registeredComponents.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, registeredComponents.map(function (registeredComponent) {
+    return /*#__PURE__*/React.createElement(BlockMenuComponent, {
+      key: registeredComponent.key,
+      registeredComponent: registeredComponent,
+      childrenMap: childrenMap,
+      fallbacks: fallbacks
+    });
+  }));
+};

package/dist/esm/ui/block-menu-renderer/BlockMenuRenderer.js

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { BlockMenuComponents } from './BlockMenuComponents';
+import { BLOCK_MENU_FALLBACKS } from './fallbacks';
+import { buildChildrenMap, getSortedTopLevelSections } from './utils';
+/**
+ * BlockMenuRenderer orchestrates the rendering of the entire block menu hierarchy
+ */
+export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
+  var allRegisteredComponents = _ref.allRegisteredComponents,
+    _ref$fallbacks = _ref.fallbacks,
+    fallbacks = _ref$fallbacks === void 0 ? BLOCK_MENU_FALLBACKS : _ref$fallbacks;
+  var _useMemo = useMemo(function () {
+      return {
+        childrenMap: buildChildrenMap(allRegisteredComponents),
+        topLevelSections: getSortedTopLevelSections(allRegisteredComponents)
+      };
+    }, [allRegisteredComponents]),
+    childrenMap = _useMemo.childrenMap,
+    topLevelSections = _useMemo.topLevelSections;
+  return /*#__PURE__*/React.createElement(BlockMenuComponents, {
+    registeredComponents: topLevelSections,
+    childrenMap: childrenMap,
+    fallbacks: fallbacks
+  });
+};