@atlaskit/editor-plugin-table 7.17.2 → 7.17.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.17.4
+
+### Patch Changes
+
+- [#111851](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111851)
+  [`4aefbe38ee8e2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4aefbe38ee8e2) -
+  ED-23129: Updated experiment ID and corresponding editor FF
+
+## 7.17.3
+
+### Patch Changes
+
+- [#111381](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111381)
+  [`5ec7ab3d39035`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ec7ab3d39035) -
+  Replace the LD flag controlling new column resizing experience with statsig experiment
+
 ## 7.17.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -177,12 +177,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             fullWidthEnabled = _ref5.fullWidthEnabled,
             tableOptions = _ref5.tableOptions,
             getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
-            isTableScalingEnabled = _ref5.isTableScalingEnabled;
+            isTableScalingEnabled = _ref5.isTableScalingEnabled,
+            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled;
           var _pluginConfig = (0, _createPluginConfig.pluginConfig)(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled) : undefined;
         }
       }, {
         name: 'tableEditing',

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

@@ -18,7 +18,7 @@ var _tableAnalytics = require("../table-analytics");
 var _commands = require("./commands");
 var _pluginFactory2 = require("./plugin-factory");
 var _utils3 = require("./utils");
-var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) {
+var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled) {
   var state = view.state,
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
@@ -147,7 +147,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
         var resizedDelta = clientX - startX;
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') && !(0, _utils2.isTableNested)(state, tablePos)) {
+        if (isNewColumnResizingEnabled && !(0, _utils2.isTableNested)(state, tablePos)) {
           var newResizeState = (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
           tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
@@ -224,7 +224,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') && !(0, _utils2.isTableNested)(state, tablePos)) {
+    if (isNewColumnResizingEnabled && !(0, _utils2.isTableNested)(state, tablePos)) {
       (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
     } else {
       (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);

package/dist/cjs/pm-plugins/table-resizing/plugin.js

@@ -16,7 +16,7 @@ var _eventHandlers = require("./event-handlers");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 var _utils = require("./utils");
-function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled) {
+function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new _safePlugin.SafePlugin({
@@ -56,7 +56,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
             }
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI)) {
+            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return (0, _commands.setResizeHandlePos)(resizeHandlePos)(_state, _dispatch);

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

@@ -355,12 +355,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var items = [];
       var getEditorFeatureFlags = _this.props.getEditorFeatureFlags;
       var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-        _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
-        tableSortColumnDiscoverability = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
+        _ref2$tableSortColumn = _ref2.tableSortColumnReorder,
+        tableSortColumnReorder = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
       var sortColumnItems = _this.createSortColumnItems();
       var backgroundColorItem = _this.createBackgroundColorItem();
       var distributeColumnsItem = _this.createDistributeColumnsItem();
-      tableSortColumnDiscoverability && sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
+      tableSortColumnReorder && sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(_this.createInsertColumnItem());
       items.push(_this.createInsertRowItem());
@@ -368,7 +368,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       items.push(_this.createDeleteRowItem());
       items.push.apply(items, (0, _toConsumableArray2.default)(_this.createMergeSplitCellItems()));
       distributeColumnsItem && items.push(distributeColumnsItem);
-      !tableSortColumnDiscoverability && sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
+      !tableSortColumnReorder && sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
       items.push(_this.createClearCellsItem());
       return [{
         items: items

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

@@ -100,16 +100,16 @@ var MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumnDiscoverability) {
+var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumnReorder) {
   var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down']];
   var sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
-  tableSortColumnDiscoverability ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
+  tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage) {
-  var tableSortColumnDiscoverability = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var tableSortColumnReorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var selectionRect = arguments.length > 3 ? arguments[3] : undefined;
-  var groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
+  var groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
   var menuItemsArr = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
@@ -206,7 +206,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     tableDuplicateCellColouring = _ref.tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled,
-    tableSortColumnDiscoverability = _ref.tableSortColumnDiscoverability;
+    tableSortColumnReorder = _ref.tableSortColumnReorder;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -230,8 +230,8 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
   }
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnDiscoverability);
-  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnDiscoverability, selectionRect),
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var handleSubMenuRef = function handleSubMenuRef(ref) {
@@ -282,7 +282,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
         className: _styles.DropdownMenuSharedCssClassName.SUBMENU
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         ,
-        css: (0, _styles2.dragMenuBackgroundColorStyles)(tableSortColumnDiscoverability)
+        css: (0, _styles2.dragMenuBackgroundColorStyles)(tableSortColumnReorder)
       }, (0, _react2.jsx)("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         css: (0, _styles2.cellColourPreviewStyles)(background)
@@ -480,7 +480,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     return null;
   }
   if (allowBackgroundColor) {
-    tableSortColumnDiscoverability ? menuItems[1].items.unshift(createBackgroundColorMenuItem()) : menuItems[0].items.unshift(createBackgroundColorMenuItem());
+    tableSortColumnReorder ? menuItems[1].items.unshift(createBackgroundColorMenuItem()) : menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true

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

@@ -42,8 +42,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC,
     _ref2$tableWithFixedC = _ref2.tableWithFixedColumnWidthsOption,
     tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC,
-    _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
-    tableSortColumnDiscoverability = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
+    _ref2$tableSortColumn = _ref2.tableSortColumnReorder,
+    tableSortColumnReorder = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
@@ -82,7 +82,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
-    tableSortColumnDiscoverability: tableSortColumnDiscoverability
+    tableSortColumnReorder: tableSortColumnReorder
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -29,8 +29,8 @@ var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
-  var tableSortColumnDiscoverability = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), tableSortColumnDiscoverability ? _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+  var tableSortColumnReorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), tableSortColumnReorder ? _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766

package/dist/cjs/utils/drag-menu.js

@@ -81,7 +81,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   var tableDuplicateCellColouring = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
-  var tableSortColumnDiscoverability = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : false;
+  var tableSortColumnReorder = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : false;
   var selection = editorView.state.selection;
   var addOptions = direction === 'row' ? [{
     label: 'above',
@@ -251,6 +251,6 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     };
   })));
   var allConfigs = (0, _toConsumableArray2.default)(restConfigs);
-  tableSortColumnDiscoverability ? allConfigs.unshift.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs)) : allConfigs.push.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs));
+  tableSortColumnReorder ? allConfigs.unshift.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs)) : allConfigs.push.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs));
   return allConfigs.filter(Boolean);
 };

package/dist/es2019/plugin.js

@@ -169,14 +169,15 @@ const tablesPlugin = ({
             fullWidthEnabled,
             tableOptions,
             getEditorFeatureFlags,
-            isTableScalingEnabled
+            isTableScalingEnabled,
+            isNewColumnResizingEnabled
           } = options || {};
           const {
             allowColumnResizing
           } = pluginConfig(tableOptions);
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled) : undefined;
         }
       }, {
         name: 'tableEditing',

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

@@ -12,7 +12,7 @@ import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
-export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) => {
+export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled) => {
   const {
     state,
     dispatch
@@ -154,7 +154,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
         const resizedDelta = clientX - startX;
-        if (getBooleanFF('platform.editor.table.colum-resizing-improvements') && !isTableNested(state, tablePos)) {
+        if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
           const newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
           tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
@@ -237,7 +237,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    if (getBooleanFF('platform.editor.table.colum-resizing-improvements') && !isTableNested(state, tablePos)) {
+    if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
       resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
     } else {
       resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -10,7 +10,7 @@ import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
   lastColumnResizable = true
-}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled) {
+}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
@@ -54,7 +54,7 @@ export function createPlugin(dispatch, {
             }
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
               const {
                 state,
                 dispatch

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

@@ -386,12 +386,12 @@ export class ContextualMenu extends Component {
         getEditorFeatureFlags
       } = this.props;
       const {
-        tableSortColumnDiscoverability = false
+        tableSortColumnReorder = false
       } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
       const sortColumnItems = this.createSortColumnItems();
       const backgroundColorItem = this.createBackgroundColorItem();
       const distributeColumnsItem = this.createDistributeColumnsItem();
-      tableSortColumnDiscoverability && sortColumnItems && items.push(...sortColumnItems);
+      tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(this.createInsertColumnItem());
       items.push(this.createInsertRowItem());
@@ -399,7 +399,7 @@ export class ContextualMenu extends Component {
       items.push(this.createDeleteRowItem());
       items.push(...this.createMergeSplitCellItems());
       distributeColumnsItem && items.push(distributeColumnsItem);
-      !tableSortColumnDiscoverability && sortColumnItems && items.push(...sortColumnItems);
+      !tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
       items.push(this.createClearCellsItem());
       return [{
         items

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

@@ -87,14 +87,14 @@ const MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-const getGroupedDragMenuConfig = tableSortColumnDiscoverability => {
+const getGroupedDragMenuConfig = tableSortColumnReorder => {
   let groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down']];
   const sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
-  tableSortColumnDiscoverability ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
+  tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
-const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnDiscoverability = false, selectionRect) => {
-  const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
+const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnReorder = false, selectionRect) => {
+  const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
   let menuCallback = {};
   dragMenuConfig.forEach(item => {
@@ -189,7 +189,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   tableDuplicateCellColouring,
   shouldUseIncreasedScalingPercent,
   isTableFixedColumnWidthsOptionEnabled,
-  tableSortColumnDiscoverability
+  tableSortColumnReorder
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -217,11 +217,11 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnDiscoverability);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
   const {
     menuItems,
     menuCallback
-  } = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnDiscoverability, selectionRect);
+  } = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect);
   const handleSubMenuRef = ref => {
     const parent = closestElement(editorView.dom, '.fabric-editor-popup-scroll-parent');
     if (!(parent && ref)) {
@@ -275,7 +275,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
         className: DropdownMenuSharedCssClassName.SUBMENU
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         ,
-        css: dragMenuBackgroundColorStyles(tableSortColumnDiscoverability)
+        css: dragMenuBackgroundColorStyles(tableSortColumnReorder)
       }, jsx("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         css: cellColourPreviewStyles(background)
@@ -478,7 +478,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     return null;
   }
   if (allowBackgroundColor) {
-    tableSortColumnDiscoverability ? menuItems[1].items.unshift(createBackgroundColorMenuItem()) : menuItems[0].items.unshift(createBackgroundColorMenuItem());
+    tableSortColumnReorder ? menuItems[1].items.unshift(createBackgroundColorMenuItem()) : menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true

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

@@ -34,7 +34,7 @@ const FloatingDragMenu = ({
   const {
     tableDuplicateCellColouring = false,
     tableWithFixedColumnWidthsOption = false,
-    tableSortColumnDiscoverability = false
+    tableSortColumnReorder = false
   } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
   const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   return /*#__PURE__*/React.createElement(Popup, {
@@ -74,7 +74,7 @@ const FloatingDragMenu = ({
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
-    tableSortColumnDiscoverability: tableSortColumnDiscoverability
+    tableSortColumnReorder: tableSortColumnReorder
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingDragMenu/styles.js

@@ -17,14 +17,14 @@ export const elementBeforeIconStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export const dragMenuBackgroundColorStyles = (tableSortColumnDiscoverability = false) => css`
+export const dragMenuBackgroundColorStyles = (tableSortColumnReorder = false) => css`
 	.${ClassName.DRAG_SUBMENU} {
 		border-radius: ${"var(--ds-border-radius, 3px)"};
 		background: ${"var(--ds-surface-overlay, white)"};
 		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
 		display: block;
 		position: absolute;
-		top: ${tableSortColumnDiscoverability ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0}px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker
+		top: ${tableSortColumnReorder ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0}px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker
 		left: ${dragMenuDropdownWidth}px;
 		padding: ${"var(--ds-space-100, 8px)"};
 

package/dist/es2019/utils/drag-menu.js

@@ -65,7 +65,7 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, tableSortColumnDiscoverability = false) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, tableSortColumnReorder = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const {
     selection
@@ -227,6 +227,6 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     keymap: keymap && tooltip(keymap)
   }))];
   let allConfigs = [...restConfigs];
-  tableSortColumnDiscoverability ? allConfigs.unshift(...sortConfigs) : allConfigs.push(...sortConfigs);
+  tableSortColumnReorder ? allConfigs.unshift(...sortConfigs) : allConfigs.push(...sortConfigs);
   return allConfigs.filter(Boolean);
 };

package/dist/esm/plugin.js

@@ -170,12 +170,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             fullWidthEnabled = _ref5.fullWidthEnabled,
             tableOptions = _ref5.tableOptions,
             getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
-            isTableScalingEnabled = _ref5.isTableScalingEnabled;
+            isTableScalingEnabled = _ref5.isTableScalingEnabled,
+            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled;
           var _pluginConfig = pluginConfig(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled) : undefined;
         }
       }, {
         name: 'tableEditing',

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

@@ -12,7 +12,7 @@ import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
-export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) {
+export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled) {
   var state = view.state,
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
@@ -141,7 +141,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
         var resizedDelta = clientX - startX;
-        if (getBooleanFF('platform.editor.table.colum-resizing-improvements') && !isTableNested(state, tablePos)) {
+        if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
           var newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
           tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
@@ -218,7 +218,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    if (getBooleanFF('platform.editor.table.colum-resizing-improvements') && !isTableNested(state, tablePos)) {
+    if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
       resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
     } else {
       resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);

package/dist/esm/pm-plugins/table-resizing/plugin.js

@@ -9,7 +9,7 @@ import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
-export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled) {
+export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new SafePlugin({
@@ -49,7 +49,7 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
             }
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return setResizeHandlePos(resizeHandlePos)(_state, _dispatch);

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

@@ -350,12 +350,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var items = [];
       var getEditorFeatureFlags = _this.props.getEditorFeatureFlags;
       var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-        _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
-        tableSortColumnDiscoverability = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
+        _ref2$tableSortColumn = _ref2.tableSortColumnReorder,
+        tableSortColumnReorder = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
       var sortColumnItems = _this.createSortColumnItems();
       var backgroundColorItem = _this.createBackgroundColorItem();
       var distributeColumnsItem = _this.createDistributeColumnsItem();
-      tableSortColumnDiscoverability && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
+      tableSortColumnReorder && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(_this.createInsertColumnItem());
       items.push(_this.createInsertRowItem());
@@ -363,7 +363,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       items.push(_this.createDeleteRowItem());
       items.push.apply(items, _toConsumableArray(_this.createMergeSplitCellItems()));
       distributeColumnsItem && items.push(distributeColumnsItem);
-      !tableSortColumnDiscoverability && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
+      !tableSortColumnReorder && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
       items.push(_this.createClearCellsItem());
       return [{
         items: items

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

@@ -89,16 +89,16 @@ var MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumnDiscoverability) {
+var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumnReorder) {
   var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down']];
   var sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
-  tableSortColumnDiscoverability ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
+  tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage) {
-  var tableSortColumnDiscoverability = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var tableSortColumnReorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var selectionRect = arguments.length > 3 ? arguments[3] : undefined;
-  var groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
+  var groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
   var menuItemsArr = _toConsumableArray(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
@@ -195,7 +195,7 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     tableDuplicateCellColouring = _ref.tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled,
-    tableSortColumnDiscoverability = _ref.tableSortColumnDiscoverability;
+    tableSortColumnReorder = _ref.tableSortColumnReorder;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -219,8 +219,8 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnDiscoverability);
-  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnDiscoverability, selectionRect),
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var handleSubMenuRef = function handleSubMenuRef(ref) {
@@ -271,7 +271,7 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         className: DropdownMenuSharedCssClassName.SUBMENU
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         ,
-        css: dragMenuBackgroundColorStyles(tableSortColumnDiscoverability)
+        css: dragMenuBackgroundColorStyles(tableSortColumnReorder)
       }, jsx("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         css: cellColourPreviewStyles(background)
@@ -469,7 +469,7 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     return null;
   }
   if (allowBackgroundColor) {
-    tableSortColumnDiscoverability ? menuItems[1].items.unshift(createBackgroundColorMenuItem()) : menuItems[0].items.unshift(createBackgroundColorMenuItem());
+    tableSortColumnReorder ? menuItems[1].items.unshift(createBackgroundColorMenuItem()) : menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true

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

@@ -35,8 +35,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC,
     _ref2$tableWithFixedC = _ref2.tableWithFixedColumnWidthsOption,
     tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC,
-    _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
-    tableSortColumnDiscoverability = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
+    _ref2$tableSortColumn = _ref2.tableSortColumnReorder,
+    tableSortColumnReorder = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
@@ -75,7 +75,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
-    tableSortColumnDiscoverability: tableSortColumnDiscoverability
+    tableSortColumnReorder: tableSortColumnReorder
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -22,8 +22,8 @@ export var elementBeforeIconStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
-  var tableSortColumnDiscoverability = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), tableSortColumnDiscoverability ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  var tableSortColumnReorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), tableSortColumnReorder ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766

package/dist/esm/utils/drag-menu.js

@@ -74,7 +74,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   var tableDuplicateCellColouring = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
-  var tableSortColumnDiscoverability = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : false;
+  var tableSortColumnReorder = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : false;
   var selection = editorView.state.selection;
   var addOptions = direction === 'row' ? [{
     label: 'above',
@@ -244,6 +244,6 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     };
   })));
   var allConfigs = _toConsumableArray(restConfigs);
-  tableSortColumnDiscoverability ? allConfigs.unshift.apply(allConfigs, _toConsumableArray(sortConfigs)) : allConfigs.push.apply(allConfigs, _toConsumableArray(sortConfigs));
+  tableSortColumnReorder ? allConfigs.unshift.apply(allConfigs, _toConsumableArray(sortConfigs)) : allConfigs.push.apply(allConfigs, _toConsumableArray(sortConfigs));
   return allConfigs.filter(Boolean);
 };

package/dist/types/plugin.d.ts

@@ -20,6 +20,7 @@ export interface TablePluginOptions {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
+    isNewColumnResizingEnabled?: boolean;
 }
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 type MediaPlugin = NextEditorPlugin<'media', {

package/dist/types/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,4 +1,4 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => boolean;
+export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean) => boolean;

package/dist/types/pm-plugins/table-resizing/plugin.d.ts

@@ -3,4 +3,4 @@ import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { ColumnResizingPluginState } from '../../types';
-export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;
+export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;

package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts

@@ -28,9 +28,9 @@ type DragMenuProps = {
     tableDuplicateCellColouring?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isTableFixedColumnWidthsOptionEnabled?: boolean;
-    tableSortColumnDiscoverability?: boolean;
+    tableSortColumnReorder?: boolean;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, tableSortColumnDiscoverability, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, tableSortColumnReorder, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps>;
 };

package/dist/types/ui/FloatingDragMenu/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
 export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
-export declare const dragMenuBackgroundColorStyles: (tableSortColumnDiscoverability?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: (tableSortColumnReorder?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnDiscoverability?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean) => DragMenuConfig[];

package/dist/types-ts4.5/plugin.d.ts

@@ -20,6 +20,7 @@ export interface TablePluginOptions {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
+    isNewColumnResizingEnabled?: boolean;
 }
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 type MediaPlugin = NextEditorPlugin<'media', {

package/dist/types-ts4.5/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,4 +1,4 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => boolean;
+export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean) => boolean;

package/dist/types-ts4.5/pm-plugins/table-resizing/plugin.d.ts

@@ -3,4 +3,4 @@ import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { ColumnResizingPluginState } from '../../types';
-export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;
+export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -28,9 +28,9 @@ type DragMenuProps = {
     tableDuplicateCellColouring?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isTableFixedColumnWidthsOptionEnabled?: boolean;
-    tableSortColumnDiscoverability?: boolean;
+    tableSortColumnReorder?: boolean;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, tableSortColumnDiscoverability, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, tableSortColumnReorder, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps>;
 };

package/dist/types-ts4.5/ui/FloatingDragMenu/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
 export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
-export declare const dragMenuBackgroundColorStyles: (tableSortColumnDiscoverability?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: (tableSortColumnReorder?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnDiscoverability?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.17.2",
+	"version": "7.17.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -13,7 +13,10 @@
 	"types": "dist/types/index.d.ts",
 	"typesVersions": {
 		">=4.5 <4.9": {
-			"*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
 		}
 	},
 	"sideEffects": false,
@@ -28,7 +31,7 @@
 		"@atlaskit/adf-schema": "^36.10.7",
 		"@atlaskit/button": "^17.17.0",
 		"@atlaskit/custom-steps": "^0.2.0",
-		"@atlaskit/editor-common": "^82.6.0",
+		"@atlaskit/editor-common": "^82.8.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.2.0",
@@ -46,7 +49,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-		"@atlaskit/primitives": "^7.2.0",
+		"@atlaskit/primitives": "^7.3.0",
 		"@atlaskit/theme": "^12.9.0",
 		"@atlaskit/toggle": "^13.1.0",
 		"@atlaskit/tokens": "^1.50.0",
@@ -76,13 +79,21 @@
 	},
 	"techstack": {
 		"@atlassian/frontend": {
-			"import-structure": ["atlassian-conventions"],
-			"circular-dependencies": ["file-and-folder-level"]
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
 		},
 		"@repo/internal": {
-			"design-tokens": ["color"],
+			"design-tokens": [
+				"color"
+			],
 			"deprecation": "no-deprecated-imports",
-			"styling": ["emotion"]
+			"styling": [
+				"emotion"
+			]
 		}
 	},
 	"stricter": {
@@ -118,9 +129,6 @@
 		"platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33": {
 			"type": "boolean"
 		},
-		"platform.editor.table.colum-resizing-improvements": {
-			"type": "boolean"
-		},
 		"platform.editor.table.use-increased-scaling-percent": {
 			"type": "boolean"
 		},

package/src/plugin.tsx

@@ -94,6 +94,7 @@ export interface TablePluginOptions {
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
 	isTableScalingEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
+	isNewColumnResizingEnabled?: boolean;
 }
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -296,8 +297,13 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tablePMColResizing',
 					plugin: ({ dispatch }) => {
-						const { fullWidthEnabled, tableOptions, getEditorFeatureFlags, isTableScalingEnabled } =
-							options || ({} as TablePluginOptions);
+						const {
+							fullWidthEnabled,
+							tableOptions,
+							getEditorFeatureFlags,
+							isTableScalingEnabled,
+							isNewColumnResizingEnabled,
+						} = options || ({} as TablePluginOptions);
 						const { allowColumnResizing } = pluginConfig(tableOptions);
 						return allowColumnResizing
 							? createFlexiResizingPlugin(
@@ -309,6 +315,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
+									isNewColumnResizingEnabled,
 								)
 							: undefined;
 					},

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -41,6 +41,7 @@ export const handleMouseDown = (
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	isTableScalingEnabled: boolean,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
+	isNewColumnResizingEnabled?: boolean,
 ): boolean => {
 	const { state, dispatch } = view;
 	const editorDisabled = !view.editable;
@@ -192,10 +193,7 @@ export const handleMouseDown = (
 
 				const resizedDelta = clientX - startX;
 
-				if (
-					getBooleanFF('platform.editor.table.colum-resizing-improvements') &&
-					!isTableNested(state, tablePos)
-				) {
+				if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
 					const newResizeState = resizeColumnAndTable(
 						resizeState,
 						colIndex,
@@ -300,10 +298,7 @@ export const handleMouseDown = (
 			shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 		}
 
-		if (
-			getBooleanFF('platform.editor.table.colum-resizing-improvements') &&
-			!isTableNested(state, tablePos)
-		) {
+		if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
 			resizeColumnAndTable(
 				resizeState,
 				colIndex,

package/src/pm-plugins/table-resizing/plugin.ts

@@ -23,6 +23,7 @@ export function createPlugin(
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isTableScalingEnabled?: boolean,
+	isNewColumnResizingEnabled?: boolean,
 ) {
 	return new SafePlugin({
 		key: pluginKey,
@@ -75,6 +76,7 @@ export function createPlugin(
 								getEditorFeatureFlags,
 								isTableScalingEnabled || false,
 								editorAnalyticsAPI,
+								isNewColumnResizingEnabled,
 							)
 						) {
 							const { state, dispatch } = view;

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -460,14 +460,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 	private createOriginalContextMenuItems = () => {
 		let items: MenuItem[] = [];
 		const { getEditorFeatureFlags } = this.props;
-		const { tableSortColumnDiscoverability = false } = getEditorFeatureFlags
-			? getEditorFeatureFlags()
-			: {};
+		const { tableSortColumnReorder = false } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 		const sortColumnItems = this.createSortColumnItems();
 		const backgroundColorItem = this.createBackgroundColorItem();
 		const distributeColumnsItem = this.createDistributeColumnsItem();
 
-		tableSortColumnDiscoverability && sortColumnItems && items.push(...sortColumnItems);
+		tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
 
 		backgroundColorItem && items.push(backgroundColorItem);
 
@@ -483,7 +481,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 
 		distributeColumnsItem && items.push(distributeColumnsItem);
 
-		!tableSortColumnDiscoverability && sortColumnItems && items.push(...sortColumnItems);
+		!tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
 
 		items.push(this.createClearCellsItem());
 

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -95,7 +95,7 @@ type DragMenuProps = {
 	tableDuplicateCellColouring?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
 	isTableFixedColumnWidthsOptionEnabled?: boolean;
-	tableSortColumnDiscoverability?: boolean;
+	tableSortColumnReorder?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -163,7 +163,7 @@ const MapDragMenuOptionIdToMessage: Record<DragMenuOptionIdType, MessageType> =
 	},
 };
 
-const getGroupedDragMenuConfig = (tableSortColumnDiscoverability: boolean) => {
+const getGroupedDragMenuConfig = (tableSortColumnReorder: boolean) => {
 	let groupedDragMenuConfig: DragMenuOptionIdType[][] = [
 		[
 			'add_row_above',
@@ -178,7 +178,7 @@ const getGroupedDragMenuConfig = (tableSortColumnDiscoverability: boolean) => {
 		['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'],
 	];
 	const sortColumnItems: DragMenuOptionIdType[] = ['sort_column_asc', 'sort_column_desc'];
-	tableSortColumnDiscoverability
+	tableSortColumnReorder
 		? groupedDragMenuConfig.unshift(sortColumnItems)
 		: groupedDragMenuConfig.push(sortColumnItems);
 
@@ -188,10 +188,10 @@ const getGroupedDragMenuConfig = (tableSortColumnDiscoverability: boolean) => {
 const convertToDropdownItems = (
 	dragMenuConfig: DragMenuConfig[],
 	formatMessage: IntlShape['formatMessage'],
-	tableSortColumnDiscoverability: boolean = false,
+	tableSortColumnReorder: boolean = false,
 	selectionRect?: Rect,
 ) => {
-	const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
+	const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
 	let menuItemsArr: MenuItem[][] = [...Array(groupedDragMenuConfig.length)].map(() => []);
 	let menuCallback: { [key: string]: Command } = {};
 	dragMenuConfig.forEach((item) => {
@@ -277,7 +277,7 @@ export const DragMenu = React.memo(
 		tableDuplicateCellColouring,
 		shouldUseIncreasedScalingPercent,
 		isTableFixedColumnWidthsOptionEnabled,
-		tableSortColumnDiscoverability,
+		tableSortColumnReorder,
 	}: DragMenuProps & WrappedComponentProps) => {
 		const { state, dispatch } = editorView;
 		const { selection } = state;
@@ -320,13 +320,13 @@ export const DragMenu = React.memo(
 			tableDuplicateCellColouring,
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
-			tableSortColumnDiscoverability,
+			tableSortColumnReorder,
 		);
 
 		const { menuItems, menuCallback } = convertToDropdownItems(
 			dragMenuConfig,
 			formatMessage,
-			tableSortColumnDiscoverability,
+			tableSortColumnReorder,
 			selectionRect,
 		);
 
@@ -386,7 +386,7 @@ export const DragMenu = React.memo(
 						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 						className={DropdownMenuSharedCssClassName.SUBMENU}
 						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-						css={dragMenuBackgroundColorStyles(tableSortColumnDiscoverability)}
+						css={dragMenuBackgroundColorStyles(tableSortColumnReorder)}
 					>
 						<div
 							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
@@ -613,7 +613,7 @@ export const DragMenu = React.memo(
 		}
 
 		if (allowBackgroundColor) {
-			tableSortColumnDiscoverability
+			tableSortColumnReorder
 				? menuItems[1].items.unshift(createBackgroundColorMenuItem())
 				: menuItems[0].items.unshift(createBackgroundColorMenuItem());
 		}

package/src/ui/FloatingDragMenu/index.tsx

@@ -73,7 +73,7 @@ const FloatingDragMenu = ({
 	const {
 		tableDuplicateCellColouring = false,
 		tableWithFixedColumnWidthsOption = false,
-		tableSortColumnDiscoverability = false,
+		tableSortColumnReorder = false,
 	} = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 	const shouldUseIncreasedScalingPercent =
@@ -119,7 +119,7 @@ const FloatingDragMenu = ({
 				tableDuplicateCellColouring={tableDuplicateCellColouring}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
-				tableSortColumnDiscoverability={tableSortColumnDiscoverability}
+				tableSortColumnReorder={tableSortColumnReorder}
 			/>
 		</Popup>
 	);

package/src/ui/FloatingDragMenu/styles.ts

@@ -27,16 +27,14 @@ export const elementBeforeIconStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export const dragMenuBackgroundColorStyles = (
-	tableSortColumnDiscoverability: boolean = false,
-) => css`
+export const dragMenuBackgroundColorStyles = (tableSortColumnReorder: boolean = false) => css`
 	.${ClassName.DRAG_SUBMENU} {
 		border-radius: ${token('border.radius', '3px')};
 		background: ${token('elevation.surface.overlay', 'white')};
 		box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
 		display: block;
 		position: absolute;
-		top: ${tableSortColumnDiscoverability
+		top: ${tableSortColumnReorder
 			? TABLE_DRAG_MENU_PADDING_TOP +
 				TABLE_DRAG_MENU_SORT_GROUP_HEIGHT +
 				TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT

package/src/utils/drag-menu.ts

@@ -162,7 +162,7 @@ export const getDragMenuConfig = (
 	tableDuplicateCellColouring = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
-	tableSortColumnDiscoverability = false,
+	tableSortColumnReorder = false,
 ): DragMenuConfig[] => {
 	const { selection } = editorView.state;
 	const addOptions =
@@ -394,9 +394,7 @@ export const getDragMenuConfig = (
 	];
 
 	let allConfigs = [...restConfigs];
-	tableSortColumnDiscoverability
-		? allConfigs.unshift(...sortConfigs)
-		: allConfigs.push(...sortConfigs);
+	tableSortColumnReorder ? allConfigs.unshift(...sortConfigs) : allConfigs.push(...sortConfigs);
 
 	return allConfigs.filter(Boolean) as DragMenuConfig[];
 };