@atlaskit/editor-plugin-layout 10.7.1 → 10.8.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.8.0
+
+### Minor Changes
+
+- [`1c86d46da6101`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c86d46da6101) -
+  Address layout column alignment follow-up review feedback
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.7.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/utils/layout-column-selection.js

@@ -112,7 +112,8 @@ var getLayoutSectionColumnCount = exports.getLayoutSectionColumnCount = function
   return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
 };
 var getLayoutColumnValign = exports.getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
-  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
+  var _ref2;
+  return layoutColumn ? (_ref2 = layoutColumn.attrs.valign) !== null && _ref2 !== void 0 ? _ref2 : 'top' : undefined;
 };
 var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;
@@ -120,8 +121,8 @@ var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = functi
   if (!selectedLayoutColumns) {
     return undefined;
   }
-  var clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(function (_ref2) {
-    var pos = _ref2.pos;
+  var clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(function (_ref3) {
+    var pos = _ref3.pos;
     return pos === anchorPosFromHandle;
   });
   return (_clickedSelectedColum = clickedSelectedColumn === null || clickedSelectedColumn === void 0 ? void 0 : clickedSelectedColumn.pos) !== null && _clickedSelectedColum !== void 0 ? _clickedSelectedColum : (_selectedLayoutColumn = selectedLayoutColumns.selectedColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.pos;

package/dist/cjs/ui/LayoutColumnMenu/VerticalAlignDropdownItem.js

@@ -35,6 +35,7 @@ var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function Ver
       size: "small"
     }),
     isSelected: isSelected,
-    onClick: onClick
+    onClick: onClick,
+    role: "menuitemradio"
   }, formatMessage(label));
 };

package/dist/cjs/ui/LayoutColumnMenu/VerticalAlignNestedMenu.js

@@ -31,10 +31,7 @@ var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function Vertica
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _editorToolbar.LayoutIcon;
-  if (!selectedLayoutColumns) {
-    return null;
-  }
+  var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _verticalAlignIcons.VERTICAL_ALIGN_ICONS.top;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/_react.default.createElement(TriggerIcon, {
       label: "",

package/dist/cjs/ui/LayoutColumnMenu/components.js

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLayoutColumnMenuComponents = exports.LAYOUT_COLUMN_MENU_FALLBACKS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _messages = require("@atlaskit/editor-common/messages");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
 var _DeleteColumnDropdownItem = require("./DeleteColumnDropdownItem");
@@ -16,18 +18,26 @@ var _InsertColumnDropdownItem = require("./InsertColumnDropdownItem");
 var _keys = require("./keys");
 var _VerticalAlignDropdownItem = require("./VerticalAlignDropdownItem");
 var _VerticalAlignNestedMenu = require("./VerticalAlignNestedMenu");
+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 LayoutColumnMenuContainer = function LayoutColumnMenuContainer(_ref) {
+  var children = _ref.children;
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  return /*#__PURE__*/_react.default.createElement(_toolbarMenuContainer.ToolbarMenuContainer, {
+    ref: setOutsideClickTargetRef
+  }, children);
+};
 var LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU_FALLBACKS = {
-  'menu-section': function menuSection(_ref) {
-    var children = _ref.children;
+  'menu-section': function menuSection(_ref2) {
+    var children = _ref2.children;
     return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
   }
 };
-var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref2) {
-  var api = _ref2.api;
+var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref3) {
+  var api = _ref3.api;
   return [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU), {}, {
-    component: _toolbarMenuContainer.ToolbarMenuContainer
+    component: LayoutColumnMenuContainer
   }), _objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU), {}, {
       rank: _keys.LAYOUT_COLUMN_MENU_RANK[_keys.LAYOUT_COLUMN_MENU_SECTION.key]
@@ -71,8 +81,8 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
       rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DELETE_COLUMN_MENU_ITEM.key]
     })]
   }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MENU), {}, {
-    component: function component(_ref3) {
-      var children = _ref3.children;
+    component: function component(_ref4) {
+      var children = _ref4.children;
       return /*#__PURE__*/_react.default.createElement(_VerticalAlignNestedMenu.VerticalAlignNestedMenu, {
         api: api
       }, children);

package/dist/cjs/ui/LayoutColumnMenu/index.js

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LayoutColumnMenu = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
-var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -21,8 +18,8 @@ var _components = require("./components");
 var _keys = require("./keys");
 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 PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
-var FALLBACK_MENU_HEIGHT = 300;
 var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
 
 /**
  * Returns the drag handle button for the selected layout column.
@@ -58,20 +55,6 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
     layoutColumnMenuAnchorPos = _useSharedPluginState.layoutColumnMenuAnchorPos,
     selection = _useSharedPluginState.selection;
-  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
-  var menuRef = (0, _react.useRef)(null);
-  var popupRef = (0, _react.useRef)(undefined);
-  var _React$useState = _react.default.useState(FALLBACK_MENU_HEIGHT),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    menuHeight = _React$useState2[0],
-    setMenuHeight = _React$useState2[1];
-  (0, _react.useLayoutEffect)(function () {
-    var _popupRef$current;
-    if (!isLayoutColumnMenuOpen) {
-      return;
-    }
-    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
-  }, [isLayoutColumnMenuOpen]);
   var closeLayoutColumnMenu = (0, _react.useCallback)(function () {
     var _api$core, _api$layout;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
@@ -79,11 +62,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     }));
   }, [api]);
   var handleClickOutside = (0, _react.useCallback)(function (event) {
-    var _menuRef$current;
-    if (event.target instanceof Node && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(event.target)) {
-      return;
-    }
-    if (event.target instanceof Element && event.target.closest('[data-toolbar-nested-dropdown-menu]')) {
+    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest('[data-toolbar-nested-dropdown-menu]'))) {
       return;
     }
 
@@ -100,13 +79,6 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
-  var handleMenuRef = (0, _react.useCallback)(function (el) {
-    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
-    menuRef.current = el;
-    if (el) {
-      popupRef.current = el;
-    }
-  }, [setOutsideClickTargetRef]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_keys.LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var target = (0, _react.useMemo)(function () {
     return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
@@ -127,16 +99,11 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     scrollableElement: scrollableElement,
     zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     alignX: "center",
-    fitHeight: menuHeight,
     preventOverflow: true,
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: handleMenuRef
-  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
-    editorView: editorView
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
@@ -144,5 +111,5 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     components: components,
     fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: _keys.LAYOUT_COLUMN_MENU
-  })))));
+  })));
 });

package/dist/es2019/pm-plugins/utils/layout-column-selection.js

@@ -104,7 +104,10 @@ export const getSelectedLayoutColumns = selection => {
   };
 };
 export const getLayoutSectionColumnCount = layoutSection => (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
-export const getLayoutColumnValign = layoutColumn => layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
+export const getLayoutColumnValign = layoutColumn => {
+  var _ref;
+  return layoutColumn ? (_ref = layoutColumn.attrs.valign) !== null && _ref !== void 0 ? _ref : 'top' : undefined;
+};
 export const getLayoutColumnMenuAnchorPos = (selection, anchorPosFromHandle) => {
   var _clickedSelectedColum, _selectedLayoutColumn;
   const selectedLayoutColumns = getSelectedLayoutColumns(selection);

package/dist/es2019/ui/LayoutColumnMenu/VerticalAlignDropdownItem.js

@@ -28,6 +28,7 @@ export const VerticalAlignDropdownItem = ({
       size: "small"
     }),
     isSelected: isSelected,
-    onClick: onClick
+    onClick: onClick,
+    role: "menuitemradio"
   }, formatMessage(label));
 };

package/dist/es2019/ui/LayoutColumnMenu/VerticalAlignNestedMenu.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { LayoutIcon, NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { getLayoutColumnValign } from '../../pm-plugins/utils/layout-column-selection';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
@@ -24,10 +24,7 @@ export const VerticalAlignNestedMenu = ({
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : LayoutIcon;
-  if (!selectedLayoutColumns) {
-    return null;
-  }
+  const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.top;
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
       label: "",

package/dist/es2019/ui/LayoutColumnMenu/components.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
+import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
@@ -8,6 +9,14 @@ import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
 import { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_MENU_ITEM, LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_RANK, LAYOUT_COLUMN_MENU_SECTION, LAYOUT_COLUMN_MENU_SECTION_RANK, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_BOTTOM_MENU_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_MENU_ITEM, VERTICAL_ALIGN_TOP_MENU_ITEM } from './keys';
 import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
 import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
+const LayoutColumnMenuContainer = ({
+  children
+}) => {
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement(ToolbarMenuContainer, {
+    ref: setOutsideClickTargetRef
+  }, children);
+};
 export const LAYOUT_COLUMN_MENU_FALLBACKS = {
   'menu-section': ({
     children
@@ -18,7 +27,7 @@ export const getLayoutColumnMenuComponents = ({
 }) => {
   return [{
     ...LAYOUT_COLUMN_MENU,
-    component: ToolbarMenuContainer
+    component: LayoutColumnMenuContainer
   }, {
     ...LAYOUT_COLUMN_MENU_SECTION,
     parents: [{

package/dist/es2019/ui/LayoutColumnMenu/index.js

@@ -1,9 +1,8 @@
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
-import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
@@ -11,8 +10,8 @@ import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-colu
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-const FALLBACK_MENU_HEIGHT = 300;
 const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+const TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
 
 /**
  * Returns the drag handle button for the selected layout column.
@@ -50,17 +49,6 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
       selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
     };
   });
-  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
-  const menuRef = useRef(null);
-  const popupRef = useRef(undefined);
-  const [menuHeight, setMenuHeight] = React.useState(FALLBACK_MENU_HEIGHT);
-  useLayoutEffect(() => {
-    var _popupRef$current;
-    if (!isLayoutColumnMenuOpen) {
-      return;
-    }
-    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
-  }, [isLayoutColumnMenuOpen]);
   const closeLayoutColumnMenu = useCallback(() => {
     var _api$core, _api$layout;
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
@@ -68,11 +56,7 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     }));
   }, [api]);
   const handleClickOutside = useCallback(event => {
-    var _menuRef$current;
-    if (event.target instanceof Node && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(event.target)) {
-      return;
-    }
-    if (event.target instanceof Element && event.target.closest('[data-toolbar-nested-dropdown-menu]')) {
+    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest('[data-toolbar-nested-dropdown-menu]'))) {
       return;
     }
 
@@ -89,13 +73,6 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
-  const handleMenuRef = useCallback(el => {
-    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
-    menuRef.current = el;
-    if (el) {
-      popupRef.current = el;
-    }
-  }, [setOutsideClickTargetRef]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   const hasValidTarget = target instanceof HTMLElement;
@@ -114,16 +91,11 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     scrollableElement: scrollableElement,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     alignX: "center",
-    fitHeight: menuHeight,
     preventOverflow: true,
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: handleMenuRef
-  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
@@ -131,5 +103,5 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  })))));
+  })));
 });

package/dist/esm/pm-plugins/utils/layout-column-selection.js

@@ -106,7 +106,8 @@ export var getLayoutSectionColumnCount = function getLayoutSectionColumnCount(la
   return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
 };
 export var getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
-  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
+  var _ref2;
+  return layoutColumn ? (_ref2 = layoutColumn.attrs.valign) !== null && _ref2 !== void 0 ? _ref2 : 'top' : undefined;
 };
 export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;
@@ -114,8 +115,8 @@ export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(
   if (!selectedLayoutColumns) {
     return undefined;
   }
-  var clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(function (_ref2) {
-    var pos = _ref2.pos;
+  var clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(function (_ref3) {
+    var pos = _ref3.pos;
     return pos === anchorPosFromHandle;
   });
   return (_clickedSelectedColum = clickedSelectedColumn === null || clickedSelectedColumn === void 0 ? void 0 : clickedSelectedColumn.pos) !== null && _clickedSelectedColum !== void 0 ? _clickedSelectedColum : (_selectedLayoutColumn = selectedLayoutColumns.selectedColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.pos;

package/dist/esm/ui/LayoutColumnMenu/VerticalAlignDropdownItem.js

@@ -27,6 +27,7 @@ export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref)
       size: "small"
     }),
     isSelected: isSelected,
-    onClick: onClick
+    onClick: onClick,
+    role: "menuitemradio"
   }, formatMessage(label));
 };

package/dist/esm/ui/LayoutColumnMenu/VerticalAlignNestedMenu.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { LayoutIcon, NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { getLayoutColumnValign } from '../../pm-plugins/utils/layout-column-selection';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
@@ -23,10 +23,7 @@ export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  var TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : LayoutIcon;
-  if (!selectedLayoutColumns) {
-    return null;
-  }
+  var TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.top;
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
       label: "",

package/dist/esm/ui/LayoutColumnMenu/components.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 from 'react';
+import React, { useContext } from 'react';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
+import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
@@ -11,16 +12,23 @@ import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
 import { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_MENU_ITEM, LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_RANK, LAYOUT_COLUMN_MENU_SECTION, LAYOUT_COLUMN_MENU_SECTION_RANK, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_BOTTOM_MENU_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_MENU_ITEM, VERTICAL_ALIGN_TOP_MENU_ITEM } from './keys';
 import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
 import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
+var LayoutColumnMenuContainer = function LayoutColumnMenuContainer(_ref) {
+  var children = _ref.children;
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement(ToolbarMenuContainer, {
+    ref: setOutsideClickTargetRef
+  }, children);
+};
 export var LAYOUT_COLUMN_MENU_FALLBACKS = {
-  'menu-section': function menuSection(_ref) {
-    var children = _ref.children;
+  'menu-section': function menuSection(_ref2) {
+    var children = _ref2.children;
     return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
   }
 };
-export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref2) {
-  var api = _ref2.api;
+export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref3) {
+  var api = _ref3.api;
   return [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
-    component: ToolbarMenuContainer
+    component: LayoutColumnMenuContainer
   }), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
       rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
@@ -64,8 +72,8 @@ export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponent
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
     })]
   }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_MENU), {}, {
-    component: function component(_ref3) {
-      var children = _ref3.children;
+    component: function component(_ref4) {
+      var children = _ref4.children;
       return /*#__PURE__*/React.createElement(VerticalAlignNestedMenu, {
         api: api
       }, children);

package/dist/esm/ui/LayoutColumnMenu/index.js

@@ -1,10 +1,8 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
-import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
@@ -12,8 +10,8 @@ import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-colu
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-var FALLBACK_MENU_HEIGHT = 300;
 var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
 
 /**
  * Returns the drag handle button for the selected layout column.
@@ -49,20 +47,6 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
     layoutColumnMenuAnchorPos = _useSharedPluginState.layoutColumnMenuAnchorPos,
     selection = _useSharedPluginState.selection;
-  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
-  var menuRef = useRef(null);
-  var popupRef = useRef(undefined);
-  var _React$useState = React.useState(FALLBACK_MENU_HEIGHT),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    menuHeight = _React$useState2[0],
-    setMenuHeight = _React$useState2[1];
-  useLayoutEffect(function () {
-    var _popupRef$current;
-    if (!isLayoutColumnMenuOpen) {
-      return;
-    }
-    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
-  }, [isLayoutColumnMenuOpen]);
   var closeLayoutColumnMenu = useCallback(function () {
     var _api$core, _api$layout;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
@@ -70,11 +54,7 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     }));
   }, [api]);
   var handleClickOutside = useCallback(function (event) {
-    var _menuRef$current;
-    if (event.target instanceof Node && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(event.target)) {
-      return;
-    }
-    if (event.target instanceof Element && event.target.closest('[data-toolbar-nested-dropdown-menu]')) {
+    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest('[data-toolbar-nested-dropdown-menu]'))) {
       return;
     }
 
@@ -91,13 +71,6 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
-  var handleMenuRef = useCallback(function (el) {
-    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
-    menuRef.current = el;
-    if (el) {
-      popupRef.current = el;
-    }
-  }, [setOutsideClickTargetRef]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var target = useMemo(function () {
     return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
@@ -118,16 +91,11 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     scrollableElement: scrollableElement,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     alignX: "center",
-    fitHeight: menuHeight,
     preventOverflow: true,
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: handleMenuRef
-  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
@@ -135,5 +103,5 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  })))));
+  })));
 });

package/dist/types/pm-plugins/actions.d.ts

@@ -1,7 +1,7 @@
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Change, PresetLayout } from '../types';

package/dist/types/pm-plugins/utils/layout-column-selection.d.ts

@@ -1,4 +1,4 @@
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 export type SelectedLayoutColumn = {

package/dist/types/ui/LayoutColumnMenu/VerticalAlignDropdownItem.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { type MessageDescriptor } from 'react-intl';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
 import type { LayoutPlugin } from '../../layoutPluginType';
-export type VerticalAlignOption = {
+type VerticalAlignDropdownItemProps = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
     label: MessageDescriptor;
     value: Valign;
 };
-type VerticalAlignDropdownItemProps = VerticalAlignOption & {
-    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
-};
-export declare const VerticalAlignDropdownItem: ({ api, label, value, }: VerticalAlignDropdownItemProps) => React.JSX.Element | null;
+export declare const VerticalAlignDropdownItem: ({ api, label, value, }: VerticalAlignDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types/ui/LayoutColumnMenu/verticalAlignIcons.d.ts

@@ -1,4 +1,4 @@
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import AlignContentTopIcon from '@atlaskit/icon-lab/core/align-content-top';
 type VerticalAlignIcon = typeof AlignContentTopIcon;
 export declare const VERTICAL_ALIGN_ICONS: Record<Valign, VerticalAlignIcon>;

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -1,7 +1,7 @@
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Change, PresetLayout } from '../types';

package/dist/types-ts4.5/pm-plugins/utils/layout-column-selection.d.ts

@@ -1,4 +1,4 @@
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 export type SelectedLayoutColumn = {

package/dist/types-ts4.5/ui/LayoutColumnMenu/VerticalAlignDropdownItem.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { type MessageDescriptor } from 'react-intl';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
 import type { LayoutPlugin } from '../../layoutPluginType';
-export type VerticalAlignOption = {
+type VerticalAlignDropdownItemProps = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
     label: MessageDescriptor;
     value: Valign;
 };
-type VerticalAlignDropdownItemProps = VerticalAlignOption & {
-    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
-};
-export declare const VerticalAlignDropdownItem: ({ api, label, value, }: VerticalAlignDropdownItemProps) => React.JSX.Element | null;
+export declare const VerticalAlignDropdownItem: ({ api, label, value, }: VerticalAlignDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/LayoutColumnMenu/verticalAlignIcons.d.ts

@@ -1,4 +1,4 @@
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import AlignContentTopIcon from '@atlaskit/icon-lab/core/align-content-top';
 type VerticalAlignIcon = typeof AlignContentTopIcon;
 export declare const VERTICAL_ALIGN_ICONS: Record<Valign, VerticalAlignIcon>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "10.7.1",
+	"version": "10.8.0",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.14.0",
+		"@atlaskit/adf-schema": "^52.15.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^9.2.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-plugin-width": "^11.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
-		"@atlaskit/editor-toolbar": "^1.7.0",
+		"@atlaskit/editor-toolbar": "^1.8.0",
 		"@atlaskit/editor-ui-control-model": "^1.2.0",
 		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/icon-lab": "^6.12.0",
@@ -55,7 +55,7 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.47.0",
+		"@atlaskit/editor-common": "^114.48.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},