@atlaskit/editor-plugin-table 7.6.4 → 7.6.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.6
+
+### Patch Changes
+
+- [#86633](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86633) [`d9780cd1adb8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9780cd1adb8) - ED-22713: Fixed table resizing not working with keyboard shortcuts
+- [#86724](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86724) [`718a9aa2424d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/718a9aa2424d) - [ED-22607] Remove references to maxFrames for multi bodied extensions and bump adf-schema from 35.7.0 to 35.8.0
+- Updated dependencies
+
+## 7.6.5
+
+### Patch Changes
+
+- [#85342](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85342) [`9a6a1786bc65`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9a6a1786bc65) - [ux] Migrates table styles to space tokens
+
 ## 7.6.4
 
 ### Patch Changes

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stopKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = exports.changeColumnWidthByStep = exports.activateNextResizeArea = void 0;
+var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
@@ -66,25 +67,35 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     return false;
   };
 };
-var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(state, dispatch, view) {
-  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(_ref) {
+  var ariaNotify = _ref.ariaNotify,
+    getIntl = _ref.getIntl;
+  return function (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 (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(_messages.tableMessages.startedColumnResize));
+    }
+    if (selectionRect && cell && view) {
+      return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
+    }
     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) {
-    return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
-  }
-  return false;
+  };
 };
-var activateNextResizeArea = exports.activateNextResizeArea = function activateNextResizeArea(direction) {
+var activateNextResizeArea = exports.activateNextResizeArea = function activateNextResizeArea(_ref2) {
+  var direction = _ref2.direction,
+    ariaNotify = _ref2.ariaNotify,
+    getIntl = _ref2.getIntl;
   return function (state, dispatch, view) {
     if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    var _ref = (0, _pluginFactory2.getPluginState)(state) || {},
-      resizeHandlePos = _ref.resizeHandlePos;
+    var _ref3 = (0, _pluginFactory2.getPluginState)(state) || {},
+      resizeHandlePos = _ref3.resizeHandlePos;
     // If No resizing has initiated, skip to regular handler
     if (!resizeHandlePos) {
       return false;
@@ -107,6 +118,18 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
     }
     var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
     var $nextCell = (0, _utils.nextCell)($currentCell, 'horiz', direction);
+    if (ariaNotify && getIntl) {
+      var columnDirection = '';
+      if (direction === 1) {
+        columnDirection = getIntl().formatMessage(_messages.tableMessages.columnRightResize);
+      }
+      if (direction === -1) {
+        columnDirection = getIntl().formatMessage(_messages.tableMessages.columnLeftResize);
+      }
+      ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
+        direction: columnDirection
+      }));
+    }
     if ($nextCell) {
       // we are somewhere in between the side columns of the table
       var offset = $nextCell.pos - $nextCell.start(-1);
@@ -127,8 +150,12 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
     return false;
   };
 };
-var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
-  var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
+  var stepSize = _ref4.stepSize,
+    getEditorContainerWidth = _ref4.getEditorContainerWidth,
+    isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    ariaNotify = _ref4.ariaNotify,
+    getIntl = _ref4.getIntl;
   return function (state, dispatch, view) {
     var customTr = state.tr;
     var fakeDispatch = function fakeDispatch(tr) {
@@ -190,10 +217,26 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
     if (dispatch) {
       dispatch(customTr);
     }
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(_messages.tableMessages.changedColumnWidth, {
+        width: Math.floor(newResizeState.cols[colIndex].width)
+      }));
+      if (newResizeState.cols.length === colIndex + 1) {
+        if (newResizeState.overflow === true) {
+          ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeLast));
+        }
+        if (newResizeState.overflow === false) {
+          ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeOverflow));
+        }
+      }
+    }
     return true;
   };
 };
-var stopKeyboardColumnResizing = exports.stopKeyboardColumnResizing = function stopKeyboardColumnResizing(originalTr) {
+var stopKeyboardColumnResizing = exports.stopKeyboardColumnResizing = function stopKeyboardColumnResizing(_ref5) {
+  var ariaNotify = _ref5.ariaNotify,
+    getIntl = _ref5.getIntl,
+    originalTr = _ref5.originalTr;
   return function (state, dispatch) {
     if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
@@ -218,6 +261,9 @@ var stopKeyboardColumnResizing = exports.stopKeyboardColumnResizing = function s
     }, function () {
       return customTr.setMeta('scrollIntoView', false);
     })(state, fakeDispatch);
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeStop));
+    }
     if (dispatch) {
       dispatch(customTr);
       return true;

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

@@ -16,7 +16,7 @@ var _columnResize = require("./column-resize");
 
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
-var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsAPI) {
+var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify, getIntl) {
   return function (direction) {
     return function (state, dispatch, view) {
       var table = (0, _utils2.findTable)(state.selection);
@@ -27,7 +27,10 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
         var _getPluginState;
         var isColumnResizing = (_getPluginState = (0, _pluginFactory.getPluginState)(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
         if (isColumnResizing) {
-          (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch, view);
+          (0, _columnResize.stopKeyboardColumnResizing)({
+            ariaNotify: ariaNotify,
+            getIntl: getIntl
+          })(state, dispatch, view);
           return true;
         }
       }

package/dist/cjs/commands-with-analytics.js

@@ -191,7 +191,7 @@ var insertRowWithAnalytics = exports.insertRowWithAnalytics = function insertRow
   };
 };
 var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = function changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI) {
-  return function (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod) {
+  return function (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod, ariaNotify, getIntl) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo2 = (0, _utils2.getSelectedTableInfo)(state.selection),
         table = _getSelectedTableInfo2.table,
@@ -213,7 +213,13 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
           totalColumnCount: totalColumnCount
         }
       };
-    })(editorAnalyticsAPI)((0, _columnResize.changeColumnWidthByStep)(stepSize, getEditorContainerWidth, isTableScalingEnabled));
+    })(editorAnalyticsAPI)((0, _columnResize.changeColumnWidthByStep)({
+      stepSize: stepSize,
+      getEditorContainerWidth: getEditorContainerWidth,
+      isTableScalingEnabled: isTableScalingEnabled,
+      ariaNotify: ariaNotify,
+      getIntl: getIntl
+    }));
   };
 };
 var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function insertColumnWithAnalytics(editorAnalyticsAPI) {

package/dist/cjs/nodeviews/ExternalDropTargets.js

@@ -52,6 +52,7 @@ var ExternalDropTargets = exports.ExternalDropTargets = function ExternalDropTar
       width: getTableWrapperWidth(),
       overflow: 'hidden',
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: "-".concat(_consts.dropTargetExtendedWidth - _styles.tableMarginTop, "px"),
       pointerEvents: 'auto',
       zIndex: "".concat(_consts.dropTargetsZIndex)
@@ -61,6 +62,7 @@ var ExternalDropTargets = exports.ExternalDropTargets = function ExternalDropTar
     style: {
       display: 'flex',
       // move drop targets based on table wrapper scroll
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: "-".concat(getScrollOffset(), "px")
     }
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {

package/dist/cjs/nodeviews/TableComponent.js

@@ -35,7 +35,6 @@ var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
 var _types = require("../types");
-var _consts2 = require("../ui/consts");
 var _TableFloatingColumnControls = _interopRequireDefault(require("../ui/TableFloatingColumnControls"));
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
 var _utils5 = require("../utils");
@@ -748,7 +747,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         style: {
           visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled ? '1px' : '')
+          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
@@ -767,10 +766,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
-          height: _editorSharedStyles.MAX_BROWSER_SCROLLBAR_HEIGHT,
+          height: "var(--ds-space-250, 20px)",
+          // MAX_BROWSER_SCROLLBAR_HEIGHT
           display: 'none',
           // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-          width: isResizing ? '0px' : '100%'
+          width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         style: {
@@ -784,14 +784,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           position: 'absolute',
-          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts2.tableOverflowShadowWidthWide : _consts2.tableOverflowShadowWidth, "px") : '-2px'
+          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
+          : "var(--ds-space-100, 8px)" // tableOverflowShadowWidth
+          ) : "var(--ds-space-negative-025, -2px)"
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
         style: {
           visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled ? '1px' : '')
+          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,

package/dist/cjs/nodeviews/TableResizer.js

@@ -40,7 +40,7 @@ var handles = {
 };
 var handleStyles = {
   right: {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     right: '-14px',
     marginTop: "var(--ds-space-150, 12px)"
   }
@@ -297,6 +297,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
       return;
     }
+    setLocalTableWidth(newWidth);
     handleResizeStop({
       width: width,
       x: 0,

package/dist/cjs/plugin.js

@@ -176,14 +176,15 @@ var tablesPlugin = function tablesPlugin(_ref) {
       // plugin as it is currently swallowing backspace events inside tables
       {
         name: 'tableKeymap',
-        plugin: function plugin() {
-          var _ref6 = options || {},
-            dragAndDropEnabled = _ref6.dragAndDropEnabled,
-            _ref6$isTableScalingE = _ref6.isTableScalingEnabled,
-            isTableScalingEnabled = _ref6$isTableScalingE === void 0 ? false : _ref6$isTableScalingE,
-            _ref6$fullWidthEnable = _ref6.fullWidthEnabled,
-            fullWidthEnabled = _ref6$fullWidthEnable === void 0 ? false : _ref6$fullWidthEnable;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled);
+        plugin: function plugin(_ref6) {
+          var getIntl = _ref6.getIntl;
+          var _ref7 = options || {},
+            dragAndDropEnabled = _ref7.dragAndDropEnabled,
+            _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
+            isTableScalingEnabled = _ref7$isTableScalingE === void 0 ? false : _ref7$isTableScalingE,
+            _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
+            fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable;
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -193,12 +194,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
-          var _ref7 = options || {},
-            dragAndDropEnabled = _ref7.dragAndDropEnabled;
+          var _ref8 = options || {},
+            dragAndDropEnabled = _ref8.dragAndDropEnabled;
           return (0, _pmPlugins.tableEditing)({
-            reportFixedTable: function reportFixedTable(_ref8) {
-              var tr = _ref8.tr,
-                reason = _ref8.reason;
+            reportFixedTable: function reportFixedTable(_ref9) {
+              var tr = _ref9.tr,
+                reason = _ref9.reason;
               editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
                 action: _analytics.TABLE_ACTION.FIXED,
                 actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -214,48 +215,48 @@ var tablesPlugin = function tablesPlugin(_ref) {
         }
       }, {
         name: 'tableStickyHeaders',
-        plugin: function plugin(_ref9) {
-          var dispatch = _ref9.dispatch,
-            eventDispatcher = _ref9.eventDispatcher;
+        plugin: function plugin(_ref10) {
+          var dispatch = _ref10.dispatch,
+            eventDispatcher = _ref10.eventDispatcher;
           return options && options.tableOptions.stickyHeaders ? (0, _stickyHeaders.createPlugin)(dispatch, function () {
             return [];
           }) : undefined;
         }
       }, {
         name: 'tableDragAndDrop',
-        plugin: function plugin(_ref10) {
-          var dispatch = _ref10.dispatch;
+        plugin: function plugin(_ref11) {
+          var dispatch = _ref11.dispatch;
           return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _dragAndDrop.createPlugin)(dispatch, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref11) {
-          var dispatch = _ref11.dispatch;
+        plugin: function plugin(_ref12) {
+          var dispatch = _ref12.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref12) {
+        plugin: function plugin(_ref13) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent,
-            dispatch = _ref12.dispatch;
+          var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
+            dispatch = _ref13.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref13) {
+        plugin: function plugin(_ref14) {
           var _options$tableResizin;
-          var dispatch = _ref13.dispatch,
-            dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent;
+          var dispatch = _ref14.dispatch,
+            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
           return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref14) {
-          var dispatch = _ref14.dispatch,
-            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref15) {
+          var dispatch = _ref15.dispatch,
+            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
           return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') ? (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent) : undefined;
         }
       }, {
@@ -286,12 +287,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref15) {
-      var editorView = _ref15.editorView,
-        popupsMountPoint = _ref15.popupsMountPoint,
-        popupsBoundariesElement = _ref15.popupsBoundariesElement,
-        popupsScrollableElement = _ref15.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref16) {
+      var editorView = _ref16.editorView,
+        popupsMountPoint = _ref16.popupsMountPoint,
+        popupsBoundariesElement = _ref16.popupsBoundariesElement,
+        popupsScrollableElement = _ref16.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -305,30 +306,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: _stickyHeaders.pluginKey,
           dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref16) {
-          var resizingPluginState = _ref16.tableResizingPluginState,
-            stickyHeadersState = _ref16.stickyHeadersState,
-            tablePluginState = _ref16.tablePluginState,
-            tableWidthPluginState = _ref16.tableWidthPluginState,
-            dragAndDropState = _ref16.dragAndDropState;
+        render: function render(_ref17) {
+          var resizingPluginState = _ref17.tableResizingPluginState,
+            stickyHeadersState = _ref17.stickyHeadersState,
+            tablePluginState = _ref17.tablePluginState,
+            tableWidthPluginState = _ref17.tableWidthPluginState,
+            dragAndDropState = _ref17.dragAndDropState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref17 = tablePluginState,
-            tableNode = _ref17.tableNode,
-            tablePos = _ref17.tablePos,
-            targetCellPosition = _ref17.targetCellPosition,
-            isContextualMenuOpen = _ref17.isContextualMenuOpen,
-            layout = _ref17.layout,
-            tableRef = _ref17.tableRef,
-            pluginConfig = _ref17.pluginConfig,
-            insertColumnButtonIndex = _ref17.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref17.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref17.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref17.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref17.isDragAndDropEnabled,
-            tableWrapperTarget = _ref17.tableWrapperTarget;
+          var _ref18 = tablePluginState,
+            tableNode = _ref18.tableNode,
+            tablePos = _ref18.tablePos,
+            targetCellPosition = _ref18.targetCellPosition,
+            isContextualMenuOpen = _ref18.isContextualMenuOpen,
+            layout = _ref18.layout,
+            tableRef = _ref18.tableRef,
+            pluginConfig = _ref18.pluginConfig,
+            insertColumnButtonIndex = _ref18.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref18.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref18.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref18.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref18.isDragAndDropEnabled,
+            tableWrapperTarget = _ref18.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && (0, _utils2.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -409,8 +410,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref18) {
-        var formatMessage = _ref18.formatMessage;
+      quickInsert: function quickInsert(_ref19) {
+        var formatMessage = _ref19.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

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

@@ -28,11 +28,15 @@ var createTableWithAnalytics = function createTableWithAnalytics(isTableScalingE
   })(editorAnalyticsAPI)((0, _commands2.createTable)(isTableScalingEnabled, isFullWidthModeEnabled));
 };
 function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
+  var _pluginInjectionApi$a;
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isFullWidthEnabled = arguments.length > 4 ? arguments[4] : undefined;
+  var pluginInjectionApi = arguments.length > 5 ? arguments[5] : undefined;
+  var getIntl = arguments.length > 6 ? arguments[6] : undefined;
   var list = {};
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.nextCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI)(1), list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.previousCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI)(-1), list);
+  var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.nextCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.previousCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, (0, _commands.chainCommands)((0, _commandsWithAnalytics.deleteTableIfSelectedWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD), (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD)), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, _commands2.moveCursorBackward, list);
@@ -61,12 +65,26 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
     (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, _commandsWithAnalytics.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, _analytics.INPUT_METHOD.SHORTCUT), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _commandsWithAnalytics.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, _analytics.INPUT_METHOD.SHORTCUT), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.escape.common, (0, _columnResize.stopKeyboardColumnResizing)(), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.startColumnResizing.common, (0, _columnResize.initiateKeyboardColumnResizing)({
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _columnResize.activateNextResizeArea)({
+      direction: 1,
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _columnResize.activateNextResizeArea)({
+      direction: -1,
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, (0, _commandsWithAnalytics.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, _analytics.INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _commandsWithAnalytics.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, _analytics.INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.escape.common, (0, _columnResize.stopKeyboardColumnResizing)({
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
   }
   return (0, _keymap.keymap)(list);
 }

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

@@ -33,6 +33,7 @@ var _pluginKey = require("./plugin-key");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) {
+  var _accessibilityUtils;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     isTableHovered: false,
@@ -53,6 +54,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   var invalidTableIds = [];
   var editorViewRef = null;
+  var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_accessibilityUtils = pluginInjectionApi.accessibilityUtils) === null || _accessibilityUtils === void 0 ? void 0 : _accessibilityUtils.actions.ariaNotify;
   var getCurrentEditorState = function getCurrentEditorState() {
     var editorView = editorViewRef;
     if (!editorView) {
@@ -114,7 +116,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
             }
             var tableNode = (0, _utils3.findTable)(state.selection);
             if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
-              // when cursor leaves the table we need to stop column resizing
+              // when keyboard cursor leaves the table we need to stop column resizing
               var pluginPrevState = (0, _pluginFactory.getPluginState)(prevState);
               var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
               if (isStopKeyboardColumResizing) {
@@ -126,11 +128,17 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
                   // Add/delete row
                   tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
                     // Jump to another table
-                    (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+                    (0, _columnResize.stopKeyboardColumnResizing)({
+                      ariaNotify: ariaNotifyPlugin,
+                      getIntl: getIntl
+                    })(state, dispatch);
                   }
                 } else if (!tableNode) {
                   // selection outside of table
-                  (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+                  (0, _columnResize.stopKeyboardColumnResizing)({
+                    ariaNotify: ariaNotifyPlugin,
+                    getIntl: getIntl
+                  })(state, dispatch);
                 }
               }
             }
@@ -237,7 +245,10 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           var _getPluginState = (0, _pluginFactory.getPluginState)(state),
             isKeyboardResize = _getPluginState.isKeyboardResize;
           if (isKeyboardResize) {
-            (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+            (0, _columnResize.stopKeyboardColumnResizing)({
+              ariaNotify: ariaNotifyPlugin,
+              getIntl: getIntl
+            })(state, dispatch);
             return false;
           }
         }

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

@@ -129,7 +129,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch, view);
+          return (0, _columnResize.stopKeyboardColumnResizing)({})(state, dispatch, view);
         } else {
           return (0, _commands.stopResizing)()(state, dispatch);
         }
@@ -190,7 +190,9 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return (0, _columnResize.stopKeyboardColumnResizing)(tr)(state, dispatch, view);
+          return (0, _columnResize.stopKeyboardColumnResizing)({
+            originalTr: tr
+          })(state, dispatch, view);
         } else {
           return (0, _commands.stopResizing)(tr)(state, dispatch);
         }

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

@@ -164,8 +164,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       // 16px here because it's the size of drag handle button's large side
       width: isRow ? "var(--ds-space-200, 16px)" // 16px here because it's the size of drag handle button's large side
       : "calc(100% - ".concat(_consts.dragTableInsertColumnButtonSize, "px)"),
-      left: isRow ? '3px' : undefined,
-      bottom: isColumn ? '0' : undefined,
+      left: isRow ? "var(--ds-space-050, 4px)" : undefined,
+      bottom: isColumn ? "var(--ds-space-0, 0px)" : undefined,
       alignSelf: isColumn ? 'none' : 'center',
       zIndex: isColumn ? '-1' : 'auto'
     },

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

@@ -31,7 +31,9 @@ var DragPreview = exports.DragPreview = function DragPreview(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_DragInMotionIcon.DragInMotionIcon, {
     style: {
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: "".concat(marginLeft, "px"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: "".concat(marginTop, "px"),
       transform: transform
     }