@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

package/dist/esm/plugin.js

@@ -85,7 +85,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
         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,14 +169,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 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 keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -185,12 +187,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
-          var _ref7 = options || {},
-            dragAndDropEnabled = _ref7.dragAndDropEnabled;
+          var _ref8 = options || {},
+            dragAndDropEnabled = _ref8.dragAndDropEnabled;
           return 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: TABLE_ACTION.FIXED,
                 actionSubject: ACTION_SUBJECT.TABLE,
@@ -206,48 +208,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 ? createStickyHeadersPlugin(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 ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref11) {
-          var dispatch = _ref11.dispatch;
+        plugin: function plugin(_ref12) {
+          var dispatch = _ref12.dispatch;
           return createTableLocalIdPlugin(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 ? createTableWidthPlugin(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 createTableOverflowAnalyticsPlugin(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 getBooleanFF('platform.editor.table.analytics-plugin-moved-event') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent) : undefined;
         }
       }, {
@@ -278,12 +280,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.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -297,30 +299,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        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 ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -401,8 +403,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.table),

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

@@ -21,11 +21,15 @@ var createTableWithAnalytics = function createTableWithAnalytics(isTableScalingE
   })(editorAnalyticsAPI)(createTable(isTableScalingEnabled, isFullWidthModeEnabled));
 };
 export 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 = {};
-  bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
-  bindKeymapWithCommand(previousCell.common, 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;
+  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);
@@ -54,12 +58,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/esm/pm-plugins/main.js

@@ -26,6 +26,7 @@ import { defaultHoveredCell, defaultTableSelection } from './default-table-selec
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) {
+  var _accessibilityUtils;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     isTableHovered: false,
@@ -46,6 +47,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
   // 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) {
@@ -107,7 +109,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
             }
             var 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
               var pluginPrevState = getPluginState(prevState);
               var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
               if (isStopKeyboardColumResizing) {
@@ -119,11 +121,17 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
                   // 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);
                 }
               }
             }
@@ -230,7 +238,10 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           var _getPluginState = getPluginState(state),
             isKeyboardResize = _getPluginState.isKeyboardResize;
           if (isKeyboardResize) {
-            stopKeyboardColumnResizing()(state, dispatch);
+            stopKeyboardColumnResizing({
+              ariaNotify: ariaNotifyPlugin,
+              getIntl: getIntl
+            })(state, dispatch);
             return false;
           }
         }

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

@@ -123,7 +123,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           /** 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);
         }
@@ -184,7 +184,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           /** 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/esm/toolbar.js

@@ -15,7 +15,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 var getToolbarMenuConfig = function 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',
@@ -290,6 +289,7 @@ export var getClosestSelectionOrTableRect = function getClosestSelectionOrTableR
 export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
+      var _tableObject$node$att, _tableObject$node;
       var tableObject = findTable(state.selection);
       var pluginState = getPluginState(state);
       var resizeState = tableResizingPluginKey.getState(state);
@@ -299,7 +299,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       var isTableScalingEnabled = pluginState.isTableScalingEnabled,
         widthToWidest = pluginState.widthToWidest;
-      if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+      var currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 || (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 || (_tableObject$node = _tableObject$node.attrs) === null || _tableObject$node === void 0 ? void 0 : _tableObject$node.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
+      if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         var nodeType = state.schema.nodes.table;
@@ -351,7 +352,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var 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) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button

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

@@ -154,8 +154,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(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/esm/ui/DragPreview/index.js

@@ -24,7 +24,9 @@ export var DragPreview = function DragPreview(_ref) {
   }, /*#__PURE__*/React.createElement(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
     }

package/dist/esm/ui/FloatingContextualButton/FixedButton.js

@@ -92,25 +92,29 @@ export var FixedButton = function FixedButton(_ref2) {
     ref: observerTargetRef,
     style: {
       position: 'absolute',
-      top: '0px',
-      left: '0px',
-      width: "".concat(BUTTON_WIDTH, "px"),
-      height: "".concat(BUTTON_WIDTH, "px")
+      top: "var(--ds-space-0, 0px)",
+      left: "var(--ds-space-0, 0px)",
+      width: "var(--ds-space-250, 20px)",
+      // BUTTON_WIDTH
+      height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: fixedButtonRef,
     style: {
       position: 'fixed',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: stickyHeader.top + stickyHeader.padding + offset * 2,
       zIndex: akEditorTableCellOnStickyHeaderZIndex,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: calcLeftPos({
         buttonWidth: BUTTON_WIDTH,
         cellRectLeft: targetCellRect.left,
         cellRefWidth: targetCellRef.clientWidth,
         offset: offset
       }),
-      width: "".concat(BUTTON_WIDTH, "px"),
-      height: "".concat(BUTTON_WIDTH, "px")
+      width: "var(--ds-space-250, 20px)",
+      // BUTTON_WIDTH
+      height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
     },
     className: ClassName.CONTEXTUAL_MENU_BUTTON_FIXED
   }, children)), mountTo);

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -80,11 +80,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         return {
-          content: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
+          content: isDragAndDropEnabled ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
@@ -94,7 +94,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
             css: cellColourPreviewStyles(background),
-            className: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -126,7 +126,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(MergeCellsIcon, null)) : undefined
         }, {
@@ -135,7 +135,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(SplitCellIcon, null)) : undefined
         }];
@@ -149,14 +149,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _getPluginState3 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumnRight : messages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddColRightIcon, null)) : undefined
       };
@@ -168,14 +168,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _getPluginState4 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRowBelow : messages.insertRow),
+        content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddRowBelowIcon, null)) : undefined
       };
@@ -203,7 +203,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
@@ -229,7 +229,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
@@ -255,7 +255,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
@@ -273,7 +273,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _getPluginState8 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
         allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         var _getPluginState9 = getPluginState(editorView.state),
           _getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
@@ -297,7 +297,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         allowColumnSorting = _this$props9.allowColumnSorting;
       var _getPluginState10 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState10.isDragAndDropEnabled;
-      if (allowColumnSorting && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowColumnSorting && !isDragAndDropEnabled) {
         var hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
         var warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
@@ -515,7 +515,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         editorView = _this$props14.editorView;
       var _getPluginState14 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
-      var items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       return jsx("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
@@ -538,7 +538,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
         boundariesElement: boundariesElement,
         offset: offset,
-        section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {
+        section: isDragAndDropEnabled && getBooleanFF('platform.editor.menu.group-items') ? {
           hasSeparator: true
         } : undefined
       }));

package/dist/esm/ui/FloatingDeleteButton/index.js

@@ -199,8 +199,10 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
             style: {
               position: 'fixed',
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
               zIndex: stickyRowZIndex,
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               left: rect.left + (pos.left || 0) - (this.state.selectionType === 'column' ? this.state.scrollLeft : 0) - (this.props.isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0)
             }
           }, button), mountTo);

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -437,20 +437,20 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   if (!menuItems) {
     return null;
   }
-  if (allowBackgroundColor && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+  if (allowBackgroundColor) {
     menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
-  if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
+  if (index === 0) {
     menuItems.push({
       items: [createHeaderRowColumnMenuItem(direction)]
     });
   }
 
   // All rows, add toggle for numbered rows, default is false
-  if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && direction === 'row') {
+  if (direction === 'row') {
     index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
       items: [createRowNumbersMenuItem()]
     });