@atlaskit/editor-plugin-table 22.4.3 → 22.4.5

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

@@ -0,0 +1,188 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { AddColumnLeftItem } from './items/AddColumnLeftItem';
+import { AddColumnRightItem } from './items/AddColumnRightItem';
+import { DeleteColumnItem } from './items/DeleteColumnItem';
+import { DistributeColumnsItem } from './items/DistributeColumnsItem';
+import { HeaderColumnToggleItem } from './items/HeaderColumnToggleItem';
+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 ---
+  {
+    type: COLUMN_MENU.type,
+    key: COLUMN_MENU.key
+  },
+  // --- Toggle section (Header column) ---
+  {
+    type: COLUMN_TOGGLE_SECTION.type,
+    key: COLUMN_TOGGLE_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_TOGGLE_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: HEADER_COLUMN_TOGGLE_ITEM.type,
+    key: HEADER_COLUMN_TOGGLE_ITEM.key,
+    parents: [{
+      type: COLUMN_TOGGLE_SECTION.type,
+      key: COLUMN_TOGGLE_SECTION.key,
+      rank: COLUMN_TOGGLE_SECTION_RANK[HEADER_COLUMN_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeaderColumnToggleItem, null);
+    }
+  },
+  // --- Background color section ---
+  {
+    type: COLUMN_BACKGROUND_SECTION.type,
+    key: COLUMN_BACKGROUND_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_BACKGROUND_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  },
+  // --- Sort section ---
+  {
+    type: COLUMN_SORT_SECTION.type,
+    key: COLUMN_SORT_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_SORT_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: SORT_INCREASING_ITEM.type,
+    key: SORT_INCREASING_ITEM.key,
+    parents: [{
+      type: COLUMN_SORT_SECTION.type,
+      key: COLUMN_SORT_SECTION.key,
+      rank: COLUMN_SORT_SECTION_RANK[SORT_INCREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(SortIncreasingItem, null);
+    }
+  }, {
+    type: SORT_DECREASING_ITEM.type,
+    key: SORT_DECREASING_ITEM.key,
+    parents: [{
+      type: COLUMN_SORT_SECTION.type,
+      key: COLUMN_SORT_SECTION.key,
+      rank: COLUMN_SORT_SECTION_RANK[SORT_DECREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(SortDecreasingItem, null);
+    }
+  },
+  // --- Add / Move section ---
+  {
+    type: COLUMN_ADD_SECTION.type,
+    key: COLUMN_ADD_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_ADD_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: ADD_COLUMN_LEFT_ITEM.type,
+    key: ADD_COLUMN_LEFT_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_LEFT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(AddColumnLeftItem, null);
+    }
+  }, {
+    type: ADD_COLUMN_RIGHT_ITEM.type,
+    key: ADD_COLUMN_RIGHT_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_RIGHT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(AddColumnRightItem, null);
+    }
+  }, {
+    type: MOVE_COLUMN_RIGHT_ITEM.type,
+    key: MOVE_COLUMN_RIGHT_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[MOVE_COLUMN_RIGHT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MoveColumnRightItem, null);
+    }
+  }, {
+    type: DISTRIBUTE_COLUMNS_ITEM.type,
+    key: DISTRIBUTE_COLUMNS_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[DISTRIBUTE_COLUMNS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DistributeColumnsItem, null);
+    }
+  },
+  // --- Danger section (Clear cells, Delete column) ---
+  {
+    type: COLUMN_DANGER_SECTION.type,
+    key: COLUMN_DANGER_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: DELETE_COLUMN_ITEM.type,
+    key: DELETE_COLUMN_ITEM.key,
+    parents: [{
+      type: COLUMN_DANGER_SECTION.type,
+      key: COLUMN_DANGER_SECTION.key,
+      rank: COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DeleteColumnItem, null);
+    }
+  }];
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { addColumnBefore, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { TableColumnAddLeftIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var AddColumnLeftItem = function AddColumnLeftItem() {
+  var _tooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableColumnAddLeftIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(addColumnBefore)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.addColumnLeft));
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { addColumnAfter, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var AddColumnRightItem = function AddColumnRightItem() {
+  var _tooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableColumnAddRightIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(addColumnAfter)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.addColumnRight));
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { deleteColumn, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var DeleteColumnItem = function DeleteColumnItem() {
+  var _tooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.removeColumns, {
+    0: 1
+  }));
+};

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+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';
+export var HeaderColumnToggleItem = function HeaderColumnToggleItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(messages.headerColumn);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};

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

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

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

@@ -0,0 +1,16 @@
+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';
+export var SortDecreasingItem = function SortDecreasingItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    isDisabled: true,
+    elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.sortColumnDecreasing));
+};

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

@@ -0,0 +1,16 @@
+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';
+export var SortIncreasingItem = function SortIncreasingItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    isDisabled: true,
+    elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.sortColumnIncreasing));
+};

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

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
+
+// --- Menu surface ---
+
+export var COLUMN_MENU = {
+  type: 'menu',
+  key: 'column-handle-menu'
+};
+
+// --- Sections ---
+
+export var COLUMN_TOGGLE_SECTION = {
+  type: 'menu-section',
+  key: 'column-toggle-section'
+};
+export var COLUMN_BACKGROUND_SECTION = {
+  type: 'menu-section',
+  key: 'column-background-section'
+};
+export var COLUMN_SORT_SECTION = {
+  type: 'menu-section',
+  key: 'column-sort-section'
+};
+export var COLUMN_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'column-add-section'
+};
+export var COLUMN_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'column-danger-section'
+};
+export var COLUMN_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, COLUMN_TOGGLE_SECTION.key, 100), COLUMN_BACKGROUND_SECTION.key, 200), COLUMN_SORT_SECTION.key, 300), COLUMN_ADD_SECTION.key, 400), COLUMN_DANGER_SECTION.key, 500);
+export var HEADER_COLUMN_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'header-column-toggle'
+};
+export var SORT_INCREASING_ITEM = {
+  type: 'menu-item',
+  key: 'sort-increasing'
+};
+export var SORT_DECREASING_ITEM = {
+  type: 'menu-item',
+  key: 'sort-decreasing'
+};
+export var ADD_COLUMN_LEFT_ITEM = {
+  type: 'menu-item',
+  key: 'add-column-left'
+};
+export var ADD_COLUMN_RIGHT_ITEM = {
+  type: 'menu-item',
+  key: 'add-column-right'
+};
+export var MOVE_COLUMN_RIGHT_ITEM = {
+  type: 'menu-item',
+  key: 'move-column-right'
+};
+export var DISTRIBUTE_COLUMNS_ITEM = {
+  type: 'menu-item',
+  key: 'distribute-columns'
+};
+export var DELETE_COLUMN_ITEM = {
+  type: 'menu-item',
+  key: 'delete-column'
+};
+
+// --- Item ranks within their sections ---
+
+export var COLUMN_TOGGLE_SECTION_RANK = _defineProperty({}, HEADER_COLUMN_TOGGLE_ITEM.key, 100);
+export var COLUMN_BACKGROUND_SECTION_RANK = _defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100);
+export var COLUMN_SORT_SECTION_RANK = _defineProperty(_defineProperty({}, SORT_INCREASING_ITEM.key, 100), SORT_DECREASING_ITEM.key, 200);
+export var COLUMN_ADD_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ADD_COLUMN_LEFT_ITEM.key, 100), ADD_COLUMN_RIGHT_ITEM.key, 200), MOVE_COLUMN_RIGHT_ITEM.key, 300), DISTRIBUTE_COLUMNS_ITEM.key, 400);
+export var COLUMN_DANGER_SECTION_RANK = _defineProperty(_defineProperty({}, CLEAR_CELLS_ITEM.key, 100), DELETE_COLUMN_ITEM.key, 200);

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
-import { BackgroundColorItem } from '../shared/items/BackgroundColorItem';
-import { ClearCellsItem } from '../shared/items/ClearCellsItem';
-import { ROW_MENU, ROW_TOGGLE_SECTION, ROW_BACKGROUND_SECTION, ROW_ADD_SECTION, ROW_DANGER_SECTION, ROW_SECTION_RANK, HEADER_ROW_TOGGLE_ITEM, NUMBERED_ROWS_TOGGLE_ITEM, BACKGROUND_COLOR_ITEM, ADD_ROW_ABOVE_ITEM, ADD_ROW_BELOW_ITEM, MOVE_ROW_UP_ITEM, MOVE_ROW_DOWN_ITEM, CLEAR_CELLS_ITEM, DELETE_ROW_ITEM, TOGGLE_SECTION_ITEM_RANK, BACKGROUND_SECTION_ITEM_RANK, ADD_SECTION_ITEM_RANK, DANGER_SECTION_ITEM_RANK } from './keys';
-import { HeaderRowToggleItem, NumberedRowsToggleItem, AddRowAboveItem, AddRowBelowItem, MoveRowUpItem, MoveRowDownItem, DeleteRowItem } from './RowMenuItems';
+import { AddRowAboveItem } from './items/AddRowAboveItem';
+import { AddRowBelowItem } from './items/AddRowBelowItem';
+import { DeleteRowItem } from './items/DeleteRowItem';
+import { HeaderRowToggleItem } from './items/HeaderRowToggleItem';
+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.
@@ -26,7 +30,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_MENU.type,
       key: ROW_MENU.key,
-      rank: ROW_SECTION_RANK[ROW_TOGGLE_SECTION.key]
+      rank: ROW_MENU_SECTION_RANK[ROW_TOGGLE_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
@@ -37,7 +41,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_TOGGLE_SECTION.type,
       key: ROW_TOGGLE_SECTION.key,
-      rank: TOGGLE_SECTION_ITEM_RANK[HEADER_ROW_TOGGLE_ITEM.key]
+      rank: ROW_TOGGLE_SECTION_RANK[HEADER_ROW_TOGGLE_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(HeaderRowToggleItem, null);
@@ -48,7 +52,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_TOGGLE_SECTION.type,
       key: ROW_TOGGLE_SECTION.key,
-      rank: TOGGLE_SECTION_ITEM_RANK[NUMBERED_ROWS_TOGGLE_ITEM.key]
+      rank: ROW_TOGGLE_SECTION_RANK[NUMBERED_ROWS_TOGGLE_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(NumberedRowsToggleItem, null);
@@ -61,26 +65,13 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_MENU.type,
       key: ROW_MENU.key,
-      rank: ROW_SECTION_RANK[ROW_BACKGROUND_SECTION.key]
+      rank: ROW_MENU_SECTION_RANK[ROW_BACKGROUND_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, props.children);
     }
-  }, {
-    type: BACKGROUND_COLOR_ITEM.type,
-    key: BACKGROUND_COLOR_ITEM.key,
-    parents: [{
-      type: ROW_BACKGROUND_SECTION.type,
-      key: ROW_BACKGROUND_SECTION.key,
-      rank: BACKGROUND_SECTION_ITEM_RANK[BACKGROUND_COLOR_ITEM.key]
-    }],
-    component: function component() {
-      return /*#__PURE__*/React.createElement(BackgroundColorItem, {
-        testId: "row-menu-background-color"
-      });
-    }
   },
   // --- Add / Move section ---
   {
@@ -89,7 +80,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_MENU.type,
       key: ROW_MENU.key,
-      rank: ROW_SECTION_RANK[ROW_ADD_SECTION.key]
+      rank: ROW_MENU_SECTION_RANK[ROW_ADD_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
@@ -102,7 +93,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_ADD_SECTION.type,
       key: ROW_ADD_SECTION.key,
-      rank: ADD_SECTION_ITEM_RANK[ADD_ROW_ABOVE_ITEM.key]
+      rank: ROW_ADD_SECTION_RANK[ADD_ROW_ABOVE_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(AddRowAboveItem, null);
@@ -113,7 +104,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_ADD_SECTION.type,
       key: ROW_ADD_SECTION.key,
-      rank: ADD_SECTION_ITEM_RANK[ADD_ROW_BELOW_ITEM.key]
+      rank: ROW_ADD_SECTION_RANK[ADD_ROW_BELOW_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(AddRowBelowItem, null);
@@ -124,7 +115,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_ADD_SECTION.type,
       key: ROW_ADD_SECTION.key,
-      rank: ADD_SECTION_ITEM_RANK[MOVE_ROW_UP_ITEM.key]
+      rank: ROW_ADD_SECTION_RANK[MOVE_ROW_UP_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(MoveRowUpItem, null);
@@ -135,7 +126,7 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_ADD_SECTION.type,
       key: ROW_ADD_SECTION.key,
-      rank: ADD_SECTION_ITEM_RANK[MOVE_ROW_DOWN_ITEM.key]
+      rank: ROW_ADD_SECTION_RANK[MOVE_ROW_DOWN_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(MoveRowDownItem, null);
@@ -148,33 +139,20 @@ export var getRowMenuComponents = function getRowMenuComponents() {
     parents: [{
       type: ROW_MENU.type,
       key: ROW_MENU.key,
-      rank: ROW_SECTION_RANK[ROW_DANGER_SECTION.key]
+      rank: ROW_MENU_SECTION_RANK[ROW_DANGER_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, props.children);
     }
-  }, {
-    type: CLEAR_CELLS_ITEM.type,
-    key: CLEAR_CELLS_ITEM.key,
-    parents: [{
-      type: ROW_DANGER_SECTION.type,
-      key: ROW_DANGER_SECTION.key,
-      rank: DANGER_SECTION_ITEM_RANK[CLEAR_CELLS_ITEM.key]
-    }],
-    component: function component() {
-      return /*#__PURE__*/React.createElement(ClearCellsItem, {
-        testId: "row-menu-clear-cells"
-      });
-    }
   }, {
     type: DELETE_ROW_ITEM.type,
     key: DELETE_ROW_ITEM.key,
     parents: [{
       type: ROW_DANGER_SECTION.type,
       key: ROW_DANGER_SECTION.key,
-      rank: DANGER_SECTION_ITEM_RANK[DELETE_ROW_ITEM.key]
+      rank: ROW_DANGER_SECTION_RANK[DELETE_ROW_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(DeleteRowItem, null);

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { addRowBefore, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { TableRowAddAboveIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var AddRowAboveItem = function AddRowAboveItem() {
+  var _tooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableRowAddAboveIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(addRowBefore)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.addRowAbove));
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { addRowAfter, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { TableRowAddBelowIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var AddRowBelowItem = function AddRowBelowItem() {
+  var _tooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableRowAddBelowIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(addRowAfter)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.addRowBelow));
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { deleteRow, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var DeleteRowItem = function DeleteRowItem() {
+  var _tooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.removeRows, {
+    0: 1
+  }));
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+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';
+export var HeaderRowToggleItem = function HeaderRowToggleItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(messages.headerRow);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};