@atlaskit/editor-plugin-table 22.2.16 → 22.2.18

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 22.2.18
+
+### Patch Changes
+
+- [`34d7b445ae298`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/34d7b445ae298) -
+  [ux] EDITOR-6294 Removing tableDragAndDrop from plugin presets and cleaning up unused table code
+  for menus
+- Updated dependencies
+
+## 22.2.17
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.2.16
 
 ### Patch Changes

package/dist/cjs/types/index.js

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

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

@@ -60,6 +60,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ /* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */ // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var arrowsList = new Set(!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']);
+var dropdownMenuSection = {
+  hasSeparator: true
+};
 var elementBeforeIconStyles = (0, _primitives.xcss)({
   marginRight: 'space.negative.075',
   display: 'flex'
@@ -121,8 +124,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         isCellMenuOpenByKeyboard = _this$props.isCellMenuOpenByKeyboard;
       var isSubmenuOpen = _this.state.isSubmenuOpen;
       var _getPluginState = (0, _pluginFactory.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;
@@ -134,17 +136,17 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         var selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
         var selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
         return {
-          content: isDragAndDropEnabled ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
+          content: formatMessage(_messages.tableMessages.backgroundColor),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+          elemBefore: (0, _react2.jsx)(_primitives.Box, {
             xcss: elementBeforeIconStyles
           }, (0, _react2.jsx)(_paintBucket.default, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(_messages.tableMessages.backgroundColor)
-          })) : undefined,
+          })),
           elemAfter:
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           (0, _react2.jsx)("div", {
@@ -154,7 +156,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             css: (0, _styles2.cellColourPreviewStyles)(background)
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
-            className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
+            className: _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL
           }), isSubmenuOpen && (0, _react2.jsx)("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
@@ -214,10 +216,7 @@ var ContextualMenu = exports.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 = (0, _pluginFactory.getPluginState)(editorView.state),
-        isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
+        formatMessage = _this$props2.intl.formatMessage;
       if (allowMergeCells) {
         return [{
           content: formatMessage(_messages.tableMessages.mergeCells),
@@ -225,37 +224,33 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _merge.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+          elemBefore: (0, _react2.jsx)(_primitives.Box, {
             xcss: elementBeforeIconStyles
           }, (0, _react2.jsx)(_tableCellMerge.default, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(_messages.tableMessages.mergeCells)
-          })) : undefined
+          }))
         }, {
           content: formatMessage(_messages.tableMessages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+          elemBefore: (0, _react2.jsx)(_primitives.Box, {
             xcss: elementBeforeIconStyles
           }, (0, _react2.jsx)(_tableCellSplit.default, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(_messages.tableMessages.splitCell)
-          })) : undefined
+          }))
         }];
       }
       return [];
     });
     (0, _defineProperty2.default)(_this, "createInsertColumnItem", function () {
-      var _this$props3 = _this.props,
-        formatMessage = _this$props3.intl.formatMessage,
-        editorView = _this$props3.editorView;
-      var _getPluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
-        isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
-      var content = formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn);
+      var formatMessage = _this.props.intl.formatMessage;
+      var content = formatMessage(_messages.tableMessages.addColumnRight);
       return {
         content: content,
         value: {
@@ -265,7 +260,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.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
         (0, _react2.jsx)(_primitives.Box, {
           xcss: elementBeforeIconStyles
@@ -273,17 +268,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           color: "currentColor",
           spacing: "spacious",
           label: formatMessage(_messages.tableMessages.addColumnRight)
-        })) : undefined,
+        })),
         'aria-label': (0, _keymaps.tooltip)(_keymaps.addColumnAfter, String(content))
       };
     });
     (0, _defineProperty2.default)(_this, "createInsertRowItem", function () {
-      var _this$props4 = _this.props,
-        formatMessage = _this$props4.intl.formatMessage,
-        editorView = _this$props4.editorView;
-      var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
-        isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
-      var content = formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow);
+      var formatMessage = _this.props.intl.formatMessage;
+      var content = formatMessage(_messages.tableMessages.addRowBelow);
       return {
         content: content,
         value: {
@@ -293,23 +284,20 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+        elemBefore: (0, _react2.jsx)(_primitives.Box, {
           xcss: elementBeforeIconStyles
         }, (0, _react2.jsx)(_tableRowAddBelow.default, {
           color: "currentColor",
           spacing: "spacious",
           label: formatMessage(_messages.tableMessages.addRowBelow)
-        })) : undefined,
+        })),
         'aria-label': (0, _keymaps.tooltip)(_keymaps.addRowAfter, String(content))
       };
     });
     (0, _defineProperty2.default)(_this, "createClearCellsItem", function () {
-      var _this$props5 = _this.props,
-        selectionRect = _this$props5.selectionRect,
-        formatMessage = _this$props5.intl.formatMessage,
-        editorView = _this$props5.editorView;
-      var _getPluginState5 = (0, _pluginFactory.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,
@@ -328,7 +316,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+        elemBefore: (0, _react2.jsx)(_primitives.Box, {
           xcss: elementBeforeIconStyles
         }, (0, _react2.jsx)(_tableCellClear.default, {
           color: "currentColor",
@@ -336,17 +324,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           label: formatMessage(_messages.tableMessages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        })) : undefined,
+        })),
         'aria-label': (0, _keymaps.tooltip)(_keymaps.backspace, String(content))
       };
     });
     (0, _defineProperty2.default)(_this, "createDeleteColumnItem", function () {
-      var _this$props6 = _this.props,
-        selectionRect = _this$props6.selectionRect,
-        formatMessage = _this$props6.intl.formatMessage,
-        editorView = _this$props6.editorView;
-      var _getPluginState6 = (0, _pluginFactory.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;
@@ -357,7 +342,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+        elemBefore: (0, _react2.jsx)(_primitives.Box, {
           xcss: elementBeforeIconStyles
         }, (0, _react2.jsx)(_tableColumnDelete.default, {
           color: "currentColor",
@@ -365,16 +350,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           label: formatMessage(_messages.tableMessages.removeColumns, {
             0: noOfColumns
           })
-        })) : undefined
+        }))
       };
     });
     (0, _defineProperty2.default)(_this, "createDeleteRowItem", function () {
-      var _this$props7 = _this.props,
-        selectionRect = _this$props7.selectionRect,
-        formatMessage = _this$props7.intl.formatMessage,
-        editorView = _this$props7.editorView;
-      var _getPluginState7 = (0, _pluginFactory.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;
@@ -385,7 +367,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+        elemBefore: (0, _react2.jsx)(_primitives.Box, {
           xcss: elementBeforeIconStyles
         }, (0, _react2.jsx)(_tableRowDelete.default, {
           color: "currentColor",
@@ -393,20 +375,20 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           label: formatMessage(_messages.tableMessages.removeRows, {
             0: noOfRows
           })
-        })) : undefined
+        }))
       };
     });
     (0, _defineProperty2.default)(_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 = (0, _pluginFactory.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 = (0, _pluginFactory.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;
@@ -420,62 +402,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         isDisabled: !wouldChange
       }, partialMenuItem);
     });
-    (0, _defineProperty2.default)(_this, "createDistributeColumnsItem", function () {
-      var editorView = _this.props.editorView;
-      var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
-        isDragAndDropEnabled = _getPluginState9.isDragAndDropEnabled,
-        allowDistributeColumns = _getPluginState9.pluginConfig.allowDistributeColumns;
-      if (allowDistributeColumns && !isDragAndDropEnabled) {
-        return _this.createDistributeColumnsItemInternal();
-      }
-      return null;
-    });
-    (0, _defineProperty2.default)(_this, "createSortColumnItems", function () {
-      var _this$props9 = _this.props,
-        formatMessage = _this$props9.intl.formatMessage,
-        editorView = _this$props9.editorView,
-        allowColumnSorting = _this$props9.allowColumnSorting;
-      var _getPluginState0 = (0, _pluginFactory.getPluginState)(editorView.state),
-        isDragAndDropEnabled = _getPluginState0.isDragAndDropEnabled;
-      if (allowColumnSorting && !isDragAndDropEnabled) {
-        var hasMergedCellsInTable = (0, _table.getMergedCellsPositions)(editorView.state.tr).length > 0;
-        var warning = hasMergedCellsInTable ? {
-          tooltipDescription: formatMessage(_messages.tableMessages.canNotSortTable),
-          isDisabled: true
-        } : {};
-        return [_objectSpread({
-          content: formatMessage(_messages.tableMessages.sortColumnASC),
-          value: {
-            name: 'sort_column_asc'
-          }
-        }, warning), _objectSpread({
-          content: formatMessage(_messages.tableMessages.sortColumnDESC),
-          value: {
-            name: 'sort_column_desc'
-          }
-        }, warning)];
-      }
-      return null;
-    });
-    (0, _defineProperty2.default)(_this, "createOriginalContextMenuItems", function () {
-      var items = [];
-      var sortColumnItems = _this.createSortColumnItems();
-      var backgroundColorItem = _this.createBackgroundColorItem();
-      var distributeColumnsItem = _this.createDistributeColumnsItem();
-      sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(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, (0, _toConsumableArray2.default)(_this.createMergeSplitCellItems()));
-      distributeColumnsItem && items.push(distributeColumnsItem);
-      items.push(_this.createClearCellsItem());
-      return [{
-        items: items
-      }];
-    });
-    (0, _defineProperty2.default)(_this, "createNewContextMenuItems", function () {
+    (0, _defineProperty2.default)(_this, "createContextMenuItems", function () {
       var _items$0$items;
       var backgroundColorItem = _this.createBackgroundColorItem();
       var mergeSplitCellItems = _this.createMergeSplitCellItems();
@@ -505,21 +432,21 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     });
     (0, _defineProperty2.default)(_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 = (0, _pluginFactory.getPluginState)(state),
-        targetCellPosition = _getPluginState1.targetCellPosition,
-        _getPluginState1$isTa = _getPluginState1.isTableScalingEnabled,
-        isTableScalingEnabled = _getPluginState1$isTa === void 0 ? false : _getPluginState1$isTa;
+      var _getPluginState3 = (0, _pluginFactory.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;
@@ -583,8 +510,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'delete_row':
-          var _getPluginState10 = (0, _pluginFactory.getPluginState)(state),
-            isHeaderRowRequired = _getPluginState10.pluginConfig.isHeaderRowRequired;
+          var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+            isHeaderRowRequired = _getPluginState4.pluginConfig.isHeaderRowRequired;
           (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
           _this.toggleOpen();
           break;
@@ -612,11 +539,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)(_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;
       (0, _commands.toggleContextualMenu)()(state, dispatch);
       if (!isOpen) {
         _this.setState({
@@ -625,12 +552,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)(_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) {
@@ -669,11 +596,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (0, _defineProperty2.default)(_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 (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
         if (item.value.name === 'background') {
           if (!_this.state.isSubmenuOpen) {
@@ -717,10 +644,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)(_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;
@@ -758,26 +685,22 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _getPluginState11 = (0, _pluginFactory.getPluginState)(this.props.editorView.state),
-        isDragAndDropEnabled = _getPluginState11.isDragAndDropEnabled,
-        isContextualMenuOpen = _getPluginState11.isContextualMenuOpen;
-      if (isDragAndDropEnabled && this.props.isDragMenuOpen && isContextualMenuOpen) {
+      var _getPluginState5 = (0, _pluginFactory.getPluginState)(this.props.editorView.state),
+        isContextualMenuOpen = _getPluginState5.isContextualMenuOpen;
+      if (this.props.isDragMenuOpen && isContextualMenuOpen) {
         (0, _commands.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 = (0, _pluginFactory.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 (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
@@ -803,7 +726,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         onMouseEnter: this.handleItemMouseEnter,
         onMouseLeave: this.handleItemMouseLeave,
         fitHeight: 188,
-        fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth
+        fitWidth: _consts.contextualMenuDropdownWidthDnD
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         shouldFocusFirstItem: function shouldFocusFirstItem() {
@@ -811,9 +734,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         },
         boundariesElement: boundariesElement,
         offset: offset,
-        section: isDragAndDropEnabled ? {
-          hasSeparator: true
-        } : undefined,
+        section: dropdownMenuSection,
         allowEnterDefaultBehavior: this.state.isSubmenuOpen
       })));
     }

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

@@ -43,8 +43,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
 
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
-    targetCellPosition = _getPluginState.targetCellPosition,
-    isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+    targetCellPosition = _getPluginState.targetCellPosition;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -73,7 +72,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: _consts.tablePopupMenuFitHeight,
-    fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth
+    fitWidth: _consts.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.
     ,
@@ -84,7 +83,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     offset: [-7, 0],
     stick: true
   }, (0, _react.jsx)("div", {
-    css: (0, _styles.tablePopupStyles)(isDragAndDropEnabled)
+    css: (0, _styles.tablePopupStyles)()
   }, (0, _react.jsx)(_ContextualMenu.default, {
     editorView: editorView
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

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

@@ -19,8 +19,8 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
     }
   });
 };
-var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.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 ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", _consts.contextualMenuDropdownWidthDnD, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
 };

package/dist/cjs/ui/FloatingInsertButton/InsertButton.js

@@ -19,33 +19,25 @@ var _types = require("../../types");
 var _consts = require("../consts");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-var getInsertLineHeight = function getInsertLineHeight(tableRef, hasStickyHeaders, isDragAndDropEnabled) {
+var getInsertLineHeight = function getInsertLineHeight(tableRef, hasStickyHeaders) {
   // The line gets height 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   var LINE_OFFSET = 3;
-  var ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - _styles.tableMarginTop * (isDragAndDropEnabled ? 3 : 4) - LINE_OFFSET : _consts.tableToolbarSize + LINE_OFFSET;
+  var ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - _styles.tableMarginTop * 3 - LINE_OFFSET : _consts.tableToolbarSize + LINE_OFFSET;
   return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
 };
-var getToolbarSize = function getToolbarSize(tableRef) {
+var getNumberColumnWidth = function getNumberColumnWidth(tableRef) {
   var parent = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
   if (parent) {
-    return parent.querySelector(".".concat(_types.TableCssClassName.NUMBERED_COLUMN)) ? _consts.tableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth - 1 : _consts.tableToolbarSize;
-  }
-  return _consts.tableToolbarSize;
-};
-var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDropEnabled) {
-  var parent = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
-  if (parent && isDragAndDropEnabled) {
     return parent.querySelector(".".concat(_types.TableCssClassName.NUMBERED_COLUMN)) ? _editorSharedStyles.akEditorTableNumberColumnWidth - 1 : 0;
   }
   return 0;
 };
-var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled, isChromelessEditor) {
+var getInsertLineWidth = function getInsertLineWidth(tableRef, isChromelessEditor) {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
-  var LINE_OFFSET = 4;
   var DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
   var parentElement = tableRef.parentElement,
     offsetWidth = tableRef.offsetWidth;
@@ -57,9 +49,7 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnab
   var _ref = parentElement,
     scrollLeft = _ref.scrollLeft;
   var diff = offsetWidth - parentOffsetWidth;
-  var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
-  var lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
-  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
+  return Math.min(offsetWidth, parentOffsetWidth - Math.max(scrollLeft - diff, 0)) + DRAG_LINE_OFFSET + getNumberColumnWidth(tableRef);
 };
 var tooltipMessageByType = function tooltipMessageByType(type) {
   return type === 'row' ? _messages.tableMessages.insertRow : _messages.tableMessages.insertColumn;
@@ -104,10 +94,10 @@ var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref2) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: type === 'row' ? {
-      width: getInsertLineWidth(tableRef, true, isChromelessEditor),
+      width: getInsertLineWidth(tableRef, isChromelessEditor),
       left: "var(--ds-space-150, 12px)"
     } : {
-      height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: '-3px'
     }