@atlaskit/editor-plugin-table 22.4.7 → 22.4.9

package/dist/cjs/ui/TableMenu/row/getRowMenuComponents.js

@@ -15,13 +15,6 @@ var _MoveRowDownItem = require("./items/MoveRowDownItem");
 var _MoveRowUpItem = require("./items/MoveRowUpItem");
 var _NumberedRowsToggleItem = require("./items/NumberedRowsToggleItem");
 var _keys = require("./keys");
-/**
- * Returns the RegisterComponent[] array defining the row menu surface.
- *
- * This is a **UI-only stub** — all items are always visible with no conditional
- * logic and no wired actions. Functional behaviour (actions, conditional visibility)
- * will be connected in follow-up tickets.
- */
 var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuComponents() {
   return [
   // --- Menu surface ---

package/dist/cjs/ui/TableMenu/row/items/HeaderRowToggleItem.js

@@ -10,10 +10,19 @@ var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
+var _TableMenuContext = require("../../shared/TableMenuContext");
+/** Header row toggle is only visible when the first row is the entire selection. */
+var shouldShowHeaderRowToggle = function shouldShowHeaderRowToggle(tableMenuContext) {
+  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow) === true && tableMenuContext.selectedRowCount === 1;
+};
 var HeaderRowToggleItem = exports.HeaderRowToggleItem = function HeaderRowToggleItem() {
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(_messages.tableMessages.headerRow);
+  if (!shouldShowHeaderRowToggle(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
       label: label,

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

@@ -11,13 +11,23 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _TableMenuContext = require("../../shared/TableMenuContext");
 var getMoveRowDownShortcut = function getMoveRowDownShortcut() {
   return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowDown : _keymaps.moveRowDownOld);
 };
+
+/** Move row down is hidden when the selection includes the last row (cannot move further down). */
+var shouldShowMoveRowDown = function shouldShowMoveRowDown(tableMenuContext) {
+  return !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isLastRow);
+};
 var MoveRowDownItem = exports.MoveRowDownItem = function MoveRowDownItem() {
   var _getMoveRowDownShortc;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowMoveRowDown(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveDownIcon, {
       color: "currentColor",

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

@@ -11,13 +11,23 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _TableMenuContext = require("../../shared/TableMenuContext");
 var getMoveRowUpShortcut = function getMoveRowUpShortcut() {
   return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowUp : _keymaps.moveRowUpOld);
 };
+
+/** Move row up is hidden when the selection includes row 0 (cannot move further up). */
+var shouldShowMoveRowUp = function shouldShowMoveRowUp(tableMenuContext) {
+  return !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isFirstRow);
+};
 var MoveRowUpItem = exports.MoveRowUpItem = function MoveRowUpItem() {
   var _getMoveRowUpShortcut;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowMoveRowUp(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveUpIcon, {
       color: "currentColor",

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

@@ -1,6 +1,7 @@
 /* TableMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,28 +9,77 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableMenu = void 0;
 require("./TableMenu.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _splitCell = require("../../../pm-plugins/commands/split-cell");
+var _merge = require("../../../pm-plugins/transforms/merge");
+var _TableMenuContext = require("./TableMenuContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tableMenuContainerStyles = {
   container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
 };
+var EMPTY_CONTEXT = {};
 var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var api = _ref.api,
+    editorView = _ref.editorView,
     surface = _ref.surface;
   var components = (0, _react.useMemo)(function () {
     var _api$uiControlRegistr, _api$uiControlRegistr2;
     return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   }, [api, surface.key]);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table', 'selection'], function (states) {
+      var _states$tableState, _states$selectionStat;
+      return {
+        tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode,
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    tableNode = _useSharedPluginState.tableNode,
+    selection = _useSharedPluginState.selection;
+  var tableMenuContext = (0, _react.useMemo)(function () {
+    if (!selection || !tableNode) {
+      return EMPTY_CONTEXT;
+    }
+    var tableMap = _tableMap.TableMap.get(tableNode);
+    var selectionRect = (0, _utils.getSelectionRect)(selection);
+    var cellOps = {
+      canMergeCells: (0, _merge.canMergeCellSelection)(selection),
+      canSplitCell: (0, _splitCell.canSplitCellSelection)(selection),
+      hasMergedCellsInTable: tableMap.hasMergedCells()
+    };
+    if (!selectionRect) {
+      return cellOps;
+    }
+    return _objectSpread(_objectSpread({}, cellOps), {}, {
+      isFirstRow: selectionRect.top === 0,
+      isLastRow: selectionRect.bottom === tableMap.height,
+      selectedRowCount: selectionRect.bottom - selectionRect.top,
+      isFirstColumn: selectionRect.left === 0,
+      isLastColumn: selectionRect.right === tableMap.width,
+      selectedColumnCount: selectionRect.right - selectionRect.left
+    });
+  }, [selection, tableNode]);
   if (components.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  return /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+  }, /*#__PURE__*/_react.default.createElement(_TableMenuContext.TableMenuProvider, {
+    value: tableMenuContext
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: tableMenuContainerStyles.container,
     testId: surface.key
   }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     surface: surface,
     components: components
-  }));
-});
+  }))));
+});
+TableMenu.displayName = 'TableMenu';

package/dist/cjs/ui/TableMenu/shared/TableMenuContext.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableMenuContext = exports.TableMenuProvider = void 0;
+var _react = _interopRequireDefault(require("react"));
+var TableMenuContext = /*#__PURE__*/_react.default.createContext(undefined);
+var TableMenuProvider = exports.TableMenuProvider = TableMenuContext.Provider;
+var useTableMenuContext = exports.useTableMenuContext = function useTableMenuContext() {
+  return _react.default.useContext(TableMenuContext);
+};

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

@@ -3,5 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_MENU_WIDTH = void 0;
-var TABLE_MENU_WIDTH = exports.TABLE_MENU_WIDTH = 280;
+exports.TABLE_MENU_WIDTH = exports.TABLE_MENU_SELECTOR = void 0;
+var TABLE_MENU_WIDTH = exports.TABLE_MENU_WIDTH = 280;
+var TABLE_MENU_SELECTOR = exports.TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-nested-dropdown-menu]';

package/dist/cjs/ui/TableMenu/shared/getSharedItems.js

@@ -6,38 +6,47 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSharedItems = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _keys = require("../column/keys");
-var _keys2 = require("../row/keys");
+var _keys = require("../cell/keys");
+var _keys2 = require("../column/keys");
+var _keys3 = require("../row/keys");
 var _BackgroundColorItem = require("./items/BackgroundColorItem");
 var _ClearCellsItem = require("./items/ClearCellsItem");
-var _keys3 = require("./keys");
+var _keys4 = require("./keys");
 var getSharedItems = exports.getSharedItems = function getSharedItems() {
   return [{
-    type: _keys3.BACKGROUND_COLOR_ITEM.type,
-    key: _keys3.BACKGROUND_COLOR_ITEM.key,
+    type: _keys4.BACKGROUND_COLOR_ITEM.type,
+    key: _keys4.BACKGROUND_COLOR_ITEM.key,
     parents: [{
-      type: _keys2.ROW_BACKGROUND_SECTION.type,
-      key: _keys2.ROW_BACKGROUND_SECTION.key,
-      rank: _keys2.ROW_BACKGROUND_SECTION_RANK[_keys3.BACKGROUND_COLOR_ITEM.key]
+      type: _keys3.ROW_BACKGROUND_SECTION.type,
+      key: _keys3.ROW_BACKGROUND_SECTION.key,
+      rank: _keys3.ROW_BACKGROUND_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
     }, {
-      type: _keys.COLUMN_BACKGROUND_SECTION.type,
-      key: _keys.COLUMN_BACKGROUND_SECTION.key,
-      rank: _keys.COLUMN_BACKGROUND_SECTION_RANK[_keys3.BACKGROUND_COLOR_ITEM.key]
+      type: _keys2.COLUMN_BACKGROUND_SECTION.type,
+      key: _keys2.COLUMN_BACKGROUND_SECTION.key,
+      rank: _keys2.COLUMN_BACKGROUND_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
+    }, {
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, null);
     }
   }, {
-    type: _keys3.CLEAR_CELLS_ITEM.type,
-    key: _keys3.CLEAR_CELLS_ITEM.key,
+    type: _keys4.CLEAR_CELLS_ITEM.type,
+    key: _keys4.CLEAR_CELLS_ITEM.key,
     parents: [{
-      type: _keys2.ROW_DANGER_SECTION.type,
-      key: _keys2.ROW_DANGER_SECTION.key,
-      rank: _keys2.ROW_DANGER_SECTION_RANK[_keys3.CLEAR_CELLS_ITEM.key]
+      type: _keys3.ROW_DANGER_SECTION.type,
+      key: _keys3.ROW_DANGER_SECTION.key,
+      rank: _keys3.ROW_DANGER_SECTION_RANK[_keys4.CLEAR_CELLS_ITEM.key]
+    }, {
+      type: _keys2.COLUMN_DANGER_SECTION.type,
+      key: _keys2.COLUMN_DANGER_SECTION.key,
+      rank: _keys2.COLUMN_DANGER_SECTION_RANK[_keys4.CLEAR_CELLS_ITEM.key]
     }, {
-      type: _keys.COLUMN_DANGER_SECTION.type,
-      key: _keys.COLUMN_DANGER_SECTION.key,
-      rank: _keys.COLUMN_DANGER_SECTION_RANK[_keys3.CLEAR_CELLS_ITEM.key]
+      type: _keys.CELL_DANGER_SECTION.type,
+      key: _keys.CELL_DANGER_SECTION.key,
+      rank: _keys.CELL_DANGER_SECTION_RANK[_keys4.CLEAR_CELLS_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/_react.default.createElement(_ClearCellsItem.ClearCellsItem, null);

package/dist/cjs/ui/TableMenu/shared/getTableMenuComponents.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTableMenuComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _getCellMenuComponents = require("../cell/getCellMenuComponents");
 var _getColumnMenuComponents = require("../column/getColumnMenuComponents");
 var _getRowMenuComponents = require("../row/getRowMenuComponents");
 var _getSharedItems = require("./getSharedItems");
 var getTableMenuComponents = exports.getTableMenuComponents = function getTableMenuComponents() {
-  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)()), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)()));
+  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)()), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)()));
 };

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

@@ -18,6 +18,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../pm-plugins/commands");
 var _pluginFactory = require("../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../pm-plugins/plugin-factory");
@@ -29,6 +30,7 @@ var _columnControls = require("../pm-plugins/utils/column-controls");
 var _dom = require("../pm-plugins/utils/dom");
 var _getAllowAddColumnCustomStep = require("../pm-plugins/utils/get-allow-add-column-custom-step");
 var _types = require("../types");
+var _consts = require("./TableMenu/shared/consts");
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 };
@@ -44,12 +46,15 @@ var isFocusingDragHandles = function isFocusingDragHandles(event) {
 var isFocusingDragHandlesClickableZone = function isFocusingDragHandlesClickableZone(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.classList.contains(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE);
 };
+var isFocusingTableMenu = function isFocusingTableMenu(event) {
+  return (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) && event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && Boolean(event.relatedTarget.closest(_consts.TABLE_MENU_SELECTOR));
+};
 var handleBlur = exports.handleBlur = function handleBlur(view, event) {
   var state = view.state,
     dispatch = view.dispatch;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if ((0, _browser.getBrowserInfo)().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
+  if ((0, _browser.getBrowserInfo)().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event) && !isFocusingTableMenu(event)) {
     (0, _commands.setEditorFocus)(false)(state, dispatch);
   }
   event.preventDefault();

package/dist/es2019/pm-plugins/commands/split-cell.js

@@ -1,5 +1,21 @@
-import { splitCellWithType } from '@atlaskit/editor-tables/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { cellWrapping, splitCellWithType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../plugin-factory';
+export const canSplitCellSelection = selection => {
+  let cellNode;
+  if (!(selection instanceof CellSelection)) {
+    cellNode = cellWrapping(selection.$from);
+    if (!cellNode) {
+      return false;
+    }
+  } else {
+    if (selection.$anchorCell.pos !== selection.$headCell.pos) {
+      return false;
+    }
+    cellNode = selection.$anchorCell.nodeAfter;
+  }
+  return Boolean(cellNode && (cellNode.attrs.colspan !== 1 || cellNode.attrs.rowspan !== 1));
+};
 
 /**
  * We need to split cell keeping the right type of cell given current table configuration.

package/dist/es2019/pm-plugins/transforms/merge.js

@@ -116,10 +116,7 @@ export function mergeCells(tr) {
   }
   return tr.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable).setSelection(Selection.near(tr.doc.resolve((mergedCellPos || 0) + table.start)));
 }
-export function canMergeCells(tr) {
-  const {
-    selection
-  } = tr;
+export function canMergeCellSelection(selection) {
   if (!(selection instanceof CellSelection) || selection.$anchorCell.pos === selection.$headCell.pos) {
     return false;
   }
@@ -134,6 +131,9 @@ export function canMergeCells(tr) {
   }
   return true;
 }
+export function canMergeCells(tr) {
+  return canMergeCellSelection(tr.selection);
+}
 function isEmptyCell(cell) {
   const {
     content

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

@@ -52,6 +52,11 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       state,
       dispatch
     } = editorView;
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      toggleContextualMenu()(state, dispatch);
+      return;
+    }
+
     // Clicking outside the dropdown handles toggling the menu closed
     // (otherwise these two toggles combat each other).
     // In the event a user clicks the chevron button again

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

@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
+import { setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
+import { TableCssClassName as ClassName } from '../../types';
+import { CELL_MENU } from '../TableMenu/cell/keys';
+import { TableMenu } from '../TableMenu/shared/TableMenu';
+export const CellMenuPopup = ({
+  api,
+  editorView,
+  isCellMenuOpenByKeyboard,
+  isOpen,
+  targetCellRef
+}) => {
+  const tableMenuRef = useRef(null);
+  const {
+    currentUserIntent
+  } = useSharedPluginStateWithSelector(api, ['userIntent'], states => {
+    var _states$userIntentSta;
+    return {
+      currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+    };
+  });
+  const closeCellMenu = useCallback(() => {
+    const {
+      state,
+      dispatch,
+      dom
+    } = editorView;
+    toggleContextualMenu()(state, dispatch);
+    if (isCellMenuOpenByKeyboard) {
+      setFocusToCellMenu(false)(state, dispatch);
+      dom.focus();
+    }
+  }, [editorView, isCellMenuOpenByKeyboard]);
+  useEffect(() => {
+    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
+      return;
+    }
+    closeCellMenu();
+  }, [closeCellMenu, currentUserIntent, isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    const ownerDocument = targetCellRef.ownerDocument;
+    const handlePointerDown = event => {
+      var _tableMenuRef$current;
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
+        return;
+      }
+      const cellMenuButton = ownerDocument.querySelector(`.${ClassName.CONTEXTUAL_MENU_BUTTON}`);
+      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
+        return;
+      }
+      closeCellMenu();
+    };
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        closeCellMenu();
+      }
+    };
+    const unbindPointerDown = bind(ownerDocument, {
+      type: 'pointerdown',
+      listener: handlePointerDown,
+      options: {
+        capture: true
+      }
+    });
+    const unbindKeyDown = bind(ownerDocument, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: true
+      }
+    });
+    return () => {
+      unbindPointerDown();
+      unbindKeyDown();
+    };
+  }, [closeCellMenu, isOpen, targetCellRef]);
+  return /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "tableContextualMenuPopupOpen"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tableMenuRef
+  }, /*#__PURE__*/React.createElement(TableMenu, {
+    api: api,
+    editorView: editorView,
+    surface: CELL_MENU
+  })));
+};

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

@@ -8,9 +8,11 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
-
+import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
+import { CellMenuPopup } from './CellMenuPopup';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ContextualMenu from './ContextualMenu';
@@ -68,7 +70,7 @@ const FloatingContextualMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: tablePopupMenuFitHeight,
-    fitWidth: contextualMenuDropdownWidthDnD
+    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? TABLE_MENU_WIDTH : contextualMenuDropdownWidthDnD
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
@@ -78,7 +80,15 @@ const FloatingContextualMenu = ({
     ,
     offset: [-7, 0],
     stick: true
-  }, jsx("div", {
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? jsx(CellMenuPopup, {
+    api: api,
+    editorView: editorView,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isOpen: isOpen,
+    targetCellRef: targetCellRef
+  }) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("div", {
     css: tablePopupStyles()
   }, jsx(ContextualMenu, {
     editorView: editorView

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

@@ -1,5 +1,6 @@
 import React from 'react';
 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';
@@ -66,10 +67,14 @@ const FloatingDragMenu = ({
     forcePlacement: true,
     offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TableMenu, {
+  }, 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: direction === 'row' ? ROW_MENU : COLUMN_MENU
-  }) : /*#__PURE__*/React.createElement(DragMenu, {
+  })) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,

package/dist/es2019/ui/TableMenu/cell/getCellMenuComponents.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { MergeCellsItem } from './items/MergeCellsItem';
+import { SplitCellItem } from './items/SplitCellItem';
+import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
+export const getCellMenuComponents = () => [
+// --- Menu surface ---
+{
+  type: CELL_MENU.type,
+  key: CELL_MENU.key
+},
+// --- Main action section (Background color, Merge cells, Split cell) ---
+{
+  type: CELL_ACTION_SECTION.type,
+  key: CELL_ACTION_SECTION.key,
+  parents: [{
+    type: CELL_MENU.type,
+    key: CELL_MENU.key,
+    rank: CELL_MENU_RANK[CELL_ACTION_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: MERGE_CELLS_ITEM.type,
+  key: MERGE_CELLS_ITEM.key,
+  parents: [{
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[MERGE_CELLS_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MergeCellsItem, null)
+}, {
+  type: SPLIT_CELL_ITEM.type,
+  key: SPLIT_CELL_ITEM.key,
+  parents: [{
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[SPLIT_CELL_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(SplitCellItem, null)
+},
+// --- Danger section (Clear cell) ---
+{
+  type: CELL_DANGER_SECTION.type,
+  key: CELL_DANGER_SECTION.key,
+  parents: [{
+    type: CELL_MENU.type,
+    key: CELL_MENU.key,
+    rank: CELL_MENU_RANK[CELL_DANGER_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}];

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { TableCellMergeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/**
+ * Merge cells is only visible when the active selection can actually be merged
+ * (multi-cell, non-overlapping).
+ */
+const shouldShowMergeCells = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canMergeCells) === true;
+export const MergeCellsItem = () => {
+  const tableMenuContext = useTableMenuContext();
+  const {
+    formatMessage
+  } = useIntl();
+  if (!shouldShowMergeCells(tableMenuContext)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableCellMergeIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.mergeCells));
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { TableCellSplitIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/**
+ * Split cell is only visible when the active selection sits in a cell whose
+ * `rowspan` or `colspan` is greater than one.
+ */
+const shouldShowSplitCell = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canSplitCell) === true;
+export const SplitCellItem = () => {
+  const tableMenuContext = useTableMenuContext();
+  const {
+    formatMessage
+  } = useIntl();
+  if (!shouldShowSplitCell(tableMenuContext)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableCellSplitIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.splitCell));
+};