@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js

@@ -23,6 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
 var scale = exports.scale = function scale(tableRef, options, domAtPos) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   /**
    * isBreakoutEnabled === true -> default center aligned
    * isBreakoutEnabled === false -> full width mode
@@ -67,18 +68,21 @@ var scale = exports.scale = function scale(tableRef, options, domAtPos) {
     table: node,
     tableRef: tableRef,
     start: start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   return scaleTableTo(resizeState, newWidth);
 };
 var scaleWithParent = exports.scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var resizeState = (0, _resizeState.getResizeState)({
     minWidth: _styles.tableCellMinWidth,
     maxSize: parentWidth,
     table: table,
     tableRef: tableRef,
     start: start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;
@@ -110,6 +114,7 @@ function scaleTableTo(state, maxSize) {
   return (0, _resizeState.adjustColumnsWidths)(newState, maxSize);
 }
 var previewScaleTable = exports.previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var node = options.node,
     start = options.start,
     parentWidth = options.parentWidth;
@@ -121,18 +126,22 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
     var width = isNumberColumnEnabled ? parentWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : parentWidth;
     tableRef.style.width = "".concat(width, "px");
   }
-  if (!(0, _colgroup.hasTableBeenResized)(node)) {
+
+  // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
+  // If we are scaling the table down with tablePreserveWidth, the colgroup widths may be scaled to a value that is not 48px.
+  if (!(0, _colgroup.hasTableBeenResized)(node) && !tablePreserveWidth) {
     (0, _dom.syncStickyRowToTable)(tableRef);
     return;
   }
-  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);
+  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, tablePreserveWidth) : scale(tableRef, options, domAtPos, tablePreserveWidth);
   if (resizeState) {
-    (0, _resizeState.updateColgroup)(resizeState, tableRef);
+    (0, _resizeState.updateColgroup)(resizeState, tableRef, tablePreserveWidth);
   }
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
 var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, domAtPos) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (tr) {
     if (!tableRef) {
       return tr;
@@ -145,15 +154,17 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
     if ((0, _colgroup.hasTableBeenResized)(node) === false) {
       // If its not a re-sized table, we still want to re-create cols
       // To force reflow of columns upon delete.
-      (0, _colgroup.insertColgroupFromNode)(tableRef, node);
+      if (!tablePreserveWidth) {
+        (0, _colgroup.insertColgroupFromNode)(tableRef, node);
+      }
       tr.setMeta('scrollIntoView', false);
       return tr;
     }
     var resizeState;
     if (parentWidth) {
-      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
+      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, tablePreserveWidth);
     } else {
-      resizeState = scale(tableRef, options, domAtPos);
+      resizeState = scale(tableRef, options, domAtPos, tablePreserveWidth);
     }
     if (resizeState) {
       tr = (0, _transforms.updateColumnWidths)(resizeState, node, start)(tr);

package/dist/cjs/toolbar.js

@@ -96,6 +96,7 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
 var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, editorView, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   var formatMessage = _ref2.formatMessage;
+  var tablePreserveWidth = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var top = initialSelectionRect.top,
     bottom = initialSelectionRect.bottom,
     right = initialSelectionRect.right,
@@ -110,7 +111,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
       var selectionRect = getClosestSelectionRect(state);
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
       if (index) {
-        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
       return true;
     },
@@ -189,7 +190,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
   }];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
-    var newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : undefined;
+    var newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth) : undefined;
     var wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     var distributeColumnWidths = function distributeColumnWidths(state, dispatch) {
       if (newResizeStateWithAnalytics) {
@@ -309,10 +310,13 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+          tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
         var cellItems;
-        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI) : [];
+        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -351,8 +355,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           }
           return element;
         };
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
+        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+          stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
         return {
           title: 'Table floating controls',
           getDomRef: getDomRef,
@@ -411,22 +415,24 @@ var separator = function separator(hidden) {
 };
 var getCellItems = function getCellItems(pluginConfig, state, view, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
   var formatMessage = _ref3.formatMessage;
+  var tablePreserveWidth = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage: formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI);
+    }, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
 };
 var getDistributeConfig = exports.getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, editorView) {
     var selectionOrTableRect = getClosestSelectionOrTableRect(state);
     if (!editorView || !selectionOrTableRect) {
       return false;
     }
-    var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+    var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
     if (newResizeStateWithAnalytics) {
       (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
       return true;
@@ -440,12 +446,13 @@ var getDistributeConfig = exports.getDistributeConfig = function getDistributeCo
 var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   var formatMessage = _ref4.formatMessage;
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var pluginState = (0, _pluginFactory.getPluginState)(editorState);
   var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
   var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     return [{
@@ -454,7 +461,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
       title: formatMessage(_messages.tableMessages.distributeColumns),
       icon: _layoutThreeEqual.default,
       onClick: function onClick(state, dispatch, view) {
-        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view);
+        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(state, dispatch, view);
       },
       disabled: !wouldChange
     }, {

package/dist/cjs/transforms/column-width.js

@@ -94,9 +94,9 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
  * @returns Updated transaction with rescaled columns for a given table
  */
 var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
+  var tablePreserveWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return function (table, view) {
     return function (tr) {
-      var _tableRef$parentEleme, _tableRef$parentEleme2;
       if (!view) {
         return tr;
       }
@@ -108,14 +108,28 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
         return tr;
       }
       var isResized = (0, _utils.hasTableBeenResized)(table.node);
-      // get current table info
       var previousTableInfo = {
-        // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
-        width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
-        /** the is the width the table can reach before overflowing */
-        possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - _commonStyles.insertColumnButtonOffset,
+        width: 0,
+        possibleMaxWidth: 0,
         isResized: isResized
       };
+      if (tablePreserveWidth) {
+        previousTableInfo = {
+          // TODO - ensure correct width is returned when table doesn't have a width value
+          width: (0, _utils.getTableElementWidth)(table.node),
+          possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _utils.getTableContainerElement)(table.node) : (0, _utils.getTableContainerElement)(table.node) - _commonStyles.insertColumnButtonOffset,
+          isResized: isResized
+        };
+      } else {
+        var _tableRef$parentEleme, _tableRef$parentEleme2;
+        previousTableInfo = {
+          // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
+          width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
+          /** the is the width the table can reach before overflowing */
+          possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - _commonStyles.insertColumnButtonOffset,
+          isResized: isResized
+        };
+      }
 
       // determine the new table, based on new width
       var newTableInfo = {
@@ -160,7 +174,8 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
         start: table.start,
         tableRef: tableRef,
         domAtPos: domAtPos,
-        maxSize: previousTableInfo.possibleMaxWidth
+        maxSize: previousTableInfo.possibleMaxWidth,
+        tablePreserveWidth: tablePreserveWidth
       });
 
       // Two scenarios that require scaling:

package/dist/cjs/transforms/delete-columns.js

@@ -212,6 +212,7 @@ function fixRowSpans(table) {
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
 var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (tr) {
     var updatedTr = tr;
     updatedTr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
@@ -224,7 +225,7 @@ var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCu
     }
     var table = (0, _utils.findTable)(updatedTr.selection);
     if (table) {
-      updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
+      updatedTr = (0, _columnWidth.rescaleColumns)(tablePreserveWidth)(table, view)(updatedTr);
     }
     return updatedTr;
   };

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

@@ -279,8 +279,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         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, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        var _this$props$getEditor, _this$props9, _newResizeState$chang;
+        var _ref = ((_this$props$getEditor = (_this$props9 = _this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props9)) || {},
+          _ref$tablePreserveWid = _ref.tablePreserveWidth,
+          tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
+        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
         var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
         return {
           content: formatMessage(_messages.tableMessages.distributeColumns),
@@ -293,10 +296,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       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 _this$props10 = _this.props,
+        formatMessage = _this$props10.intl.formatMessage,
+        editorView = _this$props10.editorView,
+        allowColumnSorting = _this$props10.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'))) {
@@ -362,18 +365,22 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       items[1].items.push(deleteRowItem);
       return items;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref) {
-      var item = _ref.item;
-      var _this$props10 = _this.props,
-        editorView = _this$props10.editorView,
-        selectionRect = _this$props10.selectionRect,
-        editorAnalyticsAPI = _this$props10.editorAnalyticsAPI,
-        getEditorContainerWidth = _this$props10.getEditorContainerWidth;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref2) {
+      var item = _ref2.item;
+      var _this$props11 = _this.props,
+        editorView = _this$props11.editorView,
+        selectionRect = _this$props11.selectionRect,
+        editorAnalyticsAPI = _this$props11.editorAnalyticsAPI,
+        getEditorContainerWidth = _this$props11.getEditorContainerWidth,
+        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var state = editorView.state,
         dispatch = editorView.dispatch;
       var _getPluginState10 = (0, _pluginFactory.getPluginState)(state),
         targetCellPosition = _getPluginState10.targetCellPosition;
+      var _ref3 = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {},
+        _ref3$tablePreserveWi = _ref3.tablePreserveWidth,
+        tablePreserveWidth = _ref3$tablePreserveWi === void 0 ? false : _ref3$tablePreserveWi;
       switch (item.value.name) {
         case 'sort_column_desc':
           (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.left, _customSteps.TableSortOrder.DESC)(state, dispatch);
@@ -392,7 +399,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'distribute_columns':
-          var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+          var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
           if (newResizeStateWithAnalytics) {
             (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
             _this.toggleOpen();
@@ -403,7 +410,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'insert_column':
-          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           _this.toggleOpen();
           break;
         case 'insert_row':
@@ -426,11 +433,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
-      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;
+      var _this$props12 = _this.props,
+        isOpen = _this$props12.isOpen,
+        _this$props12$editorV = _this$props12.editorView,
+        state = _this$props12$editorV.state,
+        dispatch = _this$props12$editorV.dispatch;
       (0, _commands.toggleContextualMenu)()(state, dispatch);
       if (!isOpen) {
         _this.setState({
@@ -447,13 +454,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         isSubmenuOpen: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref2) {
-      var item = _ref2.item;
-      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;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref4) {
+      var item = _ref4.item;
+      var _this$props13 = _this.props,
+        _this$props13$editorV = _this$props13.editorView,
+        state = _this$props13$editorV.state,
+        dispatch = _this$props13$editorV.dispatch,
+        selectionRect = _this$props13.selectionRect;
       if (item.value.name === 'background') {
         if (!_this.state.isSubmenuOpen) {
           _this.setState({
@@ -471,8 +478,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         (0, _commands.hoverMergedCells)()(state, dispatch);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref3) {
-      var item = _ref3.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref5) {
+      var item = _ref5.item;
       var _this$props$editorVie2 = _this.props.editorView,
         state = _this$props$editorVie2.state,
         dispatch = _this$props$editorVie2.dispatch;
@@ -491,9 +498,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setColor", function (color) {
-      var _this$props13 = _this.props,
-        editorView = _this$props13.editorView,
-        editorAnalyticsAPI = _this$props13.editorAnalyticsAPI;
+      var _this$props14 = _this.props,
+        editorView = _this$props14.editorView,
+        editorAnalyticsAPI = _this$props14.editorAnalyticsAPI;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var _getPluginState12 = (0, _pluginFactory.getPluginState)(editorView.state),
         targetCellPosition = _getPluginState12.targetCellPosition;
@@ -507,12 +514,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
   (0, _createClass2.default)(ContextualMenu, [{
     key: "render",
     value: function render() {
-      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 _this$props15 = this.props,
+        isOpen = _this$props15.isOpen,
+        mountPoint = _this$props15.mountPoint,
+        offset = _this$props15.offset,
+        boundariesElement = _this$props15.boundariesElement,
+        editorView = _this$props15.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();

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

@@ -24,7 +24,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     isOpen = _ref.isOpen,
     pluginConfig = _ref.pluginConfig,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    getEditorContainerWidth = _ref.getEditorContainerWidth;
+    getEditorContainerWidth = _ref.getEditorContainerWidth,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
@@ -50,7 +51,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: _consts.tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
@@ -72,7 +73,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -185,7 +185,13 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     pluginConfig = _ref.pluginConfig,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    fitHeight = _ref.fitHeight,
+    fitWidth = _ref.fitWidth,
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    boundariesElement = _ref.boundariesElement,
+    tablePreserveWidth = _ref.tablePreserveWidth;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -201,7 +207,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, tablePreserveWidth);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
@@ -457,12 +463,17 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);

package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js

@@ -1,32 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DropdownMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.DropList);
 var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
-  var target = _ref.target,
-    items = _ref.items,
+  var items = _ref.items,
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
     handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    fitWidth = _ref.fitWidth,
+    fitHeight = _ref.fitHeight,
+    direction = _ref.direction,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var _useState = (0, _react.useState)(['bottom', 'left']),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    popupPlacement = _useState2[0],
+    setPopupPlacement = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    targetRefDiv = _useState4[0],
+    setTargetRefDiv = _useState4[1];
+  var handleRef = function handleRef(ref) {
+    setTargetRefDiv(ref);
+  };
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/_react.default.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
         return handleClose('editor');
       },
@@ -41,7 +64,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         height: 0,
@@ -70,7 +93,29 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: function onPlacementChanged(placement) {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+    offset: [offsetX, offsetY],
+    allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: _uiMenu.ArrowKeyNavigationType.MENU,
     onSelection: function onSelection(index) {
@@ -119,5 +164,5 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };