@atlaskit/editor-plugin-table 22.4.4 → 22.4.6

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);
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { moveRowDown, moveRowDownOld, tooltip } from '@atlaskit/editor-common/keymaps';
+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';
+var getMoveRowDownShortcut = function getMoveRowDownShortcut() {
+  return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : moveRowDownOld);
+};
+export var MoveRowDownItem = function MoveRowDownItem() {
+  var _getMoveRowDownShortc;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowDownShortc = getMoveRowDownShortcut()) !== null && _getMoveRowDownShortc !== void 0 ? _getMoveRowDownShortc : ''
+    })
+  }, formatMessage(messages.moveRowDown, {
+    0: 1
+  }));
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { moveRowUp, moveRowUpOld, tooltip } from '@atlaskit/editor-common/keymaps';
+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';
+var getMoveRowUpShortcut = function getMoveRowUpShortcut() {
+  return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : moveRowUpOld);
+};
+export var MoveRowUpItem = function MoveRowUpItem() {
+  var _getMoveRowUpShortcut;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowUpShortcut = getMoveRowUpShortcut()) !== null && _getMoveRowUpShortcut !== void 0 ? _getMoveRowUpShortcut : ''
+    })
+  }, formatMessage(messages.moveRowUp, {
+    0: 1
+  }));
+};

package/dist/esm/ui/TableMenu/row/items/NumberedRowsToggleItem.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 NumberedRowsToggleItem = function NumberedRowsToggleItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(messages.numberedRows);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};

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

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
+
 // --- Menu surface ---
 
 export var ROW_MENU = {
@@ -24,7 +26,7 @@ export var ROW_DANGER_SECTION = {
   type: 'menu-section',
   key: 'row-danger-section'
 };
-export var ROW_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ROW_TOGGLE_SECTION.key, 100), ROW_BACKGROUND_SECTION.key, 200), ROW_ADD_SECTION.key, 300), ROW_DANGER_SECTION.key, 400);
+export var ROW_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ROW_TOGGLE_SECTION.key, 100), ROW_BACKGROUND_SECTION.key, 200), ROW_ADD_SECTION.key, 300), ROW_DANGER_SECTION.key, 400);
 export var HEADER_ROW_TOGGLE_ITEM = {
   type: 'menu-item',
   key: 'header-row-toggle'
@@ -33,10 +35,6 @@ export var NUMBERED_ROWS_TOGGLE_ITEM = {
   type: 'menu-item',
   key: 'numbered-rows-toggle'
 };
-export var BACKGROUND_COLOR_ITEM = {
-  type: 'menu-item',
-  key: 'background-color'
-};
 export var ADD_ROW_ABOVE_ITEM = {
   type: 'menu-item',
   key: 'add-row-above'
@@ -53,10 +51,6 @@ export var MOVE_ROW_DOWN_ITEM = {
   type: 'menu-item',
   key: 'move-row-down'
 };
-export var CLEAR_CELLS_ITEM = {
-  type: 'menu-item',
-  key: 'clear-cells'
-};
 export var DELETE_ROW_ITEM = {
   type: 'menu-item',
   key: 'delete-row'
@@ -64,7 +58,7 @@ export var DELETE_ROW_ITEM = {
 
 // --- Item ranks within their sections ---
 
-export var TOGGLE_SECTION_ITEM_RANK = _defineProperty(_defineProperty({}, HEADER_ROW_TOGGLE_ITEM.key, 100), NUMBERED_ROWS_TOGGLE_ITEM.key, 200);
-export var BACKGROUND_SECTION_ITEM_RANK = _defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100);
-export var ADD_SECTION_ITEM_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ADD_ROW_ABOVE_ITEM.key, 100), ADD_ROW_BELOW_ITEM.key, 200), MOVE_ROW_UP_ITEM.key, 300), MOVE_ROW_DOWN_ITEM.key, 400);
-export var DANGER_SECTION_ITEM_RANK = _defineProperty(_defineProperty({}, CLEAR_CELLS_ITEM.key, 100), DELETE_ROW_ITEM.key, 200);
+export var ROW_TOGGLE_SECTION_RANK = _defineProperty(_defineProperty({}, HEADER_ROW_TOGGLE_ITEM.key, 100), NUMBERED_ROWS_TOGGLE_ITEM.key, 200);
+export var ROW_BACKGROUND_SECTION_RANK = _defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100);
+export var ROW_ADD_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ADD_ROW_ABOVE_ITEM.key, 100), ADD_ROW_BELOW_ITEM.key, 200), MOVE_ROW_UP_ITEM.key, 300), MOVE_ROW_DOWN_ITEM.key, 400);
+export var ROW_DANGER_SECTION_RANK = _defineProperty(_defineProperty({}, CLEAR_CELLS_ITEM.key, 100), DELETE_ROW_ITEM.key, 200);

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

@@ -0,0 +1,27 @@
+/* TableMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./TableMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { memo, useMemo } from 'react';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { Box } from '@atlaskit/primitives/compiled';
+var tableMenuContainerStyles = {
+  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+};
+export var TableMenu = /*#__PURE__*/memo(function (_ref) {
+  var api = _ref.api,
+    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]);
+  if (components.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: tableMenuContainerStyles.container,
+    testId: surface.key
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    surface: surface,
+    components: components
+  }));
+});

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

@@ -1 +1 @@
-export var newMenuWidth = 280;
+export var TABLE_MENU_WIDTH = 280;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { COLUMN_BACKGROUND_SECTION, COLUMN_DANGER_SECTION, COLUMN_BACKGROUND_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from '../column/keys';
+import { ROW_BACKGROUND_SECTION, ROW_DANGER_SECTION, ROW_BACKGROUND_SECTION_RANK, ROW_DANGER_SECTION_RANK } from '../row/keys';
+import { BackgroundColorItem } from './items/BackgroundColorItem';
+import { ClearCellsItem } from './items/ClearCellsItem';
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from './keys';
+export var getSharedItems = function getSharedItems() {
+  return [{
+    type: BACKGROUND_COLOR_ITEM.type,
+    key: BACKGROUND_COLOR_ITEM.key,
+    parents: [{
+      type: ROW_BACKGROUND_SECTION.type,
+      key: ROW_BACKGROUND_SECTION.key,
+      rank: ROW_BACKGROUND_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
+    }, {
+      type: COLUMN_BACKGROUND_SECTION.type,
+      key: COLUMN_BACKGROUND_SECTION.key,
+      rank: COLUMN_BACKGROUND_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(BackgroundColorItem, null);
+    }
+  }, {
+    type: CLEAR_CELLS_ITEM.type,
+    key: CLEAR_CELLS_ITEM.key,
+    parents: [{
+      type: ROW_DANGER_SECTION.type,
+      key: ROW_DANGER_SECTION.key,
+      rank: ROW_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
+    }, {
+      type: COLUMN_DANGER_SECTION.type,
+      key: COLUMN_DANGER_SECTION.key,
+      rank: COLUMN_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(ClearCellsItem, null);
+    }
+  }];
+};

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

@@ -0,0 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
+import { getRowMenuComponents } from '../row/getRowMenuComponents';
+import { getSharedItems } from './getSharedItems';
+export var getTableMenuComponents = function getTableMenuComponents() {
+  return [].concat(_toConsumableArray(getRowMenuComponents()), _toConsumableArray(getColumnMenuComponents()), _toConsumableArray(getSharedItems()));
+};

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

@@ -14,17 +14,16 @@ var colorPaletteStyles = {
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-export var BackgroundColorItem = function BackgroundColorItem(_ref) {
-  var testId = _ref.testId;
+export var BackgroundColorItem = function BackgroundColorItem() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var selectedColor = '#ffffff';
   var onClick = useCallback(function () {}, []);
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = useMemo(function () {
     return {
-      backgroundColor: selectedColor
+      backgroundColor: '#ffffff'
     };
-  }, [selectedColor]);
+  }, []);
   var paletteOptions = useMemo(function () {
     return {
       palette: cellBackgroundColorPalette,
@@ -33,7 +32,6 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-    testId: testId,
     elemBefore: /*#__PURE__*/React.createElement(PaintBucketIcon, {
       color: "currentColor",
       label: "",
@@ -54,7 +52,7 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
   }, /*#__PURE__*/React.createElement(ColorPalette, {
     cols: colorPaletteColumns,
     onClick: onClick,
-    selectedColor: selectedColor,
+    selectedColor: colorPreviewStyle.backgroundColor,
     paletteOptions: paletteOptions
   })));
 };

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

@@ -3,13 +3,11 @@ import { useIntl } from 'react-intl';
 import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var ClearCellsItem = function ClearCellsItem(_ref) {
+export var ClearCellsItem = function ClearCellsItem() {
   var _tooltip;
-  var testId = _ref.testId;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    testId: testId,
     elemBefore: /*#__PURE__*/React.createElement(CrossIcon, {
       color: "currentColor",
       label: "",

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

@@ -0,0 +1,8 @@
+export var BACKGROUND_COLOR_ITEM = {
+  type: 'menu-item',
+  key: 'background-color'
+};
+export var CLEAR_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'clear-cells'
+};

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

@@ -0,0 +1,9 @@
+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/AddColumnLeftItem.d.ts

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