@atlaskit/editor-plugin-table 22.4.3 → 22.4.5

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

@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.getRowMenuComponents = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _BackgroundColorItem = require("../shared/items/BackgroundColorItem");
-var _ClearCellsItem = require("../shared/items/ClearCellsItem");
+var _AddRowAboveItem = require("./items/AddRowAboveItem");
+var _AddRowBelowItem = require("./items/AddRowBelowItem");
+var _DeleteRowItem = require("./items/DeleteRowItem");
+var _HeaderRowToggleItem = require("./items/HeaderRowToggleItem");
+var _MoveRowDownItem = require("./items/MoveRowDownItem");
+var _MoveRowUpItem = require("./items/MoveRowUpItem");
+var _NumberedRowsToggleItem = require("./items/NumberedRowsToggleItem");
 var _keys = require("./keys");
-var _RowMenuItems = require("./RowMenuItems");
 /**
  * Returns the RegisterComponent[] array defining the row menu surface.
  *
@@ -32,7 +36,7 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_MENU.type,
       key: _keys.ROW_MENU.key,
-      rank: _keys.ROW_SECTION_RANK[_keys.ROW_TOGGLE_SECTION.key]
+      rank: _keys.ROW_MENU_SECTION_RANK[_keys.ROW_TOGGLE_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
@@ -43,10 +47,10 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_TOGGLE_SECTION.type,
       key: _keys.ROW_TOGGLE_SECTION.key,
-      rank: _keys.TOGGLE_SECTION_ITEM_RANK[_keys.HEADER_ROW_TOGGLE_ITEM.key]
+      rank: _keys.ROW_TOGGLE_SECTION_RANK[_keys.HEADER_ROW_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.HeaderRowToggleItem, null);
+      return /*#__PURE__*/_react.default.createElement(_HeaderRowToggleItem.HeaderRowToggleItem, null);
     }
   }, {
     type: _keys.NUMBERED_ROWS_TOGGLE_ITEM.type,
@@ -54,10 +58,10 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_TOGGLE_SECTION.type,
       key: _keys.ROW_TOGGLE_SECTION.key,
-      rank: _keys.TOGGLE_SECTION_ITEM_RANK[_keys.NUMBERED_ROWS_TOGGLE_ITEM.key]
+      rank: _keys.ROW_TOGGLE_SECTION_RANK[_keys.NUMBERED_ROWS_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.NumberedRowsToggleItem, null);
+      return /*#__PURE__*/_react.default.createElement(_NumberedRowsToggleItem.NumberedRowsToggleItem, null);
     }
   },
   // --- Background color section ---
@@ -67,26 +71,13 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_MENU.type,
       key: _keys.ROW_MENU.key,
-      rank: _keys.ROW_SECTION_RANK[_keys.ROW_BACKGROUND_SECTION.key]
+      rank: _keys.ROW_MENU_SECTION_RANK[_keys.ROW_BACKGROUND_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, props.children);
     }
-  }, {
-    type: _keys.BACKGROUND_COLOR_ITEM.type,
-    key: _keys.BACKGROUND_COLOR_ITEM.key,
-    parents: [{
-      type: _keys.ROW_BACKGROUND_SECTION.type,
-      key: _keys.ROW_BACKGROUND_SECTION.key,
-      rank: _keys.BACKGROUND_SECTION_ITEM_RANK[_keys.BACKGROUND_COLOR_ITEM.key]
-    }],
-    component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, {
-        testId: "row-menu-background-color"
-      });
-    }
   },
   // --- Add / Move section ---
   {
@@ -95,7 +86,7 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_MENU.type,
       key: _keys.ROW_MENU.key,
-      rank: _keys.ROW_SECTION_RANK[_keys.ROW_ADD_SECTION.key]
+      rank: _keys.ROW_MENU_SECTION_RANK[_keys.ROW_ADD_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
@@ -108,10 +99,10 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_ADD_SECTION.type,
       key: _keys.ROW_ADD_SECTION.key,
-      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.ADD_ROW_ABOVE_ITEM.key]
+      rank: _keys.ROW_ADD_SECTION_RANK[_keys.ADD_ROW_ABOVE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.AddRowAboveItem, null);
+      return /*#__PURE__*/_react.default.createElement(_AddRowAboveItem.AddRowAboveItem, null);
     }
   }, {
     type: _keys.ADD_ROW_BELOW_ITEM.type,
@@ -119,10 +110,10 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_ADD_SECTION.type,
       key: _keys.ROW_ADD_SECTION.key,
-      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.ADD_ROW_BELOW_ITEM.key]
+      rank: _keys.ROW_ADD_SECTION_RANK[_keys.ADD_ROW_BELOW_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.AddRowBelowItem, null);
+      return /*#__PURE__*/_react.default.createElement(_AddRowBelowItem.AddRowBelowItem, null);
     }
   }, {
     type: _keys.MOVE_ROW_UP_ITEM.type,
@@ -130,10 +121,10 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_ADD_SECTION.type,
       key: _keys.ROW_ADD_SECTION.key,
-      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.MOVE_ROW_UP_ITEM.key]
+      rank: _keys.ROW_ADD_SECTION_RANK[_keys.MOVE_ROW_UP_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.MoveRowUpItem, null);
+      return /*#__PURE__*/_react.default.createElement(_MoveRowUpItem.MoveRowUpItem, null);
     }
   }, {
     type: _keys.MOVE_ROW_DOWN_ITEM.type,
@@ -141,10 +132,10 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_ADD_SECTION.type,
       key: _keys.ROW_ADD_SECTION.key,
-      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.MOVE_ROW_DOWN_ITEM.key]
+      rank: _keys.ROW_ADD_SECTION_RANK[_keys.MOVE_ROW_DOWN_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.MoveRowDownItem, null);
+      return /*#__PURE__*/_react.default.createElement(_MoveRowDownItem.MoveRowDownItem, null);
     }
   },
   // --- Danger section (Clear cells, Delete row) ---
@@ -154,36 +145,23 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
     parents: [{
       type: _keys.ROW_MENU.type,
       key: _keys.ROW_MENU.key,
-      rank: _keys.ROW_SECTION_RANK[_keys.ROW_DANGER_SECTION.key]
+      rank: _keys.ROW_MENU_SECTION_RANK[_keys.ROW_DANGER_SECTION.key]
     }],
     component: function component(props) {
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, props.children);
     }
-  }, {
-    type: _keys.CLEAR_CELLS_ITEM.type,
-    key: _keys.CLEAR_CELLS_ITEM.key,
-    parents: [{
-      type: _keys.ROW_DANGER_SECTION.type,
-      key: _keys.ROW_DANGER_SECTION.key,
-      rank: _keys.DANGER_SECTION_ITEM_RANK[_keys.CLEAR_CELLS_ITEM.key]
-    }],
-    component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_ClearCellsItem.ClearCellsItem, {
-        testId: "row-menu-clear-cells"
-      });
-    }
   }, {
     type: _keys.DELETE_ROW_ITEM.type,
     key: _keys.DELETE_ROW_ITEM.key,
     parents: [{
       type: _keys.ROW_DANGER_SECTION.type,
       key: _keys.ROW_DANGER_SECTION.key,
-      rank: _keys.DANGER_SECTION_ITEM_RANK[_keys.DELETE_ROW_ITEM.key]
+      rank: _keys.ROW_DANGER_SECTION_RANK[_keys.DELETE_ROW_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.DeleteRowItem, null);
+      return /*#__PURE__*/_react.default.createElement(_DeleteRowItem.DeleteRowItem, null);
     }
   }];
 };

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddRowAboveItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 AddRowAboveItem = exports.AddRowAboveItem = function AddRowAboveItem() {
+  var _tooltip;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowAddAboveIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.addRowBefore)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.addRowAbove));
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddRowBelowItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 AddRowBelowItem = exports.AddRowBelowItem = function AddRowBelowItem() {
+  var _tooltip;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowAddBelowIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.addRowAfter)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.addRowBelow));
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteRowItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem() {
+  var _tooltip;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.removeRows, {
+    0: 1
+  }));
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderRowToggleItem = 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 HeaderRowToggleItem = exports.HeaderRowToggleItem = function HeaderRowToggleItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(_messages.tableMessages.headerRow);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveRowDownItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 getMoveRowDownShortcut = function getMoveRowDownShortcut() {
+  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowDown : _keymaps.moveRowDownOld);
+};
+var MoveRowDownItem = exports.MoveRowDownItem = function MoveRowDownItem() {
+  var _getMoveRowDownShortc;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveDownIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowDownShortc = getMoveRowDownShortcut()) !== null && _getMoveRowDownShortc !== void 0 ? _getMoveRowDownShortc : ''
+    })
+  }, formatMessage(_messages.tableMessages.moveRowDown, {
+    0: 1
+  }));
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveRowUpItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 getMoveRowUpShortcut = function getMoveRowUpShortcut() {
+  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowUp : _keymaps.moveRowUpOld);
+};
+var MoveRowUpItem = exports.MoveRowUpItem = function MoveRowUpItem() {
+  var _getMoveRowUpShortcut;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveUpIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowUpShortcut = getMoveRowUpShortcut()) !== null && _getMoveRowUpShortcut !== void 0 ? _getMoveRowUpShortcut : ''
+    })
+  }, formatMessage(_messages.tableMessages.moveRowUp, {
+    0: 1
+  }));
+};

package/dist/cjs/ui/TableMenu/row/items/NumberedRowsToggleItem.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberedRowsToggleItem = 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 NumberedRowsToggleItem = exports.NumberedRowsToggleItem = function NumberedRowsToggleItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(_messages.tableMessages.numberedRows);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};

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

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOGGLE_SECTION_ITEM_RANK = exports.ROW_TOGGLE_SECTION = exports.ROW_SECTION_RANK = exports.ROW_MENU = exports.ROW_DANGER_SECTION = exports.ROW_BACKGROUND_SECTION = exports.ROW_ADD_SECTION = exports.NUMBERED_ROWS_TOGGLE_ITEM = exports.MOVE_ROW_UP_ITEM = exports.MOVE_ROW_DOWN_ITEM = exports.HEADER_ROW_TOGGLE_ITEM = exports.DELETE_ROW_ITEM = exports.DANGER_SECTION_ITEM_RANK = exports.CLEAR_CELLS_ITEM = exports.BACKGROUND_SECTION_ITEM_RANK = exports.BACKGROUND_COLOR_ITEM = exports.ADD_SECTION_ITEM_RANK = exports.ADD_ROW_BELOW_ITEM = exports.ADD_ROW_ABOVE_ITEM = void 0;
+exports.ROW_TOGGLE_SECTION_RANK = exports.ROW_TOGGLE_SECTION = exports.ROW_MENU_SECTION_RANK = exports.ROW_MENU = exports.ROW_DANGER_SECTION_RANK = exports.ROW_DANGER_SECTION = exports.ROW_BACKGROUND_SECTION_RANK = exports.ROW_BACKGROUND_SECTION = exports.ROW_ADD_SECTION_RANK = exports.ROW_ADD_SECTION = exports.NUMBERED_ROWS_TOGGLE_ITEM = exports.MOVE_ROW_UP_ITEM = exports.MOVE_ROW_DOWN_ITEM = exports.HEADER_ROW_TOGGLE_ITEM = exports.DELETE_ROW_ITEM = exports.ADD_ROW_BELOW_ITEM = exports.ADD_ROW_ABOVE_ITEM = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _keys = require("../shared/keys");
 // --- Menu surface ---
 
 var ROW_MENU = exports.ROW_MENU = {
@@ -31,7 +32,7 @@ var ROW_DANGER_SECTION = exports.ROW_DANGER_SECTION = {
   type: 'menu-section',
   key: 'row-danger-section'
 };
-var ROW_SECTION_RANK = exports.ROW_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ROW_TOGGLE_SECTION.key, 100), ROW_BACKGROUND_SECTION.key, 200), ROW_ADD_SECTION.key, 300), ROW_DANGER_SECTION.key, 400);
+var ROW_MENU_SECTION_RANK = exports.ROW_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ROW_TOGGLE_SECTION.key, 100), ROW_BACKGROUND_SECTION.key, 200), ROW_ADD_SECTION.key, 300), ROW_DANGER_SECTION.key, 400);
 var HEADER_ROW_TOGGLE_ITEM = exports.HEADER_ROW_TOGGLE_ITEM = {
   type: 'menu-item',
   key: 'header-row-toggle'
@@ -40,10 +41,6 @@ var NUMBERED_ROWS_TOGGLE_ITEM = exports.NUMBERED_ROWS_TOGGLE_ITEM = {
   type: 'menu-item',
   key: 'numbered-rows-toggle'
 };
-var BACKGROUND_COLOR_ITEM = exports.BACKGROUND_COLOR_ITEM = {
-  type: 'menu-item',
-  key: 'background-color'
-};
 var ADD_ROW_ABOVE_ITEM = exports.ADD_ROW_ABOVE_ITEM = {
   type: 'menu-item',
   key: 'add-row-above'
@@ -60,10 +57,6 @@ var MOVE_ROW_DOWN_ITEM = exports.MOVE_ROW_DOWN_ITEM = {
   type: 'menu-item',
   key: 'move-row-down'
 };
-var CLEAR_CELLS_ITEM = exports.CLEAR_CELLS_ITEM = {
-  type: 'menu-item',
-  key: 'clear-cells'
-};
 var DELETE_ROW_ITEM = exports.DELETE_ROW_ITEM = {
   type: 'menu-item',
   key: 'delete-row'
@@ -71,7 +64,7 @@ var DELETE_ROW_ITEM = exports.DELETE_ROW_ITEM = {
 
 // --- Item ranks within their sections ---
 
-var TOGGLE_SECTION_ITEM_RANK = exports.TOGGLE_SECTION_ITEM_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, HEADER_ROW_TOGGLE_ITEM.key, 100), NUMBERED_ROWS_TOGGLE_ITEM.key, 200);
-var BACKGROUND_SECTION_ITEM_RANK = exports.BACKGROUND_SECTION_ITEM_RANK = (0, _defineProperty2.default)({}, BACKGROUND_COLOR_ITEM.key, 100);
-var ADD_SECTION_ITEM_RANK = exports.ADD_SECTION_ITEM_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ADD_ROW_ABOVE_ITEM.key, 100), ADD_ROW_BELOW_ITEM.key, 200), MOVE_ROW_UP_ITEM.key, 300), MOVE_ROW_DOWN_ITEM.key, 400);
-var DANGER_SECTION_ITEM_RANK = exports.DANGER_SECTION_ITEM_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, CLEAR_CELLS_ITEM.key, 100), DELETE_ROW_ITEM.key, 200);
+var ROW_TOGGLE_SECTION_RANK = exports.ROW_TOGGLE_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, HEADER_ROW_TOGGLE_ITEM.key, 100), NUMBERED_ROWS_TOGGLE_ITEM.key, 200);
+var ROW_BACKGROUND_SECTION_RANK = exports.ROW_BACKGROUND_SECTION_RANK = (0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100);
+var ROW_ADD_SECTION_RANK = exports.ROW_ADD_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ADD_ROW_ABOVE_ITEM.key, 100), ADD_ROW_BELOW_ITEM.key, 200), MOVE_ROW_UP_ITEM.key, 300), MOVE_ROW_DOWN_ITEM.key, 400);
+var ROW_DANGER_SECTION_RANK = exports.ROW_DANGER_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.CLEAR_CELLS_ITEM.key, 100), DELETE_ROW_ITEM.key, 200);

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

@@ -0,0 +1,35 @@
+/* TableMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableMenu = void 0;
+require("./TableMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
+var _compiled = require("@atlaskit/primitives/compiled");
+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 tableMenuContainerStyles = {
+  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+};
+var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var api = _ref.api,
+    surface = _ref.surface;
+  var components = (0, _react.useMemo)(function () {
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
+    return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  }, [api, surface.key]);
+  if (components.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: tableMenuContainerStyles.container,
+    testId: surface.key
+  }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
+    surface: surface,
+    components: components
+  }));
+});

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

@@ -3,5 +3,5 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.newMenuWidth = void 0;
-var newMenuWidth = exports.newMenuWidth = 280;
+exports.TABLE_MENU_WIDTH = void 0;
+var TABLE_MENU_WIDTH = exports.TABLE_MENU_WIDTH = 280;

package/dist/cjs/ui/TableMenu/shared/getSharedItems.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSharedItems = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _keys = require("../column/keys");
+var _keys2 = require("../row/keys");
+var _BackgroundColorItem = require("./items/BackgroundColorItem");
+var _ClearCellsItem = require("./items/ClearCellsItem");
+var _keys3 = require("./keys");
+var getSharedItems = exports.getSharedItems = function getSharedItems() {
+  return [{
+    type: _keys3.BACKGROUND_COLOR_ITEM.type,
+    key: _keys3.BACKGROUND_COLOR_ITEM.key,
+    parents: [{
+      type: _keys2.ROW_BACKGROUND_SECTION.type,
+      key: _keys2.ROW_BACKGROUND_SECTION.key,
+      rank: _keys2.ROW_BACKGROUND_SECTION_RANK[_keys3.BACKGROUND_COLOR_ITEM.key]
+    }, {
+      type: _keys.COLUMN_BACKGROUND_SECTION.type,
+      key: _keys.COLUMN_BACKGROUND_SECTION.key,
+      rank: _keys.COLUMN_BACKGROUND_SECTION_RANK[_keys3.BACKGROUND_COLOR_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, null);
+    }
+  }, {
+    type: _keys3.CLEAR_CELLS_ITEM.type,
+    key: _keys3.CLEAR_CELLS_ITEM.key,
+    parents: [{
+      type: _keys2.ROW_DANGER_SECTION.type,
+      key: _keys2.ROW_DANGER_SECTION.key,
+      rank: _keys2.ROW_DANGER_SECTION_RANK[_keys3.CLEAR_CELLS_ITEM.key]
+    }, {
+      type: _keys.COLUMN_DANGER_SECTION.type,
+      key: _keys.COLUMN_DANGER_SECTION.key,
+      rank: _keys.COLUMN_DANGER_SECTION_RANK[_keys3.CLEAR_CELLS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_ClearCellsItem.ClearCellsItem, null);
+    }
+  }];
+};

package/dist/cjs/ui/TableMenu/shared/getTableMenuComponents.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTableMenuComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _getColumnMenuComponents = require("../column/getColumnMenuComponents");
+var _getRowMenuComponents = require("../row/getRowMenuComponents");
+var _getSharedItems = require("./getSharedItems");
+var getTableMenuComponents = exports.getTableMenuComponents = function getTableMenuComponents() {
+  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)()), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)()));
+};

package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -22,17 +22,16 @@ var colorPaletteStyles = {
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem(_ref) {
-  var testId = _ref.testId;
+var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem() {
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var selectedColor = '#ffffff';
   var onClick = (0, _react.useCallback)(function () {}, []);
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = (0, _react.useMemo)(function () {
     return {
-      backgroundColor: selectedColor
+      backgroundColor: '#ffffff'
     };
-  }, [selectedColor]);
+  }, []);
   var paletteOptions = (0, _react.useMemo)(function () {
     return {
       palette: _uiColor.cellBackgroundColorPalette,
@@ -41,7 +40,6 @@ var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColor
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
-    testId: testId,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.PaintBucketIcon, {
       color: "currentColor",
       label: "",
@@ -62,7 +60,7 @@ var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColor
   }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
     cols: colorPaletteColumns,
     onClick: onClick,
-    selectedColor: selectedColor,
+    selectedColor: colorPreviewStyle.backgroundColor,
     paletteOptions: paletteOptions
   })));
 };

package/dist/cjs/ui/TableMenu/shared/items/ClearCellsItem.js

@@ -10,13 +10,11 @@ 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 ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
+var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem() {
   var _tooltip;
-  var testId = _ref.testId;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-    testId: testId,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.CrossIcon, {
       color: "currentColor",
       label: "",

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CLEAR_CELLS_ITEM = exports.BACKGROUND_COLOR_ITEM = void 0;
+var BACKGROUND_COLOR_ITEM = exports.BACKGROUND_COLOR_ITEM = {
+  type: 'menu-item',
+  key: 'background-color'
+};
+var CLEAR_CELLS_ITEM = exports.CLEAR_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'clear-cells'
+};