@atlaskit/editor-plugin-table 22.4.15 → 22.4.17

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

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,9 +17,9 @@ var shouldShowMoveColumnRight = function shouldShowMoveColumnRight(isLastColumn)
 export var MoveColumnRightItem = function MoveColumnRightItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

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

@@ -3,16 +3,15 @@ import { useIntl } from 'react-intl';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortDecreasingItem = function SortDecreasingItem(_ref) {
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

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

@@ -3,16 +3,15 @@ import { useIntl } from 'react-intl';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowUpIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortIncreasingItem = function SortIncreasingItem(_ref) {
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

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

@@ -3,15 +3,15 @@ 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';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddRowAboveItem = function AddRowAboveItem(props) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

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

@@ -3,15 +3,15 @@ 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';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddRowBelowItem = function AddRowBelowItem(props) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

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

@@ -4,7 +4,6 @@ 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';
 import { clearHoverSelection, hoverRows } from '../../../../pm-plugins/commands';
@@ -14,9 +13,9 @@ 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 _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

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

@@ -2,7 +2,6 @@ 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';
@@ -17,9 +16,9 @@ var shouldShowHeaderRowToggle = function shouldShowHeaderRowToggle(_ref) {
 export var HeaderRowToggleItem = function HeaderRowToggleItem(props) {
   var _tableMenuContext$sel;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {

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

@@ -4,7 +4,6 @@ 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 { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,9 +17,9 @@ var shouldShowMoveRowDown = function shouldShowMoveRowDown(isLastRow) {
 export var MoveRowDownItem = function MoveRowDownItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

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

@@ -4,7 +4,6 @@ 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 { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,9 +17,9 @@ var shouldShowMoveRowUp = function shouldShowMoveRowUp(isFirstRow) {
 export var MoveRowUpItem = function MoveRowUpItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

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

@@ -2,14 +2,15 @@ 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 { toggleNumberColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var NumberedRowsToggleItem = function NumberedRowsToggleItem(props) {
+  var _useTableMenuContext;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {

package/dist/esm/ui/TableMenu/shared/TableMenu.compiled.css

@@ -1,6 +1,4 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
-._18m915vq{overflow-y:hidden}
 ._1bsb1178{width:280px}
-._1reo15vq{overflow-x:hidden}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -6,7 +6,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { memo, useMemo } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
@@ -15,9 +14,8 @@ import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
 import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
 import { TableMenuProvider } from './TableMenuContext';
 var tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
 };
-var EMPTY_CONTEXT = {};
 export var TableMenu = /*#__PURE__*/memo(function (_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
@@ -37,11 +35,14 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
     selection = _useSharedPluginState.selection;
   var tableMenuContext = useMemo(function () {
     if (!selection || !tableNode) {
-      return EMPTY_CONTEXT;
+      return {
+        editorView: editorView
+      };
     }
     var tableMap = TableMap.get(tableNode);
     var selectionRect = getSelectionRect(selection);
     var cellOps = {
+      editorView: editorView,
       canMergeCells: canMergeCellSelection(selection),
       canSplitCell: canSplitCellSelection(selection),
       hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -57,13 +58,11 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
       isLastColumn: selectionRect.right === tableMap.width,
       selectedColumnCount: selectionRect.right - selectionRect.left
     });
-  }, [selection, tableNode]);
+  }, [editorView, selection, tableNode]);
   if (components.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
-  }, /*#__PURE__*/React.createElement(TableMenuProvider, {
+  return /*#__PURE__*/React.createElement(TableMenuProvider, {
     value: tableMenuContext
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: tableMenuContainerStyles.container,
@@ -71,6 +70,6 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
-  }))));
+  })));
 });
 TableMenu.displayName = 'TableMenu';

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

@@ -24,7 +24,9 @@ export var getSharedItems = function getSharedItems(_ref) {
       rank: CELL_ACTION_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(BackgroundColorItem, null);
+      return /*#__PURE__*/React.createElement(BackgroundColorItem, {
+        api: api
+      });
     }
   }, {
     type: CLEAR_CELLS_ITEM.type,

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

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

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

@@ -3,27 +3,53 @@ import "./BackgroundColorItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../TableMenuContext';
 var colorPaletteColumns = 7;
 var colorPaletteStyles = {
   container: "_1rjcu2gc",
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-export var BackgroundColorItem = function BackgroundColorItem() {
+export var BackgroundColorItem = function BackgroundColorItem(_ref) {
+  var _useTableMenuContext, _api$analytics2;
+  var api = _ref.api;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var onClick = useCallback(function () {}, []);
+  var selectedColor = useMemo(function () {
+    var _node$attrs;
+    if (!editorView) {
+      return '#ffffff';
+    }
+    var _getPluginState = getPluginState(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    var node = targetCellPosition ? editorView.state.doc.nodeAt(targetCellPosition) : null;
+    return hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+  }, [editorView]);
+  var onClick = useCallback(function (color) {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    setColorWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = useMemo(function () {
     return {
-      backgroundColor: '#ffffff'
+      backgroundColor: selectedColor
     };
-  }, []);
+  }, [selectedColor]);
   var paletteOptions = useMemo(function () {
     return {
       palette: cellBackgroundColorPalette,

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

@@ -3,17 +3,17 @@ 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';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 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 _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   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);
@@ -25,6 +25,7 @@ export var ClearCellsItem = function ClearCellsItem(_ref) {
     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);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/types/entry-points/types.d.ts

@@ -1,2 +1,2 @@
 export { RESIZE_HANDLE_AREA_DECORATION_GAP, ShadowEvent, TableCssClassName, TableDecorations, } from '../types/index';
-export type { AlignmentOptions, Cell, CellColumnPositioning, CellHoverMeta, CellTransform, ColumnResizingPluginAction, ColumnResizingPluginState, DraggableBehaviour, DraggableData, DraggableSourceData, DraggableTargetData, DraggableType, HandleTypes, InsertRowMethods, InsertRowOptions, InvalidNodeAttr, MessageDescriptor, PermittedLayoutsDescriptor, PluginConfig, PluginInjectionAPI, PluginInjectionAPIWithA11y, ReportInvalidNodeAttrs, RowInsertPosition, TableDirection, TablePluginAction, TablePluginState, TableSharedState, TableSharedStateInternal, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState, WidthToWidest, } from '../types/index';
+export type { ActiveTableMenu, AlignmentOptions, Cell, CellColumnPositioning, CellHoverMeta, CellTransform, ColumnResizingPluginAction, ColumnResizingPluginState, DraggableBehaviour, DraggableData, DraggableSourceData, DraggableTargetData, DraggableType, HandleTypes, InsertRowMethods, InsertRowOptions, InvalidNodeAttr, MessageDescriptor, PermittedLayoutsDescriptor, PluginConfig, PluginInjectionAPI, PluginInjectionAPIWithA11y, ReportInvalidNodeAttrs, RowInsertPosition, TableDirection, TablePluginAction, TablePluginState, TableSharedState, TableSharedStateInternal, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState, WidthToWidest, } from '../types/index';

package/dist/types/pm-plugins/commands/active-table-menu.d.ts

@@ -0,0 +1,6 @@
+import type { Command } from '@atlaskit/editor-common/types';
+import type { ActiveTableMenu } from '../../types';
+export declare const closeActiveTableMenu: () => Command;
+export declare const toggleActiveTableMenu: (activeTableMenu: Exclude<ActiveTableMenu, {
+    type: "none";
+}>) => Command;

package/dist/types/pm-plugins/commands/commands-with-analytics.d.ts

@@ -7,8 +7,10 @@ import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/t
 import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition } from '../../types';
+import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition, TableDirection } from '../../types';
+import type { TriggerType } from '../drag-and-drop/types';
 import type { ResizeStateWithAnalytics } from '../table-resizing/utils/types';
+export declare const toggleActiveTableMenuWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (direction: TableDirection, index: number, trigger?: TriggerType) => Command;
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition?: number) => Command;
 export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;

package/dist/types/pm-plugins/commands/index.d.ts

@@ -1,6 +1,7 @@
 export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, setTableHovered, } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout, } from './toggle';
+export { closeActiveTableMenu, toggleActiveTableMenu } from './active-table-menu';
 export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu, } from './misc';
 export { sortByColumn } from './sort';

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' | 'isNumberColumnEnabled' | 'isCommentEditor' | 'isTableScalingEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'isMaxWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'wasMaxWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'isNumberColumnEnabled' | 'isCommentEditor' | 'isTableScalingEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard' | 'activeTableMenu'> & {
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     editorContentAreaHeight?: number;
@@ -85,7 +85,22 @@ export interface CellHoverMeta {
 export interface WidthToWidest {
     [tableLocalId: string]: boolean;
 }
+export type ActiveTableMenu = {
+    type: 'none';
+} | {
+    openedBy: 'mouse' | 'keyboard';
+    type: 'cell';
+} | {
+    index: number;
+    openedBy: 'mouse' | 'keyboard';
+    type: 'row';
+} | {
+    index: number;
+    openedBy: 'mouse' | 'keyboard';
+    type: 'column';
+};
 export interface TablePluginState {
+    activeTableMenu?: ActiveTableMenu;
     canCollapseTable?: boolean;
     editorHasFocus?: boolean;
     editorViewportHeight?: number;
@@ -266,6 +281,11 @@ export type TablePluginAction = {
     type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON';
 } | {
     type: 'TOGGLE_CONTEXTUAL_MENU';
+} | {
+    data: {
+        activeTableMenu: ActiveTableMenu;
+    };
+    type: 'SET_ACTIVE_TABLE_MENU';
 } | {
     data: {
         isCellMenuOpenByKeyboard: boolean;

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

@@ -2,7 +2,9 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
+import { type PluginInjectionAPI } from '../../types';
 export interface Props {
+    api?: PluginInjectionAPI | null;
     boundariesElement?: HTMLElement;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     editorView: EditorView;

package/dist/types/ui/FloatingContextualMenu/CellMenuPopup.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { PluginInjectionAPI } from '../../types';
+import { type PluginInjectionAPI } from '../../types';
 type CellMenuPopupProps = {
     api: PluginInjectionAPI | undefined | null;
+    boundariesElement?: HTMLElement;
     editorView: EditorView;
-    isCellMenuOpenByKeyboard?: boolean;
-    isOpen: boolean;
-    targetCellRef: Node;
+    mountPoint?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    targetCellRef: HTMLElement;
+    zIndex: number;
 };
-export declare const CellMenuPopup: ({ api, editorView, isCellMenuOpenByKeyboard, isOpen, targetCellRef, }: CellMenuPopupProps) => React.JSX.Element;
+export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement, targetCellRef, zIndex, }: CellMenuPopupProps) => React.JSX.Element;
 export {};

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

@@ -16,7 +16,6 @@ interface Props {
     mountPoint?: HTMLElement;
     pluginConfig?: PluginConfig;
     scrollableElement?: HTMLElement;
-    targetCellPosition?: number;
 }
 declare const FloatingContextualMenu: {
     ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, isCellMenuOpenByKeyboard, isCommentEditor, api, isDragMenuOpen, }: Props): JSX.Element | null;

package/dist/types/ui/TableMenu/cell/getCellMenuComponents.d.ts

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

package/dist/types/ui/TableMenu/cell/items/MergeCellsItem.d.ts

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

package/dist/types/ui/TableMenu/cell/items/SplitCellItem.d.ts

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

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export type TableMenuContextValue = {
     canMergeCells?: boolean;
     canSplitCell?: boolean;
+    editorView?: EditorView;
     hasMergedCellsInTable?: boolean;
     isFirstColumn?: boolean;
     isFirstRow?: boolean;

package/dist/types/ui/TableMenu/shared/items/BackgroundColorItem.d.ts

@@ -3,4 +3,5 @@
  * @jsx jsx
  */
 import React from 'react';
-export declare const BackgroundColorItem: () => React.JSX.Element;
+import type { TableMenuComponentsParams } from '../types';
+export declare const BackgroundColorItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element;

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1,2 +1,2 @@
 export { RESIZE_HANDLE_AREA_DECORATION_GAP, ShadowEvent, TableCssClassName, TableDecorations, } from '../types/index';
-export type { AlignmentOptions, Cell, CellColumnPositioning, CellHoverMeta, CellTransform, ColumnResizingPluginAction, ColumnResizingPluginState, DraggableBehaviour, DraggableData, DraggableSourceData, DraggableTargetData, DraggableType, HandleTypes, InsertRowMethods, InsertRowOptions, InvalidNodeAttr, MessageDescriptor, PermittedLayoutsDescriptor, PluginConfig, PluginInjectionAPI, PluginInjectionAPIWithA11y, ReportInvalidNodeAttrs, RowInsertPosition, TableDirection, TablePluginAction, TablePluginState, TableSharedState, TableSharedStateInternal, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState, WidthToWidest, } from '../types/index';
+export type { ActiveTableMenu, AlignmentOptions, Cell, CellColumnPositioning, CellHoverMeta, CellTransform, ColumnResizingPluginAction, ColumnResizingPluginState, DraggableBehaviour, DraggableData, DraggableSourceData, DraggableTargetData, DraggableType, HandleTypes, InsertRowMethods, InsertRowOptions, InvalidNodeAttr, MessageDescriptor, PermittedLayoutsDescriptor, PluginConfig, PluginInjectionAPI, PluginInjectionAPIWithA11y, ReportInvalidNodeAttrs, RowInsertPosition, TableDirection, TablePluginAction, TablePluginState, TableSharedState, TableSharedStateInternal, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState, WidthToWidest, } from '../types/index';

package/dist/types-ts4.5/pm-plugins/commands/active-table-menu.d.ts

@@ -0,0 +1,6 @@
+import type { Command } from '@atlaskit/editor-common/types';
+import type { ActiveTableMenu } from '../../types';
+export declare const closeActiveTableMenu: () => Command;
+export declare const toggleActiveTableMenu: (activeTableMenu: Exclude<ActiveTableMenu, {
+    type: "none";
+}>) => Command;

package/dist/types-ts4.5/pm-plugins/commands/commands-with-analytics.d.ts

@@ -7,8 +7,10 @@ import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/t
 import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition } from '../../types';
+import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, PluginInjectionAPI, RowInsertPosition, TableDirection } from '../../types';
+import type { TriggerType } from '../drag-and-drop/types';
 import type { ResizeStateWithAnalytics } from '../table-resizing/utils/types';
+export declare const toggleActiveTableMenuWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (direction: TableDirection, index: number, trigger?: TriggerType) => Command;
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition?: number) => Command;
 export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;

package/dist/types-ts4.5/pm-plugins/commands/index.d.ts

@@ -1,6 +1,7 @@
 export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, setTableHovered, } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout, } from './toggle';
+export { closeActiveTableMenu, toggleActiveTableMenu } from './active-table-menu';
 export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu, } from './misc';
 export { sortByColumn } from './sort';