@atlaskit/editor-plugin-table 5.7.9 → 5.8.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-table
 
+## 5.8.0
+
+### Minor Changes
+
+- [#57215](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57215) [`73841c209537`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/73841c209537) - [ux] ECA11Y-107: Add basic keyboard navigation for resize sliders
+
+### Patch Changes
+
+- [#66092](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66092) [`b436457c489f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b436457c489f) - [ux] ED-21241: Add new menu items to the drag handle menus
+- Updated dependencies
+
+## 5.7.10
+
+### Patch Changes
+
+- [#66128](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66128) [`a276b9ce0b8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a276b9ce0b8f) - Add data test ids to elements, introduce table tests
+- [#66453](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66453) [`a43a37f6b703`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a43a37f6b703) - [ux] Updates color of insert line when drop target has merged cells.
+- Updated dependencies
+
 ## 5.7.9
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -60,6 +60,9 @@
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/toggle/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
         },

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

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initiateKeyboardColumnResizing = exports.changeColumnWidthByStep = exports.activateNextResizeArea = void 0;
+var _styles = require("@atlaskit/editor-common/styles");
+var _editorTables = require("@atlaskit/editor-tables");
+var _utils = require("@atlaskit/editor-tables/src/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
+var _utils2 = require("../pm-plugins/table-resizing/utils");
+var _transforms = require("../transforms");
+var _utils3 = require("../utils");
+var _index = require("./index");
+var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos) {
+  return function (state, dispatch) {
+    (0, _index.addResizeHandleDecorations)(rowIndex, columnIndex, true)(state, dispatch);
+    // Currently only 'right' position is used in showResizeHandleLine
+    (0, _index.showResizeHandleLine)({
+      left: 0,
+      right: columnIndex
+    })(state, dispatch);
+    (0, _pluginFactory.createCommand)({
+      type: 'SET_RESIZE_HANDLE_POSITION',
+      data: {
+        resizeHandlePos: nextResizeHandlePos
+      }
+    })(state, dispatch);
+    return false;
+  };
+};
+var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(state, dispatch, view) {
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+    return false;
+  }
+  var selection = state.selection;
+  var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
+  var cell = (0, _utils.findCellClosestToPos)(selection.$from);
+  if (selectionRect && cell && view) {
+    var cellAttrs = cell.node.attrs;
+    var width = (0, _utils2.currentColWidth)(view, cell.pos, cellAttrs);
+    updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
+    (0, _pluginFactory.createCommand)({
+      type: 'SET_DRAGGING',
+      data: {
+        dragging: {
+          startX: 0,
+          startWidth: width
+        }
+      }
+    })(state, dispatch);
+    return true;
+  }
+  return false;
+};
+var activateNextResizeArea = exports.activateNextResizeArea = function activateNextResizeArea(direction) {
+  return function (state, dispatch) {
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var _ref = (0, _pluginFactory.getPluginState)(state) || {},
+      resizeHandlePos = _ref.resizeHandlePos,
+      dragging = _ref.dragging;
+    // If No resizing has initiated, skip to regular handler
+    if (!resizeHandlePos || !dragging) {
+      return false;
+    }
+    var selection = state.selection;
+    var cell = (0, _utils.findCellClosestToPos)(selection.$from);
+    if (!cell) {
+      // cursor position may be changed by mouse to be outside of table;
+      return false;
+    }
+    var $currentCell = state.doc.resolve(resizeHandlePos);
+    if (!$currentCell) {
+      return false;
+    }
+    var tableNode = $currentCell.node(-1);
+    var closestTable = (0, _utils.findTableClosestToPos)($currentCell);
+    var tableMap = _editorTables.TableMap.get(tableNode);
+    if (!tableNode || !closestTable || !tableMap) {
+      return false;
+    }
+    var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
+    var $nextCell = (0, _utils.nextCell)($currentCell, 'horiz', direction);
+    if ($nextCell) {
+      // we are somewhere in between the side columns of the table
+      var offset = $nextCell.pos - $nextCell.start(-1);
+      var rectForNextCell = tableMap.findCell(offset);
+      updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos)(state, dispatch);
+    } else {
+      // current position is in the one of the side columns of the table(left or right)
+      if (currentCellRect.left === 0) {
+        var lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
+        var $lastCell = state.doc.resolve(lastCellInCurrentRow);
+        updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos)(state, dispatch);
+      } else if (tableMap.width === currentCellRect.right) {
+        var firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
+        var _$nextCell = state.doc.resolve(firsCellInCurrentRow);
+        updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos)(state, dispatch);
+      }
+    }
+    return true;
+  };
+};
+var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
+  return function (state, dispatch, view) {
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var _getTableResizingPlug = (0, _pluginFactory.getPluginState)(state),
+      resizeHandlePos = _getTableResizingPlug.resizeHandlePos,
+      dragging = _getTableResizingPlug.dragging;
+    if (!view || !resizeHandlePos || !dragging) {
+      return false;
+    }
+    var $cell = state.doc.resolve(resizeHandlePos);
+    var tableStartPosition = $cell.start(-1);
+    var originalTable = $cell.node(-1);
+    var map = _editorTables.TableMap.get(originalTable);
+    var domAtPos = view.domAtPos.bind(view);
+    var colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
+    var dom = domAtPos(tableStartPosition).node;
+    if (dom && dom.nodeName !== 'TABLE') {
+      dom = dom.closest('table');
+    }
+    var maxSize = (0, _utils2.getTableMaxWidth)({
+      table: originalTable,
+      tableStart: tableStartPosition,
+      state: state,
+      layout: originalTable.attrs.layout,
+      getEditorContainerWidth: getEditorContainerWidth
+    });
+    var initialResizeState = (0, _utils2.getResizeState)({
+      minWidth: _styles.tableCellMinWidth,
+      maxSize: maxSize,
+      table: originalTable,
+      tableRef: dom,
+      start: tableStartPosition,
+      domAtPos: domAtPos
+    });
+    (0, _utils2.updateControls)()(state);
+    var selectionRect = (0, _utils.getSelectionRect)(state.selection);
+    var selectedColumns = selectionRect ? (0, _utils3.getSelectedColumnIndexes)(selectionRect) : [];
+    // only selected (or selected - 1) columns should be distributed
+    var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
+    var newResizeState = (0, _utils2.resizeColumn)(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
+    var tr = (0, _transforms.updateColumnWidths)(newResizeState, originalTable, tableStartPosition)(state.tr);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/cjs/commands/go-to-next-cell.js

@@ -8,7 +8,10 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commandsWithAnalytics = require("../commands-with-analytics");
+var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
+var _hover = require("./hover");
 // #region Constants
 
 var TAB_FORWARD_DIRECTION = 1;
@@ -20,6 +23,18 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
       if (!table) {
         return false;
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+        var _getResizePluginState;
+        var isColumnResizing = !!((_getResizePluginState = (0, _pluginFactory.getPluginState)(state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+        if (isColumnResizing) {
+          (0, _pluginFactory.createCommand)({
+            type: 'STOP_RESIZING'
+          }, function (originalTr) {
+            return (state.tr || originalTr).setMeta('scrollIntoView', false);
+          })(state, dispatch);
+          (0, _hover.hideResizeHandleLine)()(state, dispatch);
+        }
+      }
       var map = _tableMap.TableMap.get(table.node);
       var _state$schema$nodes = state.schema.nodes,
         tableCell = _state$schema$nodes.tableCell,

package/dist/cjs/commands/selection.js

@@ -9,7 +9,9 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../commands/misc");
+var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
 var _toolbar = require("../toolbar");
 var TableSelectionDirection = exports.TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -198,9 +200,14 @@ var arrowLeftFromText = function arrowLeftFromText(editorSelectionAPI) {
       var table = (0, _utils.findTable)(selection);
       if (table) {
         var $from = selection.$from;
+        var isColumnResizing = false;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+          var columResizePluginState = (0, _pluginFactory.getPluginState)(state) || {};
+          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+        }
         if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 &&
         // + 3 for: row, cell & paragraph nodes
-        editorSelectionAPI) {
+        editorSelectionAPI && !isColumnResizing) {
           var selectionState = editorSelectionAPI.sharedState.currentState() || {};
           if ((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selectionRelativeToNode) === _selection.RelativeSelectionPos.Before) {
             // we have a text selection at start of first table cell, directly inside a top level paragraph,
@@ -227,8 +234,14 @@ var arrowRightFromText = function arrowRightFromText(editorSelectionAPI) {
       var table = (0, _utils.findTable)(selection);
       if (table) {
         var $to = selection.$to;
-        if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
-        ) {
+        var isColumnResizing = false;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+          var columResizePluginState = (0, _pluginFactory.getPluginState)(state) || {};
+          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+        }
+        if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 &&
+        // + 3 for: row, cell & paragraph nodes
+        !isColumnResizing) {
           // we have a text selection at end of last table cell, directly inside a top level paragraph,
           // and want to set a full table cell selection
           return selectFullTable(editorSelectionAPI)({

package/dist/cjs/nodeviews/ExternalDropTargets.js

@@ -55,7 +55,8 @@ var ExternalDropTargets = exports.ExternalDropTargets = function ExternalDropTar
       top: "-".concat(_consts.dropTargetExtendedWidth - _styles.tableMarginTop, "px"),
       pointerEvents: 'auto',
       zIndex: "".concat(_consts.dropTargetsZIndex)
-    }
+    },
+    "data-testid": "table-floating-column-extended-drop-targets"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',

package/dist/cjs/plugin.js

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

package/dist/cjs/pm-plugins/drag-and-drop/commands.js

@@ -22,7 +22,7 @@ var getDecorations = exports.getDecorations = function getDecorations(state) {
 var updatePluginStateDecorations = exports.updatePluginStateDecorations = function updatePluginStateDecorations(state, decorations, key) {
   return (0, _utils2.updateDecorations)(state.doc, getDecorations(state), decorations, key);
 };
-var setDropTarget = exports.setDropTarget = function setDropTarget(type, index, tr) {
+var setDropTarget = exports.setDropTarget = function setDropTarget(type, index, hasMergedCells, tr) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var _getPluginState = (0, _pluginFactory.getPluginState)(state),
       dropTargetType = _getPluginState.dropTargetType,
@@ -32,9 +32,9 @@ var setDropTarget = exports.setDropTarget = function setDropTarget(type, index,
     }
     var decorationSet = _view.DecorationSet.empty;
     if (type === 'column') {
-      decorationSet = updatePluginStateDecorations(state, (0, _utils2.createColumnInsertLine)(index, state.selection), _types.TableDecorations.COLUMN_INSERT_LINE);
+      decorationSet = updatePluginStateDecorations(state, (0, _utils2.createColumnInsertLine)(index, state.selection, hasMergedCells), _types.TableDecorations.COLUMN_INSERT_LINE);
     } else if (type === 'row') {
-      decorationSet = updatePluginStateDecorations(state, (0, _utils2.createRowInsertLine)(index, state.selection), _types.TableDecorations.ROW_INSERT_LINE);
+      decorationSet = updatePluginStateDecorations(state, (0, _utils2.createRowInsertLine)(index, state.selection, hasMergedCells), _types.TableDecorations.ROW_INSERT_LINE);
     }
     return {
       type: _actions.DragAndDropActionType.SET_DROP_TARGET,

package/dist/cjs/pm-plugins/drag-and-drop/plugin.js

@@ -138,7 +138,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             var sourceType = data.sourceType,
               targetAdjustedIndex = data.targetAdjustedIndex;
             var dropTargetType = sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN;
-            (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
+            var hasMergedCells = (0, _utils2.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+            (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
             var _cell$row, _cell$col;

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

@@ -9,8 +9,10 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands2 = require("../commands");
 var _commandsWithAnalytics = require("../commands-with-analytics");
+var _columnResize = require("../commands/column-resize");
 var _insert = require("../commands/insert");
 var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with-analytics");
 var _analytics2 = require("../utils/analytics");
@@ -49,6 +51,13 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.deleteColumn.common, (0, _commandsWithAnalytics.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut)(editorAnalyticsAPI), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.deleteRow.common, (0, _commandsWithAnalytics.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut)(editorAnalyticsAPI), list);
   }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.startColumnResizing.common, _columnResize.initiateKeyboardColumnResizing, list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _columnResize.activateNextResizeArea)(1), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _columnResize.activateNextResizeArea)(-1), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(-10, getEditorContainerWidth), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(10, getEditorContainerWidth), list);
+  }
   return (0, _keymap.keymap)(list);
 }
 var _default = exports.default = keymapPlugin;

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

@@ -41,13 +41,24 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
   }
-  var containerWidth = getEditorContainerWidth();
-  var parentWidth = (0, _nodeWidth.getParentNodeWidth)(start, state, containerWidth);
-  var maxSize = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? parentWidth ||
-  // its safe to reference table width from node as this will not have changed
-  originalTable.attrs.width || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {});
-  if (originalTable.attrs.isNumberColumnEnabled) {
-    maxSize -= _editorSharedStyles.akEditorTableNumberColumnWidth;
+  var maxSize;
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+    var containerWidth = getEditorContainerWidth();
+    var parentWidth = (0, _nodeWidth.getParentNodeWidth)(start, state, containerWidth);
+    maxSize = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? parentWidth ||
+    // its safe to reference table width from node as this will not have changed
+    originalTable.attrs.width || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {});
+    if (originalTable.attrs.isNumberColumnEnabled) {
+      maxSize -= _editorSharedStyles.akEditorTableNumberColumnWidth;
+    }
+  } else {
+    maxSize = (0, _utils3.getTableMaxWidth)({
+      table: originalTable,
+      tableStart: start,
+      state: state,
+      layout: originalTable.attrs.layout,
+      getEditorContainerWidth: getEditorContainerWidth
+    });
   }
   var resizeState = (0, _utils3.getResizeState)({
     minWidth: _styles.tableCellMinWidth,

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

@@ -123,6 +123,12 @@ Object.defineProperty(exports, "getResizeState", {
     return _resizeState.getResizeState;
   }
 });
+Object.defineProperty(exports, "getTableMaxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _misc.getTableMaxWidth;
+  }
+});
 Object.defineProperty(exports, "getTotalWidth", {
   enumerable: true,
   get: function get() {

package/dist/cjs/types.js

@@ -105,6 +105,8 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   DRAG_HANDLE_DISABLED: "".concat(_adfSchema.tablePrefixSelector, "-drag-handle-disabled"),
   /** minimised handle class */
   DRAG_HANDLE_MINIMISED: "".concat(_adfSchema.tablePrefixSelector, "-drag-handle-minimised"),
+  DRAG_SUBMENU: "".concat(_adfSchema.tablePrefixSelector, "-drag-submenu"),
+  DRAG_SUBMENU_ICON: "".concat(_adfSchema.tablePrefixSelector, "-drag-submenu-icon"),
   /** Other classes */
   NUMBERED_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column"),
   NUMBERED_COLUMN_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column__button"),
@@ -140,12 +142,17 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: "".concat(_adfSchema.tablePrefixSelector, "-last-item-in-cell"),
   WITH_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-insert-line"),
+  WITH_COLUMN_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-column-insert-line__inactive"),
   WITH_FIRST_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-first-column-insert-line"),
+  WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-first-column-insert-line__inactive"),
   WITH_LAST_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-column-insert-line"),
+  WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-last-column-insert-line__inactive"),
   WITH_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line"),
   WITH_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line-last-column"),
   WITH_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line"),
-  WITH_LAST_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line")
+  WITH_ROW_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line__inactive"),
+  WITH_LAST_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line"),
+  WITH_LAST_ROW_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line__inactive")
 });
 var ShadowEvent = exports.ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

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

@@ -123,7 +123,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
-    "data-testid": "table-floating-column-controls-drag-handle",
+    "data-testid": "table-drag-handle-button",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: function onMouseUp(e) {