@atlaskit/editor-plugin-table 22.4.8 → 22.4.10

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

@@ -2,15 +2,7 @@ import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { MergeCellsItem } from './items/MergeCellsItem';
 import { SplitCellItem } from './items/SplitCellItem';
-import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_SECTION_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
-
-/**
- * Returns the RegisterComponent[] array defining the cell contextual menu surface.
- *
- * This is a **UI-only stub** — all items are always visible with no conditional
- * logic and no wired actions. Functional behaviour (actions, conditional visibility)
- * will be connected in follow-up tickets.
- */
+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 ---
@@ -25,7 +17,7 @@ export var getCellMenuComponents = function getCellMenuComponents() {
     parents: [{
       type: CELL_MENU.type,
       key: CELL_MENU.key,
-      rank: CELL_MENU_SECTION_RANK[CELL_ACTION_SECTION.key]
+      rank: CELL_MENU_RANK[CELL_ACTION_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
@@ -60,7 +52,7 @@ export var getCellMenuComponents = function getCellMenuComponents() {
     parents: [{
       type: CELL_MENU.type,
       key: CELL_MENU.key,
-      rank: CELL_MENU_SECTION_RANK[CELL_DANGER_SECTION.key]
+      rank: CELL_MENU_RANK[CELL_DANGER_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {

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

@@ -2,9 +2,22 @@ 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: "",

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

@@ -2,9 +2,22 @@ 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: "",

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

@@ -18,7 +18,7 @@ export var CELL_DANGER_SECTION = {
   type: 'menu-section',
   key: 'cell-danger-section'
 };
-export var CELL_MENU_SECTION_RANK = _defineProperty(_defineProperty({}, CELL_ACTION_SECTION.key, 100), CELL_DANGER_SECTION.key, 200);
+export var 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'

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/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,28 +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/event-handlers.js

@@ -9,6 +9,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from '../pm-plugins/commands';
 import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -20,6 +21,7 @@ import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInF
 import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from '../pm-plugins/utils/dom';
 import { getAllowAddColumnCustomStep } from '../pm-plugins/utils/get-allow-add-column-custom-step';
 import { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
+import { TABLE_MENU_SELECTOR } from './TableMenu/shared/consts';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 };
@@ -35,12 +37,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(ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE);
 };
+var isFocusingTableMenu = function isFocusingTableMenu(event) {
+  return expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && Boolean(event.relatedTarget.closest(TABLE_MENU_SELECTOR));
+};
 export var 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 (getBrowserInfo().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
+  if (getBrowserInfo().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event) && !isFocusingTableMenu(event)) {
     setEditorFocus(false)(state, dispatch);
   }
   event.preventDefault();

package/dist/types/pm-plugins/commands/split-cell.d.ts

@@ -1,4 +1,6 @@
 import type { Command } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const canSplitCellSelection: (selection: Selection) => boolean;
 /**
  * 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/types/pm-plugins/transforms/merge.d.ts

@@ -1,5 +1,7 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
 export declare function mergeCells(tr: Transaction): Transaction;
+export declare function canMergeCellSelection(selection: Selection): boolean;
 export declare function canMergeCells(tr: Transaction): boolean;
 export declare function mergeEmptyColumns(table: PMNode): PMNode | null;

package/dist/types/ui/TableMenu/cell/getCellMenuComponents.d.ts

@@ -1,9 +1,2 @@
 import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
-/**
- * Returns the RegisterComponent[] array defining the cell contextual menu surface.
- *
- * This is a **UI-only stub** — all items are always visible with no conditional
- * logic and no wired actions. Functional behaviour (actions, conditional visibility)
- * will be connected in follow-up tickets.
- */
 export declare const getCellMenuComponents: () => RegisterComponent[];

package/dist/types/ui/TableMenu/cell/items/MergeCellsItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const MergeCellsItem: () => React.JSX.Element;
+export declare const MergeCellsItem: () => React.JSX.Element | null;

package/dist/types/ui/TableMenu/cell/items/SplitCellItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const SplitCellItem: () => React.JSX.Element;
+export declare const SplitCellItem: () => React.JSX.Element | null;

package/dist/types/ui/TableMenu/cell/keys.d.ts

@@ -2,7 +2,7 @@ import type { MenuItemType, MenuSectionType, MenuType } from '@atlaskit/editor-u
 export declare const CELL_MENU: MenuType;
 export declare const CELL_ACTION_SECTION: MenuSectionType;
 export declare const CELL_DANGER_SECTION: MenuSectionType;
-export declare const CELL_MENU_SECTION_RANK: Record<string, number>;
+export declare const CELL_MENU_RANK: Record<string, number>;
 export declare const MERGE_CELLS_ITEM: MenuItemType;
 export declare const SPLIT_CELL_ITEM: MenuItemType;
 export declare const CELL_ACTION_SECTION_RANK: Record<string, number>;

package/dist/types/ui/TableMenu/column/getColumnMenuComponents.d.ts

@@ -1,9 +1,2 @@
 import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
-/**
- * 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 declare const getColumnMenuComponents: () => RegisterComponent[];

package/dist/types/ui/TableMenu/column/items/ColumnBackgroundSection.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * 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 declare const ColumnBackgroundSection: ({ children, }: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types/ui/TableMenu/column/items/ColumnToggleSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * 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 declare const ColumnToggleSection: ({ children, }: {
+    children?: React.ReactNode;
+}) => React.JSX.Element | null;

package/dist/types/ui/TableMenu/column/items/DistributeColumnsItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const DistributeColumnsItem: () => React.JSX.Element;
+export declare const DistributeColumnsItem: () => React.JSX.Element | null;

package/dist/types/ui/TableMenu/column/items/HeaderColumnToggleItem.d.ts

@@ -1,2 +1,12 @@
 import React from 'react';
-export declare const HeaderColumnToggleItem: () => React.JSX.Element;
+import { type TableMenuContextValue } 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 declare const shouldShowHeaderColumnToggle: (tableMenuContext?: TableMenuContextValue) => boolean;
+export declare const HeaderColumnToggleItem: () => React.JSX.Element | null;

package/dist/types/ui/TableMenu/row/getRowMenuComponents.d.ts

@@ -1,9 +1,2 @@
 import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
-/**
- * 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 declare const getRowMenuComponents: () => RegisterComponent[];

package/dist/types/ui/TableMenu/row/items/HeaderRowToggleItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const HeaderRowToggleItem: () => React.JSX.Element;
+export declare const HeaderRowToggleItem: () => React.JSX.Element | null;

package/dist/types/ui/TableMenu/row/items/MoveRowDownItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const MoveRowDownItem: () => React.JSX.Element;
+export declare const MoveRowDownItem: () => React.JSX.Element | null;

package/dist/types/ui/TableMenu/row/items/MoveRowUpItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const MoveRowUpItem: () => React.JSX.Element;
+export declare const MoveRowUpItem: () => React.JSX.Element | null;

package/dist/types/ui/TableMenu/shared/TableMenu.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MenuType } from '@atlaskit/editor-ui-control-model';
 import type { PluginInjectionAPI } from '../../../types';
 type TableMenuProps = {
     api: PluginInjectionAPI | undefined | null;
+    editorView?: EditorView;
     surface: MenuType;
 };
-export declare const TableMenu: React.MemoExoticComponent<(props: TableMenuProps) => React.JSX.Element | null>;
+export declare const TableMenu: React.NamedExoticComponent<TableMenuProps>;
 export {};