@atlaskit/editor-plugin-table 22.4.12 → 22.4.13

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

@@ -1,13 +1,70 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { deleteColumn, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var DeleteColumnItem = function DeleteColumnItem() {
-  var _tooltip;
+import { clearHoverSelection, hoverColumns } from '../../../../pm-plugins/commands';
+import { deleteColumnsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+export var DeleteColumnItem = function DeleteColumnItem(_ref) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var 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 = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = 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 = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    hoverColumns(getSelectedColumnIndexes(selectionRect), true)(editorView.state, editorView.dispatch);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (!editorView) {
+      return;
+    }
+    clearHoverSelection()(editorView.state, editorView.dispatch);
+  };
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    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)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect)(editorView.state, editorView.dispatch, editorView);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    onFocus: handleMouseEnter,
+    onMouseEnter: handleMouseEnter,
+    onBlur: handleMouseLeave,
+    onMouseLeave: handleMouseLeave,
     elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
       color: "currentColor",
       label: "",
@@ -17,6 +74,6 @@ export var DeleteColumnItem = function DeleteColumnItem() {
       shortcut: (_tooltip = tooltip(deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.removeColumns, {
-    0: 1
+    0: selectedColumnCount
   }));
 };

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

@@ -1,22 +1,59 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { distributeColumnsWidthsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getNewResizeStateFromSelectedColumns } from '../../../../pm-plugins/table-resizing/utils/resize-state';
 import { useTableMenuContext } from '../../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;
 };
-export var DistributeColumnsItem = function DistributeColumnsItem() {
+export var DistributeColumnsItem = function DistributeColumnsItem(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  if (!shouldShowDistributeColumns(tableMenuContext)) {
+  var _useSharedPluginState = 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 = 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 = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), function () {
+      return editorContainerWidth;
+    }, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
+    if (!newResizeState) {
+      return;
+    }
+    distributeColumnsWidthsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(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.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
       color: "currentColor",
       label: "",

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
+import { toggleHeaderColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /**
  * Header column toggle is only visible when the first column is the entire
  * selection.
@@ -13,21 +15,49 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
  * `ColumnBackgroundSection` (which drops its leading separator alongside)
  * can stay in lockstep with this rule without redefining it.
  */
-export var shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(tableMenuContext) {
-  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn) === true && tableMenuContext.selectedColumnCount === 1;
+export var shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(_ref) {
+  var isFirstColumn = _ref.isFirstColumn,
+    isHeaderColumnAllowed = _ref.isHeaderColumnAllowed,
+    selectedColumnCount = _ref.selectedColumnCount;
+  return isHeaderColumnAllowed === true && isFirstColumn === true && selectedColumnCount === 1;
 };
-export var HeaderColumnToggleItem = function HeaderColumnToggleItem() {
+export var HeaderColumnToggleItem = function HeaderColumnToggleItem(props) {
+  var api = props.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _useSharedPluginState = 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 = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(messages.headerColumn);
-  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    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.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,
-      isChecked: false
+      isChecked: !!isHeaderColumnEnabled,
+      onChange: handleClick
     })
   }, label);
 };

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { moveColumnLeft, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
+import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
+import { TABLE_COLUMN } from '../../shared/consts';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+var shouldShowMoveColumnLeft = function shouldShowMoveColumnLeft(isFirstColumn) {
+  return !isFirstColumn;
+};
+export var MoveColumnLeftItem = function MoveColumnLeftItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = useTableMenuContext();
+  var _useSharedPluginState = 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 = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    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, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, 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.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(TableColumnMoveLeftIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(moveColumnLeft)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.moveColumnLeft, {
+    0: selectedColumnCount
+  }));
+};

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

@@ -1,13 +1,52 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var MoveColumnRightItem = function MoveColumnRightItem() {
-  var _tooltip;
+import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
+import { TABLE_COLUMN } from '../../shared/consts';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+var shouldShowMoveColumnRight = function shouldShowMoveColumnRight(isLastColumn) {
+  return !isLastColumn;
+};
+export var MoveColumnRightItem = function MoveColumnRightItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = useTableMenuContext();
+  var _useSharedPluginState = 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 = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    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, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.right)(editorView.state, editorView.dispatch);
+  };
+  if (!tableNode || !shouldShowMoveColumnRight(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastColumn)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableColumnMoveRightIcon, {
       color: "currentColor",
       label: "",
@@ -17,6 +56,6 @@ export var MoveColumnRightItem = function MoveColumnRightItem() {
       shortcut: (_tooltip = tooltip(moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.moveColumnRight, {
-    0: 1
+    0: selectedColumnCount
   }));
 };

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

@@ -1,13 +1,34 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-export var SortDecreasingItem = function SortDecreasingItem() {
+export var SortDecreasingItem = function SortDecreasingItem(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    var columnIndex = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (columnIndex === undefined) {
+      return;
+    }
+    sortColumnWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, SortOrder.DESC)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       color: "currentColor",

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

@@ -1,13 +1,34 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowUpIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-export var SortIncreasingItem = function SortIncreasingItem() {
+export var SortIncreasingItem = function SortIncreasingItem(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    var columnIndex = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (columnIndex === undefined) {
+      return;
+    }
+    sortColumnWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, SortOrder.ASC)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       color: "currentColor",

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

@@ -51,6 +51,10 @@ export var ADD_COLUMN_RIGHT_ITEM = {
   type: 'menu-item',
   key: 'add-column-right'
 };
+export var MOVE_COLUMN_LEFT_ITEM = {
+  type: 'menu-item',
+  key: 'move-column-left'
+};
 export var MOVE_COLUMN_RIGHT_ITEM = {
   type: 'menu-item',
   key: 'move-column-right'
@@ -69,5 +73,5 @@ export var DELETE_COLUMN_ITEM = {
 export var COLUMN_TOGGLE_SECTION_RANK = _defineProperty({}, HEADER_COLUMN_TOGGLE_ITEM.key, 100);
 export var COLUMN_BACKGROUND_SECTION_RANK = _defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100);
 export var COLUMN_SORT_SECTION_RANK = _defineProperty(_defineProperty({}, SORT_INCREASING_ITEM.key, 100), SORT_DECREASING_ITEM.key, 200);
-export var COLUMN_ADD_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ADD_COLUMN_LEFT_ITEM.key, 100), ADD_COLUMN_RIGHT_ITEM.key, 200), MOVE_COLUMN_RIGHT_ITEM.key, 300), DISTRIBUTE_COLUMNS_ITEM.key, 400);
+export var COLUMN_ADD_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ADD_COLUMN_LEFT_ITEM.key, 100), ADD_COLUMN_RIGHT_ITEM.key, 200), MOVE_COLUMN_LEFT_ITEM.key, 300), MOVE_COLUMN_RIGHT_ITEM.key, 400), DISTRIBUTE_COLUMNS_ITEM.key, 500);
 export var COLUMN_DANGER_SECTION_RANK = _defineProperty(_defineProperty({}, CLEAR_CELLS_ITEM.key, 100), DELETE_COLUMN_ITEM.key, 200);

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

@@ -4,5 +4,5 @@ import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
 export var getTableMenuComponents = function getTableMenuComponents(params) {
-  return [].concat(_toConsumableArray(getRowMenuComponents(params)), _toConsumableArray(getColumnMenuComponents()), _toConsumableArray(getCellMenuComponents()), _toConsumableArray(getSharedItems(params)));
+  return [].concat(_toConsumableArray(getRowMenuComponents(params)), _toConsumableArray(getColumnMenuComponents(params)), _toConsumableArray(getCellMenuComponents()), _toConsumableArray(getSharedItems(params)));
 };

package/dist/types/types/index.d.ts

@@ -34,13 +34,14 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'isMaxWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'wasMaxWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'isNumberColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'isMaxWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'wasMaxWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'isNumberColumnEnabled' | 'isCommentEditor' | 'isTableScalingEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     editorContentAreaHeight?: number;
     isDragMenuOpen?: boolean;
     isResizing: boolean;
     isSizeSelectorOpen?: boolean;
+    isTableFixedColumnWidthsOptionEnabled?: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
     resizingTableLocalId?: string;

package/dist/types/ui/TableMenu/column/getColumnMenuComponents.d.ts

@@ -1,2 +1,3 @@
 import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
-export declare const getColumnMenuComponents: () => RegisterComponent[];
+import type { TableMenuComponentsParams } from '../shared/types';
+export declare const getColumnMenuComponents: ({ api }: TableMenuComponentsParams) => RegisterComponent[];

package/dist/types/ui/TableMenu/column/items/AddColumnLeftItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const AddColumnLeftItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const AddColumnLeftItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;

package/dist/types/ui/TableMenu/column/items/AddColumnRightItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const AddColumnRightItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const AddColumnRightItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;

package/dist/types/ui/TableMenu/column/items/ColumnBackgroundSection.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import type { TableMenuComponentsParams } from '../../shared/types';
 /**
  * Background section sits directly below `ColumnToggleSection`. Its separator
  * exists only to divide it from the toggle section; when the toggle section
  * is hidden, the separator must drop too so we don't render a stray rule at
  * the very top of the menu.
  */
-export declare const ColumnBackgroundSection: ({ children, }: {
+export declare const ColumnBackgroundSection: ({ api, children, }: TableMenuComponentsParams & {
     children?: React.ReactNode;
 }) => React.JSX.Element;

package/dist/types/ui/TableMenu/column/items/ColumnToggleSection.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { TableMenuComponentsParams } from '../../shared/types';
 /**
  * The toggle section currently contains only the Header column toggle. When
  * that item is hidden, the whole section disappears so we don't render an
  * empty wrapper (and so the section below can drop its leading separator).
  */
-export declare const ColumnToggleSection: ({ children, }: {
+export declare const ColumnToggleSection: ({ api, children, }: TableMenuComponentsParams & {
     children?: React.ReactNode;
 }) => React.JSX.Element | null;

package/dist/types/ui/TableMenu/column/items/DeleteColumnItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const DeleteColumnItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const DeleteColumnItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;

package/dist/types/ui/TableMenu/column/items/DistributeColumnsItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const DistributeColumnsItem: () => React.JSX.Element | null;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const DistributeColumnsItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element | null;

package/dist/types/ui/TableMenu/column/items/HeaderColumnToggleItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TableMenuContextValue } from '../../shared/TableMenuContext';
+import type { TableMenuComponentsParams } from '../../shared/types';
 /**
  * Header column toggle is only visible when the first column is the entire
  * selection.
@@ -8,5 +8,9 @@ import { type TableMenuContextValue } from '../../shared/TableMenuContext';
  * `ColumnBackgroundSection` (which drops its leading separator alongside)
  * can stay in lockstep with this rule without redefining it.
  */
-export declare const shouldShowHeaderColumnToggle: (tableMenuContext?: TableMenuContextValue) => boolean;
-export declare const HeaderColumnToggleItem: () => React.JSX.Element | null;
+export declare const shouldShowHeaderColumnToggle: ({ isFirstColumn, isHeaderColumnAllowed, selectedColumnCount, }: {
+    isFirstColumn?: boolean;
+    isHeaderColumnAllowed?: boolean;
+    selectedColumnCount?: number;
+}) => boolean;
+export declare const HeaderColumnToggleItem: (props: TableMenuComponentsParams) => React.JSX.Element | null;

package/dist/types/ui/TableMenu/column/items/MoveColumnLeftItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const MoveColumnLeftItem: (props: TableMenuComponentsParams) => React.JSX.Element | null;

package/dist/types/ui/TableMenu/column/items/MoveColumnRightItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const MoveColumnRightItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const MoveColumnRightItem: (props: TableMenuComponentsParams) => React.JSX.Element | null;

package/dist/types/ui/TableMenu/column/items/SortDecreasingItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const SortDecreasingItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const SortDecreasingItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;

package/dist/types/ui/TableMenu/column/items/SortIncreasingItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const SortIncreasingItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const SortIncreasingItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;

package/dist/types/ui/TableMenu/column/keys.d.ts

@@ -11,6 +11,7 @@ export declare const SORT_INCREASING_ITEM: MenuItemType;
 export declare const SORT_DECREASING_ITEM: MenuItemType;
 export declare const ADD_COLUMN_LEFT_ITEM: MenuItemType;
 export declare const ADD_COLUMN_RIGHT_ITEM: MenuItemType;
+export declare const MOVE_COLUMN_LEFT_ITEM: MenuItemType;
 export declare const MOVE_COLUMN_RIGHT_ITEM: MenuItemType;
 export declare const DISTRIBUTE_COLUMNS_ITEM: MenuItemType;
 export declare const DELETE_COLUMN_ITEM: MenuItemType;

package/dist/types-ts4.5/types/index.d.ts

@@ -34,13 +34,14 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'isMaxWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'wasMaxWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'isNumberColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'isMaxWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'wasMaxWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'isNumberColumnEnabled' | 'isCommentEditor' | 'isTableScalingEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     editorContentAreaHeight?: number;
     isDragMenuOpen?: boolean;
     isResizing: boolean;
     isSizeSelectorOpen?: boolean;
+    isTableFixedColumnWidthsOptionEnabled?: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
     resizingTableLocalId?: string;

package/dist/types-ts4.5/ui/TableMenu/column/getColumnMenuComponents.d.ts

@@ -1,2 +1,3 @@
 import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
-export declare const getColumnMenuComponents: () => RegisterComponent[];
+import type { TableMenuComponentsParams } from '../shared/types';
+export declare const getColumnMenuComponents: ({ api }: TableMenuComponentsParams) => RegisterComponent[];

package/dist/types-ts4.5/ui/TableMenu/column/items/AddColumnLeftItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const AddColumnLeftItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const AddColumnLeftItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;

package/dist/types-ts4.5/ui/TableMenu/column/items/AddColumnRightItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const AddColumnRightItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../../shared/types';
+export declare const AddColumnRightItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;