@atlaskit/editor-plugin-table 7.28.8 → 7.28.10

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

@@ -1,6 +1,20 @@
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, deleteColumn, deleteRow, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
+import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
+import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
+import TableCellClearIcon from '@atlaskit/icon/core/table-cell-clear';
+import TableColumnAddLeftIcon from '@atlaskit/icon/core/table-column-add-left';
+import TableColumnAddRightIcon from '@atlaskit/icon/core/table-column-add-right';
+import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
+import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
+import TableColumnMoveRightIcon from '@atlaskit/icon/core/table-column-move-right';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
+import TableRowAddAboveIcon from '@atlaskit/icon/core/table-row-add-above';
+import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
+import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
+import TableRowMoveDownIcon from '@atlaskit/icon/core/table-row-move-down';
+import TableRowMoveUpIcon from '@atlaskit/icon/core/table-row-move-up';
 import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
 import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
 import ArrowRightIcon from '@atlaskit/icon/glyph/arrow-right';
@@ -69,48 +83,56 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
-    icon: AddRowAboveIcon,
+    icon: TableRowAddAboveIcon,
+    iconFallback: AddRowAboveIcon,
     keymap: addRowBefore
   }, {
     label: 'below',
     offset: 1,
-    icon: AddRowBelowIcon,
+    icon: TableRowAddBelowIcon,
+    iconFallback: AddRowBelowIcon,
     keymap: addRowAfter
   }] : [{
     label: 'left',
     offset: 0,
-    icon: AddColLeftIcon,
+    icon: TableColumnAddLeftIcon,
+    iconFallback: AddColLeftIcon,
     keymap: addColumnBefore
   }, {
     label: 'right',
     offset: 1,
-    icon: AddColRightIcon,
+    icon: TableColumnAddRightIcon,
+    iconFallback: AddColRightIcon,
     keymap: addColumnAfter
   }];
   const moveOptions = direction === 'row' ? [{
     label: 'up',
-    icon: ArrowUpIcon,
+    icon: TableRowMoveUpIcon,
+    iconFallback: ArrowUpIcon,
     keymap: moveRowUp,
     canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: selectionRect => selectionRect.top - 1
   }, {
     label: 'down',
-    icon: ArrowDownIcon,
+    icon: TableRowMoveDownIcon,
+    iconFallback: ArrowDownIcon,
     keymap: moveRowDown,
     canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: selectionRect => selectionRect.bottom
   }] : [{
     label: 'left',
-    icon: ArrowLeftIcon,
+    icon: TableColumnMoveLeftIcon,
+    iconFallback: ArrowLeftIcon,
     keymap: moveColumnLeft,
     canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
     getTargetIndex: selectionRect => selectionRect.left - 1
   }, {
     label: 'right',
-    icon: ArrowRightIcon,
+    icon: TableColumnMoveRightIcon,
+    iconFallback: ArrowRightIcon,
     keymap: moveColumnRight,
     canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
@@ -119,21 +141,25 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
   const sortOptions = direction === 'column' ? [{
     label: 'increasing',
     order: SortOrder.ASC,
-    icon: HipchatChevronDoubleUpIcon
+    icon: SortAscendingIcon,
+    iconFallback: HipchatChevronDoubleUpIcon
   }, {
     label: 'decreasing',
     order: SortOrder.DESC,
-    icon: HipchatChevronDoubleDownIcon
+    icon: SortDescendingIcon,
+    iconFallback: HipchatChevronDoubleDownIcon
   }] : [];
   const sortConfigs = [...sortOptions.map(({
     label,
     order,
-    icon
+    icon,
+    iconFallback
   }) => ({
     id: `sort_column_${order}`,
     title: `Sort ${label}`,
     disabled: hasMergedCellsInTable,
-    icon,
+    icon: icon,
+    iconFallback: iconFallback,
     onClick: (state, dispatch) => {
       sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
       return true;
@@ -143,11 +169,13 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
     label,
     offset,
     icon,
+    iconFallback,
     keymap
   }) => ({
     id: `add_${direction}_${label}`,
     title: `Add ${direction} ${label}`,
-    icon,
+    icon: icon,
+    iconFallback: iconFallback,
     onClick: (state, dispatch) => {
       if (direction === 'row') {
         insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
@@ -176,7 +204,8 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
       }
       return false;
     },
-    icon: EditorLayoutThreeEqualIcon
+    icon: TableColumnsDistributeIcon,
+    iconFallback: EditorLayoutThreeEqualIcon
   } : undefined, {
     id: 'clear_cells',
     title: 'Clear cells',
@@ -184,7 +213,8 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
       emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
       return true;
     },
-    icon: CrossCircleIcon,
+    icon: TableCellClearIcon,
+    iconFallback: CrossCircleIcon,
     keymap: tooltip(backspace)
   }, {
     id: `delete_${direction}`,
@@ -197,12 +227,14 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
       }
       return true;
     },
-    icon: RemoveIcon,
+    icon: direction === 'row' ? TableRowDeleteIcon : TableColumnDeleteIcon,
+    iconFallback: RemoveIcon,
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
   }, ...moveOptions.map(({
     label,
     canMove,
     icon,
+    iconFallback,
     keymap,
     getOriginIndexes,
     getTargetIndex
@@ -210,7 +242,8 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
     disabled: !canMove,
-    icon,
+    icon: icon,
+    iconFallback: iconFallback,
     onClick: (state, dispatch) => {
       if (canMove) {
         requestAnimationFrame(() => {

package/dist/esm/nodeviews/TableComponent.js

@@ -351,7 +351,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props$pluginInj, _this$table2, _this$table3;
+      var _this$table, _this$table2, _this$table3;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -360,12 +360,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      var _ref = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.sharedState.currentState()) || {},
-        mode = _ref.mode;
-      if (mode === 'view') {
-        var _this$table;
-        this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-      }
+      this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
@@ -640,8 +635,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
       var isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
       if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-        var _this$props$pluginInj2;
-        (_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
           priority: 'important'
         });
       }

package/dist/esm/plugin.js

@@ -268,7 +268,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/esm/pm-plugins/view-mode-sort/index.js

@@ -16,15 +16,15 @@ import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { SortingIcon } from '@atlaskit/editor-common/table';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
 import { tableViewModeSortPluginKey as key } from './plugin-key';
 import { getTableElements, toggleSort } from './utils';
-export var createPlugin = function createPlugin(editorViewModeAPI) {
+export var createPlugin = function createPlugin(api) {
   return new SafePlugin({
     state: {
       init: function init() {
@@ -35,9 +35,10 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
         };
       },
       apply: function apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
         // does not appear correct when the plugin is created.
-        var _ref = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+        var _ref = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {},
           mode = _ref.mode;
         if (mode !== 'view') {
           return pluginState;
@@ -96,7 +97,6 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
             var map = TableMap.get(tableNode);
             var hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach(function (cell, index) {
-              // return pluginState;
               decs.push(Decoration.widget(cell + pos + 2, function () {
                 var _sort$tableId;
                 var element = document.createElement('div');
@@ -116,11 +116,12 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
                   getIntl = _getPluginState.getIntl;
                 ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIcon, {
+                }, /*#__PURE__*/createElement(SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered: sortOrdered,
                   onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {}
+                  onKeyDown: function onKeyDown() {},
+                  api: api
                 })), element);
                 return element;
               }));
@@ -147,9 +148,9 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
     },
     key: key,
     appendTransaction: function appendTransaction(trs, oldState, newState) {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
-      var _ref8 = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+      var _ref8 = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {},
         mode = _ref8.mode;
       if (mode !== 'view') {
         return newState.tr;

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

@@ -15,7 +15,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ExpandIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { toggleContextualMenu } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
@@ -78,6 +78,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     onClick: handleClick,
     iconBefore: jsx(ExpandIcon, {
       label: "",
+      color: "currentColor",
       isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,

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

@@ -1,11 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 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': {
+    '> div': _objectSpread({
       // Sits behind button to provide surface-color background
       background: "var(--ds-surface, ".concat(N20, ")"),
       borderRadius: "var(--ds-border-radius, 3px)",
@@ -13,7 +17,9 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
       // 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'
-    },
+    }, fg('platform-visual-refresh-icons') && {
+      width: "var(--ds-space-250, 20px)"
+    }),
     // 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)",

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

@@ -30,10 +30,19 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { splitCell } from '@atlaskit/editor-tables/utils';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
-import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import RemoveIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
+import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import TableCellClearIcon from '@atlaskit/icon/core/table-cell-clear';
+import TableCellMergeIcon from '@atlaskit/icon/core/table-cell-merge';
+import TableCellSplitIcon from '@atlaskit/icon/core/table-cell-split';
+import TableColumnAddRightIcon from '@atlaskit/icon/core/table-column-add-right';
+import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
+import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
+import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -44,8 +53,13 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
-import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
+import { cellColourPreviewStyles } from './styles';
 var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+var elementBeforeIconStyles = xcss({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _inherits(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -100,13 +114,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled ?
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          jsx("span", {
-            css: elementBeforeIconStyles
-          }, jsx(EditorBackgroundColorIcon, {
+          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+            xcss: elementBeforeIconStyles
+          }, jsx(PaintBucketIcon, {
+            color: "currentColor",
+            spacing: "spacious",
             label: formatMessage(messages.backgroundColor),
-            size: "medium"
+            LEGACY_fallbackIcon: EditorBackgroundColorIcon
           })) : undefined,
           elemAfter:
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -182,22 +196,28 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled ?
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          jsx("span", {
-            css: elementBeforeIconStyles
-          }, jsx(MergeCellsIcon, null)) : undefined
+          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+            xcss: elementBeforeIconStyles
+          }, jsx(TableCellMergeIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: formatMessage(messages.mergeCells),
+            LEGACY_fallbackIcon: MergeCellsIcon
+          })) : undefined
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled ?
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          jsx("span", {
-            css: elementBeforeIconStyles
-          }, jsx(SplitCellIcon, null)) : undefined
+          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+            xcss: elementBeforeIconStyles
+          }, jsx(TableCellSplitIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: formatMessage(messages.splitCell),
+            LEGACY_fallbackIcon: SplitCellIcon
+          })) : undefined
         }];
       }
       return [];
@@ -220,9 +240,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         }, tooltip(addColumnAfter)),
         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,
+        jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableColumnAddRightIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(messages.addColumnRight),
+          LEGACY_fallbackIcon: AddColRightIcon
+        })) : undefined,
         'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addColumnAfter, String(content)) : undefined
       };
     });
@@ -242,11 +267,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        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,
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableRowAddBelowIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(messages.addRowBelow),
+          LEGACY_fallbackIcon: AddRowBelowIcon
+        })) : undefined,
         'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addRowAfter, String(content)) : undefined
       };
     });
@@ -275,14 +303,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        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, {
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableCellClearIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
-          })
+          }),
+          LEGACY_fallbackIcon: CrossCircleIcon
         })) : undefined,
         'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(backspace, String(content)) : undefined
       };
@@ -304,14 +333,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled ?
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        jsx("span", {
-          css: elementBeforeIconStyles
-        }, jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableColumnDeleteIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
-          })
+          }),
+          LEGACY_fallbackIcon: RemoveIcon
         })) : undefined
       };
     });
@@ -332,14 +362,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled ?
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        jsx("span", {
-          css: elementBeforeIconStyles
-        }, jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableRowDeleteIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(messages.removeRows, {
             0: noOfRows
-          })
+          }),
+          LEGACY_fallbackIcon: RemoveIcon
         })) : undefined
       };
     });

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

@@ -14,15 +14,6 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
     }
   });
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var elementBeforeIconStyles = css({
-  marginRight: "var(--ds-space-negative-075, -6px)",
-  display: 'flex'
-});
-
-// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
-// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {

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

@@ -22,7 +22,9 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
+import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { Box, xcss } from '@atlaskit/primitives';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../commands-with-analytics';
@@ -34,7 +36,7 @@ import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColum
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { colorPalletteColumns } from '../consts';
 import { DropdownMenu } from './DropdownMenu';
-import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, elementBeforeIconStyles, toggleStyles } from './styles';
+import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
 var MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -99,6 +101,10 @@ var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumn
   tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
+var elementBeforeIconStyles = xcss({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage) {
   var tableSortColumnReorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var selectionRect = arguments.length > 3 ? arguments[3] : undefined;
@@ -150,12 +156,13 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         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
-      jsx("span", {
-        css: elementBeforeIconStyles
+      elemBefore: item.icon ? jsx(Box, {
+        xcss: elementBeforeIconStyles
       }, jsx(item.icon, {
-        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
+        color: "currentColor",
+        spacing: "spacious",
+        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options),
+        LEGACY_fallbackIcon: item.iconFallback ? item.iconFallback : undefined
       })) : 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", {
@@ -253,13 +260,13 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       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
-      jsx("span", {
-        css: elementBeforeIconStyles
-      }, jsx(EditorBackgroundColorIcon, {
+      elemBefore: jsx(Box, {
+        xcss: elementBeforeIconStyles
+      }, jsx(PaintBucketIcon, {
+        color: "currentColor",
+        spacing: "spacious",
         label: formatMessage(messages.backgroundColor),
-        size: "medium"
+        LEGACY_fallbackIcon: EditorBackgroundColorIcon
       })),
       elemAfter: jsx("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -15,12 +15,6 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
   });
 };
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- 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 = function dragMenuBackgroundColorStyles() {
   var tableSortColumnReorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/esm/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+export var SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SortingIcon, props);
+};