@atlaskit/editor-plugin-table 22.4.14 → 22.4.16

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -8,6 +8,7 @@ import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
+import { toggleActiveTableMenuWithAnalytics } from '../../../pm-plugins/commands/commands-with-analytics';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
@@ -40,7 +41,7 @@ export const ColumnControls = ({
   getScrollOffset,
   api
 }) => {
-  var _colWidths$map$join, _api$analytics2;
+  var _colWidths$map$join, _api$analytics3;
   const columnControlsRef = useRef(null);
   const {
     selection
@@ -124,7 +125,7 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
   const toggleDragMenuHandler = useCallback((trigger, event) => {
-    var _api$analytics;
+    var _api$analytics2;
     const {
       state,
       dispatch
@@ -132,8 +133,15 @@ export const ColumnControls = ({
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
-  }, [editorView, colIndex, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      if (colIndex !== undefined) {
+        var _api$analytics;
+        toggleActiveTableMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)('column', colIndex, trigger)(state, dispatch);
+      }
+      return;
+    }
+    toggleDragMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
+  }, [editorView, colIndex, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
   const colIndexes = useMemo(() => {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -7,6 +7,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
+import { toggleActiveTableMenuWithAnalytics } from '../../../pm-plugins/commands/commands-with-analytics';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -42,7 +43,7 @@ export const DragControls = ({
   api,
   selection
 }) => {
-  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics2;
+  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics3;
   const [isDragging, setIsDragging] = useState(false);
   const rowHeights = getRowHeights(tableRef);
   const rowsParams = getRowsParams(rowHeights);
@@ -78,12 +79,20 @@ export const DragControls = ({
     });
   }, [editorView]);
   const toggleDragMenuHandler = useCallback((trigger, event) => {
-    var _api$analytics;
+    var _api$analytics2;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
+    const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      if (rowIndex !== undefined) {
+        var _api$analytics;
+        toggleActiveTableMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)('row', rowIndex, trigger)(editorView.state, editorView.dispatch);
+      }
+      return;
+    }
+    toggleDragMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'row', rowIndex, trigger)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   const handleMouseOut = useCallback(() => {
     if (tableActive) {

package/dist/es2019/ui/TableMenu/cell/getCellMenuComponents.js

@@ -3,7 +3,9 @@ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { MergeCellsItem } from './items/MergeCellsItem';
 import { SplitCellItem } from './items/SplitCellItem';
 import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
-export const getCellMenuComponents = () => [
+export const getCellMenuComponents = ({
+  api
+}) => [
 // --- Menu surface ---
 {
   type: CELL_MENU.type,
@@ -27,7 +29,9 @@ export const getCellMenuComponents = () => [
     key: CELL_ACTION_SECTION.key,
     rank: CELL_ACTION_SECTION_RANK[MERGE_CELLS_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(MergeCellsItem, null)
+  component: () => /*#__PURE__*/React.createElement(MergeCellsItem, {
+    api: api
+  })
 }, {
   type: SPLIT_CELL_ITEM.type,
   key: SPLIT_CELL_ITEM.key,
@@ -36,7 +40,9 @@ export const getCellMenuComponents = () => [
     key: CELL_ACTION_SECTION.key,
     rank: CELL_ACTION_SECTION_RANK[SPLIT_CELL_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(SplitCellItem, null)
+  component: () => /*#__PURE__*/React.createElement(SplitCellItem, {
+    api: api
+  })
 },
 // --- Danger section (Clear cell) ---
 {

package/dist/es2019/ui/TableMenu/cell/items/MergeCellsItem.js

@@ -1,23 +1,39 @@
 import React 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 { TableCellMergeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { mergeCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /**
  * Merge cells is only visible when the active selection can actually be merged
  * (multi-cell, non-overlapping).
  */
 const shouldShowMergeCells = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canMergeCells) === true;
-export const MergeCellsItem = () => {
+export const MergeCellsItem = ({
+  api
+}) => {
   const tableMenuContext = useTableMenuContext();
+  const {
+    editorView
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     formatMessage
   } = useIntl();
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    mergeCellsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  };
   if (!shouldShowMergeCells(tableMenuContext)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableCellMergeIcon, {
       label: "",
       size: "small"

package/dist/es2019/ui/TableMenu/cell/items/SplitCellItem.js

@@ -1,23 +1,39 @@
 import React 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 { TableCellSplitIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { splitCellWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /**
  * Split cell is only visible when the active selection sits in a cell whose
  * `rowspan` or `colspan` is greater than one.
  */
 const shouldShowSplitCell = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canSplitCell) === true;
-export const SplitCellItem = () => {
+export const SplitCellItem = ({
+  api
+}) => {
   const tableMenuContext = useTableMenuContext();
+  const {
+    editorView
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     formatMessage
   } = useIntl();
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    splitCellWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  };
   if (!shouldShowSplitCell(tableMenuContext)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableCellSplitIcon, {
       label: "",
       size: "small"

package/dist/es2019/ui/TableMenu/column/items/AddColumnLeftItem.js

@@ -4,17 +4,17 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnBefore, 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 { TableColumnAddLeftIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const AddColumnLeftItem = ({
   api
 }) => {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   const {
     editorView
-  } = useEditorToolbar();
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     formatMessage
   } = useIntl();

package/dist/es2019/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -4,17 +4,17 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnAfter, 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 { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const AddColumnRightItem = ({
   api
 }) => {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   const {
     editorView
-  } = useEditorToolbar();
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     formatMessage
   } = useIntl();

package/dist/es2019/ui/TableMenu/column/items/DeleteColumnItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { deleteColumn, 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, hoverColumns } from '../../../../pm-plugins/commands';
@@ -15,10 +14,10 @@ export const DeleteColumnItem = ({
   api
 }) => {
   var _tableMenuContext$sel, _tooltip;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   const {
     formatMessage

package/dist/es2019/ui/TableMenu/column/items/DistributeColumnsItem.js

@@ -3,7 +3,6 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { distributeColumnsWidthsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
@@ -14,10 +13,10 @@ const shouldShowDistributeColumns = selectedColumnCount => (selectedColumnCount
 export const DistributeColumnsItem = ({
   api
 }) => {
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     formatMessage
   } = useIntl();

package/dist/es2019/ui/TableMenu/column/items/HeaderColumnToggleItem.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 { toggleHeaderColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
@@ -24,10 +23,10 @@ export const HeaderColumnToggleItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     isHeaderColumnAllowed,
     isHeaderColumnEnabled

package/dist/es2019/ui/TableMenu/column/items/MoveColumnLeftItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveColumnLeft, 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 { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
@@ -19,10 +18,10 @@ export const MoveColumnLeftItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     tableNode
   } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {

package/dist/es2019/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,10 +17,10 @@ export const MoveColumnRightItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     tableNode
   } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {

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

@@ -3,7 +3,6 @@ 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';
@@ -11,10 +10,10 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const SortDecreasingItem = ({
   api
 }) => {
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     formatMessage
   } = useIntl();

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

@@ -3,7 +3,6 @@ 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';
@@ -11,10 +10,10 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const SortIncreasingItem = ({
   api
 }) => {
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     formatMessage
   } = useIntl();

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

@@ -3,18 +3,18 @@ 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 const AddRowAboveItem = props => {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   const {
     api
   } = props;
   const {
     editorView
-  } = useEditorToolbar();
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     formatMessage
   } = useIntl();

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

@@ -3,18 +3,18 @@ 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 const AddRowBelowItem = props => {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   const {
     api
   } = props;
   const {
     editorView
-  } = useEditorToolbar();
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     formatMessage
   } = useIntl();

package/dist/es2019/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';
@@ -16,10 +15,10 @@ export const DeleteRowItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     isHeaderRowRequired
   } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {

package/dist/es2019/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';
@@ -18,10 +17,10 @@ export const HeaderRowToggleItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     isHeaderRowAllowed,
     isHeaderRowEnabled

package/dist/es2019/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,10 +17,10 @@ export const MoveRowDownItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     tableNode
   } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {

package/dist/es2019/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,10 +17,10 @@ export const MoveRowUpItem = props => {
   const {
     api
   } = props;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     tableNode
   } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {

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

@@ -2,17 +2,18 @@ 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 const NumberedRowsToggleItem = props => {
+  var _useTableMenuContext;
   const {
     api
   } = props;
   const {
     editorView
-  } = useEditorToolbar();
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     isNumberColumnAllowed,
     isNumberColumnEnabled

package/dist/es2019/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/es2019/ui/TableMenu/shared/TableMenu.js

@@ -3,7 +3,6 @@ import "./TableMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
@@ -12,9 +11,8 @@ import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
 import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
 import { TableMenuProvider } from './TableMenuContext';
 const tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
 };
-const EMPTY_CONTEXT = {};
 export const TableMenu = /*#__PURE__*/memo(({
   api,
   editorView,
@@ -36,11 +34,14 @@ export const TableMenu = /*#__PURE__*/memo(({
   });
   const tableMenuContext = useMemo(() => {
     if (!selection || !tableNode) {
-      return EMPTY_CONTEXT;
+      return {
+        editorView
+      };
     }
     const tableMap = TableMap.get(tableNode);
     const selectionRect = getSelectionRect(selection);
     const cellOps = {
+      editorView,
       canMergeCells: canMergeCellSelection(selection),
       canSplitCell: canSplitCellSelection(selection),
       hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -57,13 +58,11 @@ export const TableMenu = /*#__PURE__*/memo(({
       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 const TableMenu = /*#__PURE__*/memo(({
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
-  }))));
+  })));
 });
 TableMenu.displayName = 'TableMenu';

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

@@ -23,7 +23,9 @@ export const getSharedItems = ({
     key: CELL_ACTION_SECTION.key,
     rank: CELL_ACTION_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(BackgroundColorItem, null)
+  component: () => /*#__PURE__*/React.createElement(BackgroundColorItem, {
+    api: api
+  })
 }, {
   type: CLEAR_CELLS_ITEM.type,
   key: CLEAR_CELLS_ITEM.key,