@atlaskit/editor-plugin-table 22.4.11 → 22.4.12

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/tablePlugin.js

@@ -82,7 +82,9 @@ const tablePlugin = ({
   !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 ? 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 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getTableMenuComponents());
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getTableMenuComponents({
+      api
+    }));
   }
   return {
     name: 'table',
@@ -110,6 +112,7 @@ const tablePlugin = ({
         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/es2019/ui/TableMenu/row/getRowMenuComponents.js

@@ -8,7 +8,9 @@ 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 const getRowMenuComponents = () => [
+export const getRowMenuComponents = ({
+  api
+}) => [
 // --- Menu surface ---
 {
   type: ROW_MENU.type,
@@ -32,7 +34,9 @@ export const getRowMenuComponents = () => [
     key: ROW_TOGGLE_SECTION.key,
     rank: ROW_TOGGLE_SECTION_RANK[HEADER_ROW_TOGGLE_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(HeaderRowToggleItem, null)
+  component: () => /*#__PURE__*/React.createElement(HeaderRowToggleItem, {
+    api: api
+  })
 }, {
   type: NUMBERED_ROWS_TOGGLE_ITEM.type,
   key: NUMBERED_ROWS_TOGGLE_ITEM.key,
@@ -41,7 +45,9 @@ export const getRowMenuComponents = () => [
     key: ROW_TOGGLE_SECTION.key,
     rank: ROW_TOGGLE_SECTION_RANK[NUMBERED_ROWS_TOGGLE_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(NumberedRowsToggleItem, null)
+  component: () => /*#__PURE__*/React.createElement(NumberedRowsToggleItem, {
+    api: api
+  })
 },
 // --- Background color section ---
 {
@@ -76,7 +82,9 @@ export const getRowMenuComponents = () => [
     key: ROW_ADD_SECTION.key,
     rank: ROW_ADD_SECTION_RANK[ADD_ROW_ABOVE_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(AddRowAboveItem, null)
+  component: () => /*#__PURE__*/React.createElement(AddRowAboveItem, {
+    api: api
+  })
 }, {
   type: ADD_ROW_BELOW_ITEM.type,
   key: ADD_ROW_BELOW_ITEM.key,
@@ -85,7 +93,9 @@ export const getRowMenuComponents = () => [
     key: ROW_ADD_SECTION.key,
     rank: ROW_ADD_SECTION_RANK[ADD_ROW_BELOW_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(AddRowBelowItem, null)
+  component: () => /*#__PURE__*/React.createElement(AddRowBelowItem, {
+    api: api
+  })
 }, {
   type: MOVE_ROW_UP_ITEM.type,
   key: MOVE_ROW_UP_ITEM.key,
@@ -94,7 +104,9 @@ export const getRowMenuComponents = () => [
     key: ROW_ADD_SECTION.key,
     rank: ROW_ADD_SECTION_RANK[MOVE_ROW_UP_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(MoveRowUpItem, null)
+  component: () => /*#__PURE__*/React.createElement(MoveRowUpItem, {
+    api: api
+  })
 }, {
   type: MOVE_ROW_DOWN_ITEM.type,
   key: MOVE_ROW_DOWN_ITEM.key,
@@ -103,7 +115,9 @@ export const getRowMenuComponents = () => [
     key: ROW_ADD_SECTION.key,
     rank: ROW_ADD_SECTION_RANK[MOVE_ROW_DOWN_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(MoveRowDownItem, null)
+  component: () => /*#__PURE__*/React.createElement(MoveRowDownItem, {
+    api: api
+  })
 },
 // --- Danger section (Clear cells, Delete row) ---
 {
@@ -125,5 +139,7 @@ export const getRowMenuComponents = () => [
     key: ROW_DANGER_SECTION.key,
     rank: ROW_DANGER_SECTION_RANK[DELETE_ROW_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(DeleteRowItem, null)
+  component: () => /*#__PURE__*/React.createElement(DeleteRowItem, {
+    api: api
+  })
 }];

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

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

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

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

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

@@ -1,14 +1,70 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { 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 const 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 const DeleteRowItem = props => {
+  var _tableMenuContext$sel, _tooltip;
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
+  const tableMenuContext = useTableMenuContext();
+  const {
+    isHeaderRowRequired
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState, _states$tableState$pl;
+    return {
+      isHeaderRowRequired: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : (_states$tableState$pl = _states$tableState.pluginConfig) === null || _states$tableState$pl === void 0 ? void 0 : _states$tableState$pl.isHeaderRowRequired
+    };
+  });
+  const selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   const {
     formatMessage
   } = useIntl();
+  const handleMouseEnter = () => {
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    hoverRows(getSelectedRowIndexes(selectionRect), true)(editorView.state, editorView.dispatch);
+  };
+  const handleMouseLeave = () => {
+    if (!editorView) {
+      return;
+    }
+    clearHoverSelection()(editorView.state, editorView.dispatch);
+  };
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    deleteRowsWithAnalytics(api === null || api === void 0 ? 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: "",
@@ -18,6 +74,6 @@ export const DeleteRowItem = () => {
       shortcut: (_tooltip = tooltip(deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.removeRows, {
-    0: 1
+    0: selectedRowCount
   }));
 };

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

@@ -1,25 +1,62 @@
 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. */
-const shouldShowHeaderRowToggle = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow) === true && tableMenuContext.selectedRowCount === 1;
-export const HeaderRowToggleItem = () => {
+const shouldShowHeaderRowToggle = ({
+  isFirstRow,
+  isHeaderRowAllowed,
+  selectedRowCount
+}) => isHeaderRowAllowed === true && isFirstRow && selectedRowCount === 1;
+export const HeaderRowToggleItem = props => {
+  var _tableMenuContext$sel;
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
   const tableMenuContext = useTableMenuContext();
+  const {
+    isHeaderRowAllowed,
+    isHeaderRowEnabled
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState, _states$tableState$pl, _states$tableState2;
+    return {
+      isHeaderRowAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : (_states$tableState$pl = _states$tableState.pluginConfig) === null || _states$tableState$pl === void 0 ? void 0 : _states$tableState$pl.allowHeaderRow,
+      isHeaderRowEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isHeaderRowEnabled
+    };
+  });
+  const selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 0;
   const {
     formatMessage
   } = useIntl();
   const label = formatMessage(messages.headerRow);
-  if (!shouldShowHeaderRowToggle(tableMenuContext)) {
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    toggleHeaderRowWithAnalytics(api === null || api === void 0 ? 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,
+    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/es2019/ui/TableMenu/row/items/MoveRowDownItem.js

@@ -1,33 +1,64 @@
 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';
-const getMoveRowDownShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : moveRowDownOld);
-
-/** Move row down is hidden when the selection includes the last row (cannot move further down). */
-const shouldShowMoveRowDown = tableMenuContext => !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isLastRow);
-export const MoveRowDownItem = () => {
-  var _getMoveRowDownShortc;
+const shouldShowMoveRowDown = isLastRow => !isLastRow;
+export const MoveRowDownItem = props => {
+  var _tableMenuContext$sel, _tooltip;
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
   const tableMenuContext = useTableMenuContext();
+  const {
+    tableNode
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState;
+    return {
+      tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+    };
+  });
+  const selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   const {
     formatMessage
   } = useIntl();
-  if (!shouldShowMoveRowDown(tableMenuContext)) {
+  const handleClick = () => {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? 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/es2019/ui/TableMenu/row/items/MoveRowUpItem.js

@@ -1,33 +1,64 @@
 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';
-const getMoveRowUpShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : moveRowUpOld);
-
-/** Move row up is hidden when the selection includes row 0 (cannot move further up). */
-const shouldShowMoveRowUp = tableMenuContext => !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isFirstRow);
-export const MoveRowUpItem = () => {
-  var _getMoveRowUpShortcut;
+const shouldShowMoveRowUp = isFirstRow => !isFirstRow;
+export const MoveRowUpItem = props => {
+  var _tableMenuContext$sel, _tooltip;
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
   const tableMenuContext = useTableMenuContext();
+  const {
+    tableNode
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState;
+    return {
+      tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+    };
+  });
+  const selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   const {
     formatMessage
   } = useIntl();
-  if (!shouldShowMoveRowUp(tableMenuContext)) {
+  const handleClick = () => {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? 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/es2019/ui/TableMenu/row/items/NumberedRowsToggleItem.js

@@ -1,17 +1,48 @@
 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 const NumberedRowsToggleItem = () => {
+import { toggleNumberColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export const NumberedRowsToggleItem = props => {
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
+  const {
+    isNumberColumnAllowed,
+    isNumberColumnEnabled
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState, _states$tableState$pl, _states$tableState2;
+    return {
+      isNumberColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : (_states$tableState$pl = _states$tableState.pluginConfig) === null || _states$tableState$pl === void 0 ? void 0 : _states$tableState$pl.allowNumberColumn,
+      isNumberColumnEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isNumberColumnEnabled
+    };
+  });
   const {
     formatMessage
   } = useIntl();
   const label = formatMessage(messages.numberedRows);
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    toggleNumberColumnWithAnalytics(api === null || api === void 0 ? 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/es2019/ui/TableMenu/shared/consts.js

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

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

@@ -5,7 +5,9 @@ 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 const getSharedItems = () => [{
+export const getSharedItems = ({
+  api
+}) => [{
   type: BACKGROUND_COLOR_ITEM.type,
   key: BACKGROUND_COLOR_ITEM.key,
   parents: [{
@@ -38,5 +40,7 @@ export const getSharedItems = () => [{
     key: CELL_DANGER_SECTION.key,
     rank: CELL_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(ClearCellsItem, null)
+  component: () => /*#__PURE__*/React.createElement(ClearCellsItem, {
+    api: api
+  })
 }];

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

@@ -2,4 +2,4 @@ import { getCellMenuComponents } from '../cell/getCellMenuComponents';
 import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
-export const getTableMenuComponents = () => [...getRowMenuComponents(), ...getColumnMenuComponents(), ...getCellMenuComponents(), ...getSharedItems()];
+export const getTableMenuComponents = params => [...getRowMenuComponents(params), ...getColumnMenuComponents(), ...getCellMenuComponents(), ...getSharedItems(params)];

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

@@ -1,14 +1,37 @@
 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 const ClearCellsItem = () => {
-  var _tooltip;
+import { emptyMultipleCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../TableMenuContext';
+export const ClearCellsItem = ({
+  api
+}) => {
+  var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
+  const {
+    editorView
+  } = useEditorToolbar();
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  const 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);
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    const {
+      targetCellPosition
+    } = getPluginState(editorView.state);
+    emptyMultipleCellsWithAnalytics(api === null || api === void 0 ? 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: "",
@@ -18,6 +41,6 @@ export const ClearCellsItem = () => {
       shortcut: (_tooltip = tooltip(backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.clearCells, {
-    0: 1
+    0: selectedCellCount
   }));
 };

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

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