@atlaskit/editor-plugin-table 5.8.4 → 5.8.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 5.8.6
+
+### Patch Changes
+
+- [#67239](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67239) [`4b543688dfcb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4b543688dfcb) - [ux] ED-21242: Fixed some menu item not full visible on drag menu"
+- Updated dependencies
+
+## 5.8.5
+
+### Patch Changes
+
+- [#67238](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67238) [`40533849b2ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40533849b2ec) - [ED-21835] Change EditorAPI type to always union with undefined
+
 ## 5.8.4
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -57,11 +57,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    var _document$body$offset, _document, _api$width$sharedStat;
+    var _document$body$offset, _document, _api$width$sharedStat, _api$width;
     var defaultState = {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : api.width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
+    return (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

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

@@ -89,10 +89,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_backgroundColor.default, {
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+            css: _styles2.elementBeforeIconStyles
+          }, (0, _react2.jsx)(_backgroundColor.default, {
             label: formatMessage(_messages.tableMessages.backgroundColor),
             size: "medium"
-          }) : undefined,
+          })) : undefined,
           elemAfter: (0, _react2.jsx)("div", {
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (0, _react2.jsx)("div", {
@@ -129,14 +131,18 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _transforms.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.MergeCellsIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+            css: _styles2.elementBeforeIconStyles
+          }, (0, _react2.jsx)(_icons.MergeCellsIcon, null)) : undefined
         }, {
           content: formatMessage(_messages.tableMessages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.SplitCellIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+            css: _styles2.elementBeforeIconStyles
+          }, (0, _react2.jsx)(_icons.SplitCellIcon, null)) : undefined
         }];
       }
       return [];
@@ -155,7 +161,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.AddColRightIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createInsertRowItem", function () {
@@ -172,7 +180,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.AddRowBelowIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createClearCellsItem", function () {
@@ -198,11 +208,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_crossCircle.default, {
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.tableMessages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        }) : undefined
+        })) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDeleteColumnItem", function () {
@@ -222,11 +234,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_remove.default, {
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeColumns, {
             0: noOfColumns
           })
-        }) : undefined
+        })) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDeleteRowItem", function () {
@@ -246,11 +260,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_remove.default, {
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeRows, {
             0: noOfRows
           })
-        }) : undefined
+        })) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDistributeColumnsItem", function () {

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

@@ -4,18 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tablePopupStyles = exports.cellColourPreviewStyles = void 0;
+exports.tablePopupStyles = exports.elementBeforeIconStyles = exports.cellColourPreviewStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
+var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
 
 // 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`
-var tablePopupStyles = exports.tablePopupStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var tablePopupStyles = exports.tablePopupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));

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

@@ -143,10 +143,8 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? (0, _react2.jsx)("div", {
-        style: {
-          display: 'flex'
-        }
+      elemBefore: item.icon ? (0, _react2.jsx)("span", {
+        css: _styles2.elementBeforeIconStyles
       }, (0, _react2.jsx)(item.icon, {
         label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
@@ -232,10 +230,12 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       value: {
         name: 'background'
       },
-      elemBefore: (0, _react2.jsx)(_backgroundColor.default, {
+      elemBefore: (0, _react2.jsx)("span", {
+        css: _styles2.elementBeforeIconStyles
+      }, (0, _react2.jsx)(_backgroundColor.default, {
         label: formatMessage(_messages.tableMessages.backgroundColor),
         size: "medium"
-      }),
+      })),
       elemAfter: (0, _react2.jsx)("div", {
         className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
         css: _styles2.dragMenuBackgroundColorStyles

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

@@ -4,16 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleStyles = exports.dragMenuBackgroundColorStyles = exports.cellColourPreviewStyles = void 0;
+exports.toggleStyles = exports.elementBeforeIconStyles = exports.dragMenuBackgroundColorStyles = exports.cellColourPreviewStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
-var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
-var toggleStyles = exports.toggleStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));
+var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
+var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var toggleStyles = exports.toggleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));

package/dist/es2019/plugin.js

@@ -49,11 +49,11 @@ const tablesPlugin = ({
     current: null
   };
   const defaultGetEditorContainerWidth = () => {
-    var _document$body$offset, _document, _document$body, _api$width$sharedStat;
+    var _document$body$offset, _document, _document$body, _api$width$sharedStat, _api$width;
     const defaultState = {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : api.width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
+    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

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

@@ -28,7 +28,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
-import { cellColourPreviewStyles } from './styles';
+import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
 export class ContextualMenu extends Component {
   constructor(...args) {
     super(...args);
@@ -74,10 +74,12 @@ export class ContextualMenu extends Component {
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(EditorBackgroundColorIcon, {
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
             size: "medium"
-          }) : undefined,
+          })) : undefined,
           elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
@@ -120,14 +122,18 @@ export class ContextualMenu extends Component {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(MergeCellsIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(MergeCellsIcon, null)) : undefined
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(SplitCellIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(SplitCellIcon, null)) : undefined
         }];
       }
       return [];
@@ -150,7 +156,9 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddColRightIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddColRightIcon, null)) : undefined
       };
     });
     _defineProperty(this, "createInsertRowItem", () => {
@@ -171,7 +179,9 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddRowBelowIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddRowBelowIcon, null)) : undefined
       };
     });
     _defineProperty(this, "createClearCellsItem", () => {
@@ -203,11 +213,13 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(CrossCircleIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(this, "createDeleteColumnItem", () => {
@@ -233,11 +245,13 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(this, "createDeleteRowItem", () => {
@@ -263,11 +277,13 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
             0: noOfRows
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(this, "createDistributeColumnsItem", () => {

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

@@ -8,6 +8,10 @@ export const cellColourPreviewStyles = selectedColor => css`
     background: ${selectedColor};
   }
 `;
+export const elementBeforeIconStyles = css`
+  margin-right: ${"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`

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

@@ -25,7 +25,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
-import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
+import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, elementBeforeIconStyles, toggleStyles } from './styles';
 const MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -131,10 +131,8 @@ const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) =>
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? jsx("div", {
-        style: {
-          display: 'flex'
-        }
+      elemBefore: item.icon ? jsx("span", {
+        css: elementBeforeIconStyles
       }, jsx(item.icon, {
         label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
@@ -228,10 +226,12 @@ export const DragMenu = ({
       value: {
         name: 'background'
       },
-      elemBefore: jsx(EditorBackgroundColorIcon, {
+      elemBefore: jsx("span", {
+        css: elementBeforeIconStyles
+      }, jsx(EditorBackgroundColorIcon, {
         label: formatMessage(messages.backgroundColor),
         size: "medium"
-      }),
+      })),
       elemAfter: jsx("div", {
         className: DropdownMenuSharedCssClassName.SUBMENU,
         css: dragMenuBackgroundColorStyles

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

@@ -8,6 +8,10 @@ export const cellColourPreviewStyles = selectedColor => css`
     background: ${selectedColor};
   }
 `;
+export const elementBeforeIconStyles = css`
+  margin-right: ${"var(--ds-space-negative-075, -6px)"};
+  display: flex;
+`;
 export const dragMenuBackgroundColorStyles = css`
   .${ClassName.DRAG_SUBMENU} {
     border-radius: ${"var(--ds-border-radius, 3px)"};

package/dist/esm/plugin.js

@@ -50,11 +50,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    var _document$body$offset, _document, _api$width$sharedStat;
+    var _document$body$offset, _document, _api$width$sharedStat, _api$width;
     var defaultState = {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : api.width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
+    return (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

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

@@ -39,7 +39,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
-import { cellColourPreviewStyles } from './styles';
+import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
 export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _inherits(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -84,10 +84,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(EditorBackgroundColorIcon, {
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
             size: "medium"
-          }) : undefined,
+          })) : undefined,
           elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
@@ -124,14 +126,18 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(MergeCellsIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(MergeCellsIcon, null)) : undefined
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(SplitCellIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(SplitCellIcon, null)) : undefined
         }];
       }
       return [];
@@ -150,7 +156,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddColRightIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddColRightIcon, null)) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createInsertRowItem", function () {
@@ -167,7 +175,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddRowBelowIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddRowBelowIcon, null)) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createClearCellsItem", function () {
@@ -193,11 +203,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(CrossCircleIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDeleteColumnItem", function () {
@@ -217,11 +229,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDeleteRowItem", function () {
@@ -241,11 +255,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
             0: noOfRows
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDistributeColumnsItem", function () {

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
@@ -8,7 +8,8 @@ import { contextualMenuDropdownWidth } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
+export var elementBeforeIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
 
 // 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 = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var tablePopupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));

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

@@ -27,7 +27,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
-import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
+import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, elementBeforeIconStyles, toggleStyles } from './styles';
 var MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -135,10 +135,8 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? jsx("div", {
-        style: {
-          display: 'flex'
-        }
+      elemBefore: item.icon ? jsx("span", {
+        css: elementBeforeIconStyles
       }, jsx(item.icon, {
         label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
@@ -224,10 +222,12 @@ export var DragMenu = function DragMenu(_ref) {
       value: {
         name: 'background'
       },
-      elemBefore: jsx(EditorBackgroundColorIcon, {
+      elemBefore: jsx("span", {
+        css: elementBeforeIconStyles
+      }, jsx(EditorBackgroundColorIcon, {
         label: formatMessage(messages.backgroundColor),
         size: "medium"
-      }),
+      })),
       elemAfter: jsx("div", {
         className: DropdownMenuSharedCssClassName.SUBMENU,
         css: dragMenuBackgroundColorStyles

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
@@ -8,5 +8,6 @@ import { dragMenuDropdownWidth } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
-export var dragMenuBackgroundColorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
-export var toggleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));
+export var elementBeforeIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
+export var dragMenuBackgroundColorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var toggleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.8.4",
+  "version": "5.8.6",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^76.39.0",
+    "@atlaskit/editor-common": "^76.40.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/plugin.tsx

@@ -136,7 +136,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     const defaultState = {
       width: document?.body?.offsetWidth ?? 500,
     };
-    return api?.width.sharedState.currentState() ?? defaultState;
+    return api?.width?.sharedState.currentState() ?? defaultState;
   };
   const editorAnalyticsAPI = api?.analytics?.actions;
 

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -81,7 +81,7 @@ import {
   SplitCellIcon,
 } from '../icons';
 
-import { cellColourPreviewStyles } from './styles';
+import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
 
 export interface Props {
   editorView: EditorView;
@@ -210,10 +210,12 @@ export class ContextualMenu extends Component<
           getBooleanFF(
             'platform.editor.table.new-cell-context-menu-styling',
           ) ? (
-            <EditorBackgroundColorIcon
-              label={formatMessage(messages.backgroundColor)}
-              size="medium"
-            />
+            <span css={elementBeforeIconStyles}>
+              <EditorBackgroundColorIcon
+                label={formatMessage(messages.backgroundColor)}
+                size="medium"
+              />
+            </span>
           ) : undefined,
         elemAfter: (
           <div className={DropdownMenuSharedCssClassName.SUBMENU}>
@@ -272,7 +274,9 @@ export class ContextualMenu extends Component<
             getBooleanFF(
               'platform.editor.table.new-cell-context-menu-styling',
             ) ? (
-              <MergeCellsIcon />
+              <span css={elementBeforeIconStyles}>
+                <MergeCellsIcon />
+              </span>
             ) : undefined,
         },
         {
@@ -284,7 +288,9 @@ export class ContextualMenu extends Component<
             getBooleanFF(
               'platform.editor.table.new-cell-context-menu-styling',
             ) ? (
-              <SplitCellIcon />
+              <span css={elementBeforeIconStyles}>
+                <SplitCellIcon />
+              </span>
             ) : undefined,
         },
       ] as MenuItem[];
@@ -311,7 +317,9 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <AddColRightIcon />
+          <span css={elementBeforeIconStyles}>
+            <AddColRightIcon />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -335,7 +343,9 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <AddRowBelowIcon />
+          <span css={elementBeforeIconStyles}>
+            <AddRowBelowIcon />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -360,11 +370,13 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <CrossCircleIcon
-            label={formatMessage(messages.clearCells, {
-              0: Math.max(noOfColumns, noOfRows),
-            })}
-          />
+          <span css={elementBeforeIconStyles}>
+            <CrossCircleIcon
+              label={formatMessage(messages.clearCells, {
+                0: Math.max(noOfColumns, noOfRows),
+              })}
+            />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -388,11 +400,13 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <RemoveIcon
-            label={formatMessage(messages.removeColumns, {
-              0: noOfColumns,
-            })}
-          />
+          <span css={elementBeforeIconStyles}>
+            <RemoveIcon
+              label={formatMessage(messages.removeColumns, {
+                0: noOfColumns,
+              })}
+            />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -416,11 +430,13 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <RemoveIcon
-            label={formatMessage(messages.removeRows, {
-              0: noOfRows,
-            })}
-          />
+          <span css={elementBeforeIconStyles}>
+            <RemoveIcon
+              label={formatMessage(messages.removeRows, {
+                0: noOfRows,
+              })}
+            />
+          </span>
         ) : undefined,
     } as MenuItem;
   };

package/src/ui/FloatingContextualMenu/styles.ts

@@ -13,6 +13,11 @@ export const cellColourPreviewStyles = (selectedColor: string) => css`
   }
 `;
 
+export const elementBeforeIconStyles = css`
+  margin-right: ${token('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 = css`

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -77,6 +77,7 @@ import { dragMenuDropdownWidth } from '../consts';
 import {
   cellColourPreviewStyles,
   dragMenuBackgroundColorStyles,
+  elementBeforeIconStyles,
   toggleStyles,
 } from './styles';
 
@@ -230,18 +231,14 @@ const convertToDropdownItems = (
       value: { name: item.id },
       isDisabled: item.disabled,
       elemBefore: item.icon ? (
-        <div
-          style={{
-            display: 'flex',
-          }}
-        >
+        <span css={elementBeforeIconStyles}>
           <item.icon
             label={formatMessage(
               MapDragMenuOptionIdToMessage[item.id].message,
               options,
             )}
           />
-        </div>
+        </span>
       ) : undefined,
       elemAfter: item.keymap ? (
         <div css={shortcutStyle}>{item.keymap}</div>
@@ -349,10 +346,12 @@ export const DragMenu = ({
       content: formatMessage(messages.backgroundColor),
       value: { name: 'background' },
       elemBefore: (
-        <EditorBackgroundColorIcon
-          label={formatMessage(messages.backgroundColor)}
-          size="medium"
-        />
+        <span css={elementBeforeIconStyles}>
+          <EditorBackgroundColorIcon
+            label={formatMessage(messages.backgroundColor)}
+            size="medium"
+          />
+        </span>
       ),
       elemAfter: (
         <div

package/src/ui/FloatingDragMenu/styles.ts

@@ -13,6 +13,11 @@ export const cellColourPreviewStyles = (selectedColor: string) => css`
   }
 `;
 
+export const elementBeforeIconStyles = css`
+  margin-right: ${token('space.negative.075', '-6px')};
+  display: flex;
+`;
+
 export const dragMenuBackgroundColorStyles = css`
   .${ClassName.DRAG_SUBMENU} {
     border-radius: ${token('border.radius', '3px')};