@atlaskit/editor-plugin-table 22.3.0 → 22.3.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 22.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.3.1
+
+### Patch Changes
+
+- [`6403e27aa3327`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6403e27aa3327) -
+  Add the experimental table row menu structure, keyboard shortcut hints, and shared table menu
+  items. Expose table row menu icons through editor-toolbar. Ensure the UI control registry is
+  available before table row menu items are registered.
+- Updated dependencies
+
 ## 22.3.0
 
 ### Minor Changes

package/dist/cjs/tablePlugin.js

@@ -52,6 +52,7 @@ var _analytics2 = require("./pm-plugins/utils/analytics");
 var _create = require("./pm-plugins/utils/create");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
 var _ContentComponent = require("./ui/ContentComponent");
+var _getRowMenuComponents = require("./ui/TableMenu/row/getRowMenuComponents");
 var _toolbar = require("./ui/toolbar");
 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; }
@@ -91,6 +92,10 @@ var tablePlugin = function tablePlugin(_ref) {
   var isTableSelectorEnabled =
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getRowMenuComponents.getRowMenuComponents)());
+  }
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access

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

@@ -10,9 +10,13 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../../types");
 var _consts = require("../consts");
+var _RowMenu = require("../TableMenu/row/RowMenu");
+var _consts2 = require("../TableMenu/shared/consts");
 var _DragMenu = _interopRequireDefault(require("./DragMenu"));
+var rowMenuOffset = _consts.dragTableInsertColumnButtonSize + 4;
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var _getEditorFeatureFlag;
   var mountPoint = _ref.mountPoint,
@@ -39,7 +43,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }
   var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7');
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
@@ -57,7 +60,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: _consts.dragMenuDropdownWidth,
+    fitWidth: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? _consts2.newMenuWidth : _consts.dragMenuDropdownWidth,
     fitHeight: _consts.tablePopupMenuFitHeight
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
@@ -65,9 +68,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: inStickyMode ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: offset,
+    offset: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? [rowMenuOffset, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
+  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_RowMenu.RowMenu, {
+    api: api
+  }) : /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,

package/dist/cjs/ui/TableMenu/row/RowMenu.compiled.css

@@ -0,0 +1,6 @@
+
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bsb1178{width:280px}
+._1reo15vq{overflow-x:hidden}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

package/dist/cjs/ui/TableMenu/row/RowMenu.js

@@ -0,0 +1,35 @@
+/* RowMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowMenu = void 0;
+require("./RowMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _keys = require("./keys");
+var rowMenuContainerStyles = {
+  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+};
+var RowMenu = exports.RowMenu = function RowMenu(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  var api = _ref.api;
+  var rowMenuComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_keys.ROW_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var surface = rowMenuComponents.find(function (c) {
+    return c.type === _keys.ROW_MENU.type;
+  });
+  if (!surface) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: rowMenuContainerStyles.container,
+    testId: "row-handle-menu"
+  }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
+    surface: surface,
+    components: rowMenuComponents
+  }));
+};

package/dist/cjs/ui/TableMenu/row/RowMenuItems.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberedRowsToggleItem = exports.MoveRowUpItem = exports.MoveRowDownItem = exports.HeaderRowToggleItem = exports.DeleteRowItem = exports.AddRowBelowItem = exports.AddRowAboveItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
+var HeaderRowToggleItem = exports.HeaderRowToggleItem = function HeaderRowToggleItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: "row-menu-header-row-toggle",
+    elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
+      id: "row-menu-toggle-header-row",
+      label: formatMessage(_messages.tableMessages.headerRow),
+      isChecked: false
+    })
+  }, formatMessage(_messages.tableMessages.headerRow));
+};
+var NumberedRowsToggleItem = exports.NumberedRowsToggleItem = function NumberedRowsToggleItem() {
+  var _useIntl2 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: "row-menu-numbered-rows-toggle",
+    elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
+      id: "row-menu-toggle-numbered-rows",
+      label: formatMessage(_messages.tableMessages.numberedRows),
+      isChecked: false
+    })
+  }, formatMessage(_messages.tableMessages.numberedRows));
+};
+var getMoveRowUpShortcut = function getMoveRowUpShortcut() {
+  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowUp : _keymaps.moveRowUpOld);
+};
+var getMoveRowDownShortcut = function getMoveRowDownShortcut() {
+  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveRowDown : _keymaps.moveRowDownOld);
+};
+var AddRowAboveItem = exports.AddRowAboveItem = function AddRowAboveItem() {
+  var _tooltip;
+  var _useIntl3 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl3.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: "row-menu-add-row-above",
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowAddAboveIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.addRowBefore)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.addRowAbove));
+};
+var AddRowBelowItem = exports.AddRowBelowItem = function AddRowBelowItem() {
+  var _tooltip2;
+  var _useIntl4 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl4.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: "row-menu-add-row-below",
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowAddBelowIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip2 = (0, _keymaps.tooltip)(_keymaps.addRowAfter)) !== null && _tooltip2 !== void 0 ? _tooltip2 : ''
+    })
+  }, formatMessage(_messages.tableMessages.addRowBelow));
+};
+var MoveRowUpItem = exports.MoveRowUpItem = function MoveRowUpItem() {
+  var _getMoveRowUpShortcut;
+  var _useIntl5 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl5.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: "row-menu-move-row-up",
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveUpIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowUpShortcut = getMoveRowUpShortcut()) !== null && _getMoveRowUpShortcut !== void 0 ? _getMoveRowUpShortcut : ''
+    })
+  }, formatMessage(_messages.tableMessages.moveRowUp, {
+    0: 1
+  }));
+};
+var MoveRowDownItem = exports.MoveRowDownItem = function MoveRowDownItem() {
+  var _getMoveRowDownShortc;
+  var _useIntl6 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl6.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: "row-menu-move-row-down",
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableRowMoveDownIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowDownShortc = getMoveRowDownShortcut()) !== null && _getMoveRowDownShortc !== void 0 ? _getMoveRowDownShortc : ''
+    })
+  }, formatMessage(_messages.tableMessages.moveRowDown, {
+    0: 1
+  }));
+};
+var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem() {
+  var _tooltip3;
+  var _useIntl7 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl7.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: "row-menu-delete-row",
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip3 = (0, _keymaps.tooltip)(_keymaps.deleteRow)) !== null && _tooltip3 !== void 0 ? _tooltip3 : ''
+    })
+  }, formatMessage(_messages.tableMessages.removeRows, {
+    0: 1
+  }));
+};

package/dist/cjs/ui/TableMenu/row/getRowMenuComponents.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRowMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _BackgroundColorItem = require("../shared/items/BackgroundColorItem");
+var _ClearCellsItem = require("../shared/items/ClearCellsItem");
+var _keys = require("./keys");
+var _RowMenuItems = require("./RowMenuItems");
+/**
+ * Returns the RegisterComponent[] array defining the row menu surface.
+ *
+ * This is a **UI-only stub** — all items are always visible with no conditional
+ * logic and no wired actions. Functional behaviour (actions, conditional visibility)
+ * will be connected in follow-up tickets.
+ */
+var getRowMenuComponents = exports.getRowMenuComponents = function getRowMenuComponents() {
+  return [
+  // --- Menu surface ---
+  {
+    type: _keys.ROW_MENU.type,
+    key: _keys.ROW_MENU.key
+  },
+  // --- Toggle section (Header row, Numbered rows) ---
+  {
+    type: _keys.ROW_TOGGLE_SECTION.type,
+    key: _keys.ROW_TOGGLE_SECTION.key,
+    parents: [{
+      type: _keys.ROW_MENU.type,
+      key: _keys.ROW_MENU.key,
+      rank: _keys.ROW_SECTION_RANK[_keys.ROW_TOGGLE_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: _keys.HEADER_ROW_TOGGLE_ITEM.type,
+    key: _keys.HEADER_ROW_TOGGLE_ITEM.key,
+    parents: [{
+      type: _keys.ROW_TOGGLE_SECTION.type,
+      key: _keys.ROW_TOGGLE_SECTION.key,
+      rank: _keys.TOGGLE_SECTION_ITEM_RANK[_keys.HEADER_ROW_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.HeaderRowToggleItem, null);
+    }
+  }, {
+    type: _keys.NUMBERED_ROWS_TOGGLE_ITEM.type,
+    key: _keys.NUMBERED_ROWS_TOGGLE_ITEM.key,
+    parents: [{
+      type: _keys.ROW_TOGGLE_SECTION.type,
+      key: _keys.ROW_TOGGLE_SECTION.key,
+      rank: _keys.TOGGLE_SECTION_ITEM_RANK[_keys.NUMBERED_ROWS_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.NumberedRowsToggleItem, null);
+    }
+  },
+  // --- Background color section ---
+  {
+    type: _keys.ROW_BACKGROUND_SECTION.type,
+    key: _keys.ROW_BACKGROUND_SECTION.key,
+    parents: [{
+      type: _keys.ROW_MENU.type,
+      key: _keys.ROW_MENU.key,
+      rank: _keys.ROW_SECTION_RANK[_keys.ROW_BACKGROUND_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.BACKGROUND_COLOR_ITEM.type,
+    key: _keys.BACKGROUND_COLOR_ITEM.key,
+    parents: [{
+      type: _keys.ROW_BACKGROUND_SECTION.type,
+      key: _keys.ROW_BACKGROUND_SECTION.key,
+      rank: _keys.BACKGROUND_SECTION_ITEM_RANK[_keys.BACKGROUND_COLOR_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, {
+        testId: "row-menu-background-color"
+      });
+    }
+  },
+  // --- Add / Move section ---
+  {
+    type: _keys.ROW_ADD_SECTION.type,
+    key: _keys.ROW_ADD_SECTION.key,
+    parents: [{
+      type: _keys.ROW_MENU.type,
+      key: _keys.ROW_MENU.key,
+      rank: _keys.ROW_SECTION_RANK[_keys.ROW_ADD_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.ADD_ROW_ABOVE_ITEM.type,
+    key: _keys.ADD_ROW_ABOVE_ITEM.key,
+    parents: [{
+      type: _keys.ROW_ADD_SECTION.type,
+      key: _keys.ROW_ADD_SECTION.key,
+      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.ADD_ROW_ABOVE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.AddRowAboveItem, null);
+    }
+  }, {
+    type: _keys.ADD_ROW_BELOW_ITEM.type,
+    key: _keys.ADD_ROW_BELOW_ITEM.key,
+    parents: [{
+      type: _keys.ROW_ADD_SECTION.type,
+      key: _keys.ROW_ADD_SECTION.key,
+      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.ADD_ROW_BELOW_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.AddRowBelowItem, null);
+    }
+  }, {
+    type: _keys.MOVE_ROW_UP_ITEM.type,
+    key: _keys.MOVE_ROW_UP_ITEM.key,
+    parents: [{
+      type: _keys.ROW_ADD_SECTION.type,
+      key: _keys.ROW_ADD_SECTION.key,
+      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.MOVE_ROW_UP_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.MoveRowUpItem, null);
+    }
+  }, {
+    type: _keys.MOVE_ROW_DOWN_ITEM.type,
+    key: _keys.MOVE_ROW_DOWN_ITEM.key,
+    parents: [{
+      type: _keys.ROW_ADD_SECTION.type,
+      key: _keys.ROW_ADD_SECTION.key,
+      rank: _keys.ADD_SECTION_ITEM_RANK[_keys.MOVE_ROW_DOWN_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.MoveRowDownItem, null);
+    }
+  },
+  // --- Danger section (Clear cells, Delete row) ---
+  {
+    type: _keys.ROW_DANGER_SECTION.type,
+    key: _keys.ROW_DANGER_SECTION.key,
+    parents: [{
+      type: _keys.ROW_MENU.type,
+      key: _keys.ROW_MENU.key,
+      rank: _keys.ROW_SECTION_RANK[_keys.ROW_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.CLEAR_CELLS_ITEM.type,
+    key: _keys.CLEAR_CELLS_ITEM.key,
+    parents: [{
+      type: _keys.ROW_DANGER_SECTION.type,
+      key: _keys.ROW_DANGER_SECTION.key,
+      rank: _keys.DANGER_SECTION_ITEM_RANK[_keys.CLEAR_CELLS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_ClearCellsItem.ClearCellsItem, {
+        testId: "row-menu-clear-cells"
+      });
+    }
+  }, {
+    type: _keys.DELETE_ROW_ITEM.type,
+    key: _keys.DELETE_ROW_ITEM.key,
+    parents: [{
+      type: _keys.ROW_DANGER_SECTION.type,
+      key: _keys.ROW_DANGER_SECTION.key,
+      rank: _keys.DANGER_SECTION_ITEM_RANK[_keys.DELETE_ROW_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_RowMenuItems.DeleteRowItem, null);
+    }
+  }];
+};

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOGGLE_SECTION_ITEM_RANK = exports.ROW_TOGGLE_SECTION = exports.ROW_SECTION_RANK = exports.ROW_MENU = exports.ROW_DANGER_SECTION = exports.ROW_BACKGROUND_SECTION = exports.ROW_ADD_SECTION = exports.NUMBERED_ROWS_TOGGLE_ITEM = exports.MOVE_ROW_UP_ITEM = exports.MOVE_ROW_DOWN_ITEM = exports.HEADER_ROW_TOGGLE_ITEM = exports.DELETE_ROW_ITEM = exports.DANGER_SECTION_ITEM_RANK = exports.CLEAR_CELLS_ITEM = exports.BACKGROUND_SECTION_ITEM_RANK = exports.BACKGROUND_COLOR_ITEM = exports.ADD_SECTION_ITEM_RANK = exports.ADD_ROW_BELOW_ITEM = exports.ADD_ROW_ABOVE_ITEM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+// --- Menu surface ---
+
+var ROW_MENU = exports.ROW_MENU = {
+  type: 'menu',
+  key: 'row-handle-menu'
+};
+
+// --- Sections ---
+
+var ROW_TOGGLE_SECTION = exports.ROW_TOGGLE_SECTION = {
+  type: 'menu-section',
+  key: 'row-toggle-section'
+};
+var ROW_BACKGROUND_SECTION = exports.ROW_BACKGROUND_SECTION = {
+  type: 'menu-section',
+  key: 'row-background-section'
+};
+var ROW_ADD_SECTION = exports.ROW_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'row-add-section'
+};
+var ROW_DANGER_SECTION = exports.ROW_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'row-danger-section'
+};
+var ROW_SECTION_RANK = exports.ROW_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ROW_TOGGLE_SECTION.key, 100), ROW_BACKGROUND_SECTION.key, 200), ROW_ADD_SECTION.key, 300), ROW_DANGER_SECTION.key, 400);
+var HEADER_ROW_TOGGLE_ITEM = exports.HEADER_ROW_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'header-row-toggle'
+};
+var NUMBERED_ROWS_TOGGLE_ITEM = exports.NUMBERED_ROWS_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'numbered-rows-toggle'
+};
+var BACKGROUND_COLOR_ITEM = exports.BACKGROUND_COLOR_ITEM = {
+  type: 'menu-item',
+  key: 'background-color'
+};
+var ADD_ROW_ABOVE_ITEM = exports.ADD_ROW_ABOVE_ITEM = {
+  type: 'menu-item',
+  key: 'add-row-above'
+};
+var ADD_ROW_BELOW_ITEM = exports.ADD_ROW_BELOW_ITEM = {
+  type: 'menu-item',
+  key: 'add-row-below'
+};
+var MOVE_ROW_UP_ITEM = exports.MOVE_ROW_UP_ITEM = {
+  type: 'menu-item',
+  key: 'move-row-up'
+};
+var MOVE_ROW_DOWN_ITEM = exports.MOVE_ROW_DOWN_ITEM = {
+  type: 'menu-item',
+  key: 'move-row-down'
+};
+var CLEAR_CELLS_ITEM = exports.CLEAR_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'clear-cells'
+};
+var DELETE_ROW_ITEM = exports.DELETE_ROW_ITEM = {
+  type: 'menu-item',
+  key: 'delete-row'
+};
+
+// --- Item ranks within their sections ---
+
+var TOGGLE_SECTION_ITEM_RANK = exports.TOGGLE_SECTION_ITEM_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, HEADER_ROW_TOGGLE_ITEM.key, 100), NUMBERED_ROWS_TOGGLE_ITEM.key, 200);
+var BACKGROUND_SECTION_ITEM_RANK = exports.BACKGROUND_SECTION_ITEM_RANK = (0, _defineProperty2.default)({}, BACKGROUND_COLOR_ITEM.key, 100);
+var ADD_SECTION_ITEM_RANK = exports.ADD_SECTION_ITEM_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ADD_ROW_ABOVE_ITEM.key, 100), ADD_ROW_BELOW_ITEM.key, 200), MOVE_ROW_UP_ITEM.key, 300), MOVE_ROW_DOWN_ITEM.key, 400);
+var DANGER_SECTION_ITEM_RANK = exports.DANGER_SECTION_ITEM_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, CLEAR_CELLS_ITEM.key, 100), DELETE_ROW_ITEM.key, 200);

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

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.newMenuWidth = void 0;
+var newMenuWidth = exports.newMenuWidth = 280;

package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1bsbdlk8{width:14px}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._4cvr1h6o{align-items:center}
+._4t3idlk8{height:14px}

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

@@ -0,0 +1,68 @@
+/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BackgroundColorItem = void 0;
+require("./BackgroundColorItem.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _compiled = require("@atlaskit/primitives/compiled");
+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 colorPaletteColumns = 7;
+var colorPaletteStyles = {
+  container: "_1rjcu2gc",
+  elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
+  colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
+};
+var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem(_ref) {
+  var testId = _ref.testId;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selectedColor = '#ffffff';
+  var onClick = (0, _react.useCallback)(function () {}, []);
+  var colorPreviewStyle = (0, _react.useMemo)(function () {
+    return {
+      backgroundColor: selectedColor
+    };
+  }, [selectedColor]);
+  var paletteOptions = (0, _react.useMemo)(function () {
+    return {
+      palette: _uiColor.cellBackgroundColorPalette,
+      paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
+      hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    testId: testId,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.PaintBucketIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: colorPaletteStyles.elemAfter
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: colorPreviewStyle,
+      className: (0, _runtime.ax)([colorPaletteStyles.colorPreview])
+    }), /*#__PURE__*/_react.default.createElement(_editorToolbar.NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    })),
+    text: formatMessage(_messages.tableMessages.backgroundColor)
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: colorPaletteStyles.container
+  }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
+    cols: colorPaletteColumns,
+    onClick: onClick,
+    selectedColor: selectedColor,
+    paletteOptions: paletteOptions
+  })));
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClearCellsItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
+  var _tooltip;
+  var testId = _ref.testId;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    testId: testId,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.CrossIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.clearCells, {
+    0: 1
+  }));
+};