@atlaskit/editor-plugin-table 22.1.3 → 22.2.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-table
 
+## 22.2.0
+
+### Minor Changes
+
+- [`e5cdd96dcf4f9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e5cdd96dcf4f9) -
+  Clean up platform_editor_hydratable_ui experiment (shipped as enabled)
+
+### Patch Changes
+
+- [`d2c265eaaf495`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2c265eaaf495) -
+  Remove isDragAndDropEnabled dead code from pm-plugins - always true (EDITOR-6290)
+- Updated dependencies
+
+## 22.1.4
+
+### Patch Changes
+
+- [`af869bf30a1e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af869bf30a1e1) -
+  Fix table-layout: auto inline style persisting after fit-to-content measurement
+
 ## 22.1.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -140,18 +140,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var prevNode = _this.node;
       var node = getNode();
       var prevAttrs = prevNode.attrs;
-      var isNested = (0, _nodes.isTableNested)(_this.props.view.state, _this.props.getPos());
       var tablePos = _this.props.getPos();
+      var isNested = (0, _nodes.isTableNested)(_this.props.view.state, tablePos);
       var parentWidth = _this.getParentNodeWidth();
       var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9');
       if (useMeasuredWidthForBodiedSyncBlock) {
         // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
         // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
         // at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
-        // is not yet available. Both are guarded by `> 1` to ignore degenerate values
-        // that can appear before the element has been laid out.
+        // is not yet available.
+        // The clientWidth > 0 since DOM clientWidth is 0 before layout
+        // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
         var measuredWrapperWidth;
-        if (_this.wrapper && _this.wrapper.clientWidth > 1) {
+        if (_this.wrapper && _this.wrapper.clientWidth > 0) {
           measuredWrapperWidth = _this.wrapper.clientWidth;
         } else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
           measuredWrapperWidth = _this.wrapperWidth;
@@ -162,7 +163,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           parentWidth = measuredWrapperWidth;
         }
       }
-      if (!useMeasuredWidthForBodiedSyncBlock && isNested && (0, _nodes.isTableNestedInMoreThanOneNode)(_this.props.view.state, _this.props.getPos())) {
+      if (!useMeasuredWidthForBodiedSyncBlock && isNested && (0, _nodes.isTableNestedInMoreThanOneNode)(_this.props.view.state, tablePos)) {
         var resizeObsWrapperWidth = _this.wrapperWidth || 0;
         var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
         var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;

package/dist/cjs/nodeviews/table-node-views.js

@@ -32,8 +32,7 @@ var tableHeaderView = exports.tableHeaderView = function tableHeaderView(options
 };
 var tableRowView = exports.tableRowView = function tableRowView(options) {
   return function (node, view, getPos) {
-    var _options$isDragAndDro;
-    if ((0, _stickyHeader.isNativeStickySupported)((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    if ((0, _stickyHeader.isNativeStickySupported)() && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new _TableRowNativeStickyWithFallback.default(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new _TableRow.default(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/cjs/pm-plugins/commands/column-resize.js

@@ -33,8 +33,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     var customTr = state.tr;
     var _getPluginState = (0, _pluginFactory.getPluginState)(state),
       allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState.getIntl,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+      getIntl = _getPluginState.getIntl;
     var fakeDispatch = function fakeDispatch(tr) {
       customTr = tr;
     };
@@ -47,7 +46,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     });
     var decorationsWithWidgetAndHandle = (0, _decoration.updateDecorations)(customTr.doc, decorationsWithWidget, (0, _decoration.createColumnLineResize)(state.selection, {
       right: columnIndex
-    }, isDragAndDropEnabled), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+    }), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
     getTablePluginCommand({
       type: 'START_KEYBOARD_COLUMN_RESIZE',
       data: {

package/dist/cjs/pm-plugins/commands/hover.js

@@ -49,12 +49,10 @@ var hoverMergedCells = exports.hoverMergedCells = function hoverMergedCells() {
 var hoverColumns = exports.hoverColumns = function hoverColumns(hoveredColumns, isInDanger) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var cells = (0, _utils.getCellsInColumn)(hoveredColumns)(state.tr.selection);
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     if (!cells) {
       return false;
     }
-    var decorations = (0, _decoration.createControlsHoverDecoration)(cells, 'column', state.tr, isDragAndDropEnabled, hoveredColumns, isInDanger);
+    var decorations = (0, _decoration.createControlsHoverDecoration)(cells, 'column', state.tr, hoveredColumns, isInDanger);
     return {
       type: 'HOVER_COLUMNS',
       data: {
@@ -73,9 +71,7 @@ var hoverRows = exports.hoverRows = function hoverRows(hoveredRows, isInDanger)
     if (!cells) {
       return false;
     }
-    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-      isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
-    var decorations = (0, _decoration.createControlsHoverDecoration)(cells, 'row', state.tr, isDragAndDropEnabled, hoveredRows, isInDanger);
+    var decorations = (0, _decoration.createControlsHoverDecoration)(cells, 'row', state.tr, hoveredRows, isInDanger);
     return {
       type: 'HOVER_ROWS',
       data: {
@@ -101,9 +97,7 @@ var hoverTable = exports.hoverTable = function hoverTable(isInDanger, isSelected
     if (!cells) {
       return false;
     }
-    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
-    var decorations = (0, _decoration.createControlsHoverDecoration)(cells, 'table', state.tr, isDragAndDropEnabled, [], isInDanger, isSelected);
+    var decorations = (0, _decoration.createControlsHoverDecoration)(cells, 'table', state.tr, [], isInDanger, isSelected);
     return {
       type: 'HOVER_TABLE',
       data: {
@@ -132,12 +126,10 @@ var clearHoverSelection = exports.clearHoverSelection = function clearHoverSelec
 };
 var showResizeHandleLine = exports.showResizeHandleLine = function showResizeHandleLine(cellColumnPositioning) {
   return (0, _pluginFactory.createCommand)(function (state) {
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
-      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
     return {
       type: 'SHOW_RESIZE_HANDLE_LINE',
       data: {
-        decorationSet: (0, _updatePluginStateDecorations.updatePluginStateDecorations)(state, (0, _decoration.createColumnLineResize)(state.selection, cellColumnPositioning, isDragAndDropEnabled), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
+        decorationSet: (0, _updatePluginStateDecorations.updatePluginStateDecorations)(state, (0, _decoration.createColumnLineResize)(state.selection, cellColumnPositioning), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
       }
     };
   });
@@ -166,8 +158,8 @@ var setTableHovered = exports.setTableHovered = function setTableHovered(hovered
 };
 var hoverCell = exports.hoverCell = function hoverCell(rowIndex, colIndex) {
   return (0, _pluginFactory.createCommand)(function (state) {
-    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
-      prevHoveredCell = _getPluginState5.hoveredCell;
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      prevHoveredCell = _getPluginState.hoveredCell;
 
     // If no arguments have been passed then the intention it to reset the hover cell data
     var clear = rowIndex === undefined && colIndex === undefined;

package/dist/cjs/pm-plugins/commands/misc.js

@@ -41,8 +41,6 @@ var setTableRef = exports.setTableRef = function setTableRef(ref) {
     var tableNode = ref && foundTable ? foundTable.node : undefined;
     var tablePos = ref && foundTable ? foundTable.pos : undefined;
     var tableWrapperTarget = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     return {
       type: 'SET_TABLE_REF',
       data: {
@@ -53,8 +51,6 @@ var setTableRef = exports.setTableRef = function setTableRef(ref) {
         isNumberColumnEnabled: (0, _nodes.checkIfNumberColumnEnabled)(state.selection),
         isHeaderRowEnabled: (0, _nodes.checkIfHeaderRowEnabled)(state.selection),
         isHeaderColumnEnabled: (0, _nodes.checkIfHeaderColumnEnabled)(state.selection),
-        // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
-        decorationSet: !isDragAndDropEnabled ? (0, _updatePluginStateDecorations.updatePluginStateDecorations)(state, (0, _decoration.createColumnControlsDecoration)(state.selection), _types.TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
         resizeHandleRowIndex: undefined,
         resizeHandleColumnIndex: undefined
       }
@@ -339,8 +335,8 @@ var setMultipleCellAttrs = exports.setMultipleCellAttrs = function setMultipleCe
   return function (state, dispatch) {
     var cursorPos;
     var tr = state.tr;
-    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-      targetCellPosition = _getPluginState2.targetCellPosition;
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      targetCellPosition = _getPluginState.targetCellPosition;
     if ((0, _utils2.isSelectionType)(tr.selection, 'cell')) {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -501,9 +497,9 @@ var hideInsertColumnOrRowButton = exports.hideInsertColumnOrRowButton = function
 var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, nodeViewPortalProviderAPI, isKeyboardResize) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
-    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-      allowColumnResizing = _getPluginState3.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState3.getIntl;
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState2.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
@@ -527,12 +523,12 @@ var addResizeHandleDecorations = exports.addResizeHandleDecorations = function a
 var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = function updateResizeHandleDecorations(nodeViewPortalProviderAPI, rowIndex, columnIndex, includeTooltip) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
-      resizeHandleRowIndex = _getPluginState4.resizeHandleRowIndex,
-      resizeHandleColumnIndex = _getPluginState4.resizeHandleColumnIndex,
-      resizeHandleIncludeTooltip = _getPluginState4.resizeHandleIncludeTooltip,
-      allowColumnResizing = _getPluginState4.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState4.getIntl;
+    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+      resizeHandleRowIndex = _getPluginState3.resizeHandleRowIndex,
+      resizeHandleColumnIndex = _getPluginState3.resizeHandleColumnIndex,
+      resizeHandleIncludeTooltip = _getPluginState3.resizeHandleIncludeTooltip,
+      allowColumnResizing = _getPluginState3.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState3.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
@@ -606,8 +602,8 @@ var addBoldInEmptyHeaderCells = exports.addBoldInEmptyHeaderCells = function add
 };
 var updateWidthToWidest = exports.updateWidthToWidest = function updateWidthToWidest(widthToWidest) {
   return (0, _pluginFactory.createCommand)(function (state) {
-    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
-      prevWidthToWidest = _getPluginState5.widthToWidest;
+    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+      prevWidthToWidest = _getPluginState4.widthToWidest;
     if ((0, _isEqual.default)(widthToWidest, prevWidthToWidest)) {
       return false;
     }

package/dist/cjs/pm-plugins/decorations/plugin.js

@@ -22,8 +22,6 @@ var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function
   var isResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   var wasResizing = (_tableWidthPluginKey$2 = _tableWidth.pluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   var _ref = _pluginKey.pluginKey.getState(newState) || {},
-    _ref$isDragAndDropEna = _ref.isDragAndDropEnabled,
-    isDragAndDropEnabled = _ref$isDragAndDropEna === void 0 ? false : _ref$isDragAndDropEna,
     isInDanger = _ref.isInDanger,
     isTableHovered = _ref.isTableHovered;
   var changedResizing = isResizing !== wasResizing;
@@ -34,10 +32,7 @@ var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function
   } else if (tr.docChanged || tr.selection instanceof _cellSelection.CellSelection || changedResizing) {
     return (0, _columnControls.buildColumnControlsDecorations)({
       decorationSet: decorationSet,
-      tr: tr,
-      options: {
-        isDragAndDropEnabled: isDragAndDropEnabled
-      }
+      tr: tr
     });
   } else if (tr.selectionSet) {
     var _findTable, _findTable2;
@@ -52,10 +47,7 @@ var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function
     if ((isInDanger || isTableHovered) && (!(0, _coreUtils.insideTable)(newState) || ((_findTable = (0, _utils.findTable)(newState.selection)) === null || _findTable === void 0 ? void 0 : _findTable.node) !== ((_findTable2 = (0, _utils.findTable)(oldState.selection)) === null || _findTable2 === void 0 ? void 0 : _findTable2.node))) {
       return (0, _columnControls.buildColumnControlsDecorations)({
         decorationSet: decorationSet,
-        tr: tr,
-        options: {
-          isDragAndDropEnabled: isDragAndDropEnabled
-        }
+        tr: tr
       });
     }
   }

package/dist/cjs/pm-plugins/decorations/utils/column-controls.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.maybeUpdateColumnControlsSelectedDecoration = exports.buildColumnControlsDecorations = void 0;
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
-var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../../types");
 var _decoration = require("../../utils/decoration");
 var _composeDecorations = require("./compose-decorations");
@@ -28,27 +27,18 @@ var maybeUpdateColumnSelectedDecoration = function maybeUpdateColumnSelectedDeco
   }
   return (0, _decoration.updateDecorations)(tr.doc, decorationSet, (0, _decoration.createColumnSelectedDecoration)(tr), _types.TableDecorations.COLUMN_SELECTED);
 };
-var maybeUpdateColumnControlsDecoration = function maybeUpdateColumnControlsDecoration(_ref3) {
-  var decorationSet = _ref3.decorationSet,
-    tr = _ref3.tr;
-  var table = (0, _utils.findTable)(tr.selection);
-  if (!table) {
-    return decorationSet;
-  }
-  return (0, _decoration.updateDecorations)(tr.doc, decorationSet, (0, _decoration.createColumnControlsDecoration)(tr.selection), _types.TableDecorations.COLUMN_CONTROLS_DECORATIONS);
-};
 
 // @see: https://product-fabric.atlassian.net/browse/ED-7304
-var removeColumnControlsSelectedDecoration = function removeColumnControlsSelectedDecoration(_ref4) {
-  var decorationSet = _ref4.decorationSet;
+var removeColumnControlsSelectedDecoration = function removeColumnControlsSelectedDecoration(_ref3) {
+  var decorationSet = _ref3.decorationSet;
   return decorationSet.remove((0, _decoration.findColumnControlSelectedDecoration)(decorationSet));
 };
 var hasColumnSelectedDecorations = function hasColumnSelectedDecorations(decorationSet) {
   return !!(0, _decoration.findColumnControlSelectedDecoration)(decorationSet).length;
 };
-var maybeUpdateColumnControlsSelectedDecoration = exports.maybeUpdateColumnControlsSelectedDecoration = function maybeUpdateColumnControlsSelectedDecoration(_ref5) {
-  var decorationSet = _ref5.decorationSet,
-    tr = _ref5.tr;
+var maybeUpdateColumnControlsSelectedDecoration = exports.maybeUpdateColumnControlsSelectedDecoration = function maybeUpdateColumnControlsSelectedDecoration(_ref4) {
+  var decorationSet = _ref4.decorationSet,
+    tr = _ref4.tr;
   if (!hasColumnSelectedDecorations(decorationSet)) {
     return decorationSet;
   }
@@ -57,17 +47,10 @@ var maybeUpdateColumnControlsSelectedDecoration = exports.maybeUpdateColumnContr
     tr: tr
   });
 };
-var buildColumnControlsDecorations = exports.buildColumnControlsDecorations = function buildColumnControlsDecorations(_ref6) {
-  var decorationSet = _ref6.decorationSet,
-    tr = _ref6.tr,
-    options = _ref6.options;
-  if (options.isDragAndDropEnabled) {
-    return (0, _composeDecorations.composeDecorations)([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration])({
-      decorationSet: decorationSet,
-      tr: tr
-    });
-  }
-  return (0, _composeDecorations.composeDecorations)([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
+var buildColumnControlsDecorations = exports.buildColumnControlsDecorations = function buildColumnControlsDecorations(_ref5) {
+  var decorationSet = _ref5.decorationSet,
+    tr = _ref5.tr;
+  return (0, _composeDecorations.composeDecorations)([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration])({
     decorationSet: decorationSet,
     tr: tr
   });

package/dist/cjs/pm-plugins/utils/decoration.js

@@ -40,7 +40,7 @@ var createCellHoverDecoration = exports.createCellHoverDecoration = function cre
     });
   });
 };
-var createControlsHoverDecoration = exports.createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, isDragAndDropEnable, hoveredIndexes, danger, selected) {
+var createControlsHoverDecoration = exports.createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, hoveredIndexes, danger, selected) {
   var table = (0, _utils2.findTable)(tr.selection);
   if (!table) {
     return [];
@@ -92,13 +92,9 @@ var createControlsHoverDecoration = exports.createControlsHoverDecoration = func
     if (selected) {
       classes.push(_types.TableCssClassName.SELECTED_CELL);
     }
-    if (isDragAndDropEnable) {
-      if (type === 'column' || type === 'row') {
-        classes.pop();
-        classes.push(_types.TableCssClassName.HOVERED_NO_HIGHLIGHT);
-      }
-    } else {
-      classes.push(type === 'column' ? _types.TableCssClassName.HOVERED_COLUMN : type === 'row' ? _types.TableCssClassName.HOVERED_ROW : _types.TableCssClassName.HOVERED_TABLE);
+    if (type === 'column' || type === 'row') {
+      classes.pop();
+      classes.push(_types.TableCssClassName.HOVERED_NO_HIGHLIGHT);
     }
     var key;
     switch (type) {
@@ -399,7 +395,7 @@ var createResizeHandleDecoration = exports.createResizeHandleDecoration = functi
  * this function will return two decorations applying a new class `ClassName.WITH_RESIZE_LINE`
  * only on the cells: `C1` and `D1`.
  */
-var createColumnLineResize = exports.createColumnLineResize = function createColumnLineResize(selection, cellColumnPositioning, isDragAndDropEnabled) {
+var createColumnLineResize = exports.createColumnLineResize = function createColumnLineResize(selection, cellColumnPositioning) {
   var table = (0, _utils2.findTable)(selection);
   if (!table || cellColumnPositioning.right === null) {
     return [];
@@ -410,7 +406,7 @@ var createColumnLineResize = exports.createColumnLineResize = function createCol
   if (isLastColumn) {
     columnIndex -= 1;
   }
-  var decorationClassName = isDragAndDropEnabled ? isLastColumn ? _types.TableCssClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN : _types.TableCssClassName.WITH_DRAG_RESIZE_LINE : isLastColumn ? _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN : _types.TableCssClassName.WITH_RESIZE_LINE;
+  var decorationClassName = isLastColumn ? _types.TableCssClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN : _types.TableCssClassName.WITH_DRAG_RESIZE_LINE;
   var cellPositions = makeArray(map.height).map(function (rowIndex) {
     return map.map[map.width * rowIndex + columnIndex];
   }).filter(function (cellPosition, rowIndex) {

package/dist/cjs/pm-plugins/utils/sticky-header.js

@@ -13,11 +13,11 @@ var isAnchorSupported = exports.isAnchorSupported = (0, _memoizeOne.default)(fun
   }
   return false;
 });
-var isNativeStickySupported = exports.isNativeStickySupported = function isNativeStickySupported(isDragAndDropEnabled) {
+var isNativeStickySupported = exports.isNativeStickySupported = function isNativeStickySupported() {
   var safariVersion = (0, _browser.getBrowserInfo)().safari_version;
   var isBrowserSafari = !Number.isNaN(safariVersion);
   return (
     // Safari has a bug with position: sticky and content editable, so we don't support it
-    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled
+    !isBrowserSafari && isAnchorSupported()
   );
 };

package/dist/cjs/pm-plugins/utils/tableMode.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isContentModeSupported = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
+exports.measureTableWithAutoLayout = exports.isContentModeSupported = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _styles = require("@atlaskit/editor-common/styles");
 var _table = require("@atlaskit/editor-common/table");
@@ -78,42 +78,74 @@ var applyMeasuredWidthToAllTables = exports.applyMeasuredWidthToAllTables = func
 };
 
 /**
- * Used to measure a selected table width with it's content being laid out natively by the browser
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
  */
-var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
-  var _api$analytics, _api$width$sharedStat, _api$width;
-  var tableObject = (0, _utils.findTable)(view.state.selection);
-  if (!tableObject) {
-    return;
-  }
-  var node = tableObject.node,
-    pos = tableObject.pos;
-  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
-  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
-    return;
-  }
-  var tableRef = tableState.tableRef;
-
-  // Instead of dispatching a transaction to "strip widths" and then waiting
-  // for a rAF to measure natural column widths, instea directly update the DOM elements and
-  // take a measurement.
+var measureTableWithAutoLayout = exports.measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef) {
   var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
   var contentWrap = tableRef.closest(".".concat(_styles.TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
   var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
   var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
+
+  // Capture current inline styles so we can restore them after measurement
+  var prevTableWidth = tableRef.style.width;
+  var prevTableLayout = tableRef.style.tableLayout;
+  var prevColWidths = cols.map(function (col) {
+    return col.style.width;
+  });
+  var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
+
+  // Apply temporary styles for content-based measurement
   tableRef.style.width = '';
   tableRef.style.tableLayout = 'auto';
   cols.forEach(function (col) {
     return col.style.width = '';
   });
   if (resizerContainer) {
-    resizerContainer.style.width = 'max-content';
+    // favour CSS var to align with the table first render state, which gets reset
+    // once resized by user. By doing this we avoid the need to any 'reset' work after
+    // measurement and ensures it works if the table has been resized or not in the session.
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
     resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
   }
   if (resizerItem) {
     resizerItem.style.width = 'max-content';
   }
   var measurement = (0, _contentMode.getTableMeasurement)(tableRef);
+
+  // Reset all inline styles back to their previous values
+  tableRef.style.width = prevTableWidth;
+  tableRef.style.tableLayout = prevTableLayout;
+  cols.forEach(function (col, i) {
+    return col.style.width = prevColWidths[i];
+  });
+  if (resizerItem) {
+    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+  }
+  return measurement;
+};
+
+/**
+ * Used to measure a selected table width with it's content being laid out natively by the browser
+ */
+var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
+  var _api$analytics, _api$width$sharedStat, _api$width;
+  var tableObject = (0, _utils.findTable)(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var node = tableObject.node,
+    pos = tableObject.pos;
+  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+
+  // Instead of dispatching a transaction to "strip widths" and then waiting
+  // for a rAF to measure natural column widths, directly update the DOM elements,
+  // take a measurement, and reset styles so no temporary overrides persist.
+  var measurement = measureTableWithAutoLayout(tableState.tableRef);
   var tr = (0, _contentMode.applyTableMeasurement)(view.state.tr, node, measurement, pos);
   api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
     action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,

package/dist/cjs/tablePlugin.js

@@ -359,8 +359,7 @@ var tablePlugin = function tablePlugin(_ref) {
                 },
                 eventType: _analytics.EVENT_TYPE.TRACK
               })(tr);
-            },
-            dragAndDropEnabled: true
+            }
           });
         }
       }, {

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

@@ -52,7 +52,6 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     tableWrapper = props.tableWrapper,
     targetCellPosition = props.targetCellPosition,
     isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
-    isDragAndDropEnabled = props.isDragAndDropEnabled,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
 
   var handleClick = function handleClick() {
@@ -105,7 +104,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   var parentStickyNative = targetCellRef.parentElement && ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(_types.TableCssClassName.NATIVE_STICKY));
-  if (parentStickyNative && targetCellRef.nodeName === 'TH' && (0, _stickyHeader.isNativeStickySupported)(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && (0, _stickyHeader.isNativeStickySupported)() && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$parent;
     /* We need to default to checking the anchor style because there may be a conflict with the block controls
      plugin not using the data attribute value and setting the `anchor-name` style property independently of the data attribute.

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

@@ -10,7 +10,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
@@ -38,24 +37,17 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     isCommentEditor = _ref.isCommentEditor,
     api = _ref.api,
     isDragMenuOpen = _ref.isDragMenuOpen;
-  if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+  if (!editorView) {
     return null;
   }
 
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
     isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   var selection = editorView.state.selection;
   var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ?
   // Ignored via go/ees005
@@ -64,8 +56,6 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
   if (!selectionRect) {
     return null;
   }
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   var domAtPos = editorView.domAtPos.bind(editorView);
   var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
   if (!targetCellRef) {
@@ -95,10 +85,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     stick: true
   }, (0, _react.jsx)("div", {
     css: (0, _styles.tablePopupStyles)(isDragAndDropEnabled)
-  }, (0, _react.jsx)(_ContextualMenu.default
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  , {
+  }, (0, _react.jsx)(_ContextualMenu.default, {
     editorView: editorView
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,

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

@@ -84,7 +84,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
   }
   var anchorStyles = {};
-  if ((0, _stickyHeader.isNativeStickySupported)(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if ((0, _stickyHeader.isNativeStickySupported)() && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect, _tableRef$querySelect2;
     var rowAnchorName = (_tableRef$querySelect = tableRef.querySelector('tr')) === null || _tableRef$querySelect === void 0 ? void 0 : _tableRef$querySelect.style.getPropertyValue('anchor-name');
     // cast here is due to CSSProperties missing valid positionAnchor property

package/dist/es2019/nodeviews/TableComponent.js

@@ -120,18 +120,19 @@ class TableComponent extends React.Component {
       const prevNode = this.node;
       const node = getNode();
       const prevAttrs = prevNode.attrs;
-      const isNested = isTableNested(this.props.view.state, this.props.getPos());
       const tablePos = this.props.getPos();
+      const isNested = isTableNested(this.props.view.state, tablePos);
       let parentWidth = this.getParentNodeWidth();
       const useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
       if (useMeasuredWidthForBodiedSyncBlock) {
         // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
         // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
         // at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
-        // is not yet available. Both are guarded by `> 1` to ignore degenerate values
-        // that can appear before the element has been laid out.
+        // is not yet available.
+        // The clientWidth > 0 since DOM clientWidth is 0 before layout
+        // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
         let measuredWrapperWidth;
-        if (this.wrapper && this.wrapper.clientWidth > 1) {
+        if (this.wrapper && this.wrapper.clientWidth > 0) {
           measuredWrapperWidth = this.wrapper.clientWidth;
         } else if (this.wrapperWidth && this.wrapperWidth > 1) {
           measuredWrapperWidth = this.wrapperWidth;
@@ -142,7 +143,7 @@ class TableComponent extends React.Component {
           parentWidth = measuredWrapperWidth;
         }
       }
-      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(this.props.view.state, this.props.getPos())) {
+      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(this.props.view.state, tablePos)) {
         const resizeObsWrapperWidth = this.wrapperWidth || 0;
         const wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (this.state.parentWidth || 0));
         const isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;

package/dist/es2019/nodeviews/table-node-views.js

@@ -24,8 +24,7 @@ export const tableHeaderView = options => {
 };
 export const tableRowView = options => {
   return (node, view, getPos) => {
-    var _options$isDragAndDro;
-    if (isNativeStickySupported((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    if (isNativeStickySupported() && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new TableRowNativeStickyWithFallback(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);