@atlaskit/editor-plugin-table 22.4.15 → 22.4.16

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

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveRowDown, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveDownIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,10 +17,10 @@ export const MoveRowDownItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     tableNode
   } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {

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

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,10 +17,10 @@ export const MoveRowUpItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     tableNode
   } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {

package/dist/es2019/ui/TableMenu/row/items/NumberedRowsToggleItem.js

@@ -2,17 +2,18 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
 import { toggleNumberColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const NumberedRowsToggleItem = props => {
+  var _useTableMenuContext;
   const {
     api
   } = props;
   const {
     editorView
-  } = useEditorToolbar();
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     isNumberColumnAllowed,
     isNumberColumnEnabled

package/dist/es2019/ui/TableMenu/shared/TableMenu.compiled.css

@@ -1,6 +1,4 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
-._18m915vq{overflow-y:hidden}
 ._1bsb1178{width:280px}
-._1reo15vq{overflow-x:hidden}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -3,7 +3,6 @@ import "./TableMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { memo, useMemo } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
@@ -12,9 +11,8 @@ import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
 import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
 import { TableMenuProvider } from './TableMenuContext';
 const tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
 };
-const EMPTY_CONTEXT = {};
 export const TableMenu = /*#__PURE__*/memo(({
   api,
   editorView,
@@ -36,11 +34,14 @@ export const TableMenu = /*#__PURE__*/memo(({
   });
   const tableMenuContext = useMemo(() => {
     if (!selection || !tableNode) {
-      return EMPTY_CONTEXT;
+      return {
+        editorView
+      };
     }
     const tableMap = TableMap.get(tableNode);
     const selectionRect = getSelectionRect(selection);
     const cellOps = {
+      editorView,
       canMergeCells: canMergeCellSelection(selection),
       canSplitCell: canSplitCellSelection(selection),
       hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -57,13 +58,11 @@ export const TableMenu = /*#__PURE__*/memo(({
       isLastColumn: selectionRect.right === tableMap.width,
       selectedColumnCount: selectionRect.right - selectionRect.left
     };
-  }, [selection, tableNode]);
+  }, [editorView, selection, tableNode]);
   if (components.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
-  }, /*#__PURE__*/React.createElement(TableMenuProvider, {
+  return /*#__PURE__*/React.createElement(TableMenuProvider, {
     value: tableMenuContext
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: tableMenuContainerStyles.container,
@@ -71,6 +70,6 @@ export const TableMenu = /*#__PURE__*/memo(({
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
-  }))));
+  })));
 });
 TableMenu.displayName = 'TableMenu';

package/dist/es2019/ui/TableMenu/shared/getSharedItems.js

@@ -23,7 +23,9 @@ export const getSharedItems = ({
     key: CELL_ACTION_SECTION.key,
     rank: CELL_ACTION_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(BackgroundColorItem, null)
+  component: () => /*#__PURE__*/React.createElement(BackgroundColorItem, {
+    api: api
+  })
 }, {
   type: CLEAR_CELLS_ITEM.type,
   key: CLEAR_CELLS_ITEM.key,

package/dist/es2019/ui/TableMenu/shared/getTableMenuComponents.js

@@ -2,4 +2,4 @@ import { getCellMenuComponents } from '../cell/getCellMenuComponents';
 import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
-export const getTableMenuComponents = params => [...getRowMenuComponents(params), ...getColumnMenuComponents(params), ...getCellMenuComponents(), ...getSharedItems(params)];
+export const getTableMenuComponents = params => [...getRowMenuComponents(params), ...getColumnMenuComponents(params), ...getCellMenuComponents(params), ...getSharedItems(params)];

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

@@ -3,26 +3,55 @@ import "./BackgroundColorItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../TableMenuContext';
 const colorPaletteColumns = 7;
 const colorPaletteStyles = {
   container: "_1rjcu2gc",
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-export const BackgroundColorItem = () => {
+export const BackgroundColorItem = ({
+  api
+}) => {
+  var _useTableMenuContext, _api$analytics2;
+  const {
+    editorView
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     formatMessage
   } = useIntl();
-  const onClick = useCallback(() => {}, []);
+  const selectedColor = useMemo(() => {
+    var _node$attrs;
+    if (!editorView) {
+      return '#ffffff';
+    }
+    const {
+      targetCellPosition
+    } = getPluginState(editorView.state);
+    const node = targetCellPosition ? editorView.state.doc.nodeAt(targetCellPosition) : null;
+    return hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+  }, [editorView]);
+  const onClick = useCallback(color => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    setColorWithAnalytics(api === null || api === void 0 ? 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 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   const colorPreviewStyle = useMemo(() => ({
-    backgroundColor: '#ffffff'
-  }), []);
+    backgroundColor: selectedColor
+  }), [selectedColor]);
   const paletteOptions = useMemo(() => {
     return {
       palette: cellBackgroundColorPalette,

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

@@ -3,8 +3,8 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { emptyMultipleCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { useTableMenuContext } from '../TableMenuContext';
@@ -12,10 +12,10 @@ export const ClearCellsItem = ({
   api
 }) => {
   var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     formatMessage
   } = useIntl();
@@ -29,6 +29,7 @@ export const ClearCellsItem = ({
       targetCellPosition
     } = getPluginState(editorView.state);
     emptyMultipleCellsWithAnalytics(api === null || api === void 0 ? 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);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/pm-plugins/commands/active-table-menu.js

@@ -0,0 +1,45 @@
+import { createCommand, getPluginState } from '../plugin-factory';
+export var closeActiveTableMenu = function closeActiveTableMenu() {
+  return createCommand(function (state) {
+    var _getPluginState = getPluginState(state),
+      activeTableMenu = _getPluginState.activeTableMenu;
+    if (!activeTableMenu || activeTableMenu.type === 'none') {
+      return false;
+    }
+    return {
+      type: 'SET_ACTIVE_TABLE_MENU',
+      data: {
+        activeTableMenu: {
+          type: 'none'
+        }
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+var isSameActiveTableMenu = function isSameActiveTableMenu(current, next) {
+  if (!current || current.type !== next.type) {
+    return false;
+  }
+  if (current.type === 'row' || current.type === 'column') {
+    return next.type === current.type && current.index === next.index;
+  }
+  return true;
+};
+export var toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu) {
+  return createCommand(function (state) {
+    var _getPluginState2 = getPluginState(state),
+      currentActiveTableMenu = _getPluginState2.activeTableMenu;
+    return {
+      type: 'SET_ACTIVE_TABLE_MENU',
+      data: {
+        activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
+          type: 'none'
+        } : activeTableMenu
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};

package/dist/esm/pm-plugins/commands/commands-with-analytics.js

@@ -13,6 +13,7 @@ import { deleteRows } from '../transforms/delete-rows';
 import { mergeCells } from '../transforms/merge';
 import { withEditorAnalyticsAPI, getSelectedCellInfo, getSelectedTableInfo } from '../utils/analytics';
 import { checkIfNumberColumnEnabled } from '../utils/nodes';
+import { toggleActiveTableMenu } from './active-table-menu';
 import { clearMultipleCells } from './clear';
 import { wrapTableInExpand } from './collapse';
 import { changeColumnWidthByStep } from './column-resize';
@@ -23,8 +24,38 @@ import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleC
 import { sortByColumn } from './sort';
 import { splitCell } from './split-cell';
 import { toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn } from './toggle';
-
-// #region Analytics wrappers
+export var toggleActiveTableMenuWithAnalytics = function toggleActiveTableMenuWithAnalytics(editorAnalyticsAPI) {
+  return function (direction, index) {
+    var trigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mouse';
+    return withEditorAnalyticsAPI(function (state) {
+      var _getPluginState = getPluginState(state),
+        previousActiveTableMenu = _getPluginState.activeTableMenu;
+      var isSameActiveMenu = (previousActiveTableMenu === null || previousActiveTableMenu === void 0 ? void 0 : previousActiveTableMenu.type) === direction && previousActiveTableMenu.index === index;
+      if (isSameActiveMenu) {
+        return undefined;
+      }
+      return {
+        action: TABLE_ACTION.DRAG_MENU_OPENED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod: trigger === 'keyboard' ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE,
+          direction: direction
+        }
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        toggleActiveTableMenu({
+          type: direction,
+          index: index,
+          openedBy: trigger
+        })(state, dispatch);
+      }
+      return true;
+    });
+  };
+};
 export var emptyMultipleCellsWithAnalytics = function emptyMultipleCellsWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, targetCellPosition) {
     return withEditorAnalyticsAPI(function (_ref) {
@@ -189,8 +220,8 @@ export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthBySt
         table = _getSelectedTableInfo2.table,
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
-      var _getPluginState = getPluginState(state),
-        colIndex = _getPluginState.hoveredCell.colIndex;
+      var _getPluginState2 = getPluginState(state),
+        colIndex = _getPluginState2.hoveredCell.colIndex;
       return {
         action: TABLE_ACTION.COLUMN_RESIZED,
         actionSubject: ACTION_SUBJECT.TABLE,
@@ -310,8 +341,8 @@ export var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function delete
     }
     var selectionType = getTableSelectionType(selection);
     if (selectionType === 'row') {
-      var _getPluginState2 = getPluginState(state),
-        pluginConfig = _getPluginState2.pluginConfig;
+      var _getPluginState3 = getPluginState(state),
+        pluginConfig = _getPluginState3.pluginConfig;
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
@@ -355,8 +386,8 @@ export var toggleHeaderRowWithAnalytics = function toggleHeaderRowWithAnalytics(
     var _getSelectedTableInfo7 = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo7.totalRowCount,
       totalColumnCount = _getSelectedTableInfo7.totalColumnCount;
-    var _getPluginState3 = getPluginState(state),
-      isHeaderRowEnabled = _getPluginState3.isHeaderRowEnabled;
+    var _getPluginState4 = getPluginState(state),
+      isHeaderRowEnabled = _getPluginState4.isHeaderRowEnabled;
     return {
       action: TABLE_ACTION.TOGGLED_HEADER_ROW,
       actionSubject: ACTION_SUBJECT.TABLE,
@@ -375,8 +406,8 @@ export var toggleHeaderColumnWithAnalytics = function toggleHeaderColumnWithAnal
     var _getSelectedTableInfo8 = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo8.totalRowCount,
       totalColumnCount = _getSelectedTableInfo8.totalColumnCount;
-    var _getPluginState4 = getPluginState(state),
-      isHeaderColumnEnabled = _getPluginState4.isHeaderColumnEnabled;
+    var _getPluginState5 = getPluginState(state),
+      isHeaderColumnEnabled = _getPluginState5.isHeaderColumnEnabled;
     return {
       action: TABLE_ACTION.TOGGLED_HEADER_COLUMN,
       actionSubject: ACTION_SUBJECT.TABLE,

package/dist/esm/pm-plugins/commands/index.js

@@ -4,6 +4,7 @@
 export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, setTableHovered } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
+export { closeActiveTableMenu, toggleActiveTableMenu } from './active-table-menu';
 export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu } from './misc';
 export { sortByColumn } from './sort';

package/dist/esm/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -146,6 +146,8 @@ export var cloneSourceWithAnalytics = function cloneSourceWithAnalytics(editorAn
     });
   };
 };
+
+// remove when 'platform_editor_table_menu_updates' is cleaned up
 export var toggleDragMenuWithAnalytics = function toggleDragMenuWithAnalytics(editorAnalyticsAPI) {
   return function (isDragMenuOpen, direction, index) {
     var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';

package/dist/esm/pm-plugins/drag-and-drop/plugin.js

@@ -8,6 +8,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { closeActiveTableMenu } from '../commands/active-table-menu';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { insertColgroupFromNode } from '../table-resizing/utils/colgroup';
@@ -87,6 +88,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         (_insm$session3 = insm.session) === null || _insm$session3 === void 0 || _insm$session3.startFeature('tableDragAndDrop');
       }
       toggleDragMenu(false)(editorView.state, editorView.dispatch);
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        closeActiveTableMenu()(editorView.state, editorView.dispatch);
+      }
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
     },
     onDrag: function onDrag(event) {

package/dist/esm/pm-plugins/handlers.js

@@ -9,6 +9,7 @@ import { isTextInput } from '@atlaskit/editor-common/utils';
 
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { defaultTableSelection } from './default-table-selection';
 import { pluginKey as tableResizingPluginKey } from './table-resizing/plugin-key';
 import { isTableCollapsible } from './utils/collapse';
@@ -43,8 +44,14 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref) {
     if (pluginState.targetCellPosition === targetCellPosition) {
       return pluginState;
     }
+
+    // The updated table menu is anchored to the current target cell. When selection moves
+    // to another cell, close the active menu so render state cannot point at a stale anchor.
     return _objectSpread(_objectSpread({}, pluginState), {}, {
-      targetCellPosition: targetCellPosition
+      targetCellPosition: targetCellPosition,
+      activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
+        type: 'none'
+      } : pluginState.activeTableMenu
     });
   };
 };

package/dist/esm/pm-plugins/reducer.js

@@ -26,6 +26,8 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         isContextualMenuOpen: !pluginState.isContextualMenuOpen
       });
+    case 'SET_ACTIVE_TABLE_MENU':
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
     case 'SHOW_INSERT_ROW_BUTTON':
       if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
         return pluginState;

package/dist/esm/tablePlugin.js

@@ -143,6 +143,7 @@ var tablePlugin = function tablePlugin(_ref) {
         insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
         tableWrapperTarget: tablePluginState.tableWrapperTarget,
         isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
+        activeTableMenu: tablePluginState.activeTableMenu,
         stickyHeader: stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,

package/dist/esm/ui/ContentComponent.js

@@ -90,6 +90,7 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+    api: api,
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,
     tableNode: tableNode,
@@ -125,7 +126,6 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     editorView: editorView,
     mountPoint: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,
-    targetCellPosition: targetCellPosition,
     isOpen: Boolean(isContextualMenuOpen) && !isResizing,
     pluginConfig: pluginConfig,
     editorAnalyticsAPI: editorAnalyticsAPI,

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

@@ -8,6 +8,7 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { focusToContextMenuTrigger } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -17,7 +18,7 @@ import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { toggleContextualMenu } from '../../pm-plugins/commands';
+import { toggleActiveTableMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 
@@ -33,7 +34,8 @@ var anchorStyles = css({
   zIndex: CONTEXTUAL_MENU_BUTTON_Z_INDEX
 });
 var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
-  var editorView = props.editorView,
+  var api = props.api,
+    editorView = props.editorView,
     isContextualMenuOpen = props.isContextualMenuOpen,
     mountPoint = props.mountPoint,
     scrollableElement = props.scrollableElement,
@@ -42,12 +44,22 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     targetCellPosition = props.targetCellPosition,
     isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
-
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+      };
+    }),
+    activeTableMenu = _useSharedPluginState.activeTableMenu;
+  var isCellMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'cell' : isContextualMenuOpen;
   var handleClick = function handleClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      toggleContextualMenu()(state, dispatch);
+      toggleActiveTableMenu({
+        type: 'cell',
+        openedBy: 'mouse'
+      })(state, dispatch);
       return;
     }
 
@@ -63,13 +75,20 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   var domAtPos = editorView.domAtPos.bind(editorView);
   var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
   useEffect(function () {
-    if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
+    if (isCellMenuOpenByKeyboard && !isCellMenuOpen) {
       var state = editorView.state,
         dispatch = editorView.dispatch;
       // open the menu when the keyboard shortcut is pressed
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        toggleActiveTableMenu({
+          type: 'cell',
+          openedBy: 'keyboard'
+        })(state, dispatch);
+        return;
+      }
       toggleContextualMenu()(state, dispatch);
     }
-  }, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
+  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }
@@ -79,12 +98,12 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     tableFloatingCellButtonStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    isContextualMenuOpen && tableFloatingCellButtonSelectedStyles()]
+    isCellMenuOpen && tableFloatingCellButtonSelectedStyles()]
   }, jsx(ToolbarButton
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
-    selected: isContextualMenuOpen,
+    selected: isCellMenuOpen,
     title: labelCellOptions,
     keymap: focusToContextMenuTrigger,
     onClick: handleClick,
@@ -94,7 +113,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
       size: "small"
     }),
     "aria-label": labelCellOptions,
-    "aria-expanded": isContextualMenuOpen
+    "aria-expanded": isCellMenuOpen
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   var parentStickyNative = targetCellRef.parentElement && (fg('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY));
@@ -149,7 +168,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
       targetCellPosition: targetCellPosition,
       targetCellRef: targetCellRef,
       mountTo: tableWrapper,
-      isContextualMenuOpen: isContextualMenuOpen
+      isContextualMenuOpen: isCellMenuOpen
     }, button);
   }
   return jsx(Popup, {