@atlaskit/editor-plugin-table 22.4.11 → 22.4.13

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.13
+
+### Patch Changes
+
+- [`3e9a48e106cc7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e9a48e106cc7) -
+  Wire up column menu actions in the updated table menu
+- Updated dependencies
+
+## 22.4.12
+
+### Patch Changes
+
+- [`cae3f93f31a3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cae3f93f31a3f) -
+  Wire up actions with row menu refactor, add focus, blue, mouseenter and mouseleave events to
+  ToolbarDropdownItem
+- Updated dependencies
+
 ## 22.4.11
 
 ### Patch Changes

package/dist/cjs/tablePlugin.js

@@ -94,7 +94,9 @@ 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, _getTableMenuComponents.getTableMenuComponents)());
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getTableMenuComponents.getTableMenuComponents)({
+      api: api
+    }));
   }
   return {
     name: 'table',
@@ -122,6 +124,10 @@ var tablePlugin = function tablePlugin(_ref) {
         wasMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasMaxWidthEnabled),
         isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
         isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
+        isNumberColumnEnabled: tablePluginState.isNumberColumnEnabled,
+        isCommentEditor: tablePluginState.isCommentEditor,
+        isTableScalingEnabled: tablePluginState.isTableScalingEnabled,
+        isTableFixedColumnWidthsOptionEnabled: isTableFixedColumnWidthsOptionEnabled,
         ordering: tablePluginState.ordering,
         isResizing: !!(tableResizingPluginState !== null && tableResizingPluginState !== void 0 && tableResizingPluginState.dragging || tableWidthResizingPluginState !== null && tableWidthResizingPluginState !== void 0 && tableWidthResizingPluginState.resizing),
         isTableResizing: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.resizing,

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

@@ -14,11 +14,13 @@ var _ColumnToggleSection = require("./items/ColumnToggleSection");
 var _DeleteColumnItem = require("./items/DeleteColumnItem");
 var _DistributeColumnsItem = require("./items/DistributeColumnsItem");
 var _HeaderColumnToggleItem = require("./items/HeaderColumnToggleItem");
+var _MoveColumnLeftItem = require("./items/MoveColumnLeftItem");
 var _MoveColumnRightItem = require("./items/MoveColumnRightItem");
 var _SortDecreasingItem = require("./items/SortDecreasingItem");
 var _SortIncreasingItem = require("./items/SortIncreasingItem");
 var _keys = require("./keys");
-var getColumnMenuComponents = exports.getColumnMenuComponents = function getColumnMenuComponents() {
+var getColumnMenuComponents = exports.getColumnMenuComponents = function getColumnMenuComponents(_ref) {
+  var api = _ref.api;
   return [
   // --- Menu surface ---
   {
@@ -35,7 +37,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_TOGGLE_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/_react.default.createElement(_ColumnToggleSection.ColumnToggleSection, null, props.children);
+      return /*#__PURE__*/_react.default.createElement(_ColumnToggleSection.ColumnToggleSection, {
+        api: api
+      }, props.children);
     }
   }, {
     type: _keys.HEADER_COLUMN_TOGGLE_ITEM.type,
@@ -46,7 +50,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_TOGGLE_SECTION_RANK[_keys.HEADER_COLUMN_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_HeaderColumnToggleItem.HeaderColumnToggleItem, null);
+      return /*#__PURE__*/_react.default.createElement(_HeaderColumnToggleItem.HeaderColumnToggleItem, {
+        api: api
+      });
     }
   },
   // --- Background color section ---
@@ -59,7 +65,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_BACKGROUND_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/_react.default.createElement(_ColumnBackgroundSection.ColumnBackgroundSection, null, props.children);
+      return /*#__PURE__*/_react.default.createElement(_ColumnBackgroundSection.ColumnBackgroundSection, {
+        api: api
+      }, props.children);
     }
   },
   // --- Sort section ---
@@ -85,7 +93,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_SORT_SECTION_RANK[_keys.SORT_INCREASING_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_SortIncreasingItem.SortIncreasingItem, null);
+      return /*#__PURE__*/_react.default.createElement(_SortIncreasingItem.SortIncreasingItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.SORT_DECREASING_ITEM.type,
@@ -96,7 +106,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_SORT_SECTION_RANK[_keys.SORT_DECREASING_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_SortDecreasingItem.SortDecreasingItem, null);
+      return /*#__PURE__*/_react.default.createElement(_SortDecreasingItem.SortDecreasingItem, {
+        api: api
+      });
     }
   },
   // --- Add / Move section ---
@@ -122,7 +134,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.ADD_COLUMN_LEFT_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_AddColumnLeftItem.AddColumnLeftItem, null);
+      return /*#__PURE__*/_react.default.createElement(_AddColumnLeftItem.AddColumnLeftItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.ADD_COLUMN_RIGHT_ITEM.type,
@@ -133,7 +147,22 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.ADD_COLUMN_RIGHT_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_AddColumnRightItem.AddColumnRightItem, null);
+      return /*#__PURE__*/_react.default.createElement(_AddColumnRightItem.AddColumnRightItem, {
+        api: api
+      });
+    }
+  }, {
+    type: _keys.MOVE_COLUMN_LEFT_ITEM.type,
+    key: _keys.MOVE_COLUMN_LEFT_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.MOVE_COLUMN_LEFT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MoveColumnLeftItem.MoveColumnLeftItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.MOVE_COLUMN_RIGHT_ITEM.type,
@@ -144,7 +173,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.MOVE_COLUMN_RIGHT_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_MoveColumnRightItem.MoveColumnRightItem, null);
+      return /*#__PURE__*/_react.default.createElement(_MoveColumnRightItem.MoveColumnRightItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.DISTRIBUTE_COLUMNS_ITEM.type,
@@ -155,7 +186,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_DistributeColumnsItem.DistributeColumnsItem, null);
+      return /*#__PURE__*/_react.default.createElement(_DistributeColumnsItem.DistributeColumnsItem, {
+        api: api
+      });
     }
   },
   // --- Danger section (Clear cells, Delete column) ---
@@ -181,7 +214,9 @@ var getColumnMenuComponents = exports.getColumnMenuComponents = function getColu
       rank: _keys.COLUMN_DANGER_SECTION_RANK[_keys.DELETE_COLUMN_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_DeleteColumnItem.DeleteColumnItem, null);
+      return /*#__PURE__*/_react.default.createElement(_DeleteColumnItem.DeleteColumnItem, {
+        api: api
+      });
     }
   }];
 };

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

@@ -7,14 +7,47 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddColumnLeftItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var AddColumnLeftItem = exports.AddColumnLeftItem = function AddColumnLeftItem() {
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var AddColumnLeftItem = exports.AddColumnLeftItem = function AddColumnLeftItem(_ref) {
   var _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var tableState = states.tableState;
+      return {
+        isCommentEditor: tableState === null || tableState === void 0 ? void 0 : tableState.isCommentEditor,
+        isTableFixedColumnWidthsOptionEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableFixedColumnWidthsOptionEnabled,
+        isTableScalingEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableScalingEnabled
+      };
+    }),
+    isCommentEditor = _useSharedPluginState.isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled = _useSharedPluginState.isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled = _useSharedPluginState.isTableScalingEnabled;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (index === undefined) {
+      return;
+    }
+    var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    (0, _commandsWithAnalytics.insertColumnWithAnalytics)(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnAddLeftIcon, {
       color: "currentColor",
       label: "",

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

@@ -7,14 +7,47 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddColumnRightItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var AddColumnRightItem = exports.AddColumnRightItem = function AddColumnRightItem() {
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var AddColumnRightItem = exports.AddColumnRightItem = function AddColumnRightItem(_ref) {
   var _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var tableState = states.tableState;
+      return {
+        isCommentEditor: tableState === null || tableState === void 0 ? void 0 : tableState.isCommentEditor,
+        isTableFixedColumnWidthsOptionEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableFixedColumnWidthsOptionEnabled,
+        isTableScalingEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableScalingEnabled
+      };
+    }),
+    isCommentEditor = _useSharedPluginState.isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled = _useSharedPluginState.isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled = _useSharedPluginState.isTableScalingEnabled;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
+    if (index === undefined) {
+      return;
+    }
+    var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    (0, _commandsWithAnalytics.insertColumnWithAnalytics)(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnAddRightIcon, {
       color: "currentColor",
       label: "",

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ColumnBackgroundSection = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var _HeaderColumnToggleItem = require("./HeaderColumnToggleItem");
@@ -16,9 +17,21 @@ var _HeaderColumnToggleItem = require("./HeaderColumnToggleItem");
  * the very top of the menu.
  */
 var ColumnBackgroundSection = exports.ColumnBackgroundSection = function ColumnBackgroundSection(_ref) {
-  var children = _ref.children;
+  var api = _ref.api,
+    children = _ref.children;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
-  var hasSeparator = (0, _HeaderColumnToggleItem.shouldShowHeaderColumnToggle)(tableMenuContext);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        isHeaderColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.allowHeaderColumn
+      };
+    }),
+    isHeaderColumnAllowed = _useSharedPluginState.isHeaderColumnAllowed;
+  var hasSeparator = (0, _HeaderColumnToggleItem.shouldShowHeaderColumnToggle)({
+    isFirstColumn: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn,
+    isHeaderColumnAllowed: isHeaderColumnAllowed,
+    selectedColumnCount: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount
+  });
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
     hasSeparator: hasSeparator
   }, children);

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ColumnToggleSection = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var _HeaderColumnToggleItem = require("./HeaderColumnToggleItem");
@@ -15,9 +16,21 @@ var _HeaderColumnToggleItem = require("./HeaderColumnToggleItem");
  * empty wrapper (and so the section below can drop its leading separator).
  */
 var ColumnToggleSection = exports.ColumnToggleSection = function ColumnToggleSection(_ref) {
-  var children = _ref.children;
+  var api = _ref.api,
+    children = _ref.children;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
-  if (!(0, _HeaderColumnToggleItem.shouldShowHeaderColumnToggle)(tableMenuContext)) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        isHeaderColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.allowHeaderColumn
+      };
+    }),
+    isHeaderColumnAllowed = _useSharedPluginState.isHeaderColumnAllowed;
+  if (!(0, _HeaderColumnToggleItem.shouldShowHeaderColumnToggle)({
+    isFirstColumn: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn,
+    isHeaderColumnAllowed: isHeaderColumnAllowed,
+    selectedColumnCount: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount
+  })) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);

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

@@ -7,14 +7,71 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteColumnItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem() {
-  var _tooltip;
+var _commands = require("../../../../pm-plugins/commands");
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var _selection = require("../../../../pm-plugins/utils/selection");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem(_ref) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var tableState = states.tableState;
+      return {
+        isCommentEditor: tableState === null || tableState === void 0 ? void 0 : tableState.isCommentEditor,
+        isTableFixedColumnWidthsOptionEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableFixedColumnWidthsOptionEnabled,
+        isTableScalingEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableScalingEnabled
+      };
+    }),
+    isCommentEditor = _useSharedPluginState.isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled = _useSharedPluginState.isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled = _useSharedPluginState.isTableScalingEnabled;
+  var handleMouseEnter = function handleMouseEnter() {
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commands.hoverColumns)((0, _selection.getSelectedColumnIndexes)(selectionRect), true)(editorView.state, editorView.dispatch);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (!editorView) {
+      return;
+    }
+    (0, _commands.clearHoverSelection)()(editorView.state, editorView.dispatch);
+  };
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect)(editorView.state, editorView.dispatch, editorView);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    onFocus: handleMouseEnter,
+    onMouseEnter: handleMouseEnter,
+    onBlur: handleMouseLeave,
+    onMouseLeave: handleMouseLeave,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
       color: "currentColor",
       label: "",
@@ -24,6 +81,6 @@ var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem() {
       shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.removeColumns, {
-    0: 1
+    0: selectedColumnCount
   }));
 };

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

@@ -7,22 +7,60 @@ Object.defineProperty(exports, "__esModule", {
 exports.DistributeColumnsItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var _resizeState = require("../../../../pm-plugins/table-resizing/utils/resize-state");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 /** Distribute columns is only visible when more than one column is selected. */
-var shouldShowDistributeColumns = function shouldShowDistributeColumns(tableMenuContext) {
-  var _tableMenuContext$sel;
-  return ((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 0) > 1;
+var shouldShowDistributeColumns = function shouldShowDistributeColumns(selectedColumnCount) {
+  return (selectedColumnCount !== null && selectedColumnCount !== void 0 ? selectedColumnCount : 0) > 1;
 };
-var DistributeColumnsItem = exports.DistributeColumnsItem = function DistributeColumnsItem() {
+var DistributeColumnsItem = exports.DistributeColumnsItem = function DistributeColumnsItem(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  if (!shouldShowDistributeColumns(tableMenuContext)) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var tableState = states.tableState;
+      return {
+        isCommentEditor: tableState === null || tableState === void 0 ? void 0 : tableState.isCommentEditor,
+        isTableFixedColumnWidthsOptionEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableFixedColumnWidthsOptionEnabled,
+        isTableScalingEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableScalingEnabled
+      };
+    }),
+    isCommentEditor = _useSharedPluginState.isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled = _useSharedPluginState.isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled = _useSharedPluginState.isTableScalingEnabled;
+  var handleClick = function handleClick() {
+    var _api$width, _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    var editorContainerWidth = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
+    if (!selectionRect || !editorContainerWidth) {
+      return;
+    }
+    var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), function () {
+      return editorContainerWidth;
+    }, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
+    if (!newResizeState) {
+      return;
+    }
+    (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(editorView.state, editorView.dispatch);
+  };
+  if (!shouldShowDistributeColumns(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount)) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnsDistributeIcon, {
       color: "currentColor",
       label: "",

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

@@ -7,9 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.shouldShowHeaderColumnToggle = exports.HeaderColumnToggleItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 /**
  * Header column toggle is only visible when the first column is the entire
@@ -19,21 +22,49 @@ var _TableMenuContext = require("../../shared/TableMenuContext");
  * `ColumnBackgroundSection` (which drops its leading separator alongside)
  * can stay in lockstep with this rule without redefining it.
  */
-var shouldShowHeaderColumnToggle = exports.shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(tableMenuContext) {
-  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn) === true && tableMenuContext.selectedColumnCount === 1;
+var shouldShowHeaderColumnToggle = exports.shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(_ref) {
+  var isFirstColumn = _ref.isFirstColumn,
+    isHeaderColumnAllowed = _ref.isHeaderColumnAllowed,
+    selectedColumnCount = _ref.selectedColumnCount;
+  return isHeaderColumnAllowed === true && isFirstColumn === true && selectedColumnCount === 1;
 };
-var HeaderColumnToggleItem = exports.HeaderColumnToggleItem = function HeaderColumnToggleItem() {
+var HeaderColumnToggleItem = exports.HeaderColumnToggleItem = function HeaderColumnToggleItem(props) {
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState, _states$tableState2;
+      return {
+        isHeaderColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.allowHeaderColumn,
+        isHeaderColumnEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isHeaderColumnEnabled
+      };
+    }),
+    isHeaderColumnAllowed = _useSharedPluginState.isHeaderColumnAllowed,
+    isHeaderColumnEnabled = _useSharedPluginState.isHeaderColumnEnabled;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(_messages.tableMessages.headerColumn);
-  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    (0, _commandsWithAnalytics.toggleHeaderColumnWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(editorView.state, editorView.dispatch);
+  };
+  if (!shouldShowHeaderColumnToggle({
+    isFirstColumn: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn,
+    isHeaderColumnAllowed: isHeaderColumnAllowed,
+    selectedColumnCount: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount
+  })) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
       label: label,
-      isChecked: false
+      isChecked: !!isHeaderColumnEnabled,
+      onChange: handleClick
     })
   }, label);
 };

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveColumnLeftItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _tableColumnMoveLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-left"));
+var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _selection = require("../../../../pm-plugins/utils/selection");
+var _consts = require("../../shared/consts");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var shouldShowMoveColumnLeft = function shouldShowMoveColumnLeft(isFirstColumn) {
+  return !isFirstColumn;
+};
+var MoveColumnLeftItem = exports.MoveColumnLeftItem = function MoveColumnLeftItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+      };
+    }),
+    tableNode = _useSharedPluginState.tableNode;
+  var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_COLUMN, (0, _selection.getSelectedColumnIndexes)(selectionRect), selectionRect.left - 1)(editorView.state, editorView.dispatch);
+  };
+  if (!tableNode || !shouldShowMoveColumnLeft(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_tableColumnMoveLeft.default, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.moveColumnLeft)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.moveColumnLeft, {
+    0: selectedColumnCount
+  }));
+};