@atlaskit/editor-plugin-table 22.4.11 → 22.4.13

package/dist/esm/ui/TableMenu/row/items/DeleteRowItem.js

@@ -1,13 +1,65 @@
 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 { deleteRow, 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 DeleteRowItem = function DeleteRowItem() {
-  var _tooltip;
+import { clearHoverSelection, hoverRows } from '../../../../pm-plugins/commands';
+import { deleteRowsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+export var DeleteRowItem = function DeleteRowItem(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 {
+        isHeaderRowRequired: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.isHeaderRowRequired
+      };
+    }),
+    isHeaderRowRequired = _useSharedPluginState.isHeaderRowRequired;
+  var selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleMouseEnter = function handleMouseEnter() {
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    hoverRows(getSelectedRowIndexes(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;
+    }
+    deleteRowsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(editorView.state, editorView.dispatch);
+  };
   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 +69,6 @@ export var DeleteRowItem = function DeleteRowItem() {
       shortcut: (_tooltip = tooltip(deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.removeRows, {
-    0: 1
+    0: selectedRowCount
   }));
 };

package/dist/esm/ui/TableMenu/row/items/HeaderRowToggleItem.js

@@ -1,26 +1,58 @@
 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 { toggleHeaderRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /** Header row toggle is only visible when the first row is the entire selection. */
-var shouldShowHeaderRowToggle = function shouldShowHeaderRowToggle(tableMenuContext) {
-  return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow) === true && tableMenuContext.selectedRowCount === 1;
+var shouldShowHeaderRowToggle = function shouldShowHeaderRowToggle(_ref) {
+  var isFirstRow = _ref.isFirstRow,
+    isHeaderRowAllowed = _ref.isHeaderRowAllowed,
+    selectedRowCount = _ref.selectedRowCount;
+  return isHeaderRowAllowed === true && isFirstRow && selectedRowCount === 1;
 };
-export var HeaderRowToggleItem = function HeaderRowToggleItem() {
+export var HeaderRowToggleItem = function HeaderRowToggleItem(props) {
+  var _tableMenuContext$sel;
+  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 {
+        isHeaderRowAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.allowHeaderRow,
+        isHeaderRowEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isHeaderRowEnabled
+      };
+    }),
+    isHeaderRowAllowed = _useSharedPluginState.isHeaderRowAllowed,
+    isHeaderRowEnabled = _useSharedPluginState.isHeaderRowEnabled;
+  var selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 0;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(messages.headerRow);
-  if (!shouldShowHeaderRowToggle(tableMenuContext)) {
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    toggleHeaderRowWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(editorView.state, editorView.dispatch);
+  };
+  if (!shouldShowHeaderRowToggle({
+    isFirstRow: (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow) === true,
+    isHeaderRowAllowed: isHeaderRowAllowed,
+    selectedRowCount: selectedRowCount
+  })) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,
-      isChecked: false
+      isChecked: !!isHeaderRowEnabled,
+      onChange: handleClick
     })
   }, label);
 };

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

@@ -1,36 +1,61 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { moveRowDown, moveRowDownOld, tooltip } from '@atlaskit/editor-common/keymaps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { moveRowDown, 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 { TableRowMoveDownIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
+import { TABLE_ROW } from '../../shared/consts';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-var getMoveRowDownShortcut = function getMoveRowDownShortcut() {
-  return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : moveRowDownOld);
+var shouldShowMoveRowDown = function shouldShowMoveRowDown(isLastRow) {
+  return !isLastRow;
 };
-
-/** Move row down is hidden when the selection includes the last row (cannot move further down). */
-var shouldShowMoveRowDown = function shouldShowMoveRowDown(tableMenuContext) {
-  return !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isLastRow);
-};
-export var MoveRowDownItem = function MoveRowDownItem() {
-  var _getMoveRowDownShortc;
+export var MoveRowDownItem = function MoveRowDownItem(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 selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  if (!shouldShowMoveRowDown(tableMenuContext)) {
+  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_ROW, getSelectedRowIndexes(selectionRect), selectionRect.bottom)(editorView.state, editorView.dispatch);
+  };
+  if (!tableNode || !shouldShowMoveRowDown(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastRow)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
     elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveRowDownShortc = getMoveRowDownShortcut()) !== null && _getMoveRowDownShortc !== void 0 ? _getMoveRowDownShortc : ''
+      shortcut: (_tooltip = tooltip(moveRowDown)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.moveRowDown, {
-    0: 1
+    0: selectedRowCount
   }));
 };

package/dist/esm/ui/TableMenu/row/items/MoveRowUpItem.js

@@ -1,36 +1,61 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { moveRowUp, moveRowUpOld, tooltip } from '@atlaskit/editor-common/keymaps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { moveRowUp, 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 { TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
+import { TABLE_ROW } from '../../shared/consts';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-var getMoveRowUpShortcut = function getMoveRowUpShortcut() {
-  return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : moveRowUpOld);
+var shouldShowMoveRowUp = function shouldShowMoveRowUp(isFirstRow) {
+  return !isFirstRow;
 };
-
-/** Move row up is hidden when the selection includes row 0 (cannot move further up). */
-var shouldShowMoveRowUp = function shouldShowMoveRowUp(tableMenuContext) {
-  return !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isFirstRow);
-};
-export var MoveRowUpItem = function MoveRowUpItem() {
-  var _getMoveRowUpShortcut;
+export var MoveRowUpItem = function MoveRowUpItem(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 selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  if (!shouldShowMoveRowUp(tableMenuContext)) {
+  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_ROW, getSelectedRowIndexes(selectionRect), selectionRect.top - 1)(editorView.state, editorView.dispatch);
+  };
+  if (!tableNode || !shouldShowMoveRowUp(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
     elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveRowUpShortcut = getMoveRowUpShortcut()) !== null && _getMoveRowUpShortcut !== void 0 ? _getMoveRowUpShortcut : ''
+      shortcut: (_tooltip = tooltip(moveRowUp)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.moveRowUp, {
-    0: 1
+    0: selectedRowCount
   }));
 };

package/dist/esm/ui/TableMenu/row/items/NumberedRowsToggleItem.js

@@ -1,16 +1,43 @@
 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';
-export var NumberedRowsToggleItem = function NumberedRowsToggleItem() {
+import { toggleNumberColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export var NumberedRowsToggleItem = function NumberedRowsToggleItem(props) {
+  var api = props.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState, _states$tableState2;
+      return {
+        isNumberColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.allowNumberColumn,
+        isNumberColumnEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isNumberColumnEnabled
+      };
+    }),
+    isNumberColumnAllowed = _useSharedPluginState.isNumberColumnAllowed,
+    isNumberColumnEnabled = _useSharedPluginState.isNumberColumnEnabled;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(messages.numberedRows);
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    toggleNumberColumnWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(editorView.state, editorView.dispatch);
+  };
+  if (!isNumberColumnAllowed) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,
-      isChecked: false
+      isChecked: !!isNumberColumnEnabled,
+      onChange: handleClick
     })
   }, label);
 };

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

@@ -1,2 +1,4 @@
 export var TABLE_MENU_WIDTH = 280;
-export var TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-nested-dropdown-menu]';
+export var TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-nested-dropdown-menu]';
+export var TABLE_ROW = 'table-row';
+export var TABLE_COLUMN = 'table-column';

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

@@ -5,7 +5,8 @@ import { ROW_BACKGROUND_SECTION, ROW_DANGER_SECTION, ROW_BACKGROUND_SECTION_RANK
 import { BackgroundColorItem } from './items/BackgroundColorItem';
 import { ClearCellsItem } from './items/ClearCellsItem';
 import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from './keys';
-export var getSharedItems = function getSharedItems() {
+export var getSharedItems = function getSharedItems(_ref) {
+  var api = _ref.api;
   return [{
     type: BACKGROUND_COLOR_ITEM.type,
     key: BACKGROUND_COLOR_ITEM.key,
@@ -42,7 +43,9 @@ export var getSharedItems = function getSharedItems() {
       rank: CELL_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(ClearCellsItem, null);
+      return /*#__PURE__*/React.createElement(ClearCellsItem, {
+        api: api
+      });
     }
   }];
 };

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

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

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

@@ -1,13 +1,33 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var ClearCellsItem = function ClearCellsItem() {
-  var _tooltip;
+import { emptyMultipleCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../TableMenuContext';
+export var ClearCellsItem = function ClearCellsItem(_ref) {
+  var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = useTableMenuContext();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var selectedCellCount = Math.max((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1, (_tableMenuContext$sel2 = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel2 !== void 0 ? _tableMenuContext$sel2 : 1);
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var _getPluginState = getPluginState(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    emptyMultipleCellsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(CrossIcon, {
       color: "currentColor",
       label: "",
@@ -17,6 +37,6 @@ export var ClearCellsItem = function ClearCellsItem() {
       shortcut: (_tooltip = tooltip(backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.clearCells, {
-    0: 1
+    0: selectedCellCount
   }));
 };

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

@@ -0,0 +1 @@
+export {};

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' | '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/ui/TableMenu/row/getRowMenuComponents.d.ts

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

package/dist/types/ui/TableMenu/row/items/AddRowAboveItem.d.ts

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

package/dist/types/ui/TableMenu/row/items/AddRowBelowItem.d.ts

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

package/dist/types/ui/TableMenu/row/items/DeleteRowItem.d.ts

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

package/dist/types/ui/TableMenu/row/items/HeaderRowToggleItem.d.ts

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

package/dist/types/ui/TableMenu/row/items/MoveRowDownItem.d.ts

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

package/dist/types/ui/TableMenu/row/items/MoveRowUpItem.d.ts

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

package/dist/types/ui/TableMenu/row/items/NumberedRowsToggleItem.d.ts

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

package/dist/types/ui/TableMenu/shared/consts.d.ts

@@ -1,2 +1,4 @@
 export declare const TABLE_MENU_WIDTH = 280;
 export declare const TABLE_MENU_SELECTOR = "[data-testid=\"column-handle-menu\"], [data-testid=\"row-handle-menu\"], [data-toolbar-nested-dropdown-menu]";
+export declare const TABLE_ROW = "table-row";
+export declare const TABLE_COLUMN = "table-column";