@atlaskit/editor-plugin-table 22.4.11 → 22.4.12

package/CHANGELOG.md

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

package/dist/cjs/tablePlugin.js

@@ -94,7 +94,9 @@ var tablePlugin = function tablePlugin(_ref) {
   !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
     var _api$uiControlRegistr;
-    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getTableMenuComponents.getTableMenuComponents)());
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getTableMenuComponents.getTableMenuComponents)({
+      api: api
+    }));
   }
   return {
     name: 'table',
@@ -122,6 +124,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/cjs/ui/TableMenu/row/getRowMenuComponents.js

@@ -15,7 +15,8 @@ var _MoveRowDownItem = require("./items/MoveRowDownItem");
 var _MoveRowUpItem = require("./items/MoveRowUpItem");
 var _NumberedRowsToggleItem = require("./items/NumberedRowsToggleItem");
 var _keys = require("./keys");
-var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuComponents() {
+var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuComponents(_ref) {
+  var api = _ref.api;
   return [
   // --- Menu surface ---
   {
@@ -43,7 +44,9 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
       rank: _keys.ROW_TOGGLE_SECTION_RANK[_keys.HEADER_ROW_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_HeaderRowToggleItem.HeaderRowToggleItem, null);
+      return /*#__PURE__*/_react.default.createElement(_HeaderRowToggleItem.HeaderRowToggleItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.NUMBERED_ROWS_TOGGLE_ITEM.type,
@@ -54,7 +57,9 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
       rank: _keys.ROW_TOGGLE_SECTION_RANK[_keys.NUMBERED_ROWS_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_NumberedRowsToggleItem.NumberedRowsToggleItem, null);
+      return /*#__PURE__*/_react.default.createElement(_NumberedRowsToggleItem.NumberedRowsToggleItem, {
+        api: api
+      });
     }
   },
   // --- Background color section ---
@@ -95,7 +100,9 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
       rank: _keys.ROW_ADD_SECTION_RANK[_keys.ADD_ROW_ABOVE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_AddRowAboveItem.AddRowAboveItem, null);
+      return /*#__PURE__*/_react.default.createElement(_AddRowAboveItem.AddRowAboveItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.ADD_ROW_BELOW_ITEM.type,
@@ -106,7 +113,9 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
       rank: _keys.ROW_ADD_SECTION_RANK[_keys.ADD_ROW_BELOW_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_AddRowBelowItem.AddRowBelowItem, null);
+      return /*#__PURE__*/_react.default.createElement(_AddRowBelowItem.AddRowBelowItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.MOVE_ROW_UP_ITEM.type,
@@ -117,7 +126,9 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
       rank: _keys.ROW_ADD_SECTION_RANK[_keys.MOVE_ROW_UP_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_MoveRowUpItem.MoveRowUpItem, null);
+      return /*#__PURE__*/_react.default.createElement(_MoveRowUpItem.MoveRowUpItem, {
+        api: api
+      });
     }
   }, {
     type: _keys.MOVE_ROW_DOWN_ITEM.type,
@@ -128,7 +139,9 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
       rank: _keys.ROW_ADD_SECTION_RANK[_keys.MOVE_ROW_DOWN_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_MoveRowDownItem.MoveRowDownItem, null);
+      return /*#__PURE__*/_react.default.createElement(_MoveRowDownItem.MoveRowDownItem, {
+        api: api
+      });
     }
   },
   // --- Danger section (Clear cells, Delete row) ---
@@ -154,7 +167,9 @@ var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuCom
       rank: _keys.ROW_DANGER_SECTION_RANK[_keys.DELETE_ROW_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_DeleteRowItem.DeleteRowItem, null);
+      return /*#__PURE__*/_react.default.createElement(_DeleteRowItem.DeleteRowItem, {
+        api: api
+      });
     }
   }];
 };

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

@@ -7,14 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddRowAboveItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var AddRowAboveItem = exports.AddRowAboveItem = function AddRowAboveItem() {
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var AddRowAboveItem = exports.AddRowAboveItem = function AddRowAboveItem(props) {
   var _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+    if (index === undefined) {
+      return;
+    }
+    (0, _commandsWithAnalytics.insertRowWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
+      index: index,
+      moveCursorToInsertedRow: true
+    })(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowAddAboveIcon, {
       color: "currentColor",
       label: "",

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

@@ -7,14 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddRowBelowItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var AddRowBelowItem = exports.AddRowBelowItem = function AddRowBelowItem() {
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var AddRowBelowItem = exports.AddRowBelowItem = function AddRowBelowItem(props) {
   var _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
+    if (index === undefined) {
+      return;
+    }
+    (0, _commandsWithAnalytics.insertRowWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
+      index: index,
+      moveCursorToInsertedRow: true
+    })(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowAddBelowIcon, {
       color: "currentColor",
       label: "",

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

@@ -7,14 +7,66 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteRowItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem() {
-  var _tooltip;
+var _commands = require("../../../../pm-plugins/commands");
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var _selection = require("../../../../pm-plugins/utils/selection");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        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 = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var handleMouseEnter = function handleMouseEnter() {
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commands.hoverRows)((0, _selection.getSelectedRowIndexes)(selectionRect), true)(editorView.state, editorView.dispatch);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (!editorView) {
+      return;
+    }
+    (0, _commands.clearHoverSelection)()(editorView.state, editorView.dispatch);
+  };
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    onFocus: handleMouseEnter,
+    onMouseEnter: handleMouseEnter,
+    onBlur: handleMouseLeave,
+    onMouseLeave: handleMouseLeave,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
       color: "currentColor",
       label: "",
@@ -24,6 +76,6 @@ var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem() {
       shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.removeRows, {
-    0: 1
+    0: selectedRowCount
   }));
 };

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

@@ -7,26 +7,59 @@ Object.defineProperty(exports, "__esModule", {
 exports.HeaderRowToggleItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 /** Header 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;
 };
-var HeaderRowToggleItem = exports.HeaderRowToggleItem = function HeaderRowToggleItem() {
+var HeaderRowToggleItem = exports.HeaderRowToggleItem = function HeaderRowToggleItem(props) {
+  var _tableMenuContext$sel;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState, _states$tableState2;
+      return {
+        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 = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(_messages.tableMessages.headerRow);
-  if (!shouldShowHeaderRowToggle(tableMenuContext)) {
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    (0, _commandsWithAnalytics.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
       label: label,
-      isChecked: false
+      isChecked: !!isHeaderRowEnabled,
+      onChange: handleClick
     })
   }, label);
 };

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

@@ -7,37 +7,62 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoveRowDownItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _selection = require("../../../../pm-plugins/utils/selection");
+var _consts = require("../../shared/consts");
 var _TableMenuContext = require("../../shared/TableMenuContext");
-var getMoveRowDownShortcut = function getMoveRowDownShortcut() {
-  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowDown : _keymaps.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);
-};
-var MoveRowDownItem = exports.MoveRowDownItem = function MoveRowDownItem() {
-  var _getMoveRowDownShortc;
+var MoveRowDownItem = exports.MoveRowDownItem = function MoveRowDownItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+      };
+    }),
+    tableNode = _useSharedPluginState.tableNode;
+  var selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  if (!shouldShowMoveRowDown(tableMenuContext)) {
+  var handleClick = function handleClick() {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_ROW, (0, _selection.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveDownIcon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
     elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveRowDownShortc = getMoveRowDownShortcut()) !== null && _getMoveRowDownShortc !== void 0 ? _getMoveRowDownShortc : ''
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.moveRowDown)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.moveRowDown, {
-    0: 1
+    0: selectedRowCount
   }));
 };

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

@@ -7,37 +7,62 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoveRowUpItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _selection = require("../../../../pm-plugins/utils/selection");
+var _consts = require("../../shared/consts");
 var _TableMenuContext = require("../../shared/TableMenuContext");
-var getMoveRowUpShortcut = function getMoveRowUpShortcut() {
-  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowUp : _keymaps.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);
-};
-var MoveRowUpItem = exports.MoveRowUpItem = function MoveRowUpItem() {
-  var _getMoveRowUpShortcut;
+var MoveRowUpItem = exports.MoveRowUpItem = function MoveRowUpItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+      };
+    }),
+    tableNode = _useSharedPluginState.tableNode;
+  var selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  if (!shouldShowMoveRowUp(tableMenuContext)) {
+  var handleClick = function handleClick() {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_ROW, (0, _selection.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveUpIcon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
     elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveRowUpShortcut = getMoveRowUpShortcut()) !== null && _getMoveRowUpShortcut !== void 0 ? _getMoveRowUpShortcut : ''
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.moveRowUp)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.moveRowUp, {
-    0: 1
+    0: selectedRowCount
   }));
 };

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

@@ -7,17 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 exports.NumberedRowsToggleItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
-var NumberedRowsToggleItem = exports.NumberedRowsToggleItem = function NumberedRowsToggleItem() {
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var NumberedRowsToggleItem = exports.NumberedRowsToggleItem = function NumberedRowsToggleItem(props) {
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var label = formatMessage(_messages.tableMessages.numberedRows);
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    (0, _commandsWithAnalytics.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
       label: label,
-      isChecked: false
+      isChecked: !!isNumberColumnEnabled,
+      onChange: handleClick
     })
   }, label);
 };

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

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_MENU_WIDTH = exports.TABLE_MENU_SELECTOR = void 0;
+exports.TABLE_ROW = exports.TABLE_MENU_WIDTH = exports.TABLE_MENU_SELECTOR = exports.TABLE_COLUMN = void 0;
 var TABLE_MENU_WIDTH = exports.TABLE_MENU_WIDTH = 280;
-var TABLE_MENU_SELECTOR = exports.TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-nested-dropdown-menu]';
+var TABLE_MENU_SELECTOR = exports.TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-nested-dropdown-menu]';
+var TABLE_ROW = exports.TABLE_ROW = 'table-row';
+var TABLE_COLUMN = exports.TABLE_COLUMN = 'table-column';

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

@@ -12,7 +12,8 @@ var _keys3 = require("../row/keys");
 var _BackgroundColorItem = require("./items/BackgroundColorItem");
 var _ClearCellsItem = require("./items/ClearCellsItem");
 var _keys4 = require("./keys");
-var getSharedItems = exports.getSharedItems = function getSharedItems() {
+var getSharedItems = exports.getSharedItems = function getSharedItems(_ref) {
+  var api = _ref.api;
   return [{
     type: _keys4.BACKGROUND_COLOR_ITEM.type,
     key: _keys4.BACKGROUND_COLOR_ITEM.key,
@@ -49,7 +50,9 @@ var getSharedItems = exports.getSharedItems = function getSharedItems() {
       rank: _keys.CELL_DANGER_SECTION_RANK[_keys4.CLEAR_CELLS_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_ClearCellsItem.ClearCellsItem, null);
+      return /*#__PURE__*/_react.default.createElement(_ClearCellsItem.ClearCellsItem, {
+        api: api
+      });
     }
   }];
 };

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

@@ -10,6 +10,6 @@ var _getCellMenuComponents = require("../cell/getCellMenuComponents");
 var _getColumnMenuComponents = require("../column/getColumnMenuComponents");
 var _getRowMenuComponents = require("../row/getRowMenuComponents");
 var _getSharedItems = require("./getSharedItems");
-var getTableMenuComponents = exports.getTableMenuComponents = function getTableMenuComponents() {
-  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)()), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)()));
+var getTableMenuComponents = exports.getTableMenuComponents = function getTableMenuComponents(params) {
+  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)(params)));
 };

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

@@ -7,14 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.ClearCellsItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem() {
-  var _tooltip;
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _TableMenuContext = require("../TableMenuContext");
+var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
+  var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  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 = (0, _pluginFactory.getPluginState)(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.CrossIcon, {
       color: "currentColor",
       label: "",
@@ -24,6 +44,6 @@ var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem() {
       shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.clearCells, {
-    0: 1
+    0: selectedCellCount
   }));
 };