@atlaskit/editor-plugin-table 23.3.3 → 23.3.5

package/dist/es2019/ui/ContentComponent.js

@@ -5,6 +5,7 @@ import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
@@ -12,6 +13,7 @@ import FloatingDragMenu from './FloatingDragMenu';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import FloatingInsertButton from './FloatingInsertButton';
+import FloatingTableMenu from './FloatingTableMenu';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
 import { SizeSelector } from './SizeSelector';
@@ -138,7 +140,15 @@ const ContentComponentInternal = ({
     isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
     api: api,
     isDragMenuOpen: isDragMenuOpen
-  }), /*#__PURE__*/React.createElement(FloatingDragMenu, {
+  }), expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(FloatingTableMenu, {
+    api: api,
+    boundariesElement: popupsBoundariesElement,
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    stickyHeaders: stickyHeader,
+    tableWrapper: tableWrapperTarget,
+    targetCellPosition: targetCellPosition
+  }) : /*#__PURE__*/React.createElement(FloatingDragMenu, {
     editorView: editorView,
     mountPoint: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,

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

@@ -76,7 +76,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
         toggleActiveTableMenu({
           type: 'cell',
           openedBy: 'mouse'
-        }, currentActiveTableMenu)({
+        }, currentActiveTableMenu, api)({
           tr
         });
         return tr;
@@ -115,7 +115,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
           toggleActiveTableMenu({
             type: 'cell',
             openedBy: 'keyboard'
-          }, currentActiveTableMenu)({
+          }, currentActiveTableMenu, api)({
             tr
           });
           return tr;

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

@@ -32,11 +32,11 @@ export const CellMenuPopup = ({
     const {
       isCellMenuOpenByKeyboard
     } = getPluginState(editorView.state);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     if (isCellMenuOpenByKeyboard) {
       setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
     }
-  }, [api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
+  }, [api, editorView]);
   const isEventInsideCellMenu = useCallback(event => {
     var _popupContentRef$curr;
     const target = event.target;

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

@@ -4,9 +4,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 import React, { Component } from 'react';
+
 /* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
 import { jsx } from '@emotion/react';
+import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -44,7 +47,6 @@ import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
 import { TableCssClassName as ClassName } from '../../types';
 import { colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
 import { cellColourPreviewStyles } from './styles';
-const arrowsList = new Set(!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']);
 const dropdownMenuSection = {
   hasSeparator: true
 };
@@ -52,6 +54,8 @@ const elementBeforeIconStyles = xcss({
   marginRight: 'space.negative.075',
   display: 'flex'
 });
+const getArrowsList = memoizeOne(() => new Set(!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']));
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class ContextualMenu extends Component {
   constructor(...args) {
@@ -605,7 +609,7 @@ export class ContextualMenu extends Component {
         } = payload;
         if (event && event instanceof KeyboardEvent) {
           if (!this.state.isSubmenuOpen) {
-            if (arrowsList.has(event.key)) {
+            if (getArrowsList().has(event.key)) {
               // preventing default behavior for avoiding cursor jump to next/previous table column
               // when left/right arrow pressed.
               event.preventDefault();

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

@@ -1,19 +1,11 @@
 import React from 'react';
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
-import { dragMenuDropdownWidth, dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
-import { COLUMN_MENU } from '../TableMenu/column/keys';
-import { ROW_MENU } from '../TableMenu/row/keys';
-import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
-import { TableMenu } from '../TableMenu/shared/TableMenu';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
-const TABLE_MENU_OFFSET = dragTableInsertColumnButtonSize + 4;
 const FloatingDragMenu = ({
   mountPoint,
   boundariesElement,
@@ -36,24 +28,11 @@ const FloatingDragMenu = ({
   tableWrapper
 }) => {
   var _getEditorFeatureFlag;
-  const {
-    activeTableMenu
-  } = useSharedPluginStateWithSelector(api, ['table'], states => {
-    var _states$tableState;
-    return {
-      activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
-    };
-  });
-  const isActiveTableMenuDragMenu = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
-  const hasActiveTableMenuState = activeTableMenu !== undefined;
-  const isDragMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu : isOpen;
-  const dragMenuDirection = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.type : undefined : direction;
-  const dragMenuIndex = 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;
   }
   const inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && fg('platform_editor_table_sticky_header_patch_7');
-  const targetHandleRef = dragMenuDirection === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
@@ -62,8 +41,8 @@ const FloatingDragMenu = ({
   } = (_getEditorFeatureFlag = getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) !== null && _getEditorFeatureFlag !== void 0 ? _getEditorFeatureFlag : {};
   const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
   return /*#__PURE__*/React.createElement(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
     ,
@@ -71,7 +50,7 @@ const FloatingDragMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? TABLE_MENU_WIDTH : dragMenuDropdownWidth,
+    fitWidth: dragMenuDropdownWidth,
     fitHeight: 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.
@@ -79,22 +58,14 @@ const FloatingDragMenu = ({
     ,
     zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    preventOverflow: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
-    offset: 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
-  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
-    api: api,
-    userIntent: "tableDragMenuPopupOpen"
-  }, /*#__PURE__*/React.createElement(TableMenu, {
-    api: api,
-    editorView: editorView,
-    surface: dragMenuDirection === 'row' ? ROW_MENU : COLUMN_MENU
-  })) : /*#__PURE__*/React.createElement(DragMenu, {
+  }, /*#__PURE__*/React.createElement(DragMenu, {
     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/es2019/ui/FloatingTableMenu/index.js

@@ -0,0 +1,165 @@
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { ToolbarKeyboardNavigationProvider } from '@atlaskit/editor-toolbar/toolbar-keyboard-navigation-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { closeActiveTableMenu } from '../../pm-plugins/commands';
+import { TableCssClassName as ClassName } from '../../types';
+import { dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
+import { COLUMN_MENU } from '../TableMenu/column/keys';
+import { ROW_MENU } from '../TableMenu/row/keys';
+import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
+import { TableMenu } from '../TableMenu/shared/TableMenu';
+const PopupWithListeners = withReactEditorViewOuterListeners(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.
+const DRAG_HANDLE_CONTROLS_SELECTOR = `.${ClassName.DRAG_ROW_CONTROLS}, .${ClassName.DRAG_COLUMN_CONTROLS}`;
+const 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.
+const TABLE_MENU_NAV_SELECTOR = '[data-table-drag-menu-nav="true"]';
+const TABLE_MENU_OFFSET = dragTableInsertColumnButtonSize + 4;
+const POPUP_OFFSET = [TABLE_MENU_OFFSET, 0];
+
+/**
+ * Row and column menu for table.
+ */
+const FloatingTableMenu = ({
+  api,
+  boundariesElement,
+  editorView,
+  mountPoint,
+  scrollableElement,
+  stickyHeaders,
+  tableWrapper,
+  targetCellPosition
+}) => {
+  const {
+    activeTableMenu
+  } = useSharedPluginStateWithSelector(api, ['table'], states => {
+    var _states$tableState;
+    return {
+      activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+    };
+  });
+  const isDragMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+  const dragMenuDirection = isDragMenuOpen ? activeTableMenu.type : undefined;
+  const isOpenedByKeyboard = isDragMenuOpen && activeTableMenu.openedBy === 'keyboard';
+  const popupContentRef = useRef(null);
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  const navWrapperRef = useRef(null);
+  const handlePopupRef = useCallback(el => {
+    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';
+    const handle = document.querySelector(handleId);
+    handle === null || handle === void 0 ? void 0 : handle.focus();
+  }, [dragMenuDirection]);
+  const focusFirstMenuItem = useCallback(() => {
+    const root = navWrapperRef.current;
+    if (!root) {
+      return;
+    }
+    const firstItem = root.querySelector('[role="menuitem"]:not([disabled]), [role="menuitemcheckbox"]:not([disabled]), [role="menuitemradio"]:not([disabled]), button:not([disabled])');
+    firstItem === null || firstItem === void 0 ? 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.
+  const setNavWrapperRef = useCallback(el => {
+    navWrapperRef.current = el;
+    if (el && isOpenedByKeyboard) {
+      // rAF allows the popup to finish positioning before focusing.
+      requestAnimationFrame(() => {
+        focusFirstMenuItem();
+      });
+    }
+  }, [focusFirstMenuItem, isOpenedByKeyboard]);
+  const handleKeyboardFocus = useCallback(_event => {
+    focusFirstMenuItem();
+  }, [focusFirstMenuItem]);
+  const handleEscape = useCallback(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).
+  const editorDom = useMemo(() => 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.
+  const isShortcutToFocusToolbar = useCallback(() => false, []);
+  const handleClickOutside = useCallback(event => {
+    var _popupContentRef$curr;
+    const 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;
+  }
+  const inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && fg('platform_editor_table_sticky_header_patch_7');
+  const targetHandleRef = dragMenuDirection === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
+    return null;
+  }
+  return /*#__PURE__*/React.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: TABLE_MENU_WIDTH,
+    fitHeight: 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 ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    preventOverflow: dragMenuDirection === 'row',
+    offset: POPUP_OFFSET,
+    stick: true,
+    handleClickOutside: handleClickOutside
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: handlePopupRef
+  }, /*#__PURE__*/React.createElement(ToolbarKeyboardNavigationProvider, {
+    childComponentSelector: TABLE_MENU_NAV_SELECTOR,
+    dom: editorDom,
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleFocus: handleKeyboardFocus,
+    handleEscape: handleEscape
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-table-drag-menu-nav": "true",
+    ref: setNavWrapperRef
+  }, /*#__PURE__*/React.createElement(TableMenu, {
+    api: api,
+    editorView: editorView,
+    surface: dragMenuDirection === 'row' ? ROW_MENU : COLUMN_MENU
+  })))));
+};
+FloatingTableMenu.displayName = 'FloatingTableMenu';
+export default FloatingTableMenu;

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

@@ -1,15 +1,16 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { useCallback, useMemo, useRef } from 'react';
+import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
-import { toggleActiveTableMenuWithAnalytics } from '../../../pm-plugins/commands/commands-with-analytics';
+import { clearHoverSelection, closeActiveTableMenu, hoverCell, hoverColumns, selectColumn, selectColumns, toggleActiveTableMenu } from '../../../pm-plugins/commands';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -41,7 +42,7 @@ export const ColumnControls = ({
   getScrollOffset,
   api
 }) => {
-  var _colWidths$map$join, _api$analytics3;
+  var _colWidths$map$join;
   const columnControlsRef = useRef(null);
   const {
     selection
@@ -131,17 +132,50 @@ export const ColumnControls = ({
       dispatch
     } = editorView;
     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 (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
+      }
       return;
     }
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      if (colIndex !== undefined) {
-        var _api$analytics;
-        toggleActiveTableMenuWithAnalytics(api === null || api === void 0 ? 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) {
+        const {
+          activeTableMenu: currentActiveTableMenu
+        } = getTablePluginState(state);
+        const isSameActiveMenu = (currentActiveTableMenu === null || currentActiveTableMenu === void 0 ? void 0 : currentActiveTableMenu.type) === 'column' && currentActiveTableMenu.index === colIndex;
+        api.core.actions.execute(({
+          tr
+        }) => {
+          if (!isSameActiveMenu) {
+            var _api$analytics, _api$analytics$action;
+            (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
+              action: TABLE_ACTION.DRAG_MENU_OPENED,
+              actionSubject: ACTION_SUBJECT.TABLE,
+              actionSubjectId: null,
+              eventType: EVENT_TYPE.TRACK,
+              attributes: {
+                inputMethod: trigger === 'keyboard' ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE,
+                direction: 'column'
+              }
+            })(tr);
+          }
+          toggleActiveTableMenu({
+            type: 'column',
+            index: colIndex,
+            openedBy: trigger
+          }, currentActiveTableMenu, api)({
+            tr
+          });
+          return tr;
+        });
       }
       return;
     }
     toggleDragMenuWithAnalytics(api === null || api === void 0 ? 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 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
+  }, [editorView, colIndex, api]);
   const colIndexes = useMemo(() => {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

@@ -1,13 +1,13 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { clearHoverSelection } from '../../../pm-plugins/commands';
-import { toggleActiveTableMenuWithAnalytics } from '../../../pm-plugins/commands/commands-with-analytics';
+import { clearHoverSelection, closeActiveTableMenu, toggleActiveTableMenu } from '../../../pm-plugins/commands';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -43,7 +43,7 @@ export const DragControls = ({
   api,
   selection
 }) => {
-  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics3;
+  var _tableNode$attrs$loca, _tableNode$attrs;
   const [isDragging, setIsDragging] = useState(false);
   const rowHeights = getRowHeights(tableRef);
   const rowsParams = getRowsParams(rowHeights);
@@ -81,18 +81,51 @@ export const DragControls = ({
   const toggleDragMenuHandler = useCallback((trigger, event) => {
     var _api$analytics2;
     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 row. Close it here
+      // for the updated menu (legacy menu closes via outside-click on its dropdown).
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
+      }
       return;
     }
     const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      if (rowIndex !== undefined) {
-        var _api$analytics;
-        toggleActiveTableMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)('row', rowIndex, trigger)(editorView.state, editorView.dispatch);
+      if (rowIndex !== undefined && api) {
+        const {
+          activeTableMenu: currentActiveTableMenu
+        } = getTablePluginState(editorView.state);
+        const isSameActiveMenu = (currentActiveTableMenu === null || currentActiveTableMenu === void 0 ? void 0 : currentActiveTableMenu.type) === 'row' && currentActiveTableMenu.index === rowIndex;
+        api.core.actions.execute(({
+          tr
+        }) => {
+          if (!isSameActiveMenu) {
+            var _api$analytics, _api$analytics$action;
+            (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
+              action: TABLE_ACTION.DRAG_MENU_OPENED,
+              actionSubject: ACTION_SUBJECT.TABLE,
+              actionSubjectId: null,
+              eventType: EVENT_TYPE.TRACK,
+              attributes: {
+                inputMethod: trigger === 'keyboard' ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE,
+                direction: 'row'
+              }
+            })(tr);
+          }
+          toggleActiveTableMenu({
+            type: 'row',
+            index: rowIndex,
+            openedBy: trigger
+          }, currentActiveTableMenu, api)({
+            tr
+          });
+          return tr;
+        });
       }
       return;
     }
     toggleDragMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'row', rowIndex, trigger)(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   const handleMouseOut = useCallback(() => {
     if (tableActive) {

package/dist/es2019/ui/TableMenu/cell/items/MergeCellsItem.js

@@ -27,7 +27,7 @@ export const MergeCellsItem = ({
       return;
     }
     mergeCellsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!shouldShowMergeCells(tableMenuContext)) {

package/dist/es2019/ui/TableMenu/cell/items/SplitCellItem.js

@@ -27,7 +27,7 @@ export const SplitCellItem = ({
       return;
     }
     splitCellWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!shouldShowSplitCell(tableMenuContext)) {

package/dist/es2019/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js

@@ -34,7 +34,7 @@ export const VerticalAlignDropdownItem = ({
       }, targetCellPosition)({
         tr
       });
-      closeActiveTableMenu()({
+      closeActiveTableMenu(api)({
         tr
       });
       return tr;

package/dist/es2019/ui/TableMenu/column/items/AddColumnLeftItem.js

@@ -43,7 +43,7 @@ export const AddColumnLeftItem = ({
     }
     const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/es2019/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -43,7 +43,7 @@ export const AddColumnRightItem = ({
     }
     const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/es2019/ui/TableMenu/column/items/DeleteColumnItem.js

@@ -61,7 +61,7 @@ export const DeleteColumnItem = ({
     }
     const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     deleteColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect)(editorView.state, editorView.dispatch, editorView);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/es2019/ui/TableMenu/column/items/DistributeColumnsItem.js

@@ -48,7 +48,7 @@ export const DistributeColumnsItem = ({
       return;
     }
     distributeColumnsWidthsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!shouldShowDistributeColumns(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount)) {

package/dist/es2019/ui/TableMenu/column/items/MoveColumnLeftItem.js

@@ -45,7 +45,7 @@ export const MoveColumnLeftItem = props => {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.left - 1)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnLeft(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn)) {

package/dist/es2019/ui/TableMenu/column/items/MoveColumnRightItem.js

@@ -44,7 +44,7 @@ export const MoveColumnRightItem = props => {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.right)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnRight(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastColumn)) {

package/dist/es2019/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -29,7 +29,7 @@ export const SortDecreasingItem = ({
       return;
     }
     sortColumnWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, SortOrder.DESC)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {