@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

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

@@ -274,8 +274,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         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, 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 = 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.distributeColumns),
@@ -288,10 +291,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       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 _this$props10 = _this.props,
+        formatMessage = _this$props10.intl.formatMessage,
+        editorView = _this$props10.editorView,
+        allowColumnSorting = _this$props10.allowColumnSorting;
       var _getPluginState9 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState9.isDragAndDropEnabled;
       if (allowColumnSorting && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
@@ -357,18 +360,22 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       items[1].items.push(deleteRowItem);
       return items;
     });
-    _defineProperty(_assertThisInitialized(_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;
+    _defineProperty(_assertThisInitialized(_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 = 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':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -387,7 +394,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           _this.toggleOpen();
           break;
         case 'distribute_columns':
-          var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+          var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
           if (newResizeStateWithAnalytics) {
             distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
             _this.toggleOpen();
@@ -398,7 +405,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           _this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           _this.toggleOpen();
           break;
         case 'insert_row':
@@ -421,11 +428,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_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;
       toggleContextualMenu()(state, dispatch);
       if (!isOpen) {
         _this.setState({
@@ -442,13 +449,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         isSubmenuOpen: false
       });
     });
-    _defineProperty(_assertThisInitialized(_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;
+    _defineProperty(_assertThisInitialized(_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({
@@ -466,8 +473,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         hoverMergedCells()(state, dispatch);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function (_ref3) {
-      var item = _ref3.item;
+    _defineProperty(_assertThisInitialized(_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;
@@ -486,9 +493,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_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 = getPluginState(editorView.state),
         targetCellPosition = _getPluginState12.targetCellPosition;
@@ -502,12 +509,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _createClass(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 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState13.isDragAndDropEnabled;
       var items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();

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

@@ -5,7 +5,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
@@ -16,7 +16,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 = getPluginState(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
@@ -42,7 +43,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : 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.
@@ -64,7 +65,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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

@@ -174,7 +174,13 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     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;
@@ -190,7 +196,7 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   var hasMergedCellsInTable = 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 = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired);
+  var dragMenuConfig = 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;
@@ -446,12 +452,17 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     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
   });
 });
 export default injectIntl(DragMenu);

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

@@ -1,25 +1,44 @@
-import React from 'react';
-import { DropList } from '@atlaskit/editor-common/ui';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export var 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 = useState(['bottom', 'left']),
+    _useState2 = _slicedToArray(_useState, 2),
+    popupPlacement = _useState2[0],
+    setPopupPlacement = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    targetRefDiv = _useState4[0],
+    setTargetRefDiv = _useState4[1];
+  var handleRef = function handleRef(ref) {
+    setTargetRefDiv(ref);
+  };
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
         return handleClose('editor');
       },
@@ -34,7 +53,7 @@ export var DropdownMenu = function DropdownMenu(_ref) {
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -63,7 +82,29 @@ export var DropdownMenu = function DropdownMenu(_ref) {
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/React.createElement(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.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/React.createElement(Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: function onPlacementChanged(placement) {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: 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.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     onSelection: function onSelection(index) {
@@ -112,5 +153,5 @@ export var DropdownMenu = function DropdownMenu(_ref) {
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var mountPoint = _ref.mountPoint,
@@ -17,18 +17,20 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     stickyHeaders = _ref.stickyHeaders,
-    pluginConfig = _ref.pluginConfig;
+    pluginConfig = _ref.pluginConfig,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+    _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+    tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -36,7 +38,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight
     // 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.
     // In sticky mode, we want to show the menu above the sticky header
@@ -55,7 +58,13 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    tablePreserveWidth: tablePreserveWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -188,10 +188,14 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         editorAnalyticsAPI = _this$props4.editorAnalyticsAPI,
         getEditorContainerWidth = _this$props4.getEditorContainerWidth;
       if (typeof insertColumnButtonIndex !== 'undefined') {
+        var _this$props$getEditor, _this$props5;
         event.preventDefault();
+        var _ref = ((_this$props$getEditor = (_this$props5 = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props5)) || {},
+          _ref$tablePreserveWid = _ref.tablePreserveWidth,
+          tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
         var state = editorView.state,
           dispatch = editorView.dispatch;
-        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

package/dist/esm/ui/consts.js

@@ -56,6 +56,7 @@ export var stickyRowOffsetTop = 8;
 export var stickyHeaderBorderBottomWidth = 1;
 export var tableOverflowShadowWidth = 8;
 export var tableOverflowShadowWidthWide = 32;
+export var tablePopupMenuFitHeight = 188;
 export var dropTargetsZIndex = 14;
 export var TABLE_SNAP_GAP = 9;
 export var TABLE_HIGHLIGHT_GAP = 10;

package/dist/esm/utils/create.js

@@ -5,7 +5,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 export var createTableWithWidth = function createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) {
   return function (schema) {
-    var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+    var _ref = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {},
       _ref$tablePreserveWid = _ref.tablePreserveWidth,
       tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
     if (tablePreserveWidth && isFullWidthModeEnabled) {

package/dist/esm/utils/drag-menu.js

@@ -63,6 +63,7 @@ var defaultSelectionRect = {
 };
 export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
+  var tablePreserveWidth = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -147,7 +148,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
             moveCursorToInsertedRow: true
           })(state, dispatch);
         } else {
-          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
         }
         return true;
       },
@@ -160,7 +161,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     onClick: function onClick(state, dispatch) {
       var selectionRect = getClosestSelectionRect(state);
       if (selectionRect) {
-        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
         if (newResizeState) {
           distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(state, dispatch);
           return true;
@@ -186,7 +187,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       if (direction === 'row') {
         deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect, !!isHeaderRowRequired)(state, dispatch);
       } else {
-        deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
+        deleteColumnsWithAnalytics(editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/types/commands/column-resize.d.ts

@@ -3,5 +3,5 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
-export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;
+export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, tablePreserveWidth?: boolean) => Command;
 export declare const stopKeyboardColumnResizing: (originalTr?: Transaction) => Command;

package/dist/types/commands/delete.d.ts

@@ -1,3 +1,3 @@
 import type { Command } from '@atlaskit/editor-common/types';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-export declare const deleteColumnsCommand: (rect: Rect) => Command;
+export declare const deleteColumnsCommand: (rect: Rect, tablePreserveWidth?: boolean) => Command;

package/dist/types/commands/insert.d.ts

@@ -2,10 +2,10 @@ import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/a
 import type { Command, EditorCommand, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
-export declare const addColumnBefore: (getEditorContainerWidth: GetEditorContainerWidth) => Command;
+export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth, tablePreserveWidth?: boolean): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
+export declare const addColumnBefore: (getEditorContainerWidth: GetEditorContainerWidth, tablePreserveWidth?: boolean) => Command;
 export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContainerWidth) => Command;
-export declare const insertColumn: (getEditorContainerWidth: GetEditorContainerWidth) => (column: number) => Command;
+export declare const insertColumn: (getEditorContainerWidth: GetEditorContainerWidth, tablePreserveWidth?: boolean) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
 export declare const createTable: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags) => Command;
 export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types/commands-with-analytics.d.ts

@@ -11,9 +11,9 @@ export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalytic
 export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
 export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
-export declare const insertColumnWithAnalytics: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
+export declare const insertColumnWithAnalytics: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, tablePreserveWidth?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
 export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
-export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;
+export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, tablePreserveWidth?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;
 export declare const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const deleteTableWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const deleteTableIfSelectedWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.FLOATING_TB | INPUT_METHOD.KEYBOARD) => Command;

package/dist/types/event-handlers.d.ts

@@ -13,7 +13,7 @@ export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) =>
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseMove: (view: EditorView, event: Event, elementContentRects?: ElementContentRects) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
-export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView) => Transaction;
+export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView, tablePreserveWidth?: boolean) => Transaction;
 export declare const isTableInFocus: (view: EditorView) => boolean;
 export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
 export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types/nodeviews/TableComponent.d.ts

@@ -29,6 +29,7 @@ export interface ComponentProps {
     getEditorFeatureFlags: GetEditorFeatureFlags;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     pluginInjectionApi?: PluginInjectionAPI;
+    tableRef?: HTMLElement | undefined;
 }
 interface TableState {
     scroll: number;
@@ -50,9 +51,11 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private isInitialOverflowSent;
     private initialOverflowCaptureTimerId?;
     private dragAndDropCleanupFn?;
+    private tableColumnWidths?;
     constructor(props: ComponentProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
+    handleColgroupUpdates(): void;
     componentDidUpdate(_: any, prevState: TableState): void;
     private updateShadowState;
     private createShadowSentinels;

package/dist/types/nodeviews/TableContainer.d.ts

@@ -24,8 +24,9 @@ type ResizableTableContainerProps = {
     tableRef: HTMLTableElement;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
+    tablePreserveWidth?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tablePreserveWidth, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -38,6 +39,7 @@ type TableContainerProps = {
     isNested: boolean;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
+    tablePreserveWidth?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, tablePreserveWidth, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types/nodeviews/TableResizer.d.ts

@@ -16,10 +16,11 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
+    tablePreserveWidth?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, tablePreserveWidth, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types/nodeviews/table.d.ts

@@ -14,6 +14,7 @@ export default class TableView extends ReactNodeView<Props> {
     private resizeObserver?;
     eventDispatcher?: EventDispatcher;
     getPos: getPosHandlerNode;
+    getEditorFeatureFlags: GetEditorFeatureFlags;
     constructor(props: Props);
     getContentDOM(): {
         dom: HTMLElement;

package/dist/types/pm-plugins/drag-and-drop/plugin.d.ts

@@ -1,4 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher, editorAnalyticsAPI?: EditorAnalyticsAPI) => SafePlugin<import("./types").DragAndDropPluginState>;
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+export declare const createPlugin: (dispatch: Dispatch, getEditorFeatureFlags?: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI) => SafePlugin<import("./types").DragAndDropPluginState>;

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean): SafePlugin;
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags?: GetEditorFeatureFlags, dragAndDropEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

package/dist/types/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -9,8 +9,8 @@ type Col = Array<string | {
  * overflow.
  */
 export declare const getColWidthFix: (colwidth: number, tableColumnCount: number) => number;
-export declare const generateColgroup: (table: PmNode) => Col[];
-export declare const insertColgroupFromNode: (tableRef: HTMLTableElement, table: PmNode) => HTMLCollection;
+export declare const generateColgroup: (table: PmNode, tableRef?: HTMLElement) => Col[];
+export declare const insertColgroupFromNode: (tableRef: HTMLTableElement, table: PmNode, tablePreserveWidth?: boolean, shouldRemove?: boolean) => HTMLCollection;
 export declare const hasTableBeenResized: (table: PmNode) => boolean;
 /**
  * Check if a table has all the column width set to tableCellMinWidth(48px) or null

package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts

@@ -1,2 +1,4 @@
 export declare const COLUMN_MIN_WIDTH = 48;
+export declare const TABLE_DEFAULT_WIDTH = 760;
 export declare const TABLE_MAX_WIDTH = 1800;
+export declare const MAX_SCALING_PERCENT = 0.3;