@atlaskit/editor-plugin-table 5.7.1 → 5.7.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [#63416](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63416) [`cfa23683ae92`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cfa23683ae92) - update floating tool bar button
+- [#63569](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63569) [`bf5ed730bc99`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf5ed730bc99) - Use start position to calculate insert column buttons to cater for merged cells
+
 ## 5.7.1
 
 ### Patch Changes

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/toolbar.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
+exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -17,8 +17,12 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
@@ -60,16 +64,30 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  return {
-    id: 'editor.table.tableOptions',
-    type: 'dropdown',
-    testId: 'table_options',
-    title: formatMessage(_messages.tableMessages.tableOptions),
-    hidden: options.every(function (option) {
-      return option.hidden;
-    }),
-    options: options
-  };
+  if (state.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      icon: _preferences.default,
+      title: formatMessage(_messages.tableMessages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  } else {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      title: formatMessage(_messages.tableMessages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  }
 };
 
 // Added these options for mobile. Mobile bridge translates this menu and
@@ -268,6 +286,16 @@ var getClosestSelectionRect = exports.getClosestSelectionRect = function getClos
   var selection = state.selection;
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : (0, _utils3.findCellRectClosestToPos)(selection.$from);
 };
+var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(state) {
+  var selection = state.selection;
+  var tableObject = (0, _utils3.findTable)(state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var map = _tableMap.TableMap.get(tableObject.node);
+  var tableRect = new _tableMap.Rect(0, 0, map.width, map.height);
+  return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
+};
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
@@ -283,6 +311,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+        var columnSettingsItems;
+        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -335,7 +365,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), colorPicker, [{
+          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), colorPicker, [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, {
@@ -390,9 +420,52 @@ var getCellItems = function getCellItems(pluginConfig, state, view, _ref3, getEd
   }
   return [];
 };
-var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalyticsAPI) {
-  var _node$attrs;
+var getDistributeConfig = exports.getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  return function (state, dispatch, editorView) {
+    var selectionOrTableRect = getClosestSelectionOrTableRect(state);
+    if (!editorView || !selectionOrTableRect) {
+      return false;
+    }
+    var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+    if (newResizeStateWithAnalytics) {
+      (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+      return true;
+    }
+    return false;
+  };
+};
+
+// this create the button group for distribute column and also fixed column width
+// fixed column button should be in this function call in the future
+var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
+  var _newResizeStateWithAn2, _pluginState$pluginCo3;
   var formatMessage = _ref4.formatMessage;
+  var pluginState = (0, _pluginFactory.getPluginState)(editorState);
+  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+  if (!selectionOrTableRect || !editorView) {
+    return [];
+  }
+  var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
+    return [{
+      id: 'editor.table.distributeColumns',
+      type: 'button',
+      title: formatMessage(_messages.tableMessages.distributeColumns),
+      icon: _layoutThreeEqual.default,
+      onClick: function onClick(state, dispatch, view) {
+        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view);
+      },
+      disabled: !wouldChange
+    }, {
+      type: 'separator'
+    }];
+  }
+  return [];
+};
+var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI) {
+  var _node$attrs;
+  var formatMessage = _ref5.formatMessage;
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
     targetCellPosition = _getPluginState2.targetCellPosition,
     pluginConfig = _getPluginState2.pluginConfig;

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,16 +22,16 @@ 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 [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
+  var _colWidths$map$join, _rowHeights$;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -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,16 +113,34 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var colIndexes = (0, _react.useMemo)(function () {
     return [colIndex];
   }, [colIndex]);
-  var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
-    return sum + cur;
-  }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
+  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 _colWidths;
+    var _rowHeights$reduce, _colWidths;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
     var isHover = type === 'hover';
     var isColumnsSelected = selectedColIndexes.length > 0;
+    var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
+      return sum + cur;
+    }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     var showCondition = isHover ? isColumnsSelected && !selectedColIndexes.includes(colIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedColIndexes.length < (colWidths === null || colWidths === void 0 ? void 0 : colWidths.length) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
@@ -121,15 +148,15 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     var gridColumnPosition = "".concat(colIndex + 1, " / span 1");
     var selectedColumnPosition = "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
     var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    var currentSelectionApprearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
-    var istSelecting = isColumnsSelected && !isHover;
+    var currentSelectionAppearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    var isSelecting = isColumnsSelected && !isHover;
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
     return showCondition && /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
-        gridColumn: istSelecting ? selectedColumnPosition : gridColumnPosition,
+        gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -147,7 +174,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       forceDefaultHandle: isHover ? false : isColumnsSelected,
       previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : _styles.tableCellMinWidth,
       previewHeight: previewHeight,
-      appearance: istSelecting ? currentSelectionApprearance : hoveredAppearance,
+      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
@@ -166,22 +193,26 @@ 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,
       endIndex = _ref2.endIndex;
     return /*#__PURE__*/_react.default.createElement("div", {
       style: {
-        gridColumn: "".concat(index + 1, " / span 1")
+        gridColumn: "".concat(startIndex + 1, " / span 1")
       },
       "data-start-index": startIndex,
       "data-end-index": endIndex,

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,