@atlaskit/editor-plugin-table 5.7.2 → 5.7.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 5.7.4
+
+### Patch Changes
+
+- [#63287](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63287) [`8b58c452f126`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b58c452f126) - ED-20334 Cleaned reference for feature flag 'platform.editor.table-update-colwidths-after-column-is-deleted'and refactored code for it.
+
+## 5.7.3
+
+### Patch Changes
+
+- [#63290](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63290) [`52ea8e908f57`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52ea8e908f57) - ED-19613: Cleaned references for feature flag: platform.editor.table-remove-update-resize-handles_djvab.
+- [#63606](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63606) [`196f99e732d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/196f99e732d6) - [ux] Add support for drag handle for sticky header in table
+- [#61531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61531) [`4f1e82618f55`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f1e82618f55) - [ux] fix in danger selection been re-calcuate with merged cells
+- Updated dependencies
+
 ## 5.7.2
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -43,7 +43,7 @@ function addColumnAt(getEditorContainerWidth) {
       var table = (0, _utils2.findTable)(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = (0, _columnWidth.rescaleColumns)(getEditorContainerWidth)(table, view)(updatedTr);
+        updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
       }
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = (0, _commands.updateRowOrColumnMovedTransform)({

package/dist/cjs/nodeviews/TableComponent.js

@@ -561,6 +561,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader
       });
+      var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
         editorView: view,
         tableRef: tableRef,
@@ -579,7 +580,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         canDrag: canDrag,
-        getEditorFeatureFlags: getEditorFeatureFlags
+        getEditorFeatureFlags: getEditorFeatureFlags,
+        tableContainerWidth: tableContainerWidth,
+        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled
       }) : null;
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {

package/dist/cjs/plugin.js

@@ -359,7 +359,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
             canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
-            editorAnalyticsAPI: editorAnalyticsAPI
+            editorAnalyticsAPI: editorAnalyticsAPI,
+            stickyHeaders: stickyHeader
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/cjs/pm-plugins/main.js

@@ -12,8 +12,6 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
-var _utils3 = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
 var _misc = require("../commands/misc");
 var _eventHandlers = require("../event-handlers");
@@ -23,7 +21,7 @@ var _TableRow = _interopRequireDefault(require("../nodeviews/TableRow"));
 var _plugin = require("../pm-plugins/decorations/plugin");
 var _transforms2 = require("../transforms");
 var _types = require("../types");
-var _utils4 = require("../utils");
+var _utils3 = require("../utils");
 var _paste = require("../utils/paste");
 var _defaultTableSelection = require("./default-table-selection");
 var _pluginFactory = require("./plugin-factory");
@@ -114,24 +112,15 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           var selection = state.selection;
           var pluginState = (0, _pluginFactory.getPluginState)(state);
           var tableRef;
-          var tableNode;
           if (pluginState.editorHasFocus) {
             var parent = (0, _utils2.findParentDomRefOfType)(state.schema.nodes.table, domAtPos)(selection);
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
-            tableNode = (0, _utils3.findTable)(state.selection);
           }
           if (pluginState.tableRef !== tableRef) {
             (0, _commands.setTableRef)(tableRef)(state, dispatch);
           }
-
-          // Removes updateResizeHandles
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
-            if (pluginState.tableNode !== tableNode) {
-              (0, _utils4.updateResizeHandles)(tableRef);
-            }
-          }
           if (pluginState.editorHasFocus && pluginState.tableRef) {
             var _ref = state.selection,
               $cursor = _ref.$cursor;
@@ -167,7 +156,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         if (!(0, _coreUtils.insideTable)(editorState) && (0, _paste.isHeaderRowRequired)(editorState)) {
           slice = (0, _misc.transformSliceToAddTableHeaders)(slice, schema);
         }
-        slice = (0, _utils4.transformSliceToFixHardBreakProblemOnCopyFromCell)(slice, schema);
+        slice = (0, _utils3.transformSliceToFixHardBreakProblemOnCopyFromCell)(slice, schema);
 
         // We do this separately, so it also applies to drag/drop events
         // This needs to go before `transformSliceToRemoveOpenExpand`
@@ -178,11 +167,11 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         slice = (0, _transforms.transformSliceToRemoveOpenExpand)(slice, schema);
 
         /** If a partial paste of table, paste only table's content */
-        slice = (0, _utils4.transformSliceToRemoveOpenTable)(slice, schema);
+        slice = (0, _utils3.transformSliceToRemoveOpenTable)(slice, schema);
 
         /** If a partial paste of bodied extension, paste only text */
         slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
-        slice = (0, _utils4.transformSliceToCorrectEmptyTableCells)(slice, schema);
+        slice = (0, _utils3.transformSliceToCorrectEmptyTableCells)(slice, schema);
         if (!pluginConfig.allowColumnResizing) {
           slice = (0, _misc.transformSliceToRemoveColumnsWidths)(slice, schema);
         }
@@ -198,7 +187,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         var state = _ref2.state,
           dispatch = _ref2.dispatch;
         var decorationSet = _plugin.pluginKey.getState(state);
-        if ((0, _utils4.findControlsHoverDecoration)(decorationSet).length) {
+        if ((0, _utils3.findControlsHoverDecoration)(decorationSet).length) {
           (0, _commands.clearHoverSelection)()(state, dispatch);
         }
 

package/dist/cjs/pm-plugins/table-resizing/event-handlers.js

@@ -151,10 +151,6 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom);
     (0, _utils3.updateControls)()(state);
-    // Remove updateResizeHandles
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
-      (0, _utils2.updateResizeHandles)(dom);
-    }
   }
   window.addEventListener('mouseup', finish);
   window.addEventListener('mousemove', move);

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

@@ -4,16 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateColumnWidths = exports.rescaleColumnsOld = exports.rescaleColumnsNew = exports.rescaleColumns = void 0;
+exports.updateColumnWidths = exports.rescaleColumns = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
-var _misc = require("../pm-plugins/table-resizing/utils/misc");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
 var _commonStyles = require("../ui/common-styles");
@@ -95,7 +93,7 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew() {
+var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
   return function (table, view) {
     return function (tr) {
       var _tableRef$parentEleme, _tableRef$parentEleme2;
@@ -115,7 +113,7 @@ var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew()
         // 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 - 1,
+        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
       };
 
@@ -175,104 +173,4 @@ var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew()
       return updateColumnWidths(resizeState, table.node, table.start)(tr);
     };
   };
-};
-
-/**
- * This function is called when user inserts/deletes a column in a table to;
- * - rescale all columns (if the table did not overflow before the insertion)
- * - and update column widths.
- *
- * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
- * @param table
- * @param view
- * @returns Updated transaction with rescaled columns for a given table
- */
-var rescaleColumnsOld = exports.rescaleColumnsOld = function rescaleColumnsOld(getEditorContainerWidth) {
-  return function (table, view) {
-    return function (tr) {
-      var _tableRef$parentEleme3;
-      if (!view) {
-        return tr;
-      }
-      var pos = table.pos;
-      var newTable = tr.doc.nodeAt(pos);
-      var state = view.state;
-      var domAtPos = view.domAtPos.bind(view);
-      var maybeTable = domAtPos(table.start).node;
-      var tableRef = maybeTable.closest('table');
-      if (!tableRef || !newTable) {
-        return tr;
-      }
-      var layout = (0, _resizeState.normaliseTableLayout)(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
-      // The is the width the table can reach before overflowing
-      var maxSize = (0, _misc.getTableMaxWidth)({
-        table: table.node,
-        tableStart: table.start,
-        state: state,
-        layout: layout,
-        getEditorContainerWidth: getEditorContainerWidth
-      });
-      var tableWidth = tableRef.clientWidth || _editorSharedStyles.akEditorDefaultLayoutWidth;
-      var tableMaxWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
-      tableMaxWidth -= _commonStyles.insertColumnButtonOffset;
-      var newTableMap = _tableMap.TableMap.get(newTable);
-      var noOfColumns = newTableMap.width;
-      if (!noOfColumns || noOfColumns <= 0) {
-        return tr;
-      }
-      var columnWidthUnresized = tableWidth / noOfColumns;
-
-      // If the table has not been resized, and the column width is bigger than the minimum column width
-      // we skip updating the size of columns here.
-      if (!(0, _utils.hasTableBeenResized)(table.node) && columnWidthUnresized > _styles.tableCellMinWidth) {
-        return tr;
-      }
-
-      // If the table has not been resized, and the column width is smaller than the minimum column width
-      // Or if the table has been resized, but each column width is either 48px or null
-      // we update the table to have 48px for each column
-      if (!(0, _utils.hasTableBeenResized)(table.node) && columnWidthUnresized <= _styles.tableCellMinWidth || (0, _utils.hasTableBeenResized)(table.node) && (0, _colgroup.isMinCellWidthTable)(table.node)) {
-        var widths = new Array(noOfColumns).fill(_styles.tableCellMinWidth);
-        var cols = widths.map(function (_, index) {
-          return {
-            width: _styles.tableCellMinWidth,
-            minWidth: _styles.tableCellMinWidth,
-            index: index
-          };
-        });
-        var overflow = tableWidth > maxSize;
-        var minWidthResizeState = {
-          cols: cols,
-          widths: widths,
-          maxSize: maxSize,
-          tableWidth: tableWidth,
-          overflow: overflow
-        };
-        return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
-      }
-      var resizeState = (0, _resizeState.getResizeState)({
-        minWidth: _styles.tableCellMinWidth,
-        table: table.node,
-        start: table.start,
-        tableRef: tableRef,
-        domAtPos: domAtPos,
-        maxSize: maxSize
-      });
-      var previousTableWidth = resizeState.tableWidth - _tableMap.tableNewColumnMinWidth;
-      var tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
-
-      // If the new table width will result in the table going into an overflow state
-      // we resize the cells to avoid the overflow occuring
-      if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-        resizeState = (0, _scaleTable.scaleTableTo)(resizeState, maxSize);
-      }
-      return updateColumnWidths(resizeState, table.node, table.start)(tr);
-    };
-  };
-};
-var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-update-colwidths-after-column-is-deleted')) {
-    return rescaleColumnsNew();
-  }
-  return rescaleColumnsOld(getEditorContainerWidth);
 };

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

@@ -12,7 +12,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _columnWidth = require("./column-width");
 var _split = require("./split");
@@ -224,10 +223,8 @@ var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCu
       updatedTr = deleteColumnsLegacy(rect)(updatedTr);
     }
     var table = (0, _utils.findTable)(updatedTr.selection);
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-update-colwidths-after-column-is-deleted')) {
-      if (table) {
-        updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
-      }
+    if (table) {
+      updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
     }
     return updatedTr;
   };

package/dist/cjs/types.js

@@ -122,8 +122,6 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   RESIZING_PLUGIN: "".concat(_adfSchema.tablePrefixSelector, "-resizing-plugin"),
   RESIZE_CURSOR: "".concat(_adfSchema.tablePrefixSelector, "-resize-cursor"),
   IS_RESIZING: "".concat(_adfSchema.tablePrefixSelector, "-is-resizing"),
-  // Resize handle is going to be removed together with updateResizeHandles - table's utility function
-  RESIZE_HANDLE: "".concat(_adfSchema.tablePrefixSelector, "-resize-handle"),
   RESIZE_HANDLE_DECORATION: "".concat(_adfSchema.tablePrefixSelector, "-resize-decoration"),
   CONTEXTUAL_SUBMENU: "".concat(_adfSchema.tablePrefixSelector, "-contextual-submenu"),
   CONTEXTUAL_MENU_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-contextual-menu-button-wrap"),

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

@@ -23,10 +23,12 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition = _ref.targetCellPosition,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     canDrag = _ref.canDrag,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    stickyHeaders = _ref.stickyHeaders;
   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');
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
@@ -44,8 +46,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     fitWidth: _consts.dragMenuDropdownWidth
     // 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
     ,
-    zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+    zIndex: inStickyMode ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
     offset: offset,
     stick: true

package/dist/cjs/ui/FloatingInsertButton/InsertButton.js

@@ -19,12 +19,12 @@ var _types = require("../../types");
 var _consts = require("../consts");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-var getInsertLineHeight = function getInsertLineHeight(tableRef, hasStickyHeaders) {
+var getInsertLineHeight = function getInsertLineHeight(tableRef, hasStickyHeaders, isDragAndDropEnabled) {
   // The line gets height 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   var LINE_OFFSET = 3;
-  var ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - _styles.tableMarginTop * 4 - LINE_OFFSET : _consts.tableToolbarSize + LINE_OFFSET;
+  var ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - _styles.tableMarginTop * (isDragAndDropEnabled ? 3 : 4) - LINE_OFFSET : _consts.tableToolbarSize + LINE_OFFSET;
   return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
 };
 var getToolbarSize = function getToolbarSize(tableRef) {
@@ -89,7 +89,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
       width: getInsertLineWidth(tableRef, true),
       left: "var(--ds-space-150, 12px)"
     } : {
-      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
+      height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
       top: '-3px'
     }
   })));

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

@@ -126,7 +126,7 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
       // Only when inserting a column, otherwise set to undefined
       // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
-      var zIndex = type === 'column' ? _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex : undefined;
+      var zIndex = type === 'column' ? _editorSharedStyles.akEditorTableInsertButtonOnStickyHeaderZIndex : undefined;
       return /*#__PURE__*/_react.default.createElement(_ui.Popup, (0, _extends2.default)({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-common/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
-var _utils = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _types = require("../../../types");
-var _utils2 = require("../../../utils");
+var _utils3 = require("../../../utils");
 var _DragHandle = require("../../DragHandle");
 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; }
@@ -20,11 +22,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var getSelectedColumns = function getSelectedColumns(selection) {
   if (selection instanceof _editorTables.CellSelection && selection.isColSelection()) {
-    var rect = (0, _utils.getSelectionRect)(selection);
+    var rect = (0, _utils2.getSelectionRect)(selection);
     if (!rect) {
       return [];
     }
-    return (0, _utils2.getSelectedColumnIndexes)(rect);
+    return (0, _utils3.getSelectedColumnIndexes)(rect);
   }
   return [];
 };
@@ -42,12 +44,19 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     colWidths = _ref.colWidths,
     hasHeaderColumn = _ref.hasHeaderColumn,
     isTableHovered = _ref.isTableHovered,
-    canDrag = _ref.canDrag;
+    canDrag = _ref.canDrag,
+    tableContainerWidth = _ref.tableContainerWidth,
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
+  var columnControlsRef = (0, _react.useRef)(null);
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
-    return width ? "".concat(width - 1, "px") : '0px';
+    return (
+      // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
+      // we need to reduce the width by 1px to avoid misalignment of column controls.
+      width ? stickyTop ? "".concat(width - 2, "px") : "".concat(width - 1, "px") : '0px'
+    );
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
-  var columnParams = (0, _utils2.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
+  var columnParams = (0, _utils3.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
@@ -104,6 +113,24 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var colIndexes = (0, _react.useMemo)(function () {
     return [colIndex];
   }, [colIndex]);
+  var tableWrapper = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
+  var handleScroll = (0, _react.useCallback)(function (event) {
+    if (stickyTop) {
+      if (columnControlsRef && columnControlsRef.current) {
+        var _tableWrapper$scrollL;
+        columnControlsRef.current.scrollLeft = (_tableWrapper$scrollL = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.scrollLeft) !== null && _tableWrapper$scrollL !== void 0 ? _tableWrapper$scrollL : 0;
+      }
+    }
+  }, [stickyTop, tableWrapper]);
+  (0, _react.useEffect)(function () {
+    handleScroll();
+  }, [handleScroll]);
+  (0, _react.useEffect)(function () {
+    tableWrapper === null || tableWrapper === void 0 || tableWrapper.addEventListener('scroll', handleScroll);
+    return function () {
+      tableWrapper === null || tableWrapper === void 0 || tableWrapper.removeEventListener('scroll', handleScroll);
+    };
+  }, [tableWrapper, handleScroll]);
   var generateHandleByType = function generateHandleByType(type) {
     var _rowHeights$reduce, _colWidths;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
@@ -166,15 +193,19 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
     return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
   };
+  var containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
   }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: columnControlsRef,
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
     style: {
       gridTemplateColumns: widths,
-      marginTop: marginTop
+      marginTop: marginTop,
+      width: stickyTop ? containerWidth : undefined,
+      overflowX: stickyTop ? 'hidden' : 'visible'
     }
   }, !isResizing && columnParams.map(function (_ref2, index) {
     var startIndex = _ref2.startIndex,

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

@@ -30,7 +30,9 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     selection = _ref.selection,
     isInDanger = _ref.isInDanger,
     isTableHovered = _ref.isTableHovered,
-    canDrag = _ref.canDrag;
+    canDrag = _ref.canDrag,
+    tableContainerWidth = _ref.tableContainerWidth,
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
   var _useState = (0, _react.useState)({
       width: 0,
       height: 0
@@ -42,9 +44,11 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     hasDropTargets = _useState4[0],
     setHasDropTargets = _useState4[1];
+  var containerRef = (0, _react.useRef)(null);
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
   var hasHeaderColumn = (0, _utils.containsHeaderColumn)(node);
+  var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   (0, _react.useEffect)(function () {
     var _window;
     if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
@@ -105,14 +109,17 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     return null;
   }
   var colWidths = (0, _utils.getColumnsWidths)(editorView);
-  var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-
-  // TODO - Removing column controls for now because they are causing the table
-  // to overflow and scroll. Update this when sticky header support is added ED-21088
-  if (stickyHeader && stickyHeader.sticky) {
-    return null;
+  if (stickyTop) {
+    var _rowHeights$, _containerRef$current;
+    var headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+    containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.style.setProperty('top', "".concat(stickyTop - headerRowHeight + 33, "px") // 33px is padding and margin applied on tr.sticky
+    );
+  } else {
+    var _containerRef$current2;
+    containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
   }
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ColumnControls.ColumnControls, {
@@ -128,7 +135,9 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     rowHeights: rowHeights,
     colWidths: colWidths,
     hasHeaderColumn: hasHeaderColumn,
-    canDrag: canDrag
+    canDrag: canDrag,
+    tableContainerWidth: tableContainerWidth,
+    isNumberColumnEnabled: isNumberColumnEnabled
   }), hasDropTargets && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,