@atlaskit/editor-plugin-table 23.3.4 → 23.3.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 23.3.5
+
+### Patch Changes
+
+- [`473e6619e9af8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/473e6619e9af8) -
+  Fix shift selection + state update in table menu
+
 ## 23.3.4
 
 ### Patch Changes

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

@@ -5,17 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleActiveTableMenu = exports.closeActiveTableMenu = void 0;
 var _pluginKey = require("../plugin-key");
-var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu() {
+var applyMenuUserIntent = function applyMenuUserIntent(tr, api, nextActiveTableMenu) {
+  var _api$userIntent;
+  var isRowOrColumnMenuOpen = nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column';
+  api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent(isRowOrColumnMenuOpen ? 'tableDragMenuPopupOpen' : 'default')({
+    tr: tr
+  });
+};
+var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu(api) {
   return function (_ref) {
     var tr = _ref.tr;
+    var nextActiveTableMenu = {
+      type: 'none'
+    };
     tr.setMeta(_pluginKey.pluginKey, {
       type: 'SET_ACTIVE_TABLE_MENU',
       data: {
-        activeTableMenu: {
-          type: 'none'
-        }
+        activeTableMenu: nextActiveTableMenu
       }
     });
+    applyMenuUserIntent(tr, api, nextActiveTableMenu);
     if (!tr.docChanged) {
       tr.setMeta('addToHistory', false);
     }
@@ -31,17 +40,19 @@ var isSameActiveTableMenu = function isSameActiveTableMenu(current, next) {
   }
   return true;
 };
-var toggleActiveTableMenu = exports.toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu, currentActiveTableMenu) {
+var toggleActiveTableMenu = exports.toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu, currentActiveTableMenu, api) {
   return function (_ref2) {
     var tr = _ref2.tr;
+    var nextActiveTableMenu = isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
+      type: 'none'
+    } : activeTableMenu;
     tr.setMeta(_pluginKey.pluginKey, {
       type: 'SET_ACTIVE_TABLE_MENU',
       data: {
-        activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
-          type: 'none'
-        } : activeTableMenu
+        activeTableMenu: nextActiveTableMenu
       }
     });
+    applyMenuUserIntent(tr, api, nextActiveTableMenu);
     tr.setMeta('addToHistory', false);
     return tr;
   };

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.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;
+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;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -18,7 +18,6 @@ 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");
@@ -31,45 +30,6 @@ 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; }
-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) {
-        var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-          currentActiveTableMenu = _getPluginState2.activeTableMenu;
-        var newTr = (0, _activeTableMenu.toggleActiveTableMenu)({
-          type: direction,
-          index: index,
-          openedBy: trigger
-        }, currentActiveTableMenu)({
-          tr: state.tr
-        });
-        if (newTr) {
-          dispatch(newTr);
-        }
-      }
-      return true;
-    });
-  };
-};
 var emptyMultipleCellsWithAnalytics = exports.emptyMultipleCellsWithAnalytics = function emptyMultipleCellsWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, targetCellPosition) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref) {
@@ -234,8 +194,8 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
         table = _getSelectedTableInfo2.table,
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
-      var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-        colIndex = _getPluginState3.hoveredCell.colIndex;
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        colIndex = _getPluginState.hoveredCell.colIndex;
       return {
         action: _analytics.TABLE_ACTION.COLUMN_RESIZED,
         actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -355,8 +315,8 @@ var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteSelected
     }
     var selectionType = (0, _misc.getTableSelectionType)(selection);
     if (selectionType === 'row') {
-      var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
-        pluginConfig = _getPluginState4.pluginConfig;
+      var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+        pluginConfig = _getPluginState2.pluginConfig;
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
@@ -400,8 +360,8 @@ var toggleHeaderRowWithAnalytics = exports.toggleHeaderRowWithAnalytics = functi
     var _getSelectedTableInfo7 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo7.totalRowCount,
       totalColumnCount = _getSelectedTableInfo7.totalColumnCount;
-    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderRowEnabled = _getPluginState5.isHeaderRowEnabled;
+    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderRowEnabled = _getPluginState3.isHeaderRowEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_ROW,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -420,8 +380,8 @@ var toggleHeaderColumnWithAnalytics = exports.toggleHeaderColumnWithAnalytics =
     var _getSelectedTableInfo8 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo8.totalRowCount,
       totalColumnCount = _getSelectedTableInfo8.totalColumnCount;
-    var _getPluginState6 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderColumnEnabled = _getPluginState6.isHeaderColumnEnabled;
+    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderColumnEnabled = _getPluginState4.isHeaderColumnEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_COLUMN,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,

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

@@ -96,7 +96,7 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
           var _api$userIntent;
           var tr = _ref7.tr;
-          (0, _activeTableMenu.closeActiveTableMenu)()({
+          (0, _activeTableMenu.closeActiveTableMenu)(api)({
             tr: tr
           });
           api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('dragging')({

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

@@ -53,7 +53,7 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
       }
       var hasTargetCellChanged = pluginState.targetCellPosition !== _targetCellPosition;
       var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
-      var shouldCloseMenu = hasActiveTableMenu && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof _cellSelection.CellSelection));
+      var shouldCloseMenu = hasActiveTableMenu && tr.selectionSet && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof _cellSelection.CellSelection));
       if (!hasTargetCellChanged && !shouldCloseMenu) {
         return pluginState;
       }

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

@@ -50,7 +50,10 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     wasFullWidthModeEnabled: previousFullWidthModeEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabled,
+    activeTableMenu: {
+      type: 'none'
+    }
   }, _defaultTableSelection.defaultHoveredCell), _defaultTableSelection.defaultTableSelection), {}, {
     getIntl: getIntl
   }));

package/dist/cjs/ui/ContentComponent.js

@@ -12,11 +12,13 @@ var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _FloatingContextualButton = _interopRequireDefault(require("./FloatingContextualButton"));
 var _FloatingContextualMenu = _interopRequireDefault(require("./FloatingContextualMenu"));
 var _FloatingDragMenu = _interopRequireDefault(require("./FloatingDragMenu"));
 var _FloatingInsertButton = _interopRequireDefault(require("./FloatingInsertButton"));
+var _FloatingTableMenu = _interopRequireDefault(require("./FloatingTableMenu"));
 var _FloatingToolbarLabel = require("./FloatingToolbarLabel/FloatingToolbarLabel");
 var _globalStyles = require("./global-styles");
 var _SizeSelector = require("./SizeSelector");
@@ -143,7 +145,15 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
     api: api,
     isDragMenuOpen: isDragMenuOpen
-  }), /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
+  }), (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_FloatingTableMenu.default, {
+    api: api,
+    boundariesElement: popupsBoundariesElement,
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    stickyHeaders: stickyHeader,
+    tableWrapper: tableWrapperTarget,
+    targetCellPosition: targetCellPosition
+  }) : /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
     editorView: editorView,
     mountPoint: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,

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

@@ -78,7 +78,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
         (0, _commands.toggleActiveTableMenu)({
           type: 'cell',
           openedBy: 'mouse'
-        }, currentActiveTableMenu)({
+        }, currentActiveTableMenu, api)({
           tr: tr
         });
         return tr;
@@ -113,7 +113,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
           (0, _commands.toggleActiveTableMenu)({
             type: 'cell',
             openedBy: 'keyboard'
-          }, currentActiveTableMenu)({
+          }, currentActiveTableMenu, api)({
             tr: tr
           });
           return tr;

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

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

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

@@ -6,21 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
-var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _keys = require("../TableMenu/column/keys");
-var _keys2 = require("../TableMenu/row/keys");
-var _consts2 = require("../TableMenu/shared/consts");
-var _TableMenu = require("../TableMenu/shared/TableMenu");
 var _DragMenu = _interopRequireDefault(require("./DragMenu"));
-var TABLE_MENU_OFFSET = _consts.dragTableInsertColumnButtonSize + 4;
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var _getEditorFeatureFlag;
   var mountPoint = _ref.mountPoint,
@@ -42,23 +34,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     api = _ref.api,
     isCommentEditor = _ref.isCommentEditor,
     tableWrapper = _ref.tableWrapper;
-  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 isActiveTableMenuDragMenu = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
-  var hasActiveTableMenuState = activeTableMenu !== undefined;
-  var isDragMenuOpen = (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu : isOpen;
-  var dragMenuDirection = (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.type : undefined : direction;
-  var dragMenuIndex = (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.index : undefined : index;
-  if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7');
-  var targetHandleRef = dragMenuDirection === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
@@ -67,8 +47,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    alignX: dragMenuDirection === 'row' ? 'right' : undefined,
-    alignY: dragMenuDirection === 'row' ? 'start' : undefined
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     ,
@@ -76,7 +56,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? _consts2.TABLE_MENU_WIDTH : _consts.dragMenuDropdownWidth,
+    fitWidth: _consts.dragMenuDropdownWidth,
     fitHeight: _consts.tablePopupMenuFitHeight
     // 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.
@@ -84,22 +64,14 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: inStickyMode ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    preventOverflow: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
-    offset: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
+    offset: direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
-    api: api,
-    userIntent: "tableDragMenuPopupOpen"
-  }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
-    api: api,
-    editorView: editorView,
-    surface: dragMenuDirection === 'row' ? _keys2.ROW_MENU : _keys.COLUMN_MENU
-  })) : /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
+  }, /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
     editorView: editorView,
-    isOpen: isDragMenuOpen,
+    isOpen: isOpen,
     tableNode: tableNode,
-    direction: dragMenuDirection,
-    index: dragMenuIndex,
+    direction: direction,
+    index: index,
     target: targetHandleRef || undefined,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,

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

@@ -0,0 +1,175 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _toolbarKeyboardNavigationProvider = require("@atlaskit/editor-toolbar/toolbar-keyboard-navigation-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commands = require("../../pm-plugins/commands");
+var _types = require("../../types");
+var _consts = require("../consts");
+var _keys = require("../TableMenu/column/keys");
+var _keys2 = require("../TableMenu/row/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);
+
+// Defer drag-handle clicks to the drag handle's own toggle/select handlers — those own
+// the open/switch/close semantics for moving between rows/columns.
+var DRAG_HANDLE_CONTROLS_SELECTOR = ".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS, ", .").concat(_types.TableCssClassName.DRAG_COLUMN_CONTROLS);
+var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
+
+// Marks the menu subtree that ToolbarKeyboardNavigationProvider scopes its
+// keyboard handling to. The provider only reacts to events whose target sits
+// inside this selector.
+var TABLE_MENU_NAV_SELECTOR = '[data-table-drag-menu-nav="true"]';
+var TABLE_MENU_OFFSET = _consts.dragTableInsertColumnButtonSize + 4;
+var POPUP_OFFSET = [TABLE_MENU_OFFSET, 0];
+
+/**
+ * Row and column menu for table.
+ */
+var FloatingTableMenu = function FloatingTableMenu(_ref) {
+  var api = _ref.api,
+    boundariesElement = _ref.boundariesElement,
+    editorView = _ref.editorView,
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    stickyHeaders = _ref.stickyHeaders,
+    tableWrapper = _ref.tableWrapper,
+    targetCellPosition = _ref.targetCellPosition;
+  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 isDragMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+  var dragMenuDirection = isDragMenuOpen ? activeTableMenu.type : undefined;
+  var isOpenedByKeyboard = isDragMenuOpen && activeTableMenu.openedBy === 'keyboard';
+  var popupContentRef = (0, _react.useRef)(null);
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  var navWrapperRef = (0, _react.useRef)(null);
+  var handlePopupRef = (0, _react.useCallback)(function (el) {
+    popupContentRef.current = el;
+    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
+  }, [setOutsideClickTargetRef]);
+  var dismiss = (0, _react.useCallback)(function () {
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
+  }, [api]);
+  var returnFocusToDragHandle = (0, _react.useCallback)(function () {
+    // Match legacy DragMenu's closeMenu('handle') behaviour.
+    var handleId = dragMenuDirection === 'row' ? '#drag-handle-button-row' : '#drag-handle-button-column';
+    var handle = document.querySelector(handleId);
+    handle === null || handle === void 0 || handle.focus();
+  }, [dragMenuDirection]);
+  var focusFirstMenuItem = (0, _react.useCallback)(function () {
+    var root = navWrapperRef.current;
+    if (!root) {
+      return;
+    }
+    var firstItem = root.querySelector('[role="menuitem"]:not([disabled]), [role="menuitemcheckbox"]:not([disabled]), [role="menuitemradio"]:not([disabled]), button:not([disabled])');
+    firstItem === null || firstItem === void 0 || firstItem.focus();
+  }, []);
+
+  // Focus the first menu item when the menu opens via keyboard (Enter/Space on
+  // the drag handle). Mouse-opened menus leave focus where the user clicked.
+  var setNavWrapperRef = (0, _react.useCallback)(function (el) {
+    navWrapperRef.current = el;
+    if (el && isOpenedByKeyboard) {
+      // rAF allows the popup to finish positioning before focusing.
+      requestAnimationFrame(function () {
+        focusFirstMenuItem();
+      });
+    }
+  }, [focusFirstMenuItem, isOpenedByKeyboard]);
+  var handleKeyboardFocus = (0, _react.useCallback)(function (_event) {
+    focusFirstMenuItem();
+  }, [focusFirstMenuItem]);
+  var handleEscape = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    dismiss();
+    returnFocusToDragHandle();
+  }, [dismiss, returnFocusToDragHandle]);
+
+  // Memoize the editor DOM reference so the provider doesn't re-bind listeners
+  // on every render (the provider depends on `dom` in its effect's deps).
+  var editorDom = (0, _react.useMemo)(function () {
+    return editorView.dom instanceof HTMLElement ? editorView.dom : undefined;
+  }, [editorView.dom]);
+
+  // The drag menu is opened by interacting with the drag handle directly, not
+  // by a global page-level shortcut.
+  var isShortcutToFocusToolbar = (0, _react.useCallback)(function () {
+    return false;
+  }, []);
+  var handleClickOutside = (0, _react.useCallback)(function (event) {
+    var _popupContentRef$curr;
+    var target = event.target;
+    // Ignore clicks handled by this popup, drag handles, or nested portalled
+    // dropdowns so those controls can manage their own open/close behavior.
+    if (target instanceof Node && (_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(target) || target instanceof Element && (target.closest(DRAG_HANDLE_CONTROLS_SELECTOR) || target.closest(NESTED_DROPDOWN_SELECTOR))) {
+      return;
+    }
+    dismiss();
+  }, [dismiss]);
+  if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+    return null;
+  }
+  var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7');
+  var targetHandleRef = dragMenuDirection === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+    alignX: dragMenuDirection === 'row' ? 'right' : undefined,
+    alignY: dragMenuDirection === 'row' ? 'start' : undefined
+    // Ignored via go/ees005
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    ,
+    target: targetHandleRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitWidth: _consts2.TABLE_MENU_WIDTH,
+    fitHeight: _consts.tablePopupMenuFitHeight
+    // 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.
+    // In sticky mode, we want to show the menu above the sticky header
+    ,
+    zIndex: inStickyMode ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    preventOverflow: dragMenuDirection === 'row',
+    offset: POPUP_OFFSET,
+    stick: true,
+    handleClickOutside: handleClickOutside
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: handlePopupRef
+  }, /*#__PURE__*/_react.default.createElement(_toolbarKeyboardNavigationProvider.ToolbarKeyboardNavigationProvider, {
+    childComponentSelector: TABLE_MENU_NAV_SELECTOR,
+    dom: editorDom,
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleFocus: handleKeyboardFocus,
+    handleEscape: handleEscape
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-table-drag-menu-nav": "true",
+    ref: setNavWrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
+    api: api,
+    editorView: editorView,
+    surface: dragMenuDirection === 'row' ? _keys2.ROW_MENU : _keys.COLUMN_MENU
+  })))));
+};
+FloatingTableMenu.displayName = 'FloatingTableMenu';
+var _default = exports.default = FloatingTableMenu;

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -13,8 +14,8 @@ var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
-var _commandsWithAnalytics = require("../../../pm-plugins/commands/commands-with-analytics");
-var _commandsWithAnalytics2 = require("../../../pm-plugins/drag-and-drop/commands-with-analytics");
+var _commandsWithAnalytics = require("../../../pm-plugins/drag-and-drop/commands-with-analytics");
+var _pluginFactory = require("../../../pm-plugins/plugin-factory");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _selection = require("../../../pm-plugins/utils/selection");
 var _types = require("../../../types");
@@ -33,7 +34,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _api$analytics3;
+  var _colWidths$map$join;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -130,17 +131,48 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (event !== null && event !== void 0 && event.shiftKey) {
+      // Shift-click extends the selection rather than toggling the menu, but the
+      // open drag menu would otherwise stay anchored to a stale column. Close it here
+      // for the updated menu (legacy menu closes via outside-click on its dropdown).
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
+      }
       return;
     }
     if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      if (colIndex !== undefined) {
-        var _api$analytics;
-        (0, _commandsWithAnalytics.toggleActiveTableMenuWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)('column', colIndex, trigger)(state, dispatch);
+      if (colIndex !== undefined && api) {
+        var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
+          currentActiveTableMenu = _getTablePluginState.activeTableMenu;
+        var isSameActiveMenu = (currentActiveTableMenu === null || currentActiveTableMenu === void 0 ? void 0 : currentActiveTableMenu.type) === 'column' && currentActiveTableMenu.index === colIndex;
+        api.core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          if (!isSameActiveMenu) {
+            var _api$analytics;
+            (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+              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: 'column'
+              }
+            })(tr);
+          }
+          (0, _commands.toggleActiveTableMenu)({
+            type: 'column',
+            index: colIndex,
+            openedBy: trigger
+          }, currentActiveTableMenu, api)({
+            tr: tr
+          });
+          return tr;
+        });
       }
       return;
     }
-    (0, _commandsWithAnalytics2.toggleDragMenuWithAnalytics)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
-  }, [editorView, colIndex, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
+    (0, _commandsWithAnalytics.toggleDragMenuWithAnalytics)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
+  }, [editorView, colIndex, api]);
   var colIndexes = (0, _react.useMemo)(function () {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -247,9 +279,9 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       overflowX: stickyTop ? 'hidden' : 'visible',
       pointerEvents: isDragging ? 'none' : undefined
     }
-  }, columnParams.map(function (_ref2, index) {
-    var startIndex = _ref2.startIndex,
-      endIndex = _ref2.endIndex;
+  }, columnParams.map(function (_ref3, index) {
+    var startIndex = _ref3.startIndex,
+      endIndex = _ref3.endIndex;
     return /*#__PURE__*/_react.default.createElement("div", {
       style: {
         gridColumn: "".concat(startIndex + 1, " / span 1")