@atlaskit/editor-plugin-table 22.4.6 → 22.4.8

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/TableMenu/cell/getCellMenuComponents.js

@@ -0,0 +1,61 @@
+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_SECTION_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
+
+/**
+ * Returns the RegisterComponent[] array defining the cell contextual 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.
+ */
+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_SECTION_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_SECTION_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,15 @@
+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';
+export const MergeCellsItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  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,15 @@
+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';
+export const SplitCellItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableCellSplitIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.splitCell));
+};

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

@@ -0,0 +1,42 @@
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
+
+// --- Menu surface ---
+
+export const CELL_MENU = {
+  type: 'menu',
+  key: 'cell-contextual-menu'
+};
+
+// --- Sections ---
+
+export const CELL_ACTION_SECTION = {
+  type: 'menu-section',
+  key: 'cell-action-section'
+};
+export const CELL_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'cell-danger-section'
+};
+export const CELL_MENU_SECTION_RANK = {
+  [CELL_ACTION_SECTION.key]: 100,
+  [CELL_DANGER_SECTION.key]: 200
+};
+export const MERGE_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'merge-cells'
+};
+export const SPLIT_CELL_ITEM = {
+  type: 'menu-item',
+  key: 'split-cell'
+};
+
+// --- Item ranks within their sections ---
+
+export const CELL_ACTION_SECTION_RANK = {
+  [BACKGROUND_COLOR_ITEM.key]: 100,
+  [MERGE_CELLS_ITEM.key]: 200,
+  [SPLIT_CELL_ITEM.key]: 300
+};
+export const CELL_DANGER_SECTION_RANK = {
+  [CLEAR_CELLS_ITEM.key]: 100
+};

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

@@ -1,12 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { moveColumnRight, moveColumnRightOld, tooltip } from '@atlaskit/editor-common/keymaps';
+import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-const getMoveColumnRightShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveColumnRight : moveColumnRightOld);
 export const MoveColumnRightItem = () => {
-  var _getMoveColumnRightSh;
+  var _tooltip;
   const {
     formatMessage
   } = useIntl();
@@ -17,7 +15,7 @@ export const MoveColumnRightItem = () => {
       size: "small"
     }),
     elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveColumnRightSh = getMoveColumnRightShortcut()) !== null && _getMoveColumnRightSh !== void 0 ? _getMoveColumnRightSh : ''
+      shortcut: (_tooltip = tooltip(moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.moveColumnRight, {
     0: 1

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

@@ -25,4 +25,5 @@ export const TableMenu = /*#__PURE__*/memo(({
     surface: surface,
     components: components
   }));
-});
+});
+TableMenu.displayName = 'TableMenu';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_ACTION_SECTION_RANK, CELL_DANGER_SECTION_RANK } from '../cell/keys';
 import { COLUMN_BACKGROUND_SECTION, COLUMN_DANGER_SECTION, COLUMN_BACKGROUND_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from '../column/keys';
 import { ROW_BACKGROUND_SECTION, ROW_DANGER_SECTION, ROW_BACKGROUND_SECTION_RANK, ROW_DANGER_SECTION_RANK } from '../row/keys';
 import { BackgroundColorItem } from './items/BackgroundColorItem';
@@ -15,6 +16,10 @@ export const getSharedItems = () => [{
     type: COLUMN_BACKGROUND_SECTION.type,
     key: COLUMN_BACKGROUND_SECTION.key,
     rank: COLUMN_BACKGROUND_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
+  }, {
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
   }],
   component: () => /*#__PURE__*/React.createElement(BackgroundColorItem, null)
 }, {
@@ -28,6 +33,10 @@ export const getSharedItems = () => [{
     type: COLUMN_DANGER_SECTION.type,
     key: COLUMN_DANGER_SECTION.key,
     rank: COLUMN_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
+  }, {
+    type: CELL_DANGER_SECTION.type,
+    key: CELL_DANGER_SECTION.key,
+    rank: CELL_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
   }],
   component: () => /*#__PURE__*/React.createElement(ClearCellsItem, null)
 }];

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

@@ -1,4 +1,5 @@
+import { getCellMenuComponents } from '../cell/getCellMenuComponents';
 import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
-export const getTableMenuComponents = () => [...getRowMenuComponents(), ...getColumnMenuComponents(), ...getSharedItems()];
+export const getTableMenuComponents = () => [...getRowMenuComponents(), ...getColumnMenuComponents(), ...getCellMenuComponents(), ...getSharedItems()];

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

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { mapChildren } from '@atlaskit/editor-common/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var isIsolating = function isIsolating(node) {
   return !!node.type.spec.isolating;
 };
@@ -20,7 +21,7 @@ export var containsHeaderColumn = function containsHeaderColumn(table) {
       if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
         return false;
       }
-    } catch (e) {
+    } catch (_unused) {
       return false;
     }
   }
@@ -127,11 +128,20 @@ var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
     return rowspan > 1;
   });
 };
+var anyChildCellMergedAcrossColumn = function anyChildCellMergedAcrossColumn(node) {
+  return mapChildren(node, function (child) {
+    return child.attrs.colspan || 0;
+  }).some(function (colspan) {
+    return colspan > 1;
+  });
+};
 
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells
- *  - no table cells have been have merged with other table row cells
+ *  - no table cells have been merged with other table row cells (rowspan > 1)
+ *  - no table cells have been merged with other table column cells (colspan > 1),
+ *    (colspan check gated behind platform_editor_fix_sticky_header_malfunction)
  *
  * @param node ProseMirror node
  * @returns boolean if it meets definition
@@ -140,6 +150,11 @@ export var supportedHeaderRow = function supportedHeaderRow(node) {
   var allHeaders = mapChildren(node, function (child) {
     return child.type.name === 'tableHeader';
   }).every(Boolean);
+  if (expValEquals('platform_editor_fix_sticky_header_malfunction', 'isEnabled', true)) {
+    var someMergedAcrossRow = anyChildCellMergedAcrossRow(node);
+    var someMergedAcrossColumn = anyChildCellMergedAcrossColumn(node);
+    return allHeaders && !someMergedAcrossRow && !someMergedAcrossColumn;
+  }
   var someMerged = anyChildCellMergedAcrossRow(node);
   return allHeaders && !someMerged;
 };

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

@@ -46,6 +46,11 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   var handleClick = function handleClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
+    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/esm/ui/FloatingContextualMenu/CellMenuPopup.js

@@ -0,0 +1,95 @@
+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 var CellMenuPopup = function CellMenuPopup(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
+    isOpen = _ref.isOpen,
+    targetCellRef = _ref.targetCellRef;
+  var tableMenuRef = useRef(null);
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['userIntent'], function (states) {
+      var _states$userIntentSta;
+      return {
+        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+      };
+    }),
+    currentUserIntent = _useSharedPluginState.currentUserIntent;
+  var closeCellMenu = useCallback(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch,
+      dom = editorView.dom;
+    toggleContextualMenu()(state, dispatch);
+    if (isCellMenuOpenByKeyboard) {
+      setFocusToCellMenu(false)(state, dispatch);
+      dom.focus();
+    }
+  }, [editorView, isCellMenuOpenByKeyboard]);
+  useEffect(function () {
+    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
+      return;
+    }
+    closeCellMenu();
+  }, [closeCellMenu, currentUserIntent, isOpen]);
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    var ownerDocument = targetCellRef.ownerDocument;
+    var handlePointerDown = function handlePointerDown(event) {
+      var _tableMenuRef$current;
+      var target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
+        return;
+      }
+      var cellMenuButton = ownerDocument.querySelector(".".concat(ClassName.CONTEXTUAL_MENU_BUTTON));
+      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
+        return;
+      }
+      closeCellMenu();
+    };
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        closeCellMenu();
+      }
+    };
+    var unbindPointerDown = bind(ownerDocument, {
+      type: 'pointerdown',
+      listener: handlePointerDown,
+      options: {
+        capture: true
+      }
+    });
+    var unbindKeyDown = bind(ownerDocument, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: true
+      }
+    });
+    return function () {
+      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,
+    surface: CELL_MENU
+  })));
+};

package/dist/esm/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';
@@ -64,7 +66,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     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.
     ,
@@ -74,7 +76,15 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     ,
     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/esm/ui/TableMenu/cell/getCellMenuComponents.js

@@ -0,0 +1,71 @@
+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_SECTION_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
+
+/**
+ * Returns the RegisterComponent[] array defining the cell contextual 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.
+ */
+export var getCellMenuComponents = function getCellMenuComponents() {
+  return [
+  // --- 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_SECTION_RANK[CELL_ACTION_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__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: function component() {
+      return /*#__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: function component() {
+      return /*#__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_SECTION_RANK[CELL_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }];
+};

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

@@ -0,0 +1,14 @@
+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';
+export var MergeCellsItem = function MergeCellsItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableCellMergeIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.mergeCells));
+};

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

@@ -0,0 +1,14 @@
+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';
+export var SplitCellItem = function SplitCellItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableCellSplitIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.splitCell));
+};

package/dist/esm/ui/TableMenu/cell/keys.js

@@ -0,0 +1,34 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
+
+// --- Menu surface ---
+
+export var CELL_MENU = {
+  type: 'menu',
+  key: 'cell-contextual-menu'
+};
+
+// --- Sections ---
+
+export var CELL_ACTION_SECTION = {
+  type: 'menu-section',
+  key: 'cell-action-section'
+};
+export var CELL_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'cell-danger-section'
+};
+export var CELL_MENU_SECTION_RANK = _defineProperty(_defineProperty({}, CELL_ACTION_SECTION.key, 100), CELL_DANGER_SECTION.key, 200);
+export var MERGE_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'merge-cells'
+};
+export var SPLIT_CELL_ITEM = {
+  type: 'menu-item',
+  key: 'split-cell'
+};
+
+// --- Item ranks within their sections ---
+
+export var CELL_ACTION_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100), MERGE_CELLS_ITEM.key, 200), SPLIT_CELL_ITEM.key, 300);
+export var CELL_DANGER_SECTION_RANK = _defineProperty({}, CLEAR_CELLS_ITEM.key, 100);

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

@@ -1,14 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { moveColumnRight, moveColumnRightOld, tooltip } from '@atlaskit/editor-common/keymaps';
+import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-var getMoveColumnRightShortcut = function getMoveColumnRightShortcut() {
-  return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveColumnRight : moveColumnRightOld);
-};
 export var MoveColumnRightItem = function MoveColumnRightItem() {
-  var _getMoveColumnRightSh;
+  var _tooltip;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
@@ -18,7 +14,7 @@ export var MoveColumnRightItem = function MoveColumnRightItem() {
       size: "small"
     }),
     elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveColumnRightSh = getMoveColumnRightShortcut()) !== null && _getMoveColumnRightSh !== void 0 ? _getMoveColumnRightSh : ''
+      shortcut: (_tooltip = tooltip(moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.moveColumnRight, {
     0: 1

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

@@ -24,4 +24,5 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
     surface: surface,
     components: components
   }));
-});
+});
+TableMenu.displayName = 'TableMenu';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_ACTION_SECTION_RANK, CELL_DANGER_SECTION_RANK } from '../cell/keys';
 import { COLUMN_BACKGROUND_SECTION, COLUMN_DANGER_SECTION, COLUMN_BACKGROUND_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from '../column/keys';
 import { ROW_BACKGROUND_SECTION, ROW_DANGER_SECTION, ROW_BACKGROUND_SECTION_RANK, ROW_DANGER_SECTION_RANK } from '../row/keys';
 import { BackgroundColorItem } from './items/BackgroundColorItem';
@@ -16,6 +17,10 @@ export var getSharedItems = function getSharedItems() {
       type: COLUMN_BACKGROUND_SECTION.type,
       key: COLUMN_BACKGROUND_SECTION.key,
       rank: COLUMN_BACKGROUND_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
+    }, {
+      type: CELL_ACTION_SECTION.type,
+      key: CELL_ACTION_SECTION.key,
+      rank: CELL_ACTION_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(BackgroundColorItem, null);
@@ -31,6 +36,10 @@ export var getSharedItems = function getSharedItems() {
       type: COLUMN_DANGER_SECTION.type,
       key: COLUMN_DANGER_SECTION.key,
       rank: COLUMN_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
+    }, {
+      type: CELL_DANGER_SECTION.type,
+      key: CELL_DANGER_SECTION.key,
+      rank: CELL_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(ClearCellsItem, null);

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

@@ -1,7 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { getCellMenuComponents } from '../cell/getCellMenuComponents';
 import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
 export var getTableMenuComponents = function getTableMenuComponents() {
-  return [].concat(_toConsumableArray(getRowMenuComponents()), _toConsumableArray(getColumnMenuComponents()), _toConsumableArray(getSharedItems()));
+  return [].concat(_toConsumableArray(getRowMenuComponents()), _toConsumableArray(getColumnMenuComponents()), _toConsumableArray(getCellMenuComponents()), _toConsumableArray(getSharedItems()));
 };