@atlaskit/editor-plugin-table 22.4.4 → 22.4.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.5
+
+### Patch Changes
+
+- [`593f5ee15ac0d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/593f5ee15ac0d) -
+  Add experiment-gated column handle menu surface and expose column menu icons through
+  editor-toolbar.
+- Updated dependencies
+
 ## 22.4.4
 
 ### Patch Changes

package/dist/cjs/tablePlugin.js

@@ -52,7 +52,7 @@ var _analytics2 = require("./pm-plugins/utils/analytics");
 var _create = require("./pm-plugins/utils/create");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
 var _ContentComponent = require("./ui/ContentComponent");
-var _getRowMenuComponents = require("./ui/TableMenu/row/getRowMenuComponents");
+var _getTableMenuComponents = require("./ui/TableMenu/shared/getTableMenuComponents");
 var _toolbar = require("./ui/toolbar");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -94,7 +94,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) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   if ((0, _expValEquals.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((0, _getRowMenuComponents.getRowMenuComponents)());
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getTableMenuComponents.getTableMenuComponents)());
   }
   return {
     name: 'table',

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

@@ -13,10 +13,12 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _RowMenu = require("../TableMenu/row/RowMenu");
+var _keys = require("../TableMenu/column/keys");
+var _keys2 = require("../TableMenu/row/keys");
 var _consts2 = require("../TableMenu/shared/consts");
+var _TableMenu = require("../TableMenu/shared/TableMenu");
 var _DragMenu = _interopRequireDefault(require("./DragMenu"));
-var rowMenuOffset = _consts.dragTableInsertColumnButtonSize + 4;
+var TABLE_MENU_OFFSET = _consts.dragTableInsertColumnButtonSize + 4;
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var _getEditorFeatureFlag;
   var mountPoint = _ref.mountPoint,
@@ -60,7 +62,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? _consts2.newMenuWidth : _consts.dragMenuDropdownWidth,
+    fitWidth: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? _consts2.TABLE_MENU_WIDTH : _consts.dragMenuDropdownWidth,
     fitHeight: _consts.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.
@@ -68,10 +70,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: inStickyMode ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? [rowMenuOffset, 0] : direction === 'row' ? [-9, 0] : [0, -7],
+    offset: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_RowMenu.RowMenu, {
-    api: api
+  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
+    api: api,
+    surface: direction === 'row' ? _keys2.ROW_MENU : _keys.COLUMN_MENU
   }) : /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
     editorView: editorView,
     isOpen: isOpen,

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

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _AddColumnLeftItem = require("./items/AddColumnLeftItem");
+var _AddColumnRightItem = require("./items/AddColumnRightItem");
+var _DeleteColumnItem = require("./items/DeleteColumnItem");
+var _DistributeColumnsItem = require("./items/DistributeColumnsItem");
+var _HeaderColumnToggleItem = require("./items/HeaderColumnToggleItem");
+var _MoveColumnRightItem = require("./items/MoveColumnRightItem");
+var _SortDecreasingItem = require("./items/SortDecreasingItem");
+var _SortIncreasingItem = require("./items/SortIncreasingItem");
+var _keys = require("./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.
+ */
+var getColumnMenuComponents = exports.getColumnMenuComponents = function getColumnMenuComponents() {
+  return [
+  // --- Menu surface ---
+  {
+    type: _keys.COLUMN_MENU.type,
+    key: _keys.COLUMN_MENU.key
+  },
+  // --- Toggle section (Header column) ---
+  {
+    type: _keys.COLUMN_TOGGLE_SECTION.type,
+    key: _keys.COLUMN_TOGGLE_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_TOGGLE_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: _keys.HEADER_COLUMN_TOGGLE_ITEM.type,
+    key: _keys.HEADER_COLUMN_TOGGLE_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_TOGGLE_SECTION.type,
+      key: _keys.COLUMN_TOGGLE_SECTION.key,
+      rank: _keys.COLUMN_TOGGLE_SECTION_RANK[_keys.HEADER_COLUMN_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeaderColumnToggleItem.HeaderColumnToggleItem, null);
+    }
+  },
+  // --- Background color section ---
+  {
+    type: _keys.COLUMN_BACKGROUND_SECTION.type,
+    key: _keys.COLUMN_BACKGROUND_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_BACKGROUND_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  },
+  // --- Sort section ---
+  {
+    type: _keys.COLUMN_SORT_SECTION.type,
+    key: _keys.COLUMN_SORT_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_SORT_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.SORT_INCREASING_ITEM.type,
+    key: _keys.SORT_INCREASING_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_SORT_SECTION.type,
+      key: _keys.COLUMN_SORT_SECTION.key,
+      rank: _keys.COLUMN_SORT_SECTION_RANK[_keys.SORT_INCREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_SortIncreasingItem.SortIncreasingItem, null);
+    }
+  }, {
+    type: _keys.SORT_DECREASING_ITEM.type,
+    key: _keys.SORT_DECREASING_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_SORT_SECTION.type,
+      key: _keys.COLUMN_SORT_SECTION.key,
+      rank: _keys.COLUMN_SORT_SECTION_RANK[_keys.SORT_DECREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_SortDecreasingItem.SortDecreasingItem, null);
+    }
+  },
+  // --- Add / Move section ---
+  {
+    type: _keys.COLUMN_ADD_SECTION.type,
+    key: _keys.COLUMN_ADD_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_ADD_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.ADD_COLUMN_LEFT_ITEM.type,
+    key: _keys.ADD_COLUMN_LEFT_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.ADD_COLUMN_LEFT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_AddColumnLeftItem.AddColumnLeftItem, null);
+    }
+  }, {
+    type: _keys.ADD_COLUMN_RIGHT_ITEM.type,
+    key: _keys.ADD_COLUMN_RIGHT_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.ADD_COLUMN_RIGHT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_AddColumnRightItem.AddColumnRightItem, null);
+    }
+  }, {
+    type: _keys.MOVE_COLUMN_RIGHT_ITEM.type,
+    key: _keys.MOVE_COLUMN_RIGHT_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.MOVE_COLUMN_RIGHT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MoveColumnRightItem.MoveColumnRightItem, null);
+    }
+  }, {
+    type: _keys.DISTRIBUTE_COLUMNS_ITEM.type,
+    key: _keys.DISTRIBUTE_COLUMNS_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_DistributeColumnsItem.DistributeColumnsItem, null);
+    }
+  },
+  // --- Danger section (Clear cells, Delete column) ---
+  {
+    type: _keys.COLUMN_DANGER_SECTION.type,
+    key: _keys.COLUMN_DANGER_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.DELETE_COLUMN_ITEM.type,
+    key: _keys.DELETE_COLUMN_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_DANGER_SECTION.type,
+      key: _keys.COLUMN_DANGER_SECTION.key,
+      rank: _keys.COLUMN_DANGER_SECTION_RANK[_keys.DELETE_COLUMN_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_DeleteColumnItem.DeleteColumnItem, null);
+    }
+  }];
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddColumnLeftItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var AddColumnLeftItem = exports.AddColumnLeftItem = function AddColumnLeftItem() {
+  var _tooltip;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnAddLeftIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.addColumnBefore)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.addColumnLeft));
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddColumnRightItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var AddColumnRightItem = exports.AddColumnRightItem = function AddColumnRightItem() {
+  var _tooltip;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnAddRightIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.addColumnAfter)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.addColumnRight));
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteColumnItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem() {
+  var _tooltip;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.removeColumns, {
+    0: 1
+  }));
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DistributeColumnsItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var DistributeColumnsItem = exports.DistributeColumnsItem = function DistributeColumnsItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnsDistributeIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.tableMessages.distributeColumns));
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderColumnToggleItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
+var HeaderColumnToggleItem = exports.HeaderColumnToggleItem = function HeaderColumnToggleItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(_messages.tableMessages.headerColumn);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
+      label: label,
+      isChecked: false
+    })
+  }, label);
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveColumnRightItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var getMoveColumnRightShortcut = function getMoveColumnRightShortcut() {
+  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveColumnRight : _keymaps.moveColumnRightOld);
+};
+var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRightItem() {
+  var _getMoveColumnRightSh;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnMoveRightIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveColumnRightSh = getMoveColumnRightShortcut()) !== null && _getMoveColumnRightSh !== void 0 ? _getMoveColumnRightSh : ''
+    })
+  }, formatMessage(_messages.tableMessages.moveColumnRight, {
+    0: 1
+  }));
+};

package/dist/cjs/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortDecreasingItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    isDisabled: true,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ArrowDownIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.tableMessages.sortColumnDecreasing));
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortIncreasingItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    isDisabled: true,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ArrowUpIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.tableMessages.sortColumnIncreasing));
+};

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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SORT_INCREASING_ITEM = exports.SORT_DECREASING_ITEM = exports.MOVE_COLUMN_RIGHT_ITEM = exports.HEADER_COLUMN_TOGGLE_ITEM = exports.DISTRIBUTE_COLUMNS_ITEM = exports.DELETE_COLUMN_ITEM = exports.COLUMN_TOGGLE_SECTION_RANK = exports.COLUMN_TOGGLE_SECTION = exports.COLUMN_SORT_SECTION_RANK = exports.COLUMN_SORT_SECTION = exports.COLUMN_SECTION_RANK = exports.COLUMN_MENU = exports.COLUMN_DANGER_SECTION_RANK = exports.COLUMN_DANGER_SECTION = exports.COLUMN_BACKGROUND_SECTION_RANK = exports.COLUMN_BACKGROUND_SECTION = exports.COLUMN_ADD_SECTION_RANK = exports.COLUMN_ADD_SECTION = exports.ADD_COLUMN_RIGHT_ITEM = exports.ADD_COLUMN_LEFT_ITEM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _keys = require("../shared/keys");
+// --- Menu surface ---
+
+var COLUMN_MENU = exports.COLUMN_MENU = {
+  type: 'menu',
+  key: 'column-handle-menu'
+};
+
+// --- Sections ---
+
+var COLUMN_TOGGLE_SECTION = exports.COLUMN_TOGGLE_SECTION = {
+  type: 'menu-section',
+  key: 'column-toggle-section'
+};
+var COLUMN_BACKGROUND_SECTION = exports.COLUMN_BACKGROUND_SECTION = {
+  type: 'menu-section',
+  key: 'column-background-section'
+};
+var COLUMN_SORT_SECTION = exports.COLUMN_SORT_SECTION = {
+  type: 'menu-section',
+  key: 'column-sort-section'
+};
+var COLUMN_ADD_SECTION = exports.COLUMN_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'column-add-section'
+};
+var COLUMN_DANGER_SECTION = exports.COLUMN_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'column-danger-section'
+};
+var COLUMN_SECTION_RANK = exports.COLUMN_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, 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);
+var HEADER_COLUMN_TOGGLE_ITEM = exports.HEADER_COLUMN_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'header-column-toggle'
+};
+var SORT_INCREASING_ITEM = exports.SORT_INCREASING_ITEM = {
+  type: 'menu-item',
+  key: 'sort-increasing'
+};
+var SORT_DECREASING_ITEM = exports.SORT_DECREASING_ITEM = {
+  type: 'menu-item',
+  key: 'sort-decreasing'
+};
+var ADD_COLUMN_LEFT_ITEM = exports.ADD_COLUMN_LEFT_ITEM = {
+  type: 'menu-item',
+  key: 'add-column-left'
+};
+var ADD_COLUMN_RIGHT_ITEM = exports.ADD_COLUMN_RIGHT_ITEM = {
+  type: 'menu-item',
+  key: 'add-column-right'
+};
+var MOVE_COLUMN_RIGHT_ITEM = exports.MOVE_COLUMN_RIGHT_ITEM = {
+  type: 'menu-item',
+  key: 'move-column-right'
+};
+var DISTRIBUTE_COLUMNS_ITEM = exports.DISTRIBUTE_COLUMNS_ITEM = {
+  type: 'menu-item',
+  key: 'distribute-columns'
+};
+var DELETE_COLUMN_ITEM = exports.DELETE_COLUMN_ITEM = {
+  type: 'menu-item',
+  key: 'delete-column'
+};
+
+// --- Item ranks within their sections ---
+
+var COLUMN_TOGGLE_SECTION_RANK = exports.COLUMN_TOGGLE_SECTION_RANK = (0, _defineProperty2.default)({}, HEADER_COLUMN_TOGGLE_ITEM.key, 100);
+var COLUMN_BACKGROUND_SECTION_RANK = exports.COLUMN_BACKGROUND_SECTION_RANK = (0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100);
+var COLUMN_SORT_SECTION_RANK = exports.COLUMN_SORT_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, SORT_INCREASING_ITEM.key, 100), SORT_DECREASING_ITEM.key, 200);
+var COLUMN_ADD_SECTION_RANK = exports.COLUMN_ADD_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ADD_COLUMN_LEFT_ITEM.key, 100), ADD_COLUMN_RIGHT_ITEM.key, 200), MOVE_COLUMN_RIGHT_ITEM.key, 300), DISTRIBUTE_COLUMNS_ITEM.key, 400);
+var COLUMN_DANGER_SECTION_RANK = exports.COLUMN_DANGER_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.CLEAR_CELLS_ITEM.key, 100), DELETE_COLUMN_ITEM.key, 200);