@atlaskit/editor-plugin-table 7.28.8 → 7.28.10

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

@@ -9,6 +9,20 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _sortAscending = _interopRequireDefault(require("@atlaskit/icon/core/sort-ascending"));
+var _sortDescending = _interopRequireDefault(require("@atlaskit/icon/core/sort-descending"));
+var _tableCellClear = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-clear"));
+var _tableColumnAddLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-left"));
+var _tableColumnAddRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-right"));
+var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-column-delete"));
+var _tableColumnMoveLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-left"));
+var _tableColumnMoveRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-right"));
+var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
+var _tableRowAddAbove = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-above"));
+var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
+var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
+var _tableRowMoveDown = _interopRequireDefault(require("@atlaskit/icon/core/table-row-move-down"));
+var _tableRowMoveUp = _interopRequireDefault(require("@atlaskit/icon/core/table-row-move-up"));
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right"));
@@ -83,27 +97,32 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
-    icon: _icons.AddRowAboveIcon,
+    icon: _tableRowAddAbove.default,
+    iconFallback: _icons.AddRowAboveIcon,
     keymap: _keymaps.addRowBefore
   }, {
     label: 'below',
     offset: 1,
-    icon: _icons.AddRowBelowIcon,
+    icon: _tableRowAddBelow.default,
+    iconFallback: _icons.AddRowBelowIcon,
     keymap: _keymaps.addRowAfter
   }] : [{
     label: 'left',
     offset: 0,
-    icon: _icons.AddColLeftIcon,
+    icon: _tableColumnAddLeft.default,
+    iconFallback: _icons.AddColLeftIcon,
     keymap: _keymaps.addColumnBefore
   }, {
     label: 'right',
     offset: 1,
-    icon: _icons.AddColRightIcon,
+    icon: _tableColumnAddRight.default,
+    iconFallback: _icons.AddColRightIcon,
     keymap: _keymaps.addColumnAfter
   }];
   var moveOptions = direction === 'row' ? [{
     label: 'up',
-    icon: _arrowUp.default,
+    icon: _tableRowMoveUp.default,
+    iconFallback: _arrowUp.default,
     keymap: _keymaps.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: _selection.getSelectedRowIndexes,
@@ -112,7 +131,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     }
   }, {
     label: 'down',
-    icon: _arrowDown.default,
+    icon: _tableRowMoveDown.default,
+    iconFallback: _arrowDown.default,
     keymap: _keymaps.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: _selection.getSelectedRowIndexes,
@@ -121,7 +141,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     }
   }] : [{
     label: 'left',
-    icon: _arrowLeft.default,
+    icon: _tableColumnMoveLeft.default,
+    iconFallback: _arrowLeft.default,
     keymap: _keymaps.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: _selection.getSelectedColumnIndexes,
@@ -130,7 +151,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     }
   }, {
     label: 'right',
-    icon: _arrowRight.default,
+    icon: _tableColumnMoveRight.default,
+    iconFallback: _arrowRight.default,
     keymap: _keymaps.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: _selection.getSelectedColumnIndexes,
@@ -141,21 +163,25 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   var sortOptions = direction === 'column' ? [{
     label: 'increasing',
     order: _customSteps.TableSortOrder.ASC,
-    icon: _chevronDoubleUp.default
+    icon: _sortAscending.default,
+    iconFallback: _chevronDoubleUp.default
   }, {
     label: 'decreasing',
     order: _customSteps.TableSortOrder.DESC,
-    icon: _chevronDoubleDown.default
+    icon: _sortDescending.default,
+    iconFallback: _chevronDoubleDown.default
   }] : [];
   var sortConfigs = (0, _toConsumableArray2.default)(sortOptions.map(function (_ref) {
     var label = _ref.label,
       order = _ref.order,
-      icon = _ref.icon;
+      icon = _ref.icon,
+      iconFallback = _ref.iconFallback;
     return {
       id: "sort_column_".concat(order),
       title: "Sort ".concat(label),
       disabled: hasMergedCellsInTable,
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
         return true;
@@ -166,11 +192,13 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     var label = _ref2.label,
       offset = _ref2.offset,
       icon = _ref2.icon,
+      iconFallback = _ref2.iconFallback,
       keymap = _ref2.keymap;
     return {
       id: "add_".concat(direction, "_").concat(label),
       title: "Add ".concat(direction, " ").concat(label),
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         if (direction === 'row') {
           (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
@@ -200,7 +228,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       }
       return false;
     },
-    icon: _layoutThreeEqual.default
+    icon: _tableColumnsDistribute.default,
+    iconFallback: _layoutThreeEqual.default
   } : undefined, {
     id: 'clear_cells',
     title: 'Clear cells',
@@ -208,7 +237,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
       return true;
     },
-    icon: _crossCircle.default,
+    icon: _tableCellClear.default,
+    iconFallback: _crossCircle.default,
     keymap: (0, _keymaps.tooltip)(_keymaps.backspace)
   }, {
     id: "delete_".concat(direction),
@@ -221,12 +251,14 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       }
       return true;
     },
-    icon: _remove.default,
+    icon: direction === 'row' ? _tableRowDelete.default : _tableColumnDelete.default,
+    iconFallback: _remove.default,
     keymap: direction === 'row' ? (0, _keymaps.tooltip)(_keymaps.deleteRow) : (0, _keymaps.tooltip)(_keymaps.deleteColumn)
   }], (0, _toConsumableArray2.default)(moveOptions.map(function (_ref3) {
     var label = _ref3.label,
       canMove = _ref3.canMove,
       icon = _ref3.icon,
+      iconFallback = _ref3.iconFallback,
       keymap = _ref3.keymap,
       getOriginIndexes = _ref3.getOriginIndexes,
       getTargetIndex = _ref3.getTargetIndex;
@@ -235,6 +267,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       title: "Move ".concat(direction, " ").concat(label),
       disabled: !canMove,
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         if (canMove) {
           requestAnimationFrame(function () {

package/dist/es2019/nodeviews/TableComponent.js

@@ -339,7 +339,7 @@ class TableComponent extends React.Component {
     }
   }
   componentDidMount() {
-    var _this$props$pluginInj, _this$props$pluginInj2, _this$table2, _this$table3;
+    var _this$table, _this$table2, _this$table3;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -349,13 +349,7 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags,
       isTableScalingEnabled
     } = this.props;
-    const {
-      mode
-    } = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.sharedState.currentState()) || {};
-    if (mode === 'view') {
-      var _this$table;
-      this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-    }
+    this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
     this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
     this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
     const {
@@ -625,8 +619,8 @@ class TableComponent extends React.Component {
     const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
     const isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
     if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-      var _this$props$pluginInj3, _this$props$pluginInj4;
-      (_this$props$pluginInj3 = this.props.pluginInjectionApi) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.accessibilityUtils) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
+      var _this$props$pluginInj, _this$props$pluginInj2;
+      (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
         priority: 'important'
       });
     }

package/dist/es2019/plugin.js

@@ -263,7 +263,7 @@ const tablesPlugin = ({
       }, {
         name: 'tableViewModeSort',
         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/es2019/pm-plugins/view-mode-sort/index.js

@@ -8,15 +8,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 const createPlugin = editorViewModeAPI => {
+export const createPlugin = api => {
   return new SafePlugin({
     state: {
       init: () => ({
@@ -25,11 +25,12 @@ export const createPlugin = editorViewModeAPI => {
         allTables: []
       }),
       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.
         const {
           mode
-        } = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {};
+        } = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {};
         if (mode !== 'view') {
           return pluginState;
         }
@@ -77,7 +78,6 @@ export const createPlugin = editorViewModeAPI => {
             const map = TableMap.get(tableNode);
             const hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach((cell, index) => {
-              // return pluginState;
               decs.push(Decoration.widget(cell + pos + 2, () => {
                 var _sort$tableId;
                 const element = document.createElement('div');
@@ -98,11 +98,12 @@ export const createPlugin = editorViewModeAPI => {
                 } = getPluginState(oldState);
                 ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIcon, {
+                }, /*#__PURE__*/createElement(SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered,
                   onClick: () => {},
-                  onKeyDown: () => {}
+                  onKeyDown: () => {},
+                  api
                 })), element);
                 return element;
               }));
@@ -129,11 +130,11 @@ export const createPlugin = editorViewModeAPI => {
     },
     key,
     appendTransaction: (trs, oldState, newState) => {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
       const {
         mode
-      } = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {};
+      } = (api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {};
       if (mode !== 'view') {
         return newState.tr;
       }

package/dist/es2019/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';
@@ -86,6 +86,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     onClick: handleClick,
     iconBefore: jsx(ExpandIcon, {
       label: "",
+      color: "currentColor",
       isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,

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

@@ -1,5 +1,6 @@
 // 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 const tableFloatingCellButtonStyles = () => css({
@@ -11,7 +12,11 @@ export const tableFloatingCellButtonStyles = () => css({
     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: `${contextualMenuTriggerSize + 2}px`,
-    flexDirection: 'column'
+    flexDirection: 'column',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    ...(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': {

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

@@ -19,10 +19,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';
@@ -33,8 +42,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';
 const arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+const elementBeforeIconStyles = xcss({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export class ContextualMenu extends Component {
   constructor(...args) {
     super(...args);
@@ -90,13 +104,13 @@ export class ContextualMenu extends 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
@@ -178,22 +192,28 @@ export class ContextualMenu extends 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 class ContextualMenu extends 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
       };
     });
@@ -246,11 +271,14 @@ export class ContextualMenu extends 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
       };
     });
@@ -285,14 +313,15 @@ export class ContextualMenu extends 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
       };
@@ -320,14 +349,15 @@ export class ContextualMenu extends 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
       };
     });
@@ -354,14 +384,15 @@ export class ContextualMenu extends 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/es2019/ui/FloatingContextualMenu/styles.js

@@ -10,15 +10,6 @@ export const cellColourPreviewStyles = selectedColor => css({
     background: selectedColor
   }
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const 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 const tablePopupStyles = (isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) => css`

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

@@ -20,7 +20,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';
@@ -32,7 +34,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';
 const MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -97,6 +99,10 @@ const getGroupedDragMenuConfig = tableSortColumnReorder => {
   tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
+const elementBeforeIconStyles = xcss({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
 const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnReorder = false, selectionRect) => {
   const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
@@ -144,12 +150,13 @@ const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnRe
         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", {
@@ -256,13 +263,13 @@ const DragMenu = /*#__PURE__*/React.memo(({
       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/es2019/ui/FloatingDragMenu/styles.js

@@ -11,12 +11,6 @@ export const cellColourPreviewStyles = selectedColor => css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- 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 = (tableSortColumnReorder = false) => css`
 	.${ClassName.DRAG_SUBMENU} {

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

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