@atlaskit/editor-plugin-table 7.28.8 → 7.28.10

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

@@ -2,6 +2,20 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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';
@@ -76,27 +90,32 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   var 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
   }];
   var 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,
@@ -105,7 +124,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     }
   }, {
     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,
@@ -114,7 +134,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     }
   }] : [{
     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,
@@ -123,7 +144,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     }
   }, {
     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,
@@ -134,21 +156,25 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   var 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
   }] : [];
   var sortConfigs = _toConsumableArray(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) {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
         return true;
@@ -159,11 +185,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     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') {
           insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
@@ -193,7 +221,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       }
       return false;
     },
-    icon: EditorLayoutThreeEqualIcon
+    icon: TableColumnsDistributeIcon,
+    iconFallback: EditorLayoutThreeEqualIcon
   } : undefined, {
     id: 'clear_cells',
     title: 'Clear cells',
@@ -201,7 +230,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
       return true;
     },
-    icon: CrossCircleIcon,
+    icon: TableCellClearIcon,
+    iconFallback: CrossCircleIcon,
     keymap: tooltip(backspace)
   }, {
     id: "delete_".concat(direction),
@@ -214,12 +244,14 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       }
       return true;
     },
-    icon: RemoveIcon,
+    icon: direction === 'row' ? TableRowDeleteIcon : TableColumnDeleteIcon,
+    iconFallback: RemoveIcon,
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
   }], _toConsumableArray(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;
@@ -228,6 +260,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       title: "Move ".concat(direction, " ").concat(label),
       disabled: !canMove,
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         if (canMove) {
           requestAnimationFrame(function () {

package/dist/types/pm-plugins/view-mode-sort/index.d.ts

@@ -7,4 +7,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode']) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;

package/dist/types/ui/FloatingContextualMenu/styles.d.ts

@@ -1,3 +1,2 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;

package/dist/types/ui/FloatingDragMenu/styles.d.ts

@@ -1,4 +1,3 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const dragMenuBackgroundColorStyles: (tableSortColumnReorder?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/icons/SortingIconWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../plugin';
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+    api: ExtractInjectionAPI<TablePlugin>;
+};
+export declare const SortingIconWrapper: (props: SortingIconWrapperProps) => JSX.Element | null;
+export {};

package/dist/types/utils/drag-menu.d.ts

@@ -1,17 +1,19 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Command, DropdownOptionT, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
 import type { DraggableData, DraggableType, PluginInjectionAPI, TableDirection } from '../types';
 export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
 export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = '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';
 export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
+    icon?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
+    iconFallback?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined, isCommentEditor?: boolean) => DragMenuConfig[];

package/dist/types-ts4.5/pm-plugins/view-mode-sort/index.d.ts

@@ -7,4 +7,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode']) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;

package/dist/types-ts4.5/ui/FloatingContextualMenu/styles.d.ts

@@ -1,3 +1,2 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/FloatingDragMenu/styles.d.ts

@@ -1,4 +1,3 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const dragMenuBackgroundColorStyles: (tableSortColumnReorder?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/icons/SortingIconWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../plugin';
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+    api: ExtractInjectionAPI<TablePlugin>;
+};
+export declare const SortingIconWrapper: (props: SortingIconWrapperProps) => JSX.Element | null;
+export {};

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -1,17 +1,19 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Command, DropdownOptionT, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
 import type { DraggableData, DraggableType, PluginInjectionAPI, TableDirection } from '../types';
 export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
 export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = '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';
 export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
+    icon?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
+    iconFallback?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined, isCommentEditor?: boolean) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.28.8",
+	"version": "7.28.10",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^93.1.0",
+		"@atlaskit/editor-common": "^93.2.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
@@ -117,6 +117,9 @@
 		},
 		"platform_editor_breakout_use_css": {
 			"type": "boolean"
+		},
+		"platform-visual-refresh-icons": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponent.tsx

@@ -228,11 +228,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isTableScalingEnabled,
 		} = this.props;
 
-		const { mode } =
-			this.props.pluginInjectionApi?.editorViewMode?.sharedState.currentState() || {};
-		if (mode === 'view') {
-			this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
-		}
+		this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
 
 		this?.table?.addEventListener('mouseout', this.handleMouseOut);
 

package/src/plugin.tsx

@@ -436,7 +436,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableViewModeSort',
 					plugin: () => {
-						return api?.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+						return api?.editorViewMode ? createViewModeSortPlugin(api) : undefined;
 					},
 				},
 				{

package/src/pm-plugins/view-mode-sort/index.ts

@@ -10,13 +10,13 @@ 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 type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import type tablePlugin from '../../plugin';
+import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 
 import {
@@ -28,9 +28,7 @@ import { tableViewModeSortPluginKey as key } from './plugin-key';
 import type { ViewModeSortPluginState } from './types';
 import { getTableElements, toggleSort } from './utils';
 
-export const createPlugin = (
-	editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode'],
-) => {
+export const createPlugin = (api: ExtractInjectionAPI<typeof tablePlugin>) => {
 	return new SafePlugin({
 		state: {
 			init: () => ({
@@ -41,7 +39,7 @@ export const createPlugin = (
 			apply(tr, pluginState: ViewModeSortPluginState, oldState) {
 				// 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?.sharedState.currentState() || {};
+				const { mode } = api.editorViewMode?.sharedState.currentState() || {};
 				if (mode !== 'view') {
 					return pluginState;
 				}
@@ -86,7 +84,6 @@ export const createPlugin = (
 						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, () => {
 									const element = document.createElement('div');
@@ -109,11 +106,12 @@ export const createPlugin = (
 										createElement(
 											RawIntlProvider,
 											{ value: getIntl() },
-											createElement(SortingIcon, {
+											createElement(SortingIconWrapper, {
 												isSortingAllowed: !hasMergedCells,
 												sortOrdered,
 												onClick: () => {},
 												onKeyDown: () => {},
+												api,
 											}),
 										),
 										element,
@@ -146,7 +144,7 @@ export const createPlugin = (
 		key,
 		appendTransaction: (trs, oldState, newState) => {
 			// return newState.tr;
-			const { mode } = editorViewModeAPI?.sharedState.currentState() || {};
+			const { mode } = api?.editorViewMode?.sharedState.currentState() || {};
 			if (mode !== 'view') {
 				return newState.tr;
 			}

package/src/ui/FloatingContextualButton/index.tsx

@@ -20,7 +20,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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';
@@ -110,7 +110,7 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 					fg('platform_editor_a11y_table_context_menu') ? focusToContextMenuTrigger : undefined
 				}
 				onClick={handleClick}
-				iconBefore={<ExpandIcon label="" isFacadeDisabled={true} />}
+				iconBefore={<ExpandIcon label="" color="currentColor" isFacadeDisabled={true} />}
 				aria-label={labelCellOptions}
 				aria-expanded={
 					fg('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined

package/src/ui/FloatingContextualButton/styles.ts

@@ -1,6 +1,7 @@
 // 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 { token } from '@atlaskit/tokens';
 
@@ -17,6 +18,10 @@ export const tableFloatingCellButtonStyles = () =>
 			// 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',
+			// 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: token('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/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -42,10 +42,19 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 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,
@@ -85,7 +94,7 @@ import {
 } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
 
-import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
+import { cellColourPreviewStyles } from './styles';
 
 interface Props {
 	editorView: EditorView;
@@ -111,6 +120,12 @@ interface State {
 	isOpenAllowed: boolean;
 }
 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<Props & WrappedComponentProps, State> {
 	state: State = {
 		isSubmenuOpen: false,
@@ -248,13 +263,14 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					: formatMessage(messages.cellBackground),
 				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
-					<span css={elementBeforeIconStyles}>
-						<EditorBackgroundColorIcon
+					<Box xcss={elementBeforeIconStyles}>
+						<PaintBucketIcon
+							color="currentColor"
+							spacing="spacious"
 							label={formatMessage(messages.backgroundColor)}
-							size="medium"
+							LEGACY_fallbackIcon={EditorBackgroundColorIcon}
 						/>
-					</span>
+					</Box>
 				) : undefined,
 				elemAfter: (
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -345,10 +361,14 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					value: { 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
-						<span css={elementBeforeIconStyles}>
-							<MergeCellsIcon />
-						</span>
+						<Box xcss={elementBeforeIconStyles}>
+							<TableCellMergeIcon
+								color="currentColor"
+								spacing="spacious"
+								label={formatMessage(messages.mergeCells)}
+								LEGACY_fallbackIcon={MergeCellsIcon}
+							/>
+						</Box>
 					) : undefined,
 				},
 				{
@@ -356,10 +376,14 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					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
-						<span css={elementBeforeIconStyles}>
-							<SplitCellIcon />
-						</span>
+						<Box xcss={elementBeforeIconStyles}>
+							<TableCellSplitIcon
+								color="currentColor"
+								spacing="spacious"
+								label={formatMessage(messages.splitCell)}
+								LEGACY_fallbackIcon={SplitCellIcon}
+							/>
+						</Box>
 					) : undefined,
 				},
 			] as MenuItem[];
@@ -384,9 +408,14 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
 			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
-				<span css={elementBeforeIconStyles}>
-					<AddColRightIcon />
-				</span>
+				<Box xcss={elementBeforeIconStyles}>
+					<TableColumnAddRightIcon
+						color="currentColor"
+						spacing="spacious"
+						label={formatMessage(messages.addColumnRight)}
+						LEGACY_fallbackIcon={AddColRightIcon}
+					/>
+				</Box>
 			) : undefined,
 			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
 				? tooltip(addColumnAfter, String(content))
@@ -408,10 +437,14 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			// 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: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
 			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
-				<span css={elementBeforeIconStyles}>
-					<AddRowBelowIcon />
-				</span>
+				<Box xcss={elementBeforeIconStyles}>
+					<TableRowAddBelowIcon
+						color="currentColor"
+						spacing="spacious"
+						label={formatMessage(messages.addRowBelow)}
+						LEGACY_fallbackIcon={AddRowBelowIcon}
+					/>
+				</Box>
 			) : undefined,
 			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
 				? tooltip(addRowAfter, String(content))
@@ -440,14 +473,16 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			// 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: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
 			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
-				<span css={elementBeforeIconStyles}>
-					<CrossCircleIcon
+				<Box xcss={elementBeforeIconStyles}>
+					<TableCellClearIcon
+						color="currentColor"
+						spacing="spacious"
 						label={formatMessage(messages.clearCells, {
 							0: Math.max(noOfColumns, noOfRows),
 						})}
+						LEGACY_fallbackIcon={CrossCircleIcon}
 					/>
-				</span>
+				</Box>
 			) : undefined,
 			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
 				? tooltip(backspace, String(content))
@@ -472,14 +507,16 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			}),
 			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
-				<span css={elementBeforeIconStyles}>
-					<RemoveIcon
+				<Box xcss={elementBeforeIconStyles}>
+					<TableColumnDeleteIcon
+						color="currentColor"
+						spacing="spacious"
 						label={formatMessage(messages.removeColumns, {
 							0: noOfColumns,
 						})}
+						LEGACY_fallbackIcon={RemoveIcon}
 					/>
-				</span>
+				</Box>
 			) : undefined,
 		} as MenuItem;
 	};
@@ -501,14 +538,16 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			}),
 			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
-				<span css={elementBeforeIconStyles}>
-					<RemoveIcon
+				<Box xcss={elementBeforeIconStyles}>
+					<TableRowDeleteIcon
+						color="currentColor"
+						spacing="spacious"
 						label={formatMessage(messages.removeRows, {
 							0: noOfRows,
 						})}
+						LEGACY_fallbackIcon={RemoveIcon}
 					/>
-				</span>
+				</Box>
 			) : undefined,
 		} as MenuItem;
 	};