@atlaskit/editor-plugin-table 22.4.7 → 22.4.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [`98ee7ca379f42`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98ee7ca379f42) -
+  Add experiment-gated table menu updates for cell menu
+- Updated dependencies
+
 ## 22.4.7
 
 ### 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/FloatingContextualButton/index.js

@@ -57,6 +57,11 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   var handleClick = function handleClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
+    if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      (0, _commands.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/cjs/ui/FloatingContextualMenu/CellMenuPopup.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellMenuPopup = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _userIntent = require("@atlaskit/editor-common/user-intent");
+var _commands = require("../../pm-plugins/commands");
+var _types = require("../../types");
+var _keys = require("../TableMenu/cell/keys");
+var _TableMenu = require("../TableMenu/shared/TableMenu");
+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); }
+var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
+    isOpen = _ref.isOpen,
+    targetCellRef = _ref.targetCellRef;
+  var tableMenuRef = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.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 = (0, _react.useCallback)(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch,
+      dom = editorView.dom;
+    (0, _commands.toggleContextualMenu)()(state, dispatch);
+    if (isCellMenuOpenByKeyboard) {
+      (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
+      dom.focus();
+    }
+  }, [editorView, isCellMenuOpenByKeyboard]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
+      return;
+    }
+    closeCellMenu();
+  }, [closeCellMenu, currentUserIntent, isOpen]);
+  (0, _react.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(_types.TableCssClassName.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 = (0, _bindEventListener.bind)(ownerDocument, {
+      type: 'pointerdown',
+      listener: handlePointerDown,
+      options: {
+        capture: true
+      }
+    });
+    var unbindKeyDown = (0, _bindEventListener.bind)(ownerDocument, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: true
+      }
+    });
+    return function () {
+      unbindPointerDown();
+      unbindKeyDown();
+    };
+  }, [closeCellMenu, isOpen, targetCellRef]);
+  return /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "tableContextualMenuPopupOpen"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: tableMenuRef
+  }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
+    api: api,
+    editorView: editorView,
+    surface: _keys.CELL_MENU
+  })));
+};

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

@@ -10,8 +10,11 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
+var _consts2 = require("../TableMenu/shared/consts");
+var _CellMenuPopup = require("./CellMenuPopup");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 var _styles = require("./styles");
 /**
@@ -72,7 +75,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: _consts.tablePopupMenuFitHeight,
-    fitWidth: _consts.contextualMenuDropdownWidthDnD
+    fitWidth: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? _consts2.TABLE_MENU_WIDTH : _consts.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.
     ,
@@ -82,7 +85,15 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     ,
     offset: [-7, 0],
     stick: true
-  }, (0, _react.jsx)("div", {
+  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? (0, _react.jsx)(_CellMenuPopup.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
+  (0, _react.jsx)("div", {
     css: (0, _styles.tablePopupStyles)()
   }, (0, _react.jsx)(_ContextualMenu.default, {
     editorView: editorView

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCellMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _MergeCellsItem = require("./items/MergeCellsItem");
+var _SplitCellItem = require("./items/SplitCellItem");
+var _keys = require("./keys");
+var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenuComponents() {
+  return [
+  // --- Menu surface ---
+  {
+    type: _keys.CELL_MENU.type,
+    key: _keys.CELL_MENU.key
+  },
+  // --- Main action section (Background color, Merge cells, Split cell) ---
+  {
+    type: _keys.CELL_ACTION_SECTION.type,
+    key: _keys.CELL_ACTION_SECTION.key,
+    parents: [{
+      type: _keys.CELL_MENU.type,
+      key: _keys.CELL_MENU.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);
+    }
+  }, {
+    type: _keys.MERGE_CELLS_ITEM.type,
+    key: _keys.MERGE_CELLS_ITEM.key,
+    parents: [{
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys.MERGE_CELLS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MergeCellsItem.MergeCellsItem, null);
+    }
+  }, {
+    type: _keys.SPLIT_CELL_ITEM.type,
+    key: _keys.SPLIT_CELL_ITEM.key,
+    parents: [{
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys.SPLIT_CELL_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_SplitCellItem.SplitCellItem, null);
+    }
+  },
+  // --- Danger section (Clear cell) ---
+  {
+    type: _keys.CELL_DANGER_SECTION.type,
+    key: _keys.CELL_DANGER_SECTION.key,
+    parents: [{
+      type: _keys.CELL_MENU.type,
+      key: _keys.CELL_MENU.key,
+      rank: _keys.CELL_MENU_RANK[_keys.CELL_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }];
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MergeCellsItem = 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 _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: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.tableMessages.mergeCells));
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitCellItem = 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 _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: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.tableMessages.splitCell));
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 ---
+
+var CELL_MENU = exports.CELL_MENU = {
+  type: 'menu',
+  key: 'cell-contextual-menu'
+};
+
+// --- Sections ---
+
+var CELL_ACTION_SECTION = exports.CELL_ACTION_SECTION = {
+  type: 'menu-section',
+  key: 'cell-action-section'
+};
+var CELL_DANGER_SECTION = exports.CELL_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'cell-danger-section'
+};
+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'
+};
+var SPLIT_CELL_ITEM = exports.SPLIT_CELL_ITEM = {
+  type: 'menu-item',
+  key: 'split-cell'
+};
+
+// --- Item ranks within their sections ---
+
+var CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100), MERGE_CELLS_ITEM.key, 200), SPLIT_CELL_ITEM.key, 300);
+var CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION_RANK = (0, _defineProperty2.default)({}, _keys.CLEAR_CELLS_ITEM.key, 100);

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/MoveColumnRightItem.js

@@ -10,12 +10,8 @@ var _reactIntl = require("react-intl");
 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 getMoveColumnRightShortcut = function getMoveColumnRightShortcut() {
-  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveColumnRight : _keymaps.moveColumnRightOld);
-};
 var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRightItem() {
-  var _getMoveColumnRightSh;
+  var _tooltip;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
@@ -25,7 +21,7 @@ var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRight
       size: "small"
     }),
     elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveColumnRightSh = getMoveColumnRightShortcut()) !== null && _getMoveColumnRightSh !== void 0 ? _getMoveColumnRightSh : ''
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.moveColumnRight, {
     0: 1

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: "",