@atlaskit/editor-plugin-table 22.4.8 → 22.4.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.4.9
+
+### Patch Changes
+
+- [`0091cbd21d8f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0091cbd21d8f7) -
+  [ux] Add conditional visibility to row, column, and cell handle menu items behind the
+  `platform_editor_table_menu_updates` experiment, so menu surfaces only show options that apply to
+  the current selection.
+- Updated dependencies
+
 ## 22.4.8
 
 ### Patch Changes

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

@@ -3,9 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.splitCell = void 0;
+exports.splitCell = exports.canSplitCellSelection = void 0;
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _pluginFactory = require("../plugin-factory");
+var canSplitCellSelection = exports.canSplitCellSelection = function canSplitCellSelection(selection) {
+  var cellNode;
+  if (!(selection instanceof _cellSelection.CellSelection)) {
+    cellNode = (0, _utils.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.
  * We are using editor-tables splitCellWithType that allows you to choose what cell type should be.

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

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.canMergeCellSelection = canMergeCellSelection;
 exports.canMergeCells = canMergeCells;
 exports.mergeCells = mergeCells;
 exports.mergeEmptyColumns = mergeEmptyColumns;
@@ -121,8 +122,7 @@ function mergeCells(tr) {
   }
   return tr.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable).setSelection(_state.Selection.near(tr.doc.resolve((mergedCellPos || 0) + table.start)));
 }
-function canMergeCells(tr) {
-  var selection = tr.selection;
+function canMergeCellSelection(selection) {
   if (!(selection instanceof _cellSelection.CellSelection) || selection.$anchorCell.pos === selection.$headCell.pos) {
     return false;
   }
@@ -137,6 +137,9 @@ function canMergeCells(tr) {
   }
   return true;
 }
+function canMergeCells(tr) {
+  return canMergeCellSelection(tr.selection);
+}
 function isEmptyCell(cell) {
   var content = cell.content;
   return content.childCount === 1 && content.firstChild && content.firstChild.isTextblock && content.firstChild.childCount === 0;

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

@@ -98,6 +98,7 @@ var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
     ref: tableMenuRef
   }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
     api: api,
+    editorView: editorView,
     surface: _keys.CELL_MENU
   })));
 };

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -72,10 +73,14 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     forcePlacement: true,
     offset: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
+  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
     api: api,
+    userIntent: "tableDragMenuPopupOpen"
+  }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
+    api: api,
+    editorView: editorView,
     surface: direction === 'row' ? _keys2.ROW_MENU : _keys.COLUMN_MENU
-  }) : /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
+  })) : /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,

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

@@ -10,13 +10,6 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _MergeCellsItem = require("./items/MergeCellsItem");
 var _SplitCellItem = require("./items/SplitCellItem");
 var _keys = require("./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.
- */
 var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenuComponents() {
   return [
   // --- Menu surface ---
@@ -31,7 +24,7 @@ var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenu
     parents: [{
       type: _keys.CELL_MENU.type,
       key: _keys.CELL_MENU.key,
-      rank: _keys.CELL_MENU_SECTION_RANK[_keys.CELL_ACTION_SECTION.key]
+      rank: _keys.CELL_MENU_RANK[_keys.CELL_ACTION_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
@@ -66,7 +59,7 @@ var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenu
     parents: [{
       type: _keys.CELL_MENU.type,
       key: _keys.CELL_MENU.key,
-      rank: _keys.CELL_MENU_SECTION_RANK[_keys.CELL_DANGER_SECTION.key]
+      rank: _keys.CELL_MENU_RANK[_keys.CELL_DANGER_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {

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

@@ -9,9 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _TableMenuContext = require("../../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;
+};
 var MergeCellsItem = exports.MergeCellsItem = function MergeCellsItem() {
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowMergeCells(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableCellMergeIcon, {
       label: "",

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

@@ -9,9 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _TableMenuContext = require("../../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;
+};
 var SplitCellItem = exports.SplitCellItem = function SplitCellItem() {
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowSplitCell(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableCellSplitIcon, {
       label: "",

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPLIT_CELL_ITEM = exports.MERGE_CELLS_ITEM = exports.CELL_MENU_SECTION_RANK = exports.CELL_MENU = exports.CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION = exports.CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION = void 0;
+exports.SPLIT_CELL_ITEM = exports.MERGE_CELLS_ITEM = exports.CELL_MENU_RANK = exports.CELL_MENU = exports.CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION = exports.CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _keys = require("../shared/keys");
 // --- Menu surface ---
@@ -24,7 +24,7 @@ var CELL_DANGER_SECTION = exports.CELL_DANGER_SECTION = {
   type: 'menu-section',
   key: 'cell-danger-section'
 };
-var CELL_MENU_SECTION_RANK = exports.CELL_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, CELL_ACTION_SECTION.key, 100), CELL_DANGER_SECTION.key, 200);
+var CELL_MENU_RANK = exports.CELL_MENU_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, CELL_ACTION_SECTION.key, 100), CELL_DANGER_SECTION.key, 200);
 var MERGE_CELLS_ITEM = exports.MERGE_CELLS_ITEM = {
   type: 'menu-item',
   key: 'merge-cells'

package/dist/cjs/ui/TableMenu/column/getColumnMenuComponents.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _AddColumnLeftItem = require("./items/AddColumnLeftItem");
 var _AddColumnRightItem = require("./items/AddColumnRightItem");
+var _ColumnBackgroundSection = require("./items/ColumnBackgroundSection");
+var _ColumnToggleSection = require("./items/ColumnToggleSection");
 var _DeleteColumnItem = require("./items/DeleteColumnItem");
 var _DistributeColumnsItem = require("./items/DistributeColumnsItem");
 var _HeaderColumnToggleItem = require("./items/HeaderColumnToggleItem");
@@ -16,13 +18,6 @@ var _MoveColumnRightItem = require("./items/MoveColumnRightItem");
 var _SortDecreasingItem = require("./items/SortDecreasingItem");
 var _SortIncreasingItem = require("./items/SortIncreasingItem");
 var _keys = require("./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.
- */
 var getColumnMenuComponents = exports.getColumnMenuComponents = function getColumnMenuComponents() {
   return [
   // --- Menu surface ---
@@ -40,7 +35,7 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_TOGGLE_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
+      return /*#__PURE__*/_react.default.createElement(_ColumnToggleSection.ColumnToggleSection, null, props.children);
     }
   }, {
     type: _keys.HEADER_COLUMN_TOGGLE_ITEM.type,
@@ -64,9 +59,7 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_BACKGROUND_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-        hasSeparator: true
-      }, props.children);
+      return /*#__PURE__*/_react.default.createElement(_ColumnBackgroundSection.ColumnBackgroundSection, null, props.children);
     }
   },
   // --- Sort section ---

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnBackgroundSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var _HeaderColumnToggleItem = require("./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.
+ */
+var ColumnBackgroundSection = exports.ColumnBackgroundSection = function ColumnBackgroundSection(_ref) {
+  var children = _ref.children;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var hasSeparator = (0, _HeaderColumnToggleItem.shouldShowHeaderColumnToggle)(tableMenuContext);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+    hasSeparator: hasSeparator
+  }, children);
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnToggleSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var _HeaderColumnToggleItem = require("./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).
+ */
+var ColumnToggleSection = exports.ColumnToggleSection = function ColumnToggleSection(_ref) {
+  var children = _ref.children;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  if (!(0, _HeaderColumnToggleItem.shouldShowHeaderColumnToggle)(tableMenuContext)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
+};

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

@@ -9,9 +9,19 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _TableMenuContext = require("../../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;
+};
 var DistributeColumnsItem = exports.DistributeColumnsItem = function DistributeColumnsItem() {
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  if (!shouldShowDistributeColumns(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnsDistributeIcon, {
       color: "currentColor",

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

@@ -4,16 +4,32 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeaderColumnToggleItem = void 0;
+exports.shouldShowHeaderColumnToggle = exports.HeaderColumnToggleItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 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 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.
+ */
+var shouldShowHeaderColumnToggle = exports.shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(tableMenuContext) {
+  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn) === true && tableMenuContext.selectedColumnCount === 1;
+};
 var HeaderColumnToggleItem = exports.HeaderColumnToggleItem = function HeaderColumnToggleItem() {
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(_messages.tableMessages.headerColumn);
+  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
       label: label,

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

@@ -9,11 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _TableMenuContext = require("../../shared/TableMenuContext");
 var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingItem() {
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-    isDisabled: true,
+    isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ArrowDownIcon, {
       color: "currentColor",
       label: "",

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

@@ -9,11 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _TableMenuContext = require("../../shared/TableMenuContext");
 var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingItem() {
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-    isDisabled: true,
+    isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ArrowUpIcon, {
       color: "currentColor",
       label: "",

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,29 +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/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();