@atlaskit/editor-plugin-table 7.17.0 → 7.17.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-table
 
+## 7.17.2
+
+### Patch Changes
+
+- [#110390](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110390)
+  [`bead123202369`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bead123202369) -
+  [ux] [ED-23642] Reordering the typeahead so that date, status, code block & info panel are above
+  the fold (in the top 5 results)
+- [#111045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111045)
+  [`2f693993423ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f693993423ec) -
+  improve input latency of drag and drop experience and hide drag handle during resizing
+- [#111428](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111428)
+  [`5679a3e527073`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5679a3e527073) -
+  ED-23129: Disabled internal column resizing for nested tables
+- [#111254](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111254)
+  [`c76f505dccf41`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c76f505dccf41) -
+  [ux] Fixed resizeAmount for left-aligned tables when internal column resizing is enabled.
+- Updated dependencies
+
+## 7.17.1
+
+### Patch Changes
+
+- [#109812](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109812)
+  [`b066a2c5e63b2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b066a2c5e63b2) -
+  ED-23599: Move sort column to top of drag menu when FF is on
+- Updated dependencies
+
 ## 7.17.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/ExternalDropTargets.js

@@ -54,10 +54,11 @@ var ExternalDropTargets = exports.ExternalDropTargets = function ExternalDropTar
       overflow: 'hidden',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'absolute',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       top: "-".concat(_consts.dropTargetExtendedWidth - _styles.tableMarginTop, "px"),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       pointerEvents: 'auto',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: "".concat(_consts.dropTargetsZIndex)
     },
     "data-testid": "table-floating-column-extended-drop-targets"

package/dist/cjs/nodeviews/TableResizer.js

@@ -216,6 +216,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       tableLocalId: node.attrs.localId,
       tableRef: tableRef
     });
+    tr.setMeta('is-resizer-resizing', true);
     tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
@@ -281,6 +282,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       tableLocalId: '',
       tableRef: null
     });
+    tr.setMeta('is-resizer-resizing', false);
     var frameRateSamples = endMeasure();
     if (frameRateSamples.length > 0) {
       var resizeFrameRatePayloads = (0, _analytics2.generateResizeFrameRatePayloads)({

package/dist/cjs/plugin.js

@@ -438,13 +438,14 @@ var tablesPlugin = function tablesPlugin(_ref) {
     },
     pluginsOptions: {
       quickInsert: function quickInsert(_ref19) {
+        var _options$getEditorFea3;
         var formatMessage = _ref19.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),
           description: formatMessage(_messages.toolbarInsertBlockMessages.tableDescription),
           keywords: ['cell', 'table'],
-          priority: 600,
+          priority: options !== null && options !== void 0 && (_options$getEditorFea3 = options.getEditorFeatureFlags) !== null && _options$getEditorFea3 !== void 0 && _options$getEditorFea3.call(options).platformEditorTypeaheadImprovedRelevancy ? 800 : 600,
           keyshortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
           icon: function icon() {
             return /*#__PURE__*/_react.default.createElement(_icons.IconTable, null);

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

@@ -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')) {
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') && !(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')) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') && !(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/utils/resize-column.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.resizeColumnAndTable = exports.resizeColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _types = require("../../../types");
+var _alignment = require("../../../utils/alignment");
 var _misc = require("./misc");
 var _resizeLogic = require("./resize-logic");
 var _resizeState = require("./resize-state");
@@ -36,7 +37,7 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
   var tableWidth = tableRef.clientWidth;
   var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
   var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-  var resizeAmount = amount * 2;
+  var resizeAmount = tableNode.attrs.layout === _alignment.ALIGN_START && !isOverflowed ? amount : amount * 2;
 
   // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
   // let scalePercent = 1;

package/dist/cjs/toolbar.js

@@ -155,6 +155,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     elemAfter: (0, _react.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
@@ -174,6 +175,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     elemAfter: (0, _react.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
@@ -306,6 +308,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     elemAfter: (0, _react.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.backspace))

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

@@ -162,10 +162,12 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     className: _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
     "data-testid": "table-drag-handle-clickable-zone-button",
     style: {
-      height: isRow ? "calc(100% - ".concat(_consts.dragTableInsertColumnButtonSize, "px)") : "var(--ds-space-200, 16px)",
+      height: isRow ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      "calc(100% - ".concat(_consts.dragTableInsertColumnButtonSize, "px)") : "var(--ds-space-200, 16px)",
       // 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)"),
+      : // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      "calc(100% - ".concat(_consts.dragTableInsertColumnButtonSize, "px)"),
       left: isRow ? "var(--ds-space-050, 4px)" : undefined,
       bottom: isColumn ? "var(--ds-space-0, 0px)" : undefined,
       alignSelf: isColumn ? 'none' : 'center',

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

@@ -120,7 +120,7 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
       position: 'fixed',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: stickyHeader.top + stickyHeader.padding + offset * 2,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: calcLeftPos({

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

@@ -53,7 +53,11 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   }
   var labelCellOptions = formatMessage(_messages.tableMessages.cellOptions);
   var button = (0, _react2.jsx)("div", {
-    css: [(0, _styles.tableFloatingCellButtonStyles)(), isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)()]
+    css: [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    (0, _styles.tableFloatingCellButtonStyles)(),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)()]
   }, (0, _react2.jsx)(_uiMenu.ToolbarButton
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {

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

@@ -9,14 +9,17 @@ var _colors = require("@atlaskit/theme/colors");
 var _consts = require("../consts");
 var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
   return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {
       // Sits behind button to provide surface-color background
       background: "var(--ds-surface, ".concat(_colors.N20, ")"),
       borderRadius: "var(--ds-border-radius, 3px)",
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
       flexDirection: 'column'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button': {
       background: "var(--ds-background-neutral, none)",
       flexDirection: 'column',
@@ -27,15 +30,19 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
       height: 'calc(100% - 4px)',
       display: 'flex'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:hover': {
       background: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:active': {
       background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button > span': {
       margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& span': {
       pointerEvents: 'none'
     }
@@ -43,12 +50,15 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
 };
 var tableFloatingCellButtonSelectedStyles = exports.tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
   return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button': {
       background: "var(--ds-background-selected, ".concat(_colors.N700, ")")
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:hover': {
       background: "var(--ds-background-selected-hovered, ".concat(_colors.N700, ")")
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:active': {
       background: "var(--ds-background-selected-pressed, ".concat(_colors.N700, ")")
     }

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

@@ -89,7 +89,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ?
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_backgroundColor.default, {
             label: formatMessage(_messages.tableMessages.backgroundColor),
@@ -100,6 +102,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           (0, _react2.jsx)("div", {
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (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)
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
@@ -136,7 +139,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _transforms.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ?
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.MergeCellsIcon, null)) : undefined
         }, {
@@ -145,7 +150,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ?
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.SplitCellIcon, null)) : undefined
         }];
@@ -163,10 +170,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'insert_column'
         },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined
       };
@@ -182,10 +192,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'insert_row'
         },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined
       };
@@ -210,10 +223,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'clear'
         },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.tableMessages.clearCells, {
@@ -239,7 +255,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeColumns, {
@@ -265,7 +283,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeRows, {
@@ -333,17 +353,22 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createOriginalContextMenuItems", function () {
       var items = [];
+      var getEditorFeatureFlags = _this.props.getEditorFeatureFlags;
+      var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
+        tableSortColumnDiscoverability = _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));
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(_this.createInsertColumnItem());
       items.push(_this.createInsertRowItem());
       items.push(_this.createDeleteColumnItem());
       items.push(_this.createDeleteRowItem());
       items.push.apply(items, (0, _toConsumableArray2.default)(_this.createMergeSplitCellItems()));
-      var distributeColumnsItem = _this.createDistributeColumnsItem();
       distributeColumnsItem && items.push(distributeColumnsItem);
-      var sortColumnItems = _this.createSortColumnItems();
-      sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
+      !tableSortColumnDiscoverability && sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
       items.push(_this.createClearCellsItem());
       return [{
         items: items
@@ -374,8 +399,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       items[1].items.push(deleteRowItem);
       return items;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref2) {
-      var item = _ref2.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref3) {
+      var item = _ref3.item;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
         selectionRect = _this$props10.selectionRect,
@@ -389,11 +414,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         targetCellPosition = _getPluginState11.targetCellPosition,
         _getPluginState11$isT = _getPluginState11.isTableScalingEnabled,
         isTableScalingEnabled = _getPluginState11$isT === void 0 ? false : _getPluginState11$isT;
-      var _ref3 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-        _ref3$tableDuplicateC = _ref3.tableDuplicateCellColouring,
-        tableDuplicateCellColouring = _ref3$tableDuplicateC === void 0 ? false : _ref3$tableDuplicateC,
-        _ref3$tableWithFixedC = _ref3.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _ref3$tableWithFixedC === void 0 ? false : _ref3$tableWithFixedC;
+      var _ref4 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref4$tableDuplicateC = _ref4.tableDuplicateCellColouring,
+        tableDuplicateCellColouring = _ref4$tableDuplicateC === void 0 ? false : _ref4$tableDuplicateC,
+        _ref4$tableWithFixedC = _ref4.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _ref4$tableWithFixedC === void 0 ? false : _ref4$tableWithFixedC;
       var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
@@ -468,8 +493,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         isSubmenuOpen: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref4) {
-      var item = _ref4.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref5) {
+      var item = _ref5.item;
       var _this$props12 = _this.props,
         _this$props12$editorV = _this$props12.editorView,
         state = _this$props12$editorV.state,
@@ -492,8 +517,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         (0, _commands.hoverMergedCells)()(state, dispatch);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref5) {
-      var item = _ref5.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref6) {
+      var item = _ref6.item;
       var _this$props$editorVie2 = _this.props.editorView,
         state = _this$props$editorVie2.state,
         dispatch = _this$props$editorVie2.dispatch;

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

@@ -15,10 +15,13 @@ var _templateObject;
 var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return (0, _react.css)({
     '&::before': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       background: selectedColor
     }
   });
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)({
   marginRight: "var(--ds-space-negative-075, -6px)",
   display: 'flex'

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

@@ -213,10 +213,12 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
               position: 'fixed',
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
-              // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+              // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
               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)
+              left: rect.left + (pos.left || 0) - (this.state.selectionType === 'column' ? this.state.scrollLeft : 0) - (
+              // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+              this.props.isNumberColumnEnabled ? _editorSharedStyles.akEditorTableNumberColumnWidth : 0)
             }
           }, button), mountTo);
         }

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

@@ -100,8 +100,16 @@ var MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-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'], ['sort_column_asc', 'sort_column_desc']];
-var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect) {
+var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumnDiscoverability) {
+  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);
+  return groupedDragMenuConfig;
+};
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage) {
+  var tableSortColumnDiscoverability = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var selectionRect = arguments.length > 3 ? arguments[3] : undefined;
+  var groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
   var menuItemsArr = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
@@ -149,11 +157,14 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? (0, _react2.jsx)("span", {
+      elemBefore: item.icon ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("span", {
         css: _styles2.elementBeforeIconStyles
       }, (0, _react2.jsx)(item.icon, {
         label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       elemAfter: item.keymap ? (0, _react2.jsx)("div", {
         css: _shortcut.shortcutStyle
       }, item.keymap) : undefined
@@ -194,7 +205,8 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     isTableScalingEnabled = _ref.isTableScalingEnabled,
     tableDuplicateCellColouring = _ref.tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
-    isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled;
+    isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled,
+    tableSortColumnDiscoverability = _ref.tableSortColumnDiscoverability;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -218,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);
-  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, 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, tableSortColumnDiscoverability);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnDiscoverability, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var handleSubMenuRef = function handleSubMenuRef(ref) {
@@ -257,7 +269,9 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
       value: {
         name: 'background'
       },
-      elemBefore: (0, _react2.jsx)("span", {
+      elemBefore:
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("span", {
         css: _styles2.elementBeforeIconStyles
       }, (0, _react2.jsx)(_backgroundColor.default, {
         label: formatMessage(_messages.tableMessages.backgroundColor),
@@ -265,9 +279,12 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
       })),
       elemAfter: (0, _react2.jsx)("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
-        css: _styles2.dragMenuBackgroundColorStyles
+        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)
       }, (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)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
@@ -322,7 +339,9 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
       value: {
         name: 'header_column'
       },
-      elemAfter: (0, _react2.jsx)("div", {
+      elemAfter:
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
         css: _styles2.toggleStyles
       }, (0, _react2.jsx)(_toggle.default, {
         id: "toggle-header-column",
@@ -335,7 +354,9 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
       value: {
         name: 'header_row'
       },
-      elemAfter: (0, _react2.jsx)("div", {
+      elemAfter:
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
         css: _styles2.toggleStyles
       }, (0, _react2.jsx)(_toggle.default, {
         id: "toggle-header-row",
@@ -351,7 +372,9 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
       value: {
         name: 'row_numbers'
       },
-      elemAfter: (0, _react2.jsx)("div", {
+      elemAfter:
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
         css: _styles2.toggleStyles
       }, (0, _react2.jsx)(_toggle.default, {
         id: "toggle-row-numbers",
@@ -457,7 +480,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     return null;
   }
   if (allowBackgroundColor) {
-    menuItems[0].items.unshift(createBackgroundColorMenuItem());
+    tableSortColumnDiscoverability ? 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

@@ -41,7 +41,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
     tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC,
     _ref2$tableWithFixedC = _ref2.tableWithFixedColumnWidthsOption,
-    tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC;
+    tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC,
+    _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
+    tableSortColumnDiscoverability = _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,
@@ -79,7 +81,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     isTableScalingEnabled: isTableScalingEnabled,
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-    isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption
+    isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
+    tableSortColumnDiscoverability: tableSortColumnDiscoverability
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';