@atlaskit/editor-plugin-table 22.4.3 → 22.4.5

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

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

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

@@ -0,0 +1,25 @@
+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';
+const getMoveRowDownShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : moveRowDownOld);
+export const MoveRowDownItem = () => {
+  var _getMoveRowDownShortc;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/row/items/MoveRowUpItem.js

@@ -0,0 +1,25 @@
+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';
+const getMoveRowUpShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : moveRowUpOld);
+export const MoveRowUpItem = () => {
+  var _getMoveRowUpShortcut;
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/ui/TableMenu/row/items/NumberedRowsToggleItem.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 NumberedRowsToggleItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  const label = formatMessage(messages.numberedRows);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};

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

@@ -1,3 +1,5 @@
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
+
 // --- Menu surface ---
 
 export const ROW_MENU = {
@@ -23,7 +25,7 @@ export const ROW_DANGER_SECTION = {
   type: 'menu-section',
   key: 'row-danger-section'
 };
-export const ROW_SECTION_RANK = {
+export const ROW_MENU_SECTION_RANK = {
   [ROW_TOGGLE_SECTION.key]: 100,
   [ROW_BACKGROUND_SECTION.key]: 200,
   [ROW_ADD_SECTION.key]: 300,
@@ -37,10 +39,6 @@ export const NUMBERED_ROWS_TOGGLE_ITEM = {
   type: 'menu-item',
   key: 'numbered-rows-toggle'
 };
-export const BACKGROUND_COLOR_ITEM = {
-  type: 'menu-item',
-  key: 'background-color'
-};
 export const ADD_ROW_ABOVE_ITEM = {
   type: 'menu-item',
   key: 'add-row-above'
@@ -57,10 +55,6 @@ export const MOVE_ROW_DOWN_ITEM = {
   type: 'menu-item',
   key: 'move-row-down'
 };
-export const CLEAR_CELLS_ITEM = {
-  type: 'menu-item',
-  key: 'clear-cells'
-};
 export const DELETE_ROW_ITEM = {
   type: 'menu-item',
   key: 'delete-row'
@@ -68,20 +62,20 @@ export const DELETE_ROW_ITEM = {
 
 // --- Item ranks within their sections ---
 
-export const TOGGLE_SECTION_ITEM_RANK = {
+export const ROW_TOGGLE_SECTION_RANK = {
   [HEADER_ROW_TOGGLE_ITEM.key]: 100,
   [NUMBERED_ROWS_TOGGLE_ITEM.key]: 200
 };
-export const BACKGROUND_SECTION_ITEM_RANK = {
+export const ROW_BACKGROUND_SECTION_RANK = {
   [BACKGROUND_COLOR_ITEM.key]: 100
 };
-export const ADD_SECTION_ITEM_RANK = {
+export const ROW_ADD_SECTION_RANK = {
   [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 const DANGER_SECTION_ITEM_RANK = {
+export const ROW_DANGER_SECTION_RANK = {
   [CLEAR_CELLS_ITEM.key]: 100,
   [DELETE_ROW_ITEM.key]: 200
 };

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

@@ -0,0 +1,28 @@
+/* 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';
+const tableMenuContainerStyles = {
+  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+};
+export const TableMenu = /*#__PURE__*/memo(({
+  api,
+  surface
+}) => {
+  const components = useMemo(() => {
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
+    return (_api$uiControlRegistr = api === null || api === void 0 ? 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/es2019/ui/TableMenu/shared/consts.js

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

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

@@ -0,0 +1,33 @@
+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 const getSharedItems = () => [{
+  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: () => /*#__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: () => /*#__PURE__*/React.createElement(ClearCellsItem, null)
+}];

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

@@ -0,0 +1,4 @@
+import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
+import { getRowMenuComponents } from '../row/getRowMenuComponents';
+import { getSharedItems } from './getSharedItems';
+export const getTableMenuComponents = () => [...getRowMenuComponents(), ...getColumnMenuComponents(), ...getSharedItems()];

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

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

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

@@ -3,15 +3,12 @@ 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 const ClearCellsItem = ({
-  testId
-}) => {
+export const ClearCellsItem = () => {
   var _tooltip;
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    testId: testId,
     elemBefore: /*#__PURE__*/React.createElement(CrossIcon, {
       color: "currentColor",
       label: "",

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

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