@atlaskit/editor-plugin-table 22.2.17 → 22.2.19

package/dist/es2019/ui/ui-styles.js

@@ -1,7 +1,7 @@
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
+import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
@@ -272,7 +272,7 @@ export const DeleteButton = () => css`
 		cursor: pointer;
 	}
 `;
-export const OverflowShadow = isDragAndDropEnabled => css`
+export const OverflowShadow = () => css`
 	.${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
 		display: block;
 		height: calc(100% - ${tableMarginTop}px);
@@ -302,22 +302,11 @@ export const OverflowShadow = isDragAndDropEnabled => css`
 		left: calc(100% - ${tableOverflowShadowWidthWide}px);
 	}
 	.${ClassName.WITH_CONTROLS} {
-		${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
 		.${ClassName.TABLE_LEFT_SHADOW} {
 			border-left: 1px solid ${tableBorderColor};
 		}
 	}
 `;
-const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
-  if (!isDragAndDropEnabled) {
-    return css`
-			.${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-				height: calc(100% - ${tableMarginTopWithControl}px);
-				top: ${tableMarginTopWithControl}px;
-			}
-		`;
-  }
-};
 export const OverflowShadowLessPadding = tableOverflowShadowWidth => css`
 	.${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
 		width: ${tableOverflowShadowWidth}px;

package/dist/esm/types/index.js

@@ -137,7 +137,6 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CONTEXTUAL_MENU_BUTTON_WRAP: "".concat(tablePrefixSelector, "-contextual-menu-button-wrap"),
   CONTEXTUAL_MENU_BUTTON: "".concat(tablePrefixSelector, "-contextual-menu-button"),
   CONTEXTUAL_MENU_BUTTON_FIXED: "".concat(tablePrefixSelector, "-contextual-menu-button-fixed"),
-  CONTEXTUAL_MENU_ICON: "".concat(tablePrefixSelector, "-contextual-submenu-icon"),
   CONTEXTUAL_MENU_ICON_SMALL: "".concat(tablePrefixSelector, "-contextual-submenu-icon-small"),
   // come from prosemirror-table
   SELECTED_CELL: 'selectedCell',

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -52,9 +52,12 @@ import { canMergeCells } from '../../pm-plugins/transforms/merge';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
 import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
 import { TableCssClassName as ClassName } from '../../types';
-import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
+import { colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
 import { cellColourPreviewStyles } from './styles';
 var arrowsList = new Set(!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']);
+var dropdownMenuSection = {
+  hasSeparator: true
+};
 var elementBeforeIconStyles = xcss({
   marginRight: 'space.negative.075',
   display: 'flex'
@@ -116,8 +119,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         isCellMenuOpenByKeyboard = _this$props.isCellMenuOpenByKeyboard;
       var isSubmenuOpen = _this.state.isSubmenuOpen;
       var _getPluginState = getPluginState(editorView.state),
-        targetCellPosition = _getPluginState.targetCellPosition,
-        isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+        targetCellPosition = _getPluginState.targetCellPosition;
       if (allowBackgroundColor) {
         var _node$attrs, _node$attrs2;
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
@@ -129,17 +131,17 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         var selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
         var selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
         return {
-          content: isDragAndDropEnabled ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
+          content: formatMessage(messages.backgroundColor),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          elemBefore: jsx(Box, {
             xcss: elementBeforeIconStyles
           }, jsx(PaintBucketIcon, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(messages.backgroundColor)
-          })) : undefined,
+          })),
           elemAfter:
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           jsx("div", {
@@ -149,7 +151,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             css: cellColourPreviewStyles(background)
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
-            className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
+            className: ClassName.CONTEXTUAL_MENU_ICON_SMALL
           }), isSubmenuOpen && jsx("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: ClassName.CONTEXTUAL_SUBMENU,
@@ -209,10 +211,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         allowMergeCells = _this$props2.allowMergeCells,
         state = _this$props2.editorView.state,
-        formatMessage = _this$props2.intl.formatMessage,
-        editorView = _this$props2.editorView;
-      var _getPluginState2 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
+        formatMessage = _this$props2.intl.formatMessage;
       if (allowMergeCells) {
         return [{
           content: formatMessage(messages.mergeCells),
@@ -220,37 +219,33 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          elemBefore: jsx(Box, {
             xcss: elementBeforeIconStyles
           }, jsx(TableCellMergeIcon, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(messages.mergeCells)
-          })) : undefined
+          }))
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          elemBefore: jsx(Box, {
             xcss: elementBeforeIconStyles
           }, jsx(TableCellSplitIcon, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(messages.splitCell)
-          })) : undefined
+          }))
         }];
       }
       return [];
     });
     _defineProperty(_this, "createInsertColumnItem", function () {
-      var _this$props3 = _this.props,
-        formatMessage = _this$props3.intl.formatMessage,
-        editorView = _this$props3.editorView;
-      var _getPluginState3 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
-      var content = formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn);
+      var formatMessage = _this.props.intl.formatMessage;
+      var content = formatMessage(messages.addColumnRight);
       return {
         content: content,
         value: {
@@ -260,7 +255,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled ?
+        elemBefore:
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx(Box, {
           xcss: elementBeforeIconStyles
@@ -268,17 +263,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           color: "currentColor",
           spacing: "spacious",
           label: formatMessage(messages.addColumnRight)
-        })) : undefined,
+        })),
         'aria-label': tooltip(addColumnAfter, String(content))
       };
     });
     _defineProperty(_this, "createInsertRowItem", function () {
-      var _this$props4 = _this.props,
-        formatMessage = _this$props4.intl.formatMessage,
-        editorView = _this$props4.editorView;
-      var _getPluginState4 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
-      var content = formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow);
+      var formatMessage = _this.props.intl.formatMessage;
+      var content = formatMessage(messages.addRowBelow);
       return {
         content: content,
         value: {
@@ -288,23 +279,20 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableRowAddBelowIcon, {
           color: "currentColor",
           spacing: "spacious",
           label: formatMessage(messages.addRowBelow)
-        })) : undefined,
+        })),
         'aria-label': tooltip(addRowAfter, String(content))
       };
     });
     _defineProperty(_this, "createClearCellsItem", function () {
-      var _this$props5 = _this.props,
-        selectionRect = _this$props5.selectionRect,
-        formatMessage = _this$props5.intl.formatMessage,
-        editorView = _this$props5.editorView;
-      var _getPluginState5 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState5.isDragAndDropEnabled;
+      var _this$props3 = _this.props,
+        selectionRect = _this$props3.selectionRect,
+        formatMessage = _this$props3.intl.formatMessage;
       var top = selectionRect.top,
         bottom = selectionRect.bottom,
         right = selectionRect.right,
@@ -323,7 +311,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableCellClearIcon, {
           color: "currentColor",
@@ -331,17 +319,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        })) : undefined,
+        })),
         'aria-label': tooltip(backspace, String(content))
       };
     });
     _defineProperty(_this, "createDeleteColumnItem", function () {
-      var _this$props6 = _this.props,
-        selectionRect = _this$props6.selectionRect,
-        formatMessage = _this$props6.intl.formatMessage,
-        editorView = _this$props6.editorView;
-      var _getPluginState6 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState6.isDragAndDropEnabled;
+      var _this$props4 = _this.props,
+        selectionRect = _this$props4.selectionRect,
+        formatMessage = _this$props4.intl.formatMessage;
       var right = selectionRect.right,
         left = selectionRect.left;
       var noOfColumns = right - left;
@@ -352,7 +337,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableColumnDeleteIcon, {
           color: "currentColor",
@@ -360,16 +345,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
           })
-        })) : undefined
+        }))
       };
     });
     _defineProperty(_this, "createDeleteRowItem", function () {
-      var _this$props7 = _this.props,
-        selectionRect = _this$props7.selectionRect,
-        formatMessage = _this$props7.intl.formatMessage,
-        editorView = _this$props7.editorView;
-      var _getPluginState7 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState7.isDragAndDropEnabled;
+      var _this$props5 = _this.props,
+        selectionRect = _this$props5.selectionRect,
+        formatMessage = _this$props5.intl.formatMessage;
       var bottom = selectionRect.bottom,
         top = selectionRect.top;
       var noOfRows = bottom - top;
@@ -380,7 +362,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableRowDeleteIcon, {
           color: "currentColor",
@@ -388,20 +370,20 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           label: formatMessage(messages.removeRows, {
             0: noOfRows
           })
-        })) : undefined
+        }))
       };
     });
     _defineProperty(_this, "createDistributeColumnsItemInternal", function (partialMenuItem) {
       var _newResizeState$chang;
-      var _this$props8 = _this.props,
-        selectionRect = _this$props8.selectionRect,
-        editorView = _this$props8.editorView,
-        getEditorContainerWidth = _this$props8.getEditorContainerWidth,
-        getEditorFeatureFlags = _this$props8.getEditorFeatureFlags,
-        formatMessage = _this$props8.intl.formatMessage;
-      var _getPluginState8 = getPluginState(editorView.state),
-        _getPluginState8$isTa = _getPluginState8.isTableScalingEnabled,
-        isTableScalingEnabled = _getPluginState8$isTa === void 0 ? false : _getPluginState8$isTa;
+      var _this$props6 = _this.props,
+        selectionRect = _this$props6.selectionRect,
+        editorView = _this$props6.editorView,
+        getEditorContainerWidth = _this$props6.getEditorContainerWidth,
+        getEditorFeatureFlags = _this$props6.getEditorFeatureFlags,
+        formatMessage = _this$props6.intl.formatMessage;
+      var _getPluginState2 = getPluginState(editorView.state),
+        _getPluginState2$isTa = _getPluginState2.isTableScalingEnabled,
+        isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa;
       var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
         _ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
@@ -415,62 +397,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         isDisabled: !wouldChange
       }, partialMenuItem);
     });
-    _defineProperty(_this, "createDistributeColumnsItem", function () {
-      var editorView = _this.props.editorView;
-      var _getPluginState9 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState9.isDragAndDropEnabled,
-        allowDistributeColumns = _getPluginState9.pluginConfig.allowDistributeColumns;
-      if (allowDistributeColumns && !isDragAndDropEnabled) {
-        return _this.createDistributeColumnsItemInternal();
-      }
-      return null;
-    });
-    _defineProperty(_this, "createSortColumnItems", function () {
-      var _this$props9 = _this.props,
-        formatMessage = _this$props9.intl.formatMessage,
-        editorView = _this$props9.editorView,
-        allowColumnSorting = _this$props9.allowColumnSorting;
-      var _getPluginState0 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState0.isDragAndDropEnabled;
-      if (allowColumnSorting && !isDragAndDropEnabled) {
-        var hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
-        var warning = hasMergedCellsInTable ? {
-          tooltipDescription: formatMessage(messages.canNotSortTable),
-          isDisabled: true
-        } : {};
-        return [_objectSpread({
-          content: formatMessage(messages.sortColumnASC),
-          value: {
-            name: 'sort_column_asc'
-          }
-        }, warning), _objectSpread({
-          content: formatMessage(messages.sortColumnDESC),
-          value: {
-            name: 'sort_column_desc'
-          }
-        }, warning)];
-      }
-      return null;
-    });
-    _defineProperty(_this, "createOriginalContextMenuItems", function () {
-      var items = [];
-      var sortColumnItems = _this.createSortColumnItems();
-      var backgroundColorItem = _this.createBackgroundColorItem();
-      var distributeColumnsItem = _this.createDistributeColumnsItem();
-      sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
-      backgroundColorItem && items.push(backgroundColorItem);
-      items.push(_this.createInsertColumnItem());
-      items.push(_this.createInsertRowItem());
-      items.push(_this.createDeleteColumnItem());
-      items.push(_this.createDeleteRowItem());
-      items.push.apply(items, _toConsumableArray(_this.createMergeSplitCellItems()));
-      distributeColumnsItem && items.push(distributeColumnsItem);
-      items.push(_this.createClearCellsItem());
-      return [{
-        items: items
-      }];
-    });
-    _defineProperty(_this, "createNewContextMenuItems", function () {
+    _defineProperty(_this, "createContextMenuItems", function () {
       var _items$0$items;
       var backgroundColorItem = _this.createBackgroundColorItem();
       var mergeSplitCellItems = _this.createMergeSplitCellItems();
@@ -500,21 +427,21 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "onMenuItemActivated", function (_ref2) {
       var item = _ref2.item;
-      var _this$props0 = _this.props,
-        editorView = _this$props0.editorView,
-        selectionRect = _this$props0.selectionRect,
-        editorAnalyticsAPI = _this$props0.editorAnalyticsAPI,
-        getEditorContainerWidth = _this$props0.getEditorContainerWidth,
-        getEditorFeatureFlags = _this$props0.getEditorFeatureFlags,
-        isCellMenuOpenByKeyboard = _this$props0.isCellMenuOpenByKeyboard,
-        isCommentEditor = _this$props0.isCommentEditor;
+      var _this$props7 = _this.props,
+        editorView = _this$props7.editorView,
+        selectionRect = _this$props7.selectionRect,
+        editorAnalyticsAPI = _this$props7.editorAnalyticsAPI,
+        getEditorContainerWidth = _this$props7.getEditorContainerWidth,
+        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
+        isCellMenuOpenByKeyboard = _this$props7.isCellMenuOpenByKeyboard,
+        isCommentEditor = _this$props7.isCommentEditor;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      var _getPluginState1 = getPluginState(state),
-        targetCellPosition = _getPluginState1.targetCellPosition,
-        _getPluginState1$isTa = _getPluginState1.isTableScalingEnabled,
-        isTableScalingEnabled = _getPluginState1$isTa === void 0 ? false : _getPluginState1$isTa;
+      var _getPluginState3 = getPluginState(state),
+        targetCellPosition = _getPluginState3.targetCellPosition,
+        _getPluginState3$isTa = _getPluginState3.isTableScalingEnabled,
+        isTableScalingEnabled = _getPluginState3$isTa === void 0 ? false : _getPluginState3$isTa;
       var _ref3 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
         _ref3$tableWithFixedC = _ref3.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _ref3$tableWithFixedC === void 0 ? false : _ref3$tableWithFixedC;
@@ -578,8 +505,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           _this.toggleOpen();
           break;
         case 'delete_row':
-          var _getPluginState10 = getPluginState(state),
-            isHeaderRowRequired = _getPluginState10.pluginConfig.isHeaderRowRequired;
+          var _getPluginState4 = getPluginState(state),
+            isHeaderRowRequired = _getPluginState4.pluginConfig.isHeaderRowRequired;
           deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
           _this.toggleOpen();
           break;
@@ -607,11 +534,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "toggleOpen", function () {
-      var _this$props1 = _this.props,
-        isOpen = _this$props1.isOpen,
-        _this$props1$editorVi = _this$props1.editorView,
-        state = _this$props1$editorVi.state,
-        dispatch = _this$props1$editorVi.dispatch;
+      var _this$props8 = _this.props,
+        isOpen = _this$props8.isOpen,
+        _this$props8$editorVi = _this$props8.editorView,
+        state = _this$props8$editorVi.state,
+        dispatch = _this$props8$editorVi.dispatch;
       toggleContextualMenu()(state, dispatch);
       if (!isOpen) {
         _this.setState({
@@ -620,12 +547,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "handleOpenChange", function (payload) {
-      var _this$props10 = _this.props,
-        _this$props10$editorV = _this$props10.editorView,
-        state = _this$props10$editorV.state,
-        dispatch = _this$props10$editorV.dispatch,
-        dom = _this$props10$editorV.dom,
-        isCellMenuOpenByKeyboard = _this$props10.isCellMenuOpenByKeyboard;
+      var _this$props9 = _this.props,
+        _this$props9$editorVi = _this$props9.editorView,
+        state = _this$props9$editorVi.state,
+        dispatch = _this$props9$editorVi.dispatch,
+        dom = _this$props9$editorVi.dom,
+        isCellMenuOpenByKeyboard = _this$props9.isCellMenuOpenByKeyboard;
       if (payload) {
         var event = payload.event;
         if (event && event instanceof KeyboardEvent) {
@@ -664,11 +591,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(_this, "handleItemMouseEnter", function (_ref4) {
       var item = _ref4.item;
-      var _this$props11 = _this.props,
-        _this$props11$editorV = _this$props11.editorView,
-        state = _this$props11$editorV.state,
-        dispatch = _this$props11$editorV.dispatch,
-        selectionRect = _this$props11.selectionRect;
+      var _this$props0 = _this.props,
+        _this$props0$editorVi = _this$props0.editorView,
+        state = _this$props0$editorVi.state,
+        dispatch = _this$props0$editorVi.dispatch,
+        selectionRect = _this$props0.selectionRect;
       if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
         if (item.value.name === 'background') {
           if (!_this.state.isSubmenuOpen) {
@@ -712,10 +639,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "setColor", function (color) {
-      var _this$props12 = _this.props,
-        editorView = _this$props12.editorView,
-        editorAnalyticsAPI = _this$props12.editorAnalyticsAPI,
-        isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
+      var _this$props1 = _this.props,
+        editorView = _this$props1.editorView,
+        editorAnalyticsAPI = _this$props1.editorAnalyticsAPI,
+        isCellMenuOpenByKeyboard = _this$props1.isCellMenuOpenByKeyboard;
       var state = editorView.state,
         dispatch = editorView.dispatch,
         dom = editorView.dom;
@@ -753,26 +680,22 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _getPluginState11 = getPluginState(this.props.editorView.state),
-        isDragAndDropEnabled = _getPluginState11.isDragAndDropEnabled,
-        isContextualMenuOpen = _getPluginState11.isContextualMenuOpen;
-      if (isDragAndDropEnabled && this.props.isDragMenuOpen && isContextualMenuOpen) {
+      var _getPluginState5 = getPluginState(this.props.editorView.state),
+        isContextualMenuOpen = _getPluginState5.isContextualMenuOpen;
+      if (this.props.isDragMenuOpen && isContextualMenuOpen) {
         toggleContextualMenu()(this.props.editorView.state, this.props.editorView.dispatch);
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props13 = this.props,
-        isOpen = _this$props13.isOpen,
-        offset = _this$props13.offset,
-        boundariesElement = _this$props13.boundariesElement,
-        editorView = _this$props13.editorView,
-        isCellMenuOpenByKeyboard = _this$props13.isCellMenuOpenByKeyboard,
-        api = _this$props13.api;
-      var _getPluginState12 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState12.isDragAndDropEnabled;
-      var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var _this$props10 = this.props,
+        isOpen = _this$props10.isOpen,
+        offset = _this$props10.offset,
+        boundariesElement = _this$props10.boundariesElement,
+        isCellMenuOpenByKeyboard = _this$props10.isCellMenuOpenByKeyboard,
+        api = _this$props10.api;
+      var items = this.createContextMenuItems();
       var isOpenAllowed = false;
       isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
       return jsx(UserIntentPopupWrapper, {
@@ -798,7 +721,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         onMouseEnter: this.handleItemMouseEnter,
         onMouseLeave: this.handleItemMouseLeave,
         fitHeight: 188,
-        fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
+        fitWidth: contextualMenuDropdownWidthDnD
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         shouldFocusFirstItem: function shouldFocusFirstItem() {
@@ -806,9 +729,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         },
         boundariesElement: boundariesElement,
         offset: offset,
-        section: isDragAndDropEnabled ? {
-          hasSeparator: true
-        } : undefined,
+        section: dropdownMenuSection,
         allowEnterDefaultBehavior: this.state.isSubmenuOpen
       })));
     }

package/dist/esm/ui/FloatingContextualMenu/index.js

@@ -9,7 +9,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
+import { contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -35,8 +35,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
 
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = getPluginState(editorView.state),
-    targetCellPosition = _getPluginState.targetCellPosition,
-    isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+    targetCellPosition = _getPluginState.targetCellPosition;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -65,7 +64,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: tablePopupMenuFitHeight,
-    fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
+    fitWidth: contextualMenuDropdownWidthDnD
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
@@ -76,7 +75,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     offset: [-7, 0],
     stick: true
   }, jsx("div", {
-    css: tablePopupStyles(isDragAndDropEnabled)
+    css: tablePopupStyles()
   }, jsx(ContextualMenu, {
     editorView: editorView
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/esm/ui/FloatingContextualMenu/styles.js

@@ -4,7 +4,7 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { TableCssClassName as ClassName } from '../../types';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
+import { contextualMenuDropdownWidthDnD } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return css({
     '&::before': {
@@ -13,8 +13,8 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
     }
   });
 };
-export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+export var tablePopupStyles = function tablePopupStyles(
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)", ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", contextualMenuDropdownWidthDnD, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
 };