@atlaskit/editor-plugin-table 5.6.6 → 5.7.0

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

@@ -1,32 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
-import { B75, DN0, DN60, N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
-export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: ", ";\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px ", ";\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(N20, ")"), borderRadius(), contextualMenuTriggerSize + 2, themed({
-    light: "var(--ds-background-neutral, none)",
-    dark: "var(--ds-background-neutral, none)"
-  })(props), "var(--ds-space-025, 2px)", "var(--ds-surface, ".concat(N0, ")"), themed({
-    light: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
-    dark: "var(--ds-background-neutral-hovered, ".concat(DN60, ")")
-  })(props), themed({
-    light: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))",
-    dark: "var(--ds-background-neutral-pressed, ".concat(B75, ")")
-  })(props), "var(--ds-space-negative-050, -4px)");
+export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: ", ";\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px ", ";\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", contextualMenuTriggerSize + 2, "var(--ds-background-neutral, none)", "var(--ds-space-025, 2px)", "var(--ds-surface, ".concat(N0, ")"), "var(--ds-background-neutral-hovered, ".concat(N30A, ")"), "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))", "var(--ds-space-negative-050, -4px)");
 };
-export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), themed({
-    light: "var(--ds-background-selected, ".concat(N700, ")"),
-    dark: "var(--ds-background-selected, ".concat(DN0, ")")
-  })(props), themed({
-    light: "var(--ds-background-selected-hovered, ".concat(N700, ")"),
-    dark: "var(--ds-background-selected-hovered, ".concat(DN0, ")")
-  })(props), themed({
-    light: "var(--ds-background-selected-pressed, ".concat(N700, ")"),
-    dark: "var(--ds-background-selected-pressed, ".concat(DN0, ")")
-  })(props));
+export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), "var(--ds-background-selected, ".concat(N700, ")"), "var(--ds-background-selected-hovered, ".concat(N700, ")"), "var(--ds-background-selected-pressed, ".concat(N700, ")"));
 };

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

@@ -3,7 +3,6 @@ var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../../types';
 import { contextualMenuDropdownWidth } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
@@ -12,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: ", "px;\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: ", "px;\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, borderRadius(), "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, borderRadius(), "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/TableFloatingControls/NumberColumn/index.js

@@ -103,7 +103,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         className: ClassName.NUMBERED_COLUMN,
         style: {
           marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-          borderLeft: isDragAndDropEnabled && tableActive ? "1px solid ".concat(tableBorderColor()) : undefined
+          borderLeft: isDragAndDropEnabled && tableActive ? "1px solid ".concat(tableBorderColor) : undefined
         },
         contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {