@atlaskit/editor-plugin-table 7.17.0 → 7.17.1

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

@@ -74,6 +74,8 @@ 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 selection = editorView.state.selection;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -95,7 +97,6 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     icon: AddColRightIcon,
     keymap: addColumnAfter
   }];
-  var selection = editorView.state.selection;
   var moveOptions = direction === 'row' ? [{
     label: 'up',
     icon: ArrowUpIcon,
@@ -142,11 +143,26 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     order: SortOrder.DESC,
     icon: HipchatChevronDoubleDownIcon
   }] : [];
-  return [].concat(_toConsumableArray(addOptions.map(function (_ref) {
+  var sortConfigs = _toConsumableArray(sortOptions.map(function (_ref) {
     var label = _ref.label,
-      offset = _ref.offset,
-      icon = _ref.icon,
-      keymap = _ref.keymap;
+      order = _ref.order,
+      icon = _ref.icon;
+    return {
+      id: "sort_column_".concat(order),
+      title: "Sort ".concat(label),
+      disabled: hasMergedCellsInTable,
+      icon: icon,
+      onClick: function onClick(state, dispatch) {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
+        return true;
+      }
+    };
+  }));
+  var restConfigs = [].concat(_toConsumableArray(addOptions.map(function (_ref2) {
+    var label = _ref2.label,
+      offset = _ref2.offset,
+      icon = _ref2.icon,
+      keymap = _ref2.keymap;
     return {
       id: "add_".concat(direction, "_").concat(label),
       title: "Add ".concat(direction, " ").concat(label),
@@ -203,13 +219,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     },
     icon: RemoveIcon,
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
-  }], _toConsumableArray(moveOptions.map(function (_ref2) {
-    var label = _ref2.label,
-      canMove = _ref2.canMove,
-      icon = _ref2.icon,
-      keymap = _ref2.keymap,
-      getOriginIndexes = _ref2.getOriginIndexes,
-      getTargetIndex = _ref2.getTargetIndex;
+  }], _toConsumableArray(moveOptions.map(function (_ref3) {
+    var label = _ref3.label,
+      canMove = _ref3.canMove,
+      icon = _ref3.icon,
+      keymap = _ref3.keymap,
+      getOriginIndexes = _ref3.getOriginIndexes,
+      getTargetIndex = _ref3.getTargetIndex;
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
@@ -226,19 +242,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       },
       keymap: keymap && tooltip(keymap)
     };
-  })), _toConsumableArray(sortOptions.map(function (_ref3) {
-    var label = _ref3.label,
-      order = _ref3.order,
-      icon = _ref3.icon;
-    return {
-      id: "sort_column_".concat(order),
-      title: "Sort ".concat(label),
-      disabled: hasMergedCellsInTable,
-      icon: icon,
-      onClick: function onClick(state, dispatch) {
-        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
-        return true;
-      }
-    };
-  }))).filter(Boolean);
+  })));
+  var allConfigs = _toConsumableArray(restConfigs);
+  tableSortColumnDiscoverability ? allConfigs.unshift.apply(allConfigs, _toConsumableArray(sortConfigs)) : allConfigs.push.apply(allConfigs, _toConsumableArray(sortConfigs));
+  return allConfigs.filter(Boolean);
 };

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

@@ -28,8 +28,9 @@ type DragMenuProps = {
     tableDuplicateCellColouring?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isTableFixedColumnWidthsOptionEnabled?: boolean;
+    tableSortColumnDiscoverability?: 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, }: 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, tableSortColumnDiscoverability, }: 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: import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: (tableSortColumnDiscoverability?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/consts.d.ts

@@ -54,6 +54,9 @@ export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
+export declare const TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
+export declare const TABLE_DRAG_MENU_PADDING_TOP = 4;
+export declare const TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
 export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

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) => 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, tableSortColumnDiscoverability?: boolean) => DragMenuConfig[];

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

@@ -28,8 +28,9 @@ type DragMenuProps = {
     tableDuplicateCellColouring?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isTableFixedColumnWidthsOptionEnabled?: boolean;
+    tableSortColumnDiscoverability?: 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, }: 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, tableSortColumnDiscoverability, }: 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: import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: (tableSortColumnDiscoverability?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -54,6 +54,9 @@ export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
+export declare const TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
+export declare const TABLE_DRAG_MENU_PADDING_TOP = 4;
+export declare const TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
 export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

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) => 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, tableSortColumnDiscoverability?: boolean) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.17.0",
+  "version": "7.17.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/button": "^17.17.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^82.3.0",
+    "@atlaskit/editor-common": "^82.4.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",

package/src/nodeviews/ExternalDropTargets.tsx

@@ -53,10 +53,11 @@ export const ExternalDropTargets = ({
 				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: `-${dropTargetExtendedWidth - 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: `${dropTargetsZIndex}`,
 			}}
 			data-testid="table-floating-column-extended-drop-targets"

package/src/toolbar.tsx

@@ -224,6 +224,7 @@ export const getToolbarCellOptionsConfig = (
 			},
 			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: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
 		},
 		{
@@ -242,6 +243,7 @@ export const getToolbarCellOptionsConfig = (
 			},
 			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: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
 		},
 		{
@@ -414,6 +416,7 @@ export const getToolbarCellOptionsConfig = (
 		},
 		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: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
 	});
 

package/src/ui/DragHandle/index.tsx

@@ -199,11 +199,13 @@ const DragHandleComponent = ({
 				data-testid="table-drag-handle-clickable-zone-button"
 				style={{
 					height: isRow
-						? `calc(100% - ${dragTableInsertColumnButtonSize}px)`
+						? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+							`calc(100% - ${dragTableInsertColumnButtonSize}px)`
 						: `${token('space.200', '16px')}`, // 16px here because it's the size of drag handle button's large side
 					width: isRow
 						? `${token('space.200', '16px')}` // 16px here because it's the size of drag handle button's large side
-						: `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
+						: // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+							`calc(100% - ${dragTableInsertColumnButtonSize}px)`,
 					left: isRow ? `${token('space.050', '4px')}` : undefined,
 					bottom: isColumn ? `${token('space.0', '0px')}` : undefined,
 					alignSelf: isColumn ? 'none' : 'center',

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -160,7 +160,7 @@ export const FixedButton = ({
 					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: akEditorTableCellOnStickyHeaderZIndex,
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 					left: calcLeftPos({

package/src/ui/FloatingContextualButton/index.tsx

@@ -77,7 +77,9 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 	const button = (
 		<div
 			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
 				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 && tableFloatingCellButtonSelectedStyles(),
 			]}
 		>

package/src/ui/FloatingContextualButton/styles.ts

@@ -7,14 +7,17 @@ import { contextualMenuTriggerSize } from '../consts';
 
 export const tableFloatingCellButtonStyles = () =>
 	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: token('elevation.surface', N20),
 			borderRadius: token('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: `${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: token('color.background.neutral', 'none'),
 			flexDirection: 'column',
@@ -25,15 +28,19 @@ export const tableFloatingCellButtonStyles = () =>
 			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: token('color.background.neutral.hovered', 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: token('color.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 ${token('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',
 		},
@@ -41,12 +48,15 @@ export const tableFloatingCellButtonStyles = () =>
 
 export const tableFloatingCellButtonSelectedStyles = () =>
 	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: token('color.background.selected', 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: token('color.background.selected.hovered', 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: token('color.background.selected.pressed', N700),
 		},

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -169,6 +169,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					: formatMessage(messages.cellBackground),
 				value: { name: 'background' },
 				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
 					<span css={elementBeforeIconStyles}>
 						<EditorBackgroundColorIcon
 							label={formatMessage(messages.backgroundColor)}
@@ -180,6 +181,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 					<div className={DropdownMenuSharedCssClassName.SUBMENU}>
 						<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)}
 							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 							className={
@@ -228,6 +230,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					value: { name: 'merge' },
 					isDisabled: !canMergeCells(state.tr),
 					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
 						<span css={elementBeforeIconStyles}>
 							<MergeCellsIcon />
 						</span>
@@ -238,6 +241,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					value: { name: 'split' },
 					isDisabled: !splitCell(state),
 					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
 						<span css={elementBeforeIconStyles}>
 							<SplitCellIcon />
 						</span>
@@ -260,8 +264,10 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
 			),
 			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: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
 			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
 				<span css={elementBeforeIconStyles}>
 					<AddColRightIcon />
 				</span>
@@ -279,8 +285,10 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		return {
 			content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
 			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: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
 			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
 				<span css={elementBeforeIconStyles}>
 					<AddRowBelowIcon />
 				</span>
@@ -304,8 +312,10 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				0: Math.max(noOfColumns, noOfRows),
 			}),
 			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: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
 			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
 				<span css={elementBeforeIconStyles}>
 					<CrossCircleIcon
 						label={formatMessage(messages.clearCells, {
@@ -334,6 +344,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			}),
 			value: { name: 'delete_column' },
 			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
 				<span css={elementBeforeIconStyles}>
 					<RemoveIcon
 						label={formatMessage(messages.removeColumns, {
@@ -362,6 +373,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			}),
 			value: { name: 'delete_row' },
 			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
 				<span css={elementBeforeIconStyles}>
 					<RemoveIcon
 						label={formatMessage(messages.removeRows, {
@@ -447,7 +459,16 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 
 	private createOriginalContextMenuItems = () => {
 		let items: MenuItem[] = [];
+		const { getEditorFeatureFlags } = this.props;
+		const { tableSortColumnDiscoverability = false } = getEditorFeatureFlags
+			? getEditorFeatureFlags()
+			: {};
+		const sortColumnItems = this.createSortColumnItems();
 		const backgroundColorItem = this.createBackgroundColorItem();
+		const distributeColumnsItem = this.createDistributeColumnsItem();
+
+		tableSortColumnDiscoverability && sortColumnItems && items.push(...sortColumnItems);
+
 		backgroundColorItem && items.push(backgroundColorItem);
 
 		items.push(this.createInsertColumnItem());
@@ -460,11 +481,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 
 		items.push(...this.createMergeSplitCellItems());
 
-		const distributeColumnsItem = this.createDistributeColumnsItem();
 		distributeColumnsItem && items.push(distributeColumnsItem);
 
-		const sortColumnItems = this.createSortColumnItems();
-		sortColumnItems && items.push(...sortColumnItems);
+		!tableSortColumnDiscoverability && sortColumnItems && items.push(...sortColumnItems);
 
 		items.push(this.createClearCellsItem());
 

package/src/ui/FloatingContextualMenu/index.tsx

@@ -92,6 +92,7 @@ const FloatingContextualMenu = ({
 			offset={[-7, 0]}
 			stick={true}
 		>
+			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */}
 			<div css={tablePopupStyles(isDragAndDropEnabled)}>
 				<ContextualMenu
 					editorView={editorView}

package/src/ui/FloatingContextualMenu/styles.ts

@@ -10,10 +10,12 @@ import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../
 export const cellColourPreviewStyles = (selectedColor: string) =>
 	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
 export const elementBeforeIconStyles = css({
 	marginRight: token('space.negative.075', '-6px'),
 	display: 'flex',

package/src/ui/FloatingDeleteButton/index.tsx

@@ -323,13 +323,14 @@ class FloatingDeleteButton extends Component<Props, State> {
 							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: 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) -
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 								(this.props.isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0),
 						}}
 					>

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -95,6 +95,7 @@ type DragMenuProps = {
 	tableDuplicateCellColouring?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
 	isTableFixedColumnWidthsOptionEnabled?: boolean;
+	tableSortColumnDiscoverability?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -162,26 +163,35 @@ const MapDragMenuOptionIdToMessage: Record<DragMenuOptionIdType, MessageType> =
 	},
 };
 
-const groupedDragMenuConfig: DragMenuOptionIdType[][] = [
-	[
-		'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'],
-];
+const getGroupedDragMenuConfig = (tableSortColumnDiscoverability: boolean) => {
+	let groupedDragMenuConfig: DragMenuOptionIdType[][] = [
+		[
+			'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: DragMenuOptionIdType[] = ['sort_column_asc', 'sort_column_desc'];
+	tableSortColumnDiscoverability
+		? groupedDragMenuConfig.unshift(sortColumnItems)
+		: groupedDragMenuConfig.push(sortColumnItems);
+
+	return groupedDragMenuConfig;
+};
 
 const convertToDropdownItems = (
 	dragMenuConfig: DragMenuConfig[],
 	formatMessage: IntlShape['formatMessage'],
+	tableSortColumnDiscoverability: boolean = false,
 	selectionRect?: Rect,
 ) => {
+	const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
 	let menuItemsArr: MenuItem[][] = [...Array(groupedDragMenuConfig.length)].map(() => []);
 	let menuCallback: { [key: string]: Command } = {};
 	dragMenuConfig.forEach((item) => {
@@ -220,12 +230,14 @@ const convertToDropdownItems = (
 			value: { name: item.id },
 			isDisabled: item.disabled,
 			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
 				<span css={elementBeforeIconStyles}>
 					<item.icon
 						label={formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)}
 					/>
 				</span>
 			) : 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 ? <div css={shortcutStyle}>{item.keymap}</div> : undefined,
 		});
 		item.onClick && (menuCallback[item.id] = item.onClick);
@@ -265,6 +277,7 @@ export const DragMenu = React.memo(
 		tableDuplicateCellColouring,
 		shouldUseIncreasedScalingPercent,
 		isTableFixedColumnWidthsOptionEnabled,
+		tableSortColumnDiscoverability,
 	}: DragMenuProps & WrappedComponentProps) => {
 		const { state, dispatch } = editorView;
 		const { selection } = state;
@@ -307,11 +320,13 @@ export const DragMenu = React.memo(
 			tableDuplicateCellColouring,
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
+			tableSortColumnDiscoverability,
 		);
 
 		const { menuItems, menuCallback } = convertToDropdownItems(
 			dragMenuConfig,
 			formatMessage,
+			tableSortColumnDiscoverability,
 			selectionRect,
 		);
 
@@ -358,6 +373,7 @@ export const DragMenu = React.memo(
 				content: formatMessage(messages.backgroundColor),
 				value: { name: 'background' },
 				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
 					<span css={elementBeforeIconStyles}>
 						<EditorBackgroundColorIcon
 							label={formatMessage(messages.backgroundColor)}
@@ -369,9 +385,11 @@ export const DragMenu = React.memo(
 					<div
 						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 						className={DropdownMenuSharedCssClassName.SUBMENU}
-						css={dragMenuBackgroundColorStyles}
+						// 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)}
 					>
 						<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)}
 							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 							className={ClassName.DRAG_SUBMENU_ICON}
@@ -434,6 +452,7 @@ export const DragMenu = React.memo(
 						content: formatMessage(messages.headerColumn),
 						value: { name: 'header_column' },
 						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
 							<div css={toggleStyles}>
 								<Toggle
 									id="toggle-header-column"
@@ -448,6 +467,7 @@ export const DragMenu = React.memo(
 						content: formatMessage(messages.headerRow),
 						value: { name: 'header_row' },
 						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
 							<div css={toggleStyles}>
 								<Toggle
 									id="toggle-header-row"
@@ -465,6 +485,7 @@ export const DragMenu = React.memo(
 				content: formatMessage(messages.rowNumbers),
 				value: { name: 'row_numbers' },
 				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
 					<div css={toggleStyles}>
 						<Toggle
 							id="toggle-row-numbers"
@@ -592,7 +613,9 @@ export const DragMenu = React.memo(
 		}
 
 		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/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -84,7 +84,7 @@ export const DropdownMenu = ({
 				}}
 				targetRef={targetRefDiv}
 			>
-				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
+				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
 				<div style={{ height: 0, minWidth: dragMenuDropdownWidth }} />
 				<MenuGroup role="menu">
 					{items.map((group, index) => (