@atlaskit/editor-plugin-table 5.6.7 → 5.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.7.0
+
+### Minor Changes
+
+- [#62416](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62416) [`9f3c36680d89`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f3c36680d89) - [ux] Updated table context menu styling.
+
 ## 5.6.7
 
 ### Patch Changes

package/dist/cjs/types.js

@@ -130,6 +130,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   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',
   // defined in ReactNodeView based on PM node name

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ContextualMenu = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -26,6 +27,10 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
+var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
@@ -34,11 +39,12 @@ var _transforms = require("../../transforms");
 var _types = require("../../types");
 var _utils3 = require("../../utils");
 var _consts = require("../consts");
+var _icons = require("../icons");
 var _styles2 = require("./styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } } /** @jsx jsx */
+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 */
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -63,36 +69,35 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         ref.style.left = "-".concat(rect.width, "px");
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createItems", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _pluginFactory.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 = (0, _editorPalette.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.tableMessages.cellBackground),
+        return {
+          content: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
           value: {
             name: 'background'
           },
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_backgroundColor.default, {
+            label: formatMessage(_messages.tableMessages.backgroundColor),
+            size: "medium"
+          }) : undefined,
           elemAfter: (0, _react2.jsx)("div", {
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (0, _react2.jsx)("div", {
             css: (0, _styles2.cellColourPreviewStyles)(background),
-            className: _types.TableCssClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && (0, _react2.jsx)("div", {
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -106,122 +111,253 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
               hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
             }
           })))
-        });
+        };
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _pluginFactory.getPluginState)(editorView.state),
+        isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
+      if (allowMergeCells) {
+        return [{
+          content: formatMessage(_messages.tableMessages.mergeCells),
+          value: {
+            name: 'merge'
+          },
+          isDisabled: !(0, _transforms.canMergeCells)(state.tr),
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.MergeCellsIcon, null) : undefined
+        }, {
+          content: formatMessage(_messages.tableMessages.splitCell),
+          value: {
+            name: 'split'
+          },
+          isDisabled: !(0, _utils2.splitCell)(state),
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.SplitCellIcon, null) : undefined
+        }];
       }
-      items.push({
-        content: formatMessage(_messages.tableMessages.insertColumn),
+      return [];
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.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;
+      return {
+        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumn : _messages.tableMessages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
-        }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
-      });
-      items.push({
-        content: formatMessage(_messages.tableMessages.insertRow),
+        }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.AddColRightIcon, null) : undefined
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.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;
+      return {
+        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRow : _messages.tableMessages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
-        }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
-      });
+        }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.AddRowBelowIcon, null) : undefined
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.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 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.tableMessages.clearCells, {
+          0: Math.max(noOfColumns, noOfRows)
+        }),
+        value: {
+          name: 'clear'
+        },
+        elemAfter: (0, _react2.jsx)("div", {
+          css: _shortcut.shortcutStyle
+        }, (0, _keymaps.tooltip)(_keymaps.backspace)),
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_crossCircle.default, {
+          label: formatMessage(_messages.tableMessages.clearCells, {
+            0: Math.max(noOfColumns, noOfRows)
+          })
+        }) : undefined
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.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 right = selectionRect.right,
+        left = selectionRect.left;
+      var noOfColumns = right - left;
+      return {
         content: formatMessage(_messages.tableMessages.removeColumns, {
           0: noOfColumns
         }),
         value: {
           name: 'delete_column'
-        }
-      });
-      items.push({
+        },
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_remove.default, {
+          label: formatMessage(_messages.tableMessages.removeColumns, {
+            0: noOfColumns
+          })
+        }) : undefined
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.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 bottom = selectionRect.bottom,
+        top = selectionRect.top;
+      var noOfRows = bottom - top;
+      return {
         content: formatMessage(_messages.tableMessages.removeRows, {
           0: noOfRows
         }),
         value: {
           name: 'delete_row'
-        }
-      });
-      if (allowMergeCells) {
-        items.push({
-          content: formatMessage(_messages.tableMessages.mergeCells),
-          value: {
-            name: 'merge'
-          },
-          isDisabled: !(0, _transforms.canMergeCells)(state.tr)
-        });
-        items.push({
-          content: formatMessage(_messages.tableMessages.splitCell),
-          value: {
-            name: 'split'
-          },
-          isDisabled: !(0, _utils2.splitCell)(state)
-        });
-      }
-      if (allowDistributeColumns) {
+        },
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_remove.default, {
+          label: formatMessage(_messages.tableMessages.removeRows, {
+            0: noOfRows
+          })
+        }) : undefined
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _pluginFactory.getPluginState)(editorView.state),
+        isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
+        allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
+      if (allowDistributeColumns && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
         var _newResizeState$chang;
-        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), _this.props.getEditorContainerWidth);
+        var newResizeState = (0, _resizeState.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.tableMessages.distributeColumns),
           value: {
             name: 'distribute_columns'
           },
           isDisabled: !wouldChange
-        });
+        };
       }
-      if (allowColumnSorting) {
-        var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
+      return null;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createSortColumnItems", function () {
+      var _this$props9 = _this.props,
+        formatMessage = _this$props9.intl.formatMessage,
+        editorView = _this$props9.editorView,
+        allowColumnSorting = _this$props9.allowColumnSorting;
+      var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
+        isDragAndDropEnabled = _getPluginState9.isDragAndDropEnabled;
+      if (allowColumnSorting && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
+        var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(editorView.state.tr).length > 0;
         var warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(_messages.tableMessages.canNotSortTable),
           isDisabled: true
         } : {};
-        items.push(_objectSpread({
+        return [_objectSpread({
           content: formatMessage(_messages.tableMessages.sortColumnASC),
           value: {
             name: 'sort_column_asc'
           }
-        }, warning));
-        items.push(_objectSpread({
+        }, warning), _objectSpread({
           content: formatMessage(_messages.tableMessages.sortColumnDESC),
           value: {
             name: 'sort_column_desc'
           }
-        }, warning));
+        }, warning)];
       }
-      items.push({
-        content: formatMessage(_messages.tableMessages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
-        value: {
-          name: 'clear'
-        },
-        elemAfter: (0, _react2.jsx)("div", {
-          css: _shortcut.shortcutStyle
-        }, (0, _keymaps.tooltip)(_keymaps.backspace))
-      });
-      return items.length ? [{
+      return null;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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, (0, _toConsumableArray2.default)(_this.createMergeSplitCellItems()));
+      var distributeColumnsItem = _this.createDistributeColumnsItem();
+      distributeColumnsItem && items.push(distributeColumnsItem);
+      var sortColumnItems = _this.createSortColumnItems();
+      sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
+      items.push(_this.createClearCellsItem());
+      return [{
         items: items
-      }] : null;
+      }];
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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, (0, _toConsumableArray2.default)(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;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _pluginFactory.getPluginState)(state),
-        targetCellPosition = _getPluginState2.targetCellPosition;
+      var _getPluginState10 = (0, _pluginFactory.getPluginState)(state),
+        targetCellPosition = _getPluginState10.targetCellPosition;
       switch (item.value.name) {
         case 'sort_column_desc':
           (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.left, _customSteps.TableSortOrder.DESC)(state, dispatch);
@@ -266,19 +402,19 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'delete_row':
-          var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-            isHeaderRowRequired = _getPluginState3.pluginConfig.isHeaderRowRequired;
+          var _getPluginState11 = (0, _pluginFactory.getPluginState)(state),
+            isHeaderRowRequired = _getPluginState11.pluginConfig.isHeaderRowRequired;
           (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
           _this.toggleOpen();
           break;
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
       (0, _commands.toggleContextualMenu)()(state, dispatch);
       if (!isOpen) {
         _this.setState({
@@ -297,11 +433,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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({
@@ -339,12 +475,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _pluginFactory.getPluginState)(editorView.state),
-        targetCellPosition = _getPluginState4.targetCellPosition;
+      var _getPluginState12 = (0, _pluginFactory.getPluginState)(editorView.state),
+        targetCellPosition = _getPluginState12.targetCellPosition;
       var state = editorView.state,
         dispatch = editorView.dispatch;
       (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
@@ -355,15 +491,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
   (0, _createClass2.default)(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 = (0, _pluginFactory.getPluginState)(editorView.state),
+        isDragAndDropEnabled = _getPluginState13.isDragAndDropEnabled;
+      var items = isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
@@ -385,7 +521,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         fitHeight: 188,
         fitWidth: _consts.contextualMenuDropdownWidth,
         boundariesElement: boundariesElement,
-        offset: offset
+        offset: offset,
+        section: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.menu.group-items') ? {
+          hasSeparator: true
+        } : undefined
       }));
     }
   }]);

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

@@ -18,4 +18,4 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
 
 // 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`
-var tablePopupStyles = exports.tablePopupStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var tablePopupStyles = exports.tablePopupStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MergeCellsIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var MergeCellsIcon = exports.MergeCellsIcon = function MergeCellsIcon() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.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.default.createElement("path", {
+    d: "M15.75 10L13.75 12L15.75 14",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8.25 14L10.25 12L8.25 10",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitCellIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var SplitCellIcon = exports.SplitCellIcon = function SplitCellIcon() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19 18L14 18L14 6L19 6",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M5 6L10 6L9.99999 18L5 18",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 10L5 12L7 14",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M17 14L19 12L17 10",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

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

@@ -45,16 +45,30 @@ Object.defineProperty(exports, "DragInMotionIcon", {
     return _DragInMotionIcon.DragInMotionIcon;
   }
 });
+Object.defineProperty(exports, "MergeCellsIcon", {
+  enumerable: true,
+  get: function get() {
+    return _MergeCellsIcon.MergeCellsIcon;
+  }
+});
 Object.defineProperty(exports, "MinimisedHandleIcon", {
   enumerable: true,
   get: function get() {
     return _MinimisedHandle.MinimisedHandleIcon;
   }
 });
+Object.defineProperty(exports, "SplitCellIcon", {
+  enumerable: true,
+  get: function get() {
+    return _SplitCellIcon.SplitCellIcon;
+  }
+});
 var _DragHandleIcon = require("./DragHandleIcon");
 var _DragInMotionIcon = require("./DragInMotionIcon");
 var _DragHandleDisabledIcon = require("./DragHandleDisabledIcon");
 var _MinimisedHandle = require("./MinimisedHandle");
+var _MergeCellsIcon = require("./MergeCellsIcon");
+var _SplitCellIcon = require("./SplitCellIcon");
 var _AddRowAboveIcon = require("./AddRowAboveIcon");
 var _AddRowBelowIcon = require("./AddRowBelowIcon");
 var _AddColLeftIcon = require("./AddColLeftIcon");

package/dist/es2019/types.js

@@ -122,6 +122,7 @@ export const TableCssClassName = {
   CONTEXTUAL_MENU_BUTTON: `${tablePrefixSelector}-contextual-menu-button`,
   CONTEXTUAL_MENU_BUTTON_FIXED: `${tablePrefixSelector}-contextual-menu-button-fixed`,
   CONTEXTUAL_MENU_ICON: `${tablePrefixSelector}-contextual-submenu-icon`,
+  CONTEXTUAL_MENU_ICON_SMALL: `${tablePrefixSelector}-contextual-submenu-icon-small`,
   // come from prosemirror-table
   SELECTED_CELL: 'selectedCell',
   // defined in ReactNodeView based on PM node name