@atlaskit/editor-plugin-table 5.6.7 → 5.7.0

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -9,6 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
@@ -24,6 +26,10 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { splitCell } from '@atlaskit/editor-tables/utils';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -32,6 +38,7 @@ import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
+import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
 import { cellColourPreviewStyles } from './styles';
 export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _inherits(ContextualMenu, _Component);
@@ -57,36 +64,35 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         ref.style.left = "-".concat(rect.width, "px");
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "createItems", function () {
+    _defineProperty(_assertThisInitialized(_this), "createBackgroundColorItem", function () {
       var _this$props = _this.props,
-        allowMergeCells = _this$props.allowMergeCells,
-        allowColumnSorting = _this$props.allowColumnSorting,
         allowBackgroundColor = _this$props.allowBackgroundColor,
         state = _this$props.editorView.state,
         isOpen = _this$props.isOpen,
-        selectionRect = _this$props.selectionRect,
         formatMessage = _this$props.intl.formatMessage,
         editorView = _this$props.editorView;
-      var items = [];
       var isSubmenuOpen = _this.state.isSubmenuOpen;
-      // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var _getPluginState = getPluginState(editorView.state),
         targetCellPosition = _getPluginState.targetCellPosition,
-        allowDistributeColumns = _getPluginState.pluginConfig.allowDistributeColumns;
+        isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
       if (allowBackgroundColor) {
         var _node$attrs;
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
-        items.push({
-          content: formatMessage(messages.cellBackground),
+        return {
+          content: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
           value: {
             name: 'background'
           },
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(EditorBackgroundColorIcon, {
+            label: formatMessage(messages.backgroundColor),
+            size: "medium"
+          }) : undefined,
           elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
             css: cellColourPreviewStyles(background),
-            className: ClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -100,122 +106,253 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
           })))
-        });
+        };
       }
-      items.push({
-        content: formatMessage(messages.insertColumn),
+    });
+    _defineProperty(_assertThisInitialized(_this), "createMergeSplitCellItems", function () {
+      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;
+      if (allowMergeCells) {
+        return [{
+          content: formatMessage(messages.mergeCells),
+          value: {
+            name: 'merge'
+          },
+          isDisabled: !canMergeCells(state.tr),
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(MergeCellsIcon, null) : undefined
+        }, {
+          content: formatMessage(messages.splitCell),
+          value: {
+            name: 'split'
+          },
+          isDisabled: !splitCell(state),
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(SplitCellIcon, null) : undefined
+        }];
+      }
+      return [];
+    });
+    _defineProperty(_assertThisInitialized(_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;
+      return {
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumn : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
-        }, tooltip(addColumnAfter))
-      });
-      items.push({
-        content: formatMessage(messages.insertRow),
+        }, tooltip(addColumnAfter)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddColRightIcon, null) : undefined
+      };
+    });
+    _defineProperty(_assertThisInitialized(_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;
+      return {
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRow : messages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
-        }, tooltip(addRowAfter))
-      });
+        }, tooltip(addRowAfter)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddRowBelowIcon, null) : undefined
+      };
+    });
+    _defineProperty(_assertThisInitialized(_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 top = selectionRect.top,
         bottom = selectionRect.bottom,
         right = selectionRect.right,
         left = selectionRect.left;
       var noOfColumns = right - left;
       var noOfRows = bottom - top;
-      items.push({
+      return {
+        content: formatMessage(messages.clearCells, {
+          0: Math.max(noOfColumns, noOfRows)
+        }),
+        value: {
+          name: 'clear'
+        },
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(backspace)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(CrossCircleIcon, {
+          label: formatMessage(messages.clearCells, {
+            0: Math.max(noOfColumns, noOfRows)
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(_assertThisInitialized(_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 right = selectionRect.right,
+        left = selectionRect.left;
+      var noOfColumns = right - left;
+      return {
         content: formatMessage(messages.removeColumns, {
           0: noOfColumns
         }),
         value: {
           name: 'delete_column'
-        }
-      });
-      items.push({
+        },
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+          label: formatMessage(messages.removeColumns, {
+            0: noOfColumns
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(_assertThisInitialized(_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 bottom = selectionRect.bottom,
+        top = selectionRect.top;
+      var noOfRows = bottom - top;
+      return {
         content: formatMessage(messages.removeRows, {
           0: noOfRows
         }),
         value: {
           name: 'delete_row'
-        }
-      });
-      if (allowMergeCells) {
-        items.push({
-          content: formatMessage(messages.mergeCells),
-          value: {
-            name: 'merge'
-          },
-          isDisabled: !canMergeCells(state.tr)
-        });
-        items.push({
-          content: formatMessage(messages.splitCell),
-          value: {
-            name: 'split'
-          },
-          isDisabled: !splitCell(state)
-        });
-      }
-      if (allowDistributeColumns) {
+        },
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+          label: formatMessage(messages.removeRows, {
+            0: noOfRows
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "createDistributeColumnsItem", function () {
+      var _this$props8 = _this.props,
+        selectionRect = _this$props8.selectionRect,
+        formatMessage = _this$props8.intl.formatMessage,
+        editorView = _this$props8.editorView,
+        getEditorContainerWidth = _this$props8.getEditorContainerWidth;
+      var _getPluginState8 = getPluginState(editorView.state),
+        isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
+        allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
+      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
         var _newResizeState$chang;
-        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), _this.props.getEditorContainerWidth);
+        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
         var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
-        items.push({
+        return {
           content: formatMessage(messages.distributeColumns),
           value: {
             name: 'distribute_columns'
           },
           isDisabled: !wouldChange
-        });
+        };
       }
-      if (allowColumnSorting) {
-        var hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+      return null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "createSortColumnItems", function () {
+      var _this$props9 = _this.props,
+        formatMessage = _this$props9.intl.formatMessage,
+        editorView = _this$props9.editorView,
+        allowColumnSorting = _this$props9.allowColumnSorting;
+      var _getPluginState9 = getPluginState(editorView.state),
+        isDragAndDropEnabled = _getPluginState9.isDragAndDropEnabled;
+      if (allowColumnSorting && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+        var hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
         var warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
           isDisabled: true
         } : {};
-        items.push(_objectSpread({
+        return [_objectSpread({
           content: formatMessage(messages.sortColumnASC),
           value: {
             name: 'sort_column_asc'
           }
-        }, warning));
-        items.push(_objectSpread({
+        }, warning), _objectSpread({
           content: formatMessage(messages.sortColumnDESC),
           value: {
             name: 'sort_column_desc'
           }
-        }, warning));
+        }, warning)];
       }
-      items.push({
-        content: formatMessage(messages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
-        value: {
-          name: 'clear'
-        },
-        elemAfter: jsx("div", {
-          css: shortcutStyle
-        }, tooltip(backspace))
-      });
-      return items.length ? [{
+      return null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "createOriginalContextMenuItems", function () {
+      var items = [];
+      var backgroundColorItem = _this.createBackgroundColorItem();
+      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()));
+      var distributeColumnsItem = _this.createDistributeColumnsItem();
+      distributeColumnsItem && items.push(distributeColumnsItem);
+      var sortColumnItems = _this.createSortColumnItems();
+      sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
+      items.push(_this.createClearCellsItem());
+      return [{
         items: items
-      }] : null;
+      }];
+    });
+    _defineProperty(_assertThisInitialized(_this), "createNewContextMenuItems", function () {
+      var _items$0$items;
+      var backgroundColorItem = _this.createBackgroundColorItem();
+      var mergeSplitCellItems = _this.createMergeSplitCellItems();
+      var insertColumnItem = _this.createInsertColumnItem();
+      var insertRowItem = _this.createInsertRowItem();
+      var clearCellsItem = _this.createClearCellsItem();
+      var deleteColumnItem = _this.createDeleteColumnItem();
+      var deleteRowItem = _this.createDeleteRowItem();
+
+      // Group items so when table.menu.group-items FF is enabled, a divider shows under split cell, above add column
+      var items = [{
+        items: []
+      }, {
+        items: []
+      }];
+      backgroundColorItem && items[0].items.push(backgroundColorItem);
+      (_items$0$items = items[0].items).push.apply(_items$0$items, _toConsumableArray(mergeSplitCellItems));
+      items[1].items.push(insertColumnItem);
+      items[1].items.push(insertRowItem);
+      items[1].items.push(clearCellsItem);
+      items[1].items.push(deleteColumnItem);
+      items[1].items.push(deleteRowItem);
+      return items;
     });
     _defineProperty(_assertThisInitialized(_this), "onMenuItemActivated", function (_ref) {
       var item = _ref.item;
-      var _this$props2 = _this.props,
-        editorView = _this$props2.editorView,
-        selectionRect = _this$props2.selectionRect,
-        editorAnalyticsAPI = _this$props2.editorAnalyticsAPI,
-        getEditorContainerWidth = _this$props2.getEditorContainerWidth;
+      var _this$props10 = _this.props,
+        editorView = _this$props10.editorView,
+        selectionRect = _this$props10.selectionRect,
+        editorAnalyticsAPI = _this$props10.editorAnalyticsAPI,
+        getEditorContainerWidth = _this$props10.getEditorContainerWidth;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      var _getPluginState2 = getPluginState(state),
-        targetCellPosition = _getPluginState2.targetCellPosition;
+      var _getPluginState10 = getPluginState(state),
+        targetCellPosition = _getPluginState10.targetCellPosition;
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -260,19 +397,19 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           _this.toggleOpen();
           break;
         case 'delete_row':
-          var _getPluginState3 = getPluginState(state),
-            isHeaderRowRequired = _getPluginState3.pluginConfig.isHeaderRowRequired;
+          var _getPluginState11 = getPluginState(state),
+            isHeaderRowRequired = _getPluginState11.pluginConfig.isHeaderRowRequired;
           deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
           _this.toggleOpen();
           break;
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
-      var _this$props3 = _this.props,
-        isOpen = _this$props3.isOpen,
-        _this$props3$editorVi = _this$props3.editorView,
-        state = _this$props3$editorVi.state,
-        dispatch = _this$props3$editorVi.dispatch;
+      var _this$props11 = _this.props,
+        isOpen = _this$props11.isOpen,
+        _this$props11$editorV = _this$props11.editorView,
+        state = _this$props11$editorV.state,
+        dispatch = _this$props11$editorV.dispatch;
       toggleContextualMenu()(state, dispatch);
       if (!isOpen) {
         _this.setState({
@@ -291,11 +428,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref2) {
       var item = _ref2.item;
-      var _this$props4 = _this.props,
-        _this$props4$editorVi = _this$props4.editorView,
-        state = _this$props4$editorVi.state,
-        dispatch = _this$props4$editorVi.dispatch,
-        selectionRect = _this$props4.selectionRect;
+      var _this$props12 = _this.props,
+        _this$props12$editorV = _this$props12.editorView,
+        state = _this$props12$editorV.state,
+        dispatch = _this$props12$editorV.dispatch,
+        selectionRect = _this$props12.selectionRect;
       if (item.value.name === 'background') {
         if (!_this.state.isSubmenuOpen) {
           _this.setState({
@@ -333,12 +470,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "setColor", function (color) {
-      var _this$props5 = _this.props,
-        editorView = _this$props5.editorView,
-        editorAnalyticsAPI = _this$props5.editorAnalyticsAPI;
+      var _this$props13 = _this.props,
+        editorView = _this$props13.editorView,
+        editorAnalyticsAPI = _this$props13.editorAnalyticsAPI;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-      var _getPluginState4 = getPluginState(editorView.state),
-        targetCellPosition = _getPluginState4.targetCellPosition;
+      var _getPluginState12 = getPluginState(editorView.state),
+        targetCellPosition = _getPluginState12.targetCellPosition;
       var state = editorView.state,
         dispatch = editorView.dispatch;
       setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
@@ -349,15 +486,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _createClass(ContextualMenu, [{
     key: "render",
     value: function render() {
-      var _this$props6 = this.props,
-        isOpen = _this$props6.isOpen,
-        mountPoint = _this$props6.mountPoint,
-        offset = _this$props6.offset,
-        boundariesElement = _this$props6.boundariesElement;
-      var items = this.createItems();
-      if (!items) {
-        return null;
-      }
+      var _this$props14 = this.props,
+        isOpen = _this$props14.isOpen,
+        mountPoint = _this$props14.mountPoint,
+        offset = _this$props14.offset,
+        boundariesElement = _this$props14.boundariesElement,
+        editorView = _this$props14.editorView;
+      var _getPluginState13 = getPluginState(editorView.state),
+        isDragAndDropEnabled = _getPluginState13.isDragAndDropEnabled;
+      var items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       return jsx("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
@@ -379,7 +516,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         fitHeight: 188,
         fitWidth: contextualMenuDropdownWidth,
         boundariesElement: boundariesElement,
-        offset: offset
+        offset: offset,
+        section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {
+          hasSeparator: true
+        } : undefined
       }));
     }
   }]);

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

@@ -11,4 +11,4 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-export var tablePopupStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var tablePopupStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));

package/dist/esm/ui/icons/MergeCellsIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export var MergeCellsIcon = function MergeCellsIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 19C10.5523 19 11 18.5523 11 18C11 17.4477 10.5523 17 10 17H6V7L10 7C10.5523 7 11 6.55228 11 6C11 5.44771 10.5523 5 10 5H6C4.89543 5 4 5.89543 4 7V17C4 18.1046 4.89543 19 6 19H10ZM14 5C13.4477 5 13 5.44772 13 6C13 6.55228 13.4477 7 14 7H18V17L14 17C13.4477 17 13 17.4477 13 18C13 18.5523 13.4477 19 14 19H18C19.1046 19 20 18.1046 20 17V7C20 5.89543 19.1046 5 18 5H14Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15.75 10L13.75 12L15.75 14",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.25 14L10.25 12L8.25 10",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/esm/ui/icons/SplitCellIcon.js

@@ -0,0 +1,34 @@
+import React from 'react';
+export var SplitCellIcon = function SplitCellIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 18L14 18L14 6L19 6",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5 6L10 6L9.99999 18L5 18",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 10L5 12L7 14",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17 14L19 12L17 10",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

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

@@ -2,6 +2,8 @@ export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
+export { MergeCellsIcon } from './MergeCellsIcon';
+export { SplitCellIcon } from './SplitCellIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

package/dist/types/types.d.ts

@@ -329,6 +329,7 @@ export declare const TableCssClassName: {
     CONTEXTUAL_MENU_BUTTON: string;
     CONTEXTUAL_MENU_BUTTON_FIXED: string;
     CONTEXTUAL_MENU_ICON: string;
+    CONTEXTUAL_MENU_ICON_SMALL: string;
     SELECTED_CELL: string;
     NODEVIEW_WRAPPER: string;
     TABLE_SELECTED: string;

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

@@ -28,9 +28,19 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     static defaultProps: {
         boundariesElement: HTMLElement | undefined;
     };
-    render(): jsx.JSX.Element | null;
+    render(): jsx.JSX.Element;
     private handleSubMenuRef;
-    private createItems;
+    private createBackgroundColorItem;
+    private createMergeSplitCellItems;
+    private createInsertColumnItem;
+    private createInsertRowItem;
+    private createClearCellsItem;
+    private createDeleteColumnItem;
+    private createDeleteRowItem;
+    private createDistributeColumnsItem;
+    private createSortColumnItems;
+    private createOriginalContextMenuItems;
+    private createNewContextMenuItems;
     private onMenuItemActivated;
     private toggleOpen;
     private handleOpenChange;

package/dist/types/ui/icons/MergeCellsIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MergeCellsIcon: () => JSX.Element;

package/dist/types/ui/icons/SplitCellIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SplitCellIcon: () => JSX.Element;

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

@@ -2,6 +2,8 @@ export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
+export { MergeCellsIcon } from './MergeCellsIcon';
+export { SplitCellIcon } from './SplitCellIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

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

@@ -329,6 +329,7 @@ export declare const TableCssClassName: {
     CONTEXTUAL_MENU_BUTTON: string;
     CONTEXTUAL_MENU_BUTTON_FIXED: string;
     CONTEXTUAL_MENU_ICON: string;
+    CONTEXTUAL_MENU_ICON_SMALL: string;
     SELECTED_CELL: string;
     NODEVIEW_WRAPPER: string;
     TABLE_SELECTED: string;