@atlaskit/editor-plugin-table 7.16.19 → 7.17.1

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

@@ -87,8 +87,14 @@ const MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-const 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']];
-const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) => {
+const getGroupedDragMenuConfig = tableSortColumnDiscoverability => {
+  let groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down']];
+  const sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
+  tableSortColumnDiscoverability ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
+  return groupedDragMenuConfig;
+};
+const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnDiscoverability = false, selectionRect) => {
+  const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
   let menuCallback = {};
   dragMenuConfig.forEach(item => {
@@ -134,11 +140,14 @@ const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) =>
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? 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
+      jsx("span", {
         css: elementBeforeIconStyles
       }, 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 ? jsx("div", {
         css: shortcutStyle
       }, item.keymap) : undefined
@@ -179,7 +188,8 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   isTableScalingEnabled,
   tableDuplicateCellColouring,
   shouldUseIncreasedScalingPercent,
-  isTableFixedColumnWidthsOptionEnabled
+  isTableFixedColumnWidthsOptionEnabled,
+  tableSortColumnDiscoverability
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -207,11 +217,11 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnDiscoverability);
   const {
     menuItems,
     menuCallback
-  } = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect);
+  } = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnDiscoverability, selectionRect);
   const handleSubMenuRef = ref => {
     const parent = closestElement(editorView.dom, '.fabric-editor-popup-scroll-parent');
     if (!(parent && ref)) {
@@ -252,7 +262,9 @@ export const DragMenu = /*#__PURE__*/React.memo(({
       value: {
         name: 'background'
       },
-      elemBefore: 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
+      jsx("span", {
         css: elementBeforeIconStyles
       }, jsx(EditorBackgroundColorIcon, {
         label: formatMessage(messages.backgroundColor),
@@ -260,9 +272,12 @@ export const DragMenu = /*#__PURE__*/React.memo(({
       })),
       elemAfter: jsx("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: DropdownMenuSharedCssClassName.SUBMENU,
-        css: dragMenuBackgroundColorStyles
+        className: DropdownMenuSharedCssClassName.SUBMENU
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        ,
+        css: dragMenuBackgroundColorStyles(tableSortColumnDiscoverability)
       }, jsx("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         css: cellColourPreviewStyles(background)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
@@ -317,7 +332,9 @@ export const DragMenu = /*#__PURE__*/React.memo(({
       value: {
         name: 'header_column'
       },
-      elemAfter: 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
+      jsx("div", {
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-header-column",
@@ -330,7 +347,9 @@ export const DragMenu = /*#__PURE__*/React.memo(({
       value: {
         name: 'header_row'
       },
-      elemAfter: 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
+      jsx("div", {
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-header-row",
@@ -346,7 +365,9 @@ export const DragMenu = /*#__PURE__*/React.memo(({
       value: {
         name: 'row_numbers'
       },
-      elemAfter: 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
+      jsx("div", {
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-row-numbers",
@@ -457,7 +478,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     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/es2019/ui/FloatingDragMenu/index.js

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

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

@@ -2,26 +2,29 @@ import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 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 => 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: "var(--ds-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 = false) => css`
 	.${ClassName.DRAG_SUBMENU} {
 		border-radius: ${"var(--ds-border-radius, 3px)"};
 		background: ${"var(--ds-surface-overlay, white)"};
 		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
 		display: block;
 		position: absolute;
-		top: 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: ${"var(--ds-space-100, 8px)"};
 
@@ -50,17 +53,22 @@ 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/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -96,7 +96,9 @@ export default class NumberColumn extends Component {
       style: {
         // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-        borderLeft: isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : 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
     }, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {

package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -68,7 +68,7 @@ class RowControlsComponent extends Component {
             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
           }
         }, /*#__PURE__*/React.createElement("button", {

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -190,9 +190,13 @@ const DragControlsComponent = ({
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
       gridTemplateRows: heights,
-      gridTemplateColumns: isDragging ? `${dropTargetExtendedWidth}px 14px ${tableWidth}px` : '0px 14px 0px',
+      gridTemplateColumns: isDragging ?
+      // 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` : "var(--ds-space-negative-025, -2px)"
+      left: isDragging ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      `-${dropTargetExtendedWidth + 2}px` : "var(--ds-space-negative-025, -2px)"
     },
     onMouseMove: handleMouseMove,
     contentEditable: false

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

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { browser } from '@atlaskit/editor-common/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
@@ -70,6 +71,9 @@ export const TableFloatingControls = ({
       hoverCell(rowIndex, 0)(state, dispatch);
     }
   }, [editorView, tableActive]);
+  const {
+    featureFlagsState
+  } = useSharedPluginState(api, ['featureFlags']);
   if (!tableRef) {
     return null;
   }
@@ -95,7 +99,7 @@ export const TableFloatingControls = ({
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.drag-and-drop_wmv9t') && (getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) && (getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

package/dist/es2019/ui/common-styles.js

@@ -1001,7 +1001,7 @@ export const tableStyles = props => 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;
@@ -1010,6 +1010,8 @@ export const tableFullPageEditorStyles = css`
 		width: 100%;
 	}
 `;
+
+// 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/dist/es2019/ui/consts.js

@@ -67,6 +67,9 @@ export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 // table margins and padding. For example a guideline at 1800px and the view at 1860px wide, means the guidelines is visible
 // 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/dist/es2019/ui/ui-styles.js

@@ -15,9 +15,12 @@ const InsertLine = cssString => 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'
@@ -217,13 +220,26 @@ export const dragCornerControlButton = () => css`
 		position: relative;
 	}
 `;
-export const insertColumnButtonWrapper = () => css(InsertButton(), InsertButtonHover(), InsertLine(`
+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;
     left: 9px;
   `));
-export const insertRowButtonWrapper = () => css(InsertButton(), InsertButtonHover(), InsertLine(`
+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;
   `));
 export const columnControlsLineMarker = () => css`
@@ -310,19 +326,26 @@ const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
 };
 const columnHeaderButton = cssString => {
   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'
     }
-  }, cssString);
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  cssString);
 };
 const columnHeaderButtonSelected = () => css({
   color: `var(--ds-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
 });
 const getFloatingDotOverrides = () => {
@@ -540,6 +563,8 @@ 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}) {
@@ -674,22 +699,30 @@ export const resizeHandle = isDragAndDropEnabled => 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
 });
 const tableCellRowInsertLineStyles = css({
   content: "' '",
   position: 'absolute',
   left: "var(--ds-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: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`
 });
 

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

@@ -65,8 +65,11 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, tableSortColumnDiscoverability = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
+  const {
+    selection
+  } = editorView.state;
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -88,9 +91,6 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     icon: AddColRightIcon,
     keymap: addColumnAfter
   }];
-  const {
-    selection
-  } = editorView.state;
   const moveOptions = direction === 'row' ? [{
     label: 'up',
     icon: ArrowUpIcon,
@@ -129,7 +129,21 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     order: SortOrder.DESC,
     icon: HipchatChevronDoubleDownIcon
   }] : [];
-  return [...addOptions.map(({
+  const sortConfigs = [...sortOptions.map(({
+    label,
+    order,
+    icon
+  }) => ({
+    id: `sort_column_${order}`,
+    title: `Sort ${label}`,
+    disabled: hasMergedCellsInTable,
+    icon,
+    onClick: (state, dispatch) => {
+      sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
+      return true;
+    }
+  }))];
+  const restConfigs = [...addOptions.map(({
     label,
     offset,
     icon,
@@ -211,18 +225,8 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
       return false;
     },
     keymap: keymap && tooltip(keymap)
-  })), ...sortOptions.map(({
-    label,
-    order,
-    icon
-  }) => ({
-    id: `sort_column_${order}`,
-    title: `Sort ${label}`,
-    disabled: hasMergedCellsInTable,
-    icon,
-    onClick: (state, dispatch) => {
-      sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
-      return true;
-    }
-  }))].filter(Boolean);
+  }))];
+  let allConfigs = [...restConfigs];
+  tableSortColumnDiscoverability ? allConfigs.unshift(...sortConfigs) : allConfigs.push(...sortConfigs);
+  return allConfigs.filter(Boolean);
 };

package/dist/esm/nodeviews/ExternalDropTargets.js

@@ -44,10 +44,11 @@ export var ExternalDropTargets = function ExternalDropTargets(_ref) {
       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(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: "".concat(dropTargetsZIndex)
     },
     "data-testid": "table-floating-column-extended-drop-targets"

package/dist/esm/toolbar.js

@@ -146,6 +146,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     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: jsx("div", {
       css: shortcutStyle
     }, tooltip(addColumnAfter))
@@ -165,6 +166,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     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: jsx("div", {
       css: shortcutStyle
     }, tooltip(addRowAfter))
@@ -297,6 +299,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     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: jsx("div", {
       css: shortcutStyle
     }, tooltip(backspace))

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

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

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

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

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

@@ -45,7 +45,11 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   }
   var labelCellOptions = formatMessage(messages.cellOptions);
   var button = jsx("div", {
-    css: [tableFloatingCellButtonStyles(), isContextualMenuOpen && 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
+    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()]
   }, jsx(ToolbarButton
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {

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

@@ -3,14 +3,17 @@ import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
 export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
   return 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(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(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',
@@ -21,15 +24,19 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
       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(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'
     }
@@ -37,12 +44,15 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
 };
 export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
   return 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(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(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(N700, ")")
     }