@atlaskit/editor-plugin-table 7.17.0 → 7.17.1

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[];
 };