@atlaskit/editor-plugin-table 22.4.11 → 22.4.12

package/dist/esm/tablePlugin.js

@@ -85,7 +85,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) && editorExperiment('platform_editor_controls', 'variant1');
   if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
     var _api$uiControlRegistr;
-    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getTableMenuComponents());
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getTableMenuComponents({
+      api: api
+    }));
   }
   return {
     name: 'table',
@@ -113,6 +115,7 @@ var tablePlugin = function tablePlugin(_ref) {
         wasMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasMaxWidthEnabled),
         isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
         isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
+        isNumberColumnEnabled: tablePluginState.isNumberColumnEnabled,
         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/esm/ui/TableMenu/row/getRowMenuComponents.js

@@ -8,7 +8,8 @@ import { MoveRowDownItem } from './items/MoveRowDownItem';
 import { MoveRowUpItem } from './items/MoveRowUpItem';
 import { NumberedRowsToggleItem } from './items/NumberedRowsToggleItem';
 import { ROW_MENU, ROW_TOGGLE_SECTION, ROW_BACKGROUND_SECTION, ROW_ADD_SECTION, ROW_DANGER_SECTION, ROW_MENU_SECTION_RANK, HEADER_ROW_TOGGLE_ITEM, NUMBERED_ROWS_TOGGLE_ITEM, ADD_ROW_ABOVE_ITEM, ADD_ROW_BELOW_ITEM, MOVE_ROW_UP_ITEM, MOVE_ROW_DOWN_ITEM, DELETE_ROW_ITEM, ROW_TOGGLE_SECTION_RANK, ROW_ADD_SECTION_RANK, ROW_DANGER_SECTION_RANK } from './keys';
-export var getRowMenuComponents = function getRowMenuComponents() {
+export var getRowMenuComponents = function getRowMenuComponents(_ref) {
+  var api = _ref.api;
   return [
   // --- Menu surface ---
   {
@@ -36,7 +37,9 @@ export var getRowMenuComponents = function getRowMenuComponents() {
       rank: ROW_TOGGLE_SECTION_RANK[HEADER_ROW_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(HeaderRowToggleItem, null);
+      return /*#__PURE__*/React.createElement(HeaderRowToggleItem, {
+        api: api
+      });
     }
   }, {
     type: NUMBERED_ROWS_TOGGLE_ITEM.type,
@@ -47,7 +50,9 @@ export var getRowMenuComponents = function getRowMenuComponents() {
       rank: ROW_TOGGLE_SECTION_RANK[NUMBERED_ROWS_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(NumberedRowsToggleItem, null);
+      return /*#__PURE__*/React.createElement(NumberedRowsToggleItem, {
+        api: api
+      });
     }
   },
   // --- Background color section ---
@@ -88,7 +93,9 @@ export var getRowMenuComponents = function getRowMenuComponents() {
       rank: ROW_ADD_SECTION_RANK[ADD_ROW_ABOVE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(AddRowAboveItem, null);
+      return /*#__PURE__*/React.createElement(AddRowAboveItem, {
+        api: api
+      });
     }
   }, {
     type: ADD_ROW_BELOW_ITEM.type,
@@ -99,7 +106,9 @@ export var getRowMenuComponents = function getRowMenuComponents() {
       rank: ROW_ADD_SECTION_RANK[ADD_ROW_BELOW_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(AddRowBelowItem, null);
+      return /*#__PURE__*/React.createElement(AddRowBelowItem, {
+        api: api
+      });
     }
   }, {
     type: MOVE_ROW_UP_ITEM.type,
@@ -110,7 +119,9 @@ export var getRowMenuComponents = function getRowMenuComponents() {
       rank: ROW_ADD_SECTION_RANK[MOVE_ROW_UP_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(MoveRowUpItem, null);
+      return /*#__PURE__*/React.createElement(MoveRowUpItem, {
+        api: api
+      });
     }
   }, {
     type: MOVE_ROW_DOWN_ITEM.type,
@@ -121,7 +132,9 @@ export var getRowMenuComponents = function getRowMenuComponents() {
       rank: ROW_ADD_SECTION_RANK[MOVE_ROW_DOWN_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(MoveRowDownItem, null);
+      return /*#__PURE__*/React.createElement(MoveRowDownItem, {
+        api: api
+      });
     }
   },
   // --- Danger section (Clear cells, Delete row) ---
@@ -147,7 +160,9 @@ export var getRowMenuComponents = function getRowMenuComponents() {
       rank: ROW_DANGER_SECTION_RANK[DELETE_ROW_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(DeleteRowItem, null);
+      return /*#__PURE__*/React.createElement(DeleteRowItem, {
+        api: api
+      });
     }
   }];
 };

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

@@ -1,13 +1,36 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addRowBefore, 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 { TableRowAddAboveIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var AddRowAboveItem = function AddRowAboveItem() {
+import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export var AddRowAboveItem = function AddRowAboveItem(props) {
   var _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+    if (index === undefined) {
+      return;
+    }
+    insertRowWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
+      index: index,
+      moveCursorToInsertedRow: true
+    })(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableRowAddAboveIcon, {
       color: "currentColor",
       label: "",

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

@@ -1,13 +1,36 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addRowAfter, 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 { TableRowAddBelowIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var AddRowBelowItem = function AddRowBelowItem() {
+import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export var AddRowBelowItem = function AddRowBelowItem(props) {
   var _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
+    if (index === undefined) {
+      return;
+    }
+    insertRowWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
+      index: index,
+      moveCursorToInsertedRow: true
+    })(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableRowAddBelowIcon, {
       color: "currentColor",
       label: "",

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()), _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,7 +34,7 @@ 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' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     editorContentAreaHeight?: number;

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;