@atlaskit/editor-plugin-table 7.17.0 → 7.17.2

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) => (

package/src/ui/FloatingDragMenu/index.tsx

@@ -70,8 +70,11 @@ const FloatingDragMenu = ({
 		return null;
 	}
 
-	const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
-		getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+	const {
+		tableDuplicateCellColouring = false,
+		tableWithFixedColumnWidthsOption = false,
+		tableSortColumnDiscoverability = false,
+	} = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 	const shouldUseIncreasedScalingPercent =
 		isTableScalingEnabled &&
@@ -116,6 +119,7 @@ const FloatingDragMenu = ({
 				tableDuplicateCellColouring={tableDuplicateCellColouring}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
+				tableSortColumnDiscoverability={tableSortColumnDiscoverability}
 			/>
 		</Popup>
 	);

package/src/ui/FloatingDragMenu/styles.ts

@@ -5,29 +5,42 @@ import { N60A, N90 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
-import { dragMenuDropdownWidth } from '../consts';
+import {
+	dragMenuDropdownWidth,
+	TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT,
+	TABLE_DRAG_MENU_PADDING_TOP,
+	TABLE_DRAG_MENU_SORT_GROUP_HEIGHT,
+} from '../consts';
 
 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',
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export const dragMenuBackgroundColorStyles = css`
+export const dragMenuBackgroundColorStyles = (
+	tableSortColumnDiscoverability: 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: 0;
+		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
 		left: ${dragMenuDropdownWidth}px;
 		padding: ${token('space.100', '8px')};
 
@@ -57,17 +70,21 @@ export const dragMenuBackgroundColorStyles = css`
 	}
 `;
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const toggleStyles = css({
 	display: 'flex',
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	"input[type='checkbox']": {
 		width: '30px',
 		height: '14px',
 		pointerEvents: 'initial',
 		cursor: 'pointer',
 	},
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'> label': {
 		margin: '0px',
 		pointerEvents: 'none',
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 		'> span': {
 			pointerEvents: 'none',
 		},

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -40,6 +40,7 @@ export default class NumberColumn extends Component<Props, any> {
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 					marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
 					borderLeft:
+						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 						isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
 				}}
 				contentEditable={false}

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -79,7 +79,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
 									marginTop: `${marginTop}px`,
 									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 									top: thisRowSticky ? `${this.props.stickyTop! + 3}px` : undefined,
-									// 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
 									paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined,
 								}}
 							>

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -283,11 +283,13 @@ const DragControlsComponent = ({
 			style={{
 				gridTemplateRows: heights,
 				gridTemplateColumns: isDragging
-					? `${dropTargetExtendedWidth}px 14px ${tableWidth}px`
+					? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+						`${dropTargetExtendedWidth}px 14px ${tableWidth}px`
 					: '0px 14px 0px',
 				// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 				left: isDragging
-					? `-${dropTargetExtendedWidth + 2}px`
+					? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+						`-${dropTargetExtendedWidth + 2}px`
 					: token('space.negative.025', '-2px'),
 			}}
 			onMouseMove={handleMouseMove}

package/src/ui/common-styles.ts

@@ -1081,7 +1081,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 	${shadowSentinelStyles}
 `;
 
-// 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-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const tableFullPageEditorStyles = css`
 	.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
 		margin-left: 0;
@@ -1091,6 +1091,7 @@ export const tableFullPageEditorStyles = css`
 	}
 `;
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const tableCommentEditorStyles = css`
 	.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
 		margin-left: 0;

package/src/ui/consts.ts

@@ -94,6 +94,10 @@ export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 // BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
 export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 
+export const TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
+export const TABLE_DRAG_MENU_PADDING_TOP = 4;
+export const TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
+
 export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;

package/src/ui/ui-styles.ts

@@ -56,9 +56,12 @@ const InsertLine = (cssString?: string) => css`
 
 const Marker = () =>
 	css({
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		backgroundColor: tableBorderColor,
 		position: 'absolute',
+		// 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: `${lineMarkerSize}px`,
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		width: `${lineMarkerSize}px`,
 		borderRadius: '50%',
 		pointerEvents: 'none',
@@ -268,8 +271,11 @@ export const dragCornerControlButton = () => css`
 
 export const insertColumnButtonWrapper = () =>
 	css(
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		InsertButton(),
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		InsertButtonHover(),
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		InsertLine(
 			`
     width: 2px;
@@ -280,12 +286,16 @@ export const insertColumnButtonWrapper = () =>
 
 export const insertRowButtonWrapper = () =>
 	css(
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		InsertButton(),
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		InsertButtonHover(),
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		InsertLine(
 			`
     height: 2px;
     top: -11px;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     left: ${tableInsertColumnButtonSize - 1}px;
   `,
 		),
@@ -380,14 +390,17 @@ const overflowShadowWidhoutDnD = (isDragAndDropEnabled: boolean | undefined) =>
 const columnHeaderButton = (cssString?: string) => {
 	return css(
 		{
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 			background: tableHeaderCellBackgroundColor,
 			display: 'block',
 			boxSizing: 'border-box',
 			padding: 0,
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
 			':focus': {
 				outline: 'none',
 			},
 		},
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		cssString,
 	);
 };
@@ -395,8 +408,11 @@ const columnHeaderButton = (cssString?: string) => {
 const columnHeaderButtonSelected = () =>
 	css({
 		color: token('color.text.inverse', N0),
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		backgroundColor: tableToolbarSelectedColor,
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		borderColor: tableBorderSelectedColor,
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		zIndex: columnControlsSelectedZIndex,
 	});
 
@@ -623,6 +639,7 @@ export const hoveredCell = () => css`
 	}
 `;
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const hoveredWarningCell = css`
 	:not(.${ClassName.IS_RESIZING})
 		.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
@@ -761,8 +778,11 @@ export const resizeHandle = (isDragAndDropEnabled: boolean | undefined) => css`
 const tableCellColumnInsertLineStyles = css({
 	content: "' '",
 	position: 'absolute',
+	// 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: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 	width: `${insertLineWidth}px`,
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 	zIndex: columnControlsZIndex * 2,
 });
 
@@ -770,16 +790,21 @@ const tableCellRowInsertLineStyles = css({
 	content: "' '",
 	position: 'absolute',
 	left: token('space.negative.025', '-2px'),
+	// 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: `${insertLineWidth}px`,
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 	width: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 	zIndex: columnControlsZIndex * 2,
 });
 
 const insertLineActiveColor = css({
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 	backgroundColor: tableBorderSelectedColor,
 });
 
 const insertLineInactiveColor = css({
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 	backgroundColor: token('color.background.accent.gray.subtler', akEditorTableBorder),
 });
 

package/src/utils/drag-menu.ts

@@ -162,7 +162,9 @@ export const getDragMenuConfig = (
 	tableDuplicateCellColouring = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
+	tableSortColumnDiscoverability = false,
 ): DragMenuConfig[] => {
+	const { selection } = editorView.state;
 	const addOptions =
 		direction === 'row'
 			? [
@@ -193,8 +195,6 @@ export const getDragMenuConfig = (
 						keymap: addColumnAfter,
 					},
 				];
-
-	const { selection } = editorView.state;
 	const moveOptions =
 		direction === 'row'
 			? [
@@ -254,7 +254,25 @@ export const getDragMenuConfig = (
 					},
 				]
 			: [];
-	return [
+
+	const sortConfigs = [
+		...sortOptions.map(({ label, order, icon }) => ({
+			id: `sort_column_${order}`,
+			title: `Sort ${label}`,
+			disabled: hasMergedCellsInTable,
+			icon,
+			onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+				sortColumnWithAnalytics(editorAnalyticsAPI)(
+					INPUT_METHOD.TABLE_CONTEXT_MENU,
+					index ?? 0,
+					order,
+				)(state, dispatch);
+				return true;
+			},
+		})),
+	];
+
+	const restConfigs = [
 		...addOptions.map(({ label, offset, icon, keymap }) => ({
 			id: `add_${direction}_${label}`,
 			title: `Add ${direction} ${label}`,
@@ -373,20 +391,12 @@ export const getDragMenuConfig = (
 			},
 			keymap: keymap && tooltip(keymap),
 		})),
+	];
 
-		...sortOptions.map(({ label, order, icon }) => ({
-			id: `sort_column_${order}`,
-			title: `Sort ${label}`,
-			disabled: hasMergedCellsInTable,
-			icon,
-			onClick: (state: EditorState, dispatch?: CommandDispatch) => {
-				sortColumnWithAnalytics(editorAnalyticsAPI)(
-					INPUT_METHOD.TABLE_CONTEXT_MENU,
-					index ?? 0,
-					order,
-				)(state, dispatch);
-				return true;
-			},
-		})),
-	].filter(Boolean) as DragMenuConfig[];
+	let allConfigs = [...restConfigs];
+	tableSortColumnDiscoverability
+		? allConfigs.unshift(...sortConfigs)
+		: allConfigs.push(...sortConfigs);
+
+	return allConfigs.filter(Boolean) as DragMenuConfig[];
 };