@atlaskit/editor-plugin-table 22.4.4 → 22.4.6

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -6,10 +6,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragMenuDropdownWidth, dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
-import { RowMenu } from '../TableMenu/row/RowMenu';
-import { newMenuWidth } from '../TableMenu/shared/consts';
+import { COLUMN_MENU } from '../TableMenu/column/keys';
+import { ROW_MENU } from '../TableMenu/row/keys';
+import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
+import { TableMenu } from '../TableMenu/shared/TableMenu';
 import DragMenu from './DragMenu';
-const rowMenuOffset = dragTableInsertColumnButtonSize + 4;
+const TABLE_MENU_OFFSET = dragTableInsertColumnButtonSize + 4;
 const FloatingDragMenu = ({
   mountPoint,
   boundariesElement,
@@ -54,7 +56,7 @@ const FloatingDragMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? newMenuWidth : dragMenuDropdownWidth,
+    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? TABLE_MENU_WIDTH : dragMenuDropdownWidth,
     fitHeight: tablePopupMenuFitHeight
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
@@ -62,10 +64,11 @@ const FloatingDragMenu = ({
     ,
     zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [rowMenuOffset, 0] : direction === 'row' ? [-9, 0] : [0, -7],
+    offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(RowMenu, {
-    api: api
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TableMenu, {
+    api: api,
+    surface: direction === 'row' ? ROW_MENU : COLUMN_MENU
   }) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,

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

@@ -0,0 +1,160 @@
+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 const getColumnMenuComponents = () => [
+// --- 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: props => /*#__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: () => /*#__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: props => /*#__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: props => /*#__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: () => /*#__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: () => /*#__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: props => /*#__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: () => /*#__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: () => /*#__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: () => /*#__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: () => /*#__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: props => /*#__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: () => /*#__PURE__*/React.createElement(DeleteColumnItem, null)
+}];

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

@@ -0,0 +1,21 @@
+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 const AddColumnLeftItem = () => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -0,0 +1,21 @@
+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 const AddColumnRightItem = () => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/column/items/DeleteColumnItem.js

@@ -0,0 +1,23 @@
+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 const DeleteColumnItem = () => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/column/items/DistributeColumnsItem.js

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

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

@@ -0,0 +1,17 @@
+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 const HeaderColumnToggleItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  const label = formatMessage(messages.headerColumn);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};

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

@@ -0,0 +1,25 @@
+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';
+const getMoveColumnRightShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveColumnRight : moveColumnRightOld);
+export const MoveColumnRightItem = () => {
+  var _getMoveColumnRightSh;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/column/items/SortDecreasingItem.js

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

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

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

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

@@ -0,0 +1,93 @@
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
+
+// --- Menu surface ---
+
+export const COLUMN_MENU = {
+  type: 'menu',
+  key: 'column-handle-menu'
+};
+
+// --- Sections ---
+
+export const COLUMN_TOGGLE_SECTION = {
+  type: 'menu-section',
+  key: 'column-toggle-section'
+};
+export const COLUMN_BACKGROUND_SECTION = {
+  type: 'menu-section',
+  key: 'column-background-section'
+};
+export const COLUMN_SORT_SECTION = {
+  type: 'menu-section',
+  key: 'column-sort-section'
+};
+export const COLUMN_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'column-add-section'
+};
+export const COLUMN_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'column-danger-section'
+};
+export const COLUMN_SECTION_RANK = {
+  [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 const HEADER_COLUMN_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'header-column-toggle'
+};
+export const SORT_INCREASING_ITEM = {
+  type: 'menu-item',
+  key: 'sort-increasing'
+};
+export const SORT_DECREASING_ITEM = {
+  type: 'menu-item',
+  key: 'sort-decreasing'
+};
+export const ADD_COLUMN_LEFT_ITEM = {
+  type: 'menu-item',
+  key: 'add-column-left'
+};
+export const ADD_COLUMN_RIGHT_ITEM = {
+  type: 'menu-item',
+  key: 'add-column-right'
+};
+export const MOVE_COLUMN_RIGHT_ITEM = {
+  type: 'menu-item',
+  key: 'move-column-right'
+};
+export const DISTRIBUTE_COLUMNS_ITEM = {
+  type: 'menu-item',
+  key: 'distribute-columns'
+};
+export const DELETE_COLUMN_ITEM = {
+  type: 'menu-item',
+  key: 'delete-column'
+};
+
+// --- Item ranks within their sections ---
+
+export const COLUMN_TOGGLE_SECTION_RANK = {
+  [HEADER_COLUMN_TOGGLE_ITEM.key]: 100
+};
+export const COLUMN_BACKGROUND_SECTION_RANK = {
+  [BACKGROUND_COLOR_ITEM.key]: 100
+};
+export const COLUMN_SORT_SECTION_RANK = {
+  [SORT_INCREASING_ITEM.key]: 100,
+  [SORT_DECREASING_ITEM.key]: 200
+};
+export const COLUMN_ADD_SECTION_RANK = {
+  [ADD_COLUMN_LEFT_ITEM.key]: 100,
+  [ADD_COLUMN_RIGHT_ITEM.key]: 200,
+  [MOVE_COLUMN_RIGHT_ITEM.key]: 300,
+  [DISTRIBUTE_COLUMNS_ITEM.key]: 400
+};
+export const COLUMN_DANGER_SECTION_RANK = {
+  [CLEAR_CELLS_ITEM.key]: 100,
+  [DELETE_COLUMN_ITEM.key]: 200
+};

package/dist/es2019/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.
@@ -25,7 +29,7 @@ export const 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: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
 }, {
@@ -34,7 +38,7 @@ export const 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: () => /*#__PURE__*/React.createElement(HeaderRowToggleItem, null)
 }, {
@@ -43,7 +47,7 @@ export const 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: () => /*#__PURE__*/React.createElement(NumberedRowsToggleItem, null)
 },
@@ -54,22 +58,11 @@ export const 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: props => /*#__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: () => /*#__PURE__*/React.createElement(BackgroundColorItem, {
-    testId: "row-menu-background-color"
-  })
 },
 // --- Add / Move section ---
 {
@@ -78,7 +71,7 @@ export const 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: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: true
@@ -89,7 +82,7 @@ export const 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: () => /*#__PURE__*/React.createElement(AddRowAboveItem, null)
 }, {
@@ -98,7 +91,7 @@ export const 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: () => /*#__PURE__*/React.createElement(AddRowBelowItem, null)
 }, {
@@ -107,7 +100,7 @@ export const 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: () => /*#__PURE__*/React.createElement(MoveRowUpItem, null)
 }, {
@@ -116,7 +109,7 @@ export const 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: () => /*#__PURE__*/React.createElement(MoveRowDownItem, null)
 },
@@ -127,29 +120,18 @@ export const 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: props => /*#__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: () => /*#__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: () => /*#__PURE__*/React.createElement(DeleteRowItem, null)
 }];

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

@@ -0,0 +1,21 @@
+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 const AddRowAboveItem = () => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/row/items/AddRowBelowItem.js

@@ -0,0 +1,21 @@
+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 const AddRowBelowItem = () => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/row/items/DeleteRowItem.js

@@ -0,0 +1,23 @@
+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 const DeleteRowItem = () => {
+  var _tooltip;
+  const {
+    formatMessage
+  } = useIntl();
+  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
+  }));
+};