@atlaskit/editor-plugin-table 22.4.4 → 22.4.5

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

package/dist/esm/tablePlugin.js

@@ -46,7 +46,7 @@ import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/an
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
-import { getRowMenuComponents } from './ui/TableMenu/row/getRowMenuComponents';
+import { getTableMenuComponents } from './ui/TableMenu/shared/getTableMenuComponents';
 import { getToolbarConfig } from './ui/toolbar';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
@@ -85,7 +85,7 @@ var tablePlugin = function tablePlugin(_ref) {
   !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && editorExperiment('platform_editor_controls', 'variant1');
   if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
     var _api$uiControlRegistr;
-    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getRowMenuComponents());
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getTableMenuComponents());
   }
   return {
     name: 'table',

package/dist/esm/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';
-var rowMenuOffset = dragTableInsertColumnButtonSize + 4;
+var TABLE_MENU_OFFSET = dragTableInsertColumnButtonSize + 4;
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var _getEditorFeatureFlag;
   var mountPoint = _ref.mountPoint,
@@ -53,7 +55,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     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.
@@ -61,10 +63,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     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/esm/ui/TableMenu/column/getColumnMenuComponents.js

@@ -0,0 +1,188 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { AddColumnLeftItem } from './items/AddColumnLeftItem';
+import { AddColumnRightItem } from './items/AddColumnRightItem';
+import { DeleteColumnItem } from './items/DeleteColumnItem';
+import { DistributeColumnsItem } from './items/DistributeColumnsItem';
+import { HeaderColumnToggleItem } from './items/HeaderColumnToggleItem';
+import { MoveColumnRightItem } from './items/MoveColumnRightItem';
+import { SortDecreasingItem } from './items/SortDecreasingItem';
+import { SortIncreasingItem } from './items/SortIncreasingItem';
+import { COLUMN_MENU, COLUMN_TOGGLE_SECTION, COLUMN_BACKGROUND_SECTION, COLUMN_SORT_SECTION, COLUMN_ADD_SECTION, COLUMN_DANGER_SECTION, COLUMN_SECTION_RANK, HEADER_COLUMN_TOGGLE_ITEM, SORT_INCREASING_ITEM, SORT_DECREASING_ITEM, ADD_COLUMN_LEFT_ITEM, ADD_COLUMN_RIGHT_ITEM, MOVE_COLUMN_RIGHT_ITEM, DISTRIBUTE_COLUMNS_ITEM, DELETE_COLUMN_ITEM, COLUMN_TOGGLE_SECTION_RANK, COLUMN_SORT_SECTION_RANK, COLUMN_ADD_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from './keys';
+
+/**
+ * Returns the RegisterComponent[] array defining the column menu surface.
+ *
+ * This is a **UI-only stub** — all items are always visible with no conditional
+ * logic and no wired actions. Functional behaviour (actions, conditional visibility)
+ * will be connected in follow-up tickets.
+ */
+export var getColumnMenuComponents = function getColumnMenuComponents() {
+  return [
+  // --- Menu surface ---
+  {
+    type: COLUMN_MENU.type,
+    key: COLUMN_MENU.key
+  },
+  // --- Toggle section (Header column) ---
+  {
+    type: COLUMN_TOGGLE_SECTION.type,
+    key: COLUMN_TOGGLE_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_TOGGLE_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: HEADER_COLUMN_TOGGLE_ITEM.type,
+    key: HEADER_COLUMN_TOGGLE_ITEM.key,
+    parents: [{
+      type: COLUMN_TOGGLE_SECTION.type,
+      key: COLUMN_TOGGLE_SECTION.key,
+      rank: COLUMN_TOGGLE_SECTION_RANK[HEADER_COLUMN_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeaderColumnToggleItem, null);
+    }
+  },
+  // --- Background color section ---
+  {
+    type: COLUMN_BACKGROUND_SECTION.type,
+    key: COLUMN_BACKGROUND_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_BACKGROUND_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  },
+  // --- Sort section ---
+  {
+    type: COLUMN_SORT_SECTION.type,
+    key: COLUMN_SORT_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_SORT_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: SORT_INCREASING_ITEM.type,
+    key: SORT_INCREASING_ITEM.key,
+    parents: [{
+      type: COLUMN_SORT_SECTION.type,
+      key: COLUMN_SORT_SECTION.key,
+      rank: COLUMN_SORT_SECTION_RANK[SORT_INCREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(SortIncreasingItem, null);
+    }
+  }, {
+    type: SORT_DECREASING_ITEM.type,
+    key: SORT_DECREASING_ITEM.key,
+    parents: [{
+      type: COLUMN_SORT_SECTION.type,
+      key: COLUMN_SORT_SECTION.key,
+      rank: COLUMN_SORT_SECTION_RANK[SORT_DECREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(SortDecreasingItem, null);
+    }
+  },
+  // --- Add / Move section ---
+  {
+    type: COLUMN_ADD_SECTION.type,
+    key: COLUMN_ADD_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_ADD_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: ADD_COLUMN_LEFT_ITEM.type,
+    key: ADD_COLUMN_LEFT_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_LEFT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(AddColumnLeftItem, null);
+    }
+  }, {
+    type: ADD_COLUMN_RIGHT_ITEM.type,
+    key: ADD_COLUMN_RIGHT_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_RIGHT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(AddColumnRightItem, null);
+    }
+  }, {
+    type: MOVE_COLUMN_RIGHT_ITEM.type,
+    key: MOVE_COLUMN_RIGHT_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[MOVE_COLUMN_RIGHT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MoveColumnRightItem, null);
+    }
+  }, {
+    type: DISTRIBUTE_COLUMNS_ITEM.type,
+    key: DISTRIBUTE_COLUMNS_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[DISTRIBUTE_COLUMNS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DistributeColumnsItem, null);
+    }
+  },
+  // --- Danger section (Clear cells, Delete column) ---
+  {
+    type: COLUMN_DANGER_SECTION.type,
+    key: COLUMN_DANGER_SECTION.key,
+    parents: [{
+      type: COLUMN_MENU.type,
+      key: COLUMN_MENU.key,
+      rank: COLUMN_SECTION_RANK[COLUMN_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: DELETE_COLUMN_ITEM.type,
+    key: DELETE_COLUMN_ITEM.key,
+    parents: [{
+      type: COLUMN_DANGER_SECTION.type,
+      key: COLUMN_DANGER_SECTION.key,
+      rank: COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DeleteColumnItem, null);
+    }
+  }];
+};

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+export var DistributeColumnsItem = function DistributeColumnsItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(messages.distributeColumns));
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import Toggle from '@atlaskit/toggle';
+export var HeaderColumnToggleItem = function HeaderColumnToggleItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(messages.headerColumn);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};