@atlaskit/editor-plugin-table 7.17.0 → 7.17.1

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

@@ -84,7 +84,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ?
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
@@ -95,6 +97,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, 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
             ,
@@ -131,7 +134,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ?
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(MergeCellsIcon, null)) : undefined
         }, {
@@ -140,7 +145,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ?
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(SplitCellIcon, null)) : undefined
         }];
@@ -158,10 +165,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_column'
         },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddColRightIcon, null)) : undefined
       };
@@ -177,10 +187,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_row'
         },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddRowBelowIcon, null)) : undefined
       };
@@ -205,10 +218,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'clear'
         },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
@@ -234,7 +250,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
@@ -260,7 +278,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ?
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
@@ -328,17 +348,22 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "createOriginalContextMenuItems", function () {
       var items = [];
+      var getEditorFeatureFlags = _this.props.getEditorFeatureFlags;
+      var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
+        tableSortColumnDiscoverability = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
+      var sortColumnItems = _this.createSortColumnItems();
       var backgroundColorItem = _this.createBackgroundColorItem();
+      var distributeColumnsItem = _this.createDistributeColumnsItem();
+      tableSortColumnDiscoverability && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(_this.createInsertColumnItem());
       items.push(_this.createInsertRowItem());
       items.push(_this.createDeleteColumnItem());
       items.push(_this.createDeleteRowItem());
       items.push.apply(items, _toConsumableArray(_this.createMergeSplitCellItems()));
-      var distributeColumnsItem = _this.createDistributeColumnsItem();
       distributeColumnsItem && items.push(distributeColumnsItem);
-      var sortColumnItems = _this.createSortColumnItems();
-      sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
+      !tableSortColumnDiscoverability && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
       items.push(_this.createClearCellsItem());
       return [{
         items: items
@@ -369,8 +394,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       items[1].items.push(deleteRowItem);
       return items;
     });
-    _defineProperty(_assertThisInitialized(_this), "onMenuItemActivated", function (_ref2) {
-      var item = _ref2.item;
+    _defineProperty(_assertThisInitialized(_this), "onMenuItemActivated", function (_ref3) {
+      var item = _ref3.item;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
         selectionRect = _this$props10.selectionRect,
@@ -384,11 +409,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         targetCellPosition = _getPluginState11.targetCellPosition,
         _getPluginState11$isT = _getPluginState11.isTableScalingEnabled,
         isTableScalingEnabled = _getPluginState11$isT === void 0 ? false : _getPluginState11$isT;
-      var _ref3 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-        _ref3$tableDuplicateC = _ref3.tableDuplicateCellColouring,
-        tableDuplicateCellColouring = _ref3$tableDuplicateC === void 0 ? false : _ref3$tableDuplicateC,
-        _ref3$tableWithFixedC = _ref3.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _ref3$tableWithFixedC === void 0 ? false : _ref3$tableWithFixedC;
+      var _ref4 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref4$tableDuplicateC = _ref4.tableDuplicateCellColouring,
+        tableDuplicateCellColouring = _ref4$tableDuplicateC === void 0 ? false : _ref4$tableDuplicateC,
+        _ref4$tableWithFixedC = _ref4.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _ref4$tableWithFixedC === void 0 ? false : _ref4$tableWithFixedC;
       var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
@@ -463,8 +488,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         isSubmenuOpen: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref4) {
-      var item = _ref4.item;
+    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref5) {
+      var item = _ref5.item;
       var _this$props12 = _this.props,
         _this$props12$editorV = _this$props12.editorView,
         state = _this$props12$editorV.state,
@@ -487,8 +512,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         hoverMergedCells()(state, dispatch);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function (_ref5) {
-      var item = _ref5.item;
+    _defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function (_ref6) {
+      var item = _ref6.item;
       var _this$props$editorVie2 = _this.props.editorView,
         state = _this$props$editorVie2.state,
         dispatch = _this$props$editorVie2.dispatch;

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

@@ -8,10 +8,13 @@ import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return 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 var elementBeforeIconStyles = css({
   marginRight: "var(--ds-space-negative-075, -6px)",
   display: 'flex'

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

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

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

@@ -89,8 +89,16 @@ var MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
-var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect) {
+var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumnDiscoverability) {
+  var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down']];
+  var sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
+  tableSortColumnDiscoverability ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
+  return groupedDragMenuConfig;
+};
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage) {
+  var tableSortColumnDiscoverability = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var selectionRect = arguments.length > 3 ? arguments[3] : undefined;
+  var groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnDiscoverability);
   var menuItemsArr = _toConsumableArray(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
@@ -138,11 +146,14 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         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
@@ -183,7 +194,8 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     isTableScalingEnabled = _ref.isTableScalingEnabled,
     tableDuplicateCellColouring = _ref.tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
-    isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled;
+    isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled,
+    tableSortColumnDiscoverability = _ref.tableSortColumnDiscoverability;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -207,8 +219,8 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
-  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnDiscoverability);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnDiscoverability, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var handleSubMenuRef = function handleSubMenuRef(ref) {
@@ -246,7 +258,9 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       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),
@@ -254,9 +268,12 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       })),
       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
         ,
@@ -311,7 +328,9 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       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",
@@ -324,7 +343,9 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       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",
@@ -340,7 +361,9 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       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",
@@ -446,7 +469,7 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     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/esm/ui/FloatingDragMenu/index.js

@@ -34,7 +34,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
     tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC,
     _ref2$tableWithFixedC = _ref2.tableWithFixedColumnWidthsOption,
-    tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC;
+    tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC,
+    _ref2$tableSortColumn = _ref2.tableSortColumnDiscoverability,
+    tableSortColumnDiscoverability = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
@@ -72,7 +74,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     isTableScalingEnabled: isTableScalingEnabled,
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-    isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption
+    isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
+    tableSortColumnDiscoverability: tableSortColumnDiscoverability
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -4,32 +4,43 @@ 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 var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return 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 var 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 var dragMenuBackgroundColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
+  var tableSortColumnDiscoverability = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), tableSortColumnDiscoverability ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var 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/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -105,7 +105,9 @@ var NumberColumn = /*#__PURE__*/function (_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 ".concat(tableBorderColor) : undefined
+          borderLeft:
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          isDragAndDropEnabled && tableActive ? "1px solid ".concat(tableBorderColor) : undefined
         },
         contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {

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

@@ -80,7 +80,7 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
               marginTop: "".concat(marginTop, "px"),
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: thisRowSticky ? "".concat(_this2.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 ? "".concat(tableControlsSpacing, "px") : undefined
             }
           }, /*#__PURE__*/React.createElement("button", {

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

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

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

@@ -76,6 +76,8 @@ export var tableStyles = function tableStyles(props) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, 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 var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

package/dist/esm/ui/consts.js

@@ -67,6 +67,9 @@ export var 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 var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
+export var TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
+export var TABLE_DRAG_MENU_PADDING_TOP = 4;
+export var TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
 export var dragMenuDropdownWidth = 250;
 export var dragTableInsertColumnButtonSize = 16;
 export var dropTargetExtendedWidth = 150;

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

@@ -12,9 +12,12 @@ var InsertLine = function InsertLine(cssString) {
 };
 var Marker = function Marker() {
   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
     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: "".concat(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: "".concat(lineMarkerSize, "px"),
     borderRadius: '50%',
     pointerEvents: 'none'
@@ -54,10 +57,22 @@ export var dragCornerControlButton = function dragCornerControlButton() {
   return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t.", " {\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\ttop: -17px;\n\t\tleft: -5px;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\toutline: none;\n\t\tz-index: ", ";\n\n\t\t&.active .", " {\n\t\t\tbackground-color: ", ";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tborder-width: 2px;\n\t\t\tborder-radius: 4px;\n\n\t\t\ttop: 3px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\n\t\t\t.", " {\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\ttop: 3px;\n\t\t\t\tleft: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbackground-color: ", ";\n\t\tborder-radius: 2px;\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\tposition: relative;\n\t}\n"])), ClassName.DRAG_CORNER_BUTTON, akEditorUnitZIndex * 99, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", ClassName.DRAG_CORNER_BUTTON_INNER, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
 };
 export var insertColumnButtonWrapper = function insertColumnButtonWrapper() {
-  return css(InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
+  return 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("\n    width: 2px;\n    left: 9px;\n  "));
 };
 export var insertRowButtonWrapper = function insertRowButtonWrapper() {
-  return css(InsertButton(), InsertButtonHover(), InsertLine("\n    height: 2px;\n    top: -11px;\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
+  return 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("\n    height: 2px;\n    top: -11px;\n// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
 };
 export var columnControlsLineMarker = function columnControlsLineMarker() {
   return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.", ".", " table tr:first-of-type td,\n\t.", ".", " table tr:first-of-type th {\n\t\tposition: relative;\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
@@ -75,20 +90,27 @@ var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEn
 };
 var columnHeaderButton = function 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);
 };
 var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
   return css({
     color: "var(--ds-text-inverse, ".concat(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
   });
 };
@@ -110,6 +132,8 @@ export var hoveredDeleteButton = function hoveredDeleteButton() {
 export var hoveredCell = function hoveredCell() {
   return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor);
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var hoveredWarningCell = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; // We need to override the background-color added to the cell\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
 
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
@@ -128,22 +152,30 @@ export var resizeHandle = function resizeHandle(isDragAndDropEnabled) {
 var 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% + ".concat(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: "".concat(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
 });
 var 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: "".concat(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% + ".concat(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
 });
 var 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
 });
 var 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, ".concat(akEditorTableBorder, ")")
 });