@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

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

@@ -1,3 +1,4 @@
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
@@ -57,7 +58,10 @@ const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHan
   }
   return false;
 };
-export const initiateKeyboardColumnResizing = (state, dispatch, view) => {
+export const initiateKeyboardColumnResizing = ({
+  ariaNotify,
+  getIntl
+}) => (state, dispatch, view) => {
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
@@ -66,12 +70,19 @@ export const initiateKeyboardColumnResizing = (state, dispatch, view) => {
   } = state;
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const cell = findCellClosestToPos(selection.$from);
+  if (ariaNotify && getIntl) {
+    ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+  }
   if (selectionRect && cell && view) {
     return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
   }
   return false;
 };
-export const activateNextResizeArea = direction => (state, dispatch, view) => {
+export const activateNextResizeArea = ({
+  direction,
+  ariaNotify,
+  getIntl
+}) => (state, dispatch, view) => {
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
@@ -102,6 +113,18 @@ export const activateNextResizeArea = direction => (state, dispatch, view) => {
   }
   const currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
   const $nextCell = nextCell($currentCell, 'horiz', direction);
+  if (ariaNotify && getIntl) {
+    let columnDirection = '';
+    if (direction === 1) {
+      columnDirection = getIntl().formatMessage(messages.columnRightResize);
+    }
+    if (direction === -1) {
+      columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+    }
+    ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+      direction: columnDirection
+    }));
+  }
   if ($nextCell) {
     // we are somewhere in between the side columns of the table
     const offset = $nextCell.pos - $nextCell.start(-1);
@@ -121,7 +144,13 @@ export const activateNextResizeArea = direction => (state, dispatch, view) => {
   }
   return false;
 };
-export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, isTableScalingEnabled = false) => (state, dispatch, view) => {
+export const changeColumnWidthByStep = ({
+  stepSize,
+  getEditorContainerWidth,
+  isTableScalingEnabled,
+  ariaNotify,
+  getIntl
+}) => (state, dispatch, view) => {
   let customTr = state.tr;
   const fakeDispatch = tr => {
     customTr = tr;
@@ -183,9 +212,26 @@ export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, isTab
   if (dispatch) {
     dispatch(customTr);
   }
+  if (ariaNotify && getIntl) {
+    ariaNotify(getIntl().formatMessage(messages.changedColumnWidth, {
+      width: Math.floor(newResizeState.cols[colIndex].width)
+    }));
+    if (newResizeState.cols.length === colIndex + 1) {
+      if (newResizeState.overflow === true) {
+        ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+      }
+      if (newResizeState.overflow === false) {
+        ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+      }
+    }
+  }
   return true;
 };
-export const stopKeyboardColumnResizing = originalTr => (state, dispatch) => {
+export const stopKeyboardColumnResizing = ({
+  ariaNotify,
+  getIntl,
+  originalTr
+}) => (state, dispatch) => {
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
@@ -207,6 +253,9 @@ export const stopKeyboardColumnResizing = originalTr => (state, dispatch) => {
   tableResizingPluginCreateCommand({
     type: 'STOP_RESIZING'
   }, () => customTr.setMeta('scrollIntoView', false))(state, fakeDispatch);
+  if (ariaNotify && getIntl) {
+    ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+  }
   if (dispatch) {
     dispatch(customTr);
     return true;

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

@@ -10,7 +10,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
-export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch, view) => {
+export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => direction => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
@@ -19,7 +19,10 @@ export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch,
     var _getPluginState;
     const isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
     if (isColumnResizing) {
-      stopKeyboardColumnResizing()(state, dispatch, view);
+      stopKeyboardColumnResizing({
+        ariaNotify: ariaNotify,
+        getIntl: getIntl
+      })(state, dispatch, view);
       return true;
     }
   }

package/dist/es2019/commands/misc.js

@@ -1,3 +1,4 @@
+import isEqual from 'lodash/isEqual';
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -527,13 +528,16 @@ export const updateWidthToWidest = widthToWidest => createCommand(state => {
   let {
     widthToWidest: prevWidthToWidest
   } = getPluginState(state);
-  if (prevWidthToWidest === widthToWidest) {
+  if (isEqual(widthToWidest, prevWidthToWidest)) {
     return false;
   }
   return {
     type: 'UPDATE_TABLE_WIDTH_TO_WIDEST',
     data: {
-      widthToWidest
+      widthToWidest: {
+        ...prevWidthToWidest,
+        ...widthToWidest
+      }
     }
   };
 });

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

@@ -168,7 +168,7 @@ export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, option
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
-export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod) => withEditorAnalyticsAPI(state => {
+export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod, ariaNotify, getIntl) => withEditorAnalyticsAPI(state => {
   const {
     table,
     totalRowCount,
@@ -193,7 +193,13 @@ export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepS
       totalColumnCount
     }
   };
-})(editorAnalyticsAPI)(changeColumnWidthByStep(stepSize, getEditorContainerWidth, isTableScalingEnabled));
+})(editorAnalyticsAPI)(changeColumnWidthByStep({
+  stepSize: stepSize,
+  getEditorContainerWidth: getEditorContainerWidth,
+  isTableScalingEnabled: isTableScalingEnabled,
+  ariaNotify: ariaNotify,
+  getIntl: getIntl
+}));
 export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,

package/dist/es2019/nodeviews/ExternalDropTargets.js

@@ -41,6 +41,7 @@ export const ExternalDropTargets = ({
       width: getTableWrapperWidth(),
       overflow: 'hidden',
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
       pointerEvents: 'auto',
       zIndex: `${dropTargetsZIndex}`
@@ -50,6 +51,7 @@ export const ExternalDropTargets = ({
     style: {
       display: 'flex',
       // move drop targets based on table wrapper scroll
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: `-${getScrollOffset()}px`
     }
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map((width, index) => {

package/dist/es2019/nodeviews/TableComponent.js

@@ -7,7 +7,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
-import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -21,7 +21,6 @@ import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup
 import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
@@ -737,7 +736,7 @@ class TableComponent extends React.Component {
       style: {
         visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
         top: `${topStickyShadowPosition}px`,
-        paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`
+        paddingBottom: `${isDragAndDropEnabled && "var(--ds-space-025, 2px)"}`
       }
     }), /*#__PURE__*/React.createElement("div", {
       className: classnames(ClassName.TABLE_NODE_WRAPPER),
@@ -756,10 +755,11 @@ class TableComponent extends React.Component {
     }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
       style: {
-        height: 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.createElement("div", {
       style: {
@@ -773,14 +773,16 @@ class TableComponent extends React.Component {
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
-        right: getBooleanFF('platform.editor.custom-table-width') ? `${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px` : '-2px'
+        right: getBooleanFF('platform.editor.custom-table-width') ? `${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.createElement("div", {
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
       style: {
         visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
         top: `${topStickyShadowPosition}px`,
-        paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`
+        paddingBottom: `${isDragAndDropEnabled && "var(--ds-space-025, 2px)"}`
       }
     })), /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -29,7 +30,7 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
-    "data-test-id": "table-container"
+    "data-testid": "table-container"
   }, children);
 });
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
@@ -46,6 +47,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableWrapperHeight,
   isWholeTableInDanger
 }) => {
+  var _node$attrs$localId, _node$attrs;
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
@@ -102,9 +104,20 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const {
+    widthToWidest
+  } = tableState;
+  const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
+
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
-  const width = Math.min(tableWidth, responsiveContainerWidth);
+  let width = Math.min(tableWidth, responsiveContainerWidth);
+  if (isTableScalingEnabled && currentTableNodeLocalId && widthToWidest && widthToWidest[currentTableNodeLocalId]) {
+    width = TABLE_MAX_WIDTH;
+  }
   if (!isResizing) {
     tableWidthRef.current = width;
   }
@@ -122,7 +135,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     attachAnalyticsEvent,
     displayGapCursor,
     isTableScalingEnabled,
-    isWholeTableInDanger
+    isWholeTableInDanger,
+    pluginInjectionApi
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {

package/dist/es2019/nodeviews/TableResizer.js

@@ -4,17 +4,16 @@ import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateWidthToWidest } from '../commands/misc';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
@@ -27,7 +26,7 @@ const handles = {
 };
 const 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)"
   }
@@ -86,14 +85,22 @@ export const TableResizer = ({
   attachAnalyticsEvent,
   displayGapCursor,
   isTableScalingEnabled,
-  isWholeTableInDanger
+  isWholeTableInDanger,
+  pluginInjectionApi
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
   const areResizeMetaKeysPressed = useRef(false);
+  const [localTableWidth, setLocalTableWidth] = useState(width);
   const resizerRef = useRef(null);
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const {
+    widthToWidest
+  } = tableState;
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef();
@@ -181,7 +188,7 @@ export const TableResizer = ({
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
-    var _defaultGuidelinesFor, _defaultGuidelinesFor2;
+    var _node$attrs$localId, _node$attrs, _widestGuideline$posi;
     countFrames();
     const newWidth = originalState.width + delta.width;
     let pos;
@@ -208,15 +215,20 @@ export const TableResizer = ({
       state,
       dispatch
     } = editorView;
-    const widestGuideLineWidthString = (_defaultGuidelinesFor = defaultGuidelinesForPreserveTable(containerWidth)[16].key) === null || _defaultGuidelinesFor === void 0 ? void 0 : (_defaultGuidelinesFor2 = _defaultGuidelinesFor.match(/[\d]*[.]{0,1}[\d]+/g)) === null || _defaultGuidelinesFor2 === void 0 ? void 0 : _defaultGuidelinesFor2.join('');
-    const widestGuideLineWidth = parseInt(widestGuideLineWidthString || '', 10);
-    const shouldUpdateWidthToWidest = !!(isTableScalingEnabled && defaultGuidelinesForPreserveTable(containerWidth).length === 17 && widestGuideLineWidth - newWidth <= 1);
-    updateWidthToWidest(shouldUpdateWidthToWidest)(state, dispatch);
-    updateWidth(shouldUpdateWidthToWidest ? akEditorFullWidthLayoutWidth : newWidth);
+    const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
+    const widestGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(guideline => guideline.isFullWidth)[0];
+    const widestGuideLineWidth = widestGuideline ? (((_widestGuideline$posi = widestGuideline.position) === null || _widestGuideline$posi === void 0 ? void 0 : _widestGuideline$posi.x) || 0) * 2 : null;
+    const shouldUpdateWidthToWidest = !!(isTableScalingEnabled && widestGuideLineWidth && Math.abs(widestGuideLineWidth - newWidth) <= 1);
+    shouldUpdateWidthToWidest ? setLocalTableWidth(TABLE_MAX_WIDTH) : setLocalTableWidth(newWidth);
+    updateWidthToWidest({
+      [currentTableNodeLocalId]: shouldUpdateWidthToWidest
+    })(state, dispatch);
+    updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
   }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
+    var _node$attrs$localId2, _node$attrs2;
     isResizing.current = false;
     let newWidth = originalState.width + delta.width;
     const {
@@ -224,10 +236,8 @@ export const TableResizer = ({
       dispatch
     } = editorView;
     const pos = getPos();
-    const {
-      widthToWidest
-    } = getPluginState(editorView.state);
-    newWidth = widthToWidest ? akEditorFullWidthLayoutWidth : newWidth;
+    const currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
+    newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? TABLE_MAX_WIDTH : newWidth;
     let tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false
     });
@@ -273,7 +283,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -378,7 +388,7 @@ export const TableResizer = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,
-    width: width,
+    width: localTableWidth,
     handleAlignmentMethod: "sticky",
     handleSize: handleSize,
     handleStyles: handleStyles,

package/dist/es2019/plugin.js

@@ -84,7 +84,8 @@ const tablesPlugin = ({
         isWholeTableInDanger: tablePluginState.isWholeTableInDanger,
         // IMPORTANT: Need to continue to pass tableNode to control re-renders
         // TableComponent listens for node attribute changes to update colgroups
-        tableNode: tablePluginState.tableNode
+        tableNode: tablePluginState.tableNode,
+        widthToWidest: tablePluginState.widthToWidest
       };
     },
     actions: {
@@ -168,13 +169,15 @@ const tablesPlugin = ({
       // plugin as it is currently swallowing backspace events inside tables
       {
         name: 'tableKeymap',
-        plugin: () => {
+        plugin: ({
+          getIntl
+        }) => {
           const {
             dragAndDropEnabled,
             isTableScalingEnabled = false,
             fullWidthEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',

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

@@ -18,10 +18,12 @@ const createTableWithAnalytics = (isTableScalingEnabled, isFullWidthModeEnabled,
   },
   eventType: EVENT_TYPE.TRACK
 })(editorAnalyticsAPI)(createTable(isTableScalingEnabled, isFullWidthModeEnabled));
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isFullWidthEnabled) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl) {
+  var _pluginInjectionApi$a;
   const list = {};
-  bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
-  bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
+  const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
+  bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
+  bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
   bindKeymapWithCommand(toggleTable.common, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
@@ -50,12 +52,26 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing, list);
-    bindKeymapWithCommand(moveRight.common, activateNextResizeArea(1), list);
-    bindKeymapWithCommand(moveLeft.common, activateNextResizeArea(-1), list);
-    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT), list);
-    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT), list);
-    bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing(), list);
+    bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
+      direction: 1,
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
+      direction: -1,
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
   }
   return keymap(list);
 }

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

@@ -23,6 +23,7 @@ import { defaultHoveredCell, defaultTableSelection } from './default-table-selec
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) => {
+  var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
     isTableHovered: false,
@@ -44,6 +45,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds = [];
   let editorViewRef = null;
+  const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_accessibilityUtils = pluginInjectionApi.accessibilityUtils) === null || _accessibilityUtils === void 0 ? void 0 : _accessibilityUtils.actions.ariaNotify;
   const getCurrentEditorState = () => {
     const editorView = editorViewRef;
     if (!editorView) {
@@ -103,7 +105,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
             }
             const tableNode = findTable(state.selection);
             if (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
               const pluginPrevState = getPluginState(prevState);
               const isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
               if (isStopKeyboardColumResizing) {
@@ -115,11 +117,17 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
                   // Add/delete row
                   tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
                     // Jump to another table
-                    stopKeyboardColumnResizing()(state, dispatch);
+                    stopKeyboardColumnResizing({
+                      ariaNotify: ariaNotifyPlugin,
+                      getIntl: getIntl
+                    })(state, dispatch);
                   }
                 } else if (!tableNode) {
                   // selection outside of table
-                  stopKeyboardColumnResizing()(state, dispatch);
+                  stopKeyboardColumnResizing({
+                    ariaNotify: ariaNotifyPlugin,
+                    getIntl: getIntl
+                  })(state, dispatch);
                 }
               }
             }
@@ -235,7 +243,10 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
             isKeyboardResize
           } = getPluginState(state);
           if (isKeyboardResize) {
-            stopKeyboardColumnResizing()(state, dispatch);
+            stopKeyboardColumnResizing({
+              ariaNotify: ariaNotifyPlugin,
+              getIntl: getIntl
+            })(state, dispatch);
             return false;
           }
         }

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

@@ -132,7 +132,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing()(state, dispatch, view);
+          return stopKeyboardColumnResizing({})(state, dispatch, view);
         } else {
           return stopResizing()(state, dispatch);
         }
@@ -197,7 +197,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+          return stopKeyboardColumnResizing({
+            originalTr: tr
+          })(state, dispatch, view);
         } else {
           return stopResizing(tr)(state, dispatch);
         }

package/dist/es2019/toolbar.js

@@ -14,7 +14,6 @@ import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType,
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -54,7 +53,7 @@ export const getToolbarMenuConfig = (config, state, {
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  if (state.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -287,6 +286,7 @@ export const getClosestSelectionOrTableRect = state => {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
 export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) => config => (state, intl) => {
+  var _tableObject$node$att, _tableObject$node, _tableObject$node$att2;
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -298,7 +298,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     isTableScalingEnabled,
     widthToWidest
   } = pluginState;
-  if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+  const currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 ? void 0 : (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 ? void 0 : (_tableObject$node$att2 = _tableObject$node.attrs) === null || _tableObject$node$att2 === void 0 ? void 0 : _tableObject$node$att2.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
+  if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -351,7 +352,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
     let columnSettingsItems;
-    columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
+    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
     // Check if we need to show confirm dialog for delete button

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

@@ -156,8 +156,8 @@ const DragHandleComponent = ({
       // 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% - ${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'
     },