@atlaskit/editor-plugin-table 23.3.4 → 23.3.6

package/dist/esm/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';
@@ -25,7 +26,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _api$analytics3;
+  var _colWidths$map$join;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -122,17 +123,48 @@ export var ColumnControls = function ColumnControls(_ref) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (event !== null && event !== void 0 && event.shiftKey) {
+      // Shift-click extends the selection rather than toggling the menu, but the
+      // open drag menu would otherwise stay anchored to a stale column. Close it here
+      // for the updated menu (legacy menu closes via outside-click on its dropdown).
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        api === null || api === 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 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)('column', colIndex, trigger)(state, dispatch);
+      if (colIndex !== undefined && api) {
+        var _getTablePluginState = getTablePluginState(state),
+          currentActiveTableMenu = _getTablePluginState.activeTableMenu;
+        var isSameActiveMenu = (currentActiveTableMenu === null || currentActiveTableMenu === void 0 ? void 0 : currentActiveTableMenu.type) === 'column' && currentActiveTableMenu.index === colIndex;
+        api.core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          if (!isSameActiveMenu) {
+            var _api$analytics;
+            (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+              action: 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: tr
+          });
+          return tr;
+        });
       }
       return;
     }
     toggleDragMenuWithAnalytics(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
-  }, [editorView, colIndex, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
+  }, [editorView, colIndex, api]);
   var colIndexes = useMemo(function () {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -239,9 +271,9 @@ export var ColumnControls = function ColumnControls(_ref) {
       overflowX: stickyTop ? 'hidden' : 'visible',
       pointerEvents: isDragging ? 'none' : undefined
     }
-  }, columnParams.map(function (_ref2, index) {
-    var startIndex = _ref2.startIndex,
-      endIndex = _ref2.endIndex;
+  }, columnParams.map(function (_ref3, index) {
+    var startIndex = _ref3.startIndex,
+      endIndex = _ref3.endIndex;
     return /*#__PURE__*/React.createElement("div", {
       style: {
         gridColumn: "".concat(startIndex + 1, " / span 1")

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

@@ -2,13 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* 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';
@@ -28,7 +28,7 @@ var getSelectedRows = function getSelectedRows(selection) {
   return [];
 };
 export var DragControls = function DragControls(_ref) {
-  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics3;
+  var _tableNode$attrs$loca, _tableNode$attrs;
   var tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     tableWidth = _ref.tableWidth,
@@ -83,18 +83,49 @@ export var DragControls = function DragControls(_ref) {
   var toggleDragMenuHandler = useCallback(function (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 || api.core.actions.execute(closeActiveTableMenu(api));
+      }
       return;
     }
     var 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 || (_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) {
+        var _getTablePluginState2 = getTablePluginState(editorView.state),
+          currentActiveTableMenu = _getTablePluginState2.activeTableMenu;
+        var isSameActiveMenu = (currentActiveTableMenu === null || currentActiveTableMenu === void 0 ? void 0 : currentActiveTableMenu.type) === 'row' && currentActiveTableMenu.index === rowIndex;
+        api.core.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
+          if (!isSameActiveMenu) {
+            var _api$analytics;
+            (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+              action: 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: tr
+          });
+          return tr;
+        });
       }
       return;
     }
     toggleDragMenuWithAnalytics(api === null || api === 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 || (_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]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   var handleMouseOut = useCallback(function () {
     if (tableActive) {
@@ -225,9 +256,9 @@ export var DragControls = function DragControls(_ref) {
     },
     onMouseMove: handleMouseMove,
     contentEditable: false
-  }, rowsParams.map(function (_ref4, index) {
-    var startIndex = _ref4.startIndex,
-      endIndex = _ref4.endIndex;
+  }, rowsParams.map(function (_ref5, index) {
+    var startIndex = _ref5.startIndex,
+      endIndex = _ref5.endIndex;
     return (
       /*#__PURE__*/
       // Ignored via go/ees005
@@ -278,21 +309,21 @@ export var DragControls = function DragControls(_ref) {
     );
   }), rowHandles());
 };
-export var DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
-  var editorView = _ref5.editorView,
-    tableRef = _ref5.tableRef,
-    tableNode = _ref5.tableNode,
-    tableWidth = _ref5.tableWidth,
-    tableActive = _ref5.tableActive,
-    hoveredCell = _ref5.hoveredCell,
-    isInDanger = _ref5.isInDanger,
-    isTableHovered = _ref5.isTableHovered,
-    isResizing = _ref5.isResizing,
-    hoverRows = _ref5.hoverRows,
-    selectRow = _ref5.selectRow,
-    selectRows = _ref5.selectRows,
-    updateCellHoverLocation = _ref5.updateCellHoverLocation,
-    api = _ref5.api;
+export var DragControlsWithSelection = function DragControlsWithSelection(_ref6) {
+  var editorView = _ref6.editorView,
+    tableRef = _ref6.tableRef,
+    tableNode = _ref6.tableNode,
+    tableWidth = _ref6.tableWidth,
+    tableActive = _ref6.tableActive,
+    hoveredCell = _ref6.hoveredCell,
+    isInDanger = _ref6.isInDanger,
+    isTableHovered = _ref6.isTableHovered,
+    isResizing = _ref6.isResizing,
+    hoverRows = _ref6.hoverRows,
+    selectRow = _ref6.selectRow,
+    selectRows = _ref6.selectRows,
+    updateCellHoverLocation = _ref6.updateCellHoverLocation,
+    api = _ref6.api;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
       var _states$selectionStat;
       return {

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

@@ -26,7 +26,7 @@ export var MergeCellsItem = function MergeCellsItem(_ref) {
       return;
     }
     mergeCellsWithAnalytics(api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowMergeCells(tableMenuContext)) {

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

@@ -26,7 +26,7 @@ export var SplitCellItem = function SplitCellItem(_ref) {
       return;
     }
     splitCellWithAnalytics(api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowSplitCell(tableMenuContext)) {

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

@@ -31,7 +31,7 @@ export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref)
       }, targetCellPosition)({
         tr: tr
       });
-      closeActiveTableMenu()({
+      closeActiveTableMenu(api)({
         tr: tr
       });
       return tr;

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

@@ -39,7 +39,7 @@ export var AddColumnLeftItem = function AddColumnLeftItem(_ref) {
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

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

@@ -39,7 +39,7 @@ export var AddColumnRightItem = function AddColumnRightItem(_ref) {
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

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

@@ -57,7 +57,7 @@ export var DeleteColumnItem = function DeleteColumnItem(_ref) {
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     deleteColumnsWithAnalytics(api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

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

@@ -48,7 +48,7 @@ export var DistributeColumnsItem = function DistributeColumnsItem(_ref) {
       return;
     }
     distributeColumnsWidthsWithAnalytics(api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowDistributeColumns(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount)) {

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

@@ -42,7 +42,7 @@ export var MoveColumnLeftItem = function MoveColumnLeftItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnLeft(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn)) {

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

@@ -41,7 +41,7 @@ export var MoveColumnRightItem = function MoveColumnRightItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnRight(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastColumn)) {

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

@@ -26,7 +26,7 @@ export var SortDecreasingItem = function SortDecreasingItem(_ref) {
       return;
     }
     sortColumnWithAnalytics(api === null || api === 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 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/esm/ui/TableMenu/column/items/SortIncreasingItem.js

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

package/dist/esm/ui/TableMenu/row/items/AddRowAboveItem.js

@@ -29,7 +29,7 @@ export var AddRowAboveItem = function AddRowAboveItem(props) {
       index: index,
       moveCursorToInsertedRow: true
     })(editorView.state, editorView.dispatch);
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/esm/ui/TableMenu/row/items/AddRowBelowItem.js

@@ -29,7 +29,7 @@ export var AddRowBelowItem = function AddRowBelowItem(props) {
       index: index,
       moveCursorToInsertedRow: true
     })(editorView.state, editorView.dispatch);
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/esm/ui/TableMenu/row/items/DeleteRowItem.js

@@ -52,7 +52,7 @@ export var DeleteRowItem = function DeleteRowItem(props) {
       return;
     }
     deleteRowsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/esm/ui/TableMenu/row/items/MoveRowDownItem.js

@@ -41,7 +41,7 @@ export var MoveRowDownItem = function MoveRowDownItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === 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_ROW, getSelectedRowIndexes(selectionRect), selectionRect.bottom)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowDown(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastRow)) {

package/dist/esm/ui/TableMenu/row/items/MoveRowUpItem.js

@@ -41,7 +41,7 @@ export var MoveRowUpItem = function MoveRowUpItem(props) {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === 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_ROW, getSelectedRowIndexes(selectionRect), selectionRect.top - 1)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowUp(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow)) {

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

@@ -28,17 +28,17 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
     tableNode = _useSharedPluginState.tableNode,
     selection = _useSharedPluginState.selection;
   var tableMenuContext = useMemo(function () {
-    if (!selection || !tableNode) {
-      return {
-        editorView: editorView
-      };
+    // rely on selection plugins state to re-render the row/column menu, but use editorView.selection
+    // for cell menu state as the selection plugin won't update when text selection changes within cells
+    if (!tableNode || !editorView || !selection) {
+      return undefined;
     }
     var tableMap = TableMap.get(tableNode);
-    var selectionRect = getSelectionRect(selection);
+    var selectionRect = getSelectionRect(editorView.state.selection);
     var cellOps = {
       editorView: editorView,
-      canMergeCells: canMergeCellSelection(selection),
-      canSplitCell: canSplitCellSelection(selection),
+      canMergeCells: canMergeCellSelection(editorView.state.selection),
+      canSplitCell: canSplitCellSelection(editorView.state.selection),
       hasMergedCellsInTable: tableMap.hasMergedCells()
     };
     if (!selectionRect) {
@@ -52,7 +52,7 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
       isLastColumn: selectionRect.right === tableMap.width,
       selectedColumnCount: selectionRect.right - selectionRect.left
     });
-  }, [editorView, selection, tableNode]);
+  }, [editorView, tableNode, selection]);
   if (components.length === 0) {
     return null;
   }

package/dist/esm/ui/TableMenu/shared/consts.js

@@ -1,4 +1,4 @@
 export var TABLE_MENU_WIDTH = 280;
-export var TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-nested-dropdown-menu]';
+export var TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-component="menu"], [data-toolbar-nested-dropdown-menu]';
 export var TABLE_ROW = 'table-row';
 export var TABLE_COLUMN = 'table-column';

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

@@ -42,7 +42,7 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
       return;
     }
     setColorWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   }, [api, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

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

@@ -25,7 +25,7 @@ export var ClearCellsItem = function ClearCellsItem(_ref) {
     var _getPluginState = getPluginState(editorView.state),
       targetCellPosition = _getPluginState.targetCellPosition;
     emptyMultipleCellsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
-    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

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

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

package/dist/types/pm-plugins/commands/commands-with-analytics.d.ts

@@ -7,10 +7,8 @@ import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/t
 import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition, TableDirection } from '../../types';
-import type { TriggerType } from '../drag-and-drop/types';
+import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition } from '../../types';
 import type { ResizeStateWithAnalytics } from '../table-resizing/utils/types';
-export declare const toggleActiveTableMenuWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (direction: TableDirection, index: number, trigger?: TriggerType) => Command;
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition?: number) => Command;
 export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
+import type { PluginInjectionAPI } from '../../types';
+interface Props {
+    api: PluginInjectionAPI | undefined | null;
+    boundariesElement?: HTMLElement;
+    editorView: EditorView;
+    mountPoint?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    stickyHeaders?: RowStickyState;
+    tableWrapper?: HTMLElement;
+    targetCellPosition?: number;
+}
+interface FloatingTableMenuFunction {
+    (props: Props): React.JSX.Element | null;
+    displayName: string;
+}
+/**
+ * Row and column menu for table.
+ */
+declare const FloatingTableMenu: FloatingTableMenuFunction;
+export default FloatingTableMenu;

package/dist/types/ui/TableMenu/shared/consts.d.ts

@@ -1,4 +1,4 @@
 export declare const TABLE_MENU_WIDTH = 280;
-export declare const TABLE_MENU_SELECTOR = "[data-testid=\"column-handle-menu\"], [data-testid=\"row-handle-menu\"], [data-toolbar-nested-dropdown-menu]";
+export declare const TABLE_MENU_SELECTOR = "[data-testid=\"column-handle-menu\"], [data-testid=\"row-handle-menu\"], [data-toolbar-component=\"menu\"], [data-toolbar-nested-dropdown-menu]";
 export declare const TABLE_ROW = "table-row";
 export declare const TABLE_COLUMN = "table-column";

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

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

package/dist/types-ts4.5/pm-plugins/commands/commands-with-analytics.d.ts

@@ -7,10 +7,8 @@ import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/t
 import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition, TableDirection } from '../../types';
-import type { TriggerType } from '../drag-and-drop/types';
+import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition } from '../../types';
 import type { ResizeStateWithAnalytics } from '../table-resizing/utils/types';
-export declare const toggleActiveTableMenuWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (direction: TableDirection, index: number, trigger?: TriggerType) => Command;
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition?: number) => Command;
 export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;

package/dist/types-ts4.5/ui/FloatingTableMenu/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
+import type { PluginInjectionAPI } from '../../types';
+interface Props {
+    api: PluginInjectionAPI | undefined | null;
+    boundariesElement?: HTMLElement;
+    editorView: EditorView;
+    mountPoint?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    stickyHeaders?: RowStickyState;
+    tableWrapper?: HTMLElement;
+    targetCellPosition?: number;
+}
+interface FloatingTableMenuFunction {
+    (props: Props): React.JSX.Element | null;
+    displayName: string;
+}
+/**
+ * Row and column menu for table.
+ */
+declare const FloatingTableMenu: FloatingTableMenuFunction;
+export default FloatingTableMenu;

package/dist/types-ts4.5/ui/TableMenu/shared/consts.d.ts

@@ -1,4 +1,4 @@
 export declare const TABLE_MENU_WIDTH = 280;
-export declare const TABLE_MENU_SELECTOR = "[data-testid=\"column-handle-menu\"], [data-testid=\"row-handle-menu\"], [data-toolbar-nested-dropdown-menu]";
+export declare const TABLE_MENU_SELECTOR = "[data-testid=\"column-handle-menu\"], [data-testid=\"row-handle-menu\"], [data-toolbar-component=\"menu\"], [data-toolbar-nested-dropdown-menu]";
 export declare const TABLE_ROW = "table-row";
 export declare const TABLE_COLUMN = "table-column";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "23.3.4",
+	"version": "23.3.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^11.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^11.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^13.0.0",
-		"@atlaskit/editor-plugin-extension": "14.1.4",
+		"@atlaskit/editor-plugin-extension": "14.1.5",
 		"@atlaskit/editor-plugin-guideline": "^11.0.0",
 		"@atlaskit/editor-plugin-interaction": "^20.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^8.0.0",
@@ -60,12 +60,12 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^93.0.0",
+		"@atlaskit/tmp-editor-statsig": "^94.0.0",
 		"@atlaskit/toggle": "^16.1.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "patch:@compiled/react@npm%3A0.20.0#~/.yarn/patches/@compiled-react-npm-0.20.0-a771aa67a6.patch",
+		"@compiled/react": "^0.20.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
 		"classnames": "^2.2.5",
@@ -75,7 +75,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.7.0",
+		"@atlaskit/editor-common": "^115.8.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"