@atlaskit/editor-plugin-table 22.4.15 → 22.4.16

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.16
+
+### Patch Changes
+
+- [`6291bc0777dc2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6291bc0777dc2) -
+  Converge updated table menu state behind the table menu experiment
+
+  Make table cell menu items interactive
+
 ## 22.4.15
 
 ### Patch Changes

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleActiveTableMenu = exports.closeActiveTableMenu = void 0;
+var _pluginFactory = require("../plugin-factory");
+var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu() {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState = (0, _pluginFactory.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;
+};
+var toggleActiveTableMenu = exports.toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState2 = (0, _pluginFactory.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/cjs/pm-plugins/commands/commands-with-analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapTableInExpandWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
+exports.wrapTableInExpandWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.toggleActiveTableMenuWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -18,6 +18,7 @@ var _deleteRows = require("../transforms/delete-rows");
 var _merge = require("../transforms/merge");
 var _analytics2 = require("../utils/analytics");
 var _nodes = require("../utils/nodes");
+var _activeTableMenu = require("./active-table-menu");
 var _clear = require("./clear");
 var _collapse = require("./collapse");
 var _columnResize = require("./column-resize");
@@ -30,7 +31,38 @@ var _splitCell = require("./split-cell");
 var _toggle = require("./toggle");
 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; }
-// #region Analytics wrappers
+var toggleActiveTableMenuWithAnalytics = exports.toggleActiveTableMenuWithAnalytics = function toggleActiveTableMenuWithAnalytics(editorAnalyticsAPI) {
+  return function (direction, index) {
+    var trigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mouse';
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
+      var _getPluginState = (0, _pluginFactory.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: _analytics.TABLE_ACTION.DRAG_MENU_OPENED,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod: trigger === 'keyboard' ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE,
+          direction: direction
+        }
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        (0, _activeTableMenu.toggleActiveTableMenu)({
+          type: direction,
+          index: index,
+          openedBy: trigger
+        })(state, dispatch);
+      }
+      return true;
+    });
+  };
+};
 var emptyMultipleCellsWithAnalytics = exports.emptyMultipleCellsWithAnalytics = function emptyMultipleCellsWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, targetCellPosition) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref) {
@@ -195,8 +227,8 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
         table = _getSelectedTableInfo2.table,
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
-      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-        colIndex = _getPluginState.hoveredCell.colIndex;
+      var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+        colIndex = _getPluginState2.hoveredCell.colIndex;
       return {
         action: _analytics.TABLE_ACTION.COLUMN_RESIZED,
         actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -316,8 +348,8 @@ var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteSelected
     }
     var selectionType = (0, _misc.getTableSelectionType)(selection);
     if (selectionType === 'row') {
-      var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-        pluginConfig = _getPluginState2.pluginConfig;
+      var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+        pluginConfig = _getPluginState3.pluginConfig;
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
@@ -361,8 +393,8 @@ var toggleHeaderRowWithAnalytics = exports.toggleHeaderRowWithAnalytics = functi
     var _getSelectedTableInfo7 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo7.totalRowCount,
       totalColumnCount = _getSelectedTableInfo7.totalColumnCount;
-    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderRowEnabled = _getPluginState3.isHeaderRowEnabled;
+    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderRowEnabled = _getPluginState4.isHeaderRowEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_ROW,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -381,8 +413,8 @@ var toggleHeaderColumnWithAnalytics = exports.toggleHeaderColumnWithAnalytics =
     var _getSelectedTableInfo8 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo8.totalRowCount,
       totalColumnCount = _getSelectedTableInfo8.totalColumnCount;
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderColumnEnabled = _getPluginState4.isHeaderColumnEnabled;
+    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderColumnEnabled = _getPluginState5.isHeaderColumnEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_COLUMN,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,

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

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "clearMultipleCells", {
     return _clear.clearMultipleCells;
   }
 });
+Object.defineProperty(exports, "closeActiveTableMenu", {
+  enumerable: true,
+  get: function get() {
+    return _activeTableMenu.closeActiveTableMenu;
+  }
+});
 Object.defineProperty(exports, "convertFirstRowToHeader", {
   enumerable: true,
   get: function get() {
@@ -219,6 +225,12 @@ Object.defineProperty(exports, "sortByColumn", {
     return _sort.sortByColumn;
   }
 });
+Object.defineProperty(exports, "toggleActiveTableMenu", {
+  enumerable: true,
+  get: function get() {
+    return _activeTableMenu.toggleActiveTableMenu;
+  }
+});
 Object.defineProperty(exports, "toggleContextualMenu", {
   enumerable: true,
   get: function get() {
@@ -270,6 +282,7 @@ Object.defineProperty(exports, "updateWidthToWidest", {
 var _hover = require("./hover");
 var _insert = require("./insert");
 var _toggle = require("./toggle");
+var _activeTableMenu = require("./active-table-menu");
 var _clear = require("./clear");
 var _misc = require("./misc");
 var _sort = require("./sort");

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

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

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

@@ -14,6 +14,7 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _activeTableMenu = require("../commands/active-table-menu");
 var _pluginFactory = require("../plugin-factory");
 var _pluginKey = require("../plugin-key");
 var _colgroup = require("../table-resizing/utils/colgroup");
@@ -93,6 +94,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         (_insm$session3 = _insm.insm.session) === null || _insm$session3 === void 0 || _insm$session3.startFeature('tableDragAndDrop');
       }
       (0, _commands.toggleDragMenu)(false)(editorView.state, editorView.dispatch);
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        (0, _activeTableMenu.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/cjs/pm-plugins/handlers.js

@@ -10,6 +10,7 @@ var _customSteps = require("@atlaskit/custom-steps");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _defaultTableSelection = require("./default-table-selection");
 var _pluginKey = require("./table-resizing/plugin-key");
 var _collapse = require("./utils/collapse");
@@ -47,8 +48,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' && (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? {
+        type: 'none'
+      } : pluginState.activeTableMenu
     });
   };
 };

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

@@ -33,6 +33,8 @@ var _default = exports.default = function _default(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/cjs/tablePlugin.js

@@ -152,6 +152,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/cjs/ui/ContentComponent.js

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

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

@@ -11,6 +11,7 @@ var _react2 = require("@emotion/react");
 var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -44,7 +45,8 @@ var anchorStyles = (0, _react2.css)({
   zIndex: CONTEXTUAL_MENU_BUTTON_Z_INDEX
 });
 var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (props) {
-  var editorView = props.editorView,
+  var api = props.api,
+    editorView = props.editorView,
     isContextualMenuOpen = props.isContextualMenuOpen,
     mountPoint = props.mountPoint,
     scrollableElement = props.scrollableElement,
@@ -53,12 +55,22 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     targetCellPosition = props.targetCellPosition,
     isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
-
+  var _useSharedPluginState = (0, _hooks.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 = (0, _expValEquals.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 ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      (0, _commands.toggleContextualMenu)()(state, dispatch);
+      (0, _commands.toggleActiveTableMenu)({
+        type: 'cell',
+        openedBy: 'mouse'
+      })(state, dispatch);
       return;
     }
 
@@ -74,13 +86,20 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   var domAtPos = editorView.domAtPos.bind(editorView);
   var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
   (0, _react.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 ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        (0, _commands.toggleActiveTableMenu)({
+          type: 'cell',
+          openedBy: 'keyboard'
+        })(state, dispatch);
+        return;
+      }
       (0, _commands.toggleContextualMenu)()(state, dispatch);
     }
-  }, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
+  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }
@@ -90,12 +109,12 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     (0, _styles.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 && (0, _styles.tableFloatingCellButtonSelectedStyles)()]
+    isCellMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)()]
   }, (0, _react2.jsx)(_uiMenu.ToolbarButton
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
-    selected: isContextualMenuOpen,
+    selected: isCellMenuOpen,
     title: labelCellOptions,
     keymap: _keymaps.focusToContextMenuTrigger,
     onClick: handleClick,
@@ -105,7 +124,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
       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 && ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(_types.TableCssClassName.NATIVE_STICKY));
@@ -160,7 +179,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
       targetCellPosition: targetCellPosition,
       targetCellRef: targetCellRef,
       mountTo: tableWrapper,
-      isContextualMenuOpen: isContextualMenuOpen
+      isContextualMenuOpen: isCellMenuOpen
     }, button);
   }
   return (0, _react2.jsx)(_ui.Popup, {

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

@@ -6,99 +6,84 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CellMenuPopup = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _bindEventListener = require("bind-event-listener");
-var _hooks = require("@atlaskit/editor-common/hooks");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _commands = require("../../pm-plugins/commands");
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
+var _consts = require("../consts");
 var _keys = require("../TableMenu/cell/keys");
+var _consts2 = require("../TableMenu/shared/consts");
 var _TableMenu = require("../TableMenu/shared/TableMenu");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
+var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
+var CELL_MENU_TRIGGER_SELECTOR = ".".concat(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON);
 var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
   var api = _ref.api,
+    boundariesElement = _ref.boundariesElement,
     editorView = _ref.editorView,
-    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
-    isOpen = _ref.isOpen,
-    targetCellRef = _ref.targetCellRef;
-  var tableMenuRef = (0, _react.useRef)(null);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['userIntent'], function (states) {
-      var _states$userIntentSta;
-      return {
-        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
-      };
-    }),
-    currentUserIntent = _useSharedPluginState.currentUserIntent;
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    targetCellRef = _ref.targetCellRef,
+    zIndex = _ref.zIndex;
+  var popupContentRef = (0, _react.useRef)(null);
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  var handlePopupRef = (0, _react.useCallback)(function (el) {
+    popupContentRef.current = el;
+    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
+  }, [setOutsideClickTargetRef]);
   var closeCellMenu = (0, _react.useCallback)(function () {
-    var state = editorView.state,
-      dispatch = editorView.dispatch,
-      dom = editorView.dom;
-    (0, _commands.toggleContextualMenu)()(state, dispatch);
+    var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+      isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
+    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
     if (isCellMenuOpenByKeyboard) {
-      (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
-      dom.focus();
+      (0, _commands.setFocusToCellMenu)(false)(editorView.state, editorView.dispatch);
     }
-  }, [editorView, isCellMenuOpenByKeyboard]);
-  (0, _react.useEffect)(function () {
-    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
-      return;
+  }, [editorView]);
+  var isEventInsideCellMenu = (0, _react.useCallback)(function (event) {
+    var _popupContentRef$curr;
+    var target = event.target;
+    if (!(target instanceof Node)) {
+      return false;
     }
-    closeCellMenu();
-  }, [closeCellMenu, currentUserIntent, isOpen]);
-  (0, _react.useEffect)(function () {
-    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));
+  }, []);
+  var handleCellMenuClickOutside = (0, _react.useCallback)(function (event) {
+    if (isEventInsideCellMenu(event)) {
       return;
     }
-    var ownerDocument = targetCellRef.ownerDocument;
-    var handlePointerDown = function handlePointerDown(event) {
-      var _tableMenuRef$current;
-      var target = event.target;
-      if (!(target instanceof Node)) {
-        return;
-      }
-      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
-        return;
-      }
-      var cellMenuButton = ownerDocument.querySelector(".".concat(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON));
-      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
-        return;
-      }
-      closeCellMenu();
-    };
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Escape') {
-        closeCellMenu();
-      }
-    };
-    var unbindPointerDown = (0, _bindEventListener.bind)(ownerDocument, {
-      type: 'pointerdown',
-      listener: handlePointerDown,
-      options: {
-        capture: true
-      }
-    });
-    var unbindKeyDown = (0, _bindEventListener.bind)(ownerDocument, {
-      type: 'keydown',
-      listener: handleKeyDown,
-      options: {
-        capture: true
-      }
-    });
-    return function () {
-      unbindPointerDown();
-      unbindKeyDown();
-    };
-  }, [closeCellMenu, isOpen, targetCellRef]);
-  return /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
+    closeCellMenu();
+  }, [closeCellMenu, isEventInsideCellMenu]);
+  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+    alignX: "right",
+    alignY: "top",
+    target: targetCellRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitHeight: _consts.tablePopupMenuFitHeight,
+    fitWidth: _consts2.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.default.createElement("div", {
+    ref: handlePopupRef
+  }, /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
     api: api,
     userIntent: "tableContextualMenuPopupOpen"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: tableMenuRef
   }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
     api: api,
     editorView: editorView,
     surface: _keys.CELL_MENU
-  })));
+  }))));
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -13,7 +14,6 @@ var _utils2 = require("@atlaskit/editor-tables/utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
-var _consts2 = require("../TableMenu/shared/consts");
 var _CellMenuPopup = require("./CellMenuPopup");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 var _styles = require("./styles");
@@ -40,6 +40,14 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     isCommentEditor = _ref.isCommentEditor,
     api = _ref.api,
     isDragMenuOpen = _ref.isDragMenuOpen;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'cell' : isOpen;
   if (!editorView) {
     return null;
   }
@@ -47,7 +55,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition;
-  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+  if (!isCellMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   var selection = editorView.state.selection;
@@ -64,6 +72,20 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    return (0, _react.jsx)(_CellMenuPopup.CellMenuPopup, {
+      api: api,
+      boundariesElement: boundariesElement,
+      editorView: editorView,
+      mountPoint: mountPoint,
+      scrollableElement: scrollableElement
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      ,
+      targetCellRef: targetCellRef,
+      zIndex: parentSticky ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex
+    });
+  }
   return (0, _react.jsx)(_ui.Popup, {
     alignX: "right",
     alignY: "top"
@@ -75,7 +97,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: _consts.tablePopupMenuFitHeight,
-    fitWidth: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? _consts2.TABLE_MENU_WIDTH : _consts.contextualMenuDropdownWidthDnD
+    fitWidth: _consts.contextualMenuDropdownWidthDnD
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
@@ -85,15 +107,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     ,
     offset: [-7, 0],
     stick: true
-  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? (0, _react.jsx)(_CellMenuPopup.CellMenuPopup, {
-    api: api,
-    editorView: editorView,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
-    isOpen: isOpen,
-    targetCellRef: targetCellRef
-  }) :
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  (0, _react.jsx)("div", {
+  }, (0, _react.jsx)("div", {
     css: (0, _styles.tablePopupStyles)()
   }, (0, _react.jsx)(_ContextualMenu.default, {
     editorView: editorView