@atlaskit/editor-plugin-table 22.4.18 → 22.4.20

package/dist/esm/ui/FloatingContextualMenu/CellMenuPopup.js

@@ -29,11 +29,11 @@ export var CellMenuPopup = function CellMenuPopup(_ref) {
   var closeCellMenu = useCallback(function () {
     var _getPluginState = getPluginState(editorView.state),
       isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
     if (isCellMenuOpenByKeyboard) {
       setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
     }
-  }, [editorView]);
+  }, [api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
   var isEventInsideCellMenu = useCallback(function (event) {
     var _popupContentRef$curr;
     var target = event.target;

package/dist/esm/ui/TableMenu/cell/getCellMenuComponents.js

@@ -1,8 +1,14 @@
 import React from 'react';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import AlignPositionBottomIcon from '@atlaskit/icon-lab/core/align-position-bottom';
+import AlignPositionCenterVerticalIcon from '@atlaskit/icon-lab/core/align-position-center-vertical';
+import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
 import { MergeCellsItem } from './items/MergeCellsItem';
 import { SplitCellItem } from './items/SplitCellItem';
-import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
+import { VerticalAlignDropdownItem } from './items/VerticalAlignDropdownItem';
+import { VerticalAlignNestedMenu } from './items/VerticalAlignNestedMenu';
+import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK, VERTICAL_ALIGN_BOTTOM_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_ITEM, VERTICAL_ALIGN_TOP_ITEM } from './keys';
 export var getCellMenuComponents = function getCellMenuComponents(_ref) {
   var api = _ref.api;
   return [
@@ -23,6 +29,76 @@ export var getCellMenuComponents = function getCellMenuComponents(_ref) {
     component: function component(props) {
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
     }
+  }, {
+    type: VERTICAL_ALIGN_MENU.type,
+    key: VERTICAL_ALIGN_MENU.key,
+    parents: [{
+      type: CELL_ACTION_SECTION.type,
+      key: CELL_ACTION_SECTION.key,
+      rank: CELL_ACTION_SECTION_RANK[VERTICAL_ALIGN_MENU.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(VerticalAlignNestedMenu, null, props.children);
+    }
+  }, {
+    type: VERTICAL_ALIGN_MENU_SECTION.type,
+    key: VERTICAL_ALIGN_MENU_SECTION.key,
+    parents: [{
+      type: VERTICAL_ALIGN_MENU.type,
+      key: VERTICAL_ALIGN_MENU.key,
+      rank: VERTICAL_ALIGN_MENU_RANK[VERTICAL_ALIGN_MENU_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: VERTICAL_ALIGN_TOP_ITEM.type,
+    key: VERTICAL_ALIGN_TOP_ITEM.key,
+    parents: [{
+      type: VERTICAL_ALIGN_MENU_SECTION.type,
+      key: VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_TOP_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+        api: api,
+        icon: AlignPositionTopIcon,
+        label: messages.cellAlignmentTop,
+        value: "top"
+      });
+    }
+  }, {
+    type: VERTICAL_ALIGN_MIDDLE_ITEM.type,
+    key: VERTICAL_ALIGN_MIDDLE_ITEM.key,
+    parents: [{
+      type: VERTICAL_ALIGN_MENU_SECTION.type,
+      key: VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_MIDDLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+        api: api,
+        icon: AlignPositionCenterVerticalIcon,
+        label: messages.cellAlignmentMiddle,
+        value: "middle"
+      });
+    }
+  }, {
+    type: VERTICAL_ALIGN_BOTTOM_ITEM.type,
+    key: VERTICAL_ALIGN_BOTTOM_ITEM.key,
+    parents: [{
+      type: VERTICAL_ALIGN_MENU_SECTION.type,
+      key: VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+        api: api,
+        icon: AlignPositionBottomIcon,
+        label: messages.cellAlignmentBottom,
+        value: "bottom"
+      });
+    }
   }, {
     type: MERGE_CELLS_ITEM.type,
     key: MERGE_CELLS_ITEM.key,

package/dist/esm/ui/TableMenu/cell/items/MergeCellsItem.js

@@ -26,7 +26,8 @@ export var MergeCellsItem = function MergeCellsItem(_ref) {
       return;
     }
     mergeCellsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowMergeCells(tableMenuContext)) {
     return null;

package/dist/esm/ui/TableMenu/cell/items/SplitCellItem.js

@@ -26,7 +26,8 @@ export var SplitCellItem = function SplitCellItem(_ref) {
       return;
     }
     splitCellWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowSplitCell(tableMenuContext)) {
     return null;

package/dist/esm/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js

@@ -0,0 +1,54 @@
+import React, { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu, setMultipleCellAttrsEditorCommand } from '../../../../pm-plugins/commands';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { getSelectedCellValign } from './verticalAlignUtils';
+export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
+  var _useTableMenuContext;
+  var api = _ref.api,
+    Icon = _ref.icon,
+    label = _ref.label,
+    value = _ref.value;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selectedValign = useMemo(function () {
+    return getSelectedCellValign(editorView);
+  }, [editorView]);
+  var handleClick = useCallback(function () {
+    if (!editorView || !api) {
+      return;
+    }
+    var _getPluginState = getPluginState(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      setMultipleCellAttrsEditorCommand({
+        valign: value
+      }, targetCellPosition)({
+        tr: tr
+      });
+      closeActiveTableMenu()({
+        tr: tr
+      });
+      return tr;
+    });
+    api.core.actions.focus();
+  }, [api, editorView, value]);
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    isSelected: selectedValign === value,
+    onClick: handleClick,
+    role: "menuitemradio"
+  }, formatMessage(label));
+};

package/dist/esm/ui/TableMenu/cell/items/VerticalAlignNestedMenu.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import AlignPositionBottomIcon from '@atlaskit/icon-lab/core/align-position-bottom';
+import AlignPositionCenterVerticalIcon from '@atlaskit/icon-lab/core/align-position-center-vertical';
+import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { getSelectedCellValign } from './verticalAlignUtils';
+var getTriggerIcon = function getTriggerIcon(valign) {
+  switch (valign) {
+    case 'middle':
+      return AlignPositionCenterVerticalIcon;
+    case 'bottom':
+      return AlignPositionBottomIcon;
+    case 'top':
+    default:
+      return AlignPositionTopIcon;
+  }
+};
+export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
+  var _useTableMenuContext;
+  var children = _ref.children;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selectedValign = useMemo(function () {
+    return getSelectedCellValign(editorView);
+  }, [editorView]);
+  var TriggerIcon = getTriggerIcon(selectedValign);
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    }),
+    text: formatMessage(messages.cellAlignment)
+  }, children);
+};

package/dist/esm/ui/TableMenu/cell/items/verticalAlignUtils.js

@@ -0,0 +1,14 @@
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+var getNormalizedValign = function getNormalizedValign(valign) {
+  return valign !== null && valign !== void 0 ? valign : 'top';
+};
+export var getSelectedCellValign = function getSelectedCellValign(editorView) {
+  if (!editorView) {
+    return 'top';
+  }
+  var state = editorView.state;
+  var _getPluginState = getPluginState(state),
+    targetCellPosition = _getPluginState.targetCellPosition;
+  var cell = typeof targetCellPosition === 'number' ? state.doc.nodeAt(targetCellPosition) : undefined;
+  return getNormalizedValign(cell === null || cell === void 0 ? void 0 : cell.attrs.valign);
+};

package/dist/esm/ui/TableMenu/cell/keys.js

@@ -27,8 +27,30 @@ export var SPLIT_CELL_ITEM = {
   type: 'menu-item',
   key: 'split-cell'
 };
+export var VERTICAL_ALIGN_MENU = {
+  type: 'nested-menu',
+  key: 'vertical-align'
+};
+export var VERTICAL_ALIGN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'vertical-align-section'
+};
+export var VERTICAL_ALIGN_TOP_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-top'
+};
+export var VERTICAL_ALIGN_MIDDLE_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-middle'
+};
+export var VERTICAL_ALIGN_BOTTOM_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-bottom'
+};
 
 // --- Item ranks within their sections ---
 
-export var CELL_ACTION_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100), MERGE_CELLS_ITEM.key, 200), SPLIT_CELL_ITEM.key, 300);
+export var CELL_ACTION_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200), MERGE_CELLS_ITEM.key, 300), SPLIT_CELL_ITEM.key, 400);
+export var VERTICAL_ALIGN_MENU_RANK = _defineProperty({}, VERTICAL_ALIGN_MENU_SECTION.key, 100);
+export var VERTICAL_ALIGN_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty({}, VERTICAL_ALIGN_TOP_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_ITEM.key, 300);
 export var CELL_DANGER_SECTION_RANK = _defineProperty({}, CLEAR_CELLS_ITEM.key, 100);

package/dist/esm/ui/TableMenu/column/items/AddColumnLeftItem.js

@@ -6,6 +6,7 @@ import { addColumnBefore, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddLeftIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddColumnLeftItem = function AddColumnLeftItem(_ref) {
@@ -38,6 +39,8 @@ export var AddColumnLeftItem = function AddColumnLeftItem(_ref) {
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -6,6 +6,7 @@ import { addColumnAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddColumnRightItem = function AddColumnRightItem(_ref) {
@@ -38,6 +39,8 @@ export var AddColumnRightItem = function AddColumnRightItem(_ref) {
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/column/items/DeleteColumnItem.js

@@ -6,7 +6,7 @@ import { deleteColumn, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { clearHoverSelection, hoverColumns } from '../../../../pm-plugins/commands';
+import { clearHoverSelection, closeActiveTableMenu, hoverColumns } from '../../../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
@@ -57,6 +57,8 @@ export var DeleteColumnItem = function DeleteColumnItem(_ref) {
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     deleteColumnsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect)(editorView.state, editorView.dispatch, editorView);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/column/items/DistributeColumnsItem.js

@@ -5,6 +5,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { distributeColumnsWidthsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getNewResizeStateFromSelectedColumns } from '../../../../pm-plugins/table-resizing/utils/resize-state';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
@@ -47,6 +48,8 @@ export var DistributeColumnsItem = function DistributeColumnsItem(_ref) {
       return;
     }
     distributeColumnsWidthsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowDistributeColumns(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount)) {
     return null;

package/dist/esm/ui/TableMenu/column/items/MoveColumnLeftItem.js

@@ -7,6 +7,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
@@ -41,6 +42,8 @@ export var MoveColumnLeftItem = function MoveColumnLeftItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.left - 1)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnLeft(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn)) {
     return null;

package/dist/esm/ui/TableMenu/column/items/MoveColumnRightItem.js

@@ -6,6 +6,7 @@ import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
@@ -40,6 +41,8 @@ export var MoveColumnRightItem = function MoveColumnRightItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.right)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnRight(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastColumn)) {
     return null;

package/dist/esm/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -5,6 +5,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortDecreasingItem = function SortDecreasingItem(_ref) {
@@ -25,6 +26,8 @@ export var SortDecreasingItem = function SortDecreasingItem(_ref) {
       return;
     }
     sortColumnWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, SortOrder.DESC)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/column/items/SortIncreasingItem.js

@@ -5,6 +5,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowUpIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortIncreasingItem = function SortIncreasingItem(_ref) {
@@ -25,6 +26,8 @@ export var SortIncreasingItem = function SortIncreasingItem(_ref) {
       return;
     }
     sortColumnWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, SortOrder.ASC)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/row/items/AddRowAboveItem.js

@@ -5,6 +5,7 @@ import { addRowBefore, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowAddAboveIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddRowAboveItem = function AddRowAboveItem(props) {
@@ -28,6 +29,8 @@ export var AddRowAboveItem = function AddRowAboveItem(props) {
       index: index,
       moveCursorToInsertedRow: true
     })(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/row/items/AddRowBelowItem.js

@@ -5,6 +5,7 @@ import { addRowAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowAddBelowIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddRowBelowItem = function AddRowBelowItem(props) {
@@ -28,6 +29,8 @@ export var AddRowBelowItem = function AddRowBelowItem(props) {
       index: index,
       moveCursorToInsertedRow: true
     })(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/row/items/DeleteRowItem.js

@@ -6,7 +6,7 @@ import { deleteRow, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { clearHoverSelection, hoverRows } from '../../../../pm-plugins/commands';
+import { clearHoverSelection, closeActiveTableMenu, hoverRows } from '../../../../pm-plugins/commands';
 import { deleteRowsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
@@ -52,6 +52,8 @@ export var DeleteRowItem = function DeleteRowItem(props) {
       return;
     }
     deleteRowsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/TableMenu/row/items/MoveRowDownItem.js

@@ -6,6 +6,7 @@ import { moveRowDown, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveDownIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
@@ -40,6 +41,8 @@ export var MoveRowDownItem = function MoveRowDownItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_ROW, getSelectedRowIndexes(selectionRect), selectionRect.bottom)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowDown(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastRow)) {
     return null;

package/dist/esm/ui/TableMenu/row/items/MoveRowUpItem.js

@@ -6,6 +6,7 @@ import { moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
@@ -40,6 +41,8 @@ export var MoveRowUpItem = function MoveRowUpItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_ROW, getSelectedRowIndexes(selectionRect), selectionRect.top - 1)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowUp(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow)) {
     return null;

package/dist/esm/ui/TableMenu/shared/TableMenu.js

@@ -1,21 +1,15 @@
-/* TableMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import "./TableMenu.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, { memo, useMemo } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
-import { Box } from '@atlaskit/primitives/compiled';
 import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
 import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
 import { TableMenuProvider } from './TableMenuContext';
-var tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
-};
 export var TableMenu = /*#__PURE__*/memo(function (_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
@@ -64,10 +58,7 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
   }
   return /*#__PURE__*/React.createElement(TableMenuProvider, {
     value: tableMenuContext
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: tableMenuContainerStyles.container,
-    testId: surface.key
-  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+  }, /*#__PURE__*/React.createElement(ToolbarMenuContainer, null, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
   })));

package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -20,7 +20,7 @@ var colorPaletteStyles = {
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
 export var BackgroundColorItem = function BackgroundColorItem(_ref) {
-  var _useTableMenuContext, _api$analytics2;
+  var _useTableMenuContext;
   var api = _ref.api;
   var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
     editorView = _ref2.editorView;
@@ -42,8 +42,9 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
       return;
     }
     setColorWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
-  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
+  }, [api, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = useMemo(function () {
     return {

package/dist/esm/ui/TableMenu/shared/items/ClearCellsItem.js

@@ -25,7 +25,8 @@ export var ClearCellsItem = function ClearCellsItem(_ref) {
     var _getPluginState = getPluginState(editorView.state),
       targetCellPosition = _getPluginState.targetCellPosition;
     emptyMultipleCellsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/ui/toolbar.js

@@ -2,6 +2,7 @@ import _toArray from "@babel/runtime/helpers/toArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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; }
 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; }
 /**
@@ -866,10 +867,10 @@ var isLayoutOptionDisabledImpl = function isLayoutOptionDisabledImpl(selectedNod
 var getMemoizedIsLayoutOptionDisabled = memoizeOne(isLayoutOptionDisabledImpl, function (_ref6, _ref7) {
   var _ref8 = _toArray(_ref6),
     prevNode = _ref8[0],
-    prevRest = _ref8.slice(1);
+    prevRest = _arrayLikeToArray(_ref8).slice(1);
   var _ref9 = _toArray(_ref7),
     nextNode = _ref9[0],
-    nextRest = _ref9.slice(1);
+    nextRest = _arrayLikeToArray(_ref9).slice(1);
   // Only node needs special comparison (attrs only), rest use reference equality
   var nodeEqual = isEqual(prevNode.attrs, nextNode.attrs);
   var restEqual = prevRest.every(function (val, idx) {

package/dist/types/pm-plugins/commands/active-table-menu.d.ts

@@ -1,6 +1,6 @@
-import type { Command } from '@atlaskit/editor-common/types';
+import type { EditorCommand } from '@atlaskit/editor-common/types';
 import type { ActiveTableMenu } from '../../types';
-export declare const closeActiveTableMenu: () => Command;
+export declare const closeActiveTableMenu: () => EditorCommand;
 export declare const toggleActiveTableMenu: (activeTableMenu: Exclude<ActiveTableMenu, {
     type: "none";
-}>) => Command;
+}>, currentActiveTableMenu: ActiveTableMenu | undefined) => EditorCommand;