@atlaskit/editor-plugin-table 24.2.3 → 24.2.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 24.2.4
+
+### Patch Changes
+
+- [`2a5949df6125f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a5949df6125f) -
+  Under platform_editor_table_menu_updates, keep the selection toolbar suppressed after the
+  row/column drag menu closes while that drag-handle selection persists; any other selection
+  re-enables the toolbar.
+- Updated dependencies
+
 ## 24.2.3
 
 ### Patch Changes

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

@@ -5,14 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleActiveTableMenu = exports.closeActiveTableMenu = void 0;
 var _pluginKey = require("../plugin-key");
+var _selection = require("../utils/selection");
 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')({
+  var _api$userIntent2;
+  if (nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column') {
+    var _api$userIntent;
+    api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('tableDragMenuPopupOpen')({
+      tr: tr
+    });
+    return;
+  }
+  api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent((0, _selection.isFullRowOrColumnSelected)(tr.selection) ? 'dragHandleSelected' : 'default')({
     tr: tr
   });
 };
-var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu(api) {
+var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu(api, options) {
   return function (_ref) {
     var tr = _ref.tr;
     var nextActiveTableMenu = {
@@ -24,7 +31,9 @@ var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTa
         activeTableMenu: nextActiveTableMenu
       }
     });
-    applyMenuUserIntent(tr, api, nextActiveTableMenu);
+    if (!(options !== null && options !== void 0 && options.skipUserIntent)) {
+      applyMenuUserIntent(tr, api, nextActiveTableMenu);
+    }
     if (!tr.docChanged) {
       tr.setMeta('addToHistory', false);
     }

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

@@ -96,7 +96,9 @@ 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)(api)({
+          (0, _activeTableMenu.closeActiveTableMenu)(api, {
+            skipUserIntent: true
+          })({
             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/main.js

@@ -348,7 +348,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       handleDOMEvents: {
         focus: _eventHandlers.handleFocus,
         blur: _eventHandlers.handleBlur,
-        mousedown: (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseDown),
+        mousedown: (0, _eventHandlers.withCellTracking)(function (view, event) {
+          return (0, _eventHandlers.handleMouseDown)(view, event, pluginInjectionApi);
+        }),
         mouseleave: _eventHandlers.handleMouseLeave,
         mousemove: (0, _eventHandlers.whenTableInFocus)((0, _eventHandlers.handleMouseMove)(nodeViewPortalProviderAPI), pluginInjectionApi),
         mouseenter: _eventHandlers.handleMouseEnter,

package/dist/cjs/pm-plugins/utils/dom.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getIndexAttributeSourceElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = exports.areAllRectsZero = void 0;
+exports.isTableDragHandleButton = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getIndexAttributeSourceElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = exports.areAllRectsZero = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../../types");
 var isCell = exports.isCell = function isCell(node) {
@@ -63,6 +63,9 @@ var isDragColumnFloatingInsertDot = exports.isDragColumnFloatingInsertDot = func
 var isDragCornerButton = exports.isDragCornerButton = function isDragCornerButton(node) {
   return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER);
 };
+var isTableDragHandleButton = exports.isTableDragHandleButton = function isTableDragHandleButton(target) {
+  return target instanceof HTMLElement && Boolean(target.closest(".".concat(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER)));
+};
 
 /*
  * This function returns which side of a given element the mouse cursor is,

package/dist/cjs/pm-plugins/utils/selection.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isRowSelectionWithMergedFirstColumn = exports.isColumnSelectionWithMergedFirstRow = exports.getSelectedRowIndexes = exports.getSelectedColumnIndexes = void 0;
+exports.isRowSelectionWithMergedFirstColumn = exports.isFullRowOrColumnSelected = exports.isColumnSelectionWithMergedFirstRow = exports.getSelectedRowIndexes = exports.getSelectedColumnIndexes = void 0;
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var getSelectedColumnIndexes = exports.getSelectedColumnIndexes = function getSelectedColumnIndexes(selectionRect) {
@@ -77,4 +78,16 @@ var isRowSelectionWithMergedFirstColumn = exports.isRowSelectionWithMergedFirstC
     }
   }
   return true;
+};
+
+/**
+ * Returns `true` when the selection covers one or more complete rows or columns (the kind of
+ * selection produced by clicking a row/column drag handle), including the merged-cell variants
+ * where `CellSelection.isRowSelection()` / `isColSelection()` return `false`.
+ */
+var isFullRowOrColumnSelected = exports.isFullRowOrColumnSelected = function isFullRowOrColumnSelected(selection) {
+  if (!(selection instanceof _cellSelection.CellSelection)) {
+    return false;
+  }
+  return selection.isRowSelection() || selection.isColSelection() || isRowSelectionWithMergedFirstColumn(selection) || isColumnSelectionWithMergedFirstRow(selection);
 };

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

@@ -19,6 +19,7 @@ var _editorTables = require("@atlaskit/editor-tables");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _activeTableMenu = require("../../pm-plugins/commands/active-table-menu");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _mergedCells = require("../../pm-plugins/utils/merged-cells");
 var _types = require("../../types");
@@ -29,7 +30,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /* eslint-disable @atlaskit/design-system/no-html-button */
 
 var DragHandleComponent = function DragHandleComponent(_ref) {
-  var isDragMenuTarget = _ref.isDragMenuTarget,
+  var api = _ref.api,
+    isDragMenuTarget = _ref.isDragMenuTarget,
     tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
@@ -160,6 +162,35 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   var browser = (0, _browser.getBrowserInfo)();
+
+  // Clicking the drag handle's clickable zone is a plain row/column selection (not the menu
+  // trigger), so the selection toolbar should appear. The floating menu defers closing for clicks
+  // inside the drag controls, so we close it here and reset the user intent to 'default' (in the
+  // same transaction) so the toolbar is shown.
+  var closeActiveDragMenuAndShowToolbar = (0, _react.useCallback)(function () {
+    var _api$table, _api$core;
+    if (!api) {
+      return;
+    }
+    var activeTableMenu = (_api$table = api.table) === null || _api$table === void 0 || (_api$table = _api$table.sharedState.currentState()) === null || _api$table === void 0 ? void 0 : _api$table.activeTableMenu;
+    var isActiveTableMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+    if (!isActiveTableMenuOpen) {
+      return;
+    }
+    (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref5) {
+      var _api$userIntent;
+      var tr = _ref5.tr;
+      (0, _activeTableMenu.closeActiveTableMenu)(api, {
+        skipUserIntent: true
+      })({
+        tr: tr
+      });
+      (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -185,7 +216,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      if (isDragMenuOpen) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        // New menu: close the open row/column menu (and show the selection toolbar).
+        closeActiveDragMenuAndShowToolbar();
+      } else if (isDragMenuOpen) {
         toggleDragMenu && toggleDragMenu('mouse', e);
       }
     },

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

@@ -82,7 +82,7 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       }
       var tr = editorView.state.tr;
       if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        if (tr.selection instanceof _cellSelection.CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection() || (0, _selection.isColumnSelectionWithMergedFirstRow)(tr.selection) || (0, _selection.isRowSelectionWithMergedFirstColumn)(tr.selection))) {
+        if ((0, _selection.isFullRowOrColumnSelected)(tr.selection)) {
           return null;
         }
       } else {

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

@@ -64,9 +64,6 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
     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';
@@ -99,9 +96,9 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
   var handleEscape = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    dismiss();
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
     returnFocusToDragHandle();
-  }, [dismiss, returnFocusToDragHandle]);
+  }, [api, 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).
@@ -122,8 +119,8 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
     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]);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
+  }, [api]);
   if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }

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

@@ -233,6 +233,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       },
       "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -224,6 +224,7 @@ var DragControls = exports.DragControls = function DragControls(_ref) {
       "data-selected-row-index": selectedRowIndexes[0],
       "data-handle-appearance": appearance
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,

package/dist/cjs/ui/event-handlers.js

@@ -207,14 +207,27 @@ var handleMouseUp = exports.handleMouseUp = function handleMouseUp(view, mouseEv
   }
   return false;
 };
+var resetDragHandleSelectedIntentOnMouseDown = function resetDragHandleSelectedIntentOnMouseDown(event, api) {
+  var _api$userIntent;
+  if ((0, _dom.isTableDragHandleButton)(event.target)) {
+    return;
+  }
+  if ((api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'dragHandleSelected') {
+    var _api$core, _api$userIntent2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+  }
+};
 
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
-var handleMouseDown = exports.handleMouseDown = function handleMouseDown(_, event) {
+var handleMouseDown = exports.handleMouseDown = function handleMouseDown(_view, event, api) {
   var isControl = !!(event.target && event.target instanceof HTMLElement && ((0, _dom.isTableContainerOrWrapper)(event.target) || (0, _dom.isColumnControlsDecorations)(event.target) || (0, _dom.isRowControlsButton)(event.target) || (0, _dom.isDragCornerButton)(event.target)));
   if (isControl) {
     event.preventDefault();
   }
+  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    resetDragHandleSelectedIntentOnMouseDown(event, api);
+  }
   return isControl;
 };
 var handleMouseOut = exports.handleMouseOut = function handleMouseOut(view, mouseEvent) {

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

@@ -1,12 +1,19 @@
 import { pluginKey } from '../plugin-key';
+import { isFullRowOrColumnSelected } from '../utils/selection';
 const applyMenuUserIntent = (tr, api, nextActiveTableMenu) => {
-  var _api$userIntent;
-  const isRowOrColumnMenuOpen = nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column';
-  api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent(isRowOrColumnMenuOpen ? 'tableDragMenuPopupOpen' : 'default')({
+  var _api$userIntent2;
+  if (nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column') {
+    var _api$userIntent;
+    api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('tableDragMenuPopupOpen')({
+      tr
+    });
+    return;
+  }
+  api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(isFullRowOrColumnSelected(tr.selection) ? 'dragHandleSelected' : 'default')({
     tr
   });
 };
-export const closeActiveTableMenu = api => ({
+export const closeActiveTableMenu = (api, options) => ({
   tr
 }) => {
   const nextActiveTableMenu = {
@@ -18,7 +25,9 @@ export const closeActiveTableMenu = api => ({
       activeTableMenu: nextActiveTableMenu
     }
   });
-  applyMenuUserIntent(tr, api, nextActiveTableMenu);
+  if (!(options !== null && options !== void 0 && options.skipUserIntent)) {
+    applyMenuUserIntent(tr, api, nextActiveTableMenu);
+  }
   if (!tr.docChanged) {
     tr.setMeta('addToHistory', false);
   }

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

@@ -98,7 +98,9 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
           tr
         }) => {
           var _api$userIntent;
-          closeActiveTableMenu(api)({
+          closeActiveTableMenu(api, {
+            skipUserIntent: true
+          })({
             tr
           });
           api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging')({

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

@@ -346,7 +346,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,
-        mousedown: withCellTracking(handleMouseDown),
+        mousedown: withCellTracking((view, event) => handleMouseDown(view, event, pluginInjectionApi)),
         mouseleave: handleMouseLeave,
         mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI), pluginInjectionApi),
         mouseenter: handleMouseEnter,

package/dist/es2019/pm-plugins/utils/dom.js

@@ -35,6 +35,7 @@ export const isTableContainerOrWrapper = node => containsClassName(node, ClassNa
 export const isDragRowFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
 export const isDragColumnFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
 export const isDragCornerButton = node => containsClassName(node, ClassName.DRAG_CORNER_BUTTON) || containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
+export const isTableDragHandleButton = target => target instanceof HTMLElement && Boolean(target.closest(`.${ClassName.DRAG_HANDLE_BUTTON_CONTAINER}`));
 
 /*
  * This function returns which side of a given element the mouse cursor is,

package/dist/es2019/pm-plugins/utils/selection.js

@@ -1,3 +1,4 @@
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTableClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 export const getSelectedColumnIndexes = selectionRect => {
@@ -71,4 +72,16 @@ export const isRowSelectionWithMergedFirstColumn = selection => {
     }
   }
   return true;
+};
+
+/**
+ * Returns `true` when the selection covers one or more complete rows or columns (the kind of
+ * selection produced by clicking a row/column drag handle), including the merged-cell variants
+ * where `CellSelection.isRowSelection()` / `isColSelection()` return `false`.
+ */
+export const isFullRowOrColumnSelected = selection => {
+  if (!(selection instanceof CellSelection)) {
+    return false;
+  }
+  return selection.isRowSelection() || selection.isColSelection() || isRowSelectionWithMergedFirstColumn(selection) || isColumnSelectionWithMergedFirstRow(selection);
 };

package/dist/es2019/ui/DragHandle/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable @atlaskit/design-system/no-html-button */
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl';
@@ -11,6 +11,7 @@ import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { closeActiveTableMenu } from '../../pm-plugins/commands/active-table-menu';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
 import { TableCssClassName as ClassName } from '../../types';
@@ -18,6 +19,7 @@ import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 const DragHandleComponent = ({
+  api,
   isDragMenuTarget,
   tableLocalId,
   direction = 'row',
@@ -148,6 +150,36 @@ const DragHandleComponent = ({
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   const showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   const browser = getBrowserInfo();
+
+  // Clicking the drag handle's clickable zone is a plain row/column selection (not the menu
+  // trigger), so the selection toolbar should appear. The floating menu defers closing for clicks
+  // inside the drag controls, so we close it here and reset the user intent to 'default' (in the
+  // same transaction) so the toolbar is shown.
+  const closeActiveDragMenuAndShowToolbar = useCallback(() => {
+    var _api$table, _api$table$sharedStat, _api$core;
+    if (!api) {
+      return;
+    }
+    const activeTableMenu = (_api$table = api.table) === null || _api$table === void 0 ? void 0 : (_api$table$sharedStat = _api$table.sharedState.currentState()) === null || _api$table$sharedStat === void 0 ? void 0 : _api$table$sharedStat.activeTableMenu;
+    const isActiveTableMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+    if (!isActiveTableMenuOpen) {
+      return;
+    }
+    (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => {
+      var _api$userIntent;
+      closeActiveTableMenu(api, {
+        skipUserIntent: true
+      })({
+        tr
+      });
+      (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('default')({
+        tr
+      });
+      return tr;
+    });
+  }, [api]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -175,7 +207,10 @@ const DragHandleComponent = ({
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      if (isDragMenuOpen) {
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        // New menu: close the open row/column menu (and show the selection toolbar).
+        closeActiveDragMenuAndShowToolbar();
+      } else if (isDragMenuOpen) {
         toggleDragMenu && toggleDragMenu('mouse', e);
       }
     },

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -13,7 +13,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
-import { isColumnSelectionWithMergedFirstRow, isRowSelectionWithMergedFirstColumn } from '../../pm-plugins/utils/selection';
+import { isFullRowOrColumnSelected } from '../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../types';
 import getPopupOptions from './getPopupOptions';
 import { DragAndDropInsertButton } from './InsertButton';
@@ -67,7 +67,7 @@ export class FloatingInsertButton extends React.Component {
       }
     } = editorView;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection() || isColumnSelectionWithMergedFirstRow(tr.selection) || isRowSelectionWithMergedFirstColumn(tr.selection))) {
+      if (isFullRowOrColumnSelected(tr.selection)) {
         return null;
       }
     } else {

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

@@ -58,9 +58,6 @@ const FloatingTableMenu = ({
     popupContentRef.current = el;
     setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
   }, [setOutsideClickTargetRef]);
-  const dismiss = useCallback(() => {
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
-  }, [api]);
   const returnFocusToDragHandle = useCallback(() => {
     // Match legacy DragMenu's closeMenu('handle') behaviour.
     const handleId = dragMenuDirection === 'row' ? '#drag-handle-button-row' : '#drag-handle-button-column';
@@ -93,9 +90,9 @@ const FloatingTableMenu = ({
   const handleEscape = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
-    dismiss();
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     returnFocusToDragHandle();
-  }, [dismiss, returnFocusToDragHandle]);
+  }, [api, 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).
@@ -112,8 +109,8 @@ const FloatingTableMenu = ({
     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]);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
+  }, [api]);
   if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }

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

@@ -232,6 +232,7 @@ export const ColumnControls = ({
       },
       "data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -215,6 +215,7 @@ export const DragControls = ({
       "data-selected-row-index": selectedRowIndexes[0],
       "data-handle-appearance": appearance
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,

package/dist/es2019/ui/event-handlers.js

@@ -17,7 +17,7 @@ import { deleteColumns } from '../pm-plugins/transforms/delete-columns';
 import { deleteRows } from '../pm-plugins/transforms/delete-rows';
 import { getSelectedCellInfo } from '../pm-plugins/utils/analytics';
 import { convertHTMLCellIndexToColumnIndex, getColumnIndexByMousePosition, getColumnIndexMappedToColumnIndexInFirstRow } from '../pm-plugins/utils/column-controls';
-import { getColumnOrRowIndex, getIndexAttributeSourceElement, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from '../pm-plugins/utils/dom';
+import { getColumnOrRowIndex, getIndexAttributeSourceElement, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton, isTableDragHandleButton } from '../pm-plugins/utils/dom';
 import { getAllowAddColumnCustomStep } from '../pm-plugins/utils/get-allow-add-column-custom-step';
 import { getRowIndexByMousePosition } from '../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
@@ -197,14 +197,27 @@ export const handleMouseUp = (view, mouseEvent) => {
   }
   return false;
 };
+const resetDragHandleSelectedIntentOnMouseDown = (event, api) => {
+  var _api$userIntent, _api$userIntent$share;
+  if (isTableDragHandleButton(event.target)) {
+    return;
+  }
+  if ((api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent) === 'dragHandleSelected') {
+    var _api$core, _api$userIntent2;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+  }
+};
 
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
-export const handleMouseDown = (_, event) => {
+export const handleMouseDown = (_view, event, api) => {
   const isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target) || isDragCornerButton(event.target)));
   if (isControl) {
     event.preventDefault();
   }
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    resetDragHandleSelectedIntentOnMouseDown(event, api);
+  }
   return isControl;
 };
 export const handleMouseOut = (view, mouseEvent) => {

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

@@ -1,12 +1,19 @@
 import { pluginKey } from '../plugin-key';
+import { isFullRowOrColumnSelected } from '../utils/selection';
 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')({
+  var _api$userIntent2;
+  if (nextActiveTableMenu.type === 'row' || nextActiveTableMenu.type === 'column') {
+    var _api$userIntent;
+    api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('tableDragMenuPopupOpen')({
+      tr: tr
+    });
+    return;
+  }
+  api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isFullRowOrColumnSelected(tr.selection) ? 'dragHandleSelected' : 'default')({
     tr: tr
   });
 };
-export var closeActiveTableMenu = function closeActiveTableMenu(api) {
+export var closeActiveTableMenu = function closeActiveTableMenu(api, options) {
   return function (_ref) {
     var tr = _ref.tr;
     var nextActiveTableMenu = {
@@ -18,7 +25,9 @@ export var closeActiveTableMenu = function closeActiveTableMenu(api) {
         activeTableMenu: nextActiveTableMenu
       }
     });
-    applyMenuUserIntent(tr, api, nextActiveTableMenu);
+    if (!(options !== null && options !== void 0 && options.skipUserIntent)) {
+      applyMenuUserIntent(tr, api, nextActiveTableMenu);
+    }
     if (!tr.docChanged) {
       tr.setMeta('addToHistory', false);
     }

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

@@ -90,7 +90,9 @@ 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;
-          closeActiveTableMenu(api)({
+          closeActiveTableMenu(api, {
+            skipUserIntent: true
+          })({
             tr: tr
           });
           api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('dragging')({

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

@@ -341,7 +341,9 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,
-        mousedown: withCellTracking(handleMouseDown),
+        mousedown: withCellTracking(function (view, event) {
+          return handleMouseDown(view, event, pluginInjectionApi);
+        }),
         mouseleave: handleMouseLeave,
         mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI), pluginInjectionApi),
         mouseenter: handleMouseEnter,

package/dist/esm/pm-plugins/utils/dom.js

@@ -57,6 +57,9 @@ export var isDragColumnFloatingInsertDot = function isDragColumnFloatingInsertDo
 export var isDragCornerButton = function isDragCornerButton(node) {
   return containsClassName(node, ClassName.DRAG_CORNER_BUTTON) || containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
 };
+export var isTableDragHandleButton = function isTableDragHandleButton(target) {
+  return target instanceof HTMLElement && Boolean(target.closest(".".concat(ClassName.DRAG_HANDLE_BUTTON_CONTAINER)));
+};
 
 /*
  * This function returns which side of a given element the mouse cursor is,

package/dist/esm/pm-plugins/utils/selection.js

@@ -1,3 +1,4 @@
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTableClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 export var getSelectedColumnIndexes = function getSelectedColumnIndexes(selectionRect) {
@@ -71,4 +72,16 @@ export var isRowSelectionWithMergedFirstColumn = function isRowSelectionWithMerg
     }
   }
   return true;
+};
+
+/**
+ * Returns `true` when the selection covers one or more complete rows or columns (the kind of
+ * selection produced by clicking a row/column drag handle), including the merged-cell variants
+ * where `CellSelection.isRowSelection()` / `isColSelection()` return `false`.
+ */
+export var isFullRowOrColumnSelected = function isFullRowOrColumnSelected(selection) {
+  if (!(selection instanceof CellSelection)) {
+    return false;
+  }
+  return selection.isRowSelection() || selection.isColSelection() || isRowSelectionWithMergedFirstColumn(selection) || isColumnSelectionWithMergedFirstRow(selection);
 };

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @atlaskit/design-system/no-html-button */
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl';
@@ -13,6 +13,7 @@ import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { closeActiveTableMenu } from '../../pm-plugins/commands/active-table-menu';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
 import { TableCssClassName as ClassName } from '../../types';
@@ -20,7 +21,8 @@ import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 var DragHandleComponent = function DragHandleComponent(_ref) {
-  var isDragMenuTarget = _ref.isDragMenuTarget,
+  var api = _ref.api,
+    isDragMenuTarget = _ref.isDragMenuTarget,
     tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
@@ -151,6 +153,35 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   var browser = getBrowserInfo();
+
+  // Clicking the drag handle's clickable zone is a plain row/column selection (not the menu
+  // trigger), so the selection toolbar should appear. The floating menu defers closing for clicks
+  // inside the drag controls, so we close it here and reset the user intent to 'default' (in the
+  // same transaction) so the toolbar is shown.
+  var closeActiveDragMenuAndShowToolbar = useCallback(function () {
+    var _api$table, _api$core;
+    if (!api) {
+      return;
+    }
+    var activeTableMenu = (_api$table = api.table) === null || _api$table === void 0 || (_api$table = _api$table.sharedState.currentState()) === null || _api$table === void 0 ? void 0 : _api$table.activeTableMenu;
+    var isActiveTableMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+    if (!isActiveTableMenuOpen) {
+      return;
+    }
+    (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref5) {
+      var _api$userIntent;
+      var tr = _ref5.tr;
+      closeActiveTableMenu(api, {
+        skipUserIntent: true
+      })({
+        tr: tr
+      });
+      (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -176,7 +207,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      if (isDragMenuOpen) {
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        // New menu: close the open row/column menu (and show the selection toolbar).
+        closeActiveDragMenuAndShowToolbar();
+      } else if (isDragMenuOpen) {
         toggleDragMenu && toggleDragMenu('mouse', e);
       }
     },

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

@@ -20,7 +20,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
-import { isColumnSelectionWithMergedFirstRow, isRowSelectionWithMergedFirstColumn } from '../../pm-plugins/utils/selection';
+import { isFullRowOrColumnSelected } from '../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../types';
 import getPopupOptions from './getPopupOptions';
 import { DragAndDropInsertButton } from './InsertButton';
@@ -75,7 +75,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       }
       var tr = editorView.state.tr;
       if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection() || isColumnSelectionWithMergedFirstRow(tr.selection) || isRowSelectionWithMergedFirstColumn(tr.selection))) {
+        if (isFullRowOrColumnSelected(tr.selection)) {
           return null;
         }
       } else {

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

@@ -56,9 +56,6 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
     popupContentRef.current = el;
     setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
   }, [setOutsideClickTargetRef]);
-  var dismiss = useCallback(function () {
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
-  }, [api]);
   var returnFocusToDragHandle = useCallback(function () {
     // Match legacy DragMenu's closeMenu('handle') behaviour.
     var handleId = dragMenuDirection === 'row' ? '#drag-handle-button-row' : '#drag-handle-button-column';
@@ -91,9 +88,9 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
   var handleEscape = useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    dismiss();
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     returnFocusToDragHandle();
-  }, [dismiss, returnFocusToDragHandle]);
+  }, [api, 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).
@@ -114,8 +111,8 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
     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]);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
+  }, [api]);
   if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }

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

@@ -225,6 +225,7 @@ export var ColumnControls = function ColumnControls(_ref) {
       },
       "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -215,6 +215,7 @@ export var DragControls = function DragControls(_ref) {
       "data-selected-row-index": selectedRowIndexes[0],
       "data-handle-appearance": appearance
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      api: api,
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,

package/dist/esm/ui/event-handlers.js

@@ -18,7 +18,7 @@ import { deleteColumns } from '../pm-plugins/transforms/delete-columns';
 import { deleteRows } from '../pm-plugins/transforms/delete-rows';
 import { getSelectedCellInfo } from '../pm-plugins/utils/analytics';
 import { convertHTMLCellIndexToColumnIndex, getColumnIndexByMousePosition, getColumnIndexMappedToColumnIndexInFirstRow } from '../pm-plugins/utils/column-controls';
-import { getColumnOrRowIndex, getIndexAttributeSourceElement, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from '../pm-plugins/utils/dom';
+import { getColumnOrRowIndex, getIndexAttributeSourceElement, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton, isTableDragHandleButton } from '../pm-plugins/utils/dom';
 import { getAllowAddColumnCustomStep } from '../pm-plugins/utils/get-allow-add-column-custom-step';
 import { getRowIndexByMousePosition } from '../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
@@ -198,14 +198,27 @@ export var handleMouseUp = function handleMouseUp(view, mouseEvent) {
   }
   return false;
 };
+var resetDragHandleSelectedIntentOnMouseDown = function resetDragHandleSelectedIntentOnMouseDown(event, api) {
+  var _api$userIntent;
+  if (isTableDragHandleButton(event.target)) {
+    return;
+  }
+  if ((api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'dragHandleSelected') {
+    var _api$core, _api$userIntent2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+  }
+};
 
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
-export var handleMouseDown = function handleMouseDown(_, event) {
+export var handleMouseDown = function handleMouseDown(_view, event, api) {
   var isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target) || isDragCornerButton(event.target)));
   if (isControl) {
     event.preventDefault();
   }
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    resetDragHandleSelectedIntentOnMouseDown(event, api);
+  }
   return isControl;
 };
 export var handleMouseOut = function handleMouseOut(view, mouseEvent) {

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

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

package/dist/types/pm-plugins/utils/dom.d.ts

@@ -21,6 +21,7 @@ export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => bo
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
+export declare const isTableDragHandleButton: (target: EventTarget | null) => boolean;
 /**
  * This can be used with mouse events to determine the left/right side of the target the pointer is closest too.
  *

package/dist/types/pm-plugins/utils/selection.d.ts

@@ -1,4 +1,5 @@
-import type { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
 export declare const getSelectedRowIndexes: (selectionRect: Rect) => number[];
@@ -14,3 +15,9 @@ export declare const isColumnSelectionWithMergedFirstRow: (selection: CellSelect
  * returns `false` in this case because the selection does not include the merged first-column cell.
  */
 export declare const isRowSelectionWithMergedFirstColumn: (selection: CellSelection) => boolean;
+/**
+ * Returns `true` when the selection covers one or more complete rows or columns (the kind of
+ * selection produced by clicking a row/column drag handle), including the merged-cell variants
+ * where `CellSelection.isRowSelection()` / `isColSelection()` return `false`.
+ */
+export declare const isFullRowOrColumnSelected: (selection: Selection) => boolean;

package/dist/types/ui/DragHandle/index.d.ts

@@ -3,9 +3,10 @@ import React from 'react';
 import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
-import type { CellHoverMeta, TableDirection } from '../../types';
+import type { CellHoverMeta, PluginInjectionAPI, TableDirection } from '../../types';
 export type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger' | 'placeholder';
 type DragHandleProps = {
+    api?: PluginInjectionAPI | null;
     appearance?: DragHandleAppearance;
     direction?: TableDirection;
     editorView: EditorView;

package/dist/types/ui/event-handlers.d.ts

@@ -8,7 +8,7 @@ export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseOver: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseUp: (view: EditorView, mouseEvent: Event) => boolean;
-export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
+export declare const handleMouseDown: (_view: EditorView, event: Event, api?: PluginInjectionAPI | null) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "24.2.3",
+	"version": "24.2.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
 		"@atlaskit/primitives": "^20.0.0",
-		"@atlaskit/tmp-editor-statsig": "^109.1.0",
+		"@atlaskit/tmp-editor-statsig": "^109.2.0",
 		"@atlaskit/toggle": "^17.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.8.0",
+		"@atlaskit/editor-common": "^116.10.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -164,6 +164,6 @@
 	"devDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-intl": "^6.6.2"
+		"react-intl": "^7.0.0"
 	}
 }