@atlaskit/editor-plugin-table 22.4.15 → 22.4.17

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

@@ -12,7 +12,6 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
@@ -24,9 +23,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
 };
-var EMPTY_CONTEXT = {};
 var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
@@ -46,11 +44,14 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
     selection = _useSharedPluginState.selection;
   var tableMenuContext = (0, _react.useMemo)(function () {
     if (!selection || !tableNode) {
-      return EMPTY_CONTEXT;
+      return {
+        editorView: editorView
+      };
     }
     var tableMap = _tableMap.TableMap.get(tableNode);
     var selectionRect = (0, _utils.getSelectionRect)(selection);
     var cellOps = {
+      editorView: editorView,
       canMergeCells: (0, _merge.canMergeCellSelection)(selection),
       canSplitCell: (0, _splitCell.canSplitCellSelection)(selection),
       hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -66,13 +67,11 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
       isLastColumn: selectionRect.right === tableMap.width,
       selectedColumnCount: selectionRect.right - selectionRect.left
     });
-  }, [selection, tableNode]);
+  }, [editorView, selection, tableNode]);
   if (components.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
-  }, /*#__PURE__*/_react.default.createElement(_TableMenuContext.TableMenuProvider, {
+  return /*#__PURE__*/_react.default.createElement(_TableMenuContext.TableMenuProvider, {
     value: tableMenuContext
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: tableMenuContainerStyles.container,
@@ -80,6 +79,6 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
   }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     surface: surface,
     components: components
-  }))));
+  })));
 });
 TableMenu.displayName = 'TableMenu';

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

@@ -31,7 +31,9 @@ var getSharedItems = exports.getSharedItems = function getSharedItems(_ref) {
       rank: _keys.CELL_ACTION_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, null);
+      return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, {
+        api: api
+      });
     }
   }, {
     type: _keys4.CLEAR_CELLS_ITEM.type,

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

@@ -11,5 +11,5 @@ var _getColumnMenuComponents = require("../column/getColumnMenuComponents");
 var _getRowMenuComponents = require("../row/getRowMenuComponents");
 var _getSharedItems = require("./getSharedItems");
 var getTableMenuComponents = exports.getTableMenuComponents = function getTableMenuComponents(params) {
-  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)(params)));
+  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)(params)));
 };

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

@@ -10,11 +10,16 @@ require("./BackgroundColorItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _commands = require("../../../../pm-plugins/commands");
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _TableMenuContext = require("../TableMenuContext");
 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 colorPaletteColumns = 7;
 var colorPaletteStyles = {
@@ -22,16 +27,37 @@ var colorPaletteStyles = {
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem() {
+var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem(_ref) {
+  var _useTableMenuContext, _api$analytics2;
+  var api = _ref.api;
+  var _ref2 = (_useTableMenuContext = (0, _TableMenuContext.useTableMenuContext)()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var onClick = (0, _react.useCallback)(function () {}, []);
+  var selectedColor = (0, _react.useMemo)(function () {
+    var _node$attrs;
+    if (!editorView) {
+      return '#ffffff';
+    }
+    var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    var node = targetCellPosition ? editorView.state.doc.nodeAt(targetCellPosition) : null;
+    return (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+  }, [editorView]);
+  var onClick = (0, _react.useCallback)(function (color) {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    (0, _commandsWithAnalytics.setColorWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
+    (0, _commands.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]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = (0, _react.useMemo)(function () {
     return {
-      backgroundColor: '#ffffff'
+      backgroundColor: selectedColor
     };
-  }, []);
+  }, [selectedColor]);
   var paletteOptions = (0, _react.useMemo)(function () {
     return {
       palette: _uiColor.cellBackgroundColorPalette,

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

@@ -10,17 +10,17 @@ var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
-var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
 var _TableMenuContext = require("../TableMenuContext");
 var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
   var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var selectedCellCount = Math.max((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1, (_tableMenuContext$sel2 = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel2 !== void 0 ? _tableMenuContext$sel2 : 1);
@@ -32,6 +32,7 @@ var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
     var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
       targetCellPosition = _getPluginState.targetCellPosition;
     (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
+    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

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

@@ -0,0 +1,39 @@
+import { createCommand, getPluginState } from '../plugin-factory';
+export const closeActiveTableMenu = () => createCommand(state => {
+  const {
+    activeTableMenu
+  } = getPluginState(state);
+  if (!activeTableMenu || activeTableMenu.type === 'none') {
+    return false;
+  }
+  return {
+    type: 'SET_ACTIVE_TABLE_MENU',
+    data: {
+      activeTableMenu: {
+        type: 'none'
+      }
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));
+const 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 const toggleActiveTableMenu = activeTableMenu => createCommand(state => {
+  const {
+    activeTableMenu: currentActiveTableMenu
+  } = getPluginState(state);
+  return {
+    type: 'SET_ACTIVE_TABLE_MENU',
+    data: {
+      activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
+        type: 'none'
+      } : activeTableMenu
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));

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

@@ -10,6 +10,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';
@@ -20,8 +21,36 @@ import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleC
 import { sortByColumn } from './sort';
 import { splitCell } from './split-cell';
 import { toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn } from './toggle';
-
-// #region Analytics wrappers
+export const toggleActiveTableMenuWithAnalytics = editorAnalyticsAPI => (direction, index, trigger = 'mouse') => {
+  return withEditorAnalyticsAPI(state => {
+    const {
+      activeTableMenu: previousActiveTableMenu
+    } = getPluginState(state);
+    const 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
+      }
+    };
+  })(editorAnalyticsAPI)((state, dispatch) => {
+    if (dispatch) {
+      toggleActiveTableMenu({
+        type: direction,
+        index,
+        openedBy: trigger
+      })(state, dispatch);
+    }
+    return true;
+  });
+};
 export const emptyMultipleCellsWithAnalytics = editorAnalyticsAPI => (inputMethod, targetCellPosition) => withEditorAnalyticsAPI(({
   selection
 }) => {

package/dist/es2019/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/es2019/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -141,6 +141,8 @@ export const cloneSourceWithAnalytics = editorAnalyticsAPI => (inputMethod, sour
     return true;
   });
 };
+
+// remove when 'platform_editor_table_menu_updates' is cleaned up
 export const toggleDragMenuWithAnalytics = editorAnalyticsAPI => (isDragMenuOpen, direction, index, trigger = 'mouse') => {
   return withEditorAnalyticsAPI(state => {
     const {

package/dist/es2019/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';
@@ -94,6 +95,9 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
         (_insm$session3 = insm.session) === null || _insm$session3 === void 0 ? 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 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
     },
     onDrag(event) {

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

@@ -6,6 +6,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';
@@ -40,9 +41,15 @@ const updateTargetCellPosition = ({
   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 {
     ...pluginState,
-    targetCellPosition
+    targetCellPosition,
+    activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
+      type: 'none'
+    } : pluginState.activeTableMenu
   };
 };
 const updateTableNodePluginState = ({

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

@@ -34,6 +34,11 @@ export default ((pluginState, action) => {
         ...pluginState,
         isContextualMenuOpen: !pluginState.isContextualMenuOpen
       };
+    case 'SET_ACTIVE_TABLE_MENU':
+      return {
+        ...pluginState,
+        ...action.data
+      };
     case 'SHOW_INSERT_ROW_BUTTON':
       if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
         return pluginState;

package/dist/es2019/tablePlugin.js

@@ -140,6 +140,7 @@ const tablePlugin = ({
         insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
         tableWrapperTarget: tablePluginState.tableWrapperTarget,
         isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
+        activeTableMenu: tablePluginState.activeTableMenu,
         stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,

package/dist/es2019/ui/ContentComponent.js

@@ -93,6 +93,7 @@ const ContentComponentInternal = ({
     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,
@@ -128,7 +129,6 @@ const ContentComponentInternal = ({
     editorView: editorView,
     mountPoint: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,
-    targetCellPosition: targetCellPosition,
     isOpen: Boolean(isContextualMenuOpen) && !isResizing,
     pluginConfig: pluginConfig,
     editorAnalyticsAPI: editorAnalyticsAPI,

package/dist/es2019/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';
 
@@ -34,6 +35,7 @@ const anchorStyles = css({
 });
 const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   const {
+    api,
     editorView,
     isContextualMenuOpen,
     mountPoint,
@@ -46,14 +48,25 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       formatMessage
     }
   } = props; //  : Props & WrappedComponentProps
-
+  const {
+    activeTableMenu
+  } = useSharedPluginStateWithSelector(api, ['table'], states => {
+    var _states$tableState;
+    return {
+      activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+    };
+  });
+  const isCellMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'cell' : isContextualMenuOpen;
   const handleClick = () => {
     const {
       state,
       dispatch
     } = editorView;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      toggleContextualMenu()(state, dispatch);
+      toggleActiveTableMenu({
+        type: 'cell',
+        openedBy: 'mouse'
+      })(state, dispatch);
       return;
     }
 
@@ -69,15 +82,22 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   const domAtPos = editorView.domAtPos.bind(editorView);
   const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
   useEffect(() => {
-    if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
+    if (isCellMenuOpenByKeyboard && !isCellMenuOpen) {
       const {
         state,
         dispatch
       } = editorView;
       // 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;
   }
@@ -87,12 +107,12 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(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,
@@ -102,7 +122,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       size: "small"
     }),
     "aria-label": labelCellOptions,
-    "aria-expanded": isContextualMenuOpen
+    "aria-expanded": isCellMenuOpen
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   const 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));
@@ -157,7 +177,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       targetCellPosition: targetCellPosition,
       targetCellRef: targetCellRef,
       mountTo: tableWrapper,
-      isContextualMenuOpen: isContextualMenuOpen
+      isContextualMenuOpen: isCellMenuOpen
     }, button);
   }
   return jsx(Popup, {

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

@@ -1,100 +1,83 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { bind } from 'bind-event-listener';
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import React, { useCallback, useContext, useRef } from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
-import { setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
+import { closeActiveTableMenu, setFocusToCellMenu } from '../../pm-plugins/commands';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
+import { tablePopupMenuFitHeight } from '../consts';
 import { CELL_MENU } from '../TableMenu/cell/keys';
+import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
 import { TableMenu } from '../TableMenu/shared/TableMenu';
+const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
+const NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
+const CELL_MENU_TRIGGER_SELECTOR = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
 export const CellMenuPopup = ({
   api,
+  boundariesElement,
   editorView,
-  isCellMenuOpenByKeyboard,
-  isOpen,
-  targetCellRef
+  mountPoint,
+  scrollableElement,
+  targetCellRef,
+  zIndex
 }) => {
-  const tableMenuRef = useRef(null);
-  const {
-    currentUserIntent
-  } = useSharedPluginStateWithSelector(api, ['userIntent'], states => {
-    var _states$userIntentSta;
-    return {
-      currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
-    };
-  });
+  const popupContentRef = useRef(null);
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  const handlePopupRef = useCallback(el => {
+    popupContentRef.current = el;
+    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
+  }, [setOutsideClickTargetRef]);
   const closeCellMenu = useCallback(() => {
     const {
-      state,
-      dispatch,
-      dom
-    } = editorView;
-    toggleContextualMenu()(state, dispatch);
+      isCellMenuOpenByKeyboard
+    } = getPluginState(editorView.state);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
     if (isCellMenuOpenByKeyboard) {
-      setFocusToCellMenu(false)(state, dispatch);
-      dom.focus();
+      setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
     }
-  }, [editorView, isCellMenuOpenByKeyboard]);
-  useEffect(() => {
-    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
-      return;
+  }, [editorView]);
+  const isEventInsideCellMenu = useCallback(event => {
+    var _popupContentRef$curr;
+    const target = event.target;
+    if (!(target instanceof Node)) {
+      return false;
     }
-    closeCellMenu();
-  }, [closeCellMenu, currentUserIntent, isOpen]);
-  useEffect(() => {
-    if (!isOpen) {
-      return;
+    if ((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(target)) {
+      return true;
     }
-    if (!(targetCellRef instanceof HTMLElement)) {
+    return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
+  }, []);
+  const handleCellMenuClickOutside = useCallback(event => {
+    if (isEventInsideCellMenu(event)) {
       return;
     }
-    const ownerDocument = targetCellRef.ownerDocument;
-    const handlePointerDown = event => {
-      var _tableMenuRef$current;
-      const target = event.target;
-      if (!(target instanceof Node)) {
-        return;
-      }
-      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
-        return;
-      }
-      const cellMenuButton = ownerDocument.querySelector(`.${ClassName.CONTEXTUAL_MENU_BUTTON}`);
-      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
-        return;
-      }
-      closeCellMenu();
-    };
-    const handleKeyDown = event => {
-      if (event.key === 'Escape') {
-        closeCellMenu();
-      }
-    };
-    const unbindPointerDown = bind(ownerDocument, {
-      type: 'pointerdown',
-      listener: handlePointerDown,
-      options: {
-        capture: true
-      }
-    });
-    const unbindKeyDown = bind(ownerDocument, {
-      type: 'keydown',
-      listener: handleKeyDown,
-      options: {
-        capture: true
-      }
-    });
-    return () => {
-      unbindPointerDown();
-      unbindKeyDown();
-    };
-  }, [closeCellMenu, isOpen, targetCellRef]);
-  return /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
+    closeCellMenu();
+  }, [closeCellMenu, isEventInsideCellMenu]);
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    alignX: "right",
+    alignY: "top",
+    target: targetCellRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitHeight: tablePopupMenuFitHeight,
+    fitWidth: TABLE_MENU_WIDTH,
+    zIndex: zIndex,
+    forcePlacement: true
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    offset: [-7, 0],
+    stick: true,
+    handleClickOutside: handleCellMenuClickOutside,
+    handleEscapeKeydown: closeCellMenu
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: handlePopupRef
+  }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
     api: api,
     userIntent: "tableContextualMenuPopupOpen"
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: tableMenuRef
   }, /*#__PURE__*/React.createElement(TableMenu, {
     api: api,
     editorView: editorView,
     surface: CELL_MENU
-  })));
+  }))));
 };