@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

package/dist/cjs/plugin.js

@@ -92,7 +92,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: {
@@ -175,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',
@@ -192,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,
@@ -213,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;
         }
       }, {
@@ -285,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,
@@ -304,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, {
@@ -408,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/toolbar.js

@@ -22,7 +22,6 @@ var _utils3 = require("@atlaskit/editor-tables/utils");
 var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
@@ -65,7 +64,7 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  if (state.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -301,6 +300,7 @@ var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = fu
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
+      var _tableObject$node$att, _tableObject$node;
       var tableObject = (0, _utils3.findTable)(state.selection);
       var pluginState = (0, _pluginFactory.getPluginState)(state);
       var resizeState = _tableResizing.pluginKey.getState(state);
@@ -310,7 +310,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       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;
@@ -362,7 +363,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.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/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
     }

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

@@ -102,25 +102,29 @@ var FixedButton = exports.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.default.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: _editorSharedStyles.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: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON_FIXED
   }, children)), mountTo);

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

@@ -85,11 +85,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         return {
-          content: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
+          content: isDragAndDropEnabled ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_backgroundColor.default, {
             label: formatMessage(_messages.tableMessages.backgroundColor),
@@ -99,7 +99,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (0, _react2.jsx)("div", {
             css: (0, _styles2.cellColourPreviewStyles)(background),
-            className: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && (0, _react2.jsx)("div", {
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -131,7 +131,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _transforms.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.MergeCellsIcon, null)) : undefined
         }, {
@@ -140,7 +140,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.SplitCellIcon, null)) : undefined
         }];
@@ -154,14 +154,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined
       };
@@ -173,14 +173,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
+        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined
       };
@@ -208,7 +208,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.tableMessages.clearCells, {
@@ -234,7 +234,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeColumns, {
@@ -260,7 +260,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeRows, {
@@ -278,7 +278,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState8 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
         allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
           _getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
@@ -302,7 +302,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         allowColumnSorting = _this$props9.allowColumnSorting;
       var _getPluginState10 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState10.isDragAndDropEnabled;
-      if (allowColumnSorting && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowColumnSorting && !isDragAndDropEnabled) {
         var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(editorView.state.tr).length > 0;
         var warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(_messages.tableMessages.canNotSortTable),
@@ -520,7 +520,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         editorView = _this$props14.editorView;
       var _getPluginState14 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
-      var items = isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
@@ -543,7 +543,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
         boundariesElement: boundariesElement,
         offset: offset,
-        section: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.menu.group-items') ? {
+        section: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.menu.group-items') ? {
           hasSeparator: true
         } : undefined
       }));

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

@@ -210,8 +210,10 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
             style: {
               position: 'fixed',
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
               zIndex: _consts.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 ? _editorSharedStyles.akEditorTableNumberColumnWidth : 0)
             }
           }, button), mountTo);

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

@@ -448,20 +448,20 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
   if (!menuItems) {
     return null;
   }
-  if (allowBackgroundColor && (0, _platformFeatureFlags.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 ((0, _platformFeatureFlags.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 ((0, _platformFeatureFlags.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()]
     });