@atlaskit/editor-plugin-table 22.4.18 → 22.4.20

package/dist/cjs/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalAlignDropdownItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var _verticalAlignUtils = require("./verticalAlignUtils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
+  var _useTableMenuContext;
+  var api = _ref.api,
+    Icon = _ref.icon,
+    label = _ref.label,
+    value = _ref.value;
+  var _ref2 = (_useTableMenuContext = (0, _TableMenuContext.useTableMenuContext)()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selectedValign = (0, _react.useMemo)(function () {
+    return (0, _verticalAlignUtils.getSelectedCellValign)(editorView);
+  }, [editorView]);
+  var handleClick = (0, _react.useCallback)(function () {
+    if (!editorView || !api) {
+      return;
+    }
+    var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      (0, _commands.setMultipleCellAttrsEditorCommand)({
+        valign: value
+      }, targetCellPosition)({
+        tr: tr
+      });
+      (0, _commands.closeActiveTableMenu)()({
+        tr: tr
+      });
+      return tr;
+    });
+    api.core.actions.focus();
+  }, [api, editorView, value]);
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    isSelected: selectedValign === value,
+    onClick: handleClick,
+    role: "menuitemradio"
+  }, formatMessage(label));
+};

package/dist/cjs/ui/TableMenu/cell/items/VerticalAlignNestedMenu.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalAlignNestedMenu = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _alignPositionBottom = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-bottom"));
+var _alignPositionCenterVertical = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-center-vertical"));
+var _alignPositionTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-top"));
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var _verticalAlignUtils = require("./verticalAlignUtils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var getTriggerIcon = function getTriggerIcon(valign) {
+  switch (valign) {
+    case 'middle':
+      return _alignPositionCenterVertical.default;
+    case 'bottom':
+      return _alignPositionBottom.default;
+    case 'top':
+    default:
+      return _alignPositionTop.default;
+  }
+};
+var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
+  var _useTableMenuContext;
+  var children = _ref.children;
+  var _ref2 = (_useTableMenuContext = (0, _TableMenuContext.useTableMenuContext)()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selectedValign = (0, _react.useMemo)(function () {
+    return (0, _verticalAlignUtils.getSelectedCellValign)(editorView);
+  }, [editorView]);
+  var TriggerIcon = getTriggerIcon(selectedValign);
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(TriggerIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    }),
+    text: formatMessage(_messages.tableMessages.cellAlignment)
+  }, children);
+};

package/dist/cjs/ui/TableMenu/cell/items/verticalAlignUtils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectedCellValign = void 0;
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var getNormalizedValign = function getNormalizedValign(valign) {
+  return valign !== null && valign !== void 0 ? valign : 'top';
+};
+var getSelectedCellValign = exports.getSelectedCellValign = function getSelectedCellValign(editorView) {
+  if (!editorView) {
+    return 'top';
+  }
+  var state = editorView.state;
+  var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+    targetCellPosition = _getPluginState.targetCellPosition;
+  var cell = typeof targetCellPosition === 'number' ? state.doc.nodeAt(targetCellPosition) : undefined;
+  return getNormalizedValign(cell === null || cell === void 0 ? void 0 : cell.attrs.valign);
+};

package/dist/cjs/ui/TableMenu/cell/keys.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPLIT_CELL_ITEM = exports.MERGE_CELLS_ITEM = exports.CELL_MENU_RANK = exports.CELL_MENU = exports.CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION = exports.CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION = void 0;
+exports.VERTICAL_ALIGN_TOP_ITEM = exports.VERTICAL_ALIGN_MIDDLE_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_ITEM = exports.SPLIT_CELL_ITEM = exports.MERGE_CELLS_ITEM = exports.CELL_MENU_RANK = exports.CELL_MENU = exports.CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION = exports.CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _keys = require("../shared/keys");
 // --- Menu surface ---
@@ -33,8 +33,30 @@ var SPLIT_CELL_ITEM = exports.SPLIT_CELL_ITEM = {
   type: 'menu-item',
   key: 'split-cell'
 };
+var VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_MENU = {
+  type: 'nested-menu',
+  key: 'vertical-align'
+};
+var VERTICAL_ALIGN_MENU_SECTION = exports.VERTICAL_ALIGN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'vertical-align-section'
+};
+var VERTICAL_ALIGN_TOP_ITEM = exports.VERTICAL_ALIGN_TOP_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-top'
+};
+var VERTICAL_ALIGN_MIDDLE_ITEM = exports.VERTICAL_ALIGN_MIDDLE_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-middle'
+};
+var VERTICAL_ALIGN_BOTTOM_ITEM = exports.VERTICAL_ALIGN_BOTTOM_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-bottom'
+};
 
 // --- Item ranks within their sections ---
 
-var CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100), MERGE_CELLS_ITEM.key, 200), SPLIT_CELL_ITEM.key, 300);
+var CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200), MERGE_CELLS_ITEM.key, 300), SPLIT_CELL_ITEM.key, 400);
+var VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU_RANK = (0, _defineProperty2.default)({}, VERTICAL_ALIGN_MENU_SECTION.key, 100);
+var VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_TOP_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_ITEM.key, 300);
 var CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION_RANK = (0, _defineProperty2.default)({}, _keys.CLEAR_CELLS_ITEM.key, 100);

package/dist/cjs/ui/TableMenu/column/items/AddColumnLeftItem.js

@@ -13,6 +13,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var AddColumnLeftItem = exports.AddColumnLeftItem = function AddColumnLeftItem(_ref) {
@@ -45,6 +46,8 @@ var AddColumnLeftItem = exports.AddColumnLeftItem = function AddColumnLeftItem(_
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     (0, _commandsWithAnalytics.insertColumnWithAnalytics)(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -13,6 +13,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var AddColumnRightItem = exports.AddColumnRightItem = function AddColumnRightItem(_ref) {
@@ -45,6 +46,8 @@ var AddColumnRightItem = exports.AddColumnRightItem = function AddColumnRightIte
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     (0, _commandsWithAnalytics.insertColumnWithAnalytics)(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/column/items/DeleteColumnItem.js

@@ -64,6 +64,8 @@ var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem(_ref
     }
     var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect)(editorView.state, editorView.dispatch, editorView);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/column/items/DistributeColumnsItem.js

@@ -12,6 +12,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _resizeState = require("../../../../pm-plugins/table-resizing/utils/resize-state");
 var _TableMenuContext = require("../../shared/TableMenuContext");
@@ -54,6 +55,8 @@ var DistributeColumnsItem = exports.DistributeColumnsItem = function DistributeC
       return;
     }
     (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowDistributeColumns(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount)) {
     return null;

package/dist/cjs/ui/TableMenu/column/items/MoveColumnLeftItem.js

@@ -14,6 +14,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _tableColumnMoveLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-left"));
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
 var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
 var _selection = require("../../../../pm-plugins/utils/selection");
@@ -48,6 +49,8 @@ var MoveColumnLeftItem = exports.MoveColumnLeftItem = function MoveColumnLeftIte
       return;
     }
     (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_COLUMN, (0, _selection.getSelectedColumnIndexes)(selectionRect), selectionRect.left - 1)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnLeft(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn)) {
     return null;

package/dist/cjs/ui/TableMenu/column/items/MoveColumnRightItem.js

@@ -13,6 +13,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
 var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
 var _selection = require("../../../../pm-plugins/utils/selection");
@@ -47,6 +48,8 @@ var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRight
       return;
     }
     (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_COLUMN, (0, _selection.getSelectedColumnIndexes)(selectionRect), selectionRect.right)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveColumnRight(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastColumn)) {
     return null;

package/dist/cjs/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -12,6 +12,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingItem(_ref) {
@@ -32,6 +33,8 @@ var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingIte
       return;
     }
     (0, _commandsWithAnalytics.sortColumnWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, _customSteps.TableSortOrder.DESC)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/column/items/SortIncreasingItem.js

@@ -12,6 +12,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingItem(_ref) {
@@ -32,6 +33,8 @@ var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingIte
       return;
     }
     (0, _commandsWithAnalytics.sortColumnWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, _customSteps.TableSortOrder.ASC)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/row/items/AddRowAboveItem.js

@@ -12,6 +12,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var AddRowAboveItem = exports.AddRowAboveItem = function AddRowAboveItem(props) {
@@ -35,6 +36,8 @@ var AddRowAboveItem = exports.AddRowAboveItem = function AddRowAboveItem(props)
       index: index,
       moveCursorToInsertedRow: true
     })(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/row/items/AddRowBelowItem.js

@@ -12,6 +12,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
 var AddRowBelowItem = exports.AddRowBelowItem = function AddRowBelowItem(props) {
@@ -35,6 +36,8 @@ var AddRowBelowItem = exports.AddRowBelowItem = function AddRowBelowItem(props)
       index: index,
       moveCursorToInsertedRow: true
     })(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/row/items/DeleteRowItem.js

@@ -59,6 +59,8 @@ var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem(props) {
       return;
     }
     (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/TableMenu/row/items/MoveRowDownItem.js

@@ -13,6 +13,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
 var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
 var _selection = require("../../../../pm-plugins/utils/selection");
@@ -47,6 +48,8 @@ var MoveRowDownItem = exports.MoveRowDownItem = function MoveRowDownItem(props)
       return;
     }
     (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_ROW, (0, _selection.getSelectedRowIndexes)(selectionRect), selectionRect.bottom)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowDown(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastRow)) {
     return null;

package/dist/cjs/ui/TableMenu/row/items/MoveRowUpItem.js

@@ -13,6 +13,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
 var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
 var _selection = require("../../../../pm-plugins/utils/selection");
@@ -47,6 +48,8 @@ var MoveRowUpItem = exports.MoveRowUpItem = function MoveRowUpItem(props) {
       return;
     }
     (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_ROW, (0, _selection.getSelectedRowIndexes)(selectionRect), selectionRect.top - 1)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowUp(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow)) {
     return null;

package/dist/cjs/ui/TableMenu/shared/TableMenu.js

@@ -1,4 +1,3 @@
-/* TableMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -7,24 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableMenu = void 0;
-require("./TableMenu.compiled.css");
-var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
-var _compiled = require("@atlaskit/primitives/compiled");
 var _splitCell = require("../../../pm-plugins/commands/split-cell");
 var _merge = require("../../../pm-plugins/transforms/merge");
 var _TableMenuContext = require("./TableMenuContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
-};
 var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
@@ -73,10 +67,7 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
   }
   return /*#__PURE__*/_react.default.createElement(_TableMenuContext.TableMenuProvider, {
     value: tableMenuContext
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: tableMenuContainerStyles.container,
-    testId: surface.key
-  }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
+  }, /*#__PURE__*/_react.default.createElement(_toolbarMenuContainer.ToolbarMenuContainer, null, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     surface: surface,
     components: components
   })));

package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -28,7 +28,7 @@ var colorPaletteStyles = {
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
 var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem(_ref) {
-  var _useTableMenuContext, _api$analytics2;
+  var _useTableMenuContext;
   var api = _ref.api;
   var _ref2 = (_useTableMenuContext = (0, _TableMenuContext.useTableMenuContext)()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
     editorView = _ref2.editorView;
@@ -50,8 +50,9 @@ var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColor
       return;
     }
     (0, _commandsWithAnalytics.setColorWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
-    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
-  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
+  }, [api, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = (0, _react.useMemo)(function () {
     return {

package/dist/cjs/ui/TableMenu/shared/items/ClearCellsItem.js

@@ -32,7 +32,8 @@ var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
     var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
       targetCellPosition = _getPluginState.targetCellPosition;
     (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
-    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/toolbar.js

@@ -55,6 +55,7 @@ var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-
 var _types = require("../types");
 var _FloatingAlignmentButtons = require("./FloatingAlignmentButtons/FloatingAlignmentButtons");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
@@ -873,10 +874,10 @@ var isLayoutOptionDisabledImpl = function isLayoutOptionDisabledImpl(selectedNod
 var getMemoizedIsLayoutOptionDisabled = (0, _memoizeOne.default)(isLayoutOptionDisabledImpl, function (_ref6, _ref7) {
   var _ref8 = (0, _toArray2.default)(_ref6),
     prevNode = _ref8[0],
-    prevRest = _ref8.slice(1);
+    prevRest = _arrayLikeToArray(_ref8).slice(1);
   var _ref9 = (0, _toArray2.default)(_ref7),
     nextNode = _ref9[0],
-    nextRest = _ref9.slice(1);
+    nextRest = _arrayLikeToArray(_ref9).slice(1);
   // Only node needs special comparison (attrs only), rest use reference equality
   var nodeEqual = (0, _isEqual.default)(prevNode.attrs, nextNode.attrs);
   var restEqual = prevRest.every(function (val, idx) {

package/dist/es2019/nodeviews/TableCell.js

@@ -27,6 +27,13 @@ function delayUntilIdle(cb) {
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 const cssVariablePattern = /^VAR\(--.*\)$/;
+const getCellDomAttrsForTableMenuUpdates = node => {
+  const attrs = getCellDomAttrs(node);
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && node.attrs.valign) {
+    attrs['data-valign'] = node.attrs.valign;
+  }
+  return attrs;
+};
 export default class TableCell extends TableNodeView {
   constructor(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     super(node, view, getPos, eventDispatcher);
@@ -147,8 +154,8 @@ export default class TableCell extends TableNodeView {
     if (this.node.type !== node.type) {
       return false;
     }
-    const attrs = getCellDomAttrs(this.node);
-    const nextAttrs = getCellDomAttrs(node);
+    const attrs = getCellDomAttrsForTableMenuUpdates(this.node);
+    const nextAttrs = getCellDomAttrsForTableMenuUpdates(node);
     const {
       colspan,
       rowspan

package/dist/es2019/pm-plugins/commands/active-table-menu.js

@@ -1,20 +1,20 @@
-import { createCommand, getPluginState } from '../plugin-factory';
-export const closeActiveTableMenu = () => createCommand(state => {
-  const {
-    activeTableMenu
-  } = getPluginState(state);
-  if (!activeTableMenu || activeTableMenu.type === 'none') {
-    return false;
-  }
-  return {
+import { pluginKey } from '../plugin-key';
+export const closeActiveTableMenu = () => ({
+  tr
+}) => {
+  tr.setMeta(pluginKey, {
     type: 'SET_ACTIVE_TABLE_MENU',
     data: {
       activeTableMenu: {
         type: 'none'
       }
     }
-  };
-}, tr => tr.setMeta('addToHistory', false));
+  });
+  if (!tr.docChanged) {
+    tr.setMeta('addToHistory', false);
+  }
+  return tr;
+};
 const isSameActiveTableMenu = (current, next) => {
   if (!current || current.type !== next.type) {
     return false;
@@ -24,16 +24,17 @@ const isSameActiveTableMenu = (current, next) => {
   }
   return true;
 };
-export const toggleActiveTableMenu = activeTableMenu => createCommand(state => {
-  const {
-    activeTableMenu: currentActiveTableMenu
-  } = getPluginState(state);
-  return {
+export const toggleActiveTableMenu = (activeTableMenu, currentActiveTableMenu) => ({
+  tr
+}) => {
+  tr.setMeta(pluginKey, {
     type: 'SET_ACTIVE_TABLE_MENU',
     data: {
       activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
         type: 'none'
       } : activeTableMenu
     }
-  };
-}, tr => tr.setMeta('addToHistory', false));
+  });
+  tr.setMeta('addToHistory', false);
+  return tr;
+};

package/dist/es2019/pm-plugins/commands/commands-with-analytics.js

@@ -42,11 +42,19 @@ export const toggleActiveTableMenuWithAnalytics = editorAnalyticsAPI => (directi
     };
   })(editorAnalyticsAPI)((state, dispatch) => {
     if (dispatch) {
-      toggleActiveTableMenu({
+      const {
+        activeTableMenu: currentActiveTableMenu
+      } = getPluginState(state);
+      const newTr = toggleActiveTableMenu({
         type: direction,
         index,
         openedBy: trigger
-      })(state, dispatch);
+      }, currentActiveTableMenu)({
+        tr: state.tr
+      });
+      if (newTr) {
+        dispatch(newTr);
+      }
     }
     return true;
   });

package/dist/es2019/pm-plugins/commands/index.js

@@ -6,7 +6,7 @@ export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { closeActiveTableMenu, toggleActiveTableMenu } from './active-table-menu';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setMultipleCellAttrsEditorCommand, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';