@atlaskit/editor-plugin-table 22.4.7 → 22.4.9

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/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';
@@ -65,10 +66,14 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     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/esm/ui/TableMenu/cell/getCellMenuComponents.js

@@ -0,0 +1,63 @@
+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 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_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_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,27 @@
+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).
+ */
+var shouldShowMergeCells = function shouldShowMergeCells(tableMenuContext) {
+  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canMergeCells) === true;
+};
+export var MergeCellsItem = function MergeCellsItem() {
+  var tableMenuContext = useTableMenuContext();
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  if (!shouldShowMergeCells(tableMenuContext)) {
+    return null;
+  }
+  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,27 @@
+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.
+ */
+var shouldShowSplitCell = function shouldShowSplitCell(tableMenuContext) {
+  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canSplitCell) === true;
+};
+export var SplitCellItem = function SplitCellItem() {
+  var tableMenuContext = useTableMenuContext();
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  if (!shouldShowSplitCell(tableMenuContext)) {
+    return null;
+  }
+  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_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/getColumnMenuComponents.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { AddColumnLeftItem } from './items/AddColumnLeftItem';
 import { AddColumnRightItem } from './items/AddColumnRightItem';
+import { ColumnBackgroundSection } from './items/ColumnBackgroundSection';
+import { ColumnToggleSection } from './items/ColumnToggleSection';
 import { DeleteColumnItem } from './items/DeleteColumnItem';
 import { DistributeColumnsItem } from './items/DistributeColumnsItem';
 import { HeaderColumnToggleItem } from './items/HeaderColumnToggleItem';
@@ -9,14 +11,6 @@ import { MoveColumnRightItem } from './items/MoveColumnRightItem';
 import { SortDecreasingItem } from './items/SortDecreasingItem';
 import { SortIncreasingItem } from './items/SortIncreasingItem';
 import { COLUMN_MENU, COLUMN_TOGGLE_SECTION, COLUMN_BACKGROUND_SECTION, COLUMN_SORT_SECTION, COLUMN_ADD_SECTION, COLUMN_DANGER_SECTION, COLUMN_SECTION_RANK, HEADER_COLUMN_TOGGLE_ITEM, SORT_INCREASING_ITEM, SORT_DECREASING_ITEM, ADD_COLUMN_LEFT_ITEM, ADD_COLUMN_RIGHT_ITEM, MOVE_COLUMN_RIGHT_ITEM, DISTRIBUTE_COLUMNS_ITEM, DELETE_COLUMN_ITEM, COLUMN_TOGGLE_SECTION_RANK, COLUMN_SORT_SECTION_RANK, COLUMN_ADD_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from './keys';
-
-/**
- * Returns the RegisterComponent[] array defining the column 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 getColumnMenuComponents = function getColumnMenuComponents() {
   return [
   // --- Menu surface ---
@@ -34,7 +28,7 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_SECTION_RANK[COLUMN_TOGGLE_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
+      return /*#__PURE__*/React.createElement(ColumnToggleSection, null, props.children);
     }
   }, {
     type: HEADER_COLUMN_TOGGLE_ITEM.type,
@@ -58,9 +52,7 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_SECTION_RANK[COLUMN_BACKGROUND_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        hasSeparator: true
-      }, props.children);
+      return /*#__PURE__*/React.createElement(ColumnBackgroundSection, null, props.children);
     }
   },
   // --- Sort section ---

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
+
+/**
+ * Background section sits directly below `ColumnToggleSection`. Its separator
+ * exists only to divide it from the toggle section; when the toggle section
+ * is hidden, the separator must drop too so we don't render a stray rule at
+ * the very top of the menu.
+ */
+export var ColumnBackgroundSection = function ColumnBackgroundSection(_ref) {
+  var children = _ref.children;
+  var tableMenuContext = useTableMenuContext();
+  var hasSeparator = shouldShowHeaderColumnToggle(tableMenuContext);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: hasSeparator
+  }, children);
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
+
+/**
+ * The toggle section currently contains only the Header column toggle. When
+ * that item is hidden, the whole section disappears so we don't render an
+ * empty wrapper (and so the section below can drop its leading separator).
+ */
+export var ColumnToggleSection = function ColumnToggleSection(_ref) {
+  var children = _ref.children;
+  var tableMenuContext = useTableMenuContext();
+  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+};

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

@@ -2,9 +2,20 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/** Distribute columns is only visible when more than one column is selected. */
+var shouldShowDistributeColumns = function shouldShowDistributeColumns(tableMenuContext) {
+  var _tableMenuContext$sel;
+  return ((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 0) > 1;
+};
 export var DistributeColumnsItem = function DistributeColumnsItem() {
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowDistributeColumns(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
       color: "currentColor",

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

@@ -3,10 +3,27 @@ import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/**
+ * Header column toggle is only visible when the first column is the entire
+ * selection.
+ *
+ * Exported so `ColumnToggleSection` (which can become empty) and
+ * `ColumnBackgroundSection` (which drops its leading separator alongside)
+ * can stay in lockstep with this rule without redefining it.
+ */
+export var shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(tableMenuContext) {
+  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn) === true && tableMenuContext.selectedColumnCount === 1;
+};
 export var HeaderColumnToggleItem = function HeaderColumnToggleItem() {
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(messages.headerColumn);
+  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,

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/column/items/SortDecreasingItem.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortDecreasingItem = function SortDecreasingItem() {
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    isDisabled: true,
+    isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       color: "currentColor",
       label: "",

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

@@ -2,11 +2,13 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ArrowUpIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortIncreasingItem = function SortIncreasingItem() {
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    isDisabled: true,
+    isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       color: "currentColor",
       label: "",

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

@@ -8,14 +8,6 @@ import { MoveRowDownItem } from './items/MoveRowDownItem';
 import { MoveRowUpItem } from './items/MoveRowUpItem';
 import { NumberedRowsToggleItem } from './items/NumberedRowsToggleItem';
 import { ROW_MENU, ROW_TOGGLE_SECTION, ROW_BACKGROUND_SECTION, ROW_ADD_SECTION, ROW_DANGER_SECTION, ROW_MENU_SECTION_RANK, HEADER_ROW_TOGGLE_ITEM, NUMBERED_ROWS_TOGGLE_ITEM, ADD_ROW_ABOVE_ITEM, ADD_ROW_BELOW_ITEM, MOVE_ROW_UP_ITEM, MOVE_ROW_DOWN_ITEM, DELETE_ROW_ITEM, ROW_TOGGLE_SECTION_RANK, ROW_ADD_SECTION_RANK, ROW_DANGER_SECTION_RANK } from './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.
- */
 export var getRowMenuComponents = function getRowMenuComponents() {
   return [
   // --- Menu surface ---

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

@@ -3,10 +3,20 @@ import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
+import { useTableMenuContext } from '../../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;
+};
 export var HeaderRowToggleItem = function HeaderRowToggleItem() {
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(messages.headerRow);
+  if (!shouldShowHeaderRowToggle(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,

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

@@ -4,13 +4,23 @@ import { moveRowDown, moveRowDownOld, tooltip } from '@atlaskit/editor-common/ke
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableRowMoveDownIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 var getMoveRowDownShortcut = function getMoveRowDownShortcut() {
   return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : 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);
+};
 export var MoveRowDownItem = function MoveRowDownItem() {
   var _getMoveRowDownShortc;
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowMoveRowDown(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
       color: "currentColor",

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

@@ -4,13 +4,23 @@ import { moveRowUp, moveRowUpOld, tooltip } from '@atlaskit/editor-common/keymap
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 var getMoveRowUpShortcut = function getMoveRowUpShortcut() {
   return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : 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);
+};
 export var MoveRowUpItem = function MoveRowUpItem() {
   var _getMoveRowUpShortcut;
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowMoveRowUp(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
       color: "currentColor",

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

@@ -1,27 +1,76 @@
 /* TableMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./TableMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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; }
 import React, { memo, useMemo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { Box } from '@atlaskit/primitives/compiled';
+import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
+import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
+import { TableMenuProvider } from './TableMenuContext';
 var tableMenuContainerStyles = {
   container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
 };
+var EMPTY_CONTEXT = {};
 export var TableMenu = /*#__PURE__*/memo(function (_ref) {
   var api = _ref.api,
+    editorView = _ref.editorView,
     surface = _ref.surface;
   var components = 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 = 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 = useMemo(function () {
+    if (!selection || !tableNode) {
+      return EMPTY_CONTEXT;
+    }
+    var tableMap = TableMap.get(tableNode);
+    var selectionRect = getSelectionRect(selection);
+    var cellOps = {
+      canMergeCells: canMergeCellSelection(selection),
+      canSplitCell: 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.createElement(Box, {
+  return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+  }, /*#__PURE__*/React.createElement(TableMenuProvider, {
+    value: tableMenuContext
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: tableMenuContainerStyles.container,
     testId: surface.key
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
-  }));
-});
+  }))));
+});
+TableMenu.displayName = 'TableMenu';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+var TableMenuContext = /*#__PURE__*/React.createContext(undefined);
+export var TableMenuProvider = TableMenuContext.Provider;
+export var useTableMenuContext = function useTableMenuContext() {
+  return React.useContext(TableMenuContext);
+};

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

@@ -1 +1,2 @@
-export var TABLE_MENU_WIDTH = 280;
+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]';

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()));
 };